/* ---------- 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:none; margin:0; padding:0; position:relative;}
  .hero-media{
    position:relative; width:100%; height:90vh; min-height:640px; max-height:920px; overflow:hidden;
    display:flex; flex-direction:row; align-items:center; justify-content:flex-end; text-align:left; color:var(--bone);
    padding:0 clamp(28px,7vw,112px) 0 0;
    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:900px){
    .hero-media{
      flex-direction:column; align-items:stretch; justify-content:flex-end; text-align:left;
      height:86vh; min-height:560px; max-height:780px;
      padding:0 var(--pad) 42px;
    }
  }
  .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; max-width:560px; width:min(560px,44vw); margin-top:4vh;}
  @media (max-width:900px){ .hero-content{max-width:none; width:100%; margin-top:0;} }
  .hero-zh{font-family:var(--font-display); font-size:14px; letter-spacing:.18em; color:var(--brass-soft); margin-bottom:22px;}
  .hero-line{
    font-family:var(--font-display); font-style:italic; font-weight:500;
    font-size:clamp(38px, 32px + 2.1vw, 72px); line-height:1.14; letter-spacing:-0.005em; margin:0;
  }
  /* base .hero-ctas rule kept as-is: reused untouched by the Chapter 03 menu
     teaser ("Explore The Menu"); the hero's own CTA row is styled more
     specifically below so that reuse is unaffected by this rework. */
  .hero-ctas{display:flex; gap:14px; justify-content:center; padding:30px var(--pad) 46px; flex-wrap:wrap;}
  .hero-content .hero-ctas{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:34px; padding:0; justify-content:flex-start;}
  .hero-btn{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; text-decoration:none; padding:14px 27px; border-radius:2px; transition:all .2s ease;}
  .hero-btn-primary{background:var(--chilli); color:var(--bone); border:1px solid var(--chilli);}
  .hero-btn-primary:hover{background:var(--bone); color:var(--ink); border-color:var(--bone); transform:translateY(-1px);}
  .hero-btn-secondary{background:transparent; color:var(--bone); border:1px solid rgba(242,234,217,0.55);}
  .hero-btn-secondary:hover{background:rgba(242,234,217,0.12); border-color:var(--bone);}
  .hero-btn-tertiary{display:inline-flex; align-items:center; padding:14px 2px; background:none; border:none; color:rgba(242,234,217,0.68); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(242,234,217,0.32); transition:color .2s ease;}
  .hero-btn-tertiary:hover{color:var(--bone); text-decoration-color:var(--bone);}
  @media (max-width:520px){ .hero-content .hero-ctas{flex-direction:column; align-items:stretch; gap:11px;} .hero-btn{text-align:center;} .hero-btn-tertiary{justify-content:center;} }

  /* ---------- 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 full-bleed photo (2026-09-24 - FSNH-1.png) ---------- */
  .hero-media.has-photo{background:#0f1713;}
  .hero-media.has-photo #heroParallax img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    object-position:46% 30%; display:block; opacity:1;
  }
  /* directional reading zone (2026-09-24 rework) - strongest behind the right-side
     copy column, fading to fully transparent over the food; food stays untouched. */
  .hero-media.has-photo::after{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:
      linear-gradient(90deg, rgba(13,20,16,0) 0%, rgba(13,20,16,0) 32%, rgba(13,20,16,.30) 52%, rgba(13,20,16,.62) 70%, rgba(13,20,16,.74) 100%),
      linear-gradient(180deg, rgba(13,20,16,.16) 0%, rgba(13,20,16,0) 22%, rgba(13,20,16,0) 72%, rgba(13,20,16,.30) 100%);
  }
  @media (max-width:900px){
    .hero-media.has-photo #heroParallax img{ object-position:44% 35%; }
    /* mobile: copy sits in the lower third, so the reading zone shifts to a bottom fade */
    .hero-media.has-photo::after{
      background:
        linear-gradient(180deg, rgba(13,20,16,0) 0%, rgba(13,20,16,0) 34%, rgba(13,20,16,.38) 60%, rgba(13,20,16,.72) 82%, rgba(13,20,16,.86) 100%);
    }
  }
  /* tighten the transition straight from hero into Chapter 02 - no detached CTA
     band, no dead gap; scoped to the section immediately after the hero only. */
  .hero + .chapter{padding-top:56px;}
  @media (max-width:900px){ .hero + .chapter{padding-top:44px;} }

  /* ---------- Phase 3 additions: master launch restructure + premium pass ---------- */
  /* tighter vertical rhythm sitewide - same component system, better restraint */
  .chapter{padding:84px var(--pad);}
  .chapter--compact{padding-top:60px; padding-bottom:60px;}
  @media (max-width:760px){ .chapter{padding:56px var(--pad);} .chapter--compact{padding-top:44px; padding-bottom:44px;} }

  /* Madam Dai Jun Snacks - full red/cream kiosk identity, distinct from the
     restaurant's ink/soy/jade world on purpose: this is the sub-brand's own
     visual language, still built from the same component system. */
  .chapter--red{
    background:
      radial-gradient(120% 90% at 85% -10%, rgba(255,217,176,0.16), transparent 55%),
      radial-gradient(90% 70% at 0% 110%, rgba(0,0,0,0.22), transparent 55%),
      linear-gradient(160deg, #8a2415 0%, #6b1a0f 55%, #4a1109 100%);
    color:#fff6ec; border-color: rgba(255,246,236,0.18);
  }
  .chapter--red .eyebrow{color:#ffd9b0;}
  .chapter--red .lede{color:rgba(255,246,236,0.86);}
  .chapter--red .body-text{color:rgba(255,246,236,0.86);}
  .chapter--red .chapter-number{color:#fff6ec; opacity:.5;}
  .chapter--red .btn-solid{background:#fff6ec; color:#6b1a0f; border-color:#fff6ec;}
  .chapter--red .btn-solid:hover{background:#ffd9b0; border-color:#ffd9b0; color:#4a1109;}
  .chapter--red .btn-ghost-light{border-color:rgba(255,246,236,0.5); color:#fff6ec;}
  .chapter--red .btn-ghost-light:hover{background:#fff6ec; color:#6b1a0f;}
  .chapter--red .frame{background: linear-gradient(160deg, rgba(255,246,236,0.10), rgba(0,0,0,0.16)); border-color: rgba(255,246,236,0.2);}
  .chapter--red .frame .frame-tick{border-color:#ffd9b0;}
  .chapter--red .frame-label{color:rgba(255,246,236,0.75);}
  .chapter--red .dish-card{background:rgba(255,246,236,0.05); border-color:rgba(255,246,236,0.18);}
  .chapter--red .dish-names, .chapter--red h2.chapter-title, .chapter--red h3, .chapter--red h4{color:#fff6ec;}
  .chapter--red .dish-desc, .chapter--red .dish-bm{color:rgba(255,246,236,0.75);}
  .chapter--red .dish-tag{color:#ffd9b0; border-color:#ffd9b0;}
  .snack-sub-brand{
    display:inline-flex; align-items:center; gap:8px; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
    font-weight:700; color:#6b1a0f; background:#fff6ec; padding:5px 12px; border-radius:20px; margin-bottom:20px;
  }
  .snack-sub-brand::before{content:"●"; color:#6b1a0f; font-size:8px;}
  .snack-hero{
    background:
      radial-gradient(120% 90% at 85% -10%, rgba(255,217,176,0.18), transparent 55%),
      linear-gradient(160deg, #8a2415 0%, #6b1a0f 60%, #4a1109 100%);
  }

  /* text-only dish treatment - a confirmed dish with no confirmed exact photo yet.
     A clean editorial row, never an empty photo box. */
  .dish-card--text{border:1px solid var(--line); border-radius:3px; padding:24px 22px; display:flex; flex-direction:column; justify-content:center;}
  .chapter--dark .dish-card--text, .chapter--soy .dish-card--text, .chapter--kiosk .dish-card--text, .chapter--red .dish-card--text{border-color:var(--line-on-dark);}
  .dish-card--text .dish-names{margin-bottom:6px;}

  .enquiry-strip{border:1px solid rgba(255,246,236,0.3); border-radius:3px; padding:30px 32px; max-width:540px; margin-top:32px; background:rgba(255,246,236,0.06);}
  .enquiry-strip h4{font-family:var(--font-display); font-size:20px; margin:0 0 8px; font-weight:500;}
  .enquiry-strip p{font-size:13px; margin:0 0 18px; color:rgba(255,246,236,0.8);}

  /* condensed editorial timeline label (Madam Dai Jun page) */
  .timeline--tight .timeline-item{padding-bottom:26px;}

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

  /* Anshan section: abstract line map of China, Liaoning highlighted, Anshan pinned */
  .anshan-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,4vw,64px); align-items:center;}
  .anshan-text{min-width:0;}
  .anshan-figure{position:relative; margin:0 calc(-1 * min(var(--pad), 40px)) 0 0; min-width:0; justify-self:end; width:calc(100% + min(var(--pad), 40px));}
  .anshan-map{display:block; width:100%; height:auto;}
  .am-grat{fill:none; stroke:var(--bone); stroke-opacity:.07; stroke-width:.6; stroke-dasharray:2 4;}
  .am-prov{fill:none; stroke:var(--bone); stroke-opacity:.11; stroke-width:.5; stroke-linejoin:round;}
  .am-china{fill:var(--bone); fill-opacity:.025; stroke:var(--bone); stroke-opacity:.42; stroke-width:.9; stroke-linejoin:round;}
  .am-liao{fill:var(--brass-soft); fill-opacity:.26; stroke:var(--brass-soft); stroke-width:1.2; stroke-linejoin:round;}
  .am-leader{fill:none; stroke:var(--bone); stroke-opacity:.45; stroke-width:.8;}
  .am-dot{fill:var(--bone);}
  .am-ring{fill:none; stroke:var(--brass-soft); stroke-width:1;}
  .am-pulse{fill:var(--brass-soft); fill-opacity:.4; transform-box:fill-box; transform-origin:center; animation:am-pulse 2.8s ease-out infinite;}
  @keyframes am-pulse{from{transform:scale(1); opacity:.9;} to{transform:scale(3.4); opacity:0;}}
  @media (prefers-reduced-motion: reduce){ .am-pulse{animation:none; opacity:.5;} }
  .anshan-callout{position:absolute; transform:translateY(-1.05em); display:flex; flex-direction:column; gap:4px; white-space:nowrap;}
  .ac-city{font-family:var(--font-display); font-size:clamp(16px,1.6vw,20px); color:var(--bone); line-height:1.15;}
  .ac-prov{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--brass-soft);}
  .ac-coord{font-size:10px; letter-spacing:.12em; color:var(--bone-deep); opacity:.6; font-variant-numeric:tabular-nums;}
  /* phones: label becomes a caption under the map */
  @media (max-width:600px){
    .anshan-figure{overflow:hidden;}
    .anshan-map{width:calc(100% / 0.7); max-width:none;}  /* label sits below, so the map uses the full width */
    .am-leader{display:none;}
    .anshan-callout{position:static; transform:none; flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-top:6px; white-space:normal;}
    .ac-city::before{content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--brass-soft); margin-right:8px; vertical-align:middle;}
  }
  @media (max-width:1100px){
    .anshan-grid{grid-template-columns:1fr; gap:28px;}
    .anshan-text{max-width:680px;}
    .anshan-figure{justify-self:start; width:100%; max-width:860px; margin:0;}
  }

  /* ---------- Madam Dai Jun: 01 opening introduction (editorial) ---------- */
  .mdj-open{padding-top:clamp(108px,9vw,132px); padding-bottom:clamp(64px,7vw,104px);}
  .mdj-open-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); grid-template-areas:"head media" "body media"; column-gap:clamp(48px,6.5vw,104px); align-items:center;}
  .mdj-open-head{grid-area:head; align-self:end;}
  .mdj-open-media{grid-area:media; margin:0;}
  .mdj-open-body{grid-area:body; align-self:start; max-width:33em;}
  .mdj-open .eyebrow{color:var(--brass); margin-bottom:22px;}
  .mdj-open-title{font-family:var(--font-display); font-weight:400; font-size:clamp(42px,5.3vw,74px); line-height:1.02; letter-spacing:-0.015em; color:var(--ink); margin:0 0 28px; max-width:11ch; font-variation-settings:"opsz" 144;}
  .mdj-open-lede{font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(19px,1.75vw,23px); line-height:1.5; color:var(--soy); max-width:25em; margin:0; padding-bottom:30px; position:relative;}
  .mdj-open-lede::after{content:""; position:absolute; left:0; bottom:0; width:44px; height:1px; background:var(--brass); opacity:.7;}
  .mdj-open-body{padding-top:30px;}
  .mdj-open-body p{font-size:16px; line-height:1.8; margin:0 0 16px; color:var(--ink);}
  .mdj-open-body p.mdj-open-close{font-family:var(--font-display); font-style:italic; font-size:clamp(19px,1.6vw,22px); line-height:1.45; color:var(--brass); margin:26px 0 0;}
  .frame.mdj-open-portrait{aspect-ratio:4/5; min-height:0; width:100%; max-width:520px; margin-left:auto;}
  .frame.mdj-open-portrait img{object-position:50% 30%;}
  @media (max-width:1100px){
    .mdj-open-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  }
  @media (max-width:860px){
    .mdj-open-grid{grid-template-columns:minmax(0,1fr) minmax(0,.92fr); grid-template-areas:"head head" "body media"; column-gap:36px; align-items:start;}
    .mdj-open-head, .mdj-open-body{align-self:auto;}
    .mdj-open-title{max-width:none; font-size:clamp(42px,7.4vw,60px);}
    .mdj-open-lede{max-width:30em;}
    .frame.mdj-open-portrait{max-width:none; margin:34px 0 0;}
    .mdj-open-body{padding-top:34px;}
  }
  @media (max-width:600px){
    .mdj-open-grid{grid-template-columns:1fr; grid-template-areas:"head" "media" "body";}
    .mdj-open-lede{padding-bottom:0;}
    .mdj-open-lede::after{display:none;}
    .frame.mdj-open-portrait{margin-top:32px;}
    .mdj-open-body{padding-top:32px; max-width:36em;}
  }
  @media (max-width:480px){
    .frame.mdj-open-portrait{aspect-ratio:4/5;}
    .mdj-open-body p{font-size:15.5px;}
  }

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

  /* ---------- Madam Dai Jun: 02 Anshan, "Where It All Began." (editorial) ---------- */
  #anshan{padding-top:clamp(64px,7vw,96px); padding-bottom:clamp(64px,7vw,96px);}
  #anshan .anshan-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); grid-template-areas:"head head" "text map"; row-gap:0;}
  #anshan .anshan-head{grid-area:head;}
  #anshan .anshan-text{grid-area:text;}
  #anshan .anshan-figure{grid-area:map;}
  #anshan .eyebrow{margin-bottom:22px;}
  .anshan-title{font-family:var(--font-display); font-weight:400; font-size:clamp(38px,4.4vw,62px); line-height:1.03; letter-spacing:-0.015em; color:var(--bone); margin:0 0 clamp(26px,3vw,40px); font-variation-settings:"opsz" 144;}
  .anshan-body{max-width:31em;}
  .anshan-body p{font-size:16px; line-height:1.8; color:var(--bone-deep); margin:0 0 16px;}
  .anshan-close{font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(19px,1.7vw,23px); line-height:1.45; color:var(--brass-soft); margin:30px 0 0; padding-top:24px; max-width:22em; position:relative;}
  .anshan-close::before{content:""; position:absolute; top:0; left:0; width:44px; height:1px; background:var(--brass-soft); opacity:.7;}
  #anshan .am-china{fill-opacity:.035; stroke-opacity:.5;}
  @media (max-width:1100px) and (min-width:861px){
    #anshan .anshan-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"head head" "text map"; column-gap:40px; row-gap:0;}
    #anshan .anshan-figure{justify-self:end; width:calc(100% + min(var(--pad), 40px)); margin:0 calc(-1 * min(var(--pad), 40px)) 0 0;}
  }
  @media (max-width:860px){
    #anshan .anshan-grid{grid-template-columns:1fr; grid-template-areas:"head" "text" "map"; gap:0;}
    #anshan .anshan-text{max-width:640px;}
    #anshan .anshan-figure{margin-top:clamp(32px,6vw,48px); max-width:640px;}
  }
  @media (max-width:480px){ .anshan-body p{font-size:15.5px;} }

  /* ---------- Madam Dai Jun: 03 "From Her Mother's Kitchen" (editorial) ---------- */
  .mdj-kitchen{padding-top:clamp(64px,7vw,104px); padding-bottom:clamp(64px,7vw,104px);}
  .mdj-kitchen-grid{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); grid-template-areas:"head media" "body media"; column-gap:clamp(48px,6.5vw,104px); align-items:center;}
  .mdj-kitchen-head{grid-area:head; align-self:end;}
  .mdj-kitchen-media{grid-area:media; margin:0;}
  .mdj-kitchen-body{grid-area:body; align-self:start; max-width:33em; padding-top:28px;}
  .mdj-kitchen .eyebrow{color:var(--brass); margin-bottom:22px;}
  .mdj-kitchen-title{font-family:var(--font-display); font-weight:400; font-size:clamp(36px,4.2vw,58px); line-height:1.05; letter-spacing:-0.015em; color:var(--ink); margin:0 0 24px; max-width:14ch; font-variation-settings:"opsz" 144;}
  .mdj-kitchen-lede{font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(19px,1.7vw,22px); line-height:1.5; color:var(--soy); max-width:26em; margin:0; padding-bottom:28px; position:relative;}
  .mdj-kitchen-lede::after{content:""; position:absolute; left:0; bottom:0; width:44px; height:1px; background:var(--brass); opacity:.7;}
  .mdj-kitchen-body p{font-size:16px; line-height:1.8; margin:0 0 16px; color:var(--ink);}
  .mdj-kitchen-body p.mdj-kitchen-close{font-family:var(--font-display); font-style:italic; font-size:clamp(19px,1.6vw,22px); line-height:1.45; color:var(--brass); margin:26px 0 0; max-width:24em;}
  .frame.mdj-kitchen-photo{aspect-ratio:4/5; min-height:0; width:100%; max-width:580px; margin-left:auto;}
  .frame.mdj-kitchen-photo img{object-position:62% 50%;}
  @media (max-width:1100px){ .mdj-kitchen-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} }
  @media (max-width:860px){
    .mdj-kitchen-grid{grid-template-columns:minmax(0,1fr) minmax(0,.92fr); grid-template-areas:"head head" "body media"; column-gap:36px; align-items:start;}
    .mdj-kitchen-head, .mdj-kitchen-body{align-self:auto;}
    .mdj-kitchen-title{max-width:none;}
    .mdj-kitchen-media{align-self:center;}
    .frame.mdj-kitchen-photo{max-width:none; margin:28px 0 0; aspect-ratio:3/4;}
  }
  @media (max-width:600px){
    .mdj-kitchen-grid{grid-template-columns:1fr; grid-template-areas:"head" "media" "body";}
    .mdj-kitchen-lede{padding-bottom:0;}
    .mdj-kitchen-lede::after{display:none;}
    .frame.mdj-kitchen-photo{margin-top:30px; aspect-ratio:4/5;}
    .mdj-kitchen-body{padding-top:30px;}
    .mdj-kitchen-body p{font-size:15.5px;}
  }

  /* ---------- Madam Dai Jun: 04 "A New Country. A New Beginning." timeline + RM82 ---------- */
  .mdj-journey{padding-top:clamp(56px,6vw,84px); padding-bottom:clamp(56px,6vw,84px);}
  .journey-head{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); column-gap:clamp(40px,6vw,96px); align-items:end;}
  .mdj-journey .eyebrow{margin-bottom:22px;}
  .journey-title-main{font-family:var(--font-display); font-weight:400; font-size:clamp(36px,4.4vw,60px); line-height:1.04; letter-spacing:-0.015em; color:var(--bone); margin:0; max-width:14ch; font-variation-settings:"opsz" 144;}
  .journey-lede{font-family:var(--font-display); font-style:italic; font-size:clamp(19px,1.7vw,22px); line-height:1.5; color:var(--brass-soft); margin:0 0 14px; max-width:30em;}
  .journey-intro{font-size:15.5px; line-height:1.75; color:var(--bone-deep); margin:0; max-width:38em;}

  .journey{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); column-gap:clamp(40px,6vw,96px); margin-top:clamp(32px,4vw,52px);}
  .journey-step{grid-column:1; position:relative; padding:0 0 clamp(22px,2.4vw,28px) 40px; max-width:42em;}
  .journey-step--last{padding-bottom:0;}
  /* the line: a muted track plus a jade fill that draws as each milestone is reached */
  .journey-step::before, .journey-step::after{content:""; position:absolute; left:5px; top:8px; bottom:-8px; width:1px;}
  .journey-step::before{background:var(--line-on-dark);}
  .journey-step::after{background:var(--brass-soft); transform:scaleY(0); transform-origin:top; transition:transform .9s var(--ease);}
  .journey-step--last::before, .journey-step--last::after{display:none;}
  .journey-step.is-reached::after{transform:scaleY(1);}
  .journey-dot{position:absolute; left:0; top:3px; width:11px; height:11px; border-radius:50%; border:1px solid var(--brass-soft); background:var(--soy); z-index:1; transition:background-color .5s var(--ease), box-shadow .5s var(--ease);}
  .journey-step.is-reached .journey-dot{background:var(--brass-soft); box-shadow:0 0 0 5px rgba(107,199,153,.16);}
  .journey-meta{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin:0 0 8px;}
  .journey-date{font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--brass-soft);}
  .journey-tag{font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--bone-deep); opacity:.62;}
  .journey-tag::before{content:"·"; margin-right:12px; opacity:.8;}
  .journey-step-title{font-family:var(--font-display); font-weight:400; font-size:clamp(21px,1.8vw,24px); line-height:1.2; color:var(--bone); margin:0 0 8px;}
  .journey-text{font-size:15.5px; line-height:1.68; color:var(--bone-deep); margin:0 0 5px;}
  .journey-text:last-child{margin-bottom:0;}

  /* RM82 feature */
  .journey-feature{grid-column:2; grid-row:1 / span 4; align-self:start; position:sticky; top:clamp(110px,22vh,200px);}
  .jf-inner{position:relative; padding:clamp(28px,3vw,40px) 0 clamp(28px,3vw,40px) clamp(28px,3vw,44px); border-left:1px solid var(--line-on-dark);}
  .jf-kicker{margin:0 0 6px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--brass-soft);}
  .jf-figure{margin:0; display:flex; align-items:flex-start; font-family:var(--font-display); color:var(--bone); line-height:.86; overflow:hidden; padding-bottom:.04em;}
  .jf-cur{font-size:clamp(26px,2.6vw,38px); font-weight:400; letter-spacing:.04em; color:var(--brass-soft); margin:.32em .12em 0 0; font-variation-settings:"opsz" 72;}
  .jf-num{display:block; font-size:clamp(120px,14vw,208px); font-weight:300; letter-spacing:-0.04em; font-variation-settings:"opsz" 144;}
  .jf-rule{display:block; width:56px; height:1px; background:var(--brass-soft); margin:clamp(18px,2vw,26px) 0 clamp(16px,1.8vw,22px); transform-origin:left;}
  .jf-line1{font-family:var(--font-display); font-style:italic; font-size:clamp(19px,1.7vw,23px); line-height:1.4; color:var(--bone); margin:0 0 6px;}
  .jf-line2{font-size:15px; line-height:1.6; color:var(--bone-deep); opacity:.85; margin:0;}

  /* motion (only when JS runs and motion is allowed; content is visible without it) */
  .journey.has-motion .journey-step{opacity:.6; transition:opacity .6s var(--ease);}
  .journey.has-motion .journey-step.is-reached{opacity:1;}
  .journey.has-motion .jf-num{transform:translateY(16%); opacity:.12; transition:transform 1.1s cubic-bezier(.16,1,.3,1), opacity .8s var(--ease);}
  .journey.has-motion .jf-cur{opacity:.25; transition:opacity .8s var(--ease) .25s;}
  .journey.has-motion .jf-rule{transform:scaleX(0); transition:transform .9s var(--ease) .35s;}
  .journey.has-motion .jf-line1, .journey.has-motion .jf-line2{opacity:.3; transform:translateY(6px); transition:opacity .7s var(--ease) .5s, transform .7s var(--ease) .5s;}
  .journey.has-motion .jf-line2{transition-delay:.65s;}
  .journey.has-motion .journey-feature.is-on .jf-num, .journey.has-motion .journey-feature.is-on .jf-cur,
  .journey.has-motion .journey-feature.is-on .jf-line1, .journey.has-motion .journey-feature.is-on .jf-line2{opacity:1; transform:none;}
  .journey.has-motion .journey-feature.is-on .jf-rule{transform:scaleX(1);}

  @media (max-width:860px){
    .journey-head{grid-template-columns:1fr;}
    .journey-head-side{margin-top:22px;}
    .journey-title-main{max-width:16ch;}
    .journey{grid-template-columns:1fr;}
    .journey-feature{grid-column:1; grid-row:auto; position:relative; top:auto; padding:0 0 clamp(22px,2.4vw,28px) 40px;}
    .journey-feature::before{content:""; position:absolute; left:5px; top:-8px; bottom:0; width:1px; background:var(--brass-soft);}
    .jf-inner{border-left:0; padding:18px 0 20px; border-top:1px solid var(--line-on-dark); border-bottom:1px solid var(--line-on-dark);}
    .jf-num{font-size:clamp(88px,26vw,132px);}
    .jf-rule{margin:14px 0 12px;}
    .journey-text{font-size:15px;}
  }

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

  /* ---------- Madam Dai Jun: 05 "A Personal Touch, In Every Dish." ---------- */
  .mdj-heart{padding-top:clamp(64px,7vw,104px); padding-bottom:clamp(72px,8vw,112px); border-bottom:0; background:var(--bone);}
  .heart-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(48px,7vw,112px); align-items:center;}
  .mdj-heart .eyebrow{color:var(--brass); margin-bottom:22px;}
  .heart-title{font-family:var(--font-display); font-weight:400; font-size:clamp(36px,4.3vw,60px); line-height:1.05; letter-spacing:-0.015em; color:var(--ink); margin:0 0 30px; font-variation-settings:"opsz" 144;}
  .heart-body{max-width:31em;}
  .heart-body p{font-size:16px; line-height:1.8; color:var(--ink); margin:0 0 16px;}
  .heart-body p:last-child{font-family:var(--font-display); font-style:italic; font-size:clamp(18px,1.55vw,21px); line-height:1.5; color:var(--soy); margin:22px 0 0;}
  .heart-quote{position:relative; margin:0; padding:clamp(40px,4vw,64px) 0 0 clamp(8px,1.5vw,24px);}
  .heart-mark{position:absolute; top:-.28em; left:-.06em; font-family:var(--font-display); font-style:italic; font-weight:300; font-size:clamp(170px,19vw,280px); line-height:1; color:var(--brass); opacity:.16; pointer-events:none; user-select:none;}
  html.motion [data-motion].m-in .heart-mark{opacity:.16;}
  .heart-quote blockquote{position:relative; margin:0;}
  .heart-quote blockquote p{margin:0; font-family:var(--font-display); font-style:italic; font-weight:300; font-size:clamp(40px,4.9vw,74px); line-height:1.08; letter-spacing:-0.012em; color:var(--ink); font-variation-settings:"opsz" 144;}
  .heart-home{font-style:italic; color:var(--brass); position:relative; white-space:nowrap;}
  .heart-home::after{content:""; position:absolute; left:0; right:0; bottom:.04em; height:1px; background:var(--brass); opacity:.6; transform-origin:left; transform:scaleX(1);}
  html.motion [data-motion] .heart-home::after{transform:scaleX(0); transition:transform 1.1s var(--m-ease) 1.6s;}
  html.motion [data-motion].m-in .heart-home::after{transform:scaleX(1);}
  .heart-cite{display:flex; align-items:center; gap:14px; margin-top:clamp(22px,2.4vw,32px); font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--soy);}
  .heart-cite-rule{display:block; width:36px; height:1px; background:var(--brass);}
  @media (max-width:860px){
    .heart-title{font-size:clamp(38px,7vw,54px);}
    .heart-grid{grid-template-columns:1fr;}
    .heart-quote{margin-top:clamp(40px,8vw,60px); padding:clamp(40px,9vw,60px) 0 0;}
    .heart-quote blockquote p{font-size:clamp(36px,9vw,56px);}
    .heart-mark{font-size:clamp(150px,36vw,220px);}
  }

  /* ---------- Madam Dai Jun: 06 "The Dream Lives On" (closing chapter) ---------- */
  .mdj-dream{position:relative; isolation:isolate; border-top:0; border-bottom:0;
    padding-top:clamp(80px,8.5vw,124px); padding-bottom:clamp(96px,9vw,136px);
    /* clean finish: the red stays rich to its edge and meets the footer on a fine warm-gold hairline */
    box-shadow:inset 0 -1px 0 rgba(255,217,176,.24);
    background:
      /* tonal depth: warm light from upper right, shadow lower left */
      radial-gradient(80% 70% at 88% 18%, rgba(255,190,140,.16), transparent 60%),
      radial-gradient(70% 60% at 0% 100%, rgba(0,0,0,.28), transparent 60%),
      linear-gradient(165deg, #9a2a17 0%, #7d1f12 48%, #5a150b 100%);}
  /* fine grain for a printed-paper feel (static, tiny inline SVG) */
  .mdj-dream::before{content:""; position:absolute; inset:0; z-index:-1; opacity:.12; mix-blend-mode:soft-light; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
  .mdj-dream .eyebrow{color:#ffd9b0; margin-bottom:24px;}
  .dream-title{font-family:var(--font-display); font-weight:400; font-size:clamp(40px,5.6vw,84px); line-height:1.02; letter-spacing:-0.018em; color:#fff6ec; margin:0 0 clamp(36px,4.5vw,60px); font-variation-settings:"opsz" 144;}
  .dream-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); column-gap:clamp(48px,7vw,112px); align-items:center;}
  .dream-body{max-width:31em;}
  .dream-body p{font-size:16px; line-height:1.8; color:rgba(255,246,236,.86); margin:0 0 16px;}
  .dream-body p.dream-lead{font-family:var(--font-display); font-style:italic; font-size:clamp(19px,1.6vw,22px); line-height:1.5; color:#ffd9b0; margin:22px 0 0;}
  .dream-quote{position:relative; margin:0; padding:clamp(34px,3.5vw,54px) 0 0 clamp(8px,1.5vw,24px);}
  .dream-mark{position:absolute; top:-.3em; left:-.05em; font-family:var(--font-display); font-style:italic; font-weight:300; font-size:clamp(160px,17vw,250px); line-height:1; color:#ffd9b0; opacity:.2; pointer-events:none; user-select:none;}
  html.motion [data-motion].m-in .dream-mark{opacity:.2;}
  .dream-quote blockquote{position:relative; margin:0;}
  .dream-quote blockquote p{margin:0; font-family:var(--font-display); font-style:italic; font-weight:300; font-size:clamp(30px,3.3vw,48px); line-height:1.16; letter-spacing:-0.01em; color:#fff6ec; font-variation-settings:"opsz" 144;}
  .dream-cite{display:flex; align-items:center; gap:14px; margin-top:clamp(22px,2.4vw,32px); font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:#ffd9b0;}
  .dream-cite-rule{display:block; width:36px; height:1px; background:#ffd9b0;}
  @media (max-width:860px){
    .mdj-dream{padding-top:clamp(64px,12vw,96px); padding-bottom:clamp(88px,16vw,116px);}
    .dream-title{font-size:clamp(38px,8.4vw,60px);}
    .dream-grid{grid-template-columns:1fr;}
    .dream-quote{margin-top:clamp(40px,8vw,60px); padding:clamp(40px,9vw,60px) 0 0;}
    .dream-quote blockquote p{font-size:clamp(28px,6.6vw,42px);}
    .dream-mark{font-size:clamp(140px,34vw,210px);}
  }

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