/* ==========================================================================
   cat in the hat — a hawker bakery
   Golden Mile Food Centre, 505 Beach Road, #01-106, Singapore 199583

   Tokens below are transcribed VERBATIM from the design export
   (_ds/cat-in-the-hat-bakery-design-system/tokens/*.css). Where a token fails
   WCAG AA as TEXT, an "-aa" sibling is defined next to it and used for copy;
   the original token is kept so the palette stays intact.
   ========================================================================== */

/* --------------------------------------------------------------------------
   tokens/colors.css  — sampled from the stall's own photography
   -------------------------------------------------------------------------- */
:root {
  /* ---- Paper & plate: the warm off-whites the brand actually prints on ---- */
  --paper: #fbf7f0;
  --paper-2: #f4ede2;
  --paper-3: #ebe1d1;
  --plate: #f0eae3;
  --white: #ffffff;

  /* ---- Ink: browned-butter neutrals, never grey-blue ---- */
  --ink: #2a2521;
  --ink-2: #5c5147;
  --ink-3: #8c8075;
  --rule: #e2d8c9;
  --rule-strong: #cdbfa9;

  /* AA-safe muted ink. --ink-3 (#8c8075) is 3.60:1 on --paper and 3.30:1 on
     --paper-2 — it fails AA for text at every size used here. --ink-3-aa keeps
     the same warm brown-grey but measures 5.07:1 on --paper and 4.65:1 on
     --paper-2. All muted COPY uses --ink-3-aa; --ink-3 is retained above for
     palette fidelity only. */
  --ink-3-aa: #74685d;

  /* ---- Marigold: the signboard frame. The one loud colour in the system ---- */
  --marigold-700: #9a6210;
  --marigold-600: #c07c15;
  --marigold-500: #e4a02a;
  --marigold-400: #eeb653;
  --marigold-300: #f0c878;
  --marigold-100: #f9e8c6;

  /* Button hover fill. --marigold-600 with ink on top is 4.43:1 — a hair under
     AA. --marigold-600-aa is the same hue one step lighter and measures 4.79:1
     with --ink, so the hover state stays readable. */
  --marigold-600-aa: #c58318;

  /* ---- Chalkboard: the menu boards and price cards ---- */
  --chalkboard: #1b1d1b;
  --chalkboard-2: #2c302c;
  --chalk: #f4f1e8;
  --chalk-dim: #b9b6a9;

  /* ---- Bake colours: pulled from the products themselves ---- */
  --lemon: #f1ce29;
  --canele: #713a1e;
  --wood: #886748;
  --kraft: #ae8e71;
  --pistachio: #a8b458;
  --raspberry: #c65b6b;
  --navy: #292b4e;
  --led-red: #ff3b18;

  /* ---- Printed-notice tints ---- */
  --tint-coral: #f2d9ce;
  --tint-sage: #dde3d4;
  --tint-tan: #f3e4cb;

  /* ================= SEMANTIC ALIASES ================= */
  --surface-page: var(--paper);
  --surface-card: var(--paper-2);
  --surface-sunk: var(--paper-3);
  --surface-plate: var(--plate);
  --surface-inverse: var(--chalkboard);
  --surface-brand: var(--marigold-500);
  --surface-brand-soft: var(--marigold-100);

  --text-body: var(--ink);
  --text-muted: var(--ink-2);
  --text-faint: var(--ink-3-aa);
  --text-link: var(--marigold-700);      /* 4.76:1 on --paper */
  --text-link-hover: var(--canele);      /* 8.34:1 on --paper */
  --text-on-brand: var(--ink);           /* 6.76:1 on --marigold-500 */
  --text-on-inverse: var(--chalk);       /* 15.02:1 on --chalkboard */
  --text-price: var(--ink);

  --border-hairline: var(--rule);
  --border-strong: var(--rule-strong);
  --border-brand: var(--marigold-500);
  --focus-ring: var(--marigold-600);     /* 3.20:1 on --paper */

  --status-success: #6e7a2e;
  --status-warning: var(--marigold-600);
  --status-danger: #b4472f;              /* 5.06:1 on --paper */
  --status-info: var(--navy);

  /* --------------------------- tokens/typography.css --------------------- */
  --font-display: 'Young Serif', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Mulish', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-chalk: 'Gochi Hand', 'Bradley Hand', cursive;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  --text-2xs: 0.6875rem;  /* 11px */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md: 1.125rem;    /* 18px */
  --text-lg: 1.3125rem;   /* 21px */
  --text-xl: 1.625rem;    /* 26px */
  --text-2xl: 2.0625rem;  /* 33px */
  --text-3xl: 2.625rem;   /* 42px */
  --text-4xl: 3.375rem;   /* 54px */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-display: 1.06;
  --leading-tight: 1.18;
  --leading-snug: 1.32;
  --leading-body: 1.58;
  --leading-loose: 1.72;

  --tracking-tight: -0.015em;
  --tracking-sign: 0.02em;
  --tracking-caps: 0.14em;
  --tracking-caps-wide: 0.22em;

  /* ----------------------------- tokens/spacing.css ---------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --gutter: var(--space-6);
  --gutter-lg: var(--space-12);
  --measure: 62ch;
  --container: 1180px;
  --section-y: var(--space-24);

  /* ------------------------------ tokens/shape.css ----------------------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --border-width: 1px;
  --border-width-thick: 3px;
  --hairline: var(--border-width) solid var(--border-hairline);
  --frame-brand: var(--border-width-thick) solid var(--marigold-500);

  /* --------------------------- tokens/elevation.css ---------------------- */
  --shadow-card: 0 1px 1px rgba(42, 37, 33, 0.05), 0 8px 20px -14px rgba(42, 37, 33, 0.22);
  --shadow-lifted: 0 2px 2px rgba(42, 37, 33, 0.06), 0 18px 36px -18px rgba(42, 37, 33, 0.28);
  --shadow-chalk-text: 0 0 1px rgba(244, 241, 232, 0.55);

  /* ----------------------------- tokens/motion.css ----------------------- */
  --dur-instant: 90ms;
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-hover: color var(--dur-fast) var(--ease-out),
                      background-color var(--dur-fast) var(--ease-out),
                      border-color var(--dur-fast) var(--ease-out),
                      box-shadow var(--dur-fast) var(--ease-out);

  /* Section rhythm, page-level */
  --pad-page-y: 96px;
}

/* Chalkboard scope: flip the neutrals for any board-styled block. */
[data-surface='chalkboard'] {
  --surface-page: var(--chalkboard);
  --surface-card: var(--chalkboard-2);
  --text-body: var(--chalk);
  --text-muted: var(--chalk-dim);
  --text-faint: var(--chalk-dim);
  --border-hairline: #3d423c;
  --border-strong: #565c53;
  --text-price: var(--chalk);
  --text-link: var(--marigold-300);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--weight-regular) var(--text-base) / var(--leading-body) var(--font-sans);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: var(--text-link); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--marigold-300); transition: var(--transition-hover); }
a:hover { color: var(--text-link-hover); text-decoration-color: currentColor; }
[data-surface='chalkboard'] a { color: var(--marigold-300); text-decoration-color: rgba(240, 200, 120, 0.55); }
[data-surface='chalkboard'] a:hover { color: var(--marigold-100); text-decoration-color: currentColor; }
::selection { background: var(--marigold-300); color: var(--ink); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
[data-surface='chalkboard'] :focus-visible { outline-color: var(--marigold-300); }

/* Clipped rather than parked at left:-9999px, so nothing ever sits outside the
   viewport and `overflow-x: hidden` never has to rescue the layout. */
.skip-link {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  background: var(--chalkboard); color: var(--chalk);
  padding: 14px 20px; font-weight: var(--weight-semibold); text-decoration: none;
}
.skip-link:focus {
  position: fixed; left: 0; top: 0; z-index: 200;
  width: auto; height: auto; overflow: visible; clip: auto; clip-path: none;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter-lg);
}
.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: var(--leading-snug);
}
.eyebrow--faint { color: var(--ink-3-aa); font-size: var(--text-2xs); }
[data-surface='chalkboard'] .eyebrow,
[data-surface='chalkboard'] .eyebrow--faint { color: var(--chalk-dim); }

.lede { font-size: var(--text-md); line-height: var(--leading-loose); color: var(--ink-2); }

/* ==========================================================================
   Header — a plain, non-sticky bar (a hawker stall has no floating chrome)
   ========================================================================== */
.site-header { background: var(--paper); border-bottom: var(--hairline); }
.hdr {
  min-height: 76px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand img { height: 42px; width: auto; }
.brand-names { display: flex; flex-direction: column; gap: 3px; }
.brand-name { font-size: var(--text-lg); letter-spacing: var(--tracking-sign); line-height: 1; }
.brand-sub {
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps-wide); text-transform: uppercase;
  color: var(--ink-2); line-height: 1;
}
.nav-links { display: flex; align-items: center; gap: 30px; font-size: var(--text-base); }
.nav-links a {
  text-decoration: none; color: var(--ink);
  border-bottom: 3px solid transparent; padding-bottom: 3px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover { border-bottom-color: var(--marigold-300); color: var(--ink); }
.nav-links a[aria-current='page'] { border-bottom-color: var(--marigold-500); }

.nav-toggle {
  display: none; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 16px;
  background: var(--paper-2); border: var(--border-width) solid var(--rule-strong);
  border-radius: var(--radius-md);
  font: var(--weight-semibold) var(--text-base) / 1 var(--font-sans);
  letter-spacing: var(--tracking-sign); color: var(--ink); cursor: pointer;
}
.nav-toggle .bars { display: inline-flex; flex-direction: column; gap: 3px; }
.nav-toggle .bars span { display: block; width: 17px; height: 2px; background: var(--ink); }

/* Drawer — hidden IN PLACE with opacity/visibility, never translateX
   (an off-screen transformed drawer creates horizontal overflow at phone widths). */
.nav-backdrop {
  position: fixed; inset: 0; z-index: 60; background: rgba(27, 29, 27, 0.5);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base) var(--ease-out);
}
.nav-backdrop[data-open='true'] { opacity: 1; visibility: visible; }
.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(320px, 86vw);
  background: var(--paper); border-left: var(--border-width-thick) solid var(--marigold-500);
  padding: 18px 24px 28px; display: flex; flex-direction: column;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base) 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 { height: 40px; width: auto; }
.drawer-close {
  background: none; border: 0; font-size: 30px; line-height: 1; color: var(--ink-2);
  cursor: pointer; padding: 8px 12px; min-height: 44px; min-width: 44px;
}
.drawer-link {
  display: block; padding: 14px 2px; font-size: var(--text-md);
  letter-spacing: var(--tracking-sign); color: var(--ink); text-decoration: none;
  border-bottom: var(--hairline);
}
.drawer-link[aria-current='page'] { border-bottom: 3px solid var(--marigold-500); }
.drawer-foot { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.drawer-foot .btn { width: 100%; }
.drawer-note { font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--ink-3-aa); }

/* ==========================================================================
   Buttons — ink on marigold, never white on marigold
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 52px; padding: 15px 28px;
  font: var(--weight-semibold) var(--text-md) / 1.1 var(--font-sans);
  letter-spacing: var(--tracking-sign);
  text-decoration: none; cursor: pointer;
  border: var(--border-width) solid transparent; border-radius: var(--radius-md);
  transition: var(--transition-hover), transform var(--dur-instant) var(--ease-out);
}
.btn--primary { background: var(--marigold-500); border-color: var(--marigold-500); color: var(--text-on-brand); }
.btn--primary:hover { background: var(--marigold-600-aa); border-color: var(--marigold-600-aa); color: var(--ink); }
.btn--primary:active { transform: translateY(1px); }
.btn--secondary { background: var(--paper-2); border-color: var(--rule-strong); color: var(--ink); }
.btn--secondary:hover { background: var(--marigold-100); border-color: var(--marigold-400); color: var(--ink); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--paper); border-top: var(--hairline); }
.footer-grid {
  padding-top: 64px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; align-items: start;
}
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-brand img { height: 46px; width: auto; align-self: flex-start; }
.footer-wordmark { display: flex; flex-direction: column; gap: 6px; }
.footer-wordmark .name { font-size: var(--text-lg); letter-spacing: var(--tracking-sign); line-height: 1; }
.footer-wordmark .sub {
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps-wide); text-transform: uppercase; color: var(--ink-2);
}
.footer-col { display: flex; flex-direction: column; gap: 10px; font-size: var(--text-base); line-height: var(--leading-body); color: var(--ink-2); }
.footer-col .head {
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3-aa);
}
.footer-col address { font-style: normal; }
.footer-bottom {
  margin-top: 48px; border-top: var(--hairline);
  padding: 20px 0 24px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px;
}
.footer-bottom .copy { font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--ink-3-aa); }
.footer-bottom .stamp {
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3-aa);
}
/* Sitemap row — every page reachable from every footer (house requirement). */
.footer-sitemap { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-sitemap a {
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--ink-3-aa); text-decoration-color: var(--rule-strong);
}
.footer-sitemap a:hover { color: var(--canele); }

/* ==========================================================================
   Home
   ========================================================================== */
/* The canvas fixes this band at 500px on a 1280px frame — a 2.56:1 crop of the
   storefront. Holding 500px at 1900px would letterbox it to 3.8:1 and cut the
   display case and the queue counter out of frame, so the band grows with the
   viewport and keeps roughly the canvas's crop at every width. */
.hero-photo { overflow: hidden; height: clamp(300px, 39vw, 740px); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }

.hero-band { border-bottom: var(--hairline); }
.hero-band .container {
  padding-top: 44px; padding-bottom: 48px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 72px;
}
.hero-copy { display: flex; flex-direction: column; gap: 18px; max-width: 680px; }
.hero-copy h1 {
  font-size: clamp(34px, 4.4vw, 46px);
  line-height: var(--leading-display);
  text-wrap: balance;
}
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 8px; }
.hero-hours {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3-aa);
}

.queue-strip {
  flex: none; margin-top: 6px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  border: var(--border-width) solid var(--rule-strong); padding: 18px 24px 16px;
}
.queue-strip .label {
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-2);
}
/* 44px LED digits: --led-red on --paper is 3.34:1 — passes AA for large text (3:1). */
.queue-strip .num {
  font-family: var(--font-mono); font-weight: var(--weight-bold);
  font-size: 44px; line-height: 1; letter-spacing: 0.08em; color: var(--led-red);
  font-variant-numeric: tabular-nums;
}
.queue-strip .note { font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--ink-3-aa); }

.story { padding-block: var(--pad-page-y); }
.story .grid { display: grid; grid-template-columns: 0.85fr 1fr; gap: 72px; align-items: center; }
.story figure { margin: 0; }
/* height:auto is REQUIRED — the width/height HTML attributes are applied as
   presentational hints, and an explicit height would silently defeat aspect-ratio. */
.story img {
  width: 100%; height: auto; aspect-ratio: 27 / 25; object-fit: cover;
  border-radius: var(--radius-lg); border: var(--hairline);
}
.story .copy { display: flex; flex-direction: column; gap: 20px; max-width: 52ch; }
.story h2 { font-size: clamp(28px, 3.2vw, 34px); text-wrap: balance; }
.story .more { font-size: var(--text-base); width: fit-content; }

.board { background: var(--chalkboard); color: var(--chalk); }
.board .container { padding-block: 88px; display: flex; flex-direction: column; gap: 44px; }
.board-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.board-head .copy { display: flex; flex-direction: column; gap: 18px; max-width: 56ch; }
.board-head h2 { font-size: clamp(28px, 3.2vw, 34px); color: var(--chalk); text-wrap: balance; }
.board-head p { font-size: var(--text-md); line-height: var(--leading-loose); color: var(--chalk-dim); }
.board-head .more { flex: none; font-size: var(--text-base); }

.chalk-tiles {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 40px;
  border-top: var(--border-width) solid #3d423c; padding-top: 28px;
}
.chalk-tile { display: flex; flex-direction: column; gap: 8px; }
.chalk-tile .name {
  font-family: var(--font-chalk); font-size: 22px; line-height: 1.28;
  color: var(--chalk); text-shadow: var(--shadow-chalk-text);
}
.chalk-tile .price {
  font-family: var(--font-chalk); font-size: 34px; line-height: 1;
  color: var(--marigold-300); text-shadow: var(--shadow-chalk-text);
}
.chalk-tile .flag {
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--chalk-dim);
}

/* ==========================================================================
   Menu
   ========================================================================== */
.page-head .container { padding-top: 80px; padding-bottom: 52px; }
.page-head .row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 48px;
  border-bottom: var(--hairline); padding-bottom: 36px;
}
.page-head .copy { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.page-head h1 { font-size: clamp(36px, 5vw, 54px); line-height: var(--leading-display); text-wrap: balance; }
.page-head .hours {
  flex: none; font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--ink-3-aa); text-align: right; line-height: 1.9;
}

.top-sellers .container { padding-bottom: 88px; }
.top-sellers .label { display: block; margin-bottom: 24px; }
.card-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 28px; align-items: start; }

.product-card {
  background: var(--paper-2);
  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.product-card .shot { position: relative; overflow: hidden; background: var(--paper-3); aspect-ratio: 1 / 1; }
.product-card .shot img { width: 100%; height: 100%; object-fit: cover; }
.product-card .body { padding: var(--space-4) var(--space-5) var(--space-5); }
.product-card .row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.product-card .name { font-size: var(--text-md); font-weight: var(--weight-medium); letter-spacing: var(--tracking-sign); }
.product-card .price { font-size: var(--text-md); font-weight: var(--weight-semibold); white-space: nowrap; }
.product-card .note { margin-top: 4px; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--ink-2); }
.product-card .tag {
  display: inline-block; margin-top: var(--space-3);
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--tint-tan); border: var(--border-width) solid var(--rule-strong);
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-2);
}

.menu-body .container { padding-bottom: 104px; }
.menu-body .grid { display: grid; grid-template-columns: 1fr 360px; gap: 80px; align-items: start; }
.menu-cols { display: flex; flex-direction: column; gap: 56px; }
.menu-group { display: flex; flex-direction: column; gap: 6px; }
.menu-group h2 { margin-bottom: 14px; font-size: var(--text-xl); }

.menu-row {
  display: flex; width: 100%; align-items: baseline; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--border-hairline);
}
.menu-row .item { flex: 0 1 auto; }
.menu-row .name { font-size: var(--text-md); font-weight: var(--weight-medium); letter-spacing: var(--tracking-sign); }
.menu-row .note { display: block; margin-top: 2px; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--ink-3-aa); }
.menu-row .leader { flex: 1 1 auto; min-width: 24px; position: relative; top: -4px; border-bottom: 1px dotted var(--border-strong); }
.menu-row .price { flex: 0 0 auto; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-price); }
/* Sold out — the design system's own spec: "--status-danger text with a
   strikethrough price. Honest, not apologetic." The export's MenuRow also dimmed
   the whole row to 55% opacity, which drops the item name to 3.6:1 on --paper and
   fails AA; the name is muted to --ink-2 (7.30:1) instead, which reads as the same
   state without making it unreadable. */
.menu-row.is-sold-out .name { color: var(--ink-2); }
.menu-row.is-sold-out .price { color: var(--ink-2); text-decoration: line-through; }
.menu-row .sold-out {
  flex: 0 0 auto; font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--status-danger);   /* #b4472f on #fbf7f0 = 5.16:1 */
}

.menu-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; padding-top: 4px; }
.menu-cta a.plain { font-size: var(--text-base); }

.menu-aside { display: flex; flex-direction: column; gap: 20px; }
.menu-aside img {
  width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: cover;
  border-radius: var(--radius-lg); border: var(--hairline);
}
.menu-aside p { font-size: var(--text-base); line-height: var(--leading-body); color: var(--ink-2); }
.menu-aside .block { border-top: var(--hairline); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }

/* ==========================================================================
   About
   ========================================================================== */
.about-head .container { padding-top: 84px; padding-bottom: 64px; }
.about-head .copy { max-width: 940px; display: flex; flex-direction: column; gap: 20px; }
.about-head h1 { font-size: clamp(36px, 5vw, 54px); line-height: var(--leading-display); text-wrap: balance; }

/* Same reasoning as .hero-photo: the canvas's 520px band is a 2.46:1 crop on a
   1280px frame, so the band scales rather than letterboxing on wide screens. */
.band-photo { overflow: hidden; height: clamp(300px, 41vw, 780px); }
.band-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }

.about-body .container { padding-top: 88px; padding-bottom: 96px; }
.about-body .grid { display: grid; grid-template-columns: 1fr 0.8fr; gap: 80px; align-items: start; }
.about-prose {
  max-width: var(--measure); display: flex; flex-direction: column; gap: 22px;
  font-size: var(--text-md); line-height: var(--leading-loose); color: var(--ink-2);
}
.about-prose a { font-size: var(--text-base); width: fit-content; }
.pull {
  border-left: var(--border-width-thick) solid var(--marigold-500);
  padding: 4px 0 4px 28px; display: flex; flex-direction: column; gap: 16px;
}
.pull .quote {
  font-family: var(--font-display); font-size: var(--text-xl);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight);
  color: var(--ink); text-wrap: balance;
}
.pull p { font-size: var(--text-base); line-height: var(--leading-body); color: var(--ink-2); }

.stats { background: var(--chalkboard); color: var(--chalk); }
.stats .container { padding-block: 80px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.stat { display: flex; flex-direction: column; gap: 12px; }
.stat .val {
  font-family: var(--font-chalk); font-size: 44px; line-height: 1;
  color: var(--chalk); text-shadow: var(--shadow-chalk-text);
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-head .container { padding-top: 80px; padding-bottom: 56px; }
.contact-head .copy { max-width: 860px; display: flex; flex-direction: column; gap: 16px; }
.contact-head h1 { font-size: clamp(34px, 4.6vw, 54px); line-height: var(--leading-display); text-wrap: balance; }

.contact-body .container { padding-bottom: 96px; }
.contact-body .grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items: start; }
.contact-cols { display: flex; flex-direction: column; gap: 32px; }
.contact-block { display: flex; flex-direction: column; gap: 12px; }
.contact-block + .contact-block { border-top: var(--hairline); padding-top: 26px; }
.contact-block address { font-style: normal; font-size: var(--text-md); line-height: var(--leading-loose); color: var(--ink); }
.contact-block .link { font-size: var(--text-base); width: fit-content; }

.hours-grid { display: grid; grid-template-columns: auto 1fr; gap: 10px 28px; font-size: 17px; line-height: 1.5; }
.hours-grid .day {
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-2); padding-top: 5px;
}
.hours-grid .val { color: var(--ink); }
.hours-grid .val.closed { color: var(--ink-3-aa); }
.hours-grid .val small { display: block; margin-top: 4px; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--ink-3-aa); }

.reach { display: flex; flex-direction: column; gap: 9px; font-size: 17px; }
.reach .pending { color: var(--ink-2); }
.reach .pending b { font-weight: var(--weight-semibold); color: var(--ink); }
.contact-block .fineprint { margin-top: 6px; font-size: var(--text-base); line-height: var(--leading-body); color: var(--ink-2); }

.map-wrap { display: flex; flex-direction: column; gap: 12px; }
.map-frame {
  width: 100%; height: 470px;
  border: var(--border-width) solid var(--rule-strong); border-radius: var(--radius-lg);
  display: block;
}
.map-note { font-size: 15px; line-height: var(--leading-snug); color: var(--ink-3-aa); }

.queue { background: var(--chalkboard); color: var(--chalk); }
.queue .container { padding-block: 80px; display: grid; grid-template-columns: 1fr 0.7fr; gap: 72px; align-items: start; }
.queue-copy { display: flex; flex-direction: column; gap: 26px; }
.queue-copy h2 { font-size: clamp(28px, 3.2vw, 34px); color: var(--chalk); }
.steps { display: flex; flex-direction: column; gap: 16px; }
.step { display: flex; align-items: baseline; gap: 18px; }
.step .n {
  flex: none; border: var(--border-width) solid #3d423c; border-radius: var(--radius-pill);
  padding: 5px 13px; font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--chalk-dim);
}
.step .txt { font-size: 17px; line-height: 1.5; color: var(--chalk); }

.led-panel {
  background: #0f110f; border: var(--border-width) solid #3d423c;
  padding: 28px 34px 26px; display: flex; flex-direction: column; gap: 12px;
}
.led-panel .label {
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--chalk-dim);
}
/* --led-red on #0f110f is 5.32:1. */
.led-panel .num {
  font-family: var(--font-mono); font-weight: var(--weight-bold);
  font-size: clamp(56px, 7vw, 86px); line-height: 0.9; letter-spacing: 0.08em;
  color: var(--led-red); font-variant-numeric: tabular-nums;
}
.led-panel .note { font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--chalk-dim); }

/* ==========================================================================
   Responsive — verified at 360 / 414 / 768 / 1280 / 1900
   ========================================================================== */
@media (max-width: 1100px) {
  .story .grid { grid-template-columns: 1fr; gap: 40px; }
  .story figure { max-width: 520px; }
  .menu-body .grid { grid-template-columns: 1fr; gap: 48px; }
  .menu-aside { max-width: 520px; }
  .about-body .grid { grid-template-columns: 1fr; gap: 44px; }
  .contact-body .grid { grid-template-columns: 1fr; gap: 44px; }
  .map-frame { height: 400px; }
  .queue .container { grid-template-columns: 1fr; gap: 44px; }
  .led-panel { max-width: 420px; }
  .card-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  /* Four footer columns get too narrow for "Golden Mile Food Centre" below ~1100px. */
  .footer-grid { grid-template-columns: 1.2fr 1fr; gap: 36px 48px; }
}

@media (max-width: 900px) {
  :root { --pad-page-y: 64px; }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .hero-band .container { flex-direction: column; gap: 32px; padding-top: 36px; padding-bottom: 40px; }
  .queue-strip { margin-top: 0; align-self: flex-start; }
  .board .container { padding-block: 64px; }
  .board-head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .chalk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 32px; }
  .page-head .container { padding-top: 56px; padding-bottom: 40px; }
  .page-head .row { flex-direction: column; align-items: flex-start; gap: 20px; padding-bottom: 28px; }
  .page-head .hours { text-align: left; }
  .top-sellers .container { padding-bottom: 60px; }
  .menu-body .container { padding-bottom: 72px; }
  .menu-cols { gap: 44px; }
  .about-head .container { padding-top: 56px; padding-bottom: 44px; }
  .about-body .container { padding-top: 56px; padding-bottom: 64px; }
  .stats .container { padding-block: 56px; gap: 34px; }
  .contact-head .container { padding-top: 56px; padding-bottom: 40px; }
  .contact-body .container { padding-bottom: 64px; }
  .queue .container { padding-block: 56px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; padding-top: 48px; }
  .footer-bottom { margin-top: 36px; }
}

@media (max-width: 720px) {
  .container { padding-inline: var(--gutter); }
  .stats .container { grid-template-columns: 1fr; gap: 28px; }
  .card-grid { grid-template-columns: 1fr; gap: 22px; }
  .product-card { max-width: 460px; }
  .menu-cta { gap: 18px; }
  .menu-cta .btn { width: 100%; }
  .map-frame { height: 320px; }
}

@media (max-width: 560px) {
  .chalk-tiles { grid-template-columns: 1fr; gap: 26px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-actions { gap: 16px; }
  .hero-actions .btn { width: 100%; }
  .brand img { height: 38px; }
  .brand-name { font-size: var(--text-base); }
  .brand-sub { font-size: 9px; letter-spacing: 0.18em; }
  .nav-toggle { padding: 0 13px; }
  .menu-row { flex-wrap: wrap; gap: 4px var(--space-3); }
  .menu-row .item { flex: 1 1 100%; }
  .menu-row .leader { min-width: 12px; }
  .queue-strip { width: 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (max-width: 400px) {
  .nav-toggle .bars { display: none; }
  /* The story figure keeps its source ratio (930x861) at every width so the
     baker's hands and face are never cropped out of frame. */
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .btn:active { transform: none; }
}