/* ============================================================================
   Kopi More — Golden Mile Food Centre #B1-49
   Design source: the Kopi More design-system export (_ds/) + the Home / Menu /
   About / Contact canvases. Every token below is copied VERBATIM from
   _ds/…/tokens/*.css. Where a token pair failed WCAG AA, an AA-safe variant is
   added alongside it (never in place of it) and both ratios are recorded in a
   comment next to the variant.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens/colors.css
   OBSERVED = sampled from photographs of the real stall.
   RECOMMENDED = derived to complete the scale. */
:root{
  /* Espresso — the drink, and the ink of the brand. */
  --km-espresso-900:#14100E;
  --km-espresso-800:#241710;
  --km-espresso-700:#3B2417;  /* CORE. Espresso Brown */
  --km-espresso-600:#55341F;
  --km-espresso-500:#6E472A;
  --km-espresso-400:#8A6039;

  /* Crema — the golden-brown chestnut layer on a pulled kopi. */
  --km-crema-600:#A96C25;
  --km-crema-500:#C68A3E;     /* CORE. Crema Gold */
  --km-crema-400:#D8A05A;
  --km-crema-300:#E3BA84;
  --km-crema-200:#EFD5B0;

  /* Signboard Gold — the marigold frame + backlit panel of the B1-49 sign. */
  --km-gold-700:#A87213;
  --km-gold-600:#C9891A;
  --km-gold-500:#E9A82C;      /* CORE. Signboard Gold — the one bright accent */
  --km-gold-400:#F3C05A;
  --km-gold-300:#F8D98F;

  /* Signwriting Red — the "Kopi MORE" lettering + SELF SERVICE on the board. */
  --km-red-700:#6F241B;
  --km-red-600:#8C2F23;       /* CORE. Signwriting Red */
  --km-red-500:#A83A2B;
  --km-red-400:#C25A48;

  /* Condensed milk + parchment. */
  --km-cream-050:#FDF9F2;
  --km-cream-100:#F9F2E5;
  --km-cream-200:#F3E7D3;     /* CORE. Condensed-Milk Cream */
  --km-cream-300:#E8D6AE;
  --km-cream-400:#D8C3A0;

  /* Kopitiam Enamel Green — heritage enamelware. Used sparingly. */
  --km-green-800:#0A4438;
  --km-green-700:#0F5C4A;
  --km-green-600:#16745D;

  /* Warm neutrals, pulled toward parchment rather than grey. */
  --km-warm-000:#FFFFFF;
  --km-warm-050:#FBF7F0;
  --km-warm-100:#F2EBE0;
  --km-warm-200:#E3D9C9;
  --km-warm-300:#C9BCA8;
  --km-warm-400:#A2937C;
  --km-warm-500:#7C6E5C;
  --km-warm-600:#5A4E40;
  --km-warm-700:#3E362C;
  --km-warm-900:#221D17;

  /* Alpha ramps for scrims over photography. */
  --km-scrim-espresso-80:rgba(20,16,14,.80);
  --km-scrim-espresso-60:rgba(20,16,14,.60);
  --km-scrim-espresso-30:rgba(20,16,14,.30);
  --km-scrim-cream-90:rgba(249,242,229,.90);
  --km-tint-gold-12:rgba(233,168,44,.12);
  --km-tint-red-10:rgba(140,47,35,.10);
  --km-tint-green-10:rgba(15,92,74,.10);
}

/* ------------------------------------------------------ tokens/typography.css */
:root{
  --km-font-display:"Zilla Slab",Georgia,"Times New Roman",serif;
  --km-font-wordmark:"Archivo Narrow","Zilla Slab",Georgia,serif;
  --km-font-body:"Libre Franklin",system-ui,-apple-system,"Segoe UI",sans-serif;
  --km-font-price:"Zilla Slab",Georgia,serif;

  --km-fs-micro:11px;
  --km-fs-caption:12px;
  --km-fs-eyebrow:13px;
  --km-fs-body-sm:15px;
  --km-fs-body:17px;
  --km-fs-body-lg:19px;
  --km-fs-h5:20px;
  --km-fs-h4:24px;
  --km-fs-h3:30px;
  --km-fs-h2:40px;
  --km-fs-h1:56px;
  --km-fs-display:76px;
  --km-fs-hero:104px;

  --km-lh-tight:1.04;
  --km-lh-snug:1.16;
  --km-lh-heading:1.24;
  --km-lh-body:1.62;
  --km-lh-loose:1.75;

  --km-ls-wordmark:.30em;
  --km-ls-eyebrow:.16em;
  --km-ls-caption:.08em;
  --km-ls-heading:-.012em;
  --km-ls-hero:-.022em;
  --km-ls-body:0;

  --km-fw-light:300;
  --km-fw-regular:400;
  --km-fw-medium:500;
  --km-fw-semibold:600;
  --km-fw-bold:700;

  --km-measure-narrow:34ch;
  --km-measure:64ch;
  --km-measure-wide:76ch;
}

/* --------------------------------------------------------- tokens/spacing.css */
:root{
  --km-space-0:0px;   --km-space-2:2px;   --km-space-4:4px;   --km-space-6:6px;
  --km-space-8:8px;   --km-space-12:12px; --km-space-16:16px; --km-space-20:20px;
  --km-space-24:24px; --km-space-32:32px; --km-space-40:40px; --km-space-56:56px;
  --km-space-72:72px; --km-space-96:96px; --km-space-128:128px; --km-space-160:160px;

  --km-container:1180px;
  --km-container-narrow:720px;
  --km-container-wide:1440px;
  --km-gutter:24px;
  --km-gutter-lg:40px;
  --km-section-y:96px;
  --km-section-y-lg:128px;
  --km-rule-inset:0px;
}

/* --------------------------------------------------- tokens/border-shadow.css */
:root{
  --km-radius-none:0px;
  --km-radius-xs:2px;
  --km-radius-sm:3px;
  --km-radius-md:4px;
  --km-radius-lg:6px;
  --km-radius-pill:999px;
  --km-radius-circle:50%;

  --km-chamfer:14px;
  --km-clip-signboard:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);

  --km-border-width:1px;
  --km-border-width-strong:2px;
  --km-border-width-plate:3px;
  --km-border-hairline:1px solid var(--km-warm-200);
  --km-border-strong:1px solid var(--km-warm-300);
  --km-border-ink:1px solid var(--km-espresso-700);
  --km-border-gold:2px solid var(--km-gold-500);

  --km-shadow-none:none;
  --km-shadow-print:3px 3px 0 var(--km-espresso-700);
  --km-shadow-print-gold:3px 3px 0 var(--km-gold-600);
  --km-shadow-lift-sm:0 1px 2px rgba(20,16,14,.07);
  --km-shadow-lift:0 1px 2px rgba(20,16,14,.06),0 10px 24px -14px rgba(20,16,14,.22);
  --km-shadow-lift-lg:0 2px 4px rgba(20,16,14,.07),0 24px 56px -24px rgba(20,16,14,.30);
  --km-shadow-inset-glow:inset 0 1px 0 rgba(255,255,255,.30);
  --km-focus-ring:0 0 0 2px var(--km-cream-050),0 0 0 4px var(--km-gold-500);
  --km-focus-ring-dark:0 0 0 2px var(--km-espresso-900),0 0 0 4px var(--km-gold-500);
}

/* ---------------------------------------------------------- tokens/motion.css */
:root{
  --km-dur-fast:120ms;
  --km-dur-base:180ms;
  --km-dur-slow:320ms;
  --km-dur-pour:600ms;   /* reserved for image and hero reveals only */
  --km-ease-standard:cubic-bezier(.2,.6,.2,1);
  --km-ease-out:cubic-bezier(.16,.84,.44,1);
  --km-ease-in:cubic-bezier(.5,0,.9,.4);
  --km-transition-control:background-color var(--km-dur-fast) var(--km-ease-standard),border-color var(--km-dur-fast) var(--km-ease-standard),color var(--km-dur-fast) var(--km-ease-standard),box-shadow var(--km-dur-fast) var(--km-ease-standard),transform var(--km-dur-fast) var(--km-ease-standard);
}
@media (prefers-reduced-motion:reduce){
  :root{--km-dur-fast:1ms;--km-dur-base:1ms;--km-dur-slow:1ms;--km-dur-pour:1ms}
}

/* -------------------------------------------------------- tokens/semantic.css */
:root{
  --km-text-heading:var(--km-espresso-700);
  --km-text-body:var(--km-warm-700);
  --km-text-muted:var(--km-warm-500);
  --km-text-faint:var(--km-warm-400);
  --km-text-accent:var(--km-red-600);
  --km-text-price:var(--km-espresso-700);
  --km-text-inverse:var(--km-cream-100);
  --km-text-inverse-muted:rgba(249,242,229,.68);
  --km-text-on-gold:var(--km-espresso-800);
  --km-link:var(--km-red-600);
  --km-link-hover:var(--km-espresso-700);

  --km-surface-page:var(--km-cream-050);
  --km-surface-page-alt:var(--km-cream-100);
  --km-surface-card:var(--km-warm-000);
  --km-surface-inset:var(--km-cream-100);
  --km-surface-parchment:var(--km-cream-300);
  --km-surface-dark:var(--km-espresso-700);
  --km-surface-darkest:var(--km-espresso-900);
  --km-surface-accent:var(--km-gold-500);
  --km-surface-scrim:var(--km-scrim-espresso-60);

  --km-border-subtle:var(--km-warm-200);
  --km-border-default:var(--km-warm-300);
  --km-border-loud:var(--km-espresso-700);
  --km-border-on-dark:rgba(249,242,229,.22);

  --km-action-primary-bg:var(--km-gold-500);
  --km-action-primary-fg:var(--km-espresso-800);
  --km-action-primary-bg-hover:var(--km-gold-400);
  --km-action-primary-bg-active:var(--km-gold-600);
  --km-action-secondary-bg:transparent;
  --km-action-secondary-fg:var(--km-espresso-700);
  --km-action-secondary-border:var(--km-espresso-700);
  --km-action-secondary-bg-hover:var(--km-tint-gold-12);
  --km-action-secondary-bg-active:var(--km-cream-300);
  --km-action-ghost-fg:var(--km-espresso-700);
  --km-action-ghost-bg-hover:var(--km-cream-200);
  --km-action-loud-bg:var(--km-red-600);
  --km-action-loud-fg:var(--km-cream-050);
  --km-action-loud-bg-hover:var(--km-red-500);
  --km-action-disabled-bg:var(--km-warm-200);
  --km-action-disabled-fg:var(--km-warm-400);

  --km-status-open-fg:var(--km-green-700);
  --km-status-open-bg:var(--km-tint-green-10);
  --km-status-closed-fg:var(--km-red-600);
  --km-status-closed-bg:var(--km-tint-red-10);
  --km-status-note-fg:var(--km-gold-700);
  --km-status-note-bg:var(--km-tint-gold-12);
}

/* ---------------------------------------------------------- AA-safe variants
   Added, not substituted. Each is used only where the design-system token it
   derives from would fail WCAG 2.2 AA against the surface it actually sits on. */
:root{
  /* --km-text-muted (#7C6E5C) on parchment #E8D6AE = 3.46:1 — FAILS AA.
     --km-warm-600 (#5A4E40) on parchment #E8D6AE = 5.64:1 — passes. */
  --km-text-muted-on-parchment:var(--km-warm-600);

  /* --km-crema-500 (#C68A3E) on page cream #FBF7F0 = 2.77:1 — fails even the
     3:1 large-text floor. --km-crema-600 (#A96C25) on #FBF7F0 = 4.05:1 —
     passes 3:1 for the 26px bold wayfinding ordinals. */
  --km-ordinal-on-cream:var(--km-crema-600);

  /* Hero attribution: canvas rgba(249,242,229,.55) over the hero scrim can fall
     to 3.84:1 where the photo behind is bright. .72 gives 5.38:1 worst case. */
  --km-text-on-photo-muted:rgba(249,242,229,.72);

  /* Footer plate micro-line: canvas rgba(249,242,229,.5) on #3B2417 = 4.39:1 —
     just under AA. .62 on #3B2417 = 5.94:1. */
  --km-text-on-plate-muted:rgba(249,242,229,.62);

  /* --km-status-note-fg (#A87213) on --km-status-note-bg over white = 3.80:1 —
     FAILS AA at the 11px marker size. --km-espresso-700 (#3B2417) on the same
     tint = 13.3:1 (12.6:1 over page cream); the "note" tone is carried by the
     gold fill and gold border instead of by the text colour. */
  --km-mark-fg:var(--km-espresso-700);
}

/* ============================================================================
   Base — tokens/base.css, kept as the brand's typographic floor
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--km-warm-050);color:var(--km-warm-700);
  font-family:var(--km-font-body);font-size:var(--km-fs-body);
  line-height:var(--km-lh-body);font-weight:var(--km-fw-regular);
  -webkit-font-smoothing:antialiased;text-wrap:pretty;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{
  font-family:var(--km-font-display);color:var(--km-text-heading);
  font-weight:var(--km-fw-semibold);line-height:var(--km-lh-heading);
  letter-spacing:var(--km-ls-heading);margin:0;text-wrap:balance;
}
h1{font-size:var(--km-fs-h1);line-height:var(--km-lh-snug)}
h2{font-size:var(--km-fs-h2)}
h3{font-size:var(--km-fs-h3)}
h4{font-size:var(--km-fs-h4)}
h5{font-size:var(--km-fs-h5)}
p{margin:0}
/* The UA sheet gives <figure> `margin:1em 40px`. Left in, it insets every
   photograph 40px from its grid column — the canvases draw them flush — and at
   phone widths it makes the image 80px narrower than the text beside it. */
figure{margin:0}
a{
  color:var(--km-link);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;transition:color var(--km-dur-fast) var(--km-ease-standard);
}
a:hover{color:var(--km-link-hover);text-decoration-thickness:2px}
:focus-visible{outline:none;box-shadow:var(--km-focus-ring)}
.on-dark :focus-visible{box-shadow:var(--km-focus-ring-dark)}
strong,b{font-weight:var(--km-fw-semibold)}
small{font-size:var(--km-fs-caption)}
img{max-width:100%;display:block}
::selection{background:var(--km-gold-500);color:var(--km-espresso-800)}
ul,ol{margin:0;padding:0;list-style:none}

.skip-link{
  position:absolute;left:8px;top:-60px;z-index:200;
  background:var(--km-espresso-700);color:var(--km-cream-050);
  padding:12px 18px;border-radius:var(--km-radius-xs);
  font-size:var(--km-fs-body-sm);font-weight:var(--km-fw-semibold);text-decoration:none;
  transition:top var(--km-dur-base) var(--km-ease-standard);
}
.skip-link:focus{top:8px;color:var(--km-cream-050)}

.wrap{max-width:var(--km-container);margin:0 auto;width:100%}
.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;
}

/* ============================================================================
   Components
   ========================================================================= */

/* --- Button (components/actions/Button.jsx) ------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-sizing:border-box;font-family:var(--km-font-body);
  font-weight:var(--km-fw-semibold);text-transform:uppercase;text-decoration:none;
  border-radius:var(--km-radius-xs);border:none;cursor:pointer;
  letter-spacing:var(--km-ls-caption);
  font-size:var(--km-fs-body-sm);padding:11px 20px;min-height:44px;
  transition:var(--km-transition-control);
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn--sm{font-size:var(--km-fs-caption);padding:7px 14px;gap:6px;min-height:32px}
.btn--lg{font-size:var(--km-fs-body);padding:15px 28px;gap:10px;min-height:52px}
.btn--block{display:flex;width:100%}

.btn--primary{background:var(--km-action-primary-bg);color:var(--km-action-primary-fg)} /* #241710 on #E9A82C = 8.38:1 */
.btn--primary:hover{background:var(--km-action-primary-bg-hover);color:var(--km-action-primary-fg)}
.btn--primary:active{background:var(--km-action-primary-bg-active)}

.btn--secondary{
  background:var(--km-action-secondary-bg);color:var(--km-action-secondary-fg);
  box-shadow:inset 0 0 0 1px var(--km-action-secondary-border);
}
.btn--secondary:hover{background:var(--km-action-secondary-bg-hover);color:var(--km-action-secondary-fg)}
.btn--secondary:active{background:var(--km-action-secondary-bg-active)}

.btn--ghost{background:transparent;color:var(--km-action-ghost-fg)}
.btn--ghost:hover{background:var(--km-action-ghost-bg-hover);color:var(--km-action-ghost-fg)}

.btn--inverse{
  background:transparent;color:var(--km-text-inverse);
  box-shadow:inset 0 0 0 1px var(--km-border-on-dark);
}
.btn--inverse:hover{background:var(--km-cream-050);color:var(--km-espresso-700)}

/* Marked placeholder affordance: the button still reads as a live CTA, but the
   value behind it is unconfirmed and is labelled as such next to it. */
.btn--pending{position:relative}

/* --- Badge (components/content/Badge.jsx) --------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 8px;
  border-radius:var(--km-radius-xs);font-family:var(--km-font-body);
  font-size:var(--km-fs-micro);font-weight:var(--km-fw-semibold);
  letter-spacing:var(--km-ls-caption);text-transform:uppercase;
  line-height:1.4;white-space:nowrap;
}
.badge--green-solid{background:var(--km-green-700);color:var(--km-cream-050)}   /* 7.60:1 */
.badge--neutral-outline{background:transparent;color:var(--km-warm-600);box-shadow:inset 0 0 0 1px var(--km-border-default)} /* #5A4E40 on #FBF7F0 = 7.57:1 */
.badge--espresso-outline{background:transparent;color:var(--km-espresso-700);box-shadow:inset 0 0 0 1px var(--km-espresso-700)} /* 13.5:1 */
.badge--gold-solid{background:var(--km-gold-500);color:var(--km-text-on-gold)}  /* 8.38:1 */

/* --- Card (components/surfaces/Card.jsx) ---------------------------------- */
.card{
  border-radius:var(--km-radius-sm);box-sizing:border-box;
  font-family:var(--km-font-body);
  transition:box-shadow var(--km-dur-base) var(--km-ease-standard),transform var(--km-dur-base) var(--km-ease-standard);
}
.card--plain{background:var(--km-surface-card);box-shadow:inset 0 0 0 1px var(--km-border-subtle);color:var(--km-text-body)}
.card--parchment{background:var(--km-surface-parchment);box-shadow:none;color:var(--km-espresso-700)}
.card--print{background:var(--km-surface-card);box-shadow:var(--km-shadow-print);color:var(--km-text-body)}
.card--pad-lg{padding:32px}
.card--pad-xl{padding:40px}

/* --- MenuItem (components/content/MenuItem.jsx) ---------------------------
   Same reading as the React primitive — name, Chinese name, dotted leader,
   price, note underneath — but the note is a sibling of the priced row rather
   than a child of the name, so name and price stay on one baseline at phone
   widths instead of the price dropping to a line of its own. */
.menu-item{
  display:block;padding:11px 0;font-family:var(--km-font-body);
}
.menu-item--lg{padding:14px 0}
.menu-item__row{display:flex;align-items:baseline;gap:12px}
.menu-item__label{flex:0 1 auto;min-width:0}
.menu-item__name{
  display:block;font-family:var(--km-font-display);font-weight:var(--km-fw-semibold);
  font-size:var(--km-fs-body);line-height:1.3;color:var(--km-text-heading);
}
.menu-item--lg .menu-item__name{font-size:var(--km-fs-h5)}
.menu-item__zh{
  font-weight:var(--km-fw-regular);color:var(--km-text-muted-on-parchment);
  margin-left:10px;font-size:var(--km-fs-body-sm);
}
.menu-item--lg .menu-item__zh{font-size:var(--km-fs-body)}
.menu-item__note{
  display:block;font-size:var(--km-fs-caption);line-height:1.5;
  color:var(--km-text-muted-on-parchment);margin-top:3px;max-width:46ch;
}
.menu-item__leader{
  flex:1 1 auto;min-width:16px;
  border-bottom:1px dotted var(--km-border-default);transform:translateY(-4px);
}
.menu-item__price{
  flex:0 0 auto;font-family:var(--km-font-price);font-variant-numeric:tabular-nums;
  font-weight:var(--km-fw-semibold);font-size:var(--km-fs-body);color:var(--km-text-price);
}
.menu-item--lg .menu-item__price{font-size:var(--km-fs-h5)}
/* The take-home card sits on white, where --km-text-muted passes (4.95:1). */
.card--print .menu-item__zh,.card--print .menu-item__note{color:var(--km-text-muted)}

/* --- Signboard (components/content/Signboard.jsx) -------------------------
   A type reproduction of the chamfered, backlit stall plate at #B1-49 — gold
   frame, cut corners, unit number bottom-right. Not a fake photograph. */
.signboard{
  position:relative;clip-path:var(--km-clip-signboard);
  background:var(--km-gold-500);padding:5px;font-family:var(--km-font-body);
}
.signboard__panel{
  position:relative;clip-path:var(--km-clip-signboard);
  /* AA-safe variant of the design system's 105deg sepia wash: the light band is
     widened to 34%–66% so the centred red title always sits on parchment.
     #8C2F23 on #E8D6AE = 5.76:1; on the #C68A3E edge it would be 2.79:1. */
  background:linear-gradient(105deg,var(--km-crema-600) 0%,var(--km-cream-300) 34%,var(--km-cream-300) 66%,var(--km-crema-500) 100%);
  padding:28px 32px 34px;text-align:center;
}
.signboard__title{
  font-family:var(--km-font-display);font-style:italic;font-weight:var(--km-fw-bold);
  font-size:clamp(26px,4.6vw,var(--km-fs-h2));line-height:1.05;
  letter-spacing:var(--km-ls-heading);color:var(--km-red-600);
}
.signboard__sub{
  margin-top:6px;font-family:var(--km-font-display);font-style:italic;
  font-weight:var(--km-fw-semibold);font-size:clamp(16px,2.4vw,var(--km-fs-h5));
  color:var(--km-espresso-700);  /* 10.1:1 on #E8D6AE */
}
.signboard__unit{
  position:absolute;right:18px;bottom:12px;font-family:var(--km-font-wordmark);
  font-weight:var(--km-fw-bold);font-size:var(--km-fs-body-sm);
  letter-spacing:.06em;color:var(--km-espresso-800);  /* 5.89:1 on the gold edge */
}

/* --- Eyebrow + gold stub rule -------------------------------------------- */
.eyebrow{
  font-size:var(--km-fs-eyebrow);letter-spacing:var(--km-ls-eyebrow);
  text-transform:uppercase;font-weight:var(--km-fw-semibold);
  color:var(--km-red-600);  /* 7.72:1 on #FBF7F0 */
}
.eyebrow--gold{color:var(--km-gold-400)}  /* 8.61:1 on #3B2417 */
.eyebrow--sm{font-size:var(--km-fs-caption)}
.rule{width:64px;border-top:var(--km-border-gold);margin:14px 0 18px}

/* --- Marked placeholders (CLAUDE.md honesty markers — must never be styled
       away; they are the one kind of "apparatus" allowed on a customer page) */
.mark{
  display:inline-block;font-family:var(--km-font-body);
  font-size:var(--km-fs-micro);font-weight:var(--km-fw-semibold);
  letter-spacing:var(--km-ls-caption);text-transform:uppercase;
  color:var(--km-mark-fg);background:var(--km-status-note-bg);
  padding:3px 7px;border-radius:var(--km-radius-xs);
  box-shadow:inset 0 0 0 1px rgba(168,114,19,.55);
  white-space:normal;line-height:1.4;vertical-align:middle;
}
.mark--dark{
  color:var(--km-gold-400);background:rgba(233,168,44,.14);
  box-shadow:inset 0 0 0 1px rgba(243,192,90,.34);
}

/* ============================================================================
   Chrome — utility strip, header, drawer, footer (identical on all four pages)
   ========================================================================= */
.plate-strip{
  background:var(--km-espresso-800);display:flex;justify-content:space-between;
  align-items:center;gap:24px;padding:8px var(--km-gutter-lg);
  font-size:var(--km-fs-micro);letter-spacing:var(--km-ls-caption);
  text-transform:uppercase;color:rgba(249,242,229,.62);  /* 6.68:1 on #241710 */
}
.plate-strip__self{letter-spacing:var(--km-ls-eyebrow);font-weight:var(--km-fw-semibold);color:var(--km-gold-400)}

.site-header{
  position:sticky;top:0;z-index:30;min-height:72px;background:var(--km-warm-050);
  border-bottom:1px solid var(--km-border-subtle);display:flex;align-items:center;
  gap:24px;padding:0 var(--km-gutter-lg);
}
.wordmark{
  text-decoration:none;font-family:var(--km-font-wordmark);
  font-weight:var(--km-fw-bold);font-size:20px;letter-spacing:var(--km-ls-wordmark);
  text-transform:uppercase;color:var(--km-espresso-800);text-indent:var(--km-ls-wordmark);
  white-space:nowrap;flex:0 0 auto;
}
.wordmark:hover{color:var(--km-espresso-800)}
.nav{display:flex;gap:4px}
.nav a{
  text-decoration:none;padding:8px 14px;border-radius:var(--km-radius-xs);
  font-size:var(--km-fs-caption);font-weight:var(--km-fw-semibold);
  letter-spacing:var(--km-ls-caption);text-transform:uppercase;
  color:var(--km-warm-500);  /* 4.64:1 on #FBF7F0 */
  min-height:44px;display:inline-flex;align-items:center;
}
.nav a:hover{background:var(--km-tint-gold-12);color:var(--km-espresso-700)}
.nav a[aria-current="page"]{color:var(--km-cream-100);background:var(--km-espresso-700)}
.nav a[aria-current="page"]:hover{background:var(--km-espresso-700);color:var(--km-cream-100)}
.header-spacer{flex:1}
.open-detail{
  font-size:var(--km-fs-caption);letter-spacing:var(--km-ls-caption);
  text-transform:uppercase;color:var(--km-warm-600);white-space:nowrap;  /* 7.57:1 */
}
.header-cta{flex:0 0 auto}

.nav-toggle{
  display:none;align-items:center;gap:9px;min-height:44px;padding:0 14px;
  background:transparent;border:1px solid var(--km-espresso-700);
  border-radius:var(--km-radius-xs);cursor:pointer;
  font-family:var(--km-font-body);font-size:var(--km-fs-caption);
  font-weight:var(--km-fw-semibold);letter-spacing:var(--km-ls-caption);
  text-transform:uppercase;color:var(--km-espresso-700);
}
.nav-toggle .bars{display:inline-flex;flex-direction:column;gap:3px}
.nav-toggle .bars i{display:block;width:16px;height:2px;background:var(--km-espresso-700)}

/* Drawer — hidden IN PLACE with opacity/visibility. Never translateX: an
   off-screen transformed drawer creates horizontal overflow at phone widths. */
/* visibility is stepped, not eased: it flips to `visible` the instant the
   drawer opens (so the first link is focusable on the next frame) and is held
   until the fade finishes on the way out. */
.nav-backdrop{
  position:fixed;inset:0;z-index:60;background:var(--km-scrim-espresso-60);
  opacity:0;visibility:hidden;
  transition:opacity var(--km-dur-slow) var(--km-ease-standard),visibility 0s linear var(--km-dur-slow);
}
.nav-backdrop[data-open="true"]{
  opacity:1;visibility:visible;
  transition:opacity var(--km-dur-slow) var(--km-ease-standard),visibility 0s linear 0s;
}
.nav-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(320px,86vw);
  background:var(--km-warm-050);border-left:3px solid var(--km-espresso-700);
  padding:16px 20px 28px;display:flex;flex-direction:column;overflow-y:auto;
  opacity:0;visibility:hidden;
  transition:opacity var(--km-dur-slow) var(--km-ease-standard),visibility 0s linear var(--km-dur-slow);
}
.nav-drawer[data-open="true"]{
  opacity:1;visibility:visible;
  transition:opacity var(--km-dur-slow) var(--km-ease-standard),visibility 0s linear 0s;
}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.drawer-close{
  background:none;border:0;font-size:30px;line-height:1;color:var(--km-espresso-700);
  cursor:pointer;padding:4px 10px;min-height:44px;min-width:44px;
}
.drawer-link{
  display:block;padding:14px 2px;text-decoration:none;
  font-family:var(--km-font-display);font-weight:var(--km-fw-semibold);
  font-size:var(--km-fs-h5);color:var(--km-espresso-700);
  border-bottom:1px solid var(--km-border-subtle);
}
.drawer-link:hover{color:var(--km-red-600)}
.drawer-link[aria-current="page"]{color:var(--km-red-600)}
.drawer-meta{
  margin-top:22px;display:flex;flex-direction:column;gap:6px;
  font-size:var(--km-fs-body-sm);color:var(--km-warm-600);line-height:1.6;
}

/* --- Footer -------------------------------------------------------------- */
.site-footer{
  background:var(--km-surface-dark);border-top:var(--km-border-width-plate) solid var(--km-espresso-900);
  padding:56px var(--km-gutter-lg) 32px;
}
.footer-grid{
  max-width:var(--km-container);margin:0 auto;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;
}
.footer-brand__mark{width:64px;height:64px;border-radius:var(--km-radius-circle);object-fit:cover}
.footer-brand .wordmark{
  display:inline-block;margin-top:18px;font-size:22px;color:var(--km-gold-500);
}
.footer-brand .wordmark:hover{color:var(--km-gold-400)}
.footer-brand p{
  margin:14px 0 0;font-size:var(--km-fs-body-sm);line-height:1.65;
  color:var(--km-text-inverse-muted);max-width:32ch;  /* 6.80:1 on #3B2417 */
}
.footer-col{
  display:flex;flex-direction:column;gap:8px;font-size:var(--km-fs-body-sm);
  color:var(--km-text-inverse-muted);line-height:1.6;
}
.footer-col__head{
  font-size:var(--km-fs-caption);letter-spacing:var(--km-ls-eyebrow);
  text-transform:uppercase;font-weight:var(--km-fw-semibold);
  color:var(--km-gold-400);margin-bottom:4px;
}
.footer-col a{color:var(--km-cream-200);text-decoration:underline}  /* 11.8:1 */
.footer-col a:hover{color:var(--km-cream-050)}
.footer-col .pending{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}

.footer-plate{
  max-width:var(--km-container);margin:44px auto 0;padding-top:20px;
  border-top:1px solid var(--km-border-on-dark);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;
  font-size:var(--km-fs-micro);letter-spacing:var(--km-ls-eyebrow);
  text-transform:uppercase;color:var(--km-text-on-plate-muted);
}
.footer-plate__self{color:var(--km-gold-400);font-weight:var(--km-fw-semibold)}
.footer-sitemap{display:flex;flex-wrap:wrap;gap:8px 20px}
.footer-sitemap a{color:var(--km-text-on-plate-muted);text-decoration:underline;text-underline-offset:3px}
.footer-sitemap a:hover{color:var(--km-cream-050)}
/* Not a flex container: the copyright is one sentence with an inline <span> for
   the year, and flex would treat "©", the year and the rest as three items with
   a 20px gap between them. */
.footer-plate__end{margin-left:auto}

/* ============================================================================
   Home
   ========================================================================= */
@keyframes kmPour{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .pour{animation:none !important}
}
.pour{animation:kmPour var(--km-dur-pour) var(--km-ease-standard) both}
.pour--1{animation-delay:90ms}
.pour--2{animation-delay:180ms}
.pour--3{animation-delay:270ms}
.pour--4{animation-delay:340ms}

.hero{position:relative;background:var(--km-espresso-800);overflow:hidden}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%}
.hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,16,14,.96) 0%,rgba(20,16,14,.87) 45%,rgba(20,16,14,.74) 100%);
}
.hero__inner{
  position:relative;padding:76px var(--km-gutter-lg) 60px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.hero__eyebrow{color:var(--km-gold-400)}  /* 4.91:1 against the lightest possible scrimmed photo */
.hero__board{width:860px;max-width:100%;margin:30px auto 0}
.hero__quote{
  margin-top:28px;font-family:var(--km-font-display);font-style:italic;
  font-weight:var(--km-fw-medium);font-size:clamp(18px,2.4vw,21px);
  color:var(--km-crema-200);  /* 6.72:1 */
}
.hero__quote cite{font-style:normal}
.hero__attr{
  font-style:normal;font-size:var(--km-fs-body-sm);
  color:var(--km-text-on-photo-muted);font-family:var(--km-font-body);
}
.hero__actions{margin-top:38px;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.hero__hours{margin-top:20px;font-size:var(--km-fs-eyebrow);color:rgba(249,242,229,.72)}

.wayfinding{border-bottom:1px solid var(--km-border-subtle);padding:40px var(--km-gutter-lg)}
.wayfinding__grid{
  max-width:var(--km-container);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);
}
.wayfinding__step{padding:0 28px;border-left:1px solid var(--km-border-subtle)}
.wayfinding__num{
  font-family:var(--km-font-display);font-style:italic;font-weight:var(--km-fw-bold);
  font-size:26px;color:var(--km-ordinal-on-cream);  /* 4.05:1 — large text, passes 3:1 */
}
.wayfinding__label{
  display:flex;align-items:center;gap:8px;margin-top:10px;color:var(--km-espresso-700);
  font-size:var(--km-fs-caption);letter-spacing:var(--km-ls-eyebrow);
  text-transform:uppercase;font-weight:var(--km-fw-semibold);
}
.wayfinding__label svg{flex:0 0 auto}
.wayfinding__body{font-size:14px;line-height:1.6;color:var(--km-text-muted);margin-top:6px}

.split{padding:var(--km-section-y) var(--km-gutter-lg)}
.split__grid{
  max-width:var(--km-container);margin:0 auto;display:grid;gap:64px;align-items:center;
}
.split__grid--text-left{grid-template-columns:1.05fr .95fr}
.split__grid--media-left{grid-template-columns:.95fr 1.05fr}
.split h2{
  font-size:clamp(30px,4.2vw,44px);font-weight:var(--km-fw-semibold);
  line-height:var(--km-lh-snug);letter-spacing:var(--km-ls-heading);max-width:20ch;
}
.split__lead{
  font-size:var(--km-fs-body-lg);line-height:var(--km-lh-body);
  color:var(--km-warm-700);margin:20px 0 0;max-width:48ch;
}
.split__note{font-size:14px;line-height:1.6;color:var(--km-text-muted);margin:16px 0 0}
.split__cta{margin-top:28px}
/* height:auto is load-bearing — the <img> carries width/height attributes, and
   without it the intrinsic height wins and aspect-ratio never applies. */
.figure img{
  width:100%;height:auto;object-fit:cover;border-radius:var(--km-radius-md);
  border:1px solid var(--km-border-subtle);display:block;
}
.figure figcaption{font-size:var(--km-fs-caption);color:var(--km-text-muted);margin:12px 0 0;line-height:1.6}
.figure--square img{aspect-ratio:1/1}
.figure--43 img{aspect-ratio:4/3}

.band-dark{background:var(--km-surface-dark);padding:var(--km-section-y) var(--km-gutter-lg)}
.band-dark h2{color:var(--km-cream-100)}
.band-dark .split__lead{color:var(--km-cream-200)}  /* 11.8:1 */
.band-dark .split__note{color:var(--km-text-inverse-muted);font-size:var(--km-fs-body-sm);line-height:1.7}
.band-dark .figure img{border:none}
.band-dark .figure figcaption{color:rgba(249,242,229,.55)}  /* 4.98:1 on #3B2417 */

/* ============================================================================
   Menu
   ========================================================================= */
.page-head{padding:88px var(--km-gutter-lg) 0}
.page-head__inner{max-width:var(--km-container);margin:0 auto}
.page-head h1{
  font-size:clamp(34px,6vw,var(--km-fs-h1));line-height:1.06;
  letter-spacing:var(--km-ls-heading);
}
.page-head__lead{
  font-size:var(--km-fs-body-lg);line-height:var(--km-lh-body);
  color:var(--km-warm-600);margin:18px 0 0;max-width:52ch;
}

.menu-section{padding:0 var(--km-gutter-lg) var(--km-section-y-lg)}
.menu-grid{
  max-width:var(--km-container);margin:48px auto 0;
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;
}
.board__head{
  font-size:var(--km-fs-caption);letter-spacing:var(--km-ls-eyebrow);
  text-transform:uppercase;font-weight:var(--km-fw-semibold);
  color:var(--km-red-600);margin-bottom:14px;  /* 5.76:1 on parchment */
}
.board__divider{border-top:1px solid var(--km-warm-200);margin:24px 0 14px}
.board__badges{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.takehome{margin-top:32px}
.takehome__label{height:56px;width:auto;display:block;margin-bottom:16px;border-radius:var(--km-radius-xs)}
.takehome__divider{border-top:1px solid var(--km-border-subtle);margin:16px 0 8px}
.takehome__note{font-size:14px;line-height:1.65;color:var(--km-text-muted);margin:16px 0 0;max-width:38ch}
.takehome__cta{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* ============================================================================
   About
   ========================================================================= */
.about-head{padding:88px var(--km-gutter-lg) var(--km-section-y)}
.about-head h1{
  font-size:clamp(34px,6vw,var(--km-fs-h1));line-height:1.08;
  letter-spacing:var(--km-ls-heading);max-width:16ch;
}
.about-head__lead{
  font-size:var(--km-fs-body-lg);line-height:var(--km-lh-body);
  color:var(--km-warm-700);margin:22px 0 0;max-width:48ch;
}
.about-head__body{
  font-size:var(--km-fs-body);line-height:var(--km-lh-body);
  color:var(--km-warm-600);margin:16px 0 0;max-width:50ch;
}
.chips{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}

.quote-section{padding:var(--km-section-y) var(--km-gutter-lg) var(--km-section-y-lg)}
.quote-block{max-width:720px}
.quote-block .rule{margin:0 0 24px}
.quote-block blockquote{
  margin:0;font-family:var(--km-font-display);font-style:italic;
  font-weight:var(--km-fw-medium);font-size:clamp(23px,3.4vw,32px);
  line-height:1.32;color:var(--km-espresso-700);
}
.quote-block__attr{margin-top:16px;font-size:var(--km-fs-body-sm);color:var(--km-warm-600)} /* 7.57:1 */
.quote-block__cta{margin-top:32px}

/* ============================================================================
   Contact
   ========================================================================= */
.visit-grid{
  max-width:var(--km-container);margin:48px auto 0;
  display:grid;grid-template-columns:420px 1fr;gap:56px;align-items:start;
}
.visit-col{display:flex;flex-direction:column;gap:32px}
.hours-head{display:flex;align-items:center;gap:8px;color:var(--km-red-600)}
.hours-head span{
  font-size:var(--km-fs-caption);letter-spacing:var(--km-ls-eyebrow);
  text-transform:uppercase;font-weight:var(--km-fw-semibold);
}
.hours-divider{border-top:1px solid var(--km-border-subtle);margin:18px 0 6px}
.hours-row{
  display:flex;justify-content:space-between;gap:16px;
  font-size:var(--km-fs-body);color:var(--km-espresso-700);padding:6px 0;
}
.hours-row b{font-family:var(--km-font-display);font-weight:var(--km-fw-semibold);font-variant-numeric:tabular-nums}
.hours-note{font-size:14px;line-height:1.6;color:var(--km-text-muted);margin:12px 0 0}

.orders__value{
  font-family:var(--km-font-display);font-size:clamp(21px,3vw,26px);
  font-weight:var(--km-fw-semibold);color:var(--km-espresso-700);
  margin-top:10px;line-height:1.25;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
}
.orders__body{font-size:var(--km-fs-body-sm);line-height:1.65;color:var(--km-warm-600);margin:8px 0 0;max-width:40ch}
/* The canvas's 420px Orders panel leaves 356px of content width, but the two
   labels alone measure 98px + 234px in the design system's own md Button, so
   the designed side-by-side pair cannot fit at any padding. They wrap instead,
   and `flex:1 1 auto` makes each wrapped line's single button fill the row, so
   the pair reads as a deliberate stack rather than two ragged blocks. Button
   padding, size and variants are the design system's, untouched. */
.orders__actions{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px}
.orders__actions .btn{flex:1 1 auto;min-width:0}
.orders__marks{margin-top:14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}

.address-row{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.address-row__pin{color:var(--km-red-600);margin-top:4px;flex:0 0 auto}
.address-row__body{flex:1 1 220px;min-width:0}
.address-row__street{font-family:var(--km-font-display);font-size:clamp(22px,3vw,26px);font-weight:var(--km-fw-semibold);color:var(--km-espresso-700)}
.address-row__full{font-size:16px;color:var(--km-warm-700);line-height:1.6;margin-top:2px}
.address-row__mrt{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--km-text-muted);margin-top:6px}
.address-row__cta{margin-left:auto;flex:0 0 auto}
.map-embed{
  width:100%;height:400px;border:1px solid var(--km-border-subtle);
  border-radius:var(--km-radius-md);display:block;margin-top:24px;
}
.visit-links{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;font-size:var(--km-fs-body-sm)}
.visit-links .ig{display:inline-flex;align-items:center;gap:6px;color:var(--km-red-600)}
.visit-links .pending{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--km-warm-600)}

/* ============================================================================
   Responsive — the canvases are 1180px desktop only; everything below is the
   mobile-first reflow they do not specify.
   ========================================================================= */
@media (max-width:1080px){
  .open-detail{display:none}
  .nav a{padding:8px 10px}
  .site-header{gap:16px}
}
@media (max-width:1000px){
  .menu-grid{grid-template-columns:1fr;gap:40px}
  .visit-grid{grid-template-columns:1fr;gap:40px}
  .split__grid--text-left,.split__grid--media-left{grid-template-columns:1fr;gap:36px}
  .split h2,.split__lead,.about-head__lead,.about-head__body{max-width:none}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:900px){
  :root{--km-gutter-lg:24px;--km-section-y:72px;--km-section-y-lg:88px}
  .nav{display:none}
  .nav-toggle{display:inline-flex}
  .site-header{gap:12px;padding:10px var(--km-gutter-lg);min-height:66px}
  .hero__inner{padding:56px var(--km-gutter-lg) 48px}
  .page-head,.about-head{padding-top:56px}
  .wayfinding__grid{grid-template-columns:1fr;gap:24px}
  .wayfinding__step{padding:0 0 0 20px}
  .card--pad-xl{padding:28px}
  .card--pad-lg{padding:24px}
  .visit-grid{margin-top:36px}
  .menu-grid{margin-top:36px}
}
@media (max-width:720px){
  /* The strip carries the unit number, so it wraps to a second line rather than
     truncating: an ellipsis here would eat "#B1-49", which is the one thing a
     first-time visitor needs to find the stall. */
  .plate-strip{font-size:10px;gap:12px;padding:8px var(--km-gutter-lg);align-items:flex-start}
  .plate-strip__addr{min-width:0;line-height:1.5}
  .plate-strip__self{white-space:nowrap;flex:0 0 auto;line-height:1.5}
  .address-row__cta{margin-left:0;width:100%}
  .address-row__cta .btn{width:100%}
  .map-embed{height:320px}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-plate{flex-direction:column;align-items:flex-start;gap:14px}
  .footer-plate__end{margin-left:0}
}
@media (max-width:560px){
  /* One 72px row cannot hold wordmark + status + CTA + hamburger on a phone
     without something losing its label, so the header becomes two labelled
     rows instead: mark / Menu, then status / Find the stall. */
  .site-header{
    display:grid;grid-template-columns:1fr auto;
    grid-template-areas:"mark toggle" "status cta";
    row-gap:10px;column-gap:12px;padding:10px var(--km-gutter-lg);
  }
  .wordmark{grid-area:mark;align-self:center;font-size:16px;letter-spacing:.22em;text-indent:.22em}
  .nav-toggle{grid-area:toggle}
  .header-spacer{display:none}
  [data-open-badge]{grid-area:status;justify-self:start;align-self:center}
  .header-cta{grid-area:cta;justify-self:end;font-size:11px;padding:7px 12px}
  .badge{font-size:10px;padding:4px 7px}
  .hero__actions .btn{width:100%}
  .hero__actions{gap:10px}
  .signboard__panel{padding:22px 18px 30px}
  .signboard__unit{right:12px;bottom:9px;font-size:var(--km-fs-caption)}
  .card--pad-xl{padding:22px 18px}
  .card--pad-lg{padding:20px 18px}
  .menu-item__row{gap:10px}
  .menu-item__leader{min-width:14px}
  .menu-item--lg .menu-item__name{font-size:var(--km-fs-body)}
  .menu-item--lg .menu-item__price{font-size:var(--km-fs-body)}
  .menu-item--lg .menu-item__zh{font-size:var(--km-fs-body-sm);margin-left:8px}
  .takehome__cta .btn,.orders__actions .btn{width:100%}
  .quote-block blockquote{font-size:22px}
}
@media (max-width:400px){
  :root{--km-gutter-lg:18px}
  .plate-strip{font-size:9px}
  .wordmark{font-size:15px}
}