/* =============================================================================
   My Aunty's Bakery — demo site stylesheet
   Design source: Claude Design export "aunty" —
     _ds/my-aunty-s-bakery-design-system-34672f8e…/tokens/*.css + base.css,
     and the four canvases Home.dc.html / Menu.dc.html / About.dc.html /
     Contact.dc.html (plus "Hero directions.dc.html", art direction only).
   The token blocks below are encoded VERBATIM from the export's tokens/*.css.
   Legibility- and AA-safe variants are declared AFTER them, each with a comment
   recording the measured ratio (or the reason) so the original token is never
   silently overwritten.
   ============================================================================= */

/* ---------- tokens/colors.css (verbatim) ---------- */
:root{
  /* Signboard red — the one true brand colour */
  --red-500:#e51b1f;  /* OBSERVED: hand-painted stall signboard, lit lightbox */
  --red-600:#c4161b;  /* OBSERVED-adjacent: deepened for small text on cream */
  --red-700:#9c1116;  /* RECOMMENDED: pressed states, dense red type */
  --red-400:#f82838;
  --red-100:#fbe4e2;
  --red-050:#fdf3ef;  /* OBSERVED: blush-cream ground of their CNY graphic */

  /* Warm neutrals — butter, flour, parchment */
  --cream-050:#fffcf6;
  --cream-100:#fbf5ea;  /* default page ground */
  --cream-200:#f4ebd9;
  --cream-300:#e9ddc5;  /* hairlines, dividers */
  --cream-400:#d8c8a9;
  --paper:#ffffff;      /* OBSERVED: menu cards, price tags, lightbox signboard */

  /* Ink — warm near-black, never pure #000 */
  --ink-900:#241c17;
  --ink-700:#4a3a30;
  --ink-500:#7a6656;
  --ink-300:#a99781;
  --ink-100:#cfc0aa;

  /* Bake tones — sampled from the pastries themselves */
  --crumb-100:#f2e2c2;
  --crust-300:#d9a86f;
  --crust-500:#a97050;
  --crust-700:#6b3c22;

  /* Local-flavour accents */
  --pandan-500:#8fbf3f;
  --pandan-700:#4e6b2a;
  --pandan-100:#eaf3d8;
  --yam-500:#4818a0;
  --yam-300:#8d6fc4;
  --yam-100:#ece6f7;
  --orhnee-400:#b0846a;
  --milo-700:#4a2a18;
  --gingko-400:#d4d97e;

  /* Semantic aliases */
  --surface-page:var(--cream-100);
  --surface-page-alt:var(--cream-200);
  --surface-card:var(--paper);
  --surface-tag:var(--paper);
  --surface-blush:var(--red-050);
  --surface-ink:var(--ink-900);
  --surface-brand:var(--red-500);
  --surface-sunk:var(--cream-200);

  --text-body:var(--ink-900);
  --text-secondary:var(--ink-700);
  --text-muted:var(--ink-500);
  --text-faint:var(--ink-300);
  --text-brand:var(--red-600);
  --text-on-brand:var(--paper);
  --text-on-ink:var(--cream-100);
  --text-price:var(--ink-900);
  --text-link:var(--red-600);
  --text-link-hover:var(--red-700);

  --border-hairline:var(--cream-300);
  --border-strong:var(--ink-100);
  --border-brand:var(--red-500);
  --border-on-ink:rgba(255,252,246,.18);

  --accent-brand:var(--red-500);
  --accent-brand-hover:var(--red-600);
  --accent-brand-press:var(--red-700);
  --accent-local:var(--pandan-500);
  --accent-festive:var(--yam-500);

  --status-fresh:var(--pandan-700);
  --status-fresh-bg:var(--pandan-100);
  --status-soldout:var(--ink-500);
  --status-soldout-bg:var(--cream-200);
  --status-closed:var(--red-600);
  --status-closed-bg:var(--red-100);

  --focus-ring:var(--red-500);
  --focus-ring-offset:var(--cream-050);
  --overlay-scrim:rgba(36,28,23,.52);
  --overlay-photo:linear-gradient(180deg,rgba(36,28,23,0) 0%,rgba(36,28,23,.06) 40%,rgba(36,28,23,.62) 100%);

  --whatsapp:#25d366;  /* kept as a token for reference; see BUTTONS note below */
}

/* ---------- tokens/fonts.css (stacks verbatim; the export's @import is
     replaced by one <link> per family in each page head, per house rule) ---- */
:root{
  --font-signboard:'Baloo 2','Trebuchet MS',system-ui,sans-serif;
  --font-serif-display:'Newsreader','Iowan Old Style',Georgia,serif;
  --font-sans-text:'Hanken Grotesk','Avenir Next','Helvetica Neue',sans-serif;
  --font-hand:'Caveat','Bradley Hand',cursive;
  --font-cjk-serif:'Noto Serif SC','Songti SC','Source Han Serif SC',serif;
  --font-mono:ui-monospace,'SFMono-Regular','Menlo',monospace;
}

/* ---------- tokens/typography.css (verbatim) ---------- */
:root{
  --fs-display-xl:clamp(2.75rem,6vw,4.75rem);
  --fs-display-lg:clamp(2.125rem,4.4vw,3.25rem);
  --fs-h1:2.5rem;
  --fs-h2:1.875rem;
  --fs-h3:1.375rem;
  --fs-h4:1.125rem;
  --fs-lead:1.1875rem;
  --fs-body:1.0625rem;
  --fs-body-sm:.9375rem;
  --fs-caption:.8125rem;
  --fs-eyebrow:.75rem;
  --fs-price:1.0625rem;
  --fs-price-lg:1.375rem;
  --fs-tag:1.125rem;

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

  --lh-tight:1.04;--lh-display:1.1;--lh-heading:1.22;
  --lh-snug:1.4;--lh-body:1.62;--lh-loose:1.75;

  --ls-display:-.02em;--ls-heading:-.01em;--ls-body:0em;
  --ls-eyebrow:.16em;  /* OBSERVED: their red all-caps menu categories */
  --ls-price:.04em;    /* OBSERVED: tracked bold prices on the menu card */
  --ls-wordmark:-.01em;

  --type-wordmark:var(--fw-semibold) var(--fs-display-lg)/var(--lh-tight) var(--font-signboard);
  --type-display:var(--fw-regular) var(--fs-display-xl)/var(--lh-display) var(--font-serif-display);
  --type-h1:var(--fw-regular) var(--fs-h1)/var(--lh-heading) var(--font-serif-display);
  --type-h2:var(--fw-regular) var(--fs-h2)/var(--lh-heading) var(--font-serif-display);
  --type-h3:var(--fw-medium) var(--fs-h3)/var(--lh-heading) var(--font-serif-display);
  --type-h4:var(--fw-semibold) var(--fs-h4)/var(--lh-snug) var(--font-sans-text);
  --type-lead:var(--fw-regular) var(--fs-lead)/var(--lh-body) var(--font-sans-text);
  --type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans-text);
  --type-body-sm:var(--fw-regular) var(--fs-body-sm)/var(--lh-snug) var(--font-sans-text);
  --type-caption:var(--fw-regular) var(--fs-caption)/var(--lh-snug) var(--font-sans-text);
  --type-eyebrow:var(--fw-bold) var(--fs-eyebrow)/1.2 var(--font-sans-text);
  --type-menu-item:var(--fw-regular) var(--fs-body)/1.5 var(--font-sans-text);
  --type-price:var(--fw-bold) var(--fs-price)/1.3 var(--font-sans-text);
  --type-tag:var(--fw-regular) var(--fs-tag)/1.25 var(--font-hand);
  --type-cjk:var(--fw-semibold) var(--fs-h3)/1.35 var(--font-cjk-serif);

  --measure-narrow:34ch;--measure-text:62ch;--measure-wide:78ch;
}

/* ---------- tokens/spacing.css (verbatim) ---------- */
:root{
  --space-0:0;--space-1:.125rem;--space-2:.25rem;--space-3:.375rem;--space-4:.5rem;
  --space-5:.75rem;--space-6:1rem;--space-7:1.25rem;--space-8:1.5rem;--space-9:2rem;
  --space-10:2.5rem;--space-11:3rem;--space-12:4rem;--space-13:5rem;--space-14:6rem;--space-15:8rem;

  --gap-inline-tight:var(--space-4);--gap-inline:var(--space-5);
  --gap-stack-tight:var(--space-4);--gap-stack:var(--space-6);
  --gap-card:var(--space-8);--gap-grid:var(--space-8);
  --pad-card:var(--space-8);--pad-card-lg:var(--space-10);
  --pad-tag:var(--space-4) var(--space-5);
  --pad-button:.6875rem 1.375rem;
  --pad-button-sm:.4375rem .875rem;
  --pad-button-lg:.9375rem 1.75rem;
  --pad-field:.6875rem .875rem;

  --section-y:clamp(3.5rem,8vw,7rem);
  --section-y-tight:clamp(2.5rem,5vw,4rem);

  --page-max:1200px;
  --page-max-narrow:760px;
  --page-gutter:clamp(1.25rem,5vw,3.5rem);
  --header-h:76px;
  --grid-min-card:260px;
  --touch-min:44px;
}

/* ---------- tokens/surfaces.css (verbatim) ---------- */
:root{
  --radius-xs:3px;--radius-sm:6px;--radius-md:10px;
  --radius-lg:18px;  /* OBSERVED: their white menu card */
  --radius-xl:28px;--radius-2xl:40px;--radius-pill:999px;--radius-circle:50%;

  --border-width-hair:1px;--border-width-thick:2px;
  --border-hair:1px solid var(--border-hairline);
  --border-card:1px solid var(--cream-300);
  --border-brand-thick:2px solid var(--red-500);
  --border-dashed:1px dashed var(--cream-400);

  --shadow-none:none;
  --shadow-tag:0 1px 2px rgba(36,28,23,.18),0 6px 14px -8px rgba(36,28,23,.22);
  --shadow-card:0 1px 1px rgba(36,28,23,.04),0 8px 24px -14px rgba(36,28,23,.20);
  --shadow-lifted:0 2px 4px rgba(36,28,23,.06),0 18px 40px -18px rgba(36,28,23,.26);
  --shadow-overlay:0 24px 64px -20px rgba(36,28,23,.38);
  --shadow-button:0 1px 0 rgba(156,17,22,.28);
  --shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.55);
  --shadow-focus:0 0 0 3px rgba(229,27,31,.28);

  --blur-panel:saturate(1.1) blur(14px);
  --glass-cream:rgba(251,245,234,.82);
  --glass-ink:rgba(36,28,23,.55);
}

/* ---------- tokens/motion.css (verbatim) ---------- */
:root{
  --dur-instant:80ms;--dur-fast:130ms;--dur-base:200ms;
  --dur-slow:320ms;--dur-slower:560ms;--dur-photo:700ms;

  --ease-standard:cubic-bezier(.2,.6,.2,1);
  --ease-out-soft:cubic-bezier(.16,.84,.44,1);
  --ease-in-out:cubic-bezier(.45,0,.55,1);
  --ease-exit:cubic-bezier(.4,0,1,1);

  --transition-colors:color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
  --transition-lift:transform var(--dur-base) var(--ease-out-soft),
    box-shadow var(--dur-base) var(--ease-out-soft);

  --lift-hover:translateY(-2px);
  --lift-press:translateY(1px);
  --scale-press:.985;
  --rotate-tag:-1.2deg;
  --rotate-tag-alt:1.6deg;
}
@media (prefers-reduced-motion:reduce){
  :root{
    --dur-instant:0ms;--dur-fast:0ms;--dur-base:0ms;
    --dur-slow:0ms;--dur-slower:0ms;--dur-photo:0ms;
    --lift-hover:none;--lift-press:none;--scale-press:1;
  }
}

/* =============================================================================
   AA- AND LEGIBILITY-SAFE VARIANTS
   The export's own tokens are left untouched above. These sit beside them and
   are what body copy actually uses. Ratios measured against the surface named.
   ============================================================================= */
:root{
  /* --fs-caption is 13px in the export. DESIGN.md sets a 16px small-text floor
     and this site serves older hawker-centre customers, so nothing on the page
     is allowed below 14px; secondary copy runs at 15–16px. */
  --fs-caption-legible:.875rem;   /* 14px — hard floor for micro-labels */
  --fs-small-legible:.9375rem;    /* 15px — footer + secondary copy */
  --fs-meta-legible:1rem;         /* 16px — step descriptions, order links */

  /* Contrast, measured (WCAG 2.x):
       --ink-900 #241c17 on --cream-100 #fbf5ea .......... 15.43:1  PASS
       --ink-700 #4a3a30 on --cream-100 ..................  9.98:1  PASS
       --ink-500 #7a6656 on --cream-100 ..................  5.01:1  PASS
       --ink-500 #7a6656 on --cream-200 #f4ebd9 ..........  4.59:1  PASS
       --ink-500 #7a6656 on --paper ......................  5.44:1  PASS
       --red-600 #c4161b on --cream-100 ..................  5.57:1  PASS
       --red-500 #e51b1f on --cream-100 ..................  4.29:1  FAILS normal text
       --paper   #ffffff on --red-500 ....................  4.66:1  PASS (button fill)
       --cream-300 #e9ddc5 on --ink-900 .................. 12.45:1  PASS
       --cream-400 #d8c8a9 on --ink-900 .................. 10.17:1  PASS
       --ink-300 #a99781 on --ink-900 ....................  5.93:1  PASS
     So: --red-500 is used ONLY as a fill, a rule, or type at >=19px bold
     (the export's own instruction). Every red running-text use is --red-600. */
  --text-brand-aa:var(--red-600);          /* 5.57:1 on cream-100 */

  /* The wordmark. The export sets it in --red-500 at 21px/600. WCAG only counts
     text as "large" at >=18.66px AND >=700 weight, so 21px/600 needs the full
     4.5:1 and --red-500 on cream measures 4.29:1 — a fail — and it drops to
     17px at phone widths where it is unambiguously small text. --red-600 is the
     export's own "small red text on cream" step and measures 5.57:1, a colour
     difference of about one shade. */
  --wordmark-ink-aa:var(--red-600);        /* 5.57:1 vs --red-500's 4.29:1 */

  /* The hero panel is --glass-cream (.82 alpha) over a photograph. Composited
     over the darkest thing that can sit behind it (--ink-900) that ground is
     rgb(212,206,196), where the panel's red eyebrow measures only 3.86:1. At
     .90 alpha the worst-case ground is rgb(230,223,213) and the eyebrow
     measures 4.57:1 — still frosted, still shows the photo through. */
  --glass-cream-aa:rgba(251,245,234,.9);   /* eyebrow 4.57:1 vs .82's 3.86:1 */

  /* The export's --overlay-photo bottoms out at .62 alpha. Over the brightest
     highlight of the About band photo that leaves cream-100 caption text at
     4.12:1 — a fail. This variant deepens the final stop to .74, which measures
     6.05:1 against that worst-case highlight. Used only where type sits
     directly on a photograph. */
  --overlay-photo-caption:linear-gradient(180deg,rgba(36,28,23,0) 0%,rgba(36,28,23,.06) 40%,rgba(36,28,23,.74) 100%);

  --z-header:30;--z-backdrop:60;--z-drawer:61;
}

/* =============================================================================
   BASE  (from the export's base.css, extended)
   ============================================================================= */
*,*::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(--surface-page);
  color:var(--text-body);
  font:var(--type-body);
  letter-spacing:var(--ls-body);
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{margin:0 0 var(--space-5);color:var(--text-body)}
h1{font:var(--type-h1);letter-spacing:var(--ls-display)}
h2{font:var(--type-h2);letter-spacing:var(--ls-heading)}
h3{font:var(--type-h3);letter-spacing:var(--ls-heading)}
h4{font:var(--type-h4)}
p{margin:0 0 var(--space-6);max-width:var(--measure-text)}

a{
  color:var(--text-link);
  text-decoration-color:rgba(196,22,27,.35);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:var(--transition-colors);
}
a:hover{color:var(--text-link-hover);text-decoration-color:currentColor}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,iframe:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
  border-radius:var(--radius-xs);
}
strong,b{font-weight:var(--fw-semibold)}
img{max-width:100%;display:block}
::selection{background:var(--red-100);color:var(--red-700)}
[lang="zh"],.mab-cjk{font-family:var(--font-cjk-serif)}

/* Hidden by moving it UP, not left: a negative-left offset is a classic source
   of leftward overflow at phone widths. position:fixed also keeps it out of the
   document's scroll box entirely. */
.skip-link{
  position:fixed;left:12px;top:12px;z-index:200;
  background:var(--ink-900);color:var(--cream-050);
  padding:14px 20px;font-weight:var(--fw-semibold);text-decoration:none;
  border-radius:var(--radius-md);
  transform:translateY(-250%);
  transition:transform var(--dur-fast) var(--ease-out-soft);
}
.skip-link:focus{transform:none}

.container{max-width:var(--page-max);margin-inline:auto}
.section{padding:var(--section-y) var(--page-gutter)}
.section--tight{padding:var(--section-y-tight) var(--page-gutter)}

/* Per-canvas section paddings, transcribed from the export's inline styles */
.pad-head{padding:var(--section-y-tight) var(--page-gutter) 0}
.pad-case{padding:clamp(32px,4vw,48px) var(--page-gutter) 0}
.pad-menu{padding:clamp(40px,5vw,64px) var(--page-gutter) var(--section-y)}
.pad-about-head{padding:var(--section-y-tight) var(--page-gutter) clamp(40px,5vw,64px)}
.pad-about-body{padding:var(--section-y) var(--page-gutter) 0}
.pad-contact-head{padding:var(--section-y-tight) var(--page-gutter) clamp(32px,4vw,48px)}
.pad-contact-body{padding:0 var(--page-gutter) var(--section-y)}

.stack-6{display:flex;flex-direction:column;gap:var(--space-6)}
.stack-9{display:flex;flex-direction:column;gap:var(--space-9)}
.stack-lg{display:flex;flex-direction:column;gap:clamp(40px,5vw,64px)}
.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;
}

.ico{flex:0 0 auto;display:block}
.ico--stroke{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* =============================================================================
   WORDMARK  (export: components/core/Wordmark.jsx — a TYPE STAND-IN.
   The real mark is hand-painted on the stall lightbox; no vector exists.)
   ============================================================================= */
.wordmark{display:inline-flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none}
.wordmark__name{
  font-family:var(--font-signboard);font-weight:600;font-size:21px;line-height:1.02;
  letter-spacing:var(--ls-wordmark);color:var(--wordmark-ink-aa);white-space:nowrap;
}
.wordmark__cjk{
  font-family:var(--font-cjk-serif);font-weight:600;font-size:16px;
  letter-spacing:.06em;line-height:1.2;color:var(--wordmark-ink-aa);
}
.wordmark--paper .wordmark__name,.wordmark--paper .wordmark__cjk{color:var(--paper)}
.wordmark--lg .wordmark__name{font-size:26px}
.wordmark--lg .wordmark__cjk{font-size:16px}
a.wordmark:hover .wordmark__name{color:var(--red-600)}
a.wordmark--paper:hover .wordmark__name,a.wordmark--paper:hover .wordmark__cjk{color:var(--cream-100)}

/* =============================================================================
   BUTTONS  (export: components/core/Button.jsx)
   NOTE — deliberate deviation from DESIGN.md's "WhatsApp button = #25D366".
   Every CTA in these canvases is the export's red primary pill carrying a
   WhatsApp glyph and the explicit words "Pre-order on WhatsApp". Red IS this
   brand's button (readme.md > Adherence rule 1). The action stays unmistakable
   because the glyph and the label both name it. Recorded in SUMMARY.md.
   ============================================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--space-4);min-height:var(--touch-min);padding:var(--pad-button);
  font-family:var(--font-sans-text);font-size:var(--fs-body);
  font-weight:var(--fw-semibold);line-height:1.2;letter-spacing:.01em;
  text-decoration:none;border-radius:var(--radius-pill);border:1px solid transparent;
  cursor:pointer;
  transition:var(--transition-colors),transform var(--dur-fast) var(--ease-out-soft),
             box-shadow var(--dur-fast) var(--ease-out-soft);
}
.btn--primary{background:var(--red-500);color:var(--text-on-brand);border-color:var(--red-500);box-shadow:var(--shadow-button)}
.btn--primary:hover{background:var(--red-600);border-color:var(--red-600);color:var(--text-on-brand)}
.btn--primary:active{background:var(--red-700);border-color:var(--red-700);transform:translateY(1px) scale(var(--scale-press))}
.btn--secondary{background:var(--paper);color:var(--ink-900);border-color:var(--cream-300)}
.btn--secondary:hover{background:var(--cream-050);border-color:var(--ink-100);color:var(--ink-900)}
.btn--sm{min-height:38px;padding:var(--pad-button-sm);font-size:var(--fs-body-sm);gap:var(--space-3)}
.btn--lg{min-height:52px;padding:var(--pad-button-lg);font-size:var(--fs-lead)}
.btn--block{display:flex;width:100%}

.arrow-link{
  display:inline-block;font-size:var(--fs-body);font-weight:var(--fw-semibold);
  color:var(--text-brand-aa);text-decoration:none;
  border-bottom:1px solid rgba(196,22,27,.3);padding-bottom:2px;
}
.arrow-link:hover{color:var(--red-700);border-bottom-color:currentColor}

/* =============================================================================
   HEADER + NAV  (export canvases: sticky cream header, --header-h 76px,
   hairline + blur appear on scroll. The one fixed element on the site.)
   ============================================================================= */
.site-header{
  position:sticky;top:0;z-index:var(--z-header);
  display:flex;align-items:center;gap:clamp(18px,3vw,40px);
  min-height:var(--header-h);padding:0 var(--page-gutter);
  background:var(--cream-100);border-bottom:1px solid transparent;
  transition:background var(--dur-base) var(--ease-out-soft),
             border-color var(--dur-base) var(--ease-out-soft);
}
.site-header[data-scrolled="true"]{
  background:rgba(251,245,234,.9);
  -webkit-backdrop-filter:var(--blur-panel);backdrop-filter:var(--blur-panel);
  border-bottom-color:var(--cream-300);
}
.site-header .wordmark{line-height:0}

.nav-links{display:flex;gap:var(--space-8);flex:1}
.navlink{
  position:relative;display:inline-flex;align-items:center;
  padding:var(--space-5) 0 var(--space-3);
  font:var(--type-body-sm);font-weight:var(--fw-medium);
  color:var(--text-secondary);text-decoration:none;
  transition:var(--transition-colors);
}
.navlink::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:transparent;transition:var(--transition-colors);
}
.navlink:hover{color:var(--ink-900)}
.navlink:hover::after{background:var(--cream-400)}
.navlink[aria-current="page"]{color:var(--text-brand-aa);font-weight:var(--fw-semibold)}
.navlink[aria-current="page"]::after{background:var(--red-500)}

.hdr-hours{
  display:inline-flex;gap:6px;align-items:center;
  font-size:var(--fs-caption-legible);color:var(--text-muted);white-space:nowrap;
}
.nav-toggle{
  display:none;align-items:center;gap:8px;
  min-height:var(--touch-min);padding:8px 14px;
  background:var(--paper);border:1px solid var(--cream-300);border-radius:var(--radius-pill);
  font-family:var(--font-sans-text);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);
  color:var(--ink-900);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(--ink-900);border-radius:2px}

/* Mobile drawer — hides 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:var(--z-backdrop);background:var(--overlay-scrim);
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-base) var(--ease-out-soft),visibility var(--dur-base) var(--ease-out-soft);
}
.nav-backdrop[data-open="true"]{opacity:1;visibility:visible}
.nav-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:var(--z-drawer);
  width:min(330px,88vw);max-width:100vw;
  background:var(--cream-050);border-left:1px solid var(--cream-300);
  box-shadow:var(--shadow-overlay);
  padding:18px 22px 28px;display:flex;flex-direction:column;overflow-y:auto;
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-base) var(--ease-out-soft),visibility var(--dur-base) var(--ease-out-soft);
}
.nav-drawer[data-open="true"]{opacity:1;visibility:visible}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.drawer-close{
  background:none;border:1px solid var(--cream-300);border-radius:var(--radius-circle);
  width:40px;height:40px;font-size:24px;line-height:1;color:var(--ink-700);cursor:pointer;
}
.drawer-link{
  display:block;padding:15px 2px;
  font-family:var(--font-serif-display);font-size:20px;line-height:1.2;
  color:var(--ink-900);text-decoration:none;border-bottom:1px solid var(--cream-300);
}
.drawer-link[aria-current="page"]{color:var(--text-brand-aa)}
.drawer-meta{
  margin-top:20px;display:flex;flex-direction:column;gap:10px;
  font-size:var(--fs-small-legible);color:var(--text-muted);
}
.drawer-cta{margin-top:18px;display:grid;gap:10px}

/* =============================================================================
   SECTION HEADING  (export: components/core/SectionHeading.jsx)
   ============================================================================= */
.section-heading{display:flex;flex-direction:column;gap:var(--space-5);align-items:flex-start}
.section-heading--center{align-items:center;text-align:center;max-width:var(--measure-text);margin-inline:auto}
.eyebrow{
  font:var(--type-eyebrow);font-size:var(--fs-caption-legible);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-brand-aa);
}
.section-heading h1,.section-heading h2,.section-heading h3{margin:0}
.section-heading .lead{margin:0;font:var(--type-lead);color:var(--text-secondary);max-width:var(--measure-text)}
.heading-cjk{display:block;font:var(--type-cjk);color:var(--text-muted);margin-top:var(--space-3)}

/* =============================================================================
   CARDS, DIVIDERS, NOTICES, BADGES, TO-CONFIRM
   ============================================================================= */
.card{
  display:block;background:var(--surface-card);color:var(--ink-900);
  border-radius:var(--radius-lg);border:1px solid transparent;
  box-shadow:var(--shadow-card);padding:var(--pad-card);
}
.card--lg{padding:var(--pad-card-lg)}

.divider{border:0;border-top:1px solid var(--cream-300);margin:0}
.divider--dashed{border-top:1px dashed var(--cream-400)}

.notice{
  display:flex;align-items:center;gap:var(--space-5);
  padding:var(--space-5) var(--space-7);border-radius:var(--radius-md);
  background:var(--cream-200);color:var(--ink-900);border:1px solid var(--cream-300);
  font:var(--type-body-sm);font-size:var(--fs-meta-legible);
}
.notice > svg{color:var(--ink-700)}
.notice p{margin:0;max-width:none}

.badge{
  display:inline-flex;align-items:center;padding:.1875rem .5rem;
  border-radius:var(--radius-xs);font-family:var(--font-sans-text);
  font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);letter-spacing:.08em;
  text-transform:uppercase;line-height:1.4;white-space:nowrap;
}
.badge--soldout{background:var(--status-soldout-bg);color:var(--ink-700)}

/* The site's own "to confirm" treatment. Every unverified value keeps its
   designed slot and wears this instead of a fabricated figure. */
.to-confirm{
  display:inline-flex;align-items:center;
  padding:.125rem .4375rem;border-radius:var(--radius-xs);
  background:var(--cream-200);border:1px dashed var(--cream-400);
  font-family:var(--font-sans-text);font-size:var(--fs-caption-legible);
  font-weight:var(--fw-semibold);letter-spacing:0;text-transform:none;
  color:var(--ink-700);white-space:nowrap;
}
.to-confirm--price{font-variant-numeric:normal}

.hand{font-family:var(--font-hand);color:var(--ink-500)}

/* =============================================================================
   PHOTO FRAMES  — every card/section image has a FIXED aspect ratio with
   object-fit:cover, so no image height is ever tied to adjacent copy.
   ============================================================================= */
.photo-frame{
  border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-card);
  background:var(--cream-200);
}
.photo-frame img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out-soft)}
.photo-frame:hover img{transform:scale(1.02)}
.ratio-16-11{aspect-ratio:16/11}
.ratio-8-5{aspect-ratio:8/5}
.ratio-4-3{aspect-ratio:4/3}
.ratio-16-10{aspect-ratio:16/10}
.photo-frame--top img{object-position:center top}

.photo-caption{
  display:inline-block;margin:12px 0 0 8px;
  font-family:var(--font-hand);font-size:20px;color:var(--text-muted);
  transform:rotate(var(--rotate-tag));
}

/* =============================================================================
   HERO  (Home canvas)
   ============================================================================= */
.hero{
  position:relative;display:flex;flex-direction:column;
  min-height:clamp(600px,84vh,780px);overflow:hidden;background:var(--ink-900);
}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.hero__scrim{position:absolute;inset:0;background:var(--overlay-photo)}
.hero__spacer{flex:1 1 auto;min-height:max(20.7vw,26vh)}
.hero__panel{
  position:relative;align-self:flex-start;
  width:520px;max-width:calc(100% - 2 * var(--page-gutter));
  margin:0 var(--page-gutter) clamp(32px,5vw,56px);
  padding:30px 32px;border-radius:var(--radius-xl);
  background:var(--glass-cream-aa);
  -webkit-backdrop-filter:var(--blur-panel);backdrop-filter:var(--blur-panel);
  box-shadow:var(--shadow-lifted);
  display:flex;flex-direction:column;gap:16px;
}
.hero__panel h1{
  margin:0;font-family:var(--font-serif-display);font-weight:400;
  font-size:clamp(34px,4vw,48px);line-height:1.06;letter-spacing:var(--ls-display);
}
.hero__panel p{margin:0;font:var(--type-lead);color:var(--ink-700);max-width:46ch}
.hero__actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:2px}
.hero__hours{
  display:inline-flex;gap:7px;align-items:center;
  font-size:var(--fs-small-legible);
  /* --text-muted (--ink-500) reads 3.48:1 against the panel over a dark photo.
     --ink-700 measures 8.20:1 there and is barely a shade darker on screen. */
  color:var(--ink-700);
}

/* =============================================================================
   SPLIT SECTIONS  (Home "our story" / "from the case", About "the bakes")
   ============================================================================= */
.split{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:clamp(32px,5vw,72px);align-items:center;
}
.split--top{align-items:start}
.split__copy{display:flex;flex-direction:column;gap:var(--space-7)}
.split__copy--wide{gap:var(--space-8)}
.section--blush{background:var(--red-050)}

.teaser-rows{display:flex;flex-direction:column;gap:var(--space-3)}

/* =============================================================================
   MENU CARD  (export: MenuCategory + MenuRow — the white menu card,
   red tracked all-caps categories, bold tracked prices, no leader dots)
   ============================================================================= */
.menu-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  column-gap:clamp(36px,4vw,72px);row-gap:var(--space-9);
}
.menu-col{display:grid;gap:var(--space-9);align-content:start}
.menu-cat{display:flex;flex-direction:column;gap:var(--space-4)}
.menu-cat__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-5)}
.menu-cat__label{
  margin:0;font:var(--type-eyebrow);font-size:var(--fs-caption-legible);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-brand-aa);
}
.menu-cat__note{font:var(--type-caption);font-size:var(--fs-caption-legible);color:var(--text-muted)}
.menu-cat__rows{display:flex;flex-direction:column;gap:var(--space-3)}

.menu-row{
  display:flex;align-items:baseline;gap:var(--space-5);
  padding:var(--space-2) 0;color:var(--text-body);
}
.menu-row__main{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-4);flex:1;min-width:0}
.menu-row__name{font:var(--type-menu-item)}
.menu-row__flav{font:var(--type-body-sm);color:var(--text-muted)}
.menu-row__price{
  font:var(--type-price);letter-spacing:var(--ls-price);
  color:var(--text-price);font-variant-numeric:tabular-nums;
}
.menu-note{margin:0;font-size:var(--fs-caption-legible);color:var(--text-muted);max-width:none}

.menu-actions{
  display:flex;align-items:center;justify-content:center;gap:var(--space-6);
  flex-wrap:wrap;padding-top:var(--space-4);
}

/* =============================================================================
   HANDWRITTEN TAGS  (export: components/bakery/HandwrittenTag.jsx — the
   stall's signature device: white card, marker handwriting, small hard shadow,
   clipped on slightly off-square.)
   ============================================================================= */
.case-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--space-8);flex-wrap:wrap;padding:0 4px;
}
.case-head__hand{
  font-family:var(--font-hand);font-size:26px;line-height:1.2;
  color:var(--ink-900);transform:rotate(-1.1deg);
}
.case-head__note{font-size:var(--fs-small-legible);color:var(--text-muted)}
.case-panel{
  display:flex;align-items:flex-start;gap:var(--space-8);flex-wrap:wrap;
  padding:30px 30px 34px;background:var(--cream-200);
  border-radius:var(--radius-lg);border:1px solid var(--cream-300);
  box-shadow:var(--shadow-inset-top);
}
.tag-card{
  display:inline-flex;flex-direction:column;gap:2px;
  min-width:108px;max-width:200px;padding:10px 12px;
  background:var(--surface-tag);border-radius:var(--radius-xs);
  box-shadow:var(--shadow-tag);font-family:var(--font-hand);color:var(--ink-900);
}
.tag-card__name{font-size:19px;line-height:1.15;font-weight:500}
.tag-card__note{font-size:16px;line-height:1.15;color:var(--ink-500)}
.tag-card__price{font-size:18px;line-height:1.2;margin-top:2px}
.tag-card--soldout{color:var(--ink-500)}

/* =============================================================================
   ABOUT — full-bleed band + pull quote
   ============================================================================= */
.band{position:relative;overflow:hidden;background:var(--ink-900)}
.band img{width:100%;aspect-ratio:16/9;max-height:520px;object-fit:cover;object-position:center 42%}
.band__scrim{position:absolute;inset:0;background:var(--overlay-photo-caption)}
.band__caption{
  position:absolute;left:var(--page-gutter);bottom:22px;right:var(--page-gutter);
  font-family:var(--font-hand);font-size:22px;color:var(--cream-100);
  transform:rotate(var(--rotate-tag));
}

.pullquote{display:flex;flex-direction:column;gap:var(--space-6);align-items:center;text-align:center}
.pullquote blockquote{
  margin:0;font-family:var(--font-serif-display);font-weight:400;
  font-size:clamp(26px,3vw,38px);line-height:1.22;letter-spacing:-.01em;
  color:var(--ink-900);max-width:26ch;
}
.pullquote__attr{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  font-size:var(--fs-small-legible);color:var(--text-muted);
}

/* =============================================================================
   CONTACT — hours block, order-ahead, map, directions
   ============================================================================= */
.contact-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));
  gap:clamp(32px,5vw,64px);align-items:start;
}
.contact-col{display:flex;flex-direction:column;gap:var(--space-8)}
.contact-col--map{gap:var(--space-5)}
.card-title{margin:0;font-family:var(--font-serif-display);font-weight:400;font-size:26px;line-height:1.2}

.hours-block{display:flex;flex-direction:column;gap:var(--space-7)}
.hours-block__list{display:flex;flex-direction:column;gap:var(--space-4)}
.hours-row{display:flex;gap:var(--space-5);align-items:baseline;justify-content:space-between}
.hours-row span:first-child{font:var(--type-body);color:var(--text-body)}
.hours-row__time{font:var(--type-body);font-weight:var(--fw-semibold);text-align:right}
.hours-row__time--closed{font-weight:var(--fw-regular);color:var(--text-muted)}
.hours-block__addr{display:flex;flex-direction:column;gap:var(--space-3)}
.hours-block__addr span{
  display:flex;gap:var(--space-4);
  font:var(--type-body-sm);font-size:var(--fs-meta-legible);color:var(--text-secondary);
}
.hours-block__addr .indent{padding-left:calc(var(--space-4) + 17px)}
.hours-block__lines{display:flex;flex-direction:column;gap:var(--space-3)}
.hours-block__lines span{
  display:flex;gap:var(--space-4);align-items:center;flex-wrap:wrap;
  font:var(--type-body-sm);font-size:var(--fs-meta-legible);
}
.hours-block__lines .muted{color:var(--text-muted)}

.order-ahead{display:flex;flex-direction:column;gap:var(--space-4)}
.order-ahead__links{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:var(--fs-meta-legible);line-height:1.5}
.order-ahead__links .to-confirm{max-width:100%;white-space:normal}
.order-ahead__note{font-size:var(--fs-small-legible);color:var(--text-muted)}

.map-frame{
  position:relative;border-radius:var(--radius-xl);overflow:hidden;
  box-shadow:var(--shadow-card);background:var(--cream-200);height:360px;
}
.map-frame iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.92)}
.map-tag{position:absolute;right:14px;top:14px;transform:rotate(2.2deg)}

.steps{
  margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:clamp(20px,3vw,36px);
}
.step{display:flex;gap:14px}
.step__n{
  flex:0 0 auto;width:30px;height:30px;border-radius:var(--radius-pill);
  background:var(--red-100);color:var(--red-700);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--fs-caption-legible);font-weight:var(--fw-bold);
}
.step__t{display:flex;flex-direction:column;gap:3px}
.step__t strong{font-size:var(--fs-meta-legible);font-weight:var(--fw-semibold)}
.step__t span{font-size:var(--fs-meta-legible);line-height:1.5;color:var(--text-secondary)}

/* =============================================================================
   FOOTER
   ============================================================================= */
.site-footer{
  background:var(--ink-900);color:var(--cream-100);
  padding:var(--section-y-tight) var(--page-gutter) var(--space-8);
}
.footer-grid{
  max-width:var(--page-max);margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:clamp(28px,4vw,48px);
}
.footer-half{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:clamp(28px,4vw,48px);align-content:start;
}
.footer-brand{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.footer-brand p{margin:0;font-size:var(--fs-small-legible);color:var(--cream-300);max-width:30ch}
.footer-col{display:flex;flex-direction:column;gap:8px;font-size:var(--fs-small-legible);color:var(--cream-300)}
.footer-col address{font-style:normal;color:var(--cream-300);line-height:1.55}
.footer-head{
  font:var(--type-eyebrow);font-size:var(--fs-caption-legible);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--cream-400);
}
.footer-col a{
  display:inline-flex;gap:8px;align-items:center;color:var(--cream-050);
  text-decoration-color:rgba(255,252,246,.4);
}
.footer-col a:hover{color:var(--paper);text-decoration-color:currentColor}

.footer-bottom{
  max-width:var(--page-max);margin:var(--space-10) auto 0;
  border-top:1px solid var(--border-on-ink);padding-top:var(--space-6);
  display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;
}
.footer-bottom__cjk{font-size:var(--fs-caption-legible);color:var(--ink-300)}
.footer-sitemap{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:var(--fs-caption-legible)}
.footer-sitemap a{color:var(--cream-300);text-decoration-color:rgba(233,221,197,.4)}
.footer-sitemap a:hover{color:var(--paper)}
.footer-copy{font-size:var(--fs-caption-legible);color:var(--ink-300)}

/* =============================================================================
   RESPONSIVE — verified at 360 / 414 / 768 / 1280 / 1900
   ============================================================================= */
@media (max-width:1120px){
  .hdr-hours{display:none}
}
@media (max-width:900px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .site-header{gap:12px;justify-content:space-between}
  .site-header .wordmark{margin-right:auto}

  /* Hero, restacked. The canvas hero is a 1280-wide artboard: a landscape
     storefront photo behind a glass panel. Held at phone/tablet widths it
     crops the signboard down to "aunty's bake" — the one thing the hero has
     to show. So below 900px the photo runs full-width at its own ratio (no
     crop at all) and the same panel, same type, same shadow, sits under it
     with a 40px overlap, which keeps the panel-on-photo relationship. */
  .hero{display:block;min-height:0;overflow:visible;background:var(--cream-100)}
  .hero__img{position:static;width:100%;height:auto;aspect-ratio:1500/965;object-position:center}
  .hero__scrim,.hero__spacer{display:none}
  .hero__panel{
    position:relative;width:auto;max-width:none;
    margin:-40px var(--page-gutter) 0;padding:26px 24px;
    background:var(--cream-050);border:1px solid var(--cream-300);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }

  .card--lg{padding:var(--space-9) var(--space-8)}
  .case-panel{padding:24px 22px 26px;gap:var(--space-7)}
  .band img{aspect-ratio:16/10;max-height:420px}
}
@media (max-width:700px){
  .menu-grid{row-gap:var(--space-10)}
  .map-frame{height:320px}
  .band img{aspect-ratio:4/3;max-height:360px}
  .band__caption{font-size:19px;bottom:16px}
  .case-head__hand{font-size:23px}
  .pullquote blockquote{max-width:20ch}
}
@media (max-width:560px){
  .site-header{gap:10px}
  .wordmark__name{font-size:17px}
  .wordmark__cjk{font-size:14px}
  .site-header .btn--sm{padding:.4375rem .8125rem;gap:6px}
  .nav-toggle{padding:8px 12px;gap:7px}
  .btn--lg{width:100%;padding:.9375rem 1.25rem;font-size:var(--fs-body)}
  .hero__actions{gap:14px}
  .hero__panel{padding:22px 20px;gap:14px;margin-top:-32px}
  .menu-actions .btn--lg{width:100%}
  .case-panel{gap:var(--space-6);padding:20px 18px 22px}
  .tag-card{max-width:100%}
  .footer-bottom{gap:14px}
}
@media (max-width:390px){
  /* Only the hamburger's visible word goes; its aria-label still reads "Menu".
     The WhatsApp CTA keeps its label at every width — it is the one action that
     must never become a bare glyph. */
  .nav-toggle .label{display:none}
  .nav-toggle{padding:10px 12px}
  .case-head__note{font-size:var(--fs-caption-legible)}
}