/* ==========================================================================
   King of Fried Rice — demo site stylesheet
   Design source: Claude Design v3 export (Home / Menu / About / Contact)
   plus its _ds token folder, encoded verbatim below in §1.
   ========================================================================== */

/* ==========================================================================
   §1  DESIGN TOKENS — transcribed verbatim from the export's _ds/tokens/*.css
   ========================================================================== */

/* --- colors.css ---------------------------------------------------------
   Every value sampled from the supplied brand assets (logo, signboards,
   standee, promo banners, menu boards, studio dish shots). */
:root{
  /* Wok Orange — the brand. Logo wordmark, signboards, crew tees, poster fields. */
  --kofr-orange-50:#fef4ea;
  --kofr-orange-100:#fde3cc;
  --kofr-orange-200:#fbc79c;
  --kofr-orange-300:#fda86a;
  --kofr-orange-400:#fc873c;
  --kofr-orange-500:#f47f20;   /* PRIMARY — sampled from logo wordmark */
  --kofr-orange-600:#e77723;
  --kofr-orange-700:#c9631a;
  --kofr-orange-800:#9c4c13;
  --kofr-orange-900:#6d350d;

  /* Chilli Red — flavour banners, "DON'T BE SHY" callouts, hot tags. */
  --kofr-red-50:#fdecee;
  --kofr-red-100:#fbd0d5;
  --kofr-red-300:#f4707d;
  --kofr-red-500:#eb1a2e;
  --kofr-red-600:#c8121f;
  --kofr-red-700:#9c0d18;

  /* Crown Gold — crown motif, chef's hat, 3D signage letters. */
  --kofr-gold-50:#fff8e6;
  --kofr-gold-100:#ffedbb;
  --kofr-gold-300:#fdd75f;
  --kofr-gold-400:#f9b233;
  --kofr-gold-500:#ffc327;
  --kofr-gold-600:#e0a410;
  --kofr-gold-700:#a97709;

  /* Kopitiam Navy + Cobalt — dark panels, plate illustrations. */
  --kofr-navy-500:#0a5570;
  --kofr-navy-700:#02445c;
  --kofr-navy-900:#013448;
  --kofr-cobalt-500:#1443a6;

  /* Ink — poster type, outlines, UI text. Warm-cool near-black, not pure #000. */
  --kofr-ink-900:#191a20;
  --kofr-ink-800:#2a2b33;
  --kofr-ink-700:#3a3c45;
  --kofr-ink-600:#4a4c55;
  --kofr-ink-500:#63666f;
  --kofr-ink-400:#7c7f88;
  --kofr-ink-300:#a9acb4;
  --kofr-ink-200:#d5d6db;
  --kofr-ink-100:#ebecef;

  /* Steamed-Rice Cream — the warm base. Never stark white for large fields. */
  --kofr-cream-50:#fdfaf3;
  --kofr-cream-100:#faf2e5;
  --kofr-cream-200:#f4e6ce;
  --kofr-cream-300:#e9d6b4;
  --kofr-white:#ffffff;

  /* Photography neutrals. */
  --kofr-plate-backdrop:#d8d7d8;
  --kofr-plate-ceramic:#8c8790;
  --kofr-plate-ceramic-dark:#5b565f;

  /* Flavour accents — the four house flavours, plus limited-run lines. */
  --kofr-flavour-egg:#f9b233;
  --kofr-flavour-xo:#c2451e;
  --kofr-flavour-tomyum:#e8552b;
  --kofr-flavour-mala:#c4161c;
  --kofr-flavour-kampung:#8a5a2b;
  --kofr-flavour-bacon:#e0554f;
}

/* --- typography.css ----------------------------------------------------- */
:root{
  --font-display:"Anton","Archivo Black","Arial Narrow",sans-serif;
  --font-heading:"Archivo Narrow","Archivo","Helvetica Neue",sans-serif;
  --font-condensed:"Archivo Narrow","Archivo","Arial Narrow",sans-serif;
  --font-body:"Hanken Grotesk","Archivo",system-ui,sans-serif;
  --font-accent:"Caveat Brush","Comic Sans MS",cursive;
  --font-type:"Special Elite","Courier New",monospace;
  --font-zh:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;

  --text-2xs:11px;  --text-xs:12px;  --text-sm:14px;  --text-base:16px;
  --text-md:18px;   --text-lg:20px;  --text-xl:24px;  --text-2xl:30px;
  --text-3xl:38px;  --text-4xl:48px; --text-5xl:64px; --text-6xl:84px;
  --text-7xl:112px;

  --leading-poster:0.88;
  --leading-tight:1.0;
  --leading-snug:1.15;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  --tracking-display:-0.015em;
  --tracking-heading:-0.01em;
  --tracking-normal:0;
  --tracking-caps:0.06em;
  --tracking-wide:0.14em;

  --weight-light:300;   --weight-regular:400; --weight-medium:500;
  --weight-semibold:600;--weight-bold:700;    --weight-extrabold:800;
  --weight-black:900;
}

/* --- spacing.css — 4px base grid --------------------------------------- */
:root{
  --space-0:0;    --space-px:1px; --space-0-5:2px; --space-1:4px;
  --space-1-5:6px;--space-2:8px;  --space-3:12px;  --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px;  --space-10:40px;
  --space-12:48px;--space-16:64px;--space-20:80px; --space-24:96px;
  --space-32:128px;--space-40:160px;

  --gutter-page:24px;
  --gutter-page-lg:48px;
  --container-max:1240px;
  --container-narrow:760px;
  --section-y:96px;
  --section-y-sm:64px;
}

/* --- radii.css ---------------------------------------------------------- */
:root{
  --radius-none:0;   --radius-xs:4px;  --radius-sm:8px;  --radius-md:12px;
  --radius-lg:18px;  --radius-xl:28px; --radius-2xl:40px;--radius-pill:999px;
  --border-hairline:1px; --border-thin:2px; --border-bold:3px; --border-poster:4px;
}

/* --- elevation.css ------------------------------------------------------ */
:root{
  --shadow-xs:0 1px 2px rgba(25,26,32,.08);
  --shadow-sm:0 2px 6px rgba(122,62,12,.10);
  --shadow-md:0 6px 18px rgba(122,62,12,.14);
  --shadow-lg:0 14px 40px rgba(122,62,12,.18);
  --shadow-xl:0 28px 70px rgba(122,62,12,.22);
  --shadow-poster:4px 4px 0 var(--kofr-ink-900);
  --shadow-poster-sm:3px 3px 0 var(--kofr-ink-900);
  --shadow-poster-orange:4px 4px 0 var(--kofr-orange-700);
  --shadow-press-inset:inset 0 3px 0 rgba(0,0,0,.16);
  --scrim-bottom:linear-gradient(to top,rgba(15,10,4,.82) 0%,rgba(15,10,4,.45) 42%,rgba(15,10,4,0) 100%);
  --scrim-top:linear-gradient(to bottom,rgba(15,10,4,.60) 0%,rgba(15,10,4,0) 100%);
}

/* --- motion.css --------------------------------------------------------- */
:root{
  --dur-instant:80ms; --dur-fast:120ms; --dur-base:200ms;
  --dur-slow:320ms;   --dur-slower:520ms;
  --ease-out:cubic-bezier(.2,.8,.25,1);
  --ease-in:cubic-bezier(.5,0,.9,.4);
  --ease-in-out:cubic-bezier(.6,0,.3,1);
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --lift-hover:-2px;
  --press-scale:.97;
}

/* --- semantic.css ------------------------------------------------------- */
:root{
  --surface-page:var(--kofr-cream-100);
  --surface-page-alt:var(--kofr-cream-50);
  --surface-card:var(--kofr-white);
  --surface-sunken:var(--kofr-cream-200);
  --surface-brand:var(--kofr-orange-500);
  --surface-brand-hover:var(--kofr-orange-600);
  --surface-brand-soft:var(--kofr-orange-50);
  --surface-hot:var(--kofr-red-500);
  --surface-hot-soft:var(--kofr-red-50);
  --surface-gold:var(--kofr-gold-500);
  --surface-inverse:var(--kofr-ink-900);
  --surface-deep:var(--kofr-navy-900);

  --text-primary:var(--kofr-ink-900);
  --text-secondary:var(--kofr-ink-600);
  --text-brand:var(--kofr-orange-600);
  --text-hot:var(--kofr-red-600);
  --text-on-brand:var(--kofr-white);
  --text-on-gold:var(--kofr-ink-900);
  --text-on-dark:var(--kofr-cream-50);
  --text-price:var(--kofr-ink-900);

  --border-subtle:var(--kofr-cream-300);
  --border-default:var(--kofr-ink-200);
  --border-strong:var(--kofr-ink-900);
  --border-brand:var(--kofr-orange-500);
  --border-focus:var(--kofr-navy-900);

  --btn-radius:var(--radius-pill);
  --card-radius:var(--radius-lg);
  --panel-radius:var(--radius-xl);
  --input-height:48px;
  --control-height-md:48px;
  --control-height-lg:58px;
}

/* ==========================================================================
   §2  PAGE PALETTE + ACCESSIBILITY-SAFE OVERRIDES
   Contrast ratios measured against the surface each colour actually sits on.
   Where a token from §1 fails WCAG AA at body size, an AA-safe sibling is
   defined here and the failing token is reserved for large display type only.
   ========================================================================== */
:root{
  --page:#f7edda;              /* poster cream — the v3 canvas page field */
  --panel:#fffdf7;             /* panel / card cream */
  --ink:var(--kofr-ink-900);   /* #191a20 on --page ....................... 14.95:1 */
  --ink-soft:#4a3a28;          /* body copy on --page ..................... 9.52:1  */
  --ink-soft-panel:#6b5540;    /* body copy on --panel .................... 6.91:1  */
  --kicker:#7a5a3c;            /* typewriter kickers on --page ............ 5.39:1  */

  /* Links. --kofr-orange-700 (#c9631a) measures only 3.41:1 on cream, which
     passes AA for LARGE text (>=24px bold / 32px regular) but FAILS at body
     size — so body links use orange-800 and #c9631a is reserved for the big
     Anton display accents below. */
  --link:var(--kofr-orange-800);      /* #9c4c13 on --page ................ 5.25:1  */
  --link-hover:var(--kofr-red-600);   /* #c8121f on --page ................ 5.04:1  */
  --display-accent:var(--kofr-orange-700); /* #c9631a, display sizes only .. 3.41:1 */

  /* Orange band. White text on #f47f20 is 2.32:1 and is never used. */
  --on-orange:var(--kofr-ink-900);    /* ink on #f47f20 ................... 6.53:1  */
  --on-orange-kicker:#4a2504;         /* kicker on #f47f20 ................ 5.10:1  */
  --on-orange-body:#3b2408;           /* body on #f47f20 .................. 5.49:1  */

  /* WhatsApp. Official green #25D366 with white text is 1.99:1 and FAILS, so
     the house button uses ink on green instead. */
  --whatsapp:#25d366;
  --on-whatsapp:var(--kofr-ink-900);  /* ink on #25d366 ................... 8.70:1  */

  /* Dark footer. */
  --foot-bg:var(--kofr-ink-900);
  --foot-fg:#f7edda;                  /* on #191a20 ....................... 14.95:1 */
  --foot-fg-soft:#cbc3b5;             /* on #191a20 ....................... 9.91:1  */
  --foot-fg-faint:#aba59b;            /* on #191a20 ....................... 7.07:1  */
  --foot-accent:var(--kofr-gold-500); /* #ffc327 on #191a20 ............... 10.81:1 */

  --rule:rgba(25,26,32,.25);
  --rule-dot:rgba(25,26,32,.32);

  --z-sticky:60;
  --z-header:70;
  --z-scrim:80;
  --z-drawer:90;
  --z-skip:100;
}

/* ==========================================================================
   §3  BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--text-md);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}

.page{
  position:relative;
  overflow-x:hidden;              /* contains the poster rotations */
  background-color:var(--page);
  background-image:
    radial-gradient(rgba(90,58,18,.055) 1px,transparent 1.3px),
    radial-gradient(rgba(90,58,18,.035) 1px,transparent 1.3px);
  background-size:7px 7px,11px 11px;
  background-position:0 0,3px 5px;
}

img{display:block;max-width:100%}

h1,h2,h3,h4{margin:0;letter-spacing:var(--tracking-heading)}
p{margin:0}
ul{margin:0}

a{color:var(--link);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--link-hover)}

:focus-visible{
  outline:3px solid var(--kofr-navy-900);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:var(--z-skip);
  background:var(--panel);color:var(--ink);
  border:var(--border-bold) solid var(--ink);
  padding:14px 22px;font-family:var(--font-heading);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--tracking-caps);text-decoration:none;
}
.skip-link:focus{left:16px;top:16px}

.wrap{
  max-width:1200px;margin-inline:auto;
  padding-inline:clamp(18px,4vw,28px);
}
.wrap--narrow{max-width:940px}

/* --- shared type utilities --------------------------------------------- */
.kicker{
  font-family:var(--font-type);
  font-size:15px;line-height:1.4;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--kicker);
}
.kicker--onOrange{color:var(--on-orange-kicker)}
.kicker--gold{color:var(--foot-accent)}

.display{
  font-family:var(--font-display);
  font-weight:400;
  line-height:.92;
  letter-spacing:var(--tracking-display);
  text-transform:uppercase;
  color:var(--ink);
  overflow-wrap:break-word;
}
h1.display{font-size:clamp(32px,8.6vw,92px)}
h2.display{font-size:clamp(29px,5.6vw,62px)}
/* A headline that lives in a half-width column needs its own ceiling — the
   full-bleed h1 size leaves long words like RESTAURANT KITCHEN, no room. */
h1.display--col{font-size:clamp(30px,4.2vw,58px)}
.display .accent{color:var(--display-accent)}

.board-title{
  font-family:var(--font-heading);
  font-weight:700;
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  color:var(--ink);
  font-size:clamp(20px,2.6vw,26px);
  line-height:1.12;
}

.zh{font-family:var(--font-zh);font-weight:400;color:var(--kicker);font-size:15px}
.hand{
  font-family:var(--font-accent);
  color:var(--kofr-navy-900);
  font-size:clamp(19px,2.2vw,23px);
  line-height:1.2;
}
.hand--hot{color:var(--kofr-red-600)}

.lede{
  font-size:var(--text-md);line-height:1.75;color:var(--ink-soft);
  max-width:56ch;
}
.note{
  font-size:var(--text-base);line-height:1.7;color:var(--ink-soft);
}
.note em{font-style:italic}

.brk{display:none}
@media (min-width:760px){ .brk{display:inline} }

/* --- poster devices ----------------------------------------------------- */
.panel{
  position:relative;
  background:var(--panel);
  border:var(--border-poster) solid var(--ink);
  box-shadow:8px 8px 0 rgba(25,26,32,.88);
}
.panel__inner{padding:22px clamp(18px,2.4vw,26px) 20px}

.tape{
  position:absolute;
  width:82px;height:26px;
  background:rgba(255,241,206,.72);
  border-left:1px solid rgba(25,26,32,.14);
  border-right:1px solid rgba(25,26,32,.14);
  pointer-events:none;
}

.rule{height:0;border-top:2px dashed var(--rule)}

.stamp{
  display:inline-block;
  border:var(--border-bold) solid rgba(1,52,72,.7);
  border-radius:6px;padding:6px 12px;
  font-family:var(--font-type);font-size:15px;
  letter-spacing:.14em;text-transform:uppercase;
  color:#013448;background:var(--page);
}

/* --- buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:12px 28px;
  font-family:var(--font-heading);font-weight:700;
  font-size:clamp(17px,1.5vw,20px);
  letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  border:var(--border-bold) solid var(--ink);
  transition:background var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out);
}
.btn svg{width:22px;height:22px;flex:none}

.btn--poster{background:var(--surface-brand);color:var(--on-orange);box-shadow:6px 6px 0 var(--ink)}
.btn--poster:hover{background:var(--surface-gold);color:var(--ink);box-shadow:3px 3px 0 var(--ink);transform:translate(3px,3px)}

.btn--cream{background:var(--panel);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.btn--cream:hover{background:var(--surface-gold);color:var(--ink);box-shadow:2px 2px 0 var(--ink);transform:translate(2px,2px)}

.btn--wa{background:var(--whatsapp);color:var(--on-whatsapp);box-shadow:4px 4px 0 var(--ink)}
.btn--wa:hover{background:#1fb955;color:var(--on-whatsapp);box-shadow:2px 2px 0 var(--ink);transform:translate(2px,2px)}

.btn--sm{min-height:48px;padding:10px 20px;font-size:16px;box-shadow:3px 3px 0 var(--ink)}

.btn-text{
  display:inline-flex;align-items:center;min-height:48px;padding:10px 2px;
  font-family:var(--font-heading);font-weight:700;font-size:18px;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--link);text-decoration-thickness:2px;
}
.btn-text:hover{color:var(--link-hover)}

.cta-row{display:flex;align-items:center;gap:clamp(16px,3vw,28px);flex-wrap:wrap}

/* ==========================================================================
   §4  HEADER / NAV / DRAWER / MOBILE BAR
   ========================================================================== */
.site-head{
  position:relative;z-index:var(--z-header);
  background:var(--surface-brand);
  border-bottom:var(--border-poster) solid var(--ink);
}
.site-head__bar{
  max-width:1200px;margin-inline:auto;
  padding:14px clamp(18px,4vw,28px);
  min-height:84px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brandbox{
  display:inline-flex;align-items:center;
  background:var(--panel);
  border:var(--border-bold) solid var(--ink);
  padding:6px 10px;
  box-shadow:4px 4px 0 var(--ink);
  transform:rotate(-1deg);
  text-decoration:none;
  flex:none;
}
.brandbox img{height:34px;width:auto}

.nav{display:flex;align-items:center;gap:4px}
.nav a{
  padding:12px 13px;
  font-family:var(--font-heading);font-weight:700;font-size:17px;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--on-orange);text-decoration:none;
}
.nav a:hover{background:var(--surface-gold);color:var(--ink)}
.nav a[aria-current="page"]{box-shadow:inset 0 -4px 0 var(--ink)}

.head-actions{display:flex;align-items:center;gap:10px}

.nav-toggle{
  display:none;align-items:center;gap:10px;
  min-height:48px;padding:8px 16px;
  background:var(--panel);color:var(--ink);
  border:var(--border-bold) solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  font-family:var(--font-heading);font-weight:700;font-size:16px;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
}
.nav-toggle .bars{display:grid;gap:4px;width:20px}
.nav-toggle .bars span{display:block;height:3px;background:var(--ink)}

.perf{
  height:9px;
  background-image:radial-gradient(circle at 10px 50%,rgba(25,26,32,.55) 0 2.6px,rgba(25,26,32,0) 3.2px);
  background-size:24px 9px;background-repeat:repeat-x;
}

/* drawer */
.scrim{
  position:fixed;inset:0;z-index:var(--z-scrim);
  background:rgba(25,26,32,.55);
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-base) var(--ease-out),visibility var(--dur-base);
}
.scrim.is-open{opacity:1;visibility:visible}

.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:var(--z-drawer);
  width:min(340px,86vw);
  background:var(--panel);
  border-left:var(--border-poster) solid var(--ink);
  padding:20px 22px calc(20px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:6px;
  overflow-y:auto;
  /* Hidden IN PLACE — never translated off-screen, which would create
     horizontal overflow at phone widths. */
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-base) var(--ease-out),visibility var(--dur-base);
}
.drawer.is-open{opacity:1;visibility:visible}

.drawer__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:var(--border-bold) solid var(--ink);
  padding-bottom:12px;margin-bottom:10px;
}
.drawer__head img{height:30px;width:auto}
.drawer__close{
  width:48px;height:48px;flex:none;
  background:var(--page);color:var(--ink);
  border:var(--border-thin) solid var(--ink);
  font-size:26px;line-height:1;cursor:pointer;
}
.drawer a.drawer__link{
  display:block;padding:14px 6px;
  font-family:var(--font-heading);font-weight:700;font-size:20px;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  border-bottom:1px dotted var(--rule-dot);
}
.drawer a.drawer__link:hover,
.drawer a.drawer__link[aria-current="page"]{color:var(--link)}
.drawer__cta{display:grid;gap:12px;margin-top:18px}
.drawer__cta .btn{width:100%}

/* sticky mobile contact bar */
.mobile-bar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);
  gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--panel);
  border-top:var(--border-bold) solid var(--ink);
}
.mobile-bar .btn{flex:1;min-height:52px;padding:10px 12px;font-size:15px;box-shadow:none}
.mobile-bar .btn:hover{transform:none;box-shadow:none}

/* ==========================================================================
   §5  SECTIONS
   ========================================================================== */
.sec{padding-block:clamp(48px,7vw,86px)}
.sec--tight{padding-block:clamp(34px,5vw,56px)}
.sec--top{padding-block:clamp(38px,6vw,64px) 0}

/* --- hero --------------------------------------------------------------- */
.hero{
  display:grid;grid-template-columns:1fr;gap:clamp(38px,5vw,56px);
  align-items:start;
  padding-block:clamp(34px,5vw,64px) clamp(20px,3vw,28px);
}
@media (min-width:1000px){ .hero{grid-template-columns:1.02fr .98fr} }

.hero__hours{
  display:flex;align-items:center;gap:14px;margin-top:clamp(26px,3vw,38px);
}
.hero__hours span:first-child{font-family:var(--font-type);font-size:15px;color:var(--kicker)}
.hero__hours .line{flex:1;height:0;border-top:2px dashed rgba(25,26,32,.22)}

/* the "Today on the board" receipt panel */
.board{margin-top:10px}
.board__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  border-bottom:var(--border-bold) solid var(--ink);padding-bottom:10px;
}
.board__figure{position:relative;margin:22px 0 6px}
/* `height:auto` is load-bearing everywhere a fixed aspect-ratio is declared:
   the img's HTML height attribute lands as a presentational hint and would
   otherwise win over aspect-ratio, letting the frame grow to the file's own
   pixel height. */
.board__figure img{
  width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  border:var(--border-bold) solid var(--ink);
}
/* red-500 (#eb1a2e) with cream type measures 4.37:1 and misses AA, so the
   sticker fill steps down the same ramp to red-600 (#c8121f) = 5.76:1. */
.sticker{
  position:absolute;
  background:var(--kofr-red-600);color:#fffdf7;
  border:var(--border-bold) solid var(--ink);border-radius:var(--radius-pill);
  padding:10px 15px;box-shadow:3px 3px 0 var(--ink);
  text-align:center;transform:rotate(6deg);
}
.sticker__label{
  font-family:var(--font-heading);font-weight:700;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;
}
.sticker__price{font-family:var(--font-display);font-size:26px;line-height:1.08}
.sticker--price{background:var(--surface-brand);color:var(--ink);padding:8px 14px}
.sticker--price .sticker__price{font-size:23px}

.rows{margin-top:16px;border-top:2px dashed var(--rule);padding-top:4px}
.row{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:10px 0;border-bottom:1px dotted var(--rule-dot);
}
.row__tab{
  width:26px;height:26px;flex:none;display:grid;place-items:center;
  background:var(--surface-brand);border:var(--border-thin) solid var(--ink);
  font-family:var(--font-heading);font-weight:700;font-size:14px;color:var(--ink);
}
.row__code{
  width:26px;height:26px;flex:none;display:grid;place-items:center;
  border:var(--border-thin) solid var(--ink);border-radius:50%;
  font-family:var(--font-heading);font-weight:700;font-size:13px;color:var(--ink);
}
.row__name{
  min-width:0;
  font-family:var(--font-heading);font-weight:700;font-size:18px;
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ink);
}
.row__zh{font-family:var(--font-zh);font-size:15px;color:var(--kicker)}
.row__gap{flex:1;min-width:8px}
.row__from{font-family:var(--font-type);font-size:14px;color:var(--kicker)}
.row__price{font-family:var(--font-display);font-size:23px;color:var(--text-price);white-space:nowrap}
.row__price--tbc{
  font-family:var(--font-heading);font-weight:700;font-size:15px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--kofr-red-700);
}
.row__note{flex-basis:100%;font-size:15px;color:var(--ink-soft-panel);margin-top:2px}

.board__foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-top:16px;
}
.board__foot span{font-size:15px;color:var(--ink-soft-panel)}

/* --- framed photos ------------------------------------------------------ */
.figure{position:relative}
.figure img{
  width:100%;
  border:var(--border-poster) solid var(--ink);
  box-shadow:8px 8px 0 rgba(25,26,32,.85);
}
.figure--tilt img{transform:rotate(-1.1deg)}
.figure--tilt-r img{transform:rotate(1.1deg)}
.figure__cap{
  margin-top:14px;
  font-family:var(--font-accent);color:var(--kofr-navy-900);
  font-size:clamp(18px,2vw,22px);line-height:1.25;
}
.ratio-3x2 img{height:auto;aspect-ratio:3/2;object-fit:cover}
.ratio-4x3 img{height:auto;aspect-ratio:4/3;object-fit:cover}
.ratio-16x10 img{height:auto;aspect-ratio:16/10;object-fit:cover}
.ratio-3x4 img{height:auto;aspect-ratio:3/4;object-fit:cover}

/* --- two-column split --------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr;gap:clamp(34px,5vw,60px);align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1.05fr}
  .split--media-right{grid-template-columns:1.05fr 1fr}
  .split--media-right .split__media{order:2}
}
.split__media{padding-block:6px}

/* --- orange band -------------------------------------------------------- */
.band{
  background:var(--surface-brand);
  border-top:var(--border-poster) solid var(--ink);
  border-bottom:var(--border-poster) solid var(--ink);
  margin-top:clamp(48px,7vw,88px);
}
.band__inner{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(28px,4vw,56px);flex-wrap:wrap;
  padding-block:clamp(44px,6vw,66px);
}
.band__copy{max-width:620px}
.band__copy .display{color:var(--on-orange)}
.band__copy p{color:var(--on-orange-body);font-size:var(--text-md);line-height:1.7;margin-top:20px}
.stat{
  background:var(--panel);border:var(--border-poster) solid var(--ink);
  box-shadow:7px 7px 0 var(--ink);
  padding:20px 26px;transform:rotate(-1.5deg);text-align:center;
}
.stat__num{font-family:var(--font-display);font-size:clamp(48px,7vw,72px);line-height:.98;color:var(--ink)}
.stat__label{
  font-family:var(--font-heading);font-weight:700;font-size:15px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-top:4px;
}
.stat__src{font-family:var(--font-type);font-size:15px;color:var(--kicker);margin-top:8px}

/* --- card grids --------------------------------------------------------- */
.grid{display:grid;gap:clamp(26px,3.4vw,36px)}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
/* The four flavour boards are a deliberate 2x2, not an auto-fit run that
   leaves a single orphan card on the last row at desktop widths. */
@media (min-width:820px){ .grid--boards{grid-template-columns:1fr 1fr} }

.dish{position:relative;padding-top:14px}
.dish__fig{position:relative}
.dish__fig img{
  width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  border:var(--border-poster) solid var(--ink);
  box-shadow:7px 7px 0 rgba(25,26,32,.85);
  transform:rotate(-.7deg);
}
.dish__name{
  margin-top:20px;
  font-family:var(--font-heading);font-weight:700;
  font-size:clamp(19px,2vw,21px);line-height:1.15;
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ink);
}
.dish__zh{font-family:var(--font-zh);font-size:15px;color:var(--kicker);margin-top:5px}
.dish__note{font-family:var(--font-accent);font-size:20px;color:var(--kofr-navy-900);margin-top:8px}

/* --- menu boards -------------------------------------------------------- */
.menu-board .panel__inner{padding-top:20px}
.menu-board__head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-bottom:var(--border-bold) solid var(--ink);padding-bottom:11px;
}
.menu-board__n{
  width:34px;height:34px;flex:none;display:grid;place-items:center;
  border:var(--border-bold) solid var(--ink);
  font-family:var(--font-display);font-size:20px;color:#fffdf7;
}
.menu-board__note{
  font-family:var(--font-type);font-size:15px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--kicker);margin-left:auto;
}
/* Flavour number tabs. Each fill takes whichever of ink / cream clears AA
   against it, measured individually — the four house colours do not share
   one safe foreground. */
.tab--egg{background:var(--kofr-flavour-egg);color:var(--kofr-ink-900)}    /* #f9b233 + ink ... 9.46:1 */
.tab--xo{background:var(--kofr-flavour-xo);color:#fffdf7}                  /* #c2451e + cream . 4.96:1 */
.tab--tomyum{background:var(--kofr-flavour-tomyum);color:var(--kofr-ink-900)} /* #e8552b + ink 4.76:1 */
.tab--mala{background:var(--kofr-flavour-mala);color:#fffdf7}              /* #c4161c + cream . 5.94:1 */

.addons{
  background:var(--surface-sunken);
  border:var(--border-bold) dashed rgba(25,26,32,.4);
  padding:20px clamp(18px,2.4vw,24px);
  display:flex;align-items:center;gap:clamp(16px,3vw,30px);flex-wrap:wrap;
}
.addons__label{
  font-family:var(--font-type);font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);
}
.addons li{list-style:none;font-size:16px;color:#3b2d1e}
.addons ul{display:flex;gap:clamp(16px,3vw,30px);flex-wrap:wrap;padding:0}
.addons b{font-family:var(--font-display);font-weight:400;font-size:21px}

/* --- quotes ------------------------------------------------------------- */
.quote{
  background:var(--panel);border:var(--border-poster) solid var(--ink);
  box-shadow:7px 7px 0 rgba(25,26,32,.88);
  padding:26px clamp(20px,2.6vw,28px);
}
.quote blockquote{
  margin:0;
  font-family:var(--font-heading);font-weight:700;
  font-size:clamp(19px,2.1vw,25px);line-height:1.24;
  letter-spacing:.01em;color:var(--ink);
}
.quote figcaption{margin-top:14px;font-size:16px;color:var(--ink-soft-panel)}

/* --- chips -------------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:12px;padding:0;margin-top:18px}
.chips li{list-style:none}
.chip{
  display:inline-block;
  background:var(--panel);border:var(--border-thin) solid var(--ink);
  box-shadow:3px 3px 0 rgba(25,26,32,.85);
  padding:9px 15px;
  font-family:var(--font-heading);font-weight:700;font-size:16px;
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ink);
}

/* --- gallery ------------------------------------------------------------ */
.gallery{display:grid;gap:clamp(22px,3vw,32px);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
/* 3:2 is the least-lossy common frame for this gallery: the 16:9 interiors
   lose ~16% side, the 4:3 storefronts ~11% top-and-bottom. */
.gallery img{
  width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border:var(--border-bold) solid var(--ink);
  box-shadow:6px 6px 0 rgba(25,26,32,.8);
}

/* --- notes columns ------------------------------------------------------ */
.notes{display:grid;gap:clamp(28px,3.6vw,44px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.notes p{margin-top:12px;font-size:16px;line-height:1.75;color:var(--ink-soft)}

/* --- FAQ ---------------------------------------------------------------- */
.faq{display:grid;gap:14px;max-width:880px}
.faq details{
  background:var(--panel);border:var(--border-bold) solid var(--ink);
  box-shadow:4px 4px 0 rgba(25,26,32,.85);
}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 20px;cursor:pointer;list-style:none;
  font-family:var(--font-heading);font-weight:700;
  font-size:clamp(17px,1.9vw,20px);
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink);
  min-height:56px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:22px;height:22px;flex:none;transition:transform var(--dur-base) var(--ease-out)}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq .ans{padding:0 20px 20px;font-size:17px;line-height:1.7;color:var(--ink-soft-panel)}
.faq .ans p + p{margin-top:12px}

/* --- info / contact ----------------------------------------------------- */
.info-grid{display:grid;gap:clamp(28px,3.6vw,36px);grid-template-columns:1fr}
@media (min-width:960px){ .info-grid{grid-template-columns:.86fr 1.14fr;align-items:stretch} }

.info-panel .panel__inner{display:flex;flex-direction:column;gap:20px;height:100%}
.info-block__label{
  font-family:var(--font-type);font-size:15px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--kicker);
}
.info-block__value{margin-top:6px;font-size:17px;line-height:1.6;color:#2c2418}
.info-block__value a{font-weight:600}
.info-tel{
  display:inline-block;margin-top:6px;
  font-family:var(--font-display);font-size:clamp(24px,3vw,30px);
  color:var(--ink);text-decoration:none;letter-spacing:.01em;
}
.info-tel:hover{color:var(--link)}

/* The map gets an explicit height rather than height:100%. Inside a stretched
   grid item, a percentage height resolves against the row — which the map's own
   siblings help define — and the frame then overflows its column and collides
   with the section below it. */
.map-frame{
  border:var(--border-poster) solid var(--ink);
  box-shadow:8px 8px 0 rgba(25,26,32,.88);
  background:var(--panel);padding:10px;
}
.map-frame iframe{
  width:100%;height:clamp(340px,58vw,440px);border:0;display:block;
  filter:sepia(.14) saturate(.94);
}
@media (min-width:960px){ .map-frame iframe{height:560px} }

/* --- outlets ------------------------------------------------------------ */
.region + .region{margin-top:clamp(34px,4.5vw,52px)}
.region__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  flex-wrap:wrap;border-bottom:var(--border-bold) solid var(--ink);
  padding-bottom:10px;margin-bottom:22px;
}
.region__count{font-family:var(--font-type);font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--kicker)}
.outlets{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));padding:0}
.outlet{
  list-style:none;
  background:var(--panel);border:var(--border-bold) solid var(--ink);
  box-shadow:4px 4px 0 rgba(25,26,32,.85);
  padding:18px 18px 16px;display:flex;flex-direction:column;gap:8px;
}
.outlet h4{
  font-family:var(--font-heading);font-weight:700;font-size:19px;
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ink);
}
.outlet address{font-style:normal;font-size:16px;line-height:1.55;color:var(--ink-soft-panel)}
.outlet .flag{
  font-family:var(--font-type);font-size:15px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--kofr-red-700);
}
.outlet a{
  margin-top:auto;align-self:flex-start;
  min-height:44px;display:inline-flex;align-items:center;
  font-family:var(--font-heading);font-weight:700;font-size:16px;
  letter-spacing:.08em;text-transform:uppercase;
}

/* --- form --------------------------------------------------------------- */
.form{display:grid;gap:16px;margin-top:18px}
.field{display:grid;gap:6px}
.field label{
  font-family:var(--font-heading);font-weight:700;font-size:16px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
}
.field input,.field textarea{
  font-family:var(--font-body);font-size:17px;color:var(--ink);
  background:var(--page);border:var(--border-thin) solid var(--ink);
  padding:12px 14px;min-height:var(--input-height);width:100%;
}
.field textarea{min-height:130px;resize:vertical}
.field .hint{font-size:15px;color:var(--ink-soft-panel)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--ink-soft-panel)}
.consent input{width:22px;height:22px;margin-top:3px;flex:none;accent-color:var(--kofr-orange-700)}

/* --- callout ------------------------------------------------------------ */
.callout{
  display:flex;gap:18px;align-items:flex-start;
  background:var(--kofr-cream-50);
  border:var(--border-bold) solid var(--ink);
  box-shadow:5px 5px 0 rgba(25,26,32,.85);
  padding:22px clamp(18px,2.4vw,26px);
}
.callout > svg{width:30px;height:30px;flex:none;color:var(--kofr-orange-700);margin-top:2px}
.callout h3{
  font-family:var(--font-heading);font-weight:700;font-size:clamp(19px,2vw,22px);
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink);
}
.callout p{margin-top:8px;font-size:17px;line-height:1.7;color:var(--ink-soft-panel)}

/* ==========================================================================
   §6  FOOTER
   ========================================================================== */
.site-foot{background:var(--foot-bg);color:var(--foot-fg)}
.site-foot__inner{padding-block:clamp(44px,6vw,56px) 30px}
.foot-grid{display:grid;gap:clamp(28px,4vw,44px);grid-template-columns:1fr}
@media (min-width:720px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .foot-grid{grid-template-columns:1.7fr 1fr 1fr 1.15fr} }

.foot-brand .brandbox{transform:rotate(-1deg);border-color:var(--surface-brand);box-shadow:none;padding:7px 11px}
.foot-brand .zh-mark{
  font-family:var(--font-zh);font-weight:900;font-size:23px;
  color:var(--foot-accent);margin-top:16px;
}
.foot-brand p{margin-top:10px;font-size:16px;line-height:1.65;color:var(--foot-fg-soft);max-width:34ch}

.foot-col h3{
  font-family:var(--font-type);font-weight:400;font-size:15px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--foot-accent);
  margin-bottom:12px;
}
.foot-col ul{padding:0;display:flex;flex-direction:column;gap:10px}
.foot-col li{list-style:none}
.foot-col a{color:var(--foot-fg);font-size:16px;text-decoration:none}
.foot-col a:hover{color:var(--foot-accent);text-decoration:underline}
.foot-col address{font-style:normal;font-size:16px;line-height:1.7;color:var(--foot-fg-soft)}
.foot-col address a{color:var(--foot-fg);text-decoration:underline}
.foot-col address a:hover{color:var(--foot-accent)}

.foot-social{display:flex;gap:12px;margin-top:16px}
.foot-social a{
  width:46px;height:46px;display:grid;place-items:center;
  border:var(--border-thin) solid rgba(247,237,218,.4);color:var(--foot-fg);
}
.foot-social a:hover{border-color:var(--foot-accent);color:var(--foot-accent)}
.foot-social svg{width:22px;height:22px}

.foot-legal{
  margin-top:36px;border-top:2px dashed rgba(247,237,218,.28);padding-top:18px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--font-type);font-size:15px;color:var(--foot-fg-faint);
}

/* ==========================================================================
   §7  RESPONSIVE
   ========================================================================== */
@media (max-width:899px){
  .nav{display:none}
  .head-actions .btn--wa{display:none}
  .nav-toggle{display:inline-flex}
  .mobile-bar{display:flex}
  body{padding-bottom:84px}
  .panel{box-shadow:5px 5px 0 rgba(25,26,32,.88)}
  .figure img{box-shadow:5px 5px 0 rgba(25,26,32,.85)}
  .dish__fig img{box-shadow:5px 5px 0 rgba(25,26,32,.85)}
  .quote{box-shadow:5px 5px 0 rgba(25,26,32,.88)}
  .map-frame{box-shadow:5px 5px 0 rgba(25,26,32,.88)}
  .stat{transform:rotate(-1deg)}
  .band__inner{align-items:flex-start}
  .stat{width:100%}
}
/* Narrow rows: keep the price locked to the right of the item name and drop the
   Chinese name to its own indented line, instead of letting the price wrap and
   land left-aligned under the dish. Applies until the boards are wide enough
   (~1180px viewport) to hold name + Chinese + price on one line. */
@media (max-width:1180px){
  .row{row-gap:2px}
  .row__tab,.row__code{order:1}
  /* `flex:1 1 0` is load-bearing, not cosmetic. A wrapping flex container
     breaks lines on each item's HYPOTHETICAL size (its content width) BEFORE
     any shrinking happens, so a long name like CRABMEAT & TOBIKO pushed the
     price onto a second line where it landed left-aligned — visible on all four
     boards between ~600px and ~900px. Giving the name a flex-basis of 0 means
     it never contributes to the line break; it then grows into whatever is left
     and wraps its own text, and the price stays pinned right on the first line.
     The gap must stop growing here or the name would only take half the slack
     and wrap far earlier than it needs to. */
  .row__name{order:2;flex:1 1 0}
  .row__gap{order:3;flex:0 0 8px}
  .row__from{order:4}
  .row__price{order:5}
  .row__zh{order:6;flex-basis:100%;padding-left:36px}
  .row__note{order:7}
}
@media (max-width:600px){
  .hero__hours .line{display:none}
}
@media (max-width:520px){
  .figure--tilt img,.figure--tilt-r img,.dish__fig img{transform:none}
  .brandbox img{height:28px}
  .panel__inner{padding:18px 16px 16px}
  .sticker{padding:8px 12px}
  .sticker__price{font-size:22px}
  .btn{width:100%}
  .cta-row{gap:14px}
  .cta-row .btn-text{width:100%}
  .mobile-bar .btn{width:auto}
  .drawer__cta .btn{width:100%}
}

/* ==========================================================================
   §8  MOTION PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .btn:hover{transform:none}
}

/* ==========================================================================
   §9  PRINT
   ========================================================================== */
@media print{
  .site-head,.drawer,.scrim,.mobile-bar,.site-foot{display:none}
  .page{background:#fff}
  .panel,.figure img{box-shadow:none}
}