/* ============================================================
   GUAN CHEE — "INK & EMBER"
   Art direction derived from the 1983 logo:
     · hand-drawn single-weight ink line  → the graphic system
     · chunky arced Clarendon wordmark    → Fraunces (soft/wonk)
     · red #EC2427 + navy #30367B         → straight from the artwork
   ============================================================ */

:root{
  /* Single-theme by intent, not omission: this is a mockup of a website, so it
     must look identical to every reviewer. The viewer's light/dark toggle is
     deliberately not applied — no dark-mode token overrides are defined. */
  color-scheme:light;

  /* Pulled from Guan Chee Logo.pdf (Illustrator CS6 vector).
     --red is the TRUE brand red and is used for the logo, the hand-drawn line
     art and rules — graphics, where 3:1 applies and it passes.
     Text and solid buttons use the deepened tints below, because white on
     #EC2427 is only 4.33:1 and fails WCAG AA for body-sized text. */
  --red:#EC2427;        /* graphics only */
  --red-cta:#D81E21;    /* solid buttons, white text — 5.09:1 */
  --red-ink:#C41A1D;    /* red text on light grounds — 5.36:1 */
  --red-deep:#B81619;   /* button hover — 6.63:1 */
  --navy:#30367B;
  --navy-deep:#232860;

  /* Grounds */
  --paper:#F7F2E9;        /* warm butcher paper — honours their cream, corrected */
  --paper-2:#FFFCF5;
  --paper-3:#EFE7D8;
  --ember:#1C1512;        /* where the food glows */
  --ember-2:#241B17;
  --ember-3:#100B09;

  /* Text */
  --ink:#241F1A;
  --ash:#6E665C;
  --ash-lo:#7D7263;
  --on-ember:#F3ECE1;
  --on-ember-mute:#A99C8D;

  --soy:#8B4A22;          /* lacquer note, for detail only */

  --maxw:1240px;
  --r-sm:4px; --r-md:10px; --r-lg:20px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.24s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Archivo",system-ui,sans-serif;
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* height:auto is load-bearing: every img carries width/height attributes for CLS,
   and without it the browser uses the literal attribute height and stretches
   the image instead of deriving the aspect ratio from the pair. */
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
a,button,.chip,.btn{touch-action:manipulation;-webkit-tap-highlight-color:rgba(236,36,39,.18)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:2px}

/* fixed nav would otherwise cover the heading of any in-page anchor target */
section[id]{scroll-margin-top:104px}

.skip{
  position:absolute;left:16px;top:-60px;z-index:300;
  background:var(--navy);color:#fff;padding:12px 20px;border-radius:0 0 8px 8px;
  font-weight:600;font-size:15px;transition:top .18s var(--ease);
}
.skip:focus{top:0}

h1,h2,h3,.display{
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 96;
  font-weight:700;line-height:1.02;letter-spacing:-.018em;
  margin:0;text-wrap:balance;
}
.cn{font-family:"Noto Serif TC","Fraunces",serif;font-weight:600}

.wrap{
  max-width:var(--maxw);margin:0 auto;
  padding-left:max(24px,env(safe-area-inset-left));
  padding-right:max(24px,env(safe-area-inset-right));
}
@media(min-width:900px){
  .wrap{padding-left:max(40px,env(safe-area-inset-left));padding-right:max(40px,env(safe-area-inset-right))}
}

/* ---------- shared bits ---------- */
.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red-ink);display:flex;align-items:center;gap:12px;margin:0 0 20px;
}
.eyebrow::after{content:"";height:1px;flex:1;max-width:70px;background:currentColor;opacity:.4}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{display:none}
.on-ember .eyebrow{color:#FF6B4A}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 30px;border-radius:100px;border:2px solid transparent;
  font-weight:600;font-size:16px;letter-spacing:.01em;
  transition:transform var(--dur) var(--ease),background var(--dur),color var(--dur),border-color var(--dur);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--red-cta);color:#fff}
.btn-primary:hover{background:var(--red-deep)}
.btn-ghost{border-color:currentColor;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.on-ember .btn-ghost,.hero .btn-ghost,.cater .btn-ghost,.c-head .btn-ghost,.page-head .btn-ghost{color:var(--on-ember)}
.on-ember .btn-ghost:hover,.hero .btn-ghost:hover,.cater .btn-ghost:hover,.c-head .btn-ghost:hover,.page-head .btn-ghost:hover{background:var(--on-ember);color:var(--ember);border-color:var(--on-ember)}

section{position:relative}
.on-ember{background:var(--ember);color:var(--on-ember)}
.pad{padding:88px 0}
@media(min-width:900px){.pad{padding:132px 0}}

/* hand-drawn underline that echoes the logo's line quality */
.squiggle{display:block;width:132px;height:12px;margin-top:18px;overflow:visible}
.squiggle path{fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round}

/* ============================================================ NAV */
.nav{
  position:fixed;left:0;right:0;top:0;z-index:100;
  transition:background .3s var(--ease),box-shadow .3s var(--ease),backdrop-filter .3s;
}
.nav-in{display:flex;align-items:center;gap:24px;height:74px}
.nav-logo{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.nav-logo img{height:46px;width:auto;transition:height .3s var(--ease)}
/* Item 1 — the mark reads small on desktop where there is room for it.
   Mobile is unchanged; the client said that view is right. */
@media(min-width:1000px){
  .nav-logo img{height:62px}
  .nav.solid .nav-logo img{height:52px}
}
.nav-links{display:none;margin-left:auto;gap:32px;align-items:center}
@media(min-width:1000px){.nav-links{display:flex}}
.nav-links a{
  font-size:15px;font-weight:500;color:var(--on-ember);position:relative;padding:6px 0;
  transition:color var(--dur);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .26s var(--ease);
}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)}
.nav-cta{margin-left:auto;height:44px;min-height:44px;padding:0 22px;font-size:15px}
@media(min-width:1000px){.nav-cta{margin-left:8px}}
.nav.solid{background:rgba(28,21,18,.92);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.nav.solid .nav-logo img{height:38px}
.burger{
  margin-left:auto;display:grid;place-items:center;width:46px;height:46px;
  background:none;border:0;color:var(--on-ember);
}
@media(min-width:1000px){.burger{display:none}}
.burger span{display:block;width:22px;height:2px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor}
.burger span::before{top:-7px}.burger span::after{top:7px}

.drawer{
  position:fixed;inset:0;z-index:99;background:var(--ember);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:0 max(32px,env(safe-area-inset-left));
  overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.drawer.open{opacity:1;visibility:visible;transform:none}
.drawer a{
  font-family:"Fraunces",serif;font-size:clamp(30px,9vw,44px);font-weight:700;
  color:var(--on-ember);padding:10px 0;border-bottom:1px solid rgba(255,255,255,.09);
}

/* ============================================================ HERO */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;background:var(--ember);overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,11,9,.72) 0%,rgba(16,11,9,.34) 34%,rgba(16,11,9,.80) 78%,rgba(16,11,9,.96) 100%);
}
.hero-in{position:relative;z-index:2;width:100%;padding-top:150px;padding-bottom:62px}
.hero-overline{
  color:#FFC7B4;font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:22px;
}
.hero-overline .cn{font-size:17px;letter-spacing:.12em;color:#FF8566;text-transform:none}
.hero h1{
  color:#fff;font-size:clamp(44px,8.6vw,104px);max-width:15ch;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 144;
}
.hero p.lede{
  color:#E3D8CB;max-width:52ch;margin:26px 0 0;font-size:clamp(16px,1.9vw,19px);line-height:1.62;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.scroll-hint{
  display:none;position:absolute;right:40px;bottom:56px;z-index:2;
  writing-mode:vertical-rl;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
@media(min-width:1100px){.scroll-hint{display:block}}
.scroll-hint::after{content:"";display:block;width:1px;height:52px;margin:12px auto 0;background:linear-gradient(rgba(255,255,255,.5),transparent)}

/* placeholder tag on generated imagery */
.ph-tag{
  position:absolute;z-index:3;right:14px;bottom:14px;
  background:rgba(16,11,9,.78);color:#F0D9B0;border:1px solid rgba(240,217,176,.32);
  font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  padding:5px 10px;border-radius:100px;backdrop-filter:blur(6px);pointer-events:none;
}
.ph-tag.light{background:rgba(255,252,245,.9);color:var(--soy);border-color:rgba(139,74,34,.3)}

/* ============================================================ TRUST */
.trust{background:var(--paper-3);border-bottom:1px solid rgba(36,31,26,.09)}
.trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:rgba(36,31,26,.1)}
@media(min-width:860px){.trust-grid{grid-template-columns:repeat(4,1fr)}}
.trust-cell{background:var(--paper-3);padding:34px 20px;text-align:center}
.trust-num{
  font-family:"Fraunces",serif;font-weight:700;font-size:clamp(32px,4.6vw,46px);
  color:var(--navy);line-height:1;font-variation-settings:"SOFT" 20,"WONK" 1,"opsz" 96;
}
.trust-lbl{font-size:12.5px;color:var(--ash);margin-top:9px;letter-spacing:.05em;line-height:1.45}

/* ============================================================ SIGNATURES */
.sig-head{display:grid;gap:22px;margin-bottom:56px}
@media(min-width:900px){
  .sig-head{grid-template-columns:1.05fr .95fr;align-items:end;gap:56px;margin-bottom:74px}
}
.sig-head h2{font-size:clamp(34px,5.6vw,62px);color:#fff;max-width:14ch}
.sig-head p{color:var(--on-ember-mute);margin:0;max-width:46ch}

.sig-grid{display:grid;gap:34px}
@media(min-width:760px){.sig-grid{grid-template-columns:repeat(3,1fr);gap:26px}}
.sig{display:block;position:relative}
.sig-img{position:relative;overflow:hidden;border-radius:var(--r-md);background:var(--ember-2);aspect-ratio:10/7}
.sig-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.sig:hover .sig-img img,.sig:focus-visible .sig-img img{transform:scale(1.045)}
.sig-name{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:22px 0 0;
  font-family:"Fraunces",serif;font-size:26px;font-weight:700;color:#fff;
  font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 72;
}
.sig-name .cn{font-size:23px;color:#FF7A57;font-weight:600}
.sig-rule{height:2px;background:var(--red);margin-top:12px;transform:scaleX(0);transform-origin:left;transition:transform .42s var(--ease)}
.sig:hover .sig-rule,.sig:focus-visible .sig-rule{transform:scaleX(1)}
.sig-desc{color:var(--on-ember-mute);font-size:15.5px;margin:14px 0 0;line-height:1.6}
.sig-price{
  margin-top:14px;font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:#C9A227;font-variant-numeric:tabular-nums;
}
@media(hover:none){ .sig-rule{transform:scaleX(1)} }

/* ============================================================ THREE WAYS */
.ways{display:grid;gap:2px;background:rgba(36,31,26,.11);border:1px solid rgba(36,31,26,.11);border-radius:var(--r-lg);overflow:hidden}
@media(min-width:840px){.ways{grid-template-columns:repeat(3,1fr)}}
.way{background:var(--paper-2);padding:44px 32px;display:flex;flex-direction:column;transition:background var(--dur)}
.way:hover{background:#fff}
.way-ico{width:52px;height:52px;margin-bottom:26px}
.way-ico path,.way-ico circle{fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.way h3{font-size:26px;margin-bottom:10px}
.way p{color:var(--ash);font-size:15.5px;margin:0 0 24px;flex:1}
.way-link{
  display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;color:var(--navy);
  align-self:flex-start;
}
.way-link svg{width:17px;height:17px;transition:transform var(--dur) var(--ease)}
.way-link path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.way:hover .way-link svg{transform:translateX(5px)}

/* ============================================================ STORY */
.story{background:var(--paper)}
.story-grid{display:grid;gap:48px}
@media(min-width:940px){.story-grid{grid-template-columns:1fr 1.02fr;gap:76px;align-items:center}}
.story h2{font-size:clamp(32px,5vw,56px);max-width:13ch}
.story p{color:var(--ash);max-width:50ch}
.story .lede{font-size:19px;color:var(--ink);line-height:1.6}
/* Stacked full-width rather than side-by-side: these are 1024px-wide landscape
   photographs and the only real heritage assets we have, so they earn the room.
   Two-up shrank them to thumbnails once the aspect ratio was corrected. */
.story-photos{display:grid;gap:26px;align-items:start}
.story-photos figure{margin:0;position:relative}
.story-photos img{border-radius:var(--r-md);width:100%;filter:saturate(.94)}
.story-photos figcaption{font-size:11.5px;color:var(--ash-lo);margin-top:9px;line-height:1.45}
.seal{
  width:74px;height:auto;margin-top:36px;opacity:.92;
  transition:transform .8s var(--ease);
}
/* The story section signs off with the full registered logo — red duck and
   源記 chop, GUAN CHEE in the blue the rest of the page borrows for --navy —
   rather than the chop alone. It does not tilt on scroll the way the chop did;
   a trademark should sit straight. */
.story-logo{width:140px;height:auto;margin-top:34px;display:block}

.creds{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;padding:0;list-style:none}
.creds li{
  font-size:12.5px;font-weight:500;color:var(--navy);background:rgba(48,54,123,.07);
  border:1px solid rgba(48,54,123,.16);border-radius:100px;padding:7px 15px;
  font-variant-numeric:tabular-nums;
}

/* ============================================================ OUTLETS */
.outlets{background:var(--paper-2);border-top:1px solid rgba(36,31,26,.08)}
.out-head{display:grid;gap:26px;margin-bottom:40px}
@media(min-width:900px){.out-head{grid-template-columns:1fr auto;align-items:end}}
.out-head h2{font-size:clamp(32px,5vw,56px)}
.filters{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  border:1.6px solid rgba(36,31,26,.2);background:transparent;color:var(--ink);
  border-radius:100px;padding:9px 18px;font-size:14px;font-weight:500;min-height:42px;
  transition:background var(--dur),color var(--dur),border-color var(--dur);
}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.out-count{font-size:13.5px;color:var(--ash-lo);margin:0 0 14px;letter-spacing:.02em}

.out-list{display:grid;gap:1px;background:rgba(36,31,26,.1);border-top:1px solid rgba(36,31,26,.1);border-bottom:1px solid rgba(36,31,26,.1)}
@media(min-width:820px){.out-list{grid-template-columns:1fr 1fr}}
.out{
  background:var(--paper-2);padding:26px 26px 26px 0;display:grid;
  grid-template-columns:auto 1fr;gap:20px;align-items:start;
  transition:background var(--dur),opacity .3s var(--ease),transform .3s var(--ease);
}
@media(min-width:820px){.out{padding-left:26px}}
.out:hover{background:#fff}
.out[hidden]{display:none}
.out-n{
  font-family:"Fraunces",serif;font-size:15px;font-weight:700;color:var(--red-ink);
  font-variant-numeric:tabular-nums;padding-top:4px;min-width:26px;
}
.out h3{font-size:19.5px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.flag{
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--red-cta);border-radius:100px;padding:3px 9px;
}
.out address{font-style:normal;color:var(--ash);font-size:14.5px;margin-top:7px;line-height:1.55}
.out-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:11px;font-size:13px;color:var(--ash-lo)}
.out-meta b{color:var(--ash);font-weight:600;font-variant-numeric:tabular-nums}

/* ============================================================ CATERING */
.cater{position:relative;overflow:hidden;background:var(--ember-3)}
.cater-media{position:absolute;inset:0}
.cater-media img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
/* mobile: darken from the top so the pig still reads at the foot of the section */
.cater-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,11,9,.96) 0%,rgba(16,11,9,.88) 52%,rgba(16,11,9,.30) 100%)}
@media(min-width:840px){
  .cater-media::after{background:linear-gradient(100deg,rgba(16,11,9,.95) 0%,rgba(16,11,9,.82) 46%,rgba(16,11,9,.35) 100%)}
}
.cater-in{position:relative;z-index:2;max-width:600px}
.cater h2{font-size:clamp(32px,5.2vw,58px);color:#fff}
.cater p{color:#D9CCBD;margin:22px 0 0}
.cater-terms{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:11px}
.cater-terms li{display:flex;gap:13px;align-items:flex-start;color:#CFC0AF;font-size:15.5px}
.cater-terms svg{width:19px;height:19px;flex:0 0 auto;margin-top:3px}
.cater-terms path{fill:none;stroke:#C9A227;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.price-tag{
  display:inline-flex;align-items:baseline;gap:9px;margin-top:32px;
  font-family:"Fraunces",serif;color:#fff;
}
.price-tag .from{font-family:"Archivo",sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#A99C8D}
.price-tag .amt{font-size:42px;font-weight:700;font-variant-numeric:tabular-nums;font-variation-settings:"SOFT" 24,"WONK" 1}

/* ============================================================ FOOTER */
.ft{background:var(--ember-3);color:var(--on-ember);padding:76px 0 34px}
.ft-grid{display:grid;gap:44px}
@media(min-width:820px){.ft-grid{grid-template-columns:1.25fr 1fr 1fr;gap:56px}}
.ft-logo{height:78px;width:auto;margin-bottom:24px}
.ft h4{font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:#FF6B4A;margin:0 0 18px;font-family:"Archivo",sans-serif}
.ft ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.ft a,.ft address,.ft li{color:var(--on-ember-mute);font-size:15px;font-style:normal;line-height:1.6}
.ft a{transition:color var(--dur)}
.ft a:hover{color:#fff}
.ft-bottom{
  margin-top:56px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;
  font-size:12.5px;color:#8A8073;
}
.ft-seal{width:44px;height:auto;opacity:.55;margin-left:auto}

/* ============================================================ MOCKUP BANNER */
/* System font on purpose: this banner is not part of the design, and letting it
   reflow when a webfont swaps in was single-handedly causing ~0.33 of CLS. */
.mock-note{
  background:var(--navy);color:#fff;font-size:11.5px;line-height:1.45;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  padding:9px 18px;text-align:center;position:relative;z-index:101;
  text-wrap:pretty;
}
@media(min-width:760px){.mock-note{font-size:13px;line-height:1.5;padding:11px 24px}}
.mock-note b{color:#FFD9A0}

/* ============================================================ MOTION */
/* hidden only when JS is running — no-JS and failed-JS still see everything */
.js [data-rise]{opacity:0;transform:translateY(26px)}
.js .rise-in{opacity:1;transform:none;transition:opacity .62s var(--ease),transform .62s var(--ease)}

.js .hero-overline,.js .hero h1,.js .hero .lede,.js .hero-cta{opacity:0;transform:translateY(22px)}
.loaded .hero-overline{animation:rise .82s var(--ease) .16s forwards}
.loaded .hero h1{animation:rise .82s var(--ease) .28s forwards}
.loaded .hero .lede{animation:rise .82s var(--ease) .44s forwards}
.loaded .hero-cta{animation:rise .82s var(--ease) .56s forwards}
@keyframes rise{to{opacity:1;transform:none}}

.hero-media img{transform:scale(1.07)}
.loaded .hero-media img{transition:transform 1.7s var(--ease);transform:scale(1)}

.squiggle path{stroke-dasharray:210;stroke-dashoffset:210}
.rise-in .squiggle path,.squiggle.drawn path{animation:draw 1s var(--ease) .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  .js [data-rise],.js .hero-overline,.js .hero h1,.js .hero .lede,.js .hero-cta{opacity:1!important;transform:none!important}
  .hero-media img{transform:none!important}
  .squiggle path{stroke-dashoffset:0!important}
  .sig-rule{transform:scaleX(1)!important}
}

/* ============================================================
   MENU PAGE
   ============================================================ */

/* compact ember band — a menu doesn't earn a full-viewport hero */
.page-head{background:var(--ember);color:var(--on-ember);padding:150px 0 62px;position:relative;overflow:hidden}
@media(min-width:900px){.page-head{padding:176px 0 78px}}
.page-head h1{font-size:clamp(40px,7vw,80px);color:#fff;font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 144}
.page-head .cn{color:#FF7A57;font-size:.42em;margin-left:.34em;letter-spacing:.04em}
.page-head p{color:var(--on-ember-mute);max-width:54ch;margin:22px 0 0}
.page-head .gc-duck{
  position:absolute;right:-70px;bottom:-70px;width:330px;opacity:.11;pointer-events:none;
}
@media(max-width:820px){.page-head .gc-duck{width:220px;right:-60px;bottom:-50px}}

/* jump chips */
.jump{position:sticky;top:74px;z-index:60;background:var(--paper);border-bottom:1px solid rgba(36,31,26,.1)}
.jump-in{display:flex;gap:8px;overflow-x:auto;padding:14px 0;scrollbar-width:none;-ms-overflow-style:none}
.jump-in::-webkit-scrollbar{display:none}
.jump a{
  flex:0 0 auto;font-size:14px;font-weight:500;padding:9px 16px;min-height:42px;
  display:inline-flex;align-items:center;border-radius:100px;
  border:1.6px solid rgba(36,31,26,.18);color:var(--ink);
  transition:background var(--dur),border-color var(--dur),color var(--dur);
}
.jump a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* menu sections */
.m-sec{padding:62px 0}
@media(min-width:900px){.m-sec{padding:86px 0}}
.m-sec + .m-sec{border-top:1px solid rgba(36,31,26,.1)}
.on-ember .m-sec + .m-sec{border-top-color:rgba(255,255,255,.12)}
.m-head{margin-bottom:34px;max-width:62ch}
.m-head h2{font-size:clamp(27px,3.7vw,40px)}
.m-head p{color:var(--ash);margin:14px 0 0;font-size:15.5px}
.on-ember .m-head p{color:var(--on-ember-mute)}

/* the price list itself */
.m-list{display:grid;gap:1px;background:rgba(36,31,26,.1)}
.on-ember .m-list{background:rgba(255,255,255,.11)}
@media(min-width:900px){.m-list{grid-template-columns:1fr 1fr}}
.m-row{
  background:var(--paper);padding:19px 4px;display:grid;
  grid-template-columns:1fr auto;gap:8px 22px;align-items:center;
  transition:background var(--dur);
}
@media(min-width:900px){.m-row{padding:19px 26px}}
.m-row:hover{background:var(--paper-2)}
.on-ember .m-row{background:var(--ember)}
.on-ember .m-row:hover{background:var(--ember-2)}
.m-name{font-family:"Fraunces",serif;font-weight:700;font-size:19px;letter-spacing:-.01em;font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 60}
.m-name .cn{font-size:17px;color:var(--red-ink);margin-left:9px;font-weight:600}
.on-ember .m-name{color:#fff}
.on-ember .m-name .cn{color:#FF7A57}
.m-price{
  font-weight:600;font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap;
  color:var(--navy);
}
.on-ember .m-price{color:#C9A227}
.m-note{grid-column:1/-1;color:var(--ash);font-size:14.5px;margin:0;line-height:1.5}

/* dish thumbnails — only on rows where Guan Chee actually has a photograph.
   The thumb spans both grid rows so the note still sits under the name. */
.m-row.has-th{grid-template-columns:auto 1fr auto}
.m-row.has-th .m-th{grid-row:1/-1;grid-column:1}
.m-row.has-th .m-note{grid-column:2/-1}
.m-th{
  width:58px;height:58px;border-radius:9px;object-fit:cover;display:block;
  background:var(--paper-2);
}
@media(min-width:900px){.m-th{width:66px;height:66px}}
/* no photograph yet — hold the space rather than fake the picture */
.m-th-none{background:rgba(36,31,26,.055);border:1px dashed rgba(36,31,26,.14)}

/* ============================================================ BEFORE / AFTER */
.ba{
  position:relative;--pos:50%;border-radius:var(--r-md);overflow:hidden;
  background:var(--ember);line-height:0;isolation:isolate;
}
.ba-img{width:100%;height:auto;display:block}
/* the older photograph sits on top, clipped to the left of the handle */
.ba-then{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-then .ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-line{
  position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;
  background:rgba(255,252,245,.92);pointer-events:none;z-index:3;
}
.ba-grip{
  position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;
  border-radius:50%;background:rgba(255,252,245,.95);
  box-shadow:0 2px 12px rgba(16,11,9,.4);
}
/* the two arrows on the grip */
.ba-grip::before,.ba-grip::after{
  content:"";position:absolute;top:50%;width:0;height:0;margin-top:-5px;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
}
.ba-grip::before{left:9px;border-right:6px solid var(--soy)}
.ba-grip::after{right:9px;border-left:6px solid var(--soy)}
/* Both shopfront photographs sit at roughly 92/255 luminance exactly where
   these labels go, so the old translucent dark pill separated from the image
   by only 2.36:1 and read as a smudge. A light pill on that same mid-tone
   ground measures 6.53:1. Brand red was tried and is the worst of the options
   at 1.31:1 — it lands on the same luminance as the photo and, on the 2026
   shot, competes with the red meats and signage. The shadow lifts the pill off
   a busy frame; the border keeps it from dissolving into a pale patch. */
.ba-tag{
  position:absolute;bottom:14px;z-index:3;pointer-events:none;
  font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:6px 12px;border-radius:100px;
  background:var(--paper-2);color:var(--ink);border:1px solid rgba(36,31,26,.16);
  box-shadow:0 2px 10px rgba(16,11,9,.34);
  line-height:1;
}
.ba-tag-l{left:14px}
.ba-tag-r{right:14px}
/* the real control, invisible over the whole image */
.ba-range{
  position:absolute;inset:0;width:100%;height:100%;z-index:4;
  margin:0;padding:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;
  background:transparent;
}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%;cursor:ew-resize}
.ba-range::-moz-range-thumb{width:44px;height:100%;border:0;border-radius:0;cursor:ew-resize}
.ba-range:focus-visible{outline:none}
.ba:has(.ba-range:focus-visible){outline:3px solid var(--red-ink);outline-offset:3px}
/* outlets + contact drop the wipe into a stretch panel that expects height:100%;
   without this the component collapses to its intrinsic height */
.ba-fill{height:100%}
.ba-fill .ba-img{height:100%;object-fit:cover}
.on-ember .m-th-none{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.on-ember .m-note{color:var(--on-ember-mute)}

/* add-ons row of chips */
.m-chips{display:flex;flex-wrap:wrap;gap:9px}
.m-chip{
  display:inline-flex;align-items:baseline;gap:9px;border:1px solid rgba(36,31,26,.16);
  background:var(--paper-2);border-radius:100px;padding:9px 17px;font-size:14.5px;
}
.m-chip b{font-variant-numeric:tabular-nums;color:var(--navy);font-weight:600}

/* provenance / disclaimer */
.m-source{
  display:flex;gap:14px;align-items:flex-start;
  border-left:3px solid var(--red);padding:2px 0 2px 18px;margin-top:34px;
  color:var(--ash);font-size:14.5px;line-height:1.6;max-width:70ch;
}
.on-ember .m-source{color:var(--on-ember-mute);border-left-color:#FF6B4A}
.m-source b{color:var(--ink);font-weight:600}
.on-ember .m-source b{color:#fff}

/* pre-order terms */
.m-terms{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:11px;max-width:62ch}
.m-terms li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px}
.m-terms svg{width:19px;height:19px;flex:0 0 auto;margin-top:3px}
.m-terms path{fill:none;stroke:#C9A227;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* closing CTA */
.m-cta{background:var(--paper-3);padding:70px 0;text-align:center}
.m-cta h2{font-size:clamp(28px,4.2vw,44px);max-width:18ch;margin:0 auto}
.m-cta p{color:var(--ash);max-width:52ch;margin:16px auto 0}
.m-cta .hero-cta{justify-content:center;margin-top:30px}

/* menu anchors must clear BOTH the fixed nav and the sticky jump bar */
.m-sec[id]{scroll-margin-top:156px}

/* an odd number of items would otherwise leave a dead half-row showing the
   grid's own background — let the last one span instead */
@media(min-width:900px){
  .m-list > .m-row:last-child:nth-child(odd){grid-column:1 / -1}
}

/* CJK breaks between any two characters by default, so a narrow name column
   splits 蜜汁排骨 into 蜜汁排 / 骨. Keep each dish name whole. */
.m-name .cn,.sig-name .cn{white-space:nowrap}

/* ============================================================
   OUTLETS PAGE
   ============================================================ */

.o-bar{position:sticky;top:74px;z-index:60;background:var(--paper);border-bottom:1px solid rgba(36,31,26,.1)}
.o-bar-in{display:flex;flex-wrap:wrap;gap:9px;align-items:center;padding:14px 0}
.o-bar .chip{min-height:44px}
.o-sep{width:1px;align-self:stretch;background:rgba(36,31,26,.16);margin:2px 6px}
@media(max-width:620px){.o-sep{display:none}}
.o-count{font-size:13.5px;color:var(--ash-lo);margin:0 0 22px;letter-spacing:.02em}

/* open / closed state — colour is never the only signal, the pill always has text */
.pill{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:5px 11px;border-radius:100px;white-space:nowrap;
}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.pill-open{color:#1F6B3A;background:rgba(31,107,58,.1)}
.pill-soon{color:#8A5200;background:rgba(138,82,0,.11)}
.pill-shut{color:#6E665C;background:rgba(110,102,92,.11)}

/* flagship gets its own treatment — it is a standalone coffee shop, the 1983
   original, the only outlet with a phone, and the collection point for roasts */
.flagship{
  display:grid;gap:0;border:1px solid rgba(36,31,26,.14);border-radius:var(--r-lg);
  overflow:hidden;background:var(--paper-2);margin-bottom:34px;
}
@media(min-width:900px){.flagship{grid-template-columns:1.05fr 1fr}}
.flagship-media{position:relative;min-height:230px;background:var(--ember-2)}
.flagship-media img{width:100%;height:100%;object-fit:cover}
.flagship-body{padding:32px 28px}
@media(min-width:900px){.flagship-body{padding:44px 40px}}
.flagship h2{font-size:clamp(26px,3.4vw,36px);margin-bottom:6px}
.flagship .unit{
  font-family:"Fraunces",serif;font-weight:700;font-size:22px;color:var(--red-ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}

/* outlet cards */
.o-grid{display:grid;gap:18px}
@media(min-width:760px){.o-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1120px){.o-grid{grid-template-columns:repeat(3,1fr)}}
.o-card{
  border:1px solid rgba(36,31,26,.14);border-radius:var(--r-md);background:var(--paper-2);
  padding:24px 22px;display:flex;flex-direction:column;gap:12px;
  transition:border-color var(--dur),background var(--dur),transform var(--dur) var(--ease);
}
.o-card:hover{border-color:rgba(36,31,26,.3);background:#fff;transform:translateY(-2px)}
.o-card[hidden]{display:none}
.o-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.o-card h3{font-size:20px;letter-spacing:-.01em}
.o-region{
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ash-lo);
  margin-top:5px;
}
/* the unit number is the whole point of this page */
.o-unit{
  font-family:"Fraunces",serif;font-weight:700;font-size:21px;color:var(--red-ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.1;
}
.o-venue{font-size:14px;color:var(--ash);margin-top:2px}
.o-addr{font-style:normal;color:var(--ash);font-size:14.5px;line-height:1.55;margin:0}
.o-hours{
  display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;color:var(--ash-lo);
  padding-top:12px;border-top:1px solid rgba(36,31,26,.1);margin-top:auto;
}
.o-hours b{color:var(--ash);font-weight:600;font-variant-numeric:tabular-nums}
.o-dir{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;
  color:var(--navy);align-self:flex-start;min-height:44px;
}
.o-dir svg{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.o-dir path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.o-card:hover .o-dir svg{transform:translateX(4px)}

.o-empty{
  border:1px dashed rgba(36,31,26,.26);border-radius:var(--r-md);
  padding:46px 26px;text-align:center;color:var(--ash);grid-column:1/-1;
}
.o-empty[hidden]{display:none}

/* the open/closed pill is computed at runtime — hide it when JS isn't running
   rather than showing a placeholder that never resolves */
[data-pill]{display:none}
.js [data-pill]{display:inline-flex}

/* ============================================================
   TOUCH TARGETS
   Audit across all three pages found inline links (footer contacts, the
   "see all ten" style links, nav items and the logo) sitting at 24–38px tall.
   The floor is 44px — Apple HIG and Material both — and this site's customer is
   standing in a food court holding a tray. Raise the hit area without changing
   how anything looks.
   ============================================================ */
.nav-links a,
.nav-logo,
.way-link,
.ft ul a,
.ft address a,
.o-dir,
.jump a,
.chip{min-height:44px}

.nav-links a,.nav-logo,.way-link,.ft ul a,.jump a{display:inline-flex;align-items:center}
.ft ul{gap:2px}          /* the rows are taller now; close the extra air */
.ft ul a{width:100%}     /* whole row is tappable, not just the glyphs */

/* calling the flagship is a real action, not incidental prose */
.o-hours a{min-height:44px;display:inline-flex;align-items:center}

/* ============================================================
   ORDER PAGE
   ============================================================ */

/* the three routes */
.routes{display:grid;gap:18px;margin-top:6px}
@media(min-width:860px){.routes{grid-template-columns:repeat(3,1fr)}}
.route{
  position:relative;
  border:1px solid rgba(36,31,26,.14);border-radius:var(--r-md);background:var(--paper-2);
  padding:30px 26px;display:flex;flex-direction:column;gap:14px;
  transition:border-color var(--dur),background var(--dur),transform var(--dur) var(--ease);
}
.route:hover{border-color:rgba(36,31,26,.3);background:#fff;transform:translateY(-2px)}
.route-ico{width:46px;height:46px}
.route-ico path,.route-ico circle{fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.route h3{font-size:23px}
.route p{color:var(--ash);font-size:15px;margin:0}
.route ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.route li{color:var(--ash);font-size:14.5px;padding-left:20px;position:relative}
.route li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;border:2px solid var(--red)}
.route .btn{margin-top:auto;align-self:flex-start}
.route-tag{
  font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--red-ink);background:rgba(196,26,29,.09);border-radius:100px;padding:5px 11px;
  /* out of flow, so a tag on one card doesn't shunt its heading out of line
     with the untagged cards beside it */
  position:absolute;top:24px;right:24px;
}

/* ---------- the enquiry form ---------- */
.form-wrap{display:grid;gap:34px;align-items:start}
@media(min-width:1000px){.form-wrap{grid-template-columns:1.35fr .8fr;gap:44px}}

fieldset{border:0;padding:0;margin:0 0 34px}
legend{
  font-family:"Fraunces",serif;font-weight:700;font-size:22px;letter-spacing:-.01em;
  padding:0;margin-bottom:6px;font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 60;
}
.legend-note{color:var(--ash);font-size:14.5px;margin:0 0 20px}

.field{display:grid;gap:7px;margin-bottom:18px}
.field label{font-weight:600;font-size:14.5px}
.req{color:var(--red-ink);margin-left:2px}
.hint{color:var(--ash-lo);font-size:13.5px;margin:0}
.field input,.field textarea{
  font:inherit;font-size:16px;                 /* 16px stops iOS zooming on focus */
  min-height:52px;padding:13px 16px;border-radius:var(--r-sm);
  border:1.6px solid rgba(36,31,26,.24);background:var(--paper-2);color:var(--ink);
  transition:border-color var(--dur),background var(--dur);width:100%;
}
.field textarea{min-height:110px;resize:vertical;line-height:1.55}
.field input:hover,.field textarea:hover{border-color:rgba(36,31,26,.42)}
.field input:focus,.field textarea:focus{border-color:var(--navy);background:#fff;outline:none}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.field[data-invalid] input,.field[data-invalid] textarea{border-color:var(--red-ink);background:rgba(196,26,29,.03)}
.err{color:var(--red-ink);font-size:13.5px;font-weight:500;margin:0;display:none}
.field[data-invalid] .err{display:flex;gap:7px;align-items:flex-start}
.err svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px}
.err path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.two-up{display:grid;gap:0 18px}
@media(min-width:620px){.two-up{grid-template-columns:1fr 1fr}}

/* item picker */
.pick{display:grid;gap:1px;background:rgba(36,31,26,.12);border:1px solid rgba(36,31,26,.12);border-radius:var(--r-md);overflow:hidden}
.pick-row{
  background:var(--paper-2);padding:15px 18px;display:grid;
  grid-template-columns:1fr auto auto;gap:10px 16px;align-items:center;
  transition:background var(--dur);
}
.pick-row[data-qty]:not([data-qty="0"]){background:#fff}
.pick-name{font-family:"Fraunces",serif;font-weight:700;font-size:17px;font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 60}
.pick-name .cn{font-size:15px;color:var(--red-ink);margin-left:8px;font-weight:600;white-space:nowrap}
.pick-unit{font-size:13.5px;color:var(--ash-lo);font-variant-numeric:tabular-nums;white-space:nowrap}
.stepper{display:flex;align-items:center;gap:0;border:1.6px solid rgba(36,31,26,.24);border-radius:100px;background:var(--paper-2)}
.stepper button{
  width:44px;height:44px;border:0;background:none;color:var(--ink);
  font-size:19px;line-height:1;border-radius:100px;
  display:grid;place-items:center;transition:background var(--dur),color var(--dur);
}
.stepper button:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.stepper button:disabled{opacity:.32;cursor:not-allowed}
.stepper input{
  width:46px;height:44px;border:0;background:none;text-align:center;
  font:inherit;font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;color:var(--ink);
  -moz-appearance:textfield;
}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper input:focus-visible{outline:3px solid var(--red);outline-offset:-2px;border-radius:100px}

/* running summary */
.summary{
  background:var(--ember);color:var(--on-ember);border-radius:var(--r-lg);
  padding:30px 26px;position:sticky;top:100px;
}
.summary h3{color:#fff;font-size:22px;margin-bottom:4px}
.summary .empty{color:var(--on-ember-mute);font-size:15px;margin:14px 0 0}
.sum-list{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:11px}
.sum-list li{display:grid;grid-template-columns:1fr auto;gap:14px;font-size:14.5px;align-items:baseline}
.sum-list .q{color:var(--on-ember-mute)}
.sum-list .v{font-variant-numeric:tabular-nums;font-weight:600;color:#fff}
.sum-tot{border-top:1px solid rgba(255,255,255,.16);margin-top:20px;padding-top:18px;display:grid;gap:10px}
.sum-tot div{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:baseline;font-size:15px}
.sum-tot .lbl{color:var(--on-ember-mute)}
.sum-tot .num{font-variant-numeric:tabular-nums;font-weight:700;color:#fff}
.sum-tot .big .num{font-family:"Fraunces",serif;font-size:27px;color:#C9A227;font-variation-settings:"SOFT" 24,"WONK" 1}
.sum-note{color:var(--on-ember-mute);font-size:13.5px;line-height:1.55;margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.16)}

/* submit + result */
.submit-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:8px}
.form-status{
  border-radius:var(--r-md);padding:18px 20px;margin-bottom:24px;display:none;gap:13px;align-items:flex-start;
  font-size:15px;line-height:1.55;
}
.form-status[data-show]{display:flex}
.form-status svg{width:21px;height:21px;flex:0 0 auto;margin-top:2px}
.form-status path{fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.status-ok{background:rgba(31,107,58,.09);color:#1F5C34;border:1px solid rgba(31,107,58,.26)}
.status-bad{background:rgba(196,26,29,.06);color:var(--red-ink);border:1px solid rgba(196,26,29,.24)}
.status-ok b,.status-bad b{font-weight:700}

/* ============================================================
   OUR STORY PAGE
   ============================================================ */

/* opening spread */
.s-open{display:grid;gap:34px;align-items:center}
@media(min-width:960px){.s-open{grid-template-columns:1fr 1.1fr;gap:60px}}
.s-open figure{margin:0}
.s-open img{width:100%;border-radius:var(--r-md);filter:saturate(.94)}
.s-open figcaption{font-size:12.5px;color:var(--ash-lo);margin-top:10px;line-height:1.5}
.pull{
  font-family:"Fraunces",serif;font-weight:700;font-size:clamp(23px,3vw,32px);
  line-height:1.24;letter-spacing:-.015em;margin:0 0 22px;text-wrap:balance;
  font-variation-settings:"SOFT" 34,"WONK" 1,"opsz" 90;
}
.s-open p{color:var(--ash);max-width:52ch}

/* the timeline — order genuinely carries meaning here */
.tl{list-style:none;padding:0;margin:0;position:relative}
.tl::before{
  content:"";position:absolute;left:7px;top:12px;bottom:12px;width:2px;
  background:linear-gradient(var(--red),rgba(236,36,39,.18));
}
@media(min-width:800px){.tl::before{left:104px}}
.tl li{position:relative;padding:0 0 40px 36px}
@media(min-width:800px){
  .tl li{display:grid;grid-template-columns:88px 1fr;gap:0 52px;padding-left:0}
}
.tl li::before{
  content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%;
  background:var(--paper);border:3px solid var(--red);
}
@media(min-width:800px){.tl li::before{left:97px}}
.tl-year{
  font-family:"Fraunces",serif;font-weight:700;font-size:23px;color:var(--red-ink);
  font-variant-numeric:tabular-nums;line-height:1.1;margin:0 0 6px;
  font-variation-settings:"SOFT" 24,"WONK" 1,"opsz" 60;
}
@media(min-width:800px){.tl-year{text-align:right;margin:0;font-size:25px}}
.tl h3{font-size:20.5px;margin-bottom:7px;letter-spacing:-.01em}
.tl h3 .cn{font-size:18px;color:var(--red-ink);margin-left:8px;font-weight:600;white-space:nowrap}
.tl p{color:var(--ash);margin:0;font-size:15.5px;max-width:56ch}
.tl figure{margin:16px 0 0}
.tl figure img{width:100%;max-width:330px;border:1px solid rgba(36,31,26,.14);border-radius:var(--r-sm)}
.tl figcaption{font-size:12px;color:var(--ash-lo);margin-top:8px}

/* how we roast */
.roast{display:grid;gap:34px;align-items:center}
@media(min-width:960px){.roast{grid-template-columns:1.1fr 1fr;gap:60px}}
.roast img{width:100%;border-radius:var(--r-md)}
.roast-pts{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:18px}
.roast-pts li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.roast-pts .n{
  font-family:"Fraunces",serif;font-weight:700;font-size:15px;color:var(--red-ink);
  font-variant-numeric:tabular-nums;padding-top:2px;
}
.roast-pts b{display:block;font-size:16.5px;margin-bottom:3px}
.roast-pts span.t{color:var(--on-ember-mute);font-size:15px;line-height:1.55}

/* press grid */
.press{display:grid;gap:16px}
@media(min-width:620px){.press{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.press{grid-template-columns:repeat(4,1fr)}}
.press figure{margin:0;background:var(--paper-2);border:1px solid rgba(36,31,26,.14);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column}
.press img{width:100%;aspect-ratio:7/5;object-fit:cover;object-position:center top}
.press figcaption{padding:15px 16px;font-size:13.5px;color:var(--ash);line-height:1.5}
.press figcaption b{display:block;color:var(--ink);font-weight:600;font-size:14.5px;margin-bottom:3px;font-variant-numeric:tabular-nums}

/* ============================================================
   CATERING PAGE
   ============================================================ */

/* full-bleed head with the roast behind it */
.c-head{position:relative;overflow:hidden;background:var(--ember-3);padding:150px 0 68px}
@media(min-width:900px){.c-head{padding:186px 0 96px}}
.c-head-media{position:absolute;inset:0}
.c-head-media img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.c-head-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,11,9,.94) 0%,rgba(16,11,9,.80) 46%,rgba(16,11,9,.55) 100%);
}
@media(min-width:900px){
  .c-head-media::after{background:linear-gradient(100deg,rgba(16,11,9,.95) 0%,rgba(16,11,9,.84) 44%,rgba(16,11,9,.38) 100%)}
}
.c-head .wrap{position:relative;z-index:2}
.c-head h1{font-size:clamp(40px,7vw,80px);color:#fff;font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 144}
.c-head p{color:#D9CCBD;max-width:52ch;margin:22px 0 0}

/* occasions */
.occ{display:grid;gap:18px}
@media(min-width:700px){.occ{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.occ{grid-template-columns:repeat(4,1fr)}}
.occ article{
  border:1px solid rgba(36,31,26,.14);border-radius:var(--r-md);background:var(--paper-2);
  padding:28px 24px;display:flex;flex-direction:column;gap:11px;
  transition:border-color var(--dur),background var(--dur),transform var(--dur) var(--ease);
}
.occ article:hover{border-color:rgba(36,31,26,.3);background:#fff;transform:translateY(-2px)}
.occ svg{width:42px;height:42px}
.occ svg path,.occ svg circle{fill:none;stroke:var(--red);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.occ h3{font-size:19.5px}
.occ p{color:var(--ash);font-size:14.5px;margin:0}

/* the three whole roasts */
.roasts{display:grid;gap:22px}
@media(min-width:820px){.roasts{grid-template-columns:repeat(3,1fr)}}
.roast-card{
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);overflow:hidden;
  background:var(--ember-2);display:flex;flex-direction:column;
  transition:border-color var(--dur),transform var(--dur) var(--ease);
}
.roast-card:hover{border-color:rgba(255,255,255,.3);transform:translateY(-3px)}
.roast-card .shot{position:relative;aspect-ratio:10/7;background:var(--ember-3)}
.roast-card .shot img{width:100%;height:100%;object-fit:cover}
.roast-card .body{padding:24px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.roast-card h3{font-size:21px;color:#fff}
.roast-card h3 .cn{font-size:18px;color:#FF7A57;margin-left:8px;font-weight:600;white-space:nowrap}
.roast-card .p{
  font-family:"Fraunces",serif;font-weight:700;font-size:27px;color:#C9A227;
  font-variant-numeric:tabular-nums;font-variation-settings:"SOFT" 24,"WONK" 1;
}
.roast-card p{color:var(--on-ember-mute);font-size:14.5px;margin:0}
.roast-card .btn{margin-top:auto;align-self:flex-start}

/* how it works */
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:22px}
@media(min-width:860px){.steps{grid-template-columns:repeat(4,1fr);gap:26px}}
.steps li{position:relative;padding-top:22px;border-top:2px solid var(--red)}
.steps li::before{
  counter-increment:s;content:"0" counter(s);
  font-family:"Fraunces",serif;font-weight:700;font-size:14px;color:var(--red-ink);
  font-variant-numeric:tabular-nums;display:block;margin-bottom:9px;
}
.steps b{display:block;font-size:18px;margin-bottom:6px;font-family:"Fraunces",serif;font-weight:700;letter-spacing:-.01em;font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 60}
.steps span{color:var(--ash);font-size:14.5px;line-height:1.55}

/* the open question panel */
.gap-panel{
  border:1.6px dashed rgba(196,26,29,.42);border-radius:var(--r-md);
  background:rgba(196,26,29,.035);padding:26px 24px;margin-top:34px;max-width:74ch;
}
.gap-panel h3{font-size:19px;margin-bottom:8px}
.gap-panel p{color:var(--ash);font-size:15px;margin:0 0 10px}
.gap-panel p:last-child{margin-bottom:0}

/* Settled guidance, not an open question — so no dashed "unresolved" border.
   A quiet rule and a tint, sitting on paper. */
.choose{
  border-left:3px solid var(--red-ink);border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--paper-3);padding:24px 26px;margin-top:34px;max-width:70ch;
}
.choose h3{font-size:20px;margin-bottom:8px}
.choose p{color:var(--ash);font-size:15.5px;margin:0}

/* ============================================================
   NEWS PAGE
   ============================================================ */

.n-grid{display:grid;gap:20px}
@media(min-width:760px){.n-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.n-grid{grid-template-columns:repeat(3,1fr)}}

.n-card{
  border:1px solid rgba(36,31,26,.14);border-radius:var(--r-md);background:var(--paper-2);
  padding:26px 24px;display:flex;flex-direction:column;gap:12px;
  transition:border-color var(--dur),background var(--dur),transform var(--dur) var(--ease);
}
.n-card:hover{border-color:rgba(36,31,26,.3);background:#fff;transform:translateY(-2px)}
.n-meta{
  display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  font-size:12.5px;color:var(--ash-lo);font-variant-numeric:tabular-nums;
}
.n-card h3{font-size:21px;letter-spacing:-.01em;line-height:1.18}
.n-card p{color:var(--ash);font-size:15px;margin:0}
.n-more{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;
  color:var(--navy);align-self:flex-start;margin-top:auto;min-height:44px;
}
.n-more svg{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.n-more path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.n-card:hover .n-more svg{transform:translateX(4px)}

/* age flag — a post this old should say so rather than pretend */
.n-age{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border-radius:100px;padding:4px 10px;white-space:nowrap;
}
.n-age-old{color:#8A5200;background:rgba(138,82,0,.11)}
.n-age-dead{color:var(--red-ink);background:rgba(196,26,29,.09)}
/* a live announcement, not a stale one — green rather than the amber/red warnings */
.n-age-new{color:#2E6B3A;background:rgba(46,107,58,.10)}

/* clearly-marked example cards — layout demonstration, not content */
.n-card.example{
  background:transparent;border-style:dashed;border-color:rgba(36,31,26,.3);
}
.n-card.example:hover{transform:none;background:rgba(36,31,26,.02)}
.n-card.example h3{color:var(--ash)}
.n-tag-eg{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy);background:rgba(48,54,123,.09);border-radius:100px;padding:4px 10px;
  align-self:flex-start;
}

/* the candid finding panel */
.finding{
  border-left:4px solid var(--red);background:var(--paper-3);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:30px 30px 30px 28px;max-width:78ch;
}
.finding h2{font-size:clamp(24px,3.2vw,32px);margin-bottom:14px}
.finding p{color:var(--ash);margin:0 0 13px;font-size:15.5px}
.finding p:last-child{margin-bottom:0}
.finding b{color:var(--ink)}
.finding ul{margin:0 0 13px;padding-left:20px;color:var(--ash);font-size:15.5px}
.finding li{margin-bottom:6px}
.finding li b{color:var(--ink)}

/* ============================================================
   CONTACT PAGE
   ============================================================ */

.inbox{display:grid;gap:18px}
@media(min-width:760px){.inbox{grid-template-columns:repeat(3,1fr)}}
.inbox article{
  border:1px solid rgba(36,31,26,.14);border-radius:var(--r-md);background:var(--paper-2);
  padding:28px 24px;display:flex;flex-direction:column;gap:11px;
  transition:border-color var(--dur),background var(--dur),transform var(--dur) var(--ease);
}
.inbox article:hover{border-color:rgba(36,31,26,.3);background:#fff;transform:translateY(-2px)}
.inbox svg{width:40px;height:40px}
.inbox svg path,.inbox svg circle,.inbox svg rect{fill:none;stroke:var(--red);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.inbox h3{font-size:19.5px}
.inbox p{color:var(--ash);font-size:14.5px;margin:0}
.inbox .addr{
  font-weight:600;font-size:15.5px;color:var(--navy);word-break:break-word;
  margin-top:auto;min-height:44px;display:inline-flex;align-items:center;
}

/* visit block */
.visit{display:grid;gap:0;border:1px solid rgba(36,31,26,.14);border-radius:var(--r-lg);overflow:hidden;background:var(--paper-2)}
@media(min-width:900px){.visit{grid-template-columns:1fr 1.05fr}}
.visit-media{min-height:230px;background:var(--ember-2)}
.visit-media img{width:100%;height:100%;object-fit:cover}
.visit-body{padding:32px 28px}
@media(min-width:900px){.visit-body{padding:44px 40px}}
.visit-body h2{font-size:clamp(24px,3.2vw,34px);margin-bottom:14px}
.visit-rows{display:grid;gap:14px;margin:20px 0 0}
.visit-rows div{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:baseline;font-size:15.5px}
.visit-rows dt,.visit-rows .k{
  font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ash-lo);
}
.visit-rows .v{color:var(--ink)}
.visit-rows .v b{font-variant-numeric:tabular-nums}
.visit-rows a{color:var(--navy);font-weight:600}

/* company footer detail */
.company{
  border-top:1px solid rgba(36,31,26,.12);margin-top:44px;padding-top:26px;
  display:flex;flex-wrap:wrap;gap:8px 32px;font-size:14px;color:var(--ash-lo);
}
.company b{color:var(--ash);font-weight:600}

/* phone numbers here are primary actions on a page whose whole job is contact */
.visit-rows a{min-height:44px;display:inline-flex;align-items:center}


/* ---------- dish strip ----------
   Guan Chee's own 2017 photographs, given their own place rather than salted
   through the price list. Thumbnails on some rows and not others left the list
   looking ragged, and the price list's job is to be scanned, not browsed.

   A horizontal strip also sidesteps a real constraint: every source file is
   400px wide, so at a 208px card they stay sharp on a retina screen. In a
   3-across grid they would be rendered near 1:1 and look soft. */
.strip-sec{background:var(--paper-3);padding:44px 0 40px;border-bottom:1px solid rgba(36,31,26,.1)}
.strip-head{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;margin-bottom:20px}
.strip-head h2{font-size:clamp(21px,2.6vw,27px)}
.strip-head p{color:var(--ash);font-size:14.5px;margin:0}
.strip{
  display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgba(36,31,26,.28) transparent;
}
.strip::-webkit-scrollbar{height:7px}
.strip::-webkit-scrollbar-thumb{background:rgba(36,31,26,.28);border-radius:100px}
.strip figure{
  /* 196px keeps the 400px source at 2.04x on a retina screen; 208 fell to 1.94 */
  margin:0;flex:0 0 196px;scroll-snap-align:start;
  border:1px solid rgba(36,31,26,.14);border-radius:var(--r-md);overflow:hidden;
  background:var(--paper-2);transition:border-color var(--dur),transform var(--dur) var(--ease);
}
.strip figure:hover{border-color:rgba(36,31,26,.32);transform:translateY(-2px)}
.strip img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.strip figcaption{padding:11px 13px 13px;font-size:13.5px;line-height:1.4;color:var(--ash)}
.strip figcaption b{display:block;color:var(--ink);font-weight:600;font-size:14.5px;margin-bottom:2px}
.strip figcaption .cn{color:var(--red-ink);font-weight:600;margin-left:5px}

/* ============================================================
   MARKETPLACE DELIVERY PARTNERS  (review item 4)
   Wordmarks, not logo files — we hold no licensed brand assets and an
   approximated logo looks worse than a well-set name. Drop in official
   SVGs when the client supplies them.
   ============================================================ */

.partners{margin-top:56px;padding-top:30px;border-top:1px solid rgba(36,31,26,.12)}
.partners-lbl{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ash-lo);margin-bottom:16px;font-weight:600;
}
.partners-row{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center;
}
.partners-row li{
  font-size:15px;font-weight:600;color:var(--ink);
  background:var(--paper-3);border:1px solid rgba(36,31,26,.12);
  border-radius:999px;padding:9px 18px;white-space:nowrap;
}
.on-ember .partners{border-top-color:rgba(255,255,255,.14)}
.on-ember .partners-lbl{color:rgba(255,255,255,.62)}
.on-ember .partners-row li{
  color:#fff;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);
}

/* ============================================================
   COLLECTION METHOD  (review item 12)
   An enquiry, not a checkout — but the delivery fee is money the
   customer will owe, so it belongs in the running total rather than
   as a footnote they discover later.
   ============================================================ */

.lbl-as-legend{
  display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:9px;
}
.collect{display:grid;gap:10px}
.collect-opt{
  display:flex;align-items:center;gap:13px;cursor:pointer;
  border:1.6px solid rgba(36,31,26,.16);border-radius:var(--r-md);
  padding:14px 16px;background:var(--paper-2);
  transition:border-color .2s var(--ease), background .2s var(--ease);
  min-height:44px;
}
.collect-opt:hover{border-color:rgba(196,26,29,.42)}
.collect-opt input{accent-color:var(--red-cta);width:19px;height:19px;flex:0 0 auto;margin:0}
.collect-opt:has(input:checked){border-color:var(--red-ink);background:#fff}
.collect-opt:has(input:focus-visible){outline:3px solid var(--navy);outline-offset:2px}
.collect-opt .ct{display:flex;flex-direction:column;gap:2px;flex:1 1 auto}
.collect-opt .ct b{font-size:15px;color:var(--ink)}
.collect-opt .ct span{font-size:13px;color:var(--ash)}
.collect-opt .cf{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap}

/* Partner logos replace the wordmark chips (meeting item 1). Each mark is
   normalised to one height so a square app icon sits level with a wordmark. */
.partners-row li{padding:8px 16px;display:inline-flex;align-items:center}
.partners-row li img{height:28px;width:auto;display:block;border-radius:5px}
/* Oddle and Grab are wordmarks and say their own name. foodpanda and CaterSpot
   are app icons — CaterSpot's own lettering is unreadable at 28px — so those two
   get the name in text beside the mark. Every chip names its platform. */
.partners-row li.has-name{gap:9px;padding-left:9px}
.partners-row li.has-name img{height:26px}

/* Honeypot. Off-screen rather than display:none — a bot that skips hidden
   fields would sail past that, and a real person never sees this one. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}