/* ============================================================
   CORNERSHOP — Marine Terrace. Demo site stylesheet.

   Design source: Claude Design export "corner"
   (_ds/cornershop-design-system-fa1d6f86-9167-49b8-a495-9aefbd32bc01
    tokens + the four canvases Home / Menu / About / Contact and the
    two shared components SiteNav / SiteFooter).

   The token blocks below are transcribed VERBATIM from the export's
   tokens/*.css. AA-safe variants follow, each carrying the measured
   contrast ratio and the reason it exists. Everything after that is
   the responsive expression of the canvases — same values, made to
   survive 360px.
   ============================================================ */

/* ---------- tokens/colors.css (verbatim) ---------- */
:root{
/* ---- ink: signage black on white, the dominant pairing ---- */
--c-ink:#1a1a18;--c-ink-2:#55564f;--c-ink-3:#8a8b83;--c-ink-4:#b4b5ad;
/* ---- paper ---- */
--c-paper:#ffffff;--c-paper-2:#faf8f3;--c-rice:#f4eddd;--c-rice-2:#ebe1cb;
/* ---- steel: hawker-centre stainless counters, rules and frames ---- */
--c-steel-1:#e6e7e3;--c-steel-2:#c9cbc5;--c-steel-3:#9a9c93;--c-steel-4:#6c6e66;
/* ---- matcha: sampled from the whisked bowl and the tea itself ---- */
--c-matcha:#7a8b3c;--c-matcha-bowl:#6f762b;--c-matcha-deep:#39451e;--c-matcha-tint:#edf0e2;
/* ---- kopi + houjicha roast ---- */
--c-kopi:#5a3a22;--c-houjicha:#8c6239;--c-kopi-crema:#a35f12;--c-kopi-tint:#f1e9e0;
/* ---- strawberry: the compote layer reads deep red, not pink ---- */
--c-strawberry:#c2413f;--c-strawberry-soft:#e88aa0;--c-strawberry-tint:#fbeef0;
/* ---- milk ---- */
--c-milk:#f6f2e8;

/* ---- semantic: text ---- */
--text-primary:var(--c-ink);--text-secondary:var(--c-ink-2);--text-muted:var(--c-ink-3);
--text-faint:var(--c-ink-4);--text-inverse:var(--c-paper);--text-accent:var(--c-matcha-bowl);
--text-price:var(--c-ink);--text-kopi:var(--c-kopi);--text-sold-out:var(--c-ink-4);

/* ---- semantic: surface ---- */
--surface-page:var(--c-paper-2);--surface-card:var(--c-paper);--surface-sunken:var(--c-steel-1);
--surface-rice:var(--c-rice);--surface-ink:var(--c-ink);--surface-lightbox:var(--c-paper);
--surface-matcha:var(--c-matcha-bowl);--surface-matcha-quiet:var(--c-matcha-tint);
--surface-kopi:var(--c-kopi);--surface-strawberry:var(--c-strawberry);
--surface-strawberry-quiet:var(--c-strawberry-tint);--surface-steel:var(--c-steel-2);

/* ---- semantic: line ---- */
--border-hairline:var(--c-steel-2);--border-quiet:var(--c-steel-1);--border-strong:var(--c-ink);
--border-frame:#26261f;--leader-dot:var(--c-ink-3);

/* ---- semantic: state ---- */
--state-hover-ink:#000000;--state-hover-wash:rgba(26,26,24,.04);
--state-press-wash:rgba(26,26,24,.09);--state-focus-ring:var(--c-matcha-bowl);
--state-disabled-fg:var(--c-ink-4);--state-disabled-bg:var(--c-steel-1);

/* ---- semantic: status ---- */
--status-open:var(--c-matcha-bowl);--status-closed:var(--c-ink-3);--status-alert:var(--c-strawberry);

/* ---- links ---- */
--link:var(--c-ink);--link-hover:var(--c-matcha-bowl);--link-underline:var(--c-steel-3);
}

/* ---------- tokens/typography.css (verbatim) ---------- */
:root{
--font-display:"Jost","Futura","Century Gothic",system-ui,sans-serif;
--font-body:"Hanken Grotesk","Avenir Next",system-ui,sans-serif;
--font-mono:"Courier Prime","Courier New",monospace;
--font-cjk:"Noto Sans SC","PingFang SC","Hiragino Sans GB",sans-serif;

--fs-hero:clamp(56px,7.4vw,116px);
--fs-display:clamp(40px,4.6vw,72px);
--fs-h1:48px;--fs-h2:36px;--fs-h3:26px;--fs-h4:20px;
--fs-lead:21px;--fs-body:17px;--fs-body-sm:15px;--fs-caption:13px;--fs-micro:11px;
--fs-price:19px;--fs-price-lg:26px;

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

--lh-tight:1;--lh-snug:1.14;--lh-heading:1.2;--lh-body:1.62;--lh-loose:1.75;

--tr-wordmark:.10em;--tr-signage:.06em;--tr-label:.16em;--tr-caps:.09em;--tr-body:0;--tr-tight:-.01em;

--type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body);
--type-body-sm:var(--fw-regular) var(--fs-body-sm)/var(--lh-body) var(--font-body);
--type-caption:var(--fw-regular) var(--fs-caption)/1.5 var(--font-body);
--type-label:var(--fw-medium) var(--fs-micro)/1.2 var(--font-display);
--type-price:var(--fw-semi) var(--fs-price)/1 var(--font-body);
--type-receipt:var(--fw-regular) var(--fs-body-sm)/1.65 var(--font-mono);
--type-cjk:var(--fw-regular) var(--fs-h4)/1.3 var(--font-cjk);
}

/* ---------- tokens/spacing.css (verbatim) ---------- */
:root{
--space-0:0;--space-2xs:2px;--space-xs:4px;--space-sm:8px;--space-md:12px;
--space-lg:16px;--space-xl:20px;--space-2xl:24px;--space-3xl:32px;--space-4xl:40px;
--space-5xl:56px;--space-6xl:72px;--space-7xl:96px;--space-8xl:128px;--space-9xl:176px;
--gap-inline:var(--space-sm);--gap-stack:var(--space-md);--gap-card:var(--space-2xl);
--gap-grid:var(--space-3xl);--gap-section:var(--space-7xl);
--pad-control-y:11px;--pad-control-x:20px;--pad-control-y-sm:7px;--pad-control-x-sm:14px;
--pad-card:var(--space-2xl);--pad-panel:var(--space-4xl);--pad-page-x:clamp(20px,5vw,88px);
--measure-narrow:34ch;--measure:60ch;--measure-wide:76ch;
--container:1240px;--container-wide:1560px;--container-text:680px;
}

/* ---------- tokens/surfaces.css (verbatim) ---------- */
:root{
--radius-none:0;--radius-hair:2px;--radius-sm:3px;--radius-pill:999px;--radius-circle:50%;
--border-hair:1px solid var(--border-hairline);
--border-quiet-1:1px solid var(--border-quiet);
--border-ink:1px solid var(--border-strong);
--border-ink-2:2px solid var(--border-strong);
--border-lightbox:3px solid var(--border-frame);
--border-dashed:1px dashed var(--c-steel-3);
--rule-weight:1px;
--shadow-none:none;
--shadow-acrylic:0 1px 2px rgba(26,26,24,.05),0 8px 24px rgba(26,26,24,.07);
--shadow-overlay:0 24px 64px rgba(26,26,24,.18);
--shadow-lightbox:inset 0 0 0 1px rgba(255,255,255,.6),0 2px 0 rgba(26,26,24,.06);
--leader:radial-gradient(circle,var(--leader-dot) 1px,transparent 1.2px) repeat-x left 62% / 6px 3px;
--focus-ring:2px solid var(--state-focus-ring);--focus-offset:2px;
}

/* ---------- tokens/motion.css (verbatim) ---------- */
:root{
--ease-out:cubic-bezier(.2,.6,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--ease-linear:linear;
--dur-instant:90ms;--dur-fast:160ms;--dur-base:240ms;--dur-slow:420ms;--dur-pour:900ms;
--motion-hover:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out);
--motion-lift:transform var(--dur-base) var(--ease-out);
--lift-distance:-2px;--press-scale:.985;
}
@media (prefers-reduced-motion:reduce){:root{
--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms;--dur-pour:0ms;--lift-distance:0px;--press-scale:1;
}}

/* ============================================================
   DECLARED AA VARIANTS — deviations from the export tokens.
   Each replaces a token that fails WCAG 2.2 AA at the size the
   canvases use it. Ratios computed against the named surface.
   ============================================================ */
:root{
  /* The canvases set every page's ground to --c-steel-1 #e6e7e3 (not --surface-page
     #faf8f3, which the export never actually paints), so muted text has to clear AA
     against #e6e7e3 — the darkest of the three grounds this site uses.
       --c-ink-3  #8a8b83 on #e6e7e3 = 2.77:1  -> FAILS badly
       --c-steel-4 #6c6e66 on #e6e7e3 = 4.16:1 -> STILL FAILS (it only passes on
                                                  #ffffff at 5.17:1)
       #5f6159 on #e6e7e3 = 5.05:1 · on #ffffff = 6.28:1 · on --c-rice #f4eddd = 5.38:1
                                                -> PASSES on all three grounds.
     #5f6159 is one step darker than --c-steel-4 on the same hue, so the ramp still
     reads as one family. #8a8b83 is retained for the dotted price leader, the hairline
     rules and the closed-state dot — decorative only, never text. */
  --text-muted-aa:#5f6159;

  /* --c-matcha #7a8b3c as a FILL under #ffffff text = 3.76:1 -> FAILS.
     --c-matcha-bowl #6f762b under #ffffff = 4.88:1 -> passes. This is already what
     --surface-matcha resolves to; the canvas's "this week" tab hard-coded #7a8b3c. */
  --surface-matcha-aa:var(--c-matcha-bowl);

  /* Footer: the canvas sets label text at rgba(255,255,255,.4) on --c-ink #1a1a18 = 3.82:1
     -> FAILS. .55 = 6.04:1 and .48 = 5.0:1 -> both pass. */
  --on-ink-label:rgba(255,255,255,.55);
  --on-ink-quiet:rgba(255,255,255,.48);
  --on-ink-body:rgba(255,255,255,.72);   /* 9.6:1 */
  --on-ink-strong:rgba(255,255,255,.85); /* 13.8:1 */

  /* Official WhatsApp green #25d366 with #ffffff label = 1.98:1 -> FAILS badly.
     With --c-ink #1a1a18 = 8.79:1 -> passes, and ink-on-colour is this brand's
     own convention anyway. */
  --whatsapp:#25d366;

  /* Vertical rhythm: the canvases are drawn at 1440-1920 with fixed 88/96/112/128px
     section padding. These clamp the same values down to phone widths. */
  --sp-64:clamp(36px,5vw,64px);
  --sp-88:clamp(44px,7vw,88px);
  --sp-96:clamp(48px,7.5vw,96px);
  --sp-112:clamp(56px,8.5vw,112px);
  --sp-128:clamp(56px,10vw,128px);
  --pad-panel-y:clamp(36px,6vw,88px);
  --pad-panel-x:clamp(24px,6vw,96px);
}

/* ---------- tokens/base.css (verbatim, plus the resets a real page needs) ---------- */
*,*::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:#e6e7e3;color:var(--text-primary);
  font:var(--type-body);text-wrap:pretty;-webkit-font-smoothing:antialiased;
  font-family:var(--font-body);overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:var(--fw-regular);line-height:var(--lh-heading);color:var(--text-primary)}
p{margin:0 0 1em}p:last-child{margin-bottom:0}
a{color:var(--link);text-decoration:underline;text-decoration-color:var(--link-underline);text-underline-offset:3px;text-decoration-thickness:1px;transition:var(--motion-hover)}
a:hover{color:var(--link-hover);text-decoration-color:var(--link-hover)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
img{max-width:100%;display:block}
::selection{background:var(--c-matcha-tint);color:var(--c-matcha-deep)}

.skip-link{
  position:absolute;left:8px;top:-56px;z-index:200;background:var(--surface-ink);color:var(--text-inverse);
  padding:12px 18px;font:var(--type-label);letter-spacing:var(--tr-label);text-transform:uppercase;
  text-decoration:none;transition:top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{top:8px;color:var(--text-inverse)}

.page{background:#e6e7e3;color:var(--c-ink);font-family:var(--font-body);min-height:100vh;overflow-x:clip}
.container{max-width:var(--container);margin:0 auto}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   Shared type utilities lifted from the canvases
   ============================================================ */
.label{
  display:block;font-family:var(--font-display);font-size:var(--fs-micro);font-weight:var(--fw-medium);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-muted-aa);margin:0;
}
.label--kopi{color:var(--c-houjicha)}          /* 4.59:1 on --c-rice #f4eddd */
.mono{
  font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:var(--tr-signage);
  text-transform:uppercase;color:var(--text-muted-aa);
}
.cjk{font-family:var(--font-cjk)}
.display{font-family:var(--font-display);font-weight:var(--fw-light);line-height:1.18;text-wrap:pretty}
.lede{font-size:18px;line-height:1.66;color:var(--text-secondary);text-wrap:pretty;margin:0}
.note{font-size:var(--fs-caption);line-height:1.6;color:var(--text-muted-aa);text-wrap:pretty;margin:0}

/* to-confirm marker — the site's own treatment for a value the owner still has
   to settle. Built from the design system's Badge (tone "quiet"). */
.tc{
  display:inline-block;font-family:var(--font-display);font-size:10px;font-weight:var(--fw-medium);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-secondary);
  border:1px solid var(--border-hairline);border-radius:var(--radius-none);
  padding:3px 7px 2px;white-space:nowrap;vertical-align:middle;line-height:1;
}
.tc--onink{color:var(--on-ink-strong);border-color:rgba(255,255,255,.34)}
.tc--onphoto{color:#fff;border-color:rgba(255,255,255,.6);background:rgba(26,26,24,.42)}
.tc--price{border-color:var(--border-hairline);color:var(--text-secondary)}

/* dotted price leader — the single most recognisable device the stall owns */
.leader{flex:1;height:1em;margin:0 8px;min-width:16px;background:var(--leader)}

/* ============================================================
   Buttons (components/core/Button.jsx, transcribed)
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);
  font-family:var(--font-display);font-weight:var(--fw-medium);letter-spacing:var(--tr-caps);
  text-transform:uppercase;border-radius:var(--radius-none);border:1px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:var(--motion-hover),transform var(--dur-fast) var(--ease-out);
}
.btn:hover{text-decoration:none}
.btn--lg{font-size:15px;padding:16px 32px;min-height:52px}
.btn--md{font-size:13px;padding:var(--pad-control-y) var(--pad-control-x);min-height:44px}
.btn--block{width:100%}
.btn--primary{background:var(--surface-ink);color:var(--text-inverse);border-color:var(--surface-ink)}
.btn--primary:hover{background:var(--state-hover-ink);color:var(--text-inverse);border-color:var(--state-hover-ink)}
.btn--secondary{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.btn--secondary:hover{background:var(--state-hover-wash);color:var(--text-primary)}
.btn--matcha{background:var(--surface-matcha-aa);color:var(--text-inverse);border-color:var(--surface-matcha-aa)}
.btn--matcha:hover{background:var(--c-matcha-deep);color:var(--text-inverse);border-color:var(--c-matcha-deep)}
.btn--wa{background:var(--whatsapp);color:var(--c-ink);border-color:var(--whatsapp)}
.btn--wa:hover{background:#1fbb59;color:var(--c-ink);border-color:#1fbb59}
.btn:active{transform:scale(var(--press-scale))}
.btn svg{flex:none}

/* ============================================================
   SiteNav — shared component, identical on all four pages
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:50;min-height:72px;background:var(--surface-card);
  border-bottom:var(--border-hair);display:flex;align-items:center;
  justify-content:space-between;gap:var(--space-2xl);padding:0 var(--pad-page-x);
}
.brand{display:flex;align-items:baseline;gap:14px;text-decoration:none;color:var(--c-ink);min-height:48px;padding:12px 0}
.brand:hover{color:var(--c-ink)}
.brand-mark{
  font-family:var(--font-display);font-weight:var(--fw-regular);font-size:20px;
  letter-spacing:var(--tr-wordmark);text-indent:var(--tr-wordmark);
  text-transform:uppercase;line-height:1;color:var(--c-ink);
}
.brand-unit{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--text-muted-aa);white-space:nowrap}
.nav-links{display:flex;gap:36px;align-items:baseline}
.nav-links a{
  position:relative;padding-bottom:5px;font-family:var(--font-display);font-size:12px;
  font-weight:var(--fw-medium);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--c-ink);text-decoration:none;
}
.nav-links a:hover{color:var(--c-matcha-bowl)}
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--c-ink);
}
.nav-links .nav-ig{color:var(--text-muted-aa)}
.nav-links .nav-ig:hover{color:var(--c-matcha-bowl)}

.nav-toggle{
  display:none;align-items:center;gap:10px;background:none;border:1px solid var(--border-strong);
  color:var(--c-ink);font-family:var(--font-display);font-size:12px;font-weight:var(--fw-medium);
  letter-spacing:var(--tr-label);text-transform:uppercase;padding:12px 16px;min-height:46px;cursor:pointer;
}
.nav-toggle .bars{display:inline-flex;flex-direction:column;gap:4px;width:18px}
.nav-toggle .bars span{display:block;height:1px;background:var(--c-ink)}

.nav-backdrop{
  position:fixed;inset:0;z-index:60;background:rgba(26,26,24,.55);
  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}
/* hidden IN PLACE with opacity/visibility — never translateX, which would push a
   transformed panel off-canvas and create horizontal overflow at phone widths */
.nav-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(340px,90vw);
  background:var(--surface-card);border-left:var(--border-ink);
  padding:16px 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;min-height:56px}
.drawer-close{
  background:none;border:none;font-size:30px;line-height:1;color:var(--text-secondary);
  cursor:pointer;padding:8px 12px;font-family:var(--font-body);
}
.drawer-link{
  display:block;padding:16px 2px;font-family:var(--font-display);font-size:15px;
  font-weight:var(--fw-medium);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--c-ink);text-decoration:none;border-bottom:var(--border-hair);
}
.drawer-link[aria-current="page"]{color:var(--c-matcha-bowl)}
.drawer-cta{margin-top:24px;display:grid;gap:10px}
.drawer-note{
  font-family:var(--font-body);font-size:var(--fs-caption);line-height:1.55;
  color:var(--text-secondary);margin:6px 0 0;
}

/* ============================================================
   HOME — hero (the receipt / lightbox panel + "what this is")
   ============================================================ */
.hero{position:relative;padding:var(--sp-64) var(--pad-page-x) 0}
.hero-inner{
  max-width:var(--container);margin:0 auto;display:flex;align-items:flex-start;
  justify-content:center;gap:var(--sp-64) 104px;flex-wrap:wrap;
}
.sign{
  width:min(496px,100%);flex:none;display:flex;flex-direction:column;
  filter:drop-shadow(0 1px 2px rgba(26,26,24,.05)) drop-shadow(0 10px 28px rgba(26,26,24,.09));
}
.sign-body{
  background:var(--c-paper);padding:40px clamp(22px,5vw,40px) 8px;display:flex;flex-direction:column;
  font-family:var(--font-mono);font-size:16px;color:var(--c-ink);text-transform:uppercase;
}
.sign-wordmark{
  font-family:var(--font-display);font-weight:var(--fw-regular);font-size:clamp(30px,7.2vw,40px);
  letter-spacing:var(--tr-wordmark);text-indent:var(--tr-wordmark);line-height:1;text-align:center;
  color:var(--c-ink);margin:0;text-transform:uppercase;
}
.sign-sub{display:flex;justify-content:center;align-items:baseline;gap:10px;margin-top:14px}
.sign-sub .cjk{font-size:15px}
.sign-sub .en{font-family:var(--font-display);font-size:10px;letter-spacing:var(--tr-label);color:var(--text-muted-aa)}
.rule-dash{border-top:1px dashed var(--c-steel-3);margin:24px 0 18px}
.rule-hair{border-top:1px solid var(--border-hairline);margin:18px 0 14px}
.rule-hair--wide{border-top:1px solid var(--border-hairline);margin:16px 0 20px}
.sign-hours{display:flex;justify-content:space-between;gap:12px;color:var(--text-secondary)}
.sign-stamp{display:flex;align-items:flex-start;gap:10px;margin-top:8px;font-size:17px;letter-spacing:.02em}
.sign-stamp .dot{width:8px;height:8px;flex:none;margin-top:.45em;background:var(--c-steel-3)}
.sign-stamp[data-state="open"] .dot{background:var(--status-open)}
.sign-stamp[data-state="closed"] .dot{background:var(--status-alert)}
.sign-caps{font-size:12px;letter-spacing:.14em;color:var(--text-muted-aa)}
.sign-row{display:flex;align-items:baseline;padding:7px 0;gap:0;flex-wrap:wrap}
.sign-caps + .sign-row{margin-top:4px}
.sign-row .nm{flex:none}
.sign-row .amt{flex:none}
.sign-row .flag{
  flex:none;font-family:var(--font-body);font-size:11px;color:var(--text-muted-aa);
  margin-left:8px;text-transform:none;
}
.sign-tc{display:block;margin:0 0 4px}
.sign-note{font-size:13px;line-height:1.6;color:var(--text-muted-aa);text-transform:none;margin-top:4px}
.sign-foot{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:13px;color:var(--text-muted-aa);margin:18px 0 2px;text-transform:none;
}
.sign-foot .caps{text-transform:uppercase}
.sign-zig{display:block;width:100%;height:14px;margin-top:-1px}

.hero-side{
  flex:1 1 360px;min-width:0;max-width:440px;padding-top:clamp(0px,7vw,96px);
  display:flex;flex-direction:column;gap:var(--space-2xl);
}
.hero-side h1{
  margin:0;font-family:var(--font-display);font-weight:var(--fw-light);
  font-size:clamp(30px,4.2vw,44px);line-height:1.22;color:var(--c-ink);text-wrap:pretty;
}
.hero-shot{margin-top:var(--space-sm);position:relative;aspect-ratio:22/15;overflow:hidden;background:var(--c-steel-2)}
.hero-shot img{width:100%;height:100%;object-fit:cover;object-position:52% 56%}

/* ============================================================
   Rice-paper panels (one per page, per the design system)
   ============================================================ */
.rice{background:var(--surface-rice);padding:var(--pad-panel-y) var(--pad-panel-x)}
.rice-split{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-64) 72px;flex-wrap:wrap}
.rice-head{display:flex;flex-direction:column;gap:var(--space-2xl)}
.rice-head p{
  margin:0;font-family:var(--font-display);font-weight:var(--fw-light);
  font-size:clamp(28px,4.4vw,52px);line-height:1.18;color:var(--c-kopi);max-width:22ch;text-wrap:pretty;
}
.section-pad{padding:var(--sp-96) var(--pad-page-x) 0}
.section-pad--btm{padding:0 var(--pad-page-x) var(--sp-128)}

/* ============================================================
   HOME — "the whisk"
   ============================================================ */
.whisk{padding:var(--sp-128) var(--pad-page-x)}
.whisk-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-5xl);
  margin-bottom:var(--sp-64);flex-wrap:wrap;
}
.whisk-head h2{
  margin:0;font-family:var(--font-display);font-weight:var(--fw-light);
  font-size:clamp(32px,5.2vw,64px);line-height:1.14;max-width:20ch;text-wrap:pretty;
}
.whisk-head .label{margin-bottom:20px}
.whisk-head .mono{padding-bottom:10px}
.whisk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--c-ink)}
.whisk-cell{padding:32px 40px 8px 0;border-right:1px solid var(--border-hairline)}
.whisk-cell:nth-child(2){padding:32px 40px 8px}
.whisk-cell:last-child{padding:32px 0 8px 40px;border-right:0}
.whisk-cell .n{
  display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted-aa);margin-bottom:14px;
}
.whisk-cell h3{
  margin:0 0 12px;font-family:var(--font-display);font-weight:var(--fw-medium);font-size:24px;
  line-height:1.2;letter-spacing:var(--tr-signage);text-transform:uppercase;
}
.whisk-cell p{margin:0;font-size:16px;line-height:1.66;color:var(--text-secondary);text-wrap:pretty}
.whisk-cta{display:flex;justify-content:center;margin-top:var(--space-6xl)}

/* ============================================================
   MENU
   ============================================================ */
.page-head{padding:var(--sp-96) var(--pad-page-x) var(--sp-64)}
.page-head-inner{
  max-width:var(--container);margin:0 auto;display:flex;align-items:flex-end;
  justify-content:space-between;gap:var(--space-3xl) 72px;flex-wrap:wrap;
}
.page-head h1{
  margin:0;font-family:var(--font-display);font-weight:var(--fw-light);
  font-size:clamp(36px,6.2vw,80px);line-height:1.08;max-width:15ch;text-wrap:pretty;
}
.page-head .label{margin-bottom:20px}
.page-head .aside{margin:0 0 8px;font-size:16px;line-height:1.66;color:var(--text-secondary);max-width:32ch;text-wrap:pretty}

.highlights{padding:0 var(--pad-page-x) var(--sp-128)}
.drink-grid{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.drink-card{display:block}
.drink-shot{overflow:hidden;background:var(--surface-sunken);aspect-ratio:4/5;margin-bottom:var(--space-lg)}
.drink-shot img{width:100%;height:100%;object-fit:cover;display:block}
.drink-title{display:flex;align-items:baseline;gap:var(--space-md);flex-wrap:wrap}
.drink-title h2{
  margin:0;font-family:var(--font-display);font-size:var(--fs-h4);font-weight:var(--fw-medium);
  letter-spacing:var(--tr-signage);text-transform:uppercase;line-height:1.3;
}
.badge{
  display:inline-block;font-family:var(--font-display);font-size:var(--fs-micro);font-weight:var(--fw-medium);
  letter-spacing:var(--tr-label);text-transform:uppercase;padding:4px 8px 3px;border:1px solid;
  border-radius:var(--radius-none);background:var(--surface-matcha-aa);color:var(--text-inverse);
  border-color:var(--surface-matcha-aa);
}
.drink-ing{font:var(--type-body-sm);font-family:var(--font-body);color:var(--text-secondary);margin:6px 0 0;max-width:34ch}
.drink-price{
  margin-top:var(--space-md);font:var(--type-price);font-family:var(--font-body);
  color:var(--text-price);display:flex;gap:var(--space-sm);align-items:baseline;flex-wrap:wrap;
}
.drink-price .serve{font-weight:var(--fw-regular);font-size:var(--fs-caption);color:var(--text-muted-aa)}

.menu-band{
  background:var(--c-paper);border-top:var(--border-hair);border-bottom:var(--border-hair);
  padding:var(--sp-112) var(--pad-page-x);
}
.menu-band-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2xl) 40px;
  margin-bottom:var(--sp-64);flex-wrap:wrap;
}
.menu-band-head h2{
  margin:0;font-family:var(--font-display);font-weight:var(--fw-regular);
  font-size:clamp(24px,3.1vw,34px);letter-spacing:var(--tr-signage);text-transform:uppercase;line-height:1.2;
}
.menu-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-64) 96px}
.menu-col h3{
  display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--c-ink);
  padding-bottom:12px;margin:0 0 10px;font-weight:var(--fw-regular);line-height:1.2;
}
.menu-col h3 .cjk{font-size:19px;font-family:var(--font-cjk)}
.menu-col h3 .en{
  font-family:var(--font-display);font-size:11px;font-weight:var(--fw-medium);
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-muted-aa);
}
.menu-row{
  display:flex;align-items:baseline;font-family:var(--font-display);font-size:16px;
  letter-spacing:var(--tr-signage);color:var(--text-primary);padding:7px 0;flex-wrap:wrap;
}
.menu-row .nm{flex:none;text-transform:uppercase}
.menu-row .amt{flex:none;font-weight:var(--fw-medium)}
.menu-row .serve{
  flex:none;margin-left:8px;font:var(--type-caption);font-family:var(--font-body);color:var(--text-muted-aa);
}
.menu-item .tc{display:inline-block;margin:0 0 6px}
.menu-col .note{margin:14px 0 0;font-size:14px;line-height:1.6;color:var(--text-muted-aa)}

.special{padding:var(--sp-112) var(--pad-page-x)}
.special-inner{max-width:var(--container);margin:0 auto;display:flex;justify-content:center}
.special-card{
  border:var(--border-dashed);background:var(--c-paper);padding:44px clamp(24px,5vw,56px) 40px;
  width:min(560px,100%);text-align:center;position:relative;
}
.special-tab{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--surface-matcha-aa);
  color:var(--text-inverse);font-family:var(--font-display);font-size:10px;font-weight:var(--fw-medium);
  letter-spacing:var(--tr-label);text-transform:uppercase;padding:3px 12px;white-space:nowrap;
}
.special-card h3{
  margin:14px 0 8px;font-family:var(--font-display);font-weight:var(--fw-regular);
  font-size:clamp(28px,3.4vw,38px);letter-spacing:var(--tr-signage);text-transform:uppercase;line-height:1.2;
}
.special-card p{margin:0 0 20px;font-size:16px;line-height:1.6;color:var(--text-secondary)}
.special-prices{display:flex;gap:32px;justify-content:center;flex-wrap:wrap;font-weight:var(--fw-semi);font-size:18px}
.special-prices .serve{font-weight:var(--fw-regular);font-size:var(--fs-caption);color:var(--text-muted-aa)}
.special-card .tc{margin-top:14px}

/* ============================================================
   ABOUT
   ============================================================ */
.story{padding:var(--sp-112) var(--pad-page-x) var(--sp-88)}
.story-inner{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:1fr 300px;gap:var(--sp-64) 96px;align-items:end}
.story-inner h1{
  margin:0;font-family:var(--font-display);font-weight:var(--fw-light);
  font-size:clamp(34px,5.8vw,76px);line-height:1.12;text-wrap:pretty;
}
.story-inner .label{margin-bottom:28px}
.story-facts{
  display:flex;flex-direction:column;gap:10px;font-family:var(--font-mono);font-size:14px;
  line-height:1.7;letter-spacing:.02em;text-transform:uppercase;color:var(--text-secondary);
  border-left:1px solid var(--border-hairline);padding-left:24px;padding-bottom:8px;margin:0;
}
.story-facts span{display:block}

.band-photo{position:relative;height:clamp(280px,40vw,560px);overflow:hidden;background:var(--c-steel-2)}
.band-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.band-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,26,24,.72),rgba(26,26,24,0) 60%)}
.band-cap{
  position:absolute;left:var(--pad-page-x);right:var(--pad-page-x);bottom:40px;
  font-family:var(--font-mono);font-size:14px;letter-spacing:var(--tr-signage);
  text-transform:uppercase;color:rgba(255,255,255,.92);display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}

.made{padding:var(--sp-112) var(--pad-page-x)}
.made-inner{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:380px 1fr;gap:var(--sp-64) 96px;align-items:start}
.made-aside{position:sticky;top:104px;display:flex;flex-direction:column;gap:20px}
.made-aside h2{
  margin:0;font-family:var(--font-display);font-weight:var(--fw-light);
  font-size:clamp(30px,4.4vw,56px);line-height:1.16;text-wrap:pretty;
}
.made-aside p{margin:0;font-size:16px;line-height:1.66;color:var(--text-secondary);text-wrap:pretty}
.made-rows{display:flex;flex-direction:column}
.made-row{display:grid;grid-template-columns:180px 1fr;gap:var(--space-lg) 40px;border-top:1px solid var(--border-hairline);padding:28px 0}
.made-row:first-child{border-top:1px solid var(--c-ink)}
.made-row:last-child{border-bottom:1px solid var(--border-hairline)}
.made-row h3{margin:0;padding-top:4px;font-family:var(--font-display);font-size:var(--fs-micro);font-weight:var(--fw-medium);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-muted-aa);line-height:1.2}
.made-row p{margin:0;font-size:19px;line-height:1.62;text-wrap:pretty}

.hood{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-64) 96px;align-items:start}
.hood h2{
  margin:0;font-family:var(--font-display);font-weight:var(--fw-light);
  font-size:clamp(26px,3.4vw,40px);line-height:1.2;color:var(--c-kopi);text-wrap:pretty;
}
.hood .label{margin-bottom:20px}
.hood-body{display:flex;flex-direction:column;gap:var(--space-2xl);align-items:flex-start}
.hood-body p{margin:0;font-size:16px;line-height:1.75;color:var(--c-kopi);max-width:56ch;text-wrap:pretty}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-head{padding:var(--sp-112) var(--pad-page-x) var(--sp-64)}
.contact-head h1{
  margin:0;font-family:var(--font-display);font-weight:var(--fw-light);
  font-size:clamp(34px,5.8vw,76px);line-height:1.12;max-width:22ch;text-wrap:pretty;
}
.contact-head .label{margin-bottom:28px}
.visit{padding:0 var(--pad-page-x) var(--sp-112)}
.visit-inner{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:460px 1fr;gap:var(--sp-64) 64px;align-items:start}
.card-visit{
  background:var(--c-paper);padding:36px clamp(22px,4.5vw,40px) 40px;display:flex;flex-direction:column;
  font-family:var(--font-mono);font-size:16px;color:var(--c-ink);text-transform:uppercase;
  box-shadow:var(--shadow-acrylic);
}
.card-visit h2{
  font-family:var(--font-mono);font-size:12px;font-weight:var(--fw-regular);letter-spacing:.14em;
  color:var(--text-muted-aa);text-transform:uppercase;margin:0;line-height:1.4;
}
.card-visit address{font-style:normal;font-size:16px;line-height:1.7;margin-top:10px}
.rule-hair--card{border-top:1px solid var(--border-hairline);margin:22px 0 14px}
.rule-hair--card-b{border-top:1px solid var(--border-hairline);margin:22px 0}
.visit-row{display:flex;align-items:baseline;padding:8px 0;gap:0;flex-wrap:wrap}
.visit-row .nm{flex:none}
.visit-row .val{flex:none}
.visit-row--quiet{color:var(--text-muted-aa)}
.visit-row a{color:var(--c-ink);text-transform:none;text-decoration:none;border-bottom:1px solid var(--border-hairline)}
.visit-row a:hover{color:var(--c-matcha-bowl);border-bottom-color:var(--c-matcha-bowl)}
.card-visit h2 + .visit-row{margin-top:6px}
.visit-item .tc{display:inline-block;margin:0 0 4px}
.visit-note{font-size:13px;line-height:1.6;color:var(--text-muted-aa);text-transform:none;margin-top:4px}
/* the two ready-to-wire contact placeholders at the foot of the visit card */
.wire{display:grid;gap:10px;margin-top:14px}
.visit-note .tc{margin-left:2px}
.visit-map{display:flex;flex-direction:column;gap:var(--space-lg);min-width:0}
.map-frame{position:relative;height:clamp(300px,38vw,460px);background:#e6e7e3;border:var(--border-hair);overflow:hidden}
.map-frame iframe{width:100%;height:100%;border:0;display:block}
/* The canvas draws this as a 220px-tall letterbox with object-position 50% 45%. At real
   column widths that framing lands below the signboard, which is the one thing its own
   caption tells you to look for, so the frame is a touch taller and the focal point is
   moved up. Fixed aspect + cover either way: the height never follows adjacent content. */
.visit-shot{position:relative;aspect-ratio:22/9;min-height:180px;overflow:hidden;background:var(--c-steel-2);margin-top:var(--space-sm)}
.visit-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.visit-shot .band-scrim{background:linear-gradient(to top,rgba(26,26,24,.6),rgba(26,26,24,0) 55%)}
.visit-shot .cap{
  position:absolute;left:24px;right:24px;bottom:16px;font-family:var(--font-mono);font-size:13px;
  letter-spacing:var(--tr-signage);text-transform:uppercase;color:rgba(255,255,255,.92);
}

.route{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4xl) 56px;color:var(--c-kopi)}
.route-step{border-top:1px solid var(--c-houjicha);padding-top:20px}
.route-step .n{
  display:block;font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-houjicha);margin-bottom:10px;
}
.route-step h3{
  margin:0;font-family:var(--font-display);font-weight:var(--fw-light);
  font-size:clamp(22px,2.4vw,28px);line-height:1.22;color:var(--c-kopi);
}
.route-step p{margin:10px 0 0;font-size:16px;line-height:1.6;color:var(--c-kopi)}
.route-head{margin-bottom:var(--space-4xl)}

/* ============================================================
   SiteFooter — shared component, identical on all four pages
   ============================================================ */
.site-footer{background:var(--surface-ink);color:#fff;padding:var(--sp-88) var(--pad-page-x) 40px}
.footer-grid{display:grid;grid-template-columns:1.2fr .7fr 1fr 1fr;gap:var(--space-4xl) 56px;align-items:start}
.footer-brand{display:flex;flex-direction:column;gap:14px}
.footer-wordmark{
  display:inline-flex;align-items:baseline;font-family:var(--font-display);font-weight:var(--fw-regular);
  font-size:26px;letter-spacing:var(--tr-wordmark);text-indent:var(--tr-wordmark);line-height:1;
  text-transform:uppercase;color:#fff;text-decoration:none;align-self:flex-start;
}
.footer-wordmark:hover{color:#b7c37f}
.footer-drinks{display:flex;align-items:baseline;gap:10px}
.footer-drinks .cjk{font-size:14px;color:var(--on-ink-body)}
.footer-drinks .en{font-family:var(--font-display);font-size:10px;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--on-ink-quiet)}
.footer-col{display:flex;flex-direction:column;gap:12px}
.footer-col .head{
  font-family:var(--font-display);font-size:10px;font-weight:var(--fw-medium);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--on-ink-label);
}
.footer-col a{
  font-family:var(--font-display);font-size:12px;font-weight:var(--fw-medium);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--on-ink-strong);text-decoration:none;align-self:flex-start;
  padding:4px 0;
}
.footer-col a:hover{color:#b7c37f}
.footer-col a[aria-current="page"]{color:#b7c37f}
.footer-col address,.footer-col .line{
  font-family:var(--font-mono);font-size:14px;line-height:1.7;color:var(--on-ink-body);
  text-transform:uppercase;font-style:normal;
}
.footer-col .ig{
  font-family:var(--font-mono);font-size:14px;color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.35);align-self:flex-start;letter-spacing:0;text-transform:none;
}
.footer-col .ig:hover{color:#b7c37f;border-bottom-color:#b7c37f}
.footer-bottom{
  margin-top:var(--space-6xl);padding-top:var(--space-3xl);border-top:1px solid rgba(255,255,255,.16);
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-lg) var(--space-3xl);
  flex-wrap:wrap;font-family:var(--font-body);font-size:13px;line-height:1.5;color:rgba(255,255,255,.62);
}
.footer-demo{
  margin-top:var(--space-lg);font-family:var(--font-body);font-size:12px;line-height:1.6;
  color:var(--on-ink-quiet);
}

/* ============================================================
   Responsive — the canvases are drawn at 1440-1920; below that the
   fixed-width columns become fluid, then stack.
   ============================================================ */
@media (max-width:1180px){
  .hero-inner{gap:var(--sp-64) 56px}
  .story-inner{grid-template-columns:1fr 260px;gap:var(--sp-64)}
  .made-inner{grid-template-columns:300px 1fr;gap:var(--sp-64) 56px}
  .visit-inner{grid-template-columns:400px 1fr;gap:var(--sp-64) 40px}
  .menu-cols{gap:var(--sp-64) 56px}
  .footer-grid{gap:var(--space-4xl) 40px}
  .whisk-cell{padding:32px 24px 8px 0}
  .whisk-cell:nth-child(2){padding:32px 24px 8px}
  .whisk-cell:last-child{padding:32px 0 8px 24px}
}

@media (max-width:1080px){
  /* once the hero wraps, the two stacked blocks should share one left edge */
  .hero-side{max-width:496px}
}

@media (max-width:980px){
  .drink-grid{grid-template-columns:repeat(2,1fr);gap:32px}
  .story-inner{grid-template-columns:1fr;align-items:start}
  .story-facts{border-left:0;border-top:1px solid var(--border-hairline);padding-left:0;padding-top:20px}
  .made-inner{grid-template-columns:1fr}
  .made-aside{position:static}
  .visit-inner{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-4xl) 40px}
}

/* the drawer takes over below 900px */
@media (max-width:899px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .hood{grid-template-columns:1fr}
  .route{grid-template-columns:1fr}
  .whisk-grid{grid-template-columns:1fr;border-top:1px solid var(--c-ink)}
  .whisk-cell,.whisk-cell:nth-child(2),.whisk-cell:last-child{
    padding:26px 0 24px;border-right:0;border-bottom:1px solid var(--border-hairline);
  }
  .whisk-cell:last-child{border-bottom:0}
  .made-row{grid-template-columns:1fr;gap:10px}
  .made-row p{font-size:17px}
}

/* the printed card is two columns on desktop, one below 760px */
@media (max-width:760px){
  .menu-cols{grid-template-columns:1fr;gap:var(--sp-64)}
  .drink-grid{grid-template-columns:1fr;gap:40px}
  .hero-side{max-width:none}
  .band-cap{left:20px;right:20px;bottom:20px;font-size:12px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}
}

@media (max-width:600px){
  /* Both photo captions wrap to two lines on a phone, which lifts them out of the
     strongest part of the protection gradient — the Contact one landed white-on-pale
     over the market ceiling and was genuinely hard to read. The caption text shrinks
     and the SAME protection gradient is simply carried further up the frame, which is
     the one gradient the brand system permits. Nothing else about the frame changes. */
  .visit-shot .cap{left:20px;right:20px;font-size:12px;letter-spacing:.04em}
  .visit-shot .band-scrim{background:linear-gradient(to top,rgba(26,26,24,.8),rgba(26,26,24,0) 80%)}
  .band-photo .band-scrim{background:linear-gradient(to top,rgba(26,26,24,.8),rgba(26,26,24,0) 78%)}
  .footer-grid{grid-template-columns:1fr;gap:var(--space-4xl)}
  .sign-body{font-size:15px}
  .sign-stamp{font-size:15px}
  .card-visit{font-size:15px}
  .menu-row{font-size:15px}
  .visit-shot{aspect-ratio:16/9}
  .special-prices{gap:20px}
  .page-head-inner,.whisk-head,.menu-band-head,.rice-split{gap:var(--space-2xl)}
}

@media (max-width:560px){
  /* let the small qualifier drop under its own row instead of squeezing the
     name / leader / price line that carries the actual information */
  .sign-row .flag{order:9;flex-basis:100%;margin-left:0;margin-top:2px}
  .menu-row .serve{order:9;flex-basis:100%;margin-left:0;margin-top:2px}
  .drink-title{gap:8px}
}

/* the wordmark + unit lockup and the drawer toggle have to share one 320px line */
@media (max-width:430px){
  .site-header{gap:var(--space-lg)}
  .brand{gap:8px}
  .brand-mark{font-size:17px}
  .brand-unit{font-size:11px}
  .nav-toggle{padding:12px 13px;gap:8px}
}

/* keep long uppercase mono strings from forcing a scrollbar on tiny screens */
@media (max-width:380px){
  .sign-body,.card-visit{font-size:14px}
  .menu-row{font-size:14px}
  .footer-col address,.footer-col .line,.footer-col .ig{font-size:13px}
}