/* ============================================================
   Happy World Roast 好世界 — demo site stylesheet
   Design source: Claude Design export "Happy World Roast v1.zip"
   (_ds/happy-world-roast-design-system-afc6e51c… tokens + components,
    version-2 canvases: Home / Menu / About / Contact).
   Tokens below are encoded VERBATIM from the export's tokens/*.css.
   Declared AA variants are added at the end of :root and each one
   carries a comment saying why it exists and what it measures.
   ============================================================ */

/* ---------- tokens/colors.css (verbatim) ---------- */
:root{
/* Base — observed (logo + signboard photos) */
--hwr-orange:#EE5808;--hwr-orange-deep:#C64803;--hwr-gold:#FFD91C;--hwr-gold-deep:#E4AE00;
/* Base — brief-derived (food, rice, char) */
--hwr-mahogany:#8A3B1E;--hwr-mahogany-deep:#5F2412;--hwr-glaze:#B24E24;--hwr-charcoal:#2B2622;--hwr-chilli:#C1272D;
/* Creams & warm neutrals */
--hwr-cream:#F3E7D0;--hwr-cream-bright:#F9F1E1;--hwr-paper:#FFFBF0;--hwr-linen:#EADCC2;
--hwr-ink:#2B2622;--hwr-ink-soft:#5D5044;--hwr-ink-mute:#8C7C68;
/* Semantic — surfaces */
--surface-page:var(--hwr-cream-bright);--surface-card:var(--hwr-paper);--surface-sunken:var(--hwr-cream);--surface-dark:#221C17;--surface-brand:var(--hwr-mahogany);
/* Semantic — text */
--text-display:#48200E;--text-body:var(--hwr-ink);--text-muted:var(--hwr-ink-soft);--text-faint:var(--hwr-ink-mute);--text-on-dark:#F6ECD8;--text-on-dark-muted:#C9B899;--text-price:var(--hwr-mahogany);
/* Semantic — interactive */
--link:#A8441B;--link-hover:#7C2F10;--accent:var(--hwr-orange);--accent-gold:var(--hwr-gold);--accent-chilli:var(--hwr-chilli);--focus-ring:rgba(238,88,8,.45);
/* Semantic — lines & status */
--border-soft:#EBDCC0;--border-strong:#D7C29E;--border-dark:#3B322A;--ok:#4A7C3F;--danger:var(--hwr-chilli);
}

/* ---------- tokens/typography.css (verbatim) ---------- */
:root{
--font-display:"Fraunces","Georgia",serif;--font-body:"Hanken Grotesk","Gill Sans","Segoe UI",sans-serif;--font-cjk:"Noto Serif SC","Songti SC","SimSun",serif;
/* Size ladder (px) */
--size-xs:12px;--size-sm:14px;--size-base:16px;--size-md:18px;--size-lg:22px;--size-xl:28px;--size-2xl:36px;--size-3xl:48px;--size-4xl:64px;--size-hero:84px;
/* Weights */
--weight-body:400;--weight-medium:500;--weight-semibold:600;--weight-display:600;--weight-display-black:900;
/* Leading & tracking */
--leading-tight:1.04;--leading-snug:1.18;--leading-body:1.6;--track-display:-0.015em;--track-caps:0.16em;
}

/* ---------- tokens/spacing.css (verbatim) ---------- */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-28:112px;
--container:1160px;--container-narrow:760px;--gutter:clamp(20px,4vw,48px);
}

/* ---------- tokens/effects.css (verbatim) ---------- */
:root{
--radius-xs:4px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-pill:999px;
--border-card:1px solid var(--border-soft);--border-heavy:2px solid var(--hwr-charcoal);
/* Shadows are scarce: cards sit on borders; shadow only for floating layers */
--shadow-card:0 1px 2px rgba(72,32,14,.05);--shadow-float:0 2px 4px rgba(72,32,14,.08),0 16px 40px -16px rgba(72,32,14,.28);
--ease-out:cubic-bezier(.2,.7,.3,1);--speed-fast:120ms;--speed:180ms;
}

/* ---------- Declared AA variants (deviations from the export, with measurements)
   Every value below is a DELIBERATE darkening of an export token that fails
   WCAG AA (4.5:1) at the size it is used. Contrast ratios measured against
   --surface-page #F9F1E1 unless noted.
   ---------------------------------------------------------------- */
:root{
  /* --text-faint #8C7C68 on cream = 3.60:1 → FAILS. Used for footnotes/captions. */
  --text-faint-aa:#6F6050;              /* 5.39:1 on cream — captions, footnotes */
  /* --accent #EE5808 as TEXT on cream = 3.08:1 → FAILS. Orange stays a FILL colour;
     this darkened variant is the only orange allowed as text on cream. */
  --accent-text:#A93C02;                /* 5.61:1 on cream — eyebrows, sparkle marks */
  /* --accent #EE5808 as a BUTTON FILL under cream text #FFF6E9 = 3.23:1 → FAILS. */
  --btn-primary-bg:#B94103;             /* 5.17:1 vs #FFF6E9 — primary button fill */
  --btn-primary-bg-hover:#8F3102;       /* 7.5:1 vs #FFF6E9 — hover/press */
  /* NOTE ON GOLD: --hwr-gold #FFD91C as TEXT on cream is 1.23:1 — never used as text
     on any light surface. Gold appears only (a) as a FILL under charcoal text
     (11.5:1) or (b) as text on --surface-dark (12.3:1) / --surface-brand (5.6:1). */
  --gold-on-dark:var(--hwr-gold);       /* 12.3:1 on #221C17 */
  --seal-tape:rgba(214,190,140,.6);     /* decorative masking-tape strips */
  --leader-dot:rgba(138,59,30,.38);     /* dotted leaders on menu rows */
  --rule-on-dark:rgba(235,220,192,.16); /* hairline rules inside dark bands */
  --quiet-cjk-dark:#332B23;             /* big quiet 烧 background type on dark bands */
  --quiet-cjk-light:var(--hwr-linen);   /* big quiet type on cream */
  --scrim-dark:rgba(24,17,12,.55);      /* drawer backdrop */
  --shadow-bar:0 -4px 14px rgba(72,32,14,.10);
}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--surface-page);color:var(--text-body);
  font-family:var(--font-body);font-size:var(--size-base);line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-display);line-height:var(--leading-snug);letter-spacing:var(--track-display);font-weight:var(--weight-display);margin:0}
/* Body face declared explicitly (not only via inheritance from <body>) so the
   Hanken Grotesk / Fraunces / Noto Serif SC split is unambiguous everywhere. */
p,li,td,th,dd,blockquote,figcaption,cite,label,button,input,select,textarea{font-family:var(--font-body)}
p{margin:0}
/* The UA default `blockquote{margin:1em 40px}` pushed the Home "Come early" quote
   grid 40px to the right and, combined with its `width:100%`, hung it 40px past
   the dashed panel's right padding at every width. Zeroed here. */
blockquote,figure{margin:0}
img{max-width:100%}
a{color:var(--link);text-decoration-color:color-mix(in oklab,var(--link) 40%,transparent);text-underline-offset:3px;transition:color var(--speed-fast) var(--ease-out)}
a:hover{color:var(--link-hover);text-decoration-color:currentColor}
::selection{background:var(--hwr-gold);color:var(--hwr-charcoal)}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.zh{font-family:var(--font-cjk)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--surface-dark);color:var(--text-on-dark);padding:10px 16px;z-index:200;border-radius:0 0 var(--radius-sm) 0}
.skip-link:focus{left:0}

.container{width:100%;max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.container--narrow{max-width:900px}

/* ---------- Type helpers ---------- */
.eyebrow{font-size:13px;font-weight:700;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--accent-text)}
.eyebrow--mahogany{color:var(--hwr-mahogany)}
.eyebrow--chilli{color:var(--hwr-chilli)}
.eyebrow--gold{color:var(--gold-on-dark)}
.eyebrow .mark{font-size:11px}
.cjk{font-family:var(--font-cjk)}
.cjk-accent{font-family:var(--font-cjk);color:var(--hwr-mahogany)}
.lede{font-size:19px;line-height:1.6;color:var(--text-muted);max-width:56ch;text-wrap:pretty}
.body{font-size:17px;line-height:1.75;color:var(--text-body);max-width:62ch;text-wrap:pretty}
.note{font-size:13.5px;line-height:1.55;color:var(--text-faint-aa)}
.note--dark{color:var(--text-on-dark-muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Buttons (from components/core/Button.jsx) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:600;letter-spacing:.01em;
  border-radius:var(--radius-pill);cursor:pointer;text-decoration:none;line-height:1.2;
  border:1px solid transparent;
  transition:background var(--speed-fast) var(--ease-out),color var(--speed-fast) var(--ease-out),border-color var(--speed-fast) var(--ease-out),transform var(--speed-fast) var(--ease-out);
}
.btn:active{transform:translateY(1px)}
.btn--sm{padding:7px 16px;font-size:14px}
.btn--md{padding:11px 22px;font-size:15px}
.btn--lg{padding:14px 30px;font-size:17px}
.btn--primary{background:var(--btn-primary-bg);color:#FFF6E9}      /* declared AA fill, see :root */
.btn--primary:hover{background:var(--btn-primary-bg-hover);color:#FFF6E9}
.btn--brand{background:var(--hwr-mahogany);color:var(--text-on-dark)}
.btn--brand:hover{background:var(--hwr-mahogany-deep);color:var(--text-on-dark)}
.btn--secondary{background:transparent;color:var(--text-display);border:1.5px solid var(--border-strong)}
.btn--secondary:hover{border-color:var(--hwr-mahogany);color:var(--hwr-mahogany)}
.btn--block{width:100%}
.btn svg{flex:none}

/* ---------- Badge / Tag (from components/core) ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);
  font-weight:700;font-size:11px;letter-spacing:var(--track-caps);text-transform:uppercase;
  padding:5px 12px;border-radius:var(--radius-pill);line-height:1.2;white-space:nowrap;
}
.badge--gold{background:var(--hwr-gold);color:#5A3C00}        /* 7.29:1 */
.badge--chilli{background:var(--hwr-chilli);color:#FFEFE3}    /* 5.20:1 */
.badge--outline{background:transparent;color:var(--text-muted);border:1px solid var(--border-strong)}
.badge--dark{background:var(--hwr-charcoal);color:var(--hwr-gold)}
.tag{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-weight:500;
  font-size:13px;color:var(--text-muted);background:var(--surface-sunken);
  padding:4px 12px;border-radius:var(--radius-pill);line-height:1.4;
}
.tag .mark{color:var(--accent-text);font-size:11px}

/* ---------- PriceTag (from components/core/PriceTag.jsx) ---------- */
.price{display:inline-flex;align-items:baseline;gap:2px;font-family:var(--font-display);color:var(--text-price);font-weight:700;line-height:1;white-space:nowrap}
.price .cur{font-size:.55em;font-weight:600;transform:translateY(-.45em)}
.price--sm{font-size:20px}
.price--md{font-size:26px}
.price--lg{font-size:40px}
.price--onDark{color:var(--gold-on-dark)}

/* ---------- SealStamp (from components/display/SealStamp.jsx) ---------- */
.seal{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border-radius:50%;font-family:var(--font-body);text-align:center;flex:none;
  width:112px;height:112px;font-size:112px;border:2px solid var(--hwr-mahogany);color:var(--hwr-mahogany);
}
.seal .inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;height:100%;border-radius:50%;border:1px solid color-mix(in oklab,var(--hwr-mahogany) 45%,transparent);margin:3px}
.seal .top,.seal .bottom{font-size:.09em;font-weight:700;letter-spacing:.22em;text-transform:uppercase;line-height:1.3}
.seal .center{font-family:var(--font-display);font-weight:900;font-size:.26em;line-height:1}
.seal--onDark{border-color:var(--gold-on-dark);color:var(--gold-on-dark)}
.seal--onDark .inner{border-color:color-mix(in oklab,var(--hwr-gold) 45%,transparent)}

/* ---------- Taped photo frames (canvas motif) ---------- */
.taped{position:relative;display:block}
.taped img{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--border-strong);box-shadow:var(--shadow-card)}
.taped::before,.taped::after{content:"";position:absolute;top:-10px;width:68px;height:21px;background:var(--seal-tape);border-radius:2px}
.taped::before{left:22px;transform:rotate(-4deg)}
.taped::after{right:24px;transform:rotate(4deg)}
.taped--one::after{display:none}
.tilt-a{transform:rotate(-.7deg)}
.tilt-b{transform:rotate(.6deg)}
.tilt-c{transform:rotate(-.4deg)}
.frame{overflow:hidden;border-radius:var(--radius-sm)}
.ratio-16-10{aspect-ratio:16/10}
.ratio-4-3{aspect-ratio:4/3}
.ratio-1-1{aspect-ratio:1/1}
.ratio-3-2{aspect-ratio:3/2}
.caption{display:block;margin-top:10px;font-size:13.5px;line-height:1.55;color:var(--text-faint-aa)}

/* ---------- Photo-needed placeholder (house honesty rule) ---------- */
.photo-needed{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:var(--surface-sunken);border:2px dashed var(--border-strong);border-radius:var(--radius-sm);
  padding:18px;text-align:center;color:var(--text-muted);
}
.photo-needed .label{font-size:11px;font-weight:700;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--hwr-mahogany)}
.photo-needed .sub{font-size:13px;color:var(--text-faint-aa);max-width:24ch}

/* ============================================================
   Header / nav
   ============================================================ */
.topstrip{
  background:var(--hwr-mahogany);color:var(--text-on-dark);       /* 6.57:1 */
  text-align:center;padding:7px 16px;font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
}
.topstrip .cjk{letter-spacing:.2em;text-transform:none;font-size:12px;white-space:nowrap}

.site-header{background:var(--surface-page);border-bottom:var(--border-heavy);position:relative;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:44px;height:44px;border-radius:var(--radius-pill);flex:none}
.brand .names{display:flex;flex-direction:column;gap:1px}
.brand .en{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:var(--track-display);color:var(--text-display)}
.brand .zh{font-family:var(--font-cjk);font-size:11px;color:var(--hwr-mahogany);letter-spacing:.35em}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-size:15px;font-weight:600;color:var(--text-body);text-decoration:none}
.nav-links a:hover{color:var(--hwr-mahogany)}
.nav-links a[aria-current="page"]{color:var(--hwr-mahogany);border-bottom:2px solid var(--hwr-mahogany);padding-bottom:2px}
.nav-wa{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--hwr-mahogany);text-decoration:none;border:1.5px solid var(--border-strong);border-radius:var(--radius-pill);padding:7px 14px;white-space:nowrap}
.nav-wa:hover{border-color:var(--hwr-mahogany);color:var(--hwr-mahogany-deep)}
.nav-toggle{
  display:none;align-items:center;gap:8px;background:none;border:1.5px solid var(--border-strong);
  border-radius:var(--radius-pill);padding:9px 15px;font-family:var(--font-body);font-weight:600;
  font-size:14px;color:var(--hwr-mahogany);cursor:pointer;
}
.nav-toggle .bars{display:inline-flex;flex-direction:column;gap:3px}
.nav-toggle .bars span{display:block;width:16px;height:2px;background:var(--hwr-mahogany);border-radius:2px}

/* Mobile drawer — hide-in-place (opacity/visibility), never translateX */
.nav-backdrop{position:fixed;inset:0;background:var(--scrim-dark);opacity:0;visibility:hidden;transition:opacity var(--speed) var(--ease-out),visibility var(--speed) var(--ease-out);z-index:60}
.nav-backdrop[data-open="true"]{opacity:1;visibility:visible}
.nav-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(330px,88vw);z-index:61;
  background:var(--surface-card);border-left:2px solid var(--hwr-charcoal);
  padding:18px 22px 26px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity var(--speed) var(--ease-out),visibility var(--speed) var(--ease-out);
}
.nav-drawer[data-open="true"]{opacity:1;visibility:visible}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.drawer-head img{width:40px;height:40px;border-radius:var(--radius-pill)}
.drawer-close{background:none;border:none;font-size:30px;line-height:1;color:var(--text-muted);cursor:pointer;padding:4px 10px}
.drawer-link{display:block;padding:13px 4px;font-weight:600;font-size:17px;color:var(--text-body);text-decoration:none;border-bottom:1px solid var(--border-soft)}
.drawer-link[aria-current="page"]{color:var(--hwr-mahogany)}
.drawer-cta{margin-top:18px;display:grid;gap:10px}
.drawer-note{font-size:12px;color:var(--text-faint-aa);text-align:center;line-height:1.5}

/* ============================================================
   Sections & shared blocks
   ============================================================ */
.section{padding-top:var(--space-20);padding-bottom:var(--space-20)}
.section--tight{padding-top:var(--space-12);padding-bottom:var(--space-12)}
.section-head{display:flex;flex-direction:column;gap:10px;margin-bottom:var(--space-10)}
.section-head h2{font-size:var(--size-2xl)}
.section-head .sub{font-size:17px;line-height:1.6;color:var(--text-muted);max-width:56ch;text-wrap:pretty}

/* Dark charcoal band with a big quiet CJK character behind it.
   overflow:hidden is load-bearing — the decorative glyph must never
   bleed past the band's own boundaries at any width. */
.band-dark{position:relative;background:var(--surface-dark);color:var(--text-on-dark);overflow:hidden;isolation:isolate}
.band-dark h2,.band-dark h3{color:var(--text-on-dark)}
/* Section sub-copy inside a dark band: without this the more specific
   `.section-head .sub` rule would win and paint --text-muted #5D5044 on
   #221C17 (2.2:1, unreadable). #C9B899 on #221C17 = 8.7:1. */
.band-dark .section-head .sub{color:var(--text-on-dark-muted)}
.band-dark .caption,.band-dark .note{color:var(--text-on-dark-muted)}
.band-dark .quiet{
  position:absolute;right:-2vw;top:50%;transform:translateY(-50%);
  font-family:var(--font-cjk);font-weight:700;font-size:clamp(180px,26vw,340px);line-height:1;
  color:var(--quiet-cjk-dark);pointer-events:none;user-select:none;z-index:-1;
}
.band-dark .container{position:relative}
.band-brand{background:var(--surface-brand);color:var(--text-on-dark)}

/* Dashed "note" panel (canvas motif) */
.notepanel{
  background:var(--surface-card);border:2px dashed color-mix(in oklab,var(--hwr-charcoal) 50%,transparent);
  border-radius:var(--radius-sm);padding:28px 30px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;
}
.notepanel .headline{font-family:var(--font-display);font-weight:600;font-size:25px;line-height:1.3;letter-spacing:var(--track-display);color:var(--text-display);text-wrap:pretty}

/* Press quotes */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px}
.quote{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid var(--rule-on-dark)}
.quote p{font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.4;letter-spacing:var(--track-display);color:var(--text-on-dark);text-wrap:pretty}
.quote cite{font-style:normal;font-size:12px;font-weight:700;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-on-dark-muted)}

/* Sparkle list.
   NOTE: the marker is absolutely positioned rather than a flex item — with
   `display:flex` on the <li>, every inline child (<b>, <a>) becomes its own
   flex item and the sentence breaks into columns instead of wrapping. */
.sparkles{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sparkles li{position:relative;padding-left:24px;font-size:16px;line-height:1.6;color:var(--text-body)}
.sparkles li::before{content:"\2726";position:absolute;left:0;top:0;color:var(--accent-text);font-size:12px;line-height:1.9}
.band-dark .sparkles li{color:var(--text-on-dark)}
.band-dark .sparkles li::before{color:var(--gold-on-dark)}

/* ============================================================
   Home
   ============================================================ */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,460px);gap:64px;align-items:center;padding-top:var(--space-16);padding-bottom:var(--space-12)}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.hero-kicker{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.hero-kicker .zh{font-family:var(--font-cjk);font-size:23px;color:var(--hwr-mahogany)}
.hero h1{font-weight:var(--weight-display-black);font-size:clamp(46px,7vw,84px);line-height:1.0;text-wrap:balance}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:6px}
.hero-actions .text-link{font-weight:600;font-size:16px}
.hero-facts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:2px}
.hero-visual{position:relative;padding-bottom:26px}
.hero-visual .taped{aspect-ratio:1/1}
.hero-burst{
  position:absolute;left:-22px;bottom:-6px;width:126px;height:126px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:var(--hwr-gold);color:var(--hwr-charcoal);transform:rotate(-8deg);text-align:center;
  clip-path:polygon(50% 0%,60.4% 11.4%,75% 6.7%,78.3% 21.7%,93.3% 25%,88.6% 39.6%,100% 50%,88.6% 60.4%,93.3% 75%,78.3% 78.3%,75% 93.3%,60.4% 88.6%,50% 100%,39.6% 88.6%,25% 93.3%,21.7% 78.3%,6.7% 75%,11.4% 60.4%,0% 50%,11.4% 39.6%,6.7% 25%,21.7% 21.7%,25% 6.7%,39.6% 11.4%);
}
.hero-burst .n{font-family:var(--font-display);font-weight:900;font-size:30px;line-height:1}
.hero-burst .t{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;max-width:88px}

.strip3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:32px}
.strip3 .taped{aspect-ratio:4/3}

.storyrow{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.storyrow .txt{display:flex;flex-direction:column;gap:6px;min-width:min(100%,280px);flex:1}

.catering-teaser{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:52px;align-items:center}
.catering-teaser .taped{aspect-ratio:3/2}

/* ============================================================
   Menu — the board
   ============================================================ */
.page-head{display:flex;flex-direction:column;gap:12px;padding-top:var(--space-16);padding-bottom:var(--space-8)}
.page-head--center{align-items:center;text-align:center}
.page-head h1{font-weight:var(--weight-display-black);font-size:clamp(40px,6vw,68px);line-height:1.04;text-wrap:balance}
.page-head .zh-big{font-family:var(--font-cjk);font-size:21px;color:var(--hwr-mahogany);letter-spacing:.24em}

.provenance{
  background:var(--surface-sunken);border-left:3px solid var(--hwr-chilli);border-radius:var(--radius-xs);
  padding:18px 22px;display:flex;flex-direction:column;gap:8px;
}
.provenance p{font-size:14.5px;line-height:1.65;color:var(--text-muted);max-width:74ch}

.board{
  background:var(--surface-card);border:var(--border-heavy);border-radius:var(--radius-sm);
  padding:34px 38px 28px;box-shadow:var(--shadow-card);position:relative;
}
.board-section + .board-section{margin-top:26px}
.board-section > h2{
  font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--hwr-mahogany);margin-bottom:6px;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.board-section > h2 .zh{font-family:var(--font-cjk);letter-spacing:.1em;text-transform:none;font-weight:500;font-size:13px;color:var(--text-faint-aa)}
/* flex-wrap must stay NOWRAP: with wrapping on, the longest row
   ("Shredded Chicken & Mushroom Hor Fun 鸡丝香菇河粉 … ask at the stall")
   pushed its price onto a second line, left-aligned, at tablet widths
   (~660-900px). min-width:0 lets the dish name wrap inside its own cell
   instead, so the price always stays on the right. */
.row{display:flex;align-items:baseline;gap:12px;padding:13px 0;border-bottom:1px solid var(--border-soft);flex-wrap:nowrap}
.row .en{min-width:0}
.row .zh{white-space:nowrap}
.row:last-child{border-bottom:none}
.row .n{
  display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;
  background:var(--hwr-mahogany);color:var(--surface-card);font-family:var(--font-display);
  font-weight:700;font-size:14px;border-radius:var(--radius-xs);transform:translateY(5px);
}
.row .en{font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:var(--track-display);color:var(--text-display)}
.row .zh{font-family:var(--font-cjk);font-size:16px;color:var(--hwr-mahogany)}
.row .leader{flex:1 1 40px;min-width:24px;border-bottom:2px dotted var(--leader-dot);transform:translateY(-5px)}
.row .amt{display:flex;align-items:baseline;gap:8px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.row .ask{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--text-muted);white-space:nowrap}
.board-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:18px;margin-top:6px;border-top:2px solid var(--hwr-charcoal)}

.shopfront-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);gap:44px;align-items:start}
.shopfront-copy{display:flex;flex-direction:column;gap:8px}

.dish-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px}
.dish{background:var(--surface-card);border:var(--border-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden;display:flex;flex-direction:column}
.dish .shot{aspect-ratio:16/10;overflow:hidden}
.dish .shot img{display:block;width:100%;height:100%;object-fit:cover}
.dish .shot .photo-needed{height:100%;border:none;border-bottom:1px dashed var(--border-strong);border-radius:0}
.dish .body{display:flex;flex-direction:column;gap:7px;padding:18px 20px 20px}
.dish .name{font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:var(--track-display);color:var(--text-display);line-height:1.25}
.dish .name .zh{font-family:var(--font-cjk);font-size:14px;color:var(--text-faint-aa);margin-left:8px;font-weight:500}
.dish .desc{font-size:14px;line-height:1.55;color:var(--text-muted)}

.faq{display:grid;gap:0}
.faq-item{border-top:1px solid var(--border-strong);padding:20px 0}
.faq-item:last-child{border-bottom:1px solid var(--border-strong)}
.faq-item h3{font-size:19px;margin-bottom:8px}
.faq-item p{font-size:15.5px;line-height:1.65;color:var(--text-muted);max-width:70ch}

/* ============================================================
   About
   ============================================================ */
/* Grid, not flex-wrap: with flex the long H1 pushed the seal onto its own row
   even at 1900px. Collapses to a single column at <=760px. */
.about-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:start}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,330px);gap:56px;align-items:start}
.about-copy{display:flex;flex-direction:column;gap:18px}
.stats{display:flex;gap:44px;flex-wrap:wrap;padding:8px 0 2px}
.stat{display:flex;flex-direction:column;gap:3px}
.stat .n{font-family:var(--font-display);font-weight:900;font-size:44px;line-height:1;color:var(--hwr-mahogany)}
.stat .l{font-size:12px;font-weight:700;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-faint-aa);max-width:22ch}
.about-portrait .taped{aspect-ratio:4/5}
.wide-photo .taped{aspect-ratio:16/9}

/* ============================================================
   Contact
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:minmax(340px,470px) minmax(0,1fr);gap:44px;align-items:start}
/* The details column is much taller than the map column; sticking the map keeps
   it beside whichever block you are reading instead of stranding whitespace. */
.contact-side{position:sticky;top:24px}
.info-block{display:flex;flex-direction:column;gap:8px;border-top:var(--border-heavy);padding-top:14px}
.info-block + .info-block{margin-top:22px}
.info-block h2{
  font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--hwr-mahogany);display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
}
.info-block h2 .zh{font-family:var(--font-cjk);letter-spacing:.08em;text-transform:none;font-weight:400;font-size:13px;color:var(--text-muted)}
.info-block .val{font-size:16px;line-height:1.55;color:var(--text-body)}
.info-block .links{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:15px;font-weight:600}
.map-frame{position:relative;border:var(--border-heavy);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-sunken)}
.map-frame iframe{display:block;width:100%;height:100%;min-height:540px;border:0}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:var(--surface-dark);color:var(--text-on-dark);position:relative;overflow:hidden;margin-top:var(--space-8)}
.footer-quiet{
  position:absolute;left:-1vw;bottom:-6%;font-family:var(--font-cjk);font-weight:700;
  font-size:clamp(150px,20vw,270px);line-height:1;color:var(--quiet-cjk-dark);
  pointer-events:none;user-select:none;
}
.site-footer .container{position:relative;padding-top:var(--space-10);padding-bottom:var(--space-6)}
.footer-grid{display:grid;grid-template-columns:minmax(220px,1.2fr) repeat(3,minmax(150px,1fr));gap:40px}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.footer-brand .id{display:flex;align-items:center;gap:12px}
.footer-brand img{width:42px;height:42px;border-radius:var(--radius-pill)}
.footer-brand .en{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--text-on-dark)}
.footer-brand .zh{font-family:var(--font-cjk);font-size:10px;color:var(--gold-on-dark);letter-spacing:.35em}
.footer-brand .slogan{font-size:12px;font-weight:700;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--gold-on-dark)}
.footer-col{display:flex;flex-direction:column;gap:9px;font-size:14px}
.footer-col .head{font-size:12px;font-weight:600;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--text-on-dark-muted)}
.footer-col a{color:var(--text-on-dark);text-decoration:none}
.footer-col a:hover{color:var(--gold-on-dark);text-decoration:underline}
.footer-col span{color:var(--text-on-dark-muted);line-height:1.5}
.footer-bottom{border-top:1px solid var(--rule-on-dark);margin-top:24px;padding-top:16px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;color:var(--text-on-dark-muted)}

/* Sticky mobile bar */
.mobile-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:55;gap:10px;padding:10px 14px;
  background:var(--surface-card);border-top:2px solid var(--hwr-charcoal);box-shadow:var(--shadow-bar);
}
.mobile-bar .btn{flex:1;font-size:14px;padding:11px 8px}

/* ============================================================
   Responsive — mobile-first checks at 360 / 414 / 768 / 1280
   ============================================================ */
@media (max-width:1040px){
  .hero{grid-template-columns:1fr;gap:44px}
  .hero-visual{max-width:520px;width:100%}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .about-portrait{max-width:360px}
  .contact-grid{grid-template-columns:1fr;gap:32px}
  .contact-side{position:static}
  .map-frame iframe{min-height:380px}
  .catering-teaser{grid-template-columns:1fr;gap:34px}
  .shopfront-grid{grid-template-columns:1fr;gap:32px}
  .shopfront-grid > figure{max-width:460px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:900px){
  .nav-links,.nav-wa{display:none}
  .nav-toggle{display:inline-flex}
  .mobile-bar{display:flex}
  body{padding-bottom:66px}
  .section{padding-top:var(--space-12);padding-bottom:var(--space-12)}
  .board{padding:26px 22px 22px}
  .band-dark .quiet{font-size:clamp(150px,34vw,260px);right:-6vw;opacity:.9}
}
@media (max-width:760px){
  /* Kill the decorative tilts on small screens — a rotated block can push
     its corner past the viewport edge and cause horizontal scroll. */
  .tilt-a,.tilt-b,.tilt-c{transform:none}
  .hero-burst{left:-10px;width:104px;height:104px}
  .hero-burst .n{font-size:25px}
  .strip3{gap:26px}
  .stats{gap:28px}
  .stat .n{font-size:36px}
  .about-top{grid-template-columns:1fr;gap:24px}
  .footer-grid{grid-template-columns:1fr;gap:26px}
  .footer-bottom{justify-content:flex-start}
  .quote p{font-size:18px}
  .notepanel{padding:22px 20px}
  .notepanel .headline{font-size:21px}
}
/* Menu rows below ~640px: the desktop single-line flex row (number, name, CJK,
   dotted leader, price) wraps into an unreadable zig-zag on a phone. Switch to a
   fixed three-column grid — number | name over CJK | price — and drop the
   leader, which has no job once the row is two lines tall. */
@media (max-width:640px){
  .row{
    display:grid;grid-template-columns:28px minmax(0,1fr) auto;
    column-gap:11px;row-gap:2px;align-items:baseline;padding:12px 0;
  }
  .row .n{grid-column:1;grid-row:1;transform:none;align-self:center}
  .row .en{grid-column:2;grid-row:1;font-size:18px;line-height:1.25}
  .row .zh{grid-column:2;grid-row:2;font-size:14px}
  .row .amt{grid-column:3;grid-row:1/span 2;flex-direction:column;align-items:flex-end;gap:1px;align-self:center}
  .row .leader{display:none}
  .row > p,.board-section > p.note{grid-column:1/-1}
}
@media (max-width:560px){
  .board{padding:22px 18px 18px}
  .page-head{padding-top:var(--space-10)}
  .hero-burst{position:static;transform:rotate(-6deg);margin:18px auto 0}
  .hero-visual{padding-bottom:0}
  .seal{width:96px;height:96px;font-size:96px}
  .brand .en{font-size:16px}
  .brand img{width:40px;height:40px}
  .topstrip{letter-spacing:.14em;font-size:10px}
}
@media (max-width:400px){
  .container{padding-left:18px;padding-right:18px}
  .storyrow{gap:18px}
  .mobile-bar .btn{font-size:13px;padding:11px 6px}
}

/* ---------- Motion ----------
   The DS allows restrained fades/rises only; this build ships no scroll
   animation at all, so the only motion is the 120-180ms hover/press
   transitions above. Reduced motion switches even those off. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
}