/* ---------- ribbon ---------- */
  .draft-ribbon{
    position:sticky; top:0; z-index:100; background:var(--ink); color:var(--bone);
    font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; text-align:center; padding:7px 12px;
  }
  .draft-ribbon strong{color:var(--brass-soft);}

  /* ---------- header ---------- */
  .site-header{
    position:sticky; top:0; z-index:90; display:flex; align-items:center; justify-content:space-between;
    padding:14px var(--pad); background:rgba(242,234,217,0.92); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line); transition:box-shadow .3s ease;
  }
  .site-header.scrolled{box-shadow:0 8px 24px rgba(26,24,21,0.08);}
  .brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
  .brand img{height:38px;width:38px;border-radius:50%;object-fit:cover;}
  .brand-word{font-family:var(--font-display); font-weight:500; font-size:14.5px; letter-spacing:.05em; text-transform:uppercase; line-height:1.15;}
  .brand-word span:not(.i18n-text){display:block; font-size:9.5px; letter-spacing:.14em; color:var(--soy); font-family:var(--font-sans); font-weight:600; margin-top:2px;}
  nav.primary-nav{display:flex; align-items:center; gap:26px;}
  nav.primary-nav a{
    font-size:12px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--ink);
    font-weight:600; padding-bottom:3px; border-bottom:1px solid transparent; transition:border-color .2s ease, color .2s ease; white-space:nowrap;
  }
  nav.primary-nav a:hover, nav.primary-nav a.active{border-color:var(--chilli); color:var(--chilli);}
  .header-actions{display:flex; align-items:center; gap:12px;}
  .lang-switch{display:flex; align-items:center; gap:2px; font-size:11px; letter-spacing:.06em; font-weight:700;}
  .lang-switch a{color:var(--soy); text-decoration:none; padding:6px 7px; border-radius:2px; line-height:1; min-width:30px; text-align:center;}
  .lang-switch a:hover{background:var(--line);}
  .lang-switch a.active{background:var(--ink); color:var(--bone);}
  .lang-switch a:focus-visible{outline:2px solid var(--chilli); outline-offset:2px;}
  .lang-sep{color:var(--soy); opacity:.35; font-weight:400;}
  .btn{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; padding:10px 17px; border-radius:2px; border:1px solid var(--ink); transition:all .2s ease; cursor:pointer;}
  .btn-solid{background:var(--ink); color:var(--bone);}
  .btn-solid:hover{background:var(--chilli); border-color:var(--chilli); transform:translateY(-1px);}
  .btn-ghost{background:transparent; color:var(--ink);}
  .btn-ghost:hover{background:var(--ink); color:var(--bone);}
  .btn-ghost-light{border-color:var(--line-on-dark); color:var(--bone); background:transparent;}
  .btn-ghost-light:hover{background:var(--bone); color:var(--ink);}
  .chapter--dark .btn-solid, .chapter--soy .btn-solid{background:var(--bone); color:var(--ink); border-color:var(--bone);}
  .chapter--dark .btn-solid:hover, .chapter--soy .btn-solid:hover{background:var(--chilli); border-color:var(--chilli); color:var(--bone);}
  .nav-toggle{display:none; background:none; border:1px solid var(--ink); border-radius:2px; padding:8px 10px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; cursor:pointer;}
  @media (max-width:920px){
    nav.primary-nav{display:none;} .nav-toggle{display:inline-block;}
    .header-actions .btn-ghost{display:none;} .brand-word{font-size:12.5px;} .brand-word span:not(.i18n-text){display:none;}
    .site-header{padding:11px 16px; gap:8px;} .brand img{height:30px;width:30px;}
  }
  @media (max-width:480px){ .btn-solid{padding:9px 12px; font-size:10.5px;} .nav-toggle{padding:9px 10px; font-size:9.5px;} }

  /* mobile drawer */
  .mobile-drawer{
    position:fixed; inset:0; z-index:150; background:var(--ink); color:var(--bone);
    display:flex; flex-direction:column; padding:24px; transform:translateX(100%); transition:transform .35s var(--ease);
  }
  .mobile-drawer{visibility:hidden; transition:transform .35s var(--ease), visibility 0s linear .35s;}
  .mobile-drawer.open{transform:translateX(0); visibility:visible; transition:transform .35s var(--ease), visibility 0s;}
  html.drawer-open, html.drawer-open body{overflow:hidden;}
  .mobile-drawer a{color:var(--bone); text-decoration:none; font-family:var(--font-display); font-size:26px; padding:12px 0; border-bottom:1px solid var(--line-on-dark);}
  .drawer-close{align-self:flex-end; background:none; border:1px solid var(--line-on-dark); color:var(--bone); padding:8px 12px; border-radius:2px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; margin-bottom:20px;}

  /* ---------- chapter label (floating, desktop) ---------- */
  .chapter-flag{
    position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:80;
    writing-mode:vertical-rl; text-orientation:mixed; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
    font-weight:700; color:var(--soy); opacity:.55; transition:opacity .4s ease;
  }
  @media (max-width:1100px){.chapter-flag{display:none;}}

  /* ---------- chapter shell ---------- */
  .chapter{position:relative; padding:104px var(--pad); border-bottom:1px solid var(--line); overflow:hidden;}
  .chapter--dark{background:var(--ink); color:var(--bone); border-color:var(--line-on-dark);}
  .chapter--dark .eyebrow{color:var(--brass-soft);}
  .chapter--soy{background:linear-gradient(180deg, var(--soy), var(--soy-2)); color:var(--bone); border-color:var(--line-on-dark);}
  .chapter--soy .eyebrow{color:var(--brass-soft);}

  /* Madam Dai Jun Snacks - a deliberately distinct sub-brand treatment: more
     immediate/energetic than the ink/soy restaurant chapters, but staying in-family
     (brass + chilli forward instead of a new colour). Signals "different expression
     of Madam Dai Jun" per the brand-architecture rule, without a full new brand. */
  .chapter--kiosk{
    background:
      radial-gradient(120% 90% at 85% -10%, rgba(2,111,56,0.30), transparent 55%),
      radial-gradient(90% 70% at 0% 110%, rgba(142,72,11,0.28), transparent 55%),
      linear-gradient(155deg, #12241b, #0b1510);
    color:var(--bone); border-color:var(--line-on-dark);
  }
  .chapter--kiosk .eyebrow{color:var(--brass-soft);}
  .chapter--kiosk .lede{color:var(--bone-deep);}
  .kiosk-sub-brand{
    display:inline-flex; align-items:center; gap:8px; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
    font-weight:700; color:var(--ink); background:var(--brass-soft); padding:5px 12px; border-radius:20px; margin-bottom:20px;
  }
  .kiosk-sub-brand::before{content:"●"; color:var(--chilli); font-size:8px;}
  h2.chapter-title.kiosk-title{
    font-family:var(--font-sans); font-weight:700; text-transform:uppercase; letter-spacing:.01em;
    font-size:clamp(28px,4vw,46px); max-width:20ch;
  }
  .kiosk-strip .frame{aspect-ratio:3/4; min-width:180px;}
  .kiosk-strip .frame.cup{background:
      radial-gradient(60% 60% at 50% 30%, rgba(2,111,56,0.18), transparent 65%),
      linear-gradient(160deg, #182c22, #0e1c15);}
  .kiosk-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px;}
  .kiosk-audience{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:36px;}
  @media (max-width:760px){.kiosk-audience{grid-template-columns:1fr;}}
  .kiosk-audience-card{border:1px solid var(--line-on-dark); border-radius:3px; padding:22px;}
  .kiosk-audience-card h4{font-family:var(--font-display); font-size:17px; margin:0 0 8px; color:var(--bone);}
  .kiosk-audience-card p{font-size:12.5px; color:var(--bone-deep); margin:0 0 14px;}
  .chapter-inner{max-width:var(--max); margin:0 auto; position:relative; z-index:2;}
  .eyebrow{font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--chilli); margin:0 0 14px; display:flex; align-items:center; gap:10px;}
  .eyebrow::before{content:""; width:22px; height:1px; background:currentColor; opacity:.6;}
  .chapter-number{font-family:var(--font-display); font-style:italic; font-size:13px; color:var(--soy); opacity:.55; letter-spacing:.04em; margin-bottom:8px;}
  .chapter--dark .chapter-number, .chapter--soy .chapter-number{color:var(--bone); opacity:.45;}
  h2.chapter-title{font-family:var(--font-display); font-weight:500; font-size:clamp(30px,4.4vw,54px); line-height:1.06; margin:0 0 22px; max-width:17ch;}
  .lede{font-family:var(--font-display); font-style:italic; font-size:clamp(17px,1.8vw,21px); line-height:1.55; max-width:640px; margin:0 0 22px; color:var(--soy);}
  .chapter--dark .lede, .chapter--soy .lede{color:var(--bone-deep);}
  .body-text{max-width:560px; font-size:15.5px; line-height:1.75;}
  .body-text p{margin:0 0 16px;}

  /* pending markers */
  .pending{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--brass); border:1px dashed var(--brass); padding:3px 9px; border-radius:2px;}
  .pending-block{border:1px dashed var(--brass); border-radius:3px; padding:16px 18px; font-size:13px; color:var(--soy); background:rgba(2,111,56,0.08); max-width:560px;}
  .chapter--dark .pending-block, .chapter--soy .pending-block, .chapter--kiosk .pending-block{color:var(--bone-deep); background:rgba(242,234,217,0.06); border-color:var(--brass-soft);}
  .chapter--dark .pending, .chapter--soy .pending, .chapter--kiosk .pending{color:var(--brass-soft); border-color:var(--brass-soft);}
  .chapter--dark .frame .frame-tick, .chapter--soy .frame .frame-tick{border-color:var(--brass-soft);}

  /* ---------- frame (elevated placeholder component) ---------- */
  .frame{
    position:relative; border-radius:2px; overflow:hidden; border:1px solid var(--line);
    background:
      radial-gradient(120% 100% at 20% 0%, rgba(2,111,56,0.10), transparent 60%),
      linear-gradient(150deg, var(--bone-deep) 0%, var(--bone) 65%);
    display:flex; align-items:center; justify-content:center; text-align:center; min-height:230px;
    transition:transform .5s var(--ease);
  }
  .chapter--dark .frame, .chapter--soy .frame{
    background: radial-gradient(120% 100% at 20% 0%, rgba(2,111,56,0.08), transparent 60%), linear-gradient(150deg, #192a22, #121e18);
    border-color:var(--line-on-dark);
  }
  @media (hover:hover){ .frame:hover{transform:scale(1.015);} }
  .frame .frame-tick{position:absolute; width:16px; height:16px; border-color:var(--brass); opacity:.55;}
  .frame .tl{top:10px; left:10px; border-top:1px solid; border-left:1px solid;}
  .frame .tr{top:10px; right:10px; border-top:1px solid; border-right:1px solid;}
  .frame .bl{bottom:10px; left:10px; border-bottom:1px solid; border-left:1px solid;}
  .frame .br{bottom:10px; right:10px; border-bottom:1px solid; border-right:1px solid;}
  .frame-label{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--soy); opacity:.8; padding:0 26px; max-width:280px;}
  .chapter--dark .frame-label, .chapter--soy .frame-label{color:var(--bone-deep);}
  .frame.tall{min-height:440px;} .frame.short{min-height:170px;}
  .frame-caption{font-size:11px; color:var(--soy); margin-top:9px; font-style:italic;}
  .chapter--dark .frame-caption, .chapter--soy .frame-caption{color:var(--bone-deep);}

  /* ---------- hero ---------- */
  .hero{padding:0; border-bottom:1px solid var(--line); background:var(--ink); position:relative;}
  .hero-frame{max-width:var(--max); margin:34px auto; padding:0 var(--pad); position:relative;}
  .hero-media{
    position:relative; aspect-ratio:16/9.5; border:1px solid var(--line-on-dark); border-radius:2px; overflow:hidden;
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--bone);
    background:
      radial-gradient(60% 60% at 30% 20%, rgba(142,72,11,0.14), transparent 60%),
      radial-gradient(70% 70% at 75% 80%, rgba(2,111,56,0.10), transparent 60%),
      radial-gradient(120% 90% at 50% 15%, #1c3529 0%, #0f1713 75%);
  }
  #heroParallax{position:absolute; inset:-8% -4%; will-change:transform;}
  @media (max-width:640px){ .hero-media{aspect-ratio:4/5.2;} }
  .hero-media .ph-label{position:absolute; top:18px; left:18px; z-index:3; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(242,234,217,0.42); font-weight:700; max-width:60%; text-align:left;}
  .hero-content{position:relative; z-index:3;}
  .hero-zh{font-family:var(--font-display); font-size:13px; letter-spacing:.1em; color:var(--brass-soft); margin-bottom:16px;}
  .hero-line{font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(23px,3.8vw,42px); line-height:1.22; max-width:15ch; padding:0 20px; margin:0;}
  .hero-note{font-size:10.5px; color:rgba(242,234,217,0.42); margin-top:18px; letter-spacing:.03em;}
  .hero-ctas{display:flex; gap:14px; justify-content:center; padding:30px var(--pad) 46px; flex-wrap:wrap;}

  /* ---------- split ---------- */
  .split{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
  .split.reverse{grid-template-columns:.95fr 1.05fr;}
  .split.reverse .split-media{order:2;}
  @media (max-width:860px){ .split, .split.reverse{grid-template-columns:1fr; gap:30px;} .split.reverse .split-media{order:0;} }

  /* pull quote */
  .pull-quote{max-width:720px; margin:30px 0 0; font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(19px,2.4vw,26px); line-height:1.6;}
  .pull-quote span:not(.i18n-text){display:block;}
  .pull-quote span:not(.i18n-text):nth-child(2){padding-left:3%;}
  .pull-quote span:not(.i18n-text):nth-child(3){padding-left:6%;}
  .pull-quote cite{display:block; margin-top:14px; font-family:var(--font-sans); font-style:normal; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--brass-soft); font-weight:700;}

  .dot-divider{text-align:center; color:var(--brass); letter-spacing:6px; font-size:11px;}

  /* ---------- horizontal strip ---------- */
  .h-strip{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 18px; margin-top:36px; -webkit-overflow-scrolling:touch;}
  .h-strip::-webkit-scrollbar{height:5px;}
  .h-strip::-webkit-scrollbar-thumb{background:var(--brass); border-radius:4px;}
  .h-strip .frame{min-width:230px; flex:0 0 auto; scroll-snap-align:start; aspect-ratio:4/5;}
  @media (max-width:600px){ .h-strip .frame{min-width:74vw;} }

  /* ---------- dish cards ---------- */
  .dish-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:38px;}
  @media (max-width:900px){.dish-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:560px){.dish-grid{grid-template-columns:1fr;}}
  .dish-card{border:1px solid var(--line); border-radius:3px; background:rgba(255,255,255,0.4); overflow:hidden; transition:box-shadow .3s ease, transform .3s ease;}
  .dish-card:hover{box-shadow:0 14px 30px rgba(26,24,21,0.12); transform:translateY(-3px);}
  .dish-card .frame{border-radius:0; border:none; border-bottom:1px solid var(--line); aspect-ratio:5/4; min-height:0;}
  .dish-body{padding:16px 18px 20px;}
  .dish-tag{display:inline-block; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--chilli); border:1px solid var(--chilli); padding:2px 7px; border-radius:2px; margin-bottom:10px;}
  .dish-names{font-family:var(--font-display); font-size:19px; font-weight:500; margin:0 0 3px;}
  .dish-names .zh{font-family:var(--font-display); font-size:14px; color:var(--soy); margin-left:6px;}
  .dish-bm{font-size:11.5px; color:var(--soy); font-style:italic; margin:0 0 8px;}
  .dish-desc{font-size:12.5px; color:var(--soy); line-height:1.55; margin:0;}
  .dish-meta{display:flex; justify-content:space-between; align-items:center; margin-top:12px;}
  .dish-spice{font-size:11px; color:var(--chilli);}

  /* ---------- location cards ---------- */
  .loc-card{border:1px solid var(--line); border-radius:2px; background:rgba(255,255,255,0.35); padding:34px;}
  .chapter--soy .loc-card{border-color:var(--line-on-dark); background:rgba(242,234,217,0.05);}
  .loc-tag{display:inline-block; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding:4px 10px; border-radius:2px; margin-bottom:14px;}
  .loc-tag.flagship{background:var(--green); color:var(--bone);}
  .loc-tag.secondary{background:var(--brass-soft); color:var(--ink);}
  .loc-meta{display:flex; flex-wrap:wrap; gap:20px; margin-top:20px; font-size:13px;}
  .loc-meta div{min-width:150px;}
  .loc-meta strong{display:block; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--chilli); margin-bottom:4px; font-weight:700;}
  .loc-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:26px;}
  @media (max-width:820px){.loc-grid{grid-template-columns:1fr;}}
  .loc-ctas{display:flex; gap:10px; margin-top:24px; flex-wrap:wrap;}

  /* Johor - intentionally lighter / smaller scale, ~15-20% visual weight of Cyberjaya */
  .johor-wrap{max-width:640px;}
  .johor-wrap .frame{min-height:180px;}

  /* ---------- catering ---------- */
  .catering-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:20px; align-items:start;}
  @media (max-width:860px){.catering-grid{grid-template-columns:1fr;}}
  .mini-form{display:grid; gap:12px;}
  .mini-form .row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .mini-form label{font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:700; color:var(--brass-soft); display:block; margin-bottom:5px;}
  .mini-form input, .mini-form select, .mini-form textarea{
    width:100%; background:rgba(242,234,217,0.06); border:1px solid var(--line-on-dark); color:var(--bone);
    padding:10px 12px; border-radius:2px; font-family:var(--font-sans); font-size:13px;
  }
  .mini-form textarea{resize:vertical; min-height:70px;}
  .mini-form button{margin-top:6px;}

  /* ---------- teaser ---------- */
  .teaser-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px;}
  @media (max-width:760px){.teaser-grid{grid-template-columns:1fr;}}
  .teaser-card{border:1px solid var(--line); padding:22px; border-radius:2px; transition:border-color .3s ease;}
  .teaser-card:hover{border-color:var(--brass);}
  .teaser-card h4{font-family:var(--font-display); font-weight:500; font-size:17px; margin:0 0 6px;}
  .teaser-card p{font-size:12.5px; color:var(--soy); margin:0;}

  /* ---------- footer ---------- */
  footer{background:var(--ink); color:var(--bone-deep); padding:64px var(--pad) 120px;}
  .footer-inner{max-width:var(--max); margin:0 auto;}
  .footer-brands{display:flex; flex-wrap:wrap; gap:40px; padding-bottom:36px; border-bottom:1px solid var(--line-on-dark); margin-bottom:32px;}
  .footer-brands div{max-width:280px;}
  .footer-brands h5{font-family:var(--font-display); color:var(--bone); font-size:16px; margin:0 0 8px; font-weight:500;}
  .footer-brands p{font-size:12.5px; line-height:1.6; margin:0;}
  .footer-cols{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; font-size:12.5px;}
  @media (max-width:760px){.footer-cols{grid-template-columns:1fr 1fr;}}
  .footer-cols h6{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass-soft); margin:0 0 12px; font-weight:700;}
  .footer-cols a{display:block; text-decoration:none; color:var(--bone-deep); margin-bottom:8px;}
  .footer-cols a:hover{color:var(--bone);}
  .footer-bottom{margin-top:40px; padding-top:20px; border-top:1px solid var(--line-on-dark); font-size:11px; color:rgba(242,234,217,0.42); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

  /* ---------- mobile action dock ---------- */
  .mobile-dock{position:fixed; bottom:0; left:0; right:0; z-index:120; display:none; grid-template-columns:1fr 1fr 1fr; background:var(--ink); border-top:1px solid var(--line-on-dark);}
  .mobile-dock a{display:flex; flex-direction:column; align-items:center; gap:3px; padding:11px 4px 14px; text-decoration:none; color:var(--bone); font-size:10px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; border-right:1px solid var(--line-on-dark);}
  .mobile-dock a:last-child{border-right:none;}
  .mobile-dock a .ico{font-size:16px; line-height:1;}
  @media (max-width:760px){ .mobile-dock{display:grid;} body{padding-bottom:64px;} }

  .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
  .reveal.is-visible{opacity:1; transform:translateY(0);}
  .reveal-stagger.is-visible span:not(.i18n-text){transition-delay: calc(var(--i, 0) * 80ms);}

  /* ---------- Phase 2 additions ---------- */
  .big-number{
    font-family:var(--font-display); font-weight:500; font-size:clamp(64px,14vw,168px);
    line-height:.95; margin:0 0 18px; color:var(--bone);
  }
  .chapter--dark .big-number, .chapter--soy .big-number, .chapter--kiosk .big-number{color:var(--bone);}
  .peace-phrase{
    font-family:var(--font-display); font-style:italic; font-weight:400;
    font-size:clamp(28px,5vw,56px); line-height:1.2; max-width:16ch; margin:20px 0;
  }
  .timeline{border-left:1px solid var(--line-on-dark); margin-top:40px; max-width:640px;}
  .chapter:not(.chapter--dark):not(.chapter--soy):not(.chapter--kiosk) .timeline{border-color:var(--line);}
  .timeline-item{position:relative; padding:0 0 34px 28px;}
  .timeline-item::before{content:""; position:absolute; left:-5px; top:4px; width:9px; height:9px; border-radius:50%; background:var(--brass-soft);}
  .timeline-item .t-date{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--chilli); margin-bottom:6px; display:block;}
  .chapter--dark .timeline-item .t-date, .chapter--soy .timeline-item .t-date, .chapter--kiosk .timeline-item .t-date{color:var(--brass-soft);}
  .timeline-item h4{font-family:var(--font-display); font-weight:500; font-size:19px; margin:0 0 6px;}
  .timeline-item p{font-size:13.5px; line-height:1.6; margin:0; max-width:480px;}
  .quote-tag{display:inline-block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--brass-soft); margin-top:10px;}

  .filter-bar{display:flex; flex-wrap:wrap; gap:10px; margin:32px 0 8px;}
  .filter-chip{font-size:11px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; padding:7px 14px; border:1px solid var(--line); border-radius:20px; background:transparent; cursor:pointer; color:var(--ink); transition:all .2s ease;}
  .filter-chip.active, .filter-chip:hover{background:var(--ink); color:var(--bone); border-color:var(--ink);}
  .lang-note{font-size:11.5px; color:var(--soy); font-style:italic; margin:6px 0 0;}
  .menu-section-title{font-family:var(--font-display); font-weight:500; font-size:24px; margin:56px 0 6px;}
  .menu-category-block:first-child .menu-section-title{margin-top:20px;}
  .dish-row-list{border-top:1px solid var(--line); margin-top:22px;}
  .dish-row{display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:14px 2px; border-bottom:1px solid var(--line);}
  .dish-row-main{min-width:0;}
  .dish-row-name{font-family:var(--font-display); font-size:15.5px; font-weight:500; margin:0;}
  .dish-row-name .zh{font-family:var(--font-display); font-size:12px; color:var(--soy); margin-left:6px; font-weight:400;}
  .dish-row-name .status-tag{margin-left:8px; vertical-align:middle;}
  .dish-row-desc{font-size:11.5px; color:var(--soy); line-height:1.5; margin:3px 0 0;}
  .dish-row-meta{display:flex; align-items:baseline; gap:10px; white-space:nowrap; font-size:13.5px; font-weight:600;}
  .dish-row-meta .dish-spice{font-size:11px; font-weight:400;}
  .dish-row-meta .pending{font-size:11px; font-weight:400; color:var(--soy); font-style:italic;}
  .menu-section-sub{font-size:12.5px; color:var(--soy); margin:0 0 4px;}
  .status-tag{display:inline-block; font-size:9px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; padding:2px 7px; border-radius:2px; margin-left:8px; vertical-align:middle;}
  .status-tag.signature{background:var(--green); color:var(--bone);}
  .status-tag.unavailable{background:transparent; border:1px solid var(--line); color:var(--soy);}
  .status-tag.confirm{background:transparent; border:1px solid var(--chilli); color:var(--chilli);}
  .chapter--dark .status-tag.confirm, .chapter--soy .status-tag.confirm, .chapter--kiosk .status-tag.confirm{border-color:var(--brass-soft); color:var(--brass-soft);}
  .price-note{font-size:10.5px; color:var(--soy); font-weight:400;}
  .chapter--dark .price-note, .chapter--soy .price-note, .chapter--kiosk .price-note{color:var(--bone-deep);}

  .approach-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px;}
  @media (max-width:860px){.approach-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:560px){.approach-grid{grid-template-columns:1fr;}}
  .approach-card{padding:26px 22px; border:1px solid var(--line); border-radius:3px;}
  .chapter--dark .approach-card, .chapter--soy .approach-card, .chapter--kiosk .approach-card{border-color:var(--line-on-dark);}
  .approach-card .num{font-family:var(--font-display); font-style:italic; font-size:13px; color:var(--chilli); margin-bottom:10px; display:block;}
  .chapter--dark .approach-card .num, .chapter--soy .approach-card .num, .chapter--kiosk .approach-card .num{color:var(--brass-soft);}
  .approach-card h4{font-family:var(--font-display); font-weight:500; font-size:17px; margin:0 0 8px;}
  .approach-card p{font-size:12.5px; line-height:1.6; margin:0; color:var(--soy);}
  .chapter--dark .approach-card p, .chapter--soy .approach-card p, .chapter--kiosk .approach-card p{color:var(--bone-deep);}

  .faith-note{border-left:2px solid var(--brass-soft); padding-left:18px; font-size:13px; line-height:1.7; max-width:520px; margin-top:22px; color:var(--bone-deep);}

  .page-hero{padding:150px var(--pad) 64px; text-align:left;}
  .page-hero .eyebrow{justify-content:flex-start;}
  .page-hero h1.chapter-title{font-size:clamp(34px,5.4vw,64px); max-width:14ch;}

  /* ---------- real photography (Phase 2 correction pass) ---------- */
  .frame.has-photo{padding:0; background:none;}
  .frame.has-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block;}
  .frame.has-photo.tall{min-height:520px;}

  /* ---------- food image asset integration (2026-09-06) ---------- */
  .frame-confirm-note{position:absolute; top:10px; right:10px; z-index:2; font-size:9px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; padding:3px 8px; border-radius:2px; background:rgba(26,24,21,0.72); color:var(--bone);}
  .hero-media.has-photo #heroParallax img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; display:block; opacity:.5;}
  .hero-media.has-photo{background:linear-gradient(180deg, rgba(15,23,19,0.35) 0%, rgba(15,23,19,0.75) 100%), #0f1713;}

  /* Phones: the bottom dock already carries WhatsApp, so the header keeps brand, EN | BM and Menu */
  @media (max-width:760px){ .header-actions .btn-solid{display:none;} .header-actions{gap:8px;} }
  @media (max-width:360px){ .brand{gap:8px;} .brand-word{font-size:13px;} .lang-switch a{padding:6px 5px; min-width:26px;} }

  /* Fried dumplings: one shared photo for all fillings (they look the same once fried) */
  .dumpling-feature{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:20px; margin-top:38px; align-items:stretch;}
  .dumpling-feature .dish-grid{margin-top:0; grid-template-columns:1fr 1fr; align-content:start;}
  .dumpling-figure{position:relative; margin:0; min-height:460px; border:1px solid var(--line); border-radius:3px; overflow:hidden; background:var(--ink);}
  .dumpling-figure img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 52%; display:block;}
  .dumpling-figure figcaption{position:absolute; left:0; right:0; bottom:0; padding:44px 20px 16px; color:var(--bone); font-size:13px; line-height:1.5;
    background:linear-gradient(to bottom, rgba(26,24,21,0), rgba(26,24,21,.88));}
  @media (max-width:900px){
    .dumpling-feature{grid-template-columns:1fr;}
    .dumpling-figure{min-height:0; aspect-ratio:4/3;}
  }
  @media (max-width:560px){
    .dumpling-feature .dish-grid{grid-template-columns:1fr;}
    .dumpling-figure{aspect-ratio:auto;}
    .dumpling-figure img{position:static; height:auto; aspect-ratio:4/3;}
    .dumpling-figure figcaption{position:static; background:var(--ink); padding:12px 16px 14px;}
  }

  /* Steamed dumplings: wide steam-band photo with the filling cards set over its lower edge */
  .steam-feature{margin-top:38px;}
  .steam-band{position:relative; margin:0; aspect-ratio:2/1; min-height:320px; border-radius:3px; overflow:hidden; background:var(--ink);}
  .steam-band img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block;}
  .steam-band::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(26,24,21,.78) 0%, rgba(26,24,21,.35) 38%, rgba(26,24,21,0) 60%);}
  .steam-band figcaption{position:absolute; z-index:1; top:0; left:0; max-width:400px; padding:30px 32px; color:var(--bone); font-size:14px; line-height:1.55;}
  .steam-eyebrow{display:block; margin-bottom:8px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--brass-soft);}
  .steam-feature .dish-grid{position:relative; z-index:2; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:-72px 22px 0;}
  .steam-feature .dish-card{background:var(--bone); box-shadow:0 12px 30px rgba(26,24,21,.16);}
  @media (max-width:1100px){ .steam-feature .dish-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
  @media (max-width:760px){
    .steam-band{aspect-ratio:16/10; min-height:0;}
    .steam-feature .dish-grid{grid-template-columns:1fr 1fr; gap:12px; margin:-44px 12px 0;}
  }
  @media (max-width:520px){
    .steam-band{aspect-ratio:1/1;}
    .steam-band figcaption{padding:20px 20px; font-size:13px; max-width:none; right:0;}
    .steam-band::after{background:linear-gradient(to bottom, rgba(26,24,21,.8) 0%, rgba(26,24,21,.3) 40%, rgba(26,24,21,0) 60%);}
    .steam-feature .dish-grid{grid-template-columns:1fr; margin:-36px 10px 0;}
  }

  /* footer bottom line: shared across all pages (copyright + Launch48+ credit) */
  .footer-bottom{align-items:center; gap:12px 24px; font-size:11.5px; color:rgba(242,234,217,.62);}
  .footer-credit{display:inline-flex; align-items:center; gap:10px; opacity:.75;}
  .footer-credit img{height:15px; width:auto; display:block;}
  /* =====================================================================
     MOTION SYSTEM v1 (reusable; see README "Motion standard")
     - Content is ALWAYS visible by default. Hidden start states apply only
       under html.motion, a class the script adds last, after everything it
       needs is set up. If JS fails, is blocked or motion is reduced, nothing
       is hidden.
     - Group reveal: put data-motion on a section; children with .m-reveal
       animate in when it enters the viewport, staggered by --m-d (delay).
     - Variants: .m-rise (line mask rise, use inside .m-line), .m-fade
       (opacity only), .m-quote (slow cinematic rise). GPU-only: opacity +
       transform.
     ===================================================================== */
  :root{--m-ease:cubic-bezier(.16,1,.3,1);}
  .m-line{display:block; overflow:hidden; padding-bottom:.09em; margin-bottom:-.09em;}
  .m-line > .m-reveal{display:block;}
  html.motion [data-motion] .m-reveal{opacity:0; transform:translate3d(0,18px,0); transition:opacity .9s var(--m-ease) var(--m-d,0s), transform 1.1s var(--m-ease) var(--m-d,0s); will-change:opacity, transform;}
  html.motion [data-motion] .m-rise{opacity:1; transform:translate3d(0,105%,0); transition:transform 1.15s var(--m-ease) var(--m-d,0s);}
  html.motion [data-motion] .m-fade{transform:none;}
  html.motion [data-motion] .m-quote{transform:translate3d(0,34px,0); transition:opacity 1.4s var(--m-ease) var(--m-d,0s), transform 1.6s var(--m-ease) var(--m-d,0s);}
  html.motion [data-motion].m-in .m-reveal{opacity:1; transform:none;}
  html.motion [data-motion].m-in .m-reveal{will-change:auto;}


  /* ---------- Menu: 01 opening + category navigation ---------- */
  :root{--hdr:96px; --catbar:58px;}
  .menu-hero{padding-top:clamp(120px,11vw,152px); padding-bottom:clamp(30px,3vw,40px); border-bottom:0;}
  .menu-hero .eyebrow{color:var(--brass); margin-bottom:20px;}
  .menu-title{font-family:var(--font-display); font-weight:400; font-size:clamp(46px,6.6vw,96px); line-height:1; letter-spacing:-0.022em; color:var(--ink); margin:0 0 clamp(20px,2.4vw,30px); font-variation-settings:"opsz" 144;}
  .menu-intro-copy{font-size:clamp(16px,1.25vw,18px); line-height:1.75; color:var(--ink); max-width:40em; margin:0;}
  .menu-note{font-size:13.5px; line-height:1.6; color:var(--soy); margin:14px 0 0; max-width:40em;}
  .menu-note a{color:var(--brass); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(2,111,56,.35); transition:border-color .25s ease;}
  .menu-note a:hover{border-color:var(--brass);}
  .menu-catnav{margin-top:clamp(30px,3.4vw,44px);}

  /* pills (intro bar and the compact pinned bar share these) */
  .filter-bar{display:flex; flex-wrap:wrap; gap:10px; margin:0;}
  .filter-chip{font:600 11.5px/1 var(--font-sans); letter-spacing:.08em; text-transform:uppercase; padding:0 18px; min-height:40px; display:inline-flex; align-items:center; white-space:nowrap;
    border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.38); color:var(--ink); cursor:pointer;
    transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;}
  @media (hover:hover){ .filter-chip:hover{border-color:var(--brass); color:var(--brass); transform:translateY(-1px);} }
  .filter-chip.active, .filter-chip.active:hover{background:var(--brass); color:var(--bone); border-color:var(--brass); transform:none; box-shadow:0 6px 16px -8px rgba(2,111,56,.55);}
  .filter-chip:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}
  .filter-chip:active{transform:scale(.97);}

  /* phones: one horizontally scrollable row instead of many stacked rows */
  @media (max-width:760px){
    .menu-catnav{margin-left:calc(-1 * var(--pad)); margin-right:calc(-1 * var(--pad));}
    .menu-catnav .filter-bar{flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:none; padding:2px var(--pad) 6px;
      -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--pad), #000 calc(100% - 36px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 var(--pad), #000 calc(100% - 36px), transparent 100%);}
    .menu-catnav .filter-bar::-webkit-scrollbar{display:none;}
    .filter-chip{min-height:44px; scroll-snap-align:start; scroll-margin-left:var(--pad);}
  }

  /* compact pinned bar (created by script; never exists without JS) */
  .menu-catbar{position:fixed; left:0; right:0; top:var(--hdr); z-index:85; background:rgba(242,234,217,.95); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
    transform:translateY(-100%); opacity:0; visibility:hidden; transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .25s ease, visibility 0s linear .3s;}
  .menu-catbar.is-shown{transform:none; opacity:1; visibility:visible; transition-delay:0s;}
  .menu-catbar-inner{max-width:calc(var(--max) + 2 * var(--pad)); margin:0 auto; position:relative; display:flex; align-items:center;}
  .menu-catbar .filter-bar{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:8px; padding:9px var(--pad); scroll-behavior:smooth; flex:1; min-width:0;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 44px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 44px), transparent 100%);}
  .menu-catbar .filter-bar::-webkit-scrollbar{display:none;}
  .menu-catbar .filter-chip{min-height:36px; padding:0 15px; font-size:11px; background:rgba(255,255,255,.5);}
  .menu-catbar .filter-chip.active, .menu-catbar .filter-chip.active:hover{background:var(--brass); color:var(--bone); border-color:var(--brass);}
  .menu-catbar-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--bone); color:var(--ink); cursor:pointer; display:none; align-items:center; justify-content:center; font-size:15px; line-height:1; transition:border-color .25s ease, color .25s ease, opacity .25s ease;}
  .menu-catbar-arrow:hover{border-color:var(--brass); color:var(--brass);}
  .menu-catbar-arrow.prev{left:max(8px, calc(var(--pad) - 40px));}
  .menu-catbar-arrow.next{right:max(8px, calc(var(--pad) - 40px));}
  @media (hover:hover) and (min-width:761px){ .menu-catbar-arrow.can{display:flex;} }
  @media (max-width:760px){ .menu-catbar .filter-chip{min-height:40px;} }

  /* landing spot for category scrolling: clear of the header and the pinned bar */
  .menu-category-block{scroll-margin-top:calc(var(--hdr) + var(--catbar) + 18px);}
  /* switching feedback: visible entries ease in (animation only; never leaves anything hidden) */
  @keyframes menuSwitchIn{from{opacity:.25; transform:translate3d(0,10px,0);} to{opacity:1; transform:none;}}
  #menu-categories.is-switching .dish-card, #menu-categories.is-switching .dish-row, #menu-categories.is-switching .menu-section-title{animation:menuSwitchIn .45s cubic-bezier(.16,1,.3,1) both;}

  /* hand-off into Signature Dishes: no hard rule, the first heading picks up the intro's rhythm */
  #menu-categories{padding-top:clamp(18px,2.2vw,30px) !important; border-top:0;}
  .menu-signature .menu-section-title{font-weight:400; font-size:clamp(28px,2.6vw,36px); letter-spacing:-0.01em; display:flex; align-items:center; gap:16px;}
  .menu-signature .menu-section-title::after{content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(2,111,56,.45), rgba(2,111,56,0) 70%);}
  .menu-signature .dish-grid{margin-top:26px;}
  @media (prefers-reduced-motion: reduce){ #menu-categories.is-switching .dish-card, #menu-categories.is-switching .dish-row, #menu-categories.is-switching .menu-section-title{animation:none;} }

  /* ---------- Menu: Madam Dai Jun's Signatures + coded dish cards (v3.0) ---------- */
  .sig-head{max-width:46em; margin-bottom:clamp(26px,3vw,36px);}
  .menu-signature .eyebrow{color:var(--brass); margin-bottom:16px;}
  .menu-signature .menu-section-title.sig-title{font-weight:400; font-size:clamp(32px,3.6vw,50px); line-height:1.06; letter-spacing:-0.015em; margin:0 0 16px; display:block;}
  .menu-signature .menu-section-title.sig-title::after{display:none;}
  .sig-intro{font-size:16px; line-height:1.75; color:var(--soy); margin:0; max-width:40em;}
  .menu-signature .dish-grid.sig-grid{margin-top:0; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px;}

  /* order code: readable, secondary */
  .dish-code{display:inline-block; align-self:flex-start; width:max-content; font:600 10.5px/1 var(--font-sans); letter-spacing:.1em; color:var(--brass); border:1px solid rgba(2,111,56,.32); border-radius:999px; padding:5px 9px 4px; margin-bottom:12px; background:rgba(2,111,56,.05); font-variant-numeric:tabular-nums;}
  .dish-price{font-family:var(--font-display); font-size:19px; font-weight:500; color:var(--ink); letter-spacing:-.005em;}
  .dish-qty{font-family:var(--font-sans); font-size:13px; font-weight:500; color:var(--soy);}

  .sig-card{display:flex; flex-direction:column; color:inherit; text-decoration:none; background:rgba(255,255,255,.45);
    transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1), border-color .3s ease;}
  .sig-card .frame{flex:none;}
  .sig-card .frame img{transition:transform 1.1s cubic-bezier(.16,1,.3,1);}
  .sig-card .dish-body{display:flex; flex-direction:column; flex:1; padding:20px 22px 22px;}
  .sig-card .dish-names{font-size:22px; line-height:1.2; margin:0 0 4px;}
  .sig-card .dish-names .zh{font-size:15px; margin-left:8px; color:var(--soy); white-space:nowrap; display:inline-block;}
  .dish-card.coded .dish-names .zh{white-space:nowrap; display:inline-block;}
  .sig-card .dish-alt{font-family:var(--font-display); font-style:italic; font-size:16px; color:var(--soy); margin:0 0 8px;}
  .sig-card .dish-desc{font-size:14.5px; line-height:1.65; margin:8px 0 0; color:var(--ink);}
  .sig-card .dish-more{font-size:13px; line-height:1.55; color:var(--soy); font-style:italic; margin:10px 0 0;}
  @media (hover:hover){
    .sig-card:hover .frame img{transform:scale(1.045);}
  }
  .sig-card .frame:hover{transform:none;}

  /* 7th dish as a wide feature */
  .sig-card--wide{grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);}
  .sig-card--wide .frame{aspect-ratio:auto; height:100%; min-height:300px; border-bottom:0; border-right:1px solid var(--line);}
  .sig-card--wide .dish-body{padding:clamp(24px,3vw,40px); justify-content:center;}
  .sig-card--wide .dish-names{font-size:clamp(24px,2.4vw,32px);}
  .sig-card--wide .dish-desc{font-size:15.5px; max-width:30em;}
  @media (max-width:900px){ .menu-signature .dish-grid.sig-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;} }
  @media (max-width:640px){
    .sig-card--wide{display:flex;}
    .sig-card--wide .frame{aspect-ratio:5/4; height:auto; min-height:0; border-right:0; border-bottom:1px solid var(--line);}
  }
  @media (max-width:560px){ .menu-signature .dish-grid.sig-grid{grid-template-columns:1fr;} .sig-card .dish-names{font-size:21px;} }

  /* dumpling section captions now carry the approved introductions */
  .fig-portion{display:block; margin-top:8px; font-size:12px; letter-spacing:.06em; opacity:.85;}

  /* Keep direct dish anchors clear of the pinned navigation. */
  .dish-card[id^="dish-"]{scroll-margin-top:calc(var(--hdr) + var(--catbar) + 24px);}

  /* ---------- Menu: coded rows (Handmade Noodles N1 to N14) ---------- */
  .menu-section-intro{font-size:15px; line-height:1.7; color:var(--soy); margin:0; max-width:44em;}
  .menu-coded .menu-section-title{font-weight:400; font-size:clamp(26px,2.4vw,32px); letter-spacing:-0.01em;}
  .dish-row.coded{align-items:center; padding:15px 10px 15px 4px; transition:background-color .25s ease;}
  .dish-row.coded .dish-row-main{display:flex; align-items:baseline; gap:16px;}
  .dish-row.coded .dish-code{flex:none; min-width:44px; text-align:center; margin:0; padding:5px 0 4px; align-self:center;}
  .dish-row.coded .dish-row-name{font-size:17px; line-height:1.3;}
  .dish-row.coded .dish-row-name .zh{font-size:13.5px; margin-left:10px; white-space:nowrap; display:inline-block;}
  .dish-row.coded .dish-row-meta{font-size:15px;}
  .dish-row.coded .dish-row-meta .dish-price{font-family:var(--font-sans); font-size:15px; font-weight:600;}
  @media (hover:hover){ .dish-row.coded:hover{background:rgba(2,111,56,.045);} }
  .dish-row[id^="dish-"]{scroll-margin-top:calc(var(--hdr) + var(--catbar) + 24px);}
  @media (max-width:560px){
    .dish-row.coded{align-items:flex-start; gap:12px; padding:14px 2px;}
    .dish-row.coded .dish-row-main{gap:12px;}
    .dish-row.coded .dish-code{min-width:40px; font-size:10px; align-self:flex-start; margin-top:3px;}
    .dish-row.coded .dish-row-name{font-size:16px;}
    .dish-row.coded .dish-row-name .zh{display:block; margin:3px 0 0;}
  }

  /* =====================================================================
     PRICE + CHILLI ALIGNMENT (global, every menu row and dish card)
     [ dish info ............ ][ chilli ][ price ]
     - price column: flush right, minimum width so standard prices form one column
     - chilli column: fixed width, right-aligned so the chillies sit just left of the price
     - rows without chillies keep the same column (the empty cell still takes its width)
     ===================================================================== */
  :root{--chilli-col:44px; --price-col:76px; --meta-gap:12px;}
  .dish-row-meta, .dish-meta{display:grid !important; grid-template-columns:var(--chilli-col) max-content; column-gap:var(--meta-gap); align-items:baseline; justify-content:end; justify-items:end; white-space:nowrap;}
  .dish-row-meta > .dish-spice, .dish-meta > .dish-spice{grid-column:1; grid-row:1; font-size:11px; line-height:1; letter-spacing:-1px; text-align:right; opacity:.95;}
  .dish-row-meta > .dish-price, .dish-meta > .dish-price{grid-column:2; grid-row:1; text-align:right;}
  .dish-price .price-note, .dish-price .dish-qty{margin-left:4px;}
  .dish-row-name .zh, .dish-names .zh{white-space:nowrap; display:inline-block;}
  .dish-row-meta .dish-price{font-family:var(--font-sans); font-size:15px; font-weight:600; letter-spacing:0; color:var(--ink);}
  .dish-row-meta .dish-price .price-note{font-size:12.5px; font-weight:500; color:var(--soy);}
  .dish-row{display:grid !important; grid-template-columns:minmax(0,1fr) auto; column-gap:16px; align-items:start;}
  .dish-row > .dish-row-meta{padding-top:2px;}
  .dish-row.coded > .dish-row-meta{padding-top:3px;}
  /* cards: the price line sits at the bottom right of the card body */
  .dish-card .dish-meta{margin-top:auto; padding-top:14px;}
  .sig-card .dish-meta{padding-top:16px;}
  .sig-card--wide .dish-meta{margin-top:22px; justify-content:start;}
  .sig-card--wide .dish-meta{grid-template-columns:auto max-content; justify-content:start;}
  .sig-card--wide .dish-meta > .dish-spice{grid-column:1;}
  .sig-card--wide .dish-meta > .dish-price{grid-column:2;}
  @media (max-width:560px){
    :root{--chilli-col:34px; --price-col:64px; --meta-gap:8px;}
    .dish-row-meta .dish-price .price-note{display:block; margin:2px 0 0; font-size:11.5px; font-weight:500; white-space:normal; max-width:9.5em; margin-left:auto;}
    .dish-row{column-gap:10px;}
  }

  /* =====================================================================
     EXPANDABLE DESCRIPTIONS (reusable: any .dish-row.has-desc)
     Without JS the description is simply shown. The script turns the dish
     name into a real button (aria-expanded / aria-controls) and collapses.
     ===================================================================== */
  .dish-row-desc-wrap{display:grid; grid-template-rows:1fr;}
  .dish-row-desc-wrap{margin-top:5px;}
  .dish-row-desc-wrap > .dish-row-desc{min-height:0; overflow:hidden; margin:0; padding:0; font-size:13.5px; line-height:1.6; color:var(--soy); max-width:40em;}
  .is-collapsible .dish-row-desc-wrap{grid-template-rows:0fr; margin-top:0; visibility:hidden; transition:grid-template-rows .22s ease, margin-top .22s ease, visibility 0s linear .22s;}
  .is-collapsible.is-open .dish-row-desc-wrap{grid-template-rows:1fr; margin-top:5px; visibility:visible; transition:grid-template-rows .22s ease, margin-top .22s ease, visibility 0s;}
  .is-collapsible{cursor:pointer;}
  .dish-row-toggle{all:unset; box-sizing:border-box; display:inline; cursor:pointer; font-family:var(--font-display); font-size:17px; font-weight:500; line-height:1.3; color:var(--ink);}
  .dish-row-toggle .zh{font-family:var(--font-display); font-size:13.5px; color:var(--soy); margin-left:10px; font-weight:400; white-space:nowrap; display:inline-block;}
  .dish-row-toggle:focus-visible{outline:2px solid var(--brass); outline-offset:3px; border-radius:2px;}
  .dish-chevron{display:inline-block; width:7px; height:7px; margin-left:10px; border-right:1.5px solid var(--brass); border-bottom:1.5px solid var(--brass); transform:translateY(-3px) rotate(45deg); transition:transform .22s ease; vertical-align:middle;}
  .is-open .dish-chevron{transform:translateY(0) rotate(225deg);}
  @media (hover:hover){ .is-collapsible:hover .dish-row-toggle{color:var(--brass);} }
  @media (max-width:560px){
    .dish-row-toggle{font-size:16px;}
    .dish-row-toggle .zh{display:block; margin:3px 0 0;}
  }
  @media (prefers-reduced-motion: reduce){ .is-collapsible .dish-row-desc-wrap, .dish-chevron{transition:none !important;} }

  .dish-row.coded .dish-code{width:58px; min-width:58px; padding:5px 4px 4px; letter-spacing:.04em; box-sizing:border-box; white-space:nowrap;}
  @media (max-width:560px){ .dish-row.coded .dish-code{width:52px; min-width:52px; padding:4px 3px 3px; font-size:10px; letter-spacing:.02em;} }
  .dish-code--none{visibility:hidden; border-color:transparent; background:none;}
  .dish-code--none::before{content:"N0";}

  /* subsections inside a category (Rice & Noodle Specialities) */
  .menu-subsection + .menu-subsection{margin-top:clamp(34px,4vw,48px);}
  .menu-subsection-title{font-family:var(--font-display); font-weight:400; font-size:clamp(21px,1.9vw,25px); line-height:1.2; color:var(--ink); margin:clamp(18px,2vw,24px) 0 6px; display:flex; align-items:baseline; gap:12px;}
  .menu-subsection-title .zh{font-size:.72em; color:var(--brass); letter-spacing:.06em; white-space:nowrap; flex:none;}
  @media (max-width:520px){ .menu-subsection-title{flex-wrap:wrap; column-gap:12px; row-gap:2px;} .menu-subsection-title::before{flex:none;} }
  .menu-subsection-title::before{content:""; width:22px; height:1px; background:var(--brass); align-self:center; opacity:.7;}
  .menu-subsection .menu-section-intro{font-size:14.5px;}

  .menu-coded .menu-section-title .zh{font-size:.62em; color:var(--brass); letter-spacing:.06em; margin-left:14px; font-weight:400; white-space:nowrap;}
  @media (max-width:560px){ .menu-coded .menu-section-title .zh{display:block; margin:6px 0 0;} }

  /* expandable description on a dish card (e.g. D-8): same component, card typography */
  .dish-card .dish-row-toggle{display:block; font-family:var(--font-display); font-size:19px; font-weight:500; line-height:1.3; margin:0 0 3px;}
  .dish-card .dish-row-toggle .zh{font-size:14px; margin-left:8px !important; display:inline-block !important;}
  .dish-card .dish-row-desc-wrap > .dish-row-desc{font-size:13.5px;}
  .steam-feature .dish-card .dish-meta{margin-top:auto;}
  .steam-feature .dish-card .dish-body{display:flex; flex-direction:column; height:100%;}

  /* subsection without its own heading (first group) and a subsection with a feature photo (Roti) */
  .menu-subsection--plain{margin-top:0;}
  .menu-subsection--plain + .menu-subsection{margin-top:clamp(40px,4.5vw,56px);}
  .subsection-feature{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,2fr); gap:clamp(20px,3vw,40px); align-items:start; margin-top:18px;}
  .subsection-feature .dish-row-list{margin-top:0;}
  .dish-row-meta .dish-qty{font-weight:400; font-size:.86em; color:var(--soy);}
  @media (max-width:600px){ .dish-row-meta .dish-price{display:inline-flex; flex-direction:column; align-items:flex-end; line-height:1.25;} .dish-row-meta .dish-qty{font-size:11px; white-space:nowrap; margin-left:0;} }
  .dish-price--variants{display:inline-flex; flex-direction:column; align-items:flex-end; gap:3px;}
  .dish-price--variants .pv{white-space:nowrap;}
  .dish-price--variants .pv-label{font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--soy); margin-right:6px;}
  .dish-row-options{margin:5px 0 0; font-size:12.5px; line-height:1.4; letter-spacing:.02em; font-weight:500; color:var(--brass);}
  /* the menu section clips with overflow:clip (not hidden) on desktop so the feature photo can stay in view */
  @media (min-width:901px){ #menu-categories{overflow:clip;} .subsection-feature > .subsection-figure{position:sticky; top:150px;} }
  .subsection-gallery{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px); margin:clamp(14px,1.6vw,20px) 0 clamp(14px,1.6vw,20px);}
  .subsection-gallery + .dish-row-list{margin-top:0;}
  .subsection-gallery--3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .subsection-gallery--3 .subsection-figure figcaption{font-size:11px; padding:24px 12px 9px;}
  @media (min-width:561px) and (max-width:900px){ .subsection-gallery--3 .subsection-figure figcaption{position:static; background:var(--ink); padding:8px 10px 9px; line-height:1.35;} }
  .subsection-gallery .subsection-figure img{aspect-ratio:16/10; height:auto;}
  @media (max-width:560px){ .subsection-gallery{grid-template-columns:1fr; gap:12px;} .subsection-gallery .subsection-figure img{aspect-ratio:16/10;} }
  .subsection-figure{margin:0; border-radius:3px; overflow:hidden; border:1px solid var(--line); background:var(--ink); position:relative;}
  .subsection-figure img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover;}
  .subsection-figure figcaption{position:absolute; left:0; right:0; bottom:0; padding:28px 14px 10px; font-size:11.5px; letter-spacing:.06em; color:var(--bone); background:linear-gradient(0deg, rgba(26,24,21,.78), rgba(26,24,21,0));}
  @media (max-width:900px){
    .subsection-feature{grid-template-columns:1fr; gap:14px;}
    .subsection-feature .subsection-figure img{aspect-ratio:16/9;}
  }

  /* ---------- Madam Dai Jun's Spicy Grilled Fish: editorial feature (S37) ---------- */
  .menu-fish{margin-top:clamp(56px,6vw,84px);}
  .fish-feature.dish-card{display:grid; grid-template-columns:minmax(0,58fr) minmax(0,42fr); align-items:stretch;
    background:radial-gradient(120% 90% at 100% 0%, rgba(107,199,153,.10), transparent 55%), linear-gradient(160deg, var(--soy) 0%, var(--soy-2) 100%);
    color:var(--bone); border:0; border-radius:4px; overflow:hidden; box-shadow:0 24px 50px -28px rgba(15,30,22,.55);}
  .fish-feature.dish-card:hover{transform:none; box-shadow:0 30px 60px -28px rgba(15,30,22,.65);}
  .fish-photo{margin:0; position:relative; overflow:hidden; min-height:100%; background:#0d1f18;}
  .fish-photo img{display:block; width:100%; height:100%; aspect-ratio:16/9; object-fit:cover; object-position:50% 55%; transition:transform 1.4s var(--m-ease);}
  .fish-photo::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, transparent 72%, rgba(23,44,34,.55) 100%);}
  .fish-feature:hover .fish-photo img{transform:scale(1.035);}
  .fish-body{display:flex; flex-direction:column; justify-content:center; padding:clamp(26px,2.6vw,40px) clamp(26px,3vw,46px);}
  .fish-eyebrow.eyebrow{color:#efb08c; margin:0 0 14px;}
  .fish-eyebrow.eyebrow::before{background:#c2412a; opacity:1;}
  .fish-title.menu-section-title{font-weight:400; font-size:clamp(28px,2.5vw,36px); line-height:1.12; letter-spacing:-0.015em; color:var(--bone); margin:0 0 clamp(18px,1.8vw,24px); font-variation-settings:"opsz" 144;}
  .fish-dish{display:flex; align-items:center; gap:14px; margin:0 0 14px;}
  .fish-dish .dish-code{color:var(--brass-soft); border-color:rgba(107,199,153,.45); margin:0; flex:none;}
  .fish-dish .fish-zh{font-family:'Noto Sans SC',sans-serif; font-size:19px; font-weight:500; letter-spacing:.14em; line-height:1.2; color:var(--brass-soft); margin:0 !important;}
  .fish-feature .dish-desc{font-size:15px; line-height:1.65; color:rgba(242,234,217,.84); margin:0; max-width:32em;}
  .fish-feature .dish-meta{margin-top:clamp(18px,1.8vw,24px); padding-top:14px; border-top:1px solid var(--line-on-dark); align-items:center;}
  .fish-feature .dish-meta > .dish-spice{font-size:13px;}
  .fish-feature .dish-price{font-family:var(--font-display); font-size:clamp(24px,2.1vw,28px); font-weight:500; color:var(--bone); letter-spacing:-0.01em;}
  html.motion [data-motion] .fish-photo img{transform:scale(1.06);}
  html.motion [data-motion].m-in .fish-photo img{transform:none;}
  html.motion [data-motion].m-in .fish-feature:hover .fish-photo img{transform:scale(1.035);}
  @media (max-width:1180px){
    .fish-feature.dish-card{grid-template-columns:1fr;}
    .fish-photo img{height:auto; aspect-ratio:16/9;}
    .fish-photo::after{background:linear-gradient(180deg, transparent 70%, rgba(23,44,34,.6) 100%);}
    .fish-body{padding:26px clamp(20px,5vw,40px) 28px;}
  }
  @media (max-width:560px){
    .fish-title.menu-section-title{font-size:27px; margin-bottom:20px;}
    .fish-photo img{aspect-ratio:16/10;}
    .fish-feature .dish-desc{font-size:14.5px;}
  }
  @media (prefers-reduced-motion: reduce){
    .fish-photo img, html.motion [data-motion] .fish-photo img{transition:none; transform:none !important;}
  }

  /* ---------- Simplified Chinese (简中) typography, 20 Oct 2026 ----------
     Chinese has no true italic, so no synthetic slant; Latin-style wide tracking is
     tightened; slightly taller line height for dense characters; lines break at
     natural points and headings are not held to Latin character widths. */
  html:lang(zh) body *{font-style:normal !important;}
  html:lang(zh) .eyebrow, html:lang(zh) .btn, html:lang(zh) .primary-nav a, html:lang(zh) .filter-chip,
  html:lang(zh) dt, html:lang(zh) .map-nav-label, html:lang(zh) .loc-meta strong, html:lang(zh) .dream-cite,
  html:lang(zh) .visit-map .map-open, html:lang(zh) h6{letter-spacing:.08em;}
  html:lang(zh) .mobile-drawer a{letter-spacing:.02em;}  /* large display links: wide tracking spread out the Latin name */
  html:lang(zh) p, html:lang(zh) dd, html:lang(zh) li{line-height:1.85; line-break:strict;}
  html:lang(zh) h1, html:lang(zh) h2, html:lang(zh) h3{letter-spacing:.01em; line-break:strict; word-break:normal;}
  html:lang(zh) h1, html:lang(zh) h2, html:lang(zh) h3, html:lang(zh) blockquote p, html:lang(zh) .lede{text-wrap:balance;}
  html:lang(zh) .heart-quote p, html:lang(zh) .dream-quote blockquote p, html:lang(zh) .menu-title{line-height:1.38 !important;}
  html:lang(zh) .chapter-title, html:lang(zh) h1.chapter-title, html:lang(zh) h2.chapter-title{max-width:22em;}
  .zh.en-alt{white-space:normal !important; font-family:var(--font-sans) !important; font-size:12px !important; font-weight:400 !important; letter-spacing:.01em !important; color:var(--soy); opacity:.82;}
  .menu-section-title .zh.en-alt, .menu-subsection-title .zh.en-alt{font-size:.5em !important; letter-spacing:.06em !important;}
  .lang-switch a[lang="zh-Hans"]{font-family:'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif; letter-spacing:.02em;}

  /* ---------- Touch targets (20 Oct 2026): larger hit areas for small links and
     controls, without changing how they look (WCAG 2.2 target size). ---------- */
  .lang-switch a, .serve-dot, .footer-nav a, .footer-cols a, .footer-contact a, a.map-open, a[href^="tel:"]{position:relative;}
  .lang-switch a::after{content:""; position:absolute; inset:-10px 0;}
  .serve-dot::after{content:""; position:absolute; inset:-14px -4px;}
  .footer-nav a::after, .footer-cols a::after, .footer-contact a::after, a.map-open::after, a[href^="tel:"]::after{content:""; position:absolute; inset:-4px 0;}