/* ---------- design tokens ---------- */
  :root{
    --porcelain:#EFE3CC;   /* warm dim cream — feels like soft restaurant lighting */
    --porcelain-2:#E5D6BB; /* deeper toasted, for alternating sections */
    --mist:#D9C9AC;
    --ink:#1A1411;
    --ink-2:#3A2E27;
    --ink-3:#6B5C52;
    --oxblood:#5A1A1F;
    --oxblood-deep:#3F0F12;
    --jade:#3E6E5A;
    --jade-soft:#6E907E;
    --brass:#B08D57;
    --brass-soft:#D6B98A;
    --copper:#C77A5D;

    --serif:'Cormorant Garamond', 'Noto Serif TC', Georgia, serif;
    --display:'Italiana', 'Cormorant Garamond', 'Noto Serif TC', Georgia, serif;
    --sans:'Tenor Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    --han:'Noto Serif TC', 'Cormorant Garamond', serif;

    --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem;
    --space-5:3rem; --space-6:4.5rem; --space-7:6.5rem; --space-8:9rem;

    --container:1240px;
    --hairline:1px;
    --radius:2px;

    --nav-h:74px;
    --ease:cubic-bezier(.22,.61,.36,1);
    --ease-out:cubic-bezier(.16,1,.3,1);
  }

  /* ---------- reset ---------- */
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{
    margin:0;
    background:var(--porcelain);
    color:var(--ink);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:clip; /* clip (not hidden) so position:sticky descendants still work */
  }
  html{overflow-x:clip}
  img,svg{display:block;max-width:100%;height:auto}
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
  ::selection{background:var(--oxblood);color:var(--porcelain)}

  /* ---------- typography primitives ---------- */
  .display{
    font-family:var(--serif);
    font-weight:500;
    line-height:1.05;
    letter-spacing:-.005em;
  }
  .han{font-family:var(--han);font-weight:500;letter-spacing:.08em}
  .eyebrow{
    display:inline-flex;align-items:center;gap:.65rem;
    font-family:var(--sans);
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.28em;
    color:var(--oxblood);
    font-weight:500;
  }
  .eyebrow::before{
    content:""; width:28px; height:1px; background:var(--brass);
  }
  .eyebrow .cn{
    font-family:var(--han);
    letter-spacing:.18em;
    color:var(--ink-3);
    text-transform:none;
    font-size:.78rem;
    font-weight:400;
  }
  .lede{
    font-family:var(--serif);
    font-style:italic;
    font-weight:400;
    color:var(--ink-2);
    font-size:clamp(1.05rem, 1.5vw, 1.25rem);
    line-height:1.55;
    max-width:46ch;
  }

  /* ---------- layout primitives ---------- */
  .container{
    width:100%;
    max-width:var(--container);
    margin:0 auto;
    padding:0 clamp(1.25rem, 4vw, 2.5rem);
    position:relative;
    z-index:2;
  }
  .section{padding:var(--space-7) 0; position:relative; isolation:isolate}
  .section-sm{padding:var(--space-6) 0; position:relative; isolation:isolate}

  /* ---------- material backgrounds: paper grain on porcelain sections ---------- */
  .story::after, .menu::after, .events::after, .gallery::after, .dtable::after, .visit::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.04 0 0 0 0 0.03 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:240px 240px;
    opacity:.08;
    mix-blend-mode:multiply;
  }
  /* Visit gets the same atmospheric wash treatment — copper sunrise + jade evening + oxblood corner glow */
  .visit::before{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:
      radial-gradient(1500px 850px at 14% 5%, rgba(199,122,93,.16), transparent 58%),
      radial-gradient(1200px 750px at 90% 92%, rgba(62,110,90,.10), transparent 55%),
      radial-gradient(800px 500px at 96% 8%, rgba(90,26,31,.07), transparent 60%),
      linear-gradient(135deg, rgba(255,255,255,.03) 0%, transparent 24%),
      radial-gradient(70% 110% at 50% 50%, transparent 60%, rgba(40,20,15,.1) 100%);
  }
  /* story gets its own gentler bloom — corner washes would fight the top dark gradient */
  .story::before{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:
      radial-gradient(900px 500px at 100% 80%, rgba(62,110,90,.06), transparent 60%);
  }
  /* === atmospheric directional washes — like candlelight raking across each section === */
  .menu::before{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:
      radial-gradient(1400px 800px at 92% 12%, rgba(199,122,93,.16), transparent 58%),
      radial-gradient(1100px 700px at 6% 95%, rgba(62,110,90,.09), transparent 55%),
      radial-gradient(700px 500px at 100% 55%, rgba(90,26,31,.08), transparent 60%),
      linear-gradient(135deg, rgba(255,255,255,.03) 0%, transparent 26%),
      radial-gradient(70% 110% at 50% 50%, transparent 60%, rgba(40,20,15,.12) 100%);
  }
  .dtable::before{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:
      radial-gradient(1500px 850px at 8% 8%, rgba(199,122,93,.16), transparent 58%),
      radial-gradient(1200px 750px at 96% 100%, rgba(62,110,90,.09), transparent 55%),
      radial-gradient(750px 500px at 0% 55%, rgba(90,26,31,.08), transparent 60%),
      linear-gradient(225deg, rgba(255,255,255,.03) 0%, transparent 26%),
      radial-gradient(70% 110% at 50% 50%, transparent 60%, rgba(40,20,15,.12) 100%);
  }
  .dtable{background: var(--porcelain-2)}
  /* press section — inset vignette so it reads as a framed quote, not a flat panel */
  .press::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
    background: radial-gradient(80% 75% at 50% 50%, transparent 35%, rgba(0,0,0,.55) 100%);
  }

  /* ---------- signature: ink brushstroke divider ---------- */
  .brush{
    display:block; width:min(420px, 60%); height:34px;
    margin:var(--space-5) auto;
    color:var(--oxblood);
    opacity:.85;
  }
  .brush path{
    stroke:currentColor;
    stroke-width:2.5;
    stroke-linecap:round;
    fill:none;
    stroke-dasharray:600;
    stroke-dashoffset:600;
    transition:stroke-dashoffset 1400ms var(--ease-out);
  }
  .reveal.in .brush path{stroke-dashoffset:0}

  /* vermillion chop on hero */
  .chop{
    position:absolute;
    width:78px; height:78px;
    border:2px solid var(--oxblood);
    background:linear-gradient(135deg,#7a2025 0%,#5A1A1F 100%);
    display:grid;place-items:center;
    color:#fbeed6;
    font-family:var(--han);
    font-weight:600;
    font-size:38px;
    box-shadow:inset 0 0 0 3px rgba(245,239,230,.18);
    transform:rotate(-4deg);
  }

  /* ---------- nav ---------- */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    height:var(--nav-h);
    background:linear-gradient(to bottom, rgba(26,20,17,.55), rgba(26,20,17,0));
    transition:background 360ms var(--ease), backdrop-filter 360ms var(--ease), box-shadow 360ms var(--ease);
  }
  .nav.scrolled{
    background:rgba(239,227,204,.92);
    -webkit-backdrop-filter:saturate(160%) blur(12px);
    backdrop-filter:saturate(160%) blur(12px);
    box-shadow:0 1px 0 var(--mist);
  }
  .nav-inner{
    height:100%;
    display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  }
  .brand{
    display:flex;align-items:center;gap:.7rem;
    color:var(--porcelain);
    transition:color 300ms var(--ease);
  }
  .nav.scrolled .brand{color:var(--ink)}
  .brand-mark{
    width:42px;height:42px;
    flex-shrink:0;
    object-fit:contain;
    filter:drop-shadow(0 1px 4px rgba(0,0,0,.25));
  }
  .brand-text{
    display:flex;flex-direction:column;
    line-height:1.04; gap:.18rem;
  }
  .brand-han{
    font-family:var(--han);
    font-size:.95rem;
    letter-spacing:.18em;
    font-weight:500;
    color:var(--copper);
  }
  .brand-name{
    font-family:var(--serif);
    font-size:1.05rem;
    letter-spacing:.1em;
    font-weight:500;
    color:inherit;
  }
  .brand-tag{
    font-family:var(--sans);
    font-size:.56rem;
    letter-spacing:.42em;
    text-transform:uppercase;
    color:var(--copper);
    margin-top:.15rem;
    opacity:.85;
  }
  /* nav actions: Reserve CTA + hamburger together at top-right */
  .nav-actions{
    display:flex;align-items:center;gap:1.1rem;
  }
  .nav-cta{
    display:inline-flex; align-items:center;
    border:1px solid currentColor;
    padding:.65rem 1.2rem;
    font-family: var(--sans);
    font-size:.65rem;letter-spacing:.36em;text-transform:uppercase;
    font-weight: 400;
    transition:background 280ms var(--ease), color 280ms var(--ease), border-color 280ms var(--ease);
    color:var(--porcelain);
    text-decoration:none;
    min-height: 38px;
  }
  .nav.scrolled .nav-cta{color:var(--oxblood);border-color:var(--oxblood)}
  .nav-cta:hover{background:var(--oxblood);color:var(--porcelain);border-color:var(--oxblood)}

  /* hamburger toggle — visible at every viewport */
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:46px;height:46px;
    color:var(--porcelain);
    background:transparent;border:0;cursor:pointer;
    transition:color 240ms var(--ease);
  }
  .nav.scrolled .nav-toggle{color:var(--ink)}
  .nav-toggle span{
    width:24px;height:1.5px;background:currentColor;position:relative;display:block;
    transition:background 300ms var(--ease);
  }
  .nav-toggle span::before, .nav-toggle span::after{
    content:""; position:absolute; left:0; width:24px; height:1.5px; background:currentColor;
    transition:transform 360ms var(--ease), top 300ms var(--ease) 60ms;
  }
  .nav-toggle span::before{top:-8px}
  .nav-toggle span::after{top:8px}
  .nav-toggle[aria-expanded="true"] span{background:transparent}
  .nav-toggle[aria-expanded="true"] span::before{top:0; transform:rotate(45deg); transition: top 300ms var(--ease), transform 360ms var(--ease) 60ms}
  .nav-toggle[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg); transition: top 300ms var(--ease), transform 360ms var(--ease) 60ms}

  /* legacy hidden — drawer replaces nav-links */
  .nav-links{display:none}

  /* ---------- premium fullscreen nav drawer ---------- */
  .nav-drawer{
    position:fixed; inset:0; z-index:80;
    background: radial-gradient(1400px 900px at 80% 20%, rgba(90,26,31,.65), transparent 55%),
                radial-gradient(1100px 800px at 5% 95%, rgba(199,122,93,.18), transparent 55%),
                linear-gradient(180deg, #0d0807 0%, #1a0e0c 100%);
    -webkit-backdrop-filter: saturate(160%) blur(24px);
    backdrop-filter: saturate(160%) blur(24px);
    color: var(--porcelain);
    opacity:0; visibility:hidden;
    transition: opacity 520ms var(--ease-out), visibility 520ms;
    display:flex; align-items:safe center; justify-content:center;
    padding: clamp(2rem, 6vh, 4rem) clamp(1.25rem, 4vw, 3rem);
    overflow-y:auto;
  }
  .nav-drawer.open{opacity:1; visibility:visible}
  .nav-drawer::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:
      linear-gradient(135deg, rgba(255,255,255,.025) 0%, transparent 30%, transparent 70%, rgba(0,0,0,.2) 100%);
  }

  .drawer-close{
    position:absolute; top: clamp(1rem, 2.5vh, 1.6rem); right: clamp(1.25rem, 4vw, 2.5rem);
    width:46px;height:46px;
    background:transparent;border:0;cursor:pointer;color:var(--porcelain);
    display:flex;align-items:center;justify-content:center;
    opacity:.78;
    transition: opacity 280ms var(--ease), transform 320ms var(--ease);
  }
  .drawer-close:hover{opacity:1; transform: rotate(90deg)}
  .drawer-close svg{width:24px;height:24px}

  .drawer-inner{
    width: 100%;
    max-width: 720px;
    text-align:center;
    position:relative;
  }

  .drawer-eyebrow{
    font-family: var(--sans);
    font-size: .62rem;
    letter-spacing: .48em;
    text-transform: uppercase;
    color: var(--brass-soft);
    margin-bottom: clamp(1.5rem, 3.5vh, 2.5rem);
    opacity: 0;
    transition: opacity 700ms var(--ease-out) 150ms;
  }
  .nav-drawer.open .drawer-eyebrow{opacity:.85}

  .drawer-nav{
    display:flex;flex-direction:column;
    gap: clamp(.2rem, .9vh, .5rem);
  }
  .drawer-nav a{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: clamp(1rem, 3vw, 2rem);
    padding: clamp(.35rem, .85vh, .55rem) clamp(.5rem, 2vw, 1rem);
    color: var(--porcelain);
    text-decoration: none;
    border-bottom: 1px solid rgba(245,239,230,.08);
    transition: background 320ms var(--ease), border-color 320ms var(--ease);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms var(--ease-out), transform 720ms var(--ease-out), background 320ms var(--ease), border-color 320ms var(--ease);
  }
  .nav-drawer.open .drawer-nav a{opacity:1; transform:none}
  .nav-drawer.open .drawer-nav a[data-i="0"]{transition-delay: 220ms, 220ms, 0s, 0s}
  .nav-drawer.open .drawer-nav a[data-i="1"]{transition-delay: 290ms, 290ms, 0s, 0s}
  .nav-drawer.open .drawer-nav a[data-i="2"]{transition-delay: 360ms, 360ms, 0s, 0s}
  .nav-drawer.open .drawer-nav a[data-i="3"]{transition-delay: 430ms, 430ms, 0s, 0s}
  .nav-drawer.open .drawer-nav a[data-i="4"]{transition-delay: 500ms, 500ms, 0s, 0s}
  .nav-drawer.open .drawer-nav a[data-i="5"]{transition-delay: 570ms, 570ms, 0s, 0s}
  .nav-drawer.open .drawer-nav a[data-i="6"]{transition-delay: 640ms, 640ms, 0s, 0s}

  .drawer-nav a:hover{
    background: rgba(245,239,230,.04);
    border-bottom-color: var(--brass-soft);
  }
  .drawer-num{
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(.85rem, 1.2vw, 1rem);
    color: var(--brass-soft);
    letter-spacing: .15em;
    opacity: .8;
    justify-self: start;
  }
  .drawer-en{
    font-family: var(--display);
    font-size: clamp(1.6rem, 3.6vw, 2.7rem);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1.04;
    text-align: left;
    justify-self: start;
  }
  .drawer-cn{
    font-family: var(--han);
    font-size: clamp(.78rem, 1.2vw, 1rem);
    letter-spacing: .32em;
    color: var(--brass-soft);
    opacity: .75;
    justify-self: end;
  }

  .drawer-contact{
    margin-top: clamp(2.5rem, 6vh, 4rem);
    display:flex; flex-direction:column;
    gap: clamp(.85rem, 2vh, 1.2rem);
    opacity: 0;
    transition: opacity 800ms var(--ease-out) 720ms;
  }
  .nav-drawer.open .drawer-contact{opacity:1}
  .drawer-contact-line{
    display:flex; flex-direction:column;
    text-decoration: none;
    color: var(--porcelain);
    gap: .25rem;
    padding: .4rem 0;
    transition: color 240ms var(--ease);
  }
  .drawer-contact-line:hover{color: var(--brass-soft)}
  .drawer-contact-label{
    font-family: var(--sans);
    font-size: .55rem;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--brass-soft);
    opacity: .7;
  }
  .drawer-contact-value{
    font-family: var(--serif);
    font-size: clamp(.95rem, 1.5vw, 1.15rem);
    letter-spacing: .02em;
  }
  .drawer-contact-address .drawer-contact-value{
    font-size: clamp(.85rem, 1.3vw, 1rem);
    line-height: 1.4;
    color: rgba(245,239,230,.78);
  }

  /* prevent body scroll while drawer open */
  body.drawer-open{overflow:hidden}

  /* ---------- scroll-reveal hero ---------- */
  .scroll-hero{
    position:relative;
    width:100%;
    height:calc(700px + 100vh);
    background:#07060a;
    isolation:isolate;
    color:var(--porcelain);
  }
  .scroll-hero-sticky{
    position:sticky; top:0;
    height:100vh; height:100dvh;
    width:100%;
    overflow:hidden;
  }
  .scroll-hero-frame{
    position:absolute; inset:0;
    background-image:
      radial-gradient(ellipse 75% 55% at 50% 52%, rgba(7,6,10,.6) 0%, rgba(7,6,10,.25) 55%, rgba(7,6,10,0) 100%),
      linear-gradient(180deg, rgba(7,6,10,.45) 0%, rgba(7,6,10,.15) 30%, rgba(7,6,10,.55) 100%),
      url('hero.jpg'); /* path is relative to this stylesheet (assets/) */
    background-size:170%;
    background-position:center;
    background-repeat:no-repeat;
    clip-path: polygon(25% 25%, 75% 25%, 75% 75%, 25% 75%);
    will-change: clip-path, background-size;
    transition: clip-path 80ms linear, background-size 80ms linear;
  }
  .scroll-hero-overlay{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    pointer-events:none;
    z-index:2;
  }
  .hero-stage{
    pointer-events:auto;
    width:100%;
    max-width:1100px;
    padding:0 clamp(1.25rem, 4vw, 2.5rem);
    display:flex;flex-direction:column;align-items:center;
    text-align:center;
    color:var(--porcelain);
  }
  .hero-title{
    font-family:var(--display);
    font-weight:400;
    font-size:clamp(2.8rem, 10.5vw, 8.4rem);
    letter-spacing:.085em;
    line-height:.95;
    margin:0;
    text-transform:uppercase;
    text-shadow:0 1px 50px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.35);
    text-indent:.085em;
    /* scroll-driven initial state */
    opacity:0;
    transform:translateY(28px);
    will-change:opacity, transform;
  }
  .hero-cn{
    margin-top:1.6rem;
    font-family:var(--han);
    font-size:clamp(.78rem, 1.15vw, 1rem);
    color:var(--copper);
    display:flex;align-items:center;justify-content:center;gap:1.5em;
    line-height:1;
    opacity:0;
    transform:translateY(20px);
    will-change:opacity, transform;
  }
  .hero-cn::before, .hero-cn::after{
    content:""; display:block;
    width:clamp(28px, 6vw, 64px); height:1px;
    background:linear-gradient(to right, transparent, rgba(199,122,93,.7), transparent);
  }
  .hero-cn span{display:inline-block; letter-spacing:.05em}
  .hero-actions{
    margin-top:2.6rem;
    display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;
    opacity:0;
    transform:translateY(18px);
    will-change:opacity, transform;
  }
  /* progress dot — gently nudges scrolling */
  .scroll-cue{
    position:absolute; left:50%; bottom:2rem;
    transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:.6rem;
    color:rgba(245,239,230,.7);
    font-size:.66rem; letter-spacing:.36em; text-transform:uppercase;
    pointer-events:none;
    z-index:3;
    transition:opacity 360ms var(--ease);
  }
  .scroll-cue .line{
    width:1px;height:42px;background:linear-gradient(to bottom, transparent, var(--brass-soft));
    animation:cueDrop 1800ms var(--ease-out) infinite;
    transform-origin:top;
  }
  @keyframes cueDrop{
    0%{transform:scaleY(.2); opacity:0}
    30%{opacity:1}
    100%{transform:scaleY(1); opacity:0}
  }
  .btn{
    display:inline-flex;align-items:center;gap:.7rem;
    padding:1rem 1.8rem;
    font-family:var(--sans);
    font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;
    font-weight:500;
    border:1px solid currentColor;
    transition:transform 220ms var(--ease), background 280ms var(--ease), color 280ms var(--ease), border-color 280ms var(--ease);
    min-height:48px;
    cursor:pointer;
  }
  .btn-primary{background:var(--oxblood);color:var(--porcelain);border-color:var(--oxblood)}
  .btn-primary:hover{background:var(--oxblood-deep);border-color:var(--oxblood-deep)}
  .btn-ghost{color:var(--porcelain)}
  .btn-ghost:hover{background:var(--porcelain);color:var(--ink)}
  .btn .arr{transition:transform 280ms var(--ease)}
  .btn:hover .arr{transform:translateX(4px)}


  /* ---------- section heads ---------- */
  .section-head{
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:clamp(2rem, 6vw, 5rem);
    align-items:end;
    margin-bottom:var(--space-5);
  }
  .section-head h2{
    font-family:var(--serif);
    font-weight:500;
    font-size:clamp(2rem, 4.4vw, 3.4rem);
    line-height:1.05;
    margin:1rem 0 0;
    color:var(--ink);
    letter-spacing:-.005em;
  }
  .section-head h2 .em{font-style:italic;color:var(--oxblood);font-weight:400}
  .section-head .right{color:var(--ink-2)}

  /* ---------- story ---------- */
  .story{
    /* short transition contained in the top ~90px (behind generous section padding) — text always lands on solid cream */
    background:
      linear-gradient(180deg,
        #07060a 0%,
        #150b07 12%,
        #271209 22%,
        #3e1d12 32%,
        #5c2e1f 42%,
        #7a4530 52%,
        #966050 62%,
        #ad8170 72%,
        #c1a08e 80%,
        #d1bba9 87%,
        #ddccba 92%,
        #e6d8c4 96%,
        var(--porcelain) 100%)
      top/100% 90px no-repeat
      var(--porcelain);
    position:relative;
    /* more breathing room below the nav, tighter bottom — editorial rhythm */
    padding-top: clamp(7rem, 14vh, 10rem);
    padding-bottom: clamp(4rem, 8vh, 6rem);
  }
  /* story-specific: pull the image up close to the headline, kill the cavernous gap */
  .story .section-head{
    margin-bottom: var(--space-3);
    align-items: start;
  }
  .story .brush{display:none}
  /* darken the lede + drop it down so its first line aligns with the top of the headline,
     not the eyebrow — the eyebrow is a label, not a baseline */
  .story .section-head .lede{
    color: var(--ink);
    font-style: italic;
    margin-top: 3rem;
  }
  .story-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(2rem,6vw,5rem);
    align-items:center;
  }
  .story-img{
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;
  }
  .story-img img{
    width:100%;height:100%;object-fit:cover;
    transition:transform 1200ms var(--ease-out);
  }
  .reveal.in .story-img img{transform:scale(1.03)}
  .story-img::after{
    content:""; position:absolute; inset:0;
    border:1px solid var(--brass); transform:translate(18px,18px);
    pointer-events:none;
  }
  .story-text p{
    font-family:var(--serif);
    font-size:1.18rem;
    line-height:1.65;
    color:var(--ink-2);
    margin:0 0 1.2rem;
    max-width:54ch;
  }
  .story-text p:first-of-type::first-letter{
    font-family:var(--serif);
    font-size:3.6rem;
    line-height:.9;
    float:left;
    margin:.2rem .6rem -.2rem 0;
    color:var(--oxblood);
    font-weight:600;
  }
  /* lobster portrait sits inside the 4:5 frame — center on the dish, not the gold cabinet */
  .story-img img{object-position:center 38%}

  /* ---------- menu ---------- */
  .menu{
    background:var(--porcelain-2);
    position:relative;
  }
  .menu-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:clamp(1.5rem, 3vw, 3rem) clamp(2rem, 5vw, 4.5rem);
  }
  .menu-card{
    border-top:1px solid var(--mist);
    padding-top:1.5rem;
    position:relative;
  }
  .menu-card .num{
    position:absolute; top:-.15rem; right:0;
    font-family:var(--serif); font-style:italic;
    color:var(--brass); font-size:1rem;
    letter-spacing:.2em;
  }
  .menu-card h3{
    font-family:var(--serif);
    font-size:1.6rem;
    font-weight:500;
    margin:0 0 .25rem;
    color:var(--ink);
    line-height:1.15;
  }
  .menu-card h3 .cn{
    display:block;
    font-family:var(--han);
    font-size:.85rem;
    letter-spacing:.32em;
    color:var(--ink-3);
    margin-top:.4rem;
    font-weight:400;
  }
  .menu-card p{
    color:var(--ink-2);
    font-size:.95rem;
    line-height:1.6;
    margin:.75rem 0 0;
    max-width:42ch;
  }
  .menu-card .tag{
    display:inline-block;
    font-size:.68rem; letter-spacing:.28em; text-transform:uppercase;
    color:var(--jade);
    margin-top:.85rem;
    font-weight:500;
  }

  .menu-cta{
    margin-top:var(--space-5);
    display:flex;justify-content:center;
  }
  .btn-ink{
    background:transparent;color:var(--ink);border-color:var(--ink);
  }
  .btn-ink:hover{background:var(--ink);color:var(--porcelain)}

  /* ---------- private dining (oxblood block) ---------- */
  .private{
    background:var(--oxblood);
    color:var(--porcelain);
    position:relative;
    overflow:hidden;
  }
  .private::before{
    content:""; position:absolute; inset:0; z-index:0;
    background:
      radial-gradient(1400px 700px at 8% -10%, rgba(199,122,93,.16), transparent 55%),
      radial-gradient(1100px 700px at 100% 110%, rgba(62,110,90,.18), transparent 55%),
      linear-gradient(135deg, rgba(255,255,255,.035) 0%, transparent 25%, transparent 75%, rgba(0,0,0,.18) 100%);
    pointer-events:none;
  }
  .private::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
    background: radial-gradient(110% 80% at 50% 50%, transparent 55%, rgba(0,0,0,.35) 100%);
  }
  .private .eyebrow{color:var(--brass-soft)}
  .private .eyebrow::before{background:var(--brass-soft)}
  .private .eyebrow .cn{color:rgba(245,239,230,.7)}
  .private .section-head h2{color:var(--porcelain)}
  .private .section-head h2 .em{color:var(--brass-soft)}
  .private .section-head .right{color:rgba(245,239,230,.78)}
  .rooms{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:clamp(1.25rem, 2.5vw, 2rem);
  }
  .room{
    background:rgba(245,239,230,.04);
    border:1px solid rgba(245,239,230,.16);
    padding:1.75rem;
    display:flex;flex-direction:column;gap:1rem;
    transition:transform 360ms var(--ease-out), background 360ms var(--ease);
    min-height:380px;
  }
  .room:hover{transform:translateY(-4px); background:rgba(245,239,230,.07)}
  .room .num{
    font-family:var(--serif); font-style:italic;
    color:var(--brass-soft); font-size:.9rem; letter-spacing:.3em;
  }
  .room h3{
    font-family:var(--serif);
    font-size:1.7rem; font-weight:500; margin:0;
    line-height:1.15;
  }
  .room h3 .cn{
    display:block; font-family:var(--han);
    font-size:.78rem; letter-spacing:.32em;
    color:var(--brass-soft); margin-top:.4rem; font-weight:400;
  }
  .room p{color:rgba(245,239,230,.78); margin:0; font-size:.95rem; line-height:1.6}
  .room ul{
    margin:auto 0 0; padding:0; list-style:none;
    display:flex; flex-direction:column; gap:.4rem;
    font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
    color:rgba(245,239,230,.7);
    border-top:1px solid rgba(245,239,230,.16);
    padding-top:1rem;
  }
  .room ul li{display:flex;justify-content:space-between}
  .room ul li strong{color:var(--porcelain); font-weight:500}

  /* ---------- events ---------- */
  .events{background:var(--porcelain)}
  .events-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:clamp(1rem, 2vw, 1.5rem);
  }
  .event{
    aspect-ratio:3/4;
    position:relative;
    overflow:hidden;
    color:var(--porcelain);
    display:flex;align-items:flex-end;
    padding:1.25rem;
    isolation:isolate;
  }
  .event img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
    transition:transform 1200ms var(--ease-out);
  }
  /* lion dance — push framing up and left so the lion centers and the foreground head crops out the bottom-right */
  .event.ev-lion img{object-position: 30% 25%}
  .event::after{
    content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg, rgba(26,20,17,0) 30%, rgba(26,20,17,.78) 100%);
  }
  .event:hover img{transform:scale(1.06)}
  .event h3{
    font-family:var(--serif); font-size:1.35rem; font-weight:500; margin:0;
    line-height:1.2;
  }
  .event .cn{
    display:block; font-family:var(--han); font-size:.72rem; letter-spacing:.32em;
    color:var(--brass-soft); margin-bottom:.4rem; font-weight:400;
  }

  /* ---------- gallery — burgundy lacquer with cream type ---------- */
  .gallery{
    background: var(--oxblood);
    color: var(--porcelain);
    isolation: isolate;
  }
  /* layered lacquer wash — copper bloom top-left, brass bloom bottom-right, soft diagonal highlight */
  .gallery::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(1300px 750px at 10% -8%, rgba(199,122,93,.20), transparent 55%),
      radial-gradient(1100px 750px at 100% 110%, rgba(176,141,87,.14), transparent 55%),
      linear-gradient(135deg, rgba(255,255,255,.045) 0%, transparent 25%, transparent 75%, rgba(0,0,0,.22) 100%);
  }
  /* override the multiply-grain — overlay blend reads as warmth on burgundy, not as a darkening */
  .gallery::after{
    mix-blend-mode: overlay;
    opacity: .06;
  }
  /* text colors override — brass-soft accents, porcelain headlines, dimmed cream body */
  .gallery .eyebrow{color: var(--brass-soft)}
  .gallery .eyebrow::before{background: var(--brass-soft)}
  .gallery .eyebrow .cn{color: rgba(245,239,230,.7)}
  .gallery .section-head h2{color: var(--porcelain)}
  .gallery .section-head h2 .em{color: var(--brass-soft)}
  .gallery .section-head .lede{color: rgba(245,239,230,.85)}
  /* editorial bento — five tiles, big volume, generous gaps */
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    grid-auto-rows: clamp(170px, 17vw, 220px);
    gap: 18px;
  }
  .gallery-grid figure{margin:0; overflow:hidden; position:relative; background:#1a1411}
  .gallery-grid img{
    width:100%;height:100%;object-fit:cover;
    transition:transform 1400ms var(--ease-out), filter 600ms var(--ease), clip-path 1200ms var(--ease-out);
    filter:saturate(.88) contrast(1.06) brightness(.97);
  }
  .gallery-grid figure:hover img{transform:scale(1.05); filter:saturate(1) contrast(1.08) brightness(1)}

  .g-a{grid-column:1/5; grid-row:1/4}   /* SUCKLING PIG — big landscape hero, 4 cols × 3 rows */
  .g-b{grid-column:5/7; grid-row:1/4}   /* LOBSTER SMOKE — tall portrait, 2 cols × 3 rows */
  .g-c{grid-column:1/3; grid-row:4/6}   /* CHAR SIU + SIU YUK — bottom-left square, 2×2 */
  .g-d{grid-column:3/5; grid-row:4/6}   /* RED SNAPPER — bottom-mid square, 2×2 */
  .g-e{grid-column:5/7; grid-row:4/6}   /* PEKING DUCK — bottom-right square, 2×2 */

  /* fine-tune crops so each subject sits in frame after the bento mask */
  .g-a img{object-position: center 42%}     /* duck on hook — keep ring and full body visible in tall hero */
  .g-b img{object-position: center 30%}     /* grouper sashimi + steam rising — keep upper steam */
  .g-c img{object-position: center 60%}     /* char siu + siu yuk centered on platter */
  .g-d img{object-position: 55% 38%}        /* snapper pour — keep the hand and ladle in frame */
  .g-e img{object-position: center 50%}     /* fish maw + celadon teapot — center composition */

  /* ---------- the table — dining categories ---------- */
  .dtable .section-head{align-items:start}
  .dtable .section-head .lede{margin-top: 3rem}

  .cat-grid{
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: clamp(240px, 24vw, 340px) clamp(240px, 24vw, 340px) clamp(200px, 18vw, 260px);
    gap: 18px;
  }
  /* layout: hero left (8 cols × 2 rows), tall seafood right (4 cols × 2 rows), 4 supporting cards on bottom row */
  .cat-1{grid-column: 1/9; grid-row: 1/3}
  .cat-2{grid-column: 9/13; grid-row: 1/3}
  .cat-3{grid-column: 1/4; grid-row: 3}
  .cat-4{grid-column: 4/7; grid-row: 3}
  .cat-5{grid-column: 7/10; grid-row: 3}
  .cat-6{grid-column: 10/13; grid-row: 3}

  .cat-card{
    position:relative;
    overflow:hidden;
    display:block;
    color:var(--porcelain);
    background:#1a1411;
    isolation:isolate;
    text-decoration:none;
  }
  .cat-card img{
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover;
    transition: transform 1600ms var(--ease-out), filter 700ms var(--ease), clip-path 1300ms var(--ease-out);
    filter: saturate(.88) contrast(1.08) brightness(.86);
    z-index:-2;
  }
  /* layered dark gradient — keeps imagery dominant, ensures label legibility */
  .cat-card::after{
    content:""; position:absolute; inset:0; z-index:-1;
    background:
      linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.45) 72%, rgba(7,4,3,.88) 100%),
      linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 28%);
    transition: background 500ms var(--ease);
  }
  .cat-card:hover img{transform: scale(1.035); filter: saturate(1) contrast(1.1) brightness(.94)}
  .cat-card:hover::after{
    background:
      linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.5) 70%, rgba(7,4,3,.92) 100%),
      linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 28%);
  }

  .cat-meta{
    position:absolute;
    bottom: clamp(1.1rem, 2vw, 1.6rem);
    left: clamp(1.2rem, 2vw, 1.7rem);
    right: clamp(1.2rem, 2vw, 1.7rem);
    display:flex; flex-direction:column;
    z-index: 1;
  }
  .cat-num{
    font-family: var(--serif);
    font-style: italic;
    font-size: .85rem;
    letter-spacing: .2em;
    color: var(--brass-soft);
    opacity:.85;
    margin-bottom: .55rem;
    transition: transform 600ms var(--ease), opacity 600ms var(--ease);
  }
  .cat-card h3{
    font-family: var(--serif);
    font-weight: 500;
    line-height: 1.12;
    margin: 0 0 .5rem;
    font-size: clamp(1.15rem, 1.65vw, 1.65rem);
    letter-spacing: .005em;
  }
  /* hero + tall cards get a larger title */
  .cat-1 h3, .cat-2 h3{
    font-size: clamp(1.4rem, 2.4vw, 2.2rem);
    letter-spacing: .002em;
  }
  .cat-1 .cat-meta, .cat-2 .cat-meta{
    bottom: clamp(1.5rem, 2.5vw, 2.4rem);
    left: clamp(1.5rem, 2.5vw, 2.4rem);
    right: clamp(1.5rem, 2.5vw, 2.4rem);
  }
  .cat-cn{
    font-family: var(--han);
    font-size: .72rem;
    letter-spacing: .32em;
    color: var(--brass-soft);
    opacity: .9;
    font-weight: 400;
  }
  .cat-1 .cat-cn, .cat-2 .cat-cn{ font-size: .8rem }

  /* hairline accent that draws on hover — quiet handcrafted detail */
  .cat-card h3::after{
    content:"";
    display:block;
    width: 28px; height: 1px;
    background: var(--brass-soft);
    margin-top: .55rem;
    transform: scaleX(0); transform-origin: left;
    transition: transform 600ms var(--ease-out);
  }
  .cat-card:hover h3::after{transform: scaleX(1)}

  /* lion dance — frame the lion centrally, crop the foreground head out the bottom-right */
  .cat-lion img{object-position: 30% 25%}
  .cat-1 img{object-position: center 60%}
  .cat-2 img{object-position: center 40%}

  /* restrained reveal: clip-wipe up + meta fade, staggered editorially */
  .cat-card img{clip-path: inset(0 0 100% 0)}
  .reveal.in .cat-grid .cat-card:nth-child(1) img{clip-path: inset(0 0 0 0); transition-delay: 80ms}
  .reveal.in .cat-grid .cat-card:nth-child(2) img{clip-path: inset(0 0 0 0); transition-delay: 200ms}
  .reveal.in .cat-grid .cat-card:nth-child(3) img{clip-path: inset(0 0 0 0); transition-delay: 350ms}
  .reveal.in .cat-grid .cat-card:nth-child(4) img{clip-path: inset(0 0 0 0); transition-delay: 450ms}
  .reveal.in .cat-grid .cat-card:nth-child(5) img{clip-path: inset(0 0 0 0); transition-delay: 550ms}
  .reveal.in .cat-grid .cat-card:nth-child(6) img{clip-path: inset(0 0 0 0); transition-delay: 650ms}
  .cat-meta{opacity:0; transform: translateY(10px); transition: opacity 950ms var(--ease-out), transform 950ms var(--ease-out)}
  .reveal.in .cat-grid .cat-card:nth-child(1) .cat-meta{opacity:1; transform:none; transition-delay: 480ms}
  .reveal.in .cat-grid .cat-card:nth-child(2) .cat-meta{opacity:1; transform:none; transition-delay: 580ms}
  .reveal.in .cat-grid .cat-card:nth-child(3) .cat-meta{opacity:1; transform:none; transition-delay: 750ms}
  .reveal.in .cat-grid .cat-card:nth-child(4) .cat-meta{opacity:1; transform:none; transition-delay: 850ms}
  .reveal.in .cat-grid .cat-card:nth-child(5) .cat-meta{opacity:1; transform:none; transition-delay: 950ms}
  .reveal.in .cat-grid .cat-card:nth-child(6) .cat-meta{opacity:1; transform:none; transition-delay: 1050ms}

  /* ---------- press ---------- */
  .press{
    background:var(--oxblood);
    color:var(--porcelain);
    text-align:center;
    isolation:isolate;
  }
  /* layered lacquer wash + corner blooms — the red/cream editorial contrast */
  .press::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(1200px 700px at 12% -10%, rgba(199,122,93,.18), transparent 55%),
      radial-gradient(1000px 700px at 100% 110%, rgba(176,141,87,.12), transparent 55%),
      linear-gradient(135deg, rgba(255,255,255,.04) 0%, transparent 25%, transparent 75%, rgba(0,0,0,.2) 100%);
  }
  .press .eyebrow{color:var(--brass-soft)}
  .press .eyebrow::before{background:var(--brass-soft)}
  .press blockquote{
    font-family:var(--serif);
    font-style:italic;
    font-weight:400;
    font-size:clamp(1.5rem, 3.2vw, 2.4rem);
    line-height:1.35;
    max-width:34ch;
    margin:var(--space-3) auto var(--space-4);
    color:var(--porcelain);
  }
  .press blockquote::before, .press blockquote::after{
    color:var(--brass);
    font-family:var(--serif);
  }
  .press blockquote::before{content:"\201C"}
  .press blockquote::after{content:"\201D"}
  .press .citation{
    font-size:.74rem; letter-spacing:.36em; text-transform:uppercase;
    color:rgba(245,239,230,.6);
  }
  .press-marks{
    display:flex; justify-content:center; flex-wrap:wrap;
    gap:clamp(2rem,5vw,4rem);
    margin-top:var(--space-5);
    padding-top:var(--space-4);
    border-top:1px solid rgba(245,239,230,.12);
  }
  .press-marks span{
    font-family:var(--serif); font-style:italic;
    font-size:1.1rem; color:var(--brass-soft); opacity:.9;
    letter-spacing:.04em;
  }

  /* ---------- visit / location ---------- */
  .visit{background:var(--porcelain)}
  .visit-grid{
    display:grid; grid-template-columns:1fr 1fr;
    gap:clamp(2rem,5vw,4rem); align-items:start;
  }
  .visit-map{
    aspect-ratio:4/3;
    border:1px solid var(--mist);
    overflow:hidden;
    background:var(--mist);
  }
  .visit-map iframe{width:100%;height:100%;border:0;display:block; filter:saturate(.9) contrast(.95)}
  .visit-info dl{margin:var(--space-3) 0 0;display:grid;grid-template-columns:auto 1fr;gap:1.1rem 2rem}
  .visit-info dt{
    font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
    color:var(--oxblood); font-weight:500; padding-top:.3rem;
  }
  .visit-info dd{
    margin:0; font-family:var(--serif); font-size:1.15rem;
    color:var(--ink); line-height:1.5;
  }
  .visit-info dd small{
    display:block; font-family:var(--sans); font-size:.85rem;
    color:var(--ink-3); margin-top:.2rem; letter-spacing:.02em;
  }

  /* ---------- reserve form ---------- */
  .reserve{
    background:var(--ink);
    color:var(--porcelain);
    position:relative;
    overflow:hidden;
  }
  .reserve::before{
    content:""; position:absolute; inset:0; z-index:0;
    background:
      radial-gradient(1100px 700px at 85% 15%, rgba(90,26,31,.55), transparent 60%),
      radial-gradient(900px 600px at 5% 95%, rgba(199,122,93,.12), transparent 55%),
      linear-gradient(135deg, rgba(255,255,255,.025) 0%, transparent 30%);
    pointer-events:none;
  }
  .reserve::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
    background: radial-gradient(120% 80% at 50% 50%, transparent 50%, rgba(0,0,0,.35) 100%);
  }
  .reserve .eyebrow{color:var(--brass-soft)}
  .reserve .eyebrow::before{background:var(--brass-soft)}
  .reserve .section-head h2{color:var(--porcelain)}
  .reserve .section-head h2 .em{color:var(--brass-soft)}
  .reserve .section-head .right{color:rgba(245,239,230,.75)}

  form.book{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1.5rem 1.5rem;
    margin-top:var(--space-4);
  }
  form.book .field{display:flex;flex-direction:column;gap:.5rem}
  form.book .full{grid-column:1 / -1}
  form.book label{
    font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
    color:var(--brass-soft); font-weight:500;
  }
  form.book input, form.book select, form.book textarea{
    font:inherit;
    background:transparent;
    color:var(--porcelain);
    border:0;
    border-bottom:1px solid rgba(245,239,230,.28);
    padding:.9rem 0;
    min-height:48px;
    font-family:var(--serif);
    font-size:1.1rem;
    transition:border-color 260ms var(--ease);
    border-radius:0;
  }
  form.book textarea{min-height:96px;resize:vertical}
  form.book input:focus, form.book select:focus, form.book textarea:focus{
    outline:none;
    border-bottom-color:var(--brass);
  }
  form.book select{appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--brass-soft) 50%, var(--brass-soft) 56%, transparent 56%); background-position:right 6px center; background-repeat:no-repeat; background-size:14px 14px}
  /* dropdown options — match dark editorial palette, not the browser default white */
  form.book select option{
    background-color: #1a1411;
    color: var(--porcelain);
    font-family: var(--serif);
    font-size: 1rem;
    padding: .6rem .8rem;
    letter-spacing: .02em;
  }
  form.book select option:checked, form.book select option:hover{
    background-color: var(--oxblood);
    color: var(--porcelain);
  }
  form.book .submit-row{
    grid-column:1 / -1;
    display:flex;justify-content:space-between;align-items:center;
    flex-wrap:wrap;gap:1rem;
    margin-top:1rem;
  }
  form.book .note{
    font-size:.78rem; color:rgba(245,239,230,.6);
    max-width:36ch;
  }
  .btn-brass{background:var(--brass);color:var(--ink);border-color:var(--brass)}
  .btn-brass:hover{background:var(--brass-soft);border-color:var(--brass-soft)}

  /* ---------- footer ---------- */
  footer{
    background:var(--oxblood-deep);
    color:rgba(245,239,230,.78);
    padding:var(--space-5) 0 var(--space-3);
  }
  .foot-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:2.5rem;
    align-items:start;
  }
  .foot-brand-lockup{
    display:flex;align-items:center;gap:.85rem;
  }
  .foot-brand-mark{
    width:54px;height:54px;
    flex-shrink:0;
    object-fit:contain;
  }
  .foot-brand-text{display:flex;flex-direction:column;line-height:1.05;gap:.25rem}
  .foot-brand-han{
    font-family:var(--han); color:var(--copper);
    font-size:1.15rem; letter-spacing:.18em; font-weight:500;
  }
  .foot-brand-name{
    font-family:var(--serif); color:var(--porcelain);
    font-size:1.25rem; letter-spacing:.1em; font-weight:500;
  }
  .foot-brand-tag{
    font-family:var(--sans); color:var(--copper);
    font-size:.6rem; letter-spacing:.42em; text-transform:uppercase;
    opacity:.85;
  }
  .foot-brand p{margin:1.1rem 0 0;font-size:.92rem; line-height:1.6; max-width:32ch}
  footer h4{
    font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
    color:var(--brass-soft); font-weight:500; margin:0 0 1rem;
  }
  footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
  footer a:hover{color:var(--porcelain)}
  .copy{
    margin-top:var(--space-5);
    padding-top:1.5rem;
    border-top:1px solid rgba(245,239,230,.12);
    display:flex;justify-content:space-between;align-items:center;
    flex-wrap:wrap;gap:1rem;
    font-size:.78rem; color:rgba(245,239,230,.5);
    letter-spacing:.06em;
  }

  /* ---------- sticky actions — slim premium pills ---------- */
  .sticky-actions{
    position:fixed; bottom:1.5rem; right:1.5rem; z-index:60;
    display:flex; flex-direction:column; gap:.55rem;
    align-items:flex-end;
  }
  .float-btn{
    display:inline-flex;align-items:center;gap:.6rem;
    padding:.55rem 1.1rem;
    font-family: var(--sans);
    font-size:.65rem; letter-spacing:.36em; text-transform:uppercase;
    font-weight:400;
    min-height:40px;
    border-radius: 999px;
    background: rgba(26,20,17,.78);
    -webkit-backdrop-filter: saturate(170%) blur(14px);
    backdrop-filter: saturate(170%) blur(14px);
    color: var(--porcelain);
    border: 1px solid rgba(245,239,230,.18);
    box-shadow: 0 6px 24px -10px rgba(0,0,0,.55);
    transition: transform 300ms var(--ease), background 300ms var(--ease), border-color 300ms var(--ease);
    text-decoration:none;
  }
  .float-btn:hover{
    transform: translateY(-1px);
    background: rgba(26,20,17,.94);
    border-color: rgba(245,239,230,.32);
  }
  .float-btn.wa{
    background: rgba(36,78,52,.78);
    border-color: rgba(110,165,128,.32);
  }
  .float-btn.wa:hover{background: rgba(36,78,52,.94); border-color: rgba(140,200,160,.42)}
  /* Membership — brass-lacquer pill so it reads as the standout entry point */
  .float-btn.member-btn{
    background: rgba(90,26,31,.86);
    border-color: rgba(176,141,87,.55);
    color: var(--brass-soft);
  }
  .float-btn.member-btn:hover{
    background: rgba(90,26,31,.97);
    border-color: rgba(214,185,138,.8);
    color: var(--porcelain);
  }
  .float-btn svg{width:15px;height:15px; opacity:.92}
  /* Menu button: only visible on mobile sticky bar — desktop already has Cuisine in the drawer */
  .menu-btn{display:none}

  /* ---------- scroll-linked micro-motion: gentle parallax + drift ---------- */
  /* CSS custom props get updated by JS on scroll; transforms compose with hover/reveal states */
  .story-img img,
  .gallery-grid img,
  .cat-card img,
  .visit-map iframe{
    --px: 0px;
    will-change: transform;
  }
  .section-head h2,
  .section-head .eyebrow,
  .story-text,
  .visit-info{
    --dy: 0px;
    will-change: transform;
  }

  /* base transform: scroll parallax on images */
  .story-img img{ transform: translate3d(0, var(--px), 0) }
  .reveal.in .story-img img{ transform: translate3d(0, var(--px), 0) scale(1.03) }

  .gallery-grid img{ transform: translate3d(0, var(--px), 0) }
  .gallery-grid figure:hover img{ transform: translate3d(0, var(--px), 0) scale(1.06) }

  .cat-card img{ transform: translate3d(0, var(--px), 0) }
  .cat-card:hover img{ transform: translate3d(0, var(--px), 0) scale(1.035) }

  .visit-map iframe{ transform: translate3d(0, var(--px), 0) }

  /* drift on headline + body content (gentle upward float as the section passes through) */
  .section-head h2{ transform: translate3d(0, var(--dy), 0) }
  .section-head .eyebrow{ transform: translate3d(0, var(--dy), 0) }
  .story-text{ transform: translate3d(0, var(--dy), 0) }
  .visit-info{ transform: translate3d(0, var(--dy), 0) }

  /* ---------- handcrafted reveals (no AOS fade-up slop) ---------- */
  /* .reveal is now just a hook — section itself doesn't translate */
  .reveal{}

  /* eyebrow hairline draws itself on enter */
  .eyebrow::before{
    transform:scaleX(0); transform-origin:left;
    transition:transform 900ms var(--ease-out) 80ms;
  }
  .reveal.in .eyebrow::before{transform:scaleX(1)}

  /* h2 word reveal — each word tilts up like a falling card landing flat */
  .section-head h2{perspective:900px}
  .section-head h2 .w{
    display:inline-block;
    opacity:0;
    transform:translateY(36px) rotateX(-40deg);
    transform-origin:50% 100%;
    transition:opacity 850ms var(--ease-out), transform 950ms var(--ease-out);
  }
  .reveal.in .section-head h2 .w{opacity:1; transform:none}

  /* section-head lede: quiet fade with no translate */
  .section-head .right.lede, .section-head .lede{
    opacity:0;
    transition:opacity 900ms var(--ease-out) 500ms;
  }
  .reveal.in .section-head .lede{opacity:1}

  /* story image — ink-wash clip wipe from the bottom-left corner */
  .story-img img{
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1400ms var(--ease-out) 200ms, transform 1200ms var(--ease-out);
  }
  .reveal.in .story-img img{clip-path: inset(0 0 0 0)}

  /* story paragraphs — fade in sequence, no translate */
  .story-text p{
    opacity:0;
    transition:opacity 900ms var(--ease-out);
  }
  .reveal.in .story-text p:nth-child(1){opacity:1; transition-delay:500ms}
  .reveal.in .story-text p:nth-child(2){opacity:1; transition-delay:700ms}
  .reveal.in .story-text p:nth-child(3){opacity:1; transition-delay:900ms}

  /* menu cards — clip wipe from top so the hairline border draws first */
  .menu-card{
    opacity:0;
    transform:translateY(10px);
    transition:opacity 700ms var(--ease-out), transform 800ms var(--ease-out);
  }
  .reveal.in .menu-grid .menu-card{opacity:1; transform:none}
  .reveal.in .menu-grid .menu-card:nth-child(1){transition-delay:80ms}
  .reveal.in .menu-grid .menu-card:nth-child(2){transition-delay:180ms}
  .reveal.in .menu-grid .menu-card:nth-child(3){transition-delay:280ms}
  .reveal.in .menu-grid .menu-card:nth-child(4){transition-delay:380ms}
  .reveal.in .menu-grid .menu-card:nth-child(5){transition-delay:480ms}
  .reveal.in .menu-grid .menu-card:nth-child(6){transition-delay:580ms}
  /* numbered ink-in: the 01–06 numbers draw with a brush mask */
  .menu-card .num{
    opacity:0;
    transition:opacity 600ms var(--ease-out);
  }
  .reveal.in .menu-grid .menu-card:nth-child(1) .num{opacity:1; transition-delay:300ms}
  .reveal.in .menu-grid .menu-card:nth-child(2) .num{opacity:1; transition-delay:400ms}
  .reveal.in .menu-grid .menu-card:nth-child(3) .num{opacity:1; transition-delay:500ms}
  .reveal.in .menu-grid .menu-card:nth-child(4) .num{opacity:1; transition-delay:600ms}
  .reveal.in .menu-grid .menu-card:nth-child(5) .num{opacity:1; transition-delay:700ms}
  .reveal.in .menu-grid .menu-card:nth-child(6) .num{opacity:1; transition-delay:800ms}

  /* private dining rooms — soft scale + fade in sequence */
  .rooms .room{
    opacity:0;
    transform:scale(.97) translateY(8px);
    transition:opacity 900ms var(--ease-out), transform 1000ms var(--ease-out);
  }
  .reveal.in .rooms .room{opacity:1; transform:none}
  .reveal.in .rooms .room:nth-child(1){transition-delay:120ms}
  .reveal.in .rooms .room:nth-child(2){transition-delay:280ms}
  .reveal.in .rooms .room:nth-child(3){transition-delay:440ms}

  /* events — image clip wipes upward, card itself stays put */
  .event img{
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1100ms var(--ease-out);
  }
  .reveal.in .events-grid .event:nth-child(1) img{clip-path:inset(0 0 0 0); transition-delay:80ms}
  .reveal.in .events-grid .event:nth-child(2) img{clip-path:inset(0 0 0 0); transition-delay:200ms}
  .reveal.in .events-grid .event:nth-child(3) img{clip-path:inset(0 0 0 0); transition-delay:320ms}
  .reveal.in .events-grid .event:nth-child(4) img{clip-path:inset(0 0 0 0); transition-delay:440ms}

  /* gallery — each tile clip-wipes from a varied direction for handcrafted feel */
  .gallery-grid figure img{
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1200ms var(--ease-out), transform 1400ms var(--ease-out), filter 600ms var(--ease);
  }
  .reveal.in .gallery-grid figure:nth-child(1) img{clip-path:inset(0 0 0 0); transition-delay:80ms}
  .reveal.in .gallery-grid figure:nth-child(2) img{clip-path:inset(0 0 0 0); transition-delay:180ms}
  .reveal.in .gallery-grid figure:nth-child(3) img{clip-path:inset(0 0 0 0); transition-delay:280ms}
  .reveal.in .gallery-grid figure:nth-child(4) img{clip-path:inset(0 0 0 0); transition-delay:380ms}
  .reveal.in .gallery-grid figure:nth-child(5) img{clip-path:inset(0 0 0 0); transition-delay:480ms}
  .reveal.in .gallery-grid figure:nth-child(6) img{clip-path:inset(0 0 0 0); transition-delay:580ms}
  .reveal.in .gallery-grid figure:nth-child(7) img{clip-path:inset(0 0 0 0); transition-delay:680ms}

  /* press quote — graceful fade from below, longer hold */
  .press blockquote, .press .citation, .press-marks{
    opacity:0;
    transform:translateY(14px);
    transition:opacity 1100ms var(--ease-out), transform 1100ms var(--ease-out);
  }
  .reveal.in .press blockquote{opacity:1; transform:none; transition-delay:200ms}
  .reveal.in .press .citation{opacity:1; transform:none; transition-delay:500ms}
  .reveal.in .press-marks{opacity:1; transform:none; transition-delay:750ms}

  /* visit map clip-wipes from left */
  .visit-map iframe{
    clip-path:inset(0 100% 0 0);
    transition:clip-path 1400ms var(--ease-out);
  }
  .reveal.in .visit-map iframe{clip-path:inset(0 0 0 0); transition-delay:200ms}
  .visit-info dt, .visit-info dd{
    opacity:0;
    transition:opacity 800ms var(--ease-out);
  }
  .reveal.in .visit-info dt, .reveal.in .visit-info dd{opacity:1; transition-delay:600ms}

  /* reservation form fields fade in gentle waterfall */
  form.book .field, form.book .submit-row{
    opacity:0;
    transition:opacity 700ms var(--ease-out);
  }
  .reveal.in form.book .field:nth-child(1){opacity:1; transition-delay:200ms}
  .reveal.in form.book .field:nth-child(2){opacity:1; transition-delay:280ms}
  .reveal.in form.book .field:nth-child(3){opacity:1; transition-delay:360ms}
  .reveal.in form.book .field:nth-child(4){opacity:1; transition-delay:440ms}
  .reveal.in form.book .field:nth-child(5){opacity:1; transition-delay:520ms}
  .reveal.in form.book .field:nth-child(6){opacity:1; transition-delay:600ms}
  .reveal.in form.book .field:nth-child(7){opacity:1; transition-delay:680ms}
  .reveal.in form.book .submit-row{opacity:1; transition-delay:780ms}

  /* ---------- responsive ---------- */
  @media (max-width: 960px){
    .section{padding:var(--space-6) 0}
    .section-head{grid-template-columns:1fr; gap:1rem}
    .story-grid, .visit-grid{grid-template-columns:1fr; gap:var(--space-4)}
    .story .section-head .lede{margin-top:0}
    .dtable .section-head .lede{margin-top:0}
    .menu-grid{grid-template-columns:1fr}
    .rooms{grid-template-columns:1fr; gap:1rem}
    .events-grid{grid-template-columns:repeat(2,1fr)}
    form.book{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr 1fr; gap:2rem}
    /* dining categories — hero on top, tall below, then 2x2 supporting */
    .cat-grid{
      grid-template-columns: 1fr 1fr;
      grid-template-rows: none;
      grid-auto-rows: clamp(220px, 36vw, 320px);
      gap: 14px;
    }
    .cat-1{grid-column: 1/3; grid-row: span 2}
    .cat-2{grid-column: 1/3; grid-row: span 2}
    .cat-3, .cat-4, .cat-5, .cat-6{grid-column: span 1; grid-row: span 1}
  }
  /* ===== TABLET (768–1023px) — compress spacing, hide nav CTA, drawer is the way ===== */
  @media (max-width: 1023px){
    .nav-cta{display:none}
    .section{padding: clamp(3.5rem, 7vh, 5rem) 0}
    .section-sm{padding: clamp(3rem, 6vh, 4rem) 0}
    .container{padding: 0 clamp(1.5rem, 4vw, 2.5rem)}
    .story{padding-top: clamp(5rem, 10vh, 7rem); padding-bottom: clamp(3rem, 6vh, 4.5rem)}
    .dtable .section-head{margin-bottom: var(--space-3)}
    .menu-grid{gap: 1.5rem 2.5rem}
  }

  /* ===== MOBILE (≤767px) — stacked layouts, sticky bottom bar ===== */
  @media (max-width: 767px){
    :root{--nav-h:62px}
    .section{padding: clamp(2.75rem, 6vh, 3.5rem) 0}
    .section-sm{padding: clamp(2.5rem, 5vh, 3rem) 0}
    .section-head h2{font-size: clamp(1.7rem, 7vw, 2.4rem); line-height:1.05}
    .lede{font-size: 1rem; line-height: 1.55}
    .story{padding-top: clamp(4rem, 8vh, 5rem); padding-bottom: clamp(2.5rem, 5vh, 3.5rem)}
    .hero-meta{gap:1.25rem}
    .foot-grid{grid-template-columns:1fr; gap:2rem}
    .visit-info dl{grid-template-columns: 1fr; gap: 1rem}
    .visit-info dt{padding-top: .8rem; border-top: 1px solid var(--mist)}
    .visit-info dt:first-child{border-top: 0; padding-top: 0}
    .nav-actions{gap: .25rem}

    /* ===== mobile gallery — editorial restaurant lookbook =====
       Desktop runs a 6-col bento; on phones that collapses into cramped,
       unevenly-cropped slivers. Rebuild as a calm single/two-column story:
       cinematic hero → two-up grid → full-width feature → two-up grid. */
    #gallery .section-head{margin-bottom: clamp(1.75rem, 6vw, 2.5rem)}
    .gallery-grid{
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: auto;
      gap: 10px;
    }
    .gallery-grid figure{border-radius: 3px}
    /* Note: per-item selectors below are scoped with `.gallery-grid figure.g-*`
       so they out-rank any base `figure` rule and reliably override the
       desktop bento spans (grid-row must be reset too). */
    /* 1 — large cinematic hero, full bleed. Tall portrait frame so the
       whole hanging duck (head + ring) stays in view, never chopped. */
    .gallery-grid figure.g-a{grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 5; order: 1}
    /* 2 — two-up supporting pair, equal-height squares */
    .gallery-grid figure.g-c{grid-column: 1 / 2; grid-row: auto; aspect-ratio: 1 / 1; order: 2}
    .gallery-grid figure.g-d{grid-column: 2 / 3; grid-row: auto; aspect-ratio: 1 / 1; order: 3}
    /* 3 — tall full-width feature. Portrait frame keeps both the claypot
       and the fish plate below it intact. */
    .gallery-grid figure.g-b{grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 5; order: 4}
    /* 4 — final accent, smaller wide strip (lower priority) */
    .gallery-grid figure.g-e{grid-column: 1 / -1; grid-row: auto; aspect-ratio: 2 / 1; order: 5}
    /* recompose crops for the new frames */
    .g-a img{object-position: center 30%}
    .g-b img{object-position: center 50%}
    .g-e img{object-position: center 55%}

    /* drawer link items: stack EN over CN on small screens for breathing room */
    .drawer-nav a{
      grid-template-columns: auto 1fr;
      grid-template-rows: auto auto;
      row-gap: .25rem;
      align-items: start;
      padding: clamp(.6rem, 1.2vh, .85rem) clamp(.25rem, 2vw, .8rem);
    }
    .drawer-num{grid-row: 1; grid-column: 1}
    .drawer-en{grid-row: 1; grid-column: 2; font-size: clamp(1.8rem, 9vw, 2.6rem)}
    .drawer-cn{grid-row: 2; grid-column: 2; justify-self: start}

    /* ===== mobile sticky bottom reservation bar — three buttons ===== */
    .sticky-actions{
      bottom: 0; right: 0; left: 0;
      top: auto;
      flex-direction: row;
      flex-wrap: wrap;          /* Membership takes the full top row, trio below */
      align-items: stretch;
      background: rgba(18,12,11,.72);
      -webkit-backdrop-filter: saturate(180%) blur(22px);
      backdrop-filter: saturate(180%) blur(22px);
      padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom, 0));
      gap: .5rem;
      border-top: 1px solid rgba(176,141,87,.28);
      border-radius: 0;
      box-shadow: 0 -14px 40px -18px rgba(0,0,0,.6);
    }
    .menu-btn{display: inline-flex} /* visible only on mobile */
    .float-btn{
      flex: 1;
      justify-content: center;
      background: rgba(245,239,230,.05);
      border: 1px solid rgba(245,239,230,.16);
      border-radius: 4px;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      box-shadow: none;
      padding: .6rem .35rem;
      font-size: .6rem;
      letter-spacing: .16em;
      min-height: 42px;
      gap: .4rem;
    }
    .float-btn.wa{
      background: rgba(36,78,52,.45);
      border-color: rgba(110,165,128,.38);
    }
    .float-btn.reserve-btn{
      background: rgba(90,26,31,.5);
      border-color: rgba(176,141,87,.5);
      color: var(--brass-soft);
    }
    /* Membership sits on its own row above Menu / WhatsApp / Reserve so it's
       impossible to miss, and the trio below keeps its comfortable width. */
    .float-btn.member-btn{
      flex: 0 0 100%;
      background: rgba(90,26,31,.62);
      border-color: rgba(176,141,87,.5);
      color: var(--brass-soft);
      letter-spacing: .3em;
      min-height: 40px;
      padding: .55rem .5rem;
    }
    .float-btn:hover{transform: none}
    .float-btn svg{width: 13px; height: 13px}
    /* push footer content up so it isn't covered by sticky bar */
    footer{padding-bottom: calc(var(--space-3) + 124px + env(safe-area-inset-bottom, 0))}
  }

  /* ---------- reduced motion ---------- */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important; animation-iteration-count:1 !important}
    .section-head h2 .w,
    .section-head .lede,
    .story-text p,
    .menu-card, .menu-card .num,
    .rooms .room,
    .press blockquote, .press .citation, .press-marks,
    .visit-info dt, .visit-info dd,
    form.book .field, form.book .submit-row{
      opacity:1 !important; transform:none !important;
    }
    .story-img img, .event img, .gallery-grid figure img, .visit-map iframe{
      clip-path:none !important;
    }
    .eyebrow::before{transform:scaleX(1) !important}
    .brush path{stroke-dashoffset:0}
  }