/* ==========================================================================
   Wild Honey Pie — demo site stylesheet
   --------------------------------------------------------------------------
   Sections 1-6 are the design system's token files, transcribed VERBATIM from
   _ds/wild-honey-pie-design-system-f701797e-9d11-4c68-bdca-4e5f2d870988/tokens/
   (colors, typography, spacing, surfaces, motion, base). Values unchanged.
   Section 7 adds AA-safe variants where a token fails contrast on its own
   ground — the originals stay exactly as the design system defined them.
   Sections 8+ are the components and page layouts of the four canvases.
   ========================================================================== */

/* ── 1. colors.css ─────────────────────────────────────────────────────────
   Wild Honey Pie — colour. Every base value is sampled from the supplied shop
   photography (flour-washed walls, greaseproof paper, kraft boxes, the teak
   plaque, financier crumb, the pale-blue bread tote, ume-pink pen marks). */
:root{
  /* Paper — the dominant field. Flour wall, greaseproof, plaster. */
  --paper-00:#FDFAF5;
  --paper-05:#F5EDE1;
  --paper-10:#EEE3D3;
  --paper-20:#E2D5C0;
  --paper-30:#D3C3A9;

  /* Kraft — takeaway box, wooden shelf board, cake liner card. */
  --kraft-30:#D6B588;
  --kraft-40:#C09A6C;
  --kraft-50:#A87F52;

  /* Crust — teak signage, walnut shelving, bake colour, text. */
  --crust-50:#8A4A26;
  --crust-60:#6B4A2B;
  --crust-70:#4A3320;
  --ink-80:#2E2419;
  --ink-90:#1C1611;

  /* Honey — the single warm gold. Financier crust, glaze, drizzle. */
  --honey-30:#F0D8A6;
  --honey-40:#E0AC55;
  --honey-50:#C98A2E;
  --honey-60:#A56E1F;

  /* Umeshu — soft sage. Pesto, pistachio, the plants by the window. */
  --umeshu-30:#CBD3B9;
  --umeshu-50:#7E8F62;
  --umeshu-60:#5F6E47;

  /* Ume — the pink pen on the price cards, pickled radish in the sandos. */
  --ume-40:#DE93A2;
  --ume-50:#C2536B;

  /* Sky — the pale blue of the printed bread tote. Packaging only. */
  --sky-30:#D3E4EC;
  --sky-50:#A9C9D8;

  /* ── Semantic aliases ─────────────────────────────────────── */
  --surface-page:var(--paper-05);
  --surface-card:var(--paper-00);
  --surface-inset:var(--paper-10);
  --surface-kraft:var(--kraft-30);
  --surface-ink:var(--ink-90);
  --surface-crust:var(--crust-60);
  --surface-scrim:rgba(28,22,17,.46);

  --text-strong:var(--ink-90);
  --text-body:var(--ink-80);
  --text-muted:#6E6053;
  --text-faint:#8C7E6F;
  --text-inverse:var(--paper-00);
  --text-inverse-muted:rgba(253,250,245,.72);
  --text-accent:var(--honey-60);
  --text-link:var(--crust-50);
  --text-link-hover:var(--honey-60);

  --accent:var(--honey-50);
  --accent-hover:var(--honey-60);
  --accent-press:#8E5D18;
  --accent-quiet:var(--honey-30);

  --border-hairline:rgba(46,36,25,.14);
  --border-soft:rgba(46,36,25,.22);
  --border-strong:rgba(46,36,25,.42);
  --border-ink:var(--ink-80);
  --border-inverse:rgba(253,250,245,.28);

  --state-sold-out:var(--text-faint);
  --state-available:var(--umeshu-60);
  --state-flagged:var(--ume-50);
}

/* ── 2. typography.css ─────────────────────────────────────────────────────
   Three voices, each anchored to a real shop artefact. Serif = the wordmark
   set over photographs. Sans = signage, labels, UI. Hand = the price cards. */
:root{
  --font-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-sans:"Hanken Grotesk","Helvetica Neue",Helvetica,sans-serif;
  --font-hand:"Architects Daughter","Bradley Hand",cursive;

  --font-display:var(--font-serif);
  --font-body:var(--font-sans);
  --font-label:var(--font-sans);
  --font-price:var(--font-hand);

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

  /* Display — serif, lowercase, light. 64/80/104 are wordmark territory. */
  --size-display-xl:104px;
  --size-display-lg:80px;
  --size-display-md:56px;
  --size-display-sm:40px;
  --lh-display:0.98;
  --ls-display:0.01em;
  --ls-display-wide:0.06em;

  /* Editorial headings — serif at prose sizes. */
  --size-head-lg:32px;
  --size-head-md:26px;
  --size-head-sm:21px;
  --lh-head:1.18;

  /* Body + UI — sans. */
  --size-body-lg:18px;
  --size-body-md:16px;
  --size-body-sm:14px;
  --size-body-xs:13px;
  --lh-body:1.62;
  --lh-body-tight:1.45;

  /* Labels — sans, all caps, tracked wide. The engraved-plaque voice. */
  --size-label-md:13px;
  --size-label-sm:11px;
  --ls-label:0.16em;
  --ls-label-tight:0.09em;

  /* Hand — price cards, annotations, sold-out scrawls. */
  --size-hand-lg:22px;
  --size-hand-md:17px;
  --size-hand-sm:14px;
  --lh-hand:1.34;
}

/* ── 3. spacing.css ────────────────────────────────────────────────────────
   4px base. Generous vertical air, narrow measure: sections breathe at
   96-160px, text stays under 68ch. */
:root{
  --space-0:0px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;
  --space-40:160px;

  --gutter-page:24px;
  --gutter-page-lg:56px;
  --measure-prose:62ch;
  --measure-narrow:44ch;
  --width-content:1120px;
  --width-text:720px;

  --section-y:var(--space-24);
  --section-y-lg:var(--space-40);
  --stack-tight:var(--space-2);
  --stack-cosy:var(--space-4);
  --stack-loose:var(--space-8);
}

/* ── 4. surfaces.css ───────────────────────────────────────────────────────
   Corners are effectively square: paper, kraft and photographs have cut edges.
   Shadow is reserved for things that are literally paper resting on something. */
:root{
  --radius-0:0px;
  --radius-paper:2px;
  --radius-card:3px;
  --radius-pill:999px;

  --border-hair:1px solid var(--border-hairline);
  --border-line:1px solid var(--border-soft);
  --border-heavy:1.5px solid var(--border-ink);
  --border-dash:1px dashed var(--border-soft);
  --rule-weight:1px;
  --rule-weight-heavy:2px;

  /* A clipped paper card lifting off a wire shelf. Nothing else gets shadow. */
  --shadow-paper:0 1px 1px rgba(46,36,25,.06),0 6px 18px -12px rgba(46,36,25,.22);
  --shadow-lift:0 2px 3px rgba(46,36,25,.07),0 14px 28px -16px rgba(46,36,25,.26);
  --shadow-none:none;

  /* Protection under type set on photographs — bottom-anchored, never a box. */
  --scrim-bottom:linear-gradient(to top,rgba(28,22,17,.72) 0%,rgba(28,22,17,.34) 42%,rgba(28,22,17,0) 100%);
  --scrim-flat:linear-gradient(to top,rgba(28,22,17,.55),rgba(28,22,17,.55));
  --blur-glass:saturate(120%) blur(10px);
  --glass-paper:rgba(253,250,245,.82);

  --focus-ring:0 0 0 2px var(--paper-00),0 0 0 4px var(--honey-50);
}

/* ── 5. motion.css ─────────────────────────────────────────────────────────
   Unhurried, no bounce, no springs. Things fade and settle a few pixels;
   images warm slightly on hover. Nothing ever slides in from off-screen. */
:root{
  --ease-out:cubic-bezier(.2,.6,.2,1);
  --ease-in-out:cubic-bezier(.4,.1,.2,1);
  --dur-fast:120ms;
  --dur-base:180ms;
  --dur-slow:260ms;
  --dur-settle:420ms;
  --rise-distance:4px;
  --press-scale:.985;
  --image-hover-scale:1.018;
  --transition-ui:color var(--dur-base) var(--ease-out),background-color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out);
}

/* ── 6. base.css ───────────────────────────────────────────────────────────
   Element defaults. Colour, type, link behaviour, selection and focus. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--size-body-md);line-height:var(--lh-body);font-weight:var(--weight-regular);text-wrap:pretty;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-light);color:var(--text-strong);line-height:var(--lh-head);margin:0}
h1{font-size:var(--size-display-md);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
h2{font-size:var(--size-head-lg)}
h3{font-size:var(--size-head-md)}
h4{font-size:var(--size-head-sm)}
p{margin:0 0 1em;max-width:var(--measure-prose)}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid var(--border-soft);padding-bottom:1px;transition:var(--transition-ui)}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--honey-50)}
a:active{color:var(--accent-press)}
strong,b{font-weight:var(--weight-semibold);color:var(--text-strong)}
em{font-style:italic}
small{font-size:var(--size-body-sm);color:var(--text-muted)}
hr{border:0;border-top:var(--rule-weight) solid var(--border-hairline);margin:var(--space-8) 0}
img{max-width:100%;display:block}
figure{margin:0}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
::selection{background:var(--honey-30);color:var(--ink-90)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── 7. AA-safe variants ───────────────────────────────────────────────────
   Six design-system tokens fall below WCAG AA 4.5:1 against the ground they
   are used on. The originals above are untouched; these are what the pages
   use for text. Ratios measured against the exact ground named.

     --text-faint  #8C7E6F on --paper-05 #F5EDE1 = 3.39:1  FAILS
     --text-faint-aa #736556 on --paper-05       = 4.85:1  passes
                     #736556 on --paper-00       = 5.41:1  passes

     --text-accent (--honey-60 #A56E1F) on --paper-05 = 3.73:1  FAILS
     --text-accent-aa #8E5D18 on --paper-05           = 4.85:1  passes
                      #8E5D18 on --paper-00           = 5.41:1  passes

     --ume-50 #C2536B on --paper-05 = 3.81:1  FAILS
     --ume-aa #B34158 on --paper-05 = 4.74:1  passes
              #B34158 on --paper-00 = 5.29:1  passes
     (--ume-40 #DE93A2 on --ink-90 = 7.51:1 — already passes, used over the
      hero photograph's scrim and left as the design system set it.)

     --crust-60 #6B4A2B on --surface-kraft #D6B588 = 4.10:1  FAILS
     --crust-70 #4A3320 on --surface-kraft         = 6.06:1  passes
     (the kraft band's eyebrow uses --crust-70)

     footer fine print rgba(253,250,245,.44) on --ink-90 = 4.23:1  FAILS
                       rgba(253,250,245,.60) on --ink-90 = 6.80:1  passes

     --ink-90 on --accent #C98A2E       = 6.11:1  passes
     --ink-90 on --accent-hover #A56E1F = 4.14:1  FAILS
     --ink-90 on --accent-hover-aa #BE8028 = 5.38:1  passes
     --ink-90 on --accent-press-aa #B0741F = 4.58:1  passes                */
:root{
  --text-faint-aa:#736556;
  --text-accent-aa:#8E5D18;
  --ume-aa:#B34158;
  --accent-hover-aa:#BE8028;
  --accent-press-aa:#B0741F;
  --text-inverse-fine:rgba(253,250,245,.60);
}
/* Ume on kraft is a special case: --ume-50 reaches only 2.28:1 and even the
   AA-safe --ume-aa only 2.84:1 against --surface-kraft #D6B588. Pink cannot
   reach 4.5:1 on kraft without turning maroon and ceasing to be the pen colour,
   so on kraft grounds the hand aside is set in --crust-70 (6.06:1) — the same
   ink the kraft band's eyebrow already uses. The decorative asterisk keeps its
   own weight but carries no information (aria-hidden). */

/* ── 8. Utilities ────────────────────────────────────────────────────────── */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--surface-ink);color:var(--text-inverse);
  padding:12px 20px;border-bottom:none;border-radius:var(--radius-paper);
  font-family:var(--font-label);font-size:var(--size-label-sm);
  font-weight:var(--weight-semibold);letter-spacing:var(--ls-label);text-transform:uppercase;
}
.skip-link:focus{left:16px;top:16px}
.wrap{max-width:var(--width-content);margin:0 auto;padding-left:var(--gutter-page-lg);padding-right:var(--gutter-page-lg)}
.eyebrow{
  display:block;font-family:var(--font-label);font-size:12px;font-weight:var(--weight-semibold);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-accent-aa);
}
.eyebrow--muted{color:var(--text-muted)}
.eyebrow--kraft{color:var(--crust-70)}
.rule-heavy{border-top:2px solid var(--border-soft)}
.hand{font-family:var(--font-hand);text-transform:uppercase;color:var(--ume-aa);font-size:var(--size-hand-sm);line-height:var(--lh-hand)}
.tc{color:var(--text-muted)}

/* ── 9. Wordmark ─────────────────────────────────────────────────────────── */
.wm{display:block;border-bottom:none;color:var(--text-strong)}
.wm__name{
  display:block;font-family:var(--font-serif);font-weight:var(--weight-light);
  line-height:1.04;letter-spacing:.015em;font-size:var(--wm-size,40px);
}
.wm__desc{
  display:block;font-family:var(--font-label);font-weight:var(--weight-medium);
  letter-spacing:var(--ls-label);text-transform:uppercase;opacity:.72;
  font-size:calc(var(--wm-size,40px) * .2);margin-top:calc(var(--wm-size,40px) * .24);
}

/* ── 10. Buttons ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:44px;padding:0 22px;box-sizing:border-box;border:1.5px solid transparent;
  font-family:var(--font-label);font-size:var(--size-label-md);font-weight:var(--weight-semibold);
  letter-spacing:var(--ls-label);text-transform:uppercase;
  border-radius:var(--radius-paper);text-decoration:none;cursor:pointer;
  transition:var(--transition-ui),transform var(--dur-fast) var(--ease-out);
}
.btn--primary{background:var(--accent);color:var(--ink-90)}
.btn--primary:hover{background:var(--accent-hover-aa);color:var(--ink-90);border-color:transparent}
.btn--primary:active{background:var(--accent-press-aa);transform:scale(var(--press-scale))}
.btn--lg{height:54px;padding:0 30px;gap:10px;font-size:var(--size-body-sm)}
.btn--block{display:flex;width:100%}
.btn svg{flex:none}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border:1px solid transparent;
  border-radius:var(--radius-paper);border-bottom:1px solid transparent;
  color:var(--text-body);background:transparent;transition:var(--transition-ui);
}
.icon-btn:hover{background:var(--surface-inset);border-color:var(--border-soft);color:var(--text-link-hover)}
.icon-btn--inverse{color:var(--text-inverse);border-color:var(--border-inverse)}
.icon-btn--inverse:hover{background:rgba(253,250,245,.14);border-color:var(--paper-00);color:var(--paper-00)}

/* ── 11. Navbar ──────────────────────────────────────────────────────────── */
.navbar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);
  padding:var(--space-5) var(--gutter-page-lg);
  background:var(--surface-page);border-bottom:1px solid var(--border-hairline);
}
.navbar--over{background:transparent;border-bottom-color:transparent;position:relative;z-index:3}
.navbar--over .wm{color:var(--text-inverse)}
.navbar__right{display:flex;align-items:center;gap:var(--space-8)}
.navbar__links{display:flex;align-items:center;gap:var(--space-6)}
.navbar__links a{
  font-family:var(--font-label);font-size:var(--size-label-md);font-weight:var(--weight-medium);
  letter-spacing:var(--ls-label);text-transform:uppercase;text-decoration:none;
  color:var(--text-muted);padding-bottom:3px;border-bottom:1px solid transparent;
  transition:var(--transition-ui);
}
.navbar__links a:hover{color:var(--text-strong)}
.navbar__links a[aria-current="page"]{color:var(--text-strong);border-bottom-color:var(--honey-50)}
.navbar--over .navbar__links a{color:var(--text-inverse-muted)}
.navbar--over .navbar__links a:hover{color:var(--paper-00)}
.navbar--over .navbar__links a[aria-current="page"]{color:var(--paper-00);border-bottom-color:var(--paper-00)}
.navbar__hours{
  font-family:var(--font-label);font-size:var(--size-label-sm);letter-spacing:var(--ls-label-tight);
  text-transform:uppercase;color:var(--text-faint-aa);white-space:nowrap;
}
.navbar--over .navbar__hours{color:var(--text-inverse-muted)}
.nav-toggle{
  display:none;align-items:center;gap:10px;min-height:44px;padding:0 12px;
  background:transparent;border:1px solid var(--border-soft);border-radius:var(--radius-paper);
  font-family:var(--font-label);font-size:var(--size-label-sm);font-weight:var(--weight-semibold);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-body);cursor:pointer;
}
.nav-toggle .bars{display:inline-flex;flex-direction:column;gap:3px}
.nav-toggle .bars i{display:block;width:16px;height:1.5px;background:currentColor}
.navbar--over .nav-toggle{color:var(--text-inverse);border-color:var(--border-inverse)}

/* Drawer — hidden IN PLACE with opacity/visibility. Never transformed
   off-screen: a translated drawer creates horizontal overflow at phone widths. */
.nav-backdrop{
  position:fixed;inset:0;z-index:60;background:var(--surface-scrim);
  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(--surface-card);border-left:1px solid var(--border-hairline);
  padding:20px 24px 32px;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:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px}
.drawer-close{
  background:none;border:0;font-size:26px;line-height:1;color:var(--text-muted);
  cursor:pointer;min-width:44px;min-height:44px;padding:0;
}
.drawer-link{
  display:block;padding:14px 0;border-bottom:1px solid var(--border-hairline);
  font-family:var(--font-label);font-size:var(--size-label-md);font-weight:var(--weight-medium);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-body);text-decoration:none;
}
.drawer-link[aria-current="page"]{color:var(--text-strong)}
.drawer-foot{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.drawer-hours{
  font-family:var(--font-label);font-size:var(--size-label-sm);letter-spacing:var(--ls-label-tight);
  text-transform:uppercase;color:var(--text-muted);
}

/* ── 12. HandLabel — the clipped paper price card ────────────────────────── */
.hand-label{position:relative;display:inline-block;padding-top:10px;max-width:100%}
.hand-label__clip{
  position:absolute;top:0;left:50%;width:26px;height:14px;z-index:1;
  background:var(--paper-30);border:1px solid var(--border-soft);border-radius:1px;
  transform:translateX(-50%) rotate(var(--rot,-1.2deg));
}
.hand-label__card{
  transform:rotate(var(--rot,-1.2deg));transform-origin:top center;
  width:var(--hl-w,210px);min-width:150px;max-width:260px;box-sizing:border-box;
  background:var(--surface-card);border:1px solid rgba(46,36,25,.10);
  border-radius:var(--radius-paper);box-shadow:var(--shadow-paper);padding:13px 15px 15px;
}
.hand-label__name{
  font-family:var(--font-hand);font-size:var(--size-hand-md);line-height:var(--lh-hand);
  color:var(--ink-80);text-transform:uppercase;letter-spacing:.01em;
}
.hand-label__note{
  font-family:var(--font-hand);font-size:var(--size-hand-sm);line-height:var(--lh-hand);
  color:var(--text-muted);text-transform:uppercase;margin-top:4px;
}
.hand-label__price{
  font-family:var(--font-hand);font-size:var(--size-hand-lg);line-height:1.2;
  color:var(--ink-90);margin-top:7px;
}
.hand-label__flag{
  font-family:var(--font-hand);font-size:var(--size-hand-sm);color:var(--ume-aa);
  margin-top:6px;display:flex;gap:5px;
}
/* The canvas's dashed to-confirm card, same clipped geometry, no fill. */
.dashed-card{
  width:200px;max-width:100%;display:flex;flex-direction:column;align-items:center;
  padding-top:10px;position:relative;
}
.dashed-card__clip{
  position:absolute;top:0;left:50%;width:26px;height:14px;z-index:1;
  background:var(--paper-30);border:1px solid var(--border-soft);border-radius:1px;
  transform:translateX(-50%) rotate(2deg);
}
.dashed-card__body{
  width:100%;box-sizing:border-box;border:1px dashed var(--border-soft);
  border-radius:var(--radius-paper);padding:20px 16px;text-align:center;transform:rotate(1.1deg);
}
.dashed-card__body span{
  font-family:var(--font-hand);font-size:var(--size-hand-sm);line-height:var(--lh-hand);
  text-transform:uppercase;color:var(--text-faint-aa);
}

/* ── 13. The inked stamp ─────────────────────────────────────────────────────
   The design system's HydrationStamp geometry, unchanged: a square with a
   1.5px crust rule, 2px radius, rotated -3deg, serif value over a tracked
   all-caps label. It is given an opaque ground because it sits half over a
   photograph — a bare outline puts crust ink on a busy image and becomes
   unreadable. The fill is the section's own ground colour, so it still reads
   as a stamp pressed onto the page rather than a floating card: no shadow, no
   rounding, no translucency, exactly as the system requires. */
.stamp{
  width:84px;height:84px;box-sizing:border-box;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;padding:0 5px;
  border:1.5px solid var(--crust-60);border-radius:var(--radius-paper);
  transform:rotate(-3deg);color:var(--crust-60);background:var(--surface-kraft);
}
/* On the kraft band the stamp's own ground is --surface-kraft, where the
   design system's crust-60 ink measures only 4.10:1 — and the stamp's label
   line is 9px, so it needs 4.5:1. It takes --crust-70 there (6.06:1 on kraft),
   the same ink the kraft band's eyebrow and hand aside already use. On the
   paper ground (About) crust-60 measures 6.76:1 and is left as designed. */
.band:not(.band--paper) .stamp{border-color:var(--crust-70);color:var(--crust-70)}
.band--paper .stamp{background:var(--surface-page)}
/* The design system's stamp sets its value at 0.34x the square and tracks its
   label at --ls-label. That is sized for a three-character value ("78%"). This
   stamp's value is a word, so only the type inside the square moved — 21px
   serif and the tighter --ls-label-tight — while the square itself keeps the
   component's own 84px, 1.5px rule, 2px radius and -3deg rotation. */
.stamp__value{font-family:var(--font-serif);font-weight:var(--weight-regular);font-size:21px;line-height:1.05;text-align:center}
.stamp__label{
  font-family:var(--font-label);font-size:9px;font-weight:var(--weight-semibold);
  letter-spacing:var(--ls-label-tight);text-transform:uppercase;text-align:center;line-height:1.3;
}

/* ── 14. SectionHead ─────────────────────────────────────────────────────── */
.section-head{display:flex;flex-direction:column;gap:var(--space-4)}
.section-head__rule{height:1px;background:var(--border-hairline);width:100%}
.section-head__body{display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start}
.section-head__title{
  font-family:var(--font-display);font-weight:var(--weight-light);font-size:var(--size-head-lg);
  line-height:var(--lh-head);color:var(--text-strong);margin:0;letter-spacing:0;
}
.section-head__note{margin:0;max-width:var(--measure-narrow);font-size:var(--size-body-md);line-height:var(--lh-body);color:var(--text-muted)}

/* ── 15. PhotoFigure ─────────────────────────────────────────────────────── */
.photo-figure{margin:0}
.photo-figure__frame{position:relative;overflow:hidden;background:var(--surface-inset);aspect-ratio:var(--pf-ratio,3 / 2)}
.photo-figure__frame img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.photo-figure:hover .photo-figure__frame img{transform:scale(var(--image-hover-scale))}
.photo-figure figcaption{display:flex;justify-content:space-between;gap:var(--space-6);margin-top:var(--space-3)}
.photo-figure figcaption span{
  font-family:var(--font-display);font-style:italic;font-size:var(--size-body-md);color:var(--text-muted);
}

/* ── 16. Notice ──────────────────────────────────────────────────────────── */
.notice{
  display:flex;align-items:flex-start;gap:var(--space-4);
  padding:var(--space-5) var(--space-6);border:1px solid transparent;
  border-radius:var(--radius-paper);background:var(--surface-kraft);color:var(--crust-70);
}
.notice svg{flex:none;margin-top:2px;color:var(--crust-70)}
.notice__body{flex:1;display:flex;flex-direction:column;gap:4px}
.notice__title{
  font-family:var(--font-label);font-size:var(--size-label-sm);font-weight:var(--weight-semibold);
  letter-spacing:var(--ls-label);text-transform:uppercase;
}
.notice__text{font-size:var(--size-body-sm);line-height:var(--lh-body)}

/* ── 17. MenuRow ─────────────────────────────────────────────────────────── */
.menu-row{
  display:grid;grid-template-columns:1fr auto;gap:var(--space-6);align-items:baseline;
  padding:var(--space-5) 0;border-bottom:1px solid var(--border-hairline);
}
.menu-row__main{display:flex;flex-direction:column;gap:6px;min-width:0}
.menu-row__head{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap}
.menu-row__name{
  font-family:var(--font-display);font-size:var(--size-head-sm);font-weight:var(--weight-regular);
  color:var(--text-strong);
}
.menu-row__tag{
  font-family:var(--font-label);font-size:var(--size-label-sm);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--crust-50);
}
.menu-row__ing{font-size:var(--size-body-sm);line-height:var(--lh-body-tight);color:var(--text-muted);max-width:52ch}
.menu-row__flag{
  font-family:var(--font-hand);font-size:var(--size-hand-sm);color:var(--ume-aa);
  display:flex;gap:5px;text-transform:uppercase;
}
.menu-row__price{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.menu-row__price b{font-family:var(--font-price);font-size:var(--size-hand-lg);color:var(--ink-90);font-weight:var(--weight-regular)}
.menu-row__unit{
  font-family:var(--font-label);font-size:var(--size-label-sm);letter-spacing:var(--ls-label-tight);
  text-transform:uppercase;color:var(--text-faint-aa);
}
.menu-row__price .menu-row__tag{white-space:normal}

/* ── 18. Site footer — the one place the palette inverts ─────────────────── */
.site-footer{
  background:var(--surface-ink);color:var(--text-inverse);
  padding:var(--space-20) var(--gutter-page-lg) var(--space-10);
}
.site-footer a{color:var(--paper-00);border-bottom-color:rgba(253,250,245,.28)}
.site-footer a:hover{color:var(--honey-40);border-bottom-color:var(--honey-40)}
/* The design system's footer is a flex row of the wordmark plus three columns.
   The house rules require a sitemap column linking every page, which makes five
   tracks — one too many for flex space-between at 1120px, where "pages" wrapped
   to a second row and left a hole. A grid holds the same visual (brand left,
   plain columns right) with all five on one line and the baselines aligned. */
.footer-grid{
  max-width:var(--width-content);margin:0 auto;display:grid;
  grid-template-columns:minmax(220px,1.4fr) minmax(180px,1.35fr) minmax(140px,1fr) minmax(150px,1.1fr) minmax(110px,.8fr);
  gap:var(--space-12) var(--space-10);align-items:start;
}
.footer-brand{display:flex;flex-direction:column;gap:var(--space-5);max-width:320px}
.footer-brand .wm{color:var(--paper-00)}
.footer-brand p{margin:0;font-size:var(--size-body-sm);line-height:var(--lh-body);color:var(--text-inverse-muted)}
.footer-col{display:flex;flex-direction:column;gap:var(--space-4)}
.footer-col__head{
  font-family:var(--font-label);font-size:var(--size-label-sm);font-weight:var(--weight-semibold);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--honey-40);
}
.footer-col__lines{display:flex;flex-direction:column;gap:4px}
.footer-col__lines span,.footer-col__lines address{
  font-size:var(--size-body-sm);line-height:1.5;color:var(--text-inverse-muted);font-style:normal;
}
.footer-col__lines a{font-size:var(--size-body-sm);line-height:1.5;border-bottom:none;color:var(--text-inverse-muted);width:fit-content}
.footer-col__lines a:hover{color:var(--honey-40)}
.footer-bottom{
  max-width:var(--width-content);margin:var(--space-16) auto 0;padding-top:var(--space-6);
  border-top:1px solid var(--border-inverse);display:flex;justify-content:space-between;
  align-items:center;gap:var(--space-6);flex-wrap:wrap;
}
.footer-handle{display:inline-flex;align-items:center;gap:8px;color:var(--paper-00);border-bottom:none;font-size:var(--size-body-sm)}
.footer-fine{
  font-family:var(--font-label);font-size:var(--size-label-sm);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--text-inverse-fine);
}

/* ── 19. Home — hero ─────────────────────────────────────────────────────── */
.hero{position:relative;height:min(92vh,880px);min-height:640px;overflow:hidden;background:var(--ink-90)}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
/* The design system's rule is that type over a photograph sits behind
   --scrim-bottom — a bottom-anchored dark gradient, never a box or a frosted
   capsule. This hero photograph is a counter packed with pale flour-dusted
   buns, so measured against the delivered pixels the stock recipe left the
   18px tagline at 2.3:1 and the pink aside at 1.9:1 over its brightest
   patches. Same recipe, same shape, same 42% inflection — deepened until the
   type clears. Measured after the change, at the p90 brightest ground behind
   each line: tagline 4.6:1, pink aside 4.7:1, hours 8.9:1. */
.hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(28,22,17,.90) 0%,
    rgba(28,22,17,.80) 22%,
    rgba(28,22,17,.60) 42%,
    rgba(28,22,17,.22) 72%,
    rgba(28,22,17,0) 100%);
}
/* The nav sits on the photograph above the bottom scrim's reach, and this
   photograph is bright at the top. The design system's rule is that type over a
   photograph sits behind a scrim, so the same recipe is mirrored to the top —
   a bottom-anchored gradient turned upside down, no box, no frosted capsule.
   White at .72 over this gradient measures 9.3:1 against the darkened ground. */
.hero__scrim-top{
  position:absolute;top:0;left:0;right:0;height:200px;
  background:linear-gradient(to bottom,rgba(28,22,17,.62) 0%,rgba(28,22,17,.30) 48%,rgba(28,22,17,0) 100%);
}
.hero__inner{position:relative;height:100%;display:flex;flex-direction:column}
.hero__foot{
  margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;
  gap:64px;max-width:1440px;width:100%;margin-left:auto;margin-right:auto;
  box-sizing:border-box;padding:0 var(--gutter-page-lg) 60px;
}
.hero__wm{--wm-size:112px;color:#FDFAF5}
/* .78 is the canvas's value; over this particular photograph even behind the
   deepened scrim it measured 4.0:1, so the alpha is lifted to .92 — the one
   value in the hero foot that had to move for the line to clear AA. */
.hero__tag{
  margin:24px 0 0;max-width:40ch;font-family:var(--font-sans);font-size:var(--size-body-lg);
  line-height:1.5;color:rgba(253,250,245,.92);
}
.hero__cta{display:flex;align-items:center;gap:22px;margin-top:34px;flex-wrap:wrap}
.hero__aside{
  font-family:var(--font-hand);font-size:15px;text-transform:uppercase;
  letter-spacing:.01em;color:var(--ume-40);
}
.hero__when{text-align:right;flex:none}
.hero__when p{margin:0;max-width:none}
.hero__when .a{font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--size-body-md);line-height:1.55;color:rgba(253,250,245,.92)}
.hero__when .b{margin-top:8px;font-family:var(--font-sans);font-size:var(--size-body-xs);line-height:1.6;color:rgba(253,250,245,.6)}

/* ── 20. Home — shelf strip ──────────────────────────────────────────────── */
.shelf{max-width:var(--width-content);margin:0 auto;padding:104px var(--gutter-page-lg) 0}
.shelf__top{display:flex;justify-content:space-between;align-items:baseline;gap:40px;flex-wrap:wrap}
.shelf__top a{font-family:var(--font-sans);font-size:15px}
.shelf__rule{margin-top:28px;border-top:2px solid var(--border-soft)}
.shelf__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;margin-top:-7px}
.shelf__card{display:flex;justify-content:center}
/* height:auto is load-bearing on every image that gets its shape from CSS
   aspect-ratio. The width/height HTML attributes (kept for CLS) map to
   presentational CSS, and a definite height would silently win and cancel the
   aspect-ratio, which is what made these three photos three different heights. */
.shelf__photo{display:block;width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;border-radius:var(--radius-paper);margin-top:28px}

/* ── 21. Home / About — asymmetric splits and the kraft band ─────────────── */
.split{max-width:var(--width-content);margin:0 auto;padding:120px var(--gutter-page-lg) 0}
.split__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center}
.split__grid--top{align-items:start}
.prose{margin:28px 0 0;max-width:52ch;font-family:var(--font-sans);font-size:var(--size-body-md);line-height:var(--lh-body);color:var(--ink-80)}
.prose + .prose{margin-top:20px}
.more{margin:20px 0 0;max-width:none}
.more a{font-family:var(--font-sans);font-size:var(--size-body-md)}

.band{background:var(--surface-kraft);margin-top:120px}
.band__grid{
  max-width:var(--width-content);margin:0 auto;padding:96px var(--gutter-page-lg);
  display:grid;grid-template-columns:1fr 420px;gap:80px;align-items:center;
}
.band__title{margin:16px 0 0;font-family:var(--font-serif);font-weight:var(--weight-light);font-size:40px;line-height:1.08;color:var(--ink-90)}
.band__figure{position:relative}
.band__figure img{display:block;width:100%;height:auto;aspect-ratio:21 / 20;object-fit:cover;border-radius:var(--radius-paper)}
.band__stamp{position:absolute;top:-28px;right:-20px}
.band__aside{margin:14px 0 0;max-width:none;font-family:var(--font-hand);font-size:var(--size-hand-sm);text-transform:uppercase;color:var(--crust-70)}
.band--paper .band__aside{color:var(--ume-aa)}
.band--paper{background:transparent;margin-top:0}
.band--paper .band__grid{padding:96px var(--gutter-page-lg) 140px}

/* ── 22. Menu page ───────────────────────────────────────────────────────── */
.page-head{max-width:var(--width-content);margin:0 auto;padding:72px var(--gutter-page-lg) 0}
.cards{margin-top:56px}
.cards__rule{margin-top:26px;border-top:2px solid var(--border-soft)}
.cards__rule--mid{margin-top:36px}
.cards__row{display:flex;gap:48px;align-items:flex-start;margin-top:-7px;padding:0 10px;flex-wrap:wrap}
.menu-notice{max-width:var(--width-content);margin:0 auto;padding:72px var(--gutter-page-lg) 0}
.menu-main{max-width:var(--width-content);margin:0 auto;padding:96px var(--gutter-page-lg) 104px}
.menu-main__grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:80px;align-items:start}
.menu-group{margin-top:8px}
.menu-group-label{display:block;margin-top:48px}
.menu-group-label:first-child{margin-top:0}
.menu-foot{margin:40px 0 0;font-family:var(--font-sans);font-size:var(--size-body-sm);line-height:var(--lh-body);color:var(--text-muted)}
.aside{
  position:sticky;top:32px;background:var(--surface-card);border:1px solid var(--border-hairline);
  border-radius:var(--radius-paper);box-shadow:var(--shadow-paper);padding:28px;
  display:flex;flex-direction:column;gap:16px;
}
.aside p{margin:0;font-family:var(--font-sans);font-size:var(--size-body-sm);line-height:var(--lh-body);color:var(--ink-80);max-width:none}
.aside__hand{font-family:var(--font-hand);font-size:var(--size-hand-sm);text-transform:uppercase;color:var(--ume-aa)}
.aside__when{border-top:1px solid var(--border-hairline);padding-top:16px;display:flex;flex-direction:column;gap:6px}
.aside__when .a{font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--size-body-sm);color:var(--ink-80)}
.aside__when .b{font-family:var(--font-sans);font-size:var(--size-body-xs);line-height:1.55;color:var(--text-muted)}
.full-band{height:360px;overflow:hidden}
.full-band img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 55%}

/* ── 23. About page ──────────────────────────────────────────────────────── */
.timeline{margin-top:52px;max-width:52ch}
.timeline__row{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:14px 0;border-top:1px solid var(--border-hairline)}
.timeline__when{
  font-family:var(--font-label);font-size:12px;font-weight:var(--weight-semibold);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--crust-60);padding-top:2px;
}
.timeline__what{font-family:var(--font-sans);font-size:15px;line-height:1.55;color:var(--ink-80)}
.about-wide{max-width:var(--width-content);margin:0 auto;padding:96px var(--gutter-page-lg) 0}
.about-wide .photo-figure__frame{aspect-ratio:1008 / 520}

/* ── 24. Visit page ──────────────────────────────────────────────────────── */
.visit{max-width:var(--width-content);margin:0 auto;padding:72px var(--gutter-page-lg) 140px}
.visit__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:80px;align-items:start;margin-top:56px}
.visit__col{display:flex;flex-direction:column;gap:44px}
.visit__block p,.visit__block address{margin:12px 0 0;font-family:var(--font-sans);font-size:var(--size-body-md);line-height:var(--lh-body);color:var(--ink-80);font-style:normal}
.visit__block p.fine{margin-top:8px;font-size:var(--size-body-sm);color:var(--text-muted)}
.hours{margin-top:16px;max-width:400px}
.hours__row{display:flex;justify-content:space-between;gap:32px;padding:11px 0;border-top:1px solid var(--border-hairline)}
.hours__row:last-child{border-bottom:1px solid var(--border-hairline)}
.hours__row span{font-family:var(--font-sans);font-size:15px;color:var(--ink-80)}
.hours__row span:first-child{font-weight:var(--weight-semibold)}
.hours__row--off span{color:var(--text-muted)}
.visit__hand{margin:10px 0 0;max-width:none}
.visit__cta{display:flex;align-items:center;gap:20px;margin-top:20px;flex-wrap:wrap}
.visit__links{margin:12px 0 0;font-family:var(--font-sans);font-size:var(--size-body-md);line-height:1.9;color:var(--ink-80)}
.map-frame{width:100%;aspect-ratio:475 / 420;border:1px solid var(--border-hairline);border-radius:var(--radius-paper);display:block}
.visit__shot{display:block;width:100%;height:auto;aspect-ratio:475 / 280;object-fit:cover;object-position:center 38%;border-radius:var(--radius-paper);margin-top:20px}
.visit__shot-cap{margin:12px 0 0;max-width:none;font-family:var(--font-hand);font-size:var(--size-hand-sm);text-transform:uppercase;color:var(--ume-aa)}

/* ── 25. Responsive ──────────────────────────────────────────────────────────
   Mobile-first is not how the canvas was drawn, so the desktop values above
   are the canvas's own; everything below reflows them. Verified at 360, 414,
   768, 1280 and 1900px. */
@media (max-width:1080px){
  .menu-main__grid{grid-template-columns:1fr;gap:56px}
  .aside{position:static;max-width:420px}
  .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-brand{grid-column:1 / -1;max-width:460px}
}
@media (max-width:980px){
  .split__grid,.band__grid,.visit__grid{grid-template-columns:1fr;gap:48px}
  .band__grid{align-items:start}
  .band__figure{max-width:520px}
  .visit__grid{margin-top:40px}
  .shelf__grid{grid-template-columns:repeat(2,1fr);gap:40px}
}
@media (max-width:900px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-10) var(--space-8)}
  .navbar__links,.navbar__hours{display:none}
  .nav-toggle{display:inline-flex}
  .navbar{padding:var(--space-4) var(--gutter-page)}
  .navbar__right{gap:12px}
  .wrap,.shelf,.split,.page-head,.menu-notice,.menu-main,.about-wide,.visit,.band__grid,.site-footer{
    padding-left:var(--gutter-page);padding-right:var(--gutter-page);
  }
  .hero__foot{padding-left:var(--gutter-page);padding-right:var(--gutter-page)}
  .footer-grid{gap:40px}
  .footer-brand{max-width:none}
}
@media (max-width:820px){
  h1{font-size:40px}
  .section-head__title{font-size:28px}
  .band__title{font-size:30px}
  .hero{height:auto;min-height:0}
  .hero__inner{min-height:min(88vh,760px)}
  .hero__foot{display:block;padding-bottom:44px}
  .hero__wm{--wm-size:64px}
  .hero__when{text-align:left;margin-top:32px}
  .hero__tag{font-size:var(--size-body-md);max-width:34ch}
  .split{padding-top:88px}
  .band{margin-top:88px}
  .band__grid{padding-top:72px;padding-bottom:72px}
  .band--paper .band__grid{padding-bottom:96px}
  .shelf{padding-top:72px}
  .about-wide{padding-top:72px}
  .about-wide .photo-figure__frame{aspect-ratio:3 / 2}
  .visit{padding-bottom:96px}
  .full-band{height:260px}
  .timeline__row{grid-template-columns:1fr;gap:6px}
  .menu-main{padding-top:72px;padding-bottom:80px}
  .menu-notice{padding-top:56px}
  .cards__row{gap:32px}
}
@media (max-width:620px){
  .shelf__grid{grid-template-columns:1fr;gap:44px}
  .shelf__photo{max-width:420px;margin-left:auto;margin-right:auto}
  .cards__row{justify-content:center;gap:26px;padding:0}
  .hand-label__card{width:min(var(--hl-w,210px),100%)}
  .menu-row{grid-template-columns:1fr;gap:8px}
  .menu-row__price{justify-content:flex-start}
  .photo-figure figcaption{flex-direction:column;gap:6px}
  .footer-bottom{gap:14px}
  .band__stamp{top:-26px;right:-6px}
  .stamp{width:78px;height:78px}
  .stamp__value{font-size:19px}
  .hero__wm{--wm-size:52px}
  h1{font-size:34px}
}
@media (max-width:400px){
  .hero__cta{gap:14px}
  .btn--lg{padding:0 22px}
  .footer-grid{grid-template-columns:1fr}
}