/* ============================================================
   126 點心 Dim Sum — Sims Avenue, Geylang — demo site stylesheet
   Design source: Claude Design v3 export "dimsum/export-v3"
   (Home / Menu / About / Contact canvases).

   NOTE: unlike the other v3 exports this one ships NO _ds/ token
   folder — the tokens live inline in the canvas markup. Every value
   in the two :root blocks below was read back out of those canvases
   and named here. Where a canvas colour pair fails WCAG AA at the
   size it is used, an AA-safe sibling is declared beside it with
   both measured ratios recorded in a comment.
   ============================================================ */

/* ---------- Tokens read out of the canvas markup ---------- */
:root{
  /* Surfaces */
  --paper:#F3EADA;          /* page ground */
  --white:#FFFFFF;          /* photo-frame ("polaroid") stock */
  --kraft:#E7D9C0;          /* order slip + timeline cards */
  --cream:#F5EEDD;          /* light button fill / text on red */
  --cream-warm:#F7E3C8;     /* body copy inside the red band */
  --night:#241C14;          /* footer */

  /* Brand */
  --sun:#F5C400;            /* signboard yellow */
  --gold:#B98B25;           /* inset rule inside the yellow panel */
  --gold-soft:#E0A93A;      /* footer column heads */
  --red:#C8181F;            /* primary red — fills + large display type */
  --red-deep:#A5121C;       /* section flags, wordmark */
  --red-dark:#8E1114;       /* small red text, hover */
  --jade:#6E9A7C;           /* the perforated divider strip */

  /* Ink */
  --ink:#221A12;            /* hard outlines + display type */
  --ink-body:#3D3226;       /* body copy */
  --ink-mute:#5B4C3C;       /* captions, sub-labels */
  --brown:#6B2A1C;          /* copy inside yellow panels */
  --night-text:#EFE2CC;
  --night-mute:#C6B79E;
  --night-rule:#453728;

  /* Fixed */
  --wa:#25D366;             /* official WhatsApp green — never re-themed */

  /* Type */
  --font-slab:"Alfa Slab One","Rockwell",Georgia,serif;
  --font-head:"Zilla Slab","Rockwell",Georgia,serif;
  --font-body:"Work Sans","Segoe UI",system-ui,sans-serif;
  --font-mono:"Courier Prime","Courier New",ui-monospace,monospace;
  --font-cjk:"Noto Serif TC","Songti TC","PMingLiU",serif;

  /* Rhythm */
  --gutter:clamp(18px,4vw,32px);
  --wrap:1240px;
  --wrap-mid:1000px;
  --wrap-narrow:780px;
  --sp-1:6px; --sp-2:12px; --sp-3:18px; --sp-4:24px; --sp-5:34px;
  --sp-6:48px; --sp-7:64px; --sp-8:84px;

  /* Effects */
  --hard:2px solid var(--ink);
  --drop-sm:4px 4px 0 rgba(34,26,18,.2);
  --drop-md:7px 7px 0 rgba(34,26,18,.16);
  --drop-lg:9px 9px 0 rgba(34,26,18,.16);
  --ease:cubic-bezier(.2,.7,.3,1);
  --speed:160ms;

  /* z-index ladder */
  --z-sticky:40; --z-header:50; --z-scrim:60; --z-drawer:61; --z-bar:55; --z-skip:200;
}

/* ---------- AA-safe variants (deviations from the canvas, measured)
   Ratios are computed against the surface named in each comment.
   ---------------------------------------------------------------- */
:root{
  /* --red #C8181F on --sun #F5C400 = 3.54:1 → passes AA only as LARGE text
     (>=24px, or >=18.7px bold). Anything smaller on yellow uses this instead. */
  --red-on-sun:#A5121C;            /* 4.73:1 on #F5C400 */
  /* --red #C8181F on --kraft #E7D9C0 = 4.18:1 → FAILS for normal text. */
  --red-on-kraft:#A5121C;          /* 5.58:1 on #E7D9C0 */
  /* Canvas used #7A5F3A for the slip's "clear" control: 4.28:1 on kraft → FAILS. */
  --mute-on-kraft:#6B2A1C;         /* 7.64:1 on #E7D9C0 */
  /* White on WhatsApp green is 1.98:1 and has never passed. The house green stays,
     the label goes dark — and it suits the ink-outlined button family anyway. */
  --wa-ink:var(--ink);             /* 8.64:1 on #25D366 */
  /* Decoration only, never behind text */
  --tex-line:rgba(34,26,18,.022);
  --rule-dot:rgba(34,26,18,.3);
  --scrim:rgba(24,17,12,.58);
}

/* Reference ratios for the plain pairs, measured once:
   ink #221A12 on paper #F3EADA .......... 14.36:1
   ink-body #3D3226 on paper ............. 10.46:1
   ink-mute #5B4C3C on paper .............. 6.91:1
   red #C8181F on paper ................... 4.88:1
   red-deep #A5121C on paper .............. 6.51:1
   red-dark #8E1114 on paper .............. 7.85:1
   ink #221A12 on sun #F5C400 ............ 10.43:1
   brown #6B2A1C on sun ................... 6.47:1
   cream #F5EEDD on red-deep #A5121C ...... 6.72:1
   sun #F5C400 on red-deep ................ 4.73:1
   cream-warm #F7E3C8 on red-deep ......... 6.21:1
   cream #F5EEDD on red #C8181F ........... 5.03:1
   night-text #EFE2CC on night #241C14 ... 13.12:1
   night-mute #C6B79E on night ............ 8.53:1
   sun #F5C400 on night .................. 11.01:1
   gold-soft #E0A93A on night ............. 7.92:1
   ink-mute #5B4C3C on white ............... 8.26:1
   red #C8181F on white .................... 5.82:1                       */

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background-color:var(--paper);
  background-image:
    radial-gradient(120% 80% at 14% 0%,rgba(255,255,255,.6),transparent 58%),
    radial-gradient(110% 90% at 100% 100%,rgba(185,139,37,.11),transparent 55%),
    repeating-linear-gradient(115deg,var(--tex-line) 0 2px,transparent 2px 7px);
  background-attachment:fixed;
  color:var(--ink-body);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;color:var(--ink);line-height:1.1}
p{margin:0}
/* height:auto is load-bearing. The width/height HTML attributes land as
   presentational hints on the `height` property; a used height of 875px then
   makes the browser ignore `aspect-ratio` completely, and every card photo
   renders at its own natural height instead of the frame's fixed ratio. */
img{max-width:100%;display:block;height:auto}
figure,blockquote{margin:0}
ul{margin:0;padding:0}
a{color:var(--red-dark);text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--speed) var(--ease)}
a:hover{color:var(--red-deep)}
::selection{background:var(--sun);color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.zh{font-family:var(--font-cjk)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:var(--z-skip);background:var(--ink);color:var(--cream);padding:12px 18px;font-family:var(--font-head);font-weight:700}
.skip-link:focus{left:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.wrap--mid{max-width:var(--wrap-mid)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.section{padding-top:var(--sp-8);padding-bottom:0}
.section--tight{padding-top:var(--sp-6)}
.section--last{padding-bottom:var(--sp-8)}

/* ---------- Type helpers ---------- */
.flag{display:inline-block;font-family:var(--font-mono);font-weight:700;font-size:13px;letter-spacing:.2em;color:var(--red-dark)}
.flag--sun{color:var(--sun)}
.lede{font-size:18px;line-height:1.6;color:var(--brown);max-width:54ch;text-wrap:pretty}
.copy{font-size:18px;line-height:1.7;color:var(--ink-body);max-width:62ch;text-wrap:pretty}
.mini{font-family:var(--font-mono);font-size:14px;line-height:1.7;letter-spacing:.05em;color:var(--ink-mute)}
.mini a{color:var(--red-dark)}
.cap{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--ink-mute)}
.h-slab{font-family:var(--font-slab);line-height:1.02;color:var(--ink)}
.h-head{font-family:var(--font-head);font-weight:700;line-height:1.1;color:var(--ink)}
.zh-flag{font-family:var(--font-cjk);font-weight:900;color:var(--red-deep)}

/* "confirm with owner" markers — these are meant to be seen by the owner */
.todo{
  display:inline-block;font-family:var(--font-mono);font-weight:700;font-size:12.5px;
  letter-spacing:.04em;line-height:1.5;color:var(--brown);
  background:var(--sun);border:1.5px solid var(--ink);padding:3px 8px;
}
.todo--block{display:block;max-width:62ch;padding:9px 12px;margin-top:10px}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 26px;border:var(--hard);cursor:pointer;
  font-family:var(--font-head);font-weight:700;font-size:18px;line-height:1.2;
  text-decoration:none;text-align:center;
  transition:background var(--speed) var(--ease),transform var(--speed) var(--ease),box-shadow var(--speed) var(--ease);
}
.btn:active{transform:translate(2px,2px)}
.btn svg{flex:none}
.btn--red{background:var(--red);color:var(--cream);box-shadow:5px 5px 0 rgba(34,26,18,.28)}
.btn--red:hover{background:var(--red-dark);color:var(--cream)}
.btn--red:active{box-shadow:3px 3px 0 rgba(34,26,18,.28)}
.btn--wa{background:var(--wa);color:var(--wa-ink);box-shadow:5px 5px 0 rgba(34,26,18,.24)}
.btn--wa:hover{background:#1FB855;color:var(--wa-ink)}   /* 6.7:1 with ink */
.btn--wa:active{box-shadow:3px 3px 0 rgba(34,26,18,.24)}
.btn--pale{background:var(--cream);color:var(--red-dark);box-shadow:4px 4px 0 rgba(34,26,18,.2)}
.btn--pale:hover{background:#F7DE86;color:var(--red-dark)}
.btn--lg{min-height:56px;font-size:20px;padding:0 30px}
.btn--sm{min-height:48px;font-size:16px;padding:0 18px}
.btn--block{width:100%}
.textlink{
  display:inline-block;font-family:var(--font-head);font-weight:700;font-size:17px;
  color:var(--red-dark);border-bottom:3px solid var(--red);padding-bottom:2px;text-decoration:none;
}
.textlink:hover{color:var(--red-deep);border-bottom-color:var(--red-dark)}

/* ============================================================
   Photo frames — every one is a fixed aspect + object-fit:cover,
   so an image's height is never tied to adjacent copy.
   ============================================================ */
.snap{display:block;background:var(--white);padding:9px 9px 0;border:var(--hard);box-shadow:var(--drop-md)}
.snap > img{width:100%;height:auto;object-fit:cover}
.snap .cap{padding:9px 2px 11px}
.snap--3x2 > img{aspect-ratio:3/2}
.snap--4x3 > img{aspect-ratio:4/3}
.snap--1x1 > img{aspect-ratio:1/1}
.snap--5x7 > img{aspect-ratio:5/7}
.snap--16x9 > img{aspect-ratio:16/9}
.snap--16x10 > img{aspect-ratio:16/10}
.tilt-a{transform:rotate(-1.1deg)}
.tilt-b{transform:rotate(1.3deg)}
.tilt-c{transform:rotate(-.5deg)}
.tilt-d{transform:rotate(.7deg)}

/* Owner-photo placeholder (house honesty rule) */
.photo-needed{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:var(--kraft);border:2px dashed var(--ink);padding:20px;text-align:center;
}
.photo-needed .label{font-family:var(--font-mono);font-weight:700;font-size:12px;letter-spacing:.1em;color:var(--brown)}
.photo-needed .sub{font-size:14px;line-height:1.5;color:var(--ink-mute);max-width:26ch}

/* ============================================================
   Top strip / header / nav
   ============================================================ */
.topstrip{
  background:var(--red-deep);color:var(--sun);
  font-family:var(--font-mono);font-weight:700;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;text-align:center;padding:8px 16px;
}
.topstrip .zh{font-family:var(--font-cjk);letter-spacing:.16em;text-transform:none}
.topstrip .dot{opacity:.7;padding:0 4px}

.site-header{
  position:sticky;top:0;z-index:var(--z-header);
  background:var(--sun);border-bottom:3px solid var(--red);box-shadow:0 3px 0 rgba(34,26,18,.14);
}
.nav{display:flex;align-items:center;gap:26px;min-height:74px;padding:10px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand img{width:44px;height:44px;border:var(--hard);flex:none}
.brand .names{display:grid;gap:2px}
.brand .en{font-family:var(--font-slab);font-size:19px;line-height:1;color:var(--red-deep)}
.brand .en .zh{font-family:var(--font-cjk);font-weight:900}
.brand .sub{font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brown)}
.nav-links{display:flex;gap:24px;margin-left:auto;font-family:var(--font-head);font-weight:700;font-size:17px}
.nav-links a{color:var(--ink);text-decoration:none;padding-bottom:3px;border-bottom:4px solid transparent}
.nav-links a:hover{color:var(--red-deep)}
.nav-links a[aria-current="page"]{color:var(--red-deep);border-bottom-color:var(--red)}
.nav-wa{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  min-height:46px;padding:0 16px;background:var(--wa);color:var(--wa-ink);
  border:var(--hard);box-shadow:3px 3px 0 rgba(34,26,18,.24);
  font-family:var(--font-head);font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;
}
.nav-wa:hover{background:#1FB855;color:var(--wa-ink)}
.nav-toggle{
  display:none;align-items:center;gap:9px;margin-left:auto;
  min-height:46px;padding:0 16px;background:var(--cream);color:var(--ink);
  border:var(--hard);box-shadow:3px 3px 0 rgba(34,26,18,.24);
  font-family:var(--font-head);font-weight:700;font-size:16px;cursor:pointer;
}
.nav-toggle .bars{display:inline-flex;flex-direction:column;gap:3px}
.nav-toggle .bars span{display:block;width:18px;height:2.5px;background:var(--ink)}

/* Drawer — hides IN PLACE with opacity/visibility. Never translateX():
   an off-screen transformed panel creates horizontal overflow on phones. */
.nav-backdrop{
  position:fixed;inset:0;z-index:var(--z-scrim);background:var(--scrim);
  opacity:0;visibility:hidden;transition:opacity var(--speed) var(--ease),visibility var(--speed) var(--ease);
}
.nav-backdrop[data-open="true"]{opacity:1;visibility:visible}
.nav-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:var(--z-drawer);width:min(330px,90vw);
  background:var(--paper);border-left:3px solid var(--ink);
  padding:16px 20px 26px;display:flex;flex-direction:column;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity var(--speed) var(--ease),visibility var(--speed) var(--ease);
}
.nav-drawer[data-open="true"]{opacity:1;visibility:visible}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.drawer-head img{width:40px;height:40px;border:var(--hard)}
.drawer-close{
  background:var(--cream);border:var(--hard);width:44px;height:44px;font-size:26px;line-height:1;
  color:var(--ink);cursor:pointer;font-family:var(--font-head);
}
.drawer-link{
  display:block;padding:14px 2px;font-family:var(--font-head);font-weight:700;font-size:19px;
  color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--rule-dot);
}
.drawer-link[aria-current="page"]{color:var(--red-deep)}
.drawer-cta{margin-top:20px;display:grid;gap:12px}
.drawer-note{font-family:var(--font-mono);font-size:12.5px;line-height:1.6;color:var(--ink-mute)}

/* ============================================================
   Shared decoration
   ============================================================ */
.perf{
  height:16px;margin-top:var(--sp-5);
  background:var(--jade);
  background-image:repeating-linear-gradient(90deg,rgba(34,26,18,.22) 0 1px,transparent 1px 15px);
  border-top:var(--hard);border-bottom:var(--hard);
}
.panel-sun{
  background:var(--sun);border:3px solid var(--red);
  box-shadow:inset 0 0 0 3px var(--sun),inset 0 0 0 6px var(--gold),var(--drop-lg);
  padding:clamp(24px,4vw,44px) clamp(20px,4vw,48px);
}
.chiprow{
  display:inline-flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:11px 24px;background:var(--red-deep);box-shadow:var(--drop-sm);
  font-family:var(--font-cjk);font-weight:900;font-size:19px;letter-spacing:.18em;color:var(--sun);
}
.stamp{
  display:inline-flex;align-items:center;padding:10px 18px;background:var(--sun);
  border:var(--hard);box-shadow:var(--drop-sm);
  font-family:var(--font-mono);font-weight:700;font-size:14px;letter-spacing:.08em;color:var(--red-dark);
}
.stamprow{display:flex;gap:12px;margin-top:var(--sp-5);flex-wrap:wrap}
.sectflag{
  display:inline-flex;align-items:center;gap:14px;padding:9px 22px;
  background:var(--red-deep);box-shadow:var(--drop-sm);
}
.sectflag .zh{font-family:var(--font-cjk);font-weight:900;font-size:24px;line-height:1;color:var(--sun)}
.sectflag .en{font-family:var(--font-head);font-weight:700;font-size:17px;letter-spacing:.12em;text-transform:uppercase;color:var(--sun)}

/* ============================================================
   Home — hero
   ============================================================ */
.hero{padding-top:var(--sp-6)}
.hero-panel{transform:rotate(-.35deg)}
.hero-title{margin:0;display:grid;gap:0}
.wm{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.wm-digits{display:flex;align-items:center;flex:none}
.wm-digits span{
  width:clamp(64px,9vw,96px);height:clamp(64px,9vw,96px);border-radius:999px;
  border:5px solid var(--red);background:var(--sun);
  display:grid;place-items:center;
  font-family:var(--font-slab);font-size:clamp(32px,4.6vw,48px);color:var(--red);
}
.wm-digits span + span{margin-left:-14px}
.wm-name{display:grid;gap:1px}
.wm-name .zh{font-family:var(--font-cjk);font-weight:900;font-size:clamp(38px,5.6vw,58px);line-height:1;letter-spacing:.05em;color:var(--red-deep)}
.wm-name .en{font-family:var(--font-slab);font-size:clamp(16px,2.2vw,22px);letter-spacing:.16em;color:var(--red-deep)}
.wm-addr{
  margin-left:auto;font-family:var(--font-mono);font-weight:700;font-size:14px;line-height:1.7;
  letter-spacing:.04em;color:var(--red-dark);text-align:right;
}
.shout{
  display:block;margin-top:var(--sp-5);
  font-family:var(--font-slab);font-size:clamp(44px,7.2vw,104px);line-height:.98;
  letter-spacing:-.01em;color:var(--red);
}
.hero-hours{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:var(--sp-4);
  font-family:var(--font-mono);font-weight:700;font-size:16px;letter-spacing:.05em;color:var(--brown);
}
.hero-actions{display:flex;align-items:center;gap:20px;margin-top:var(--sp-5);flex-wrap:wrap}
/* The photo hangs off the bottom-right corner of the yellow panel (canvas motif).
   The panel's own copy is all left-aligned, so the overlap never lands on text. */
.hero-figure{margin:-72px 0 0;display:flex;justify-content:flex-end}
.hero-figure .snap{max-width:400px;width:100%}

/* ============================================================
   Home — story / dish strip / red band
   ============================================================ */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-7);align-items:center}
.split--rev{grid-template-columns:1fr auto}
.split > figure{margin:0;display:flex;justify-content:center}
.split .snap{max-width:440px;width:100%}
.stack{display:grid;gap:var(--sp-3);justify-items:start}

.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-5)}
.trio figure{margin:0;background:var(--white);padding:10px 10px 0;border:var(--hard);box-shadow:var(--drop-md)}
.trio img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.trio figcaption{padding:14px 4px 16px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.trio .name{display:grid;gap:3px;min-width:0}
.trio .name .zh{font-family:var(--font-cjk);font-weight:700;font-size:20px;color:var(--ink);line-height:1.25}
.trio .name .en{font-size:14px;line-height:1.4;color:var(--ink-mute)}
.blob{
  flex:none;padding:7px 13px;border:2px solid var(--red);
  border-radius:58% 42% 52% 48%;
  font-family:var(--font-mono);font-weight:700;font-size:17px;color:var(--red);white-space:nowrap;
}
.blob--b{border-radius:46% 54% 44% 56%}
.blob--c{border-radius:54% 46% 58% 42%}

.band-red{
  background:var(--red-deep);
  background-image:repeating-linear-gradient(115deg,rgba(0,0,0,.05) 0 2px,transparent 2px 8px);
  border-top:var(--hard);border-bottom:var(--hard);
  padding:var(--sp-8) 0;margin-top:var(--sp-8);
}
.band-red h2{color:var(--cream)}
.band-red .copy{color:var(--cream-warm)}
.band-red .split{grid-template-columns:1fr auto;gap:var(--sp-6)}
.band-red .snap{max-width:410px;width:100%}

/* ============================================================
   Menu — the board
   ============================================================ */
.pagehead{padding-top:var(--sp-7);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap}
.pagehead .t{min-width:0}
.pagehead h1{margin-top:12px;font-family:var(--font-slab);font-size:clamp(36px,5.2vw,72px);line-height:1.02}
.pagehead .with-zh{display:flex;align-items:flex-end;gap:18px;margin-top:12px;flex-wrap:wrap}
.pagehead .with-zh h1{margin-top:0}
.pagehead .zh-big{font-family:var(--font-cjk);font-weight:900;font-size:clamp(34px,4.4vw,52px);line-height:1;color:var(--red-deep);padding-bottom:4px}
.pagehead p{max-width:38ch;font-size:17px;line-height:1.65;color:var(--ink-body)}

.board{margin-top:var(--sp-6)}
.board-group + .board-group{margin-top:var(--sp-6)}
.board-rows{margin-top:var(--sp-3)}
.row{
  display:flex;align-items:baseline;gap:12px;padding:11px 2px;
  border-bottom:1px dotted var(--rule-dot);flex-wrap:nowrap;
}
.row .zh{font-family:var(--font-cjk);font-weight:700;font-size:19px;color:var(--ink);white-space:nowrap}
.row .en{font-size:15.5px;color:var(--ink-mute);min-width:0}
.row .gap{flex:1 1 20px;min-width:12px}
.row .amt{flex:none;font-family:var(--font-mono);font-weight:700;font-size:17px;color:var(--red)}
.row .amt--ask{font-size:14px;color:var(--ink-mute);letter-spacing:.03em}
.board-note{margin-top:14px;font-family:var(--font-mono);font-size:13.5px;line-height:1.7;letter-spacing:.03em;color:var(--ink-mute);max-width:70ch}

/* minmax floor 280px, not 230px: at the 1176px content width 230px yields four
   columns and leaves the last row with two orphans. 280px gives a clean 3 x 2. */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-4)}
.gallery figure{margin:0;background:var(--white);padding:9px 9px 0;border:var(--hard);box-shadow:var(--drop-sm)}
.gallery img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.gallery figcaption{padding:11px 3px 13px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.gallery .n{display:grid;gap:2px;min-width:0}
.gallery .n .zh{font-family:var(--font-cjk);font-weight:700;font-size:17px;color:var(--ink);line-height:1.3}
.gallery .n .e{font-size:13.5px;color:var(--ink-mute);line-height:1.4}
.gallery .p{flex:none;font-family:var(--font-mono);font-weight:700;font-size:15px;color:var(--red)}

/* Order slip */
.slipgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7);align-items:start}
.slip{
  background:var(--kraft);
  background-image:repeating-linear-gradient(to bottom,transparent 0 33px,rgba(34,26,18,.14) 33px 34px);
  border:var(--hard);box-shadow:var(--drop-md);padding:20px 22px 18px;transform:rotate(-.5deg);
}
.slip-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding-bottom:8px}
.slip-head .t{font-family:var(--font-head);font-weight:700;font-size:18px;color:var(--ink)}
.slip-head .t .zh{font-family:var(--font-cjk);font-weight:900}
.slip-head .n{font-family:var(--font-mono);font-size:12px;color:var(--mute-on-kraft)}
.slip-rule{height:2px;background:var(--ink);margin-bottom:4px}
.slip-row{
  display:flex;align-items:center;gap:13px;padding:9px 4px;cursor:pointer;
  min-height:44px;transition:background var(--speed) var(--ease);
}
.slip-row:hover{background:rgba(255,255,255,.4)}
.slip-row input{position:absolute;opacity:0;width:0;height:0}
.slip-row .tick{
  width:24px;height:24px;flex:none;border:2px solid var(--red-on-kraft);background:transparent;
  display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:16px;
  color:var(--red-on-kraft);line-height:1;
}
.slip-row input:checked + .tick::before{content:"\2713"}
.slip-row input:focus-visible + .tick{outline:3px solid var(--ink);outline-offset:2px}
.slip-row .zh{font-family:var(--font-cjk);font-weight:700;font-size:17px;color:var(--ink)}
.slip-row .en{font-size:14px;color:var(--mute-on-kraft)}
.slip-row .gap{flex:1 1 8px;min-width:6px}
.slip-row .amt{flex:none;font-family:var(--font-mono);font-weight:700;font-size:16px;color:var(--red-on-kraft)}
.slip-total{
  border-top:2px dashed var(--ink);margin-top:12px;padding-top:12px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.slip-total .l{display:flex;align-items:center;gap:16px}
.slip-total .lab{font-family:var(--font-head);font-weight:700;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.slip-clear{
  background:none;border:none;padding:6px 2px;font-family:var(--font-body);font-size:15px;
  color:var(--mute-on-kraft);cursor:pointer;text-decoration:underline;min-height:44px;
}
.slip-total .sum{font-family:var(--font-mono);font-weight:700;font-size:26px;color:var(--red-on-kraft)}
.slip-foot{margin-top:8px;font-family:var(--font-mono);font-size:12.5px;line-height:1.6;color:var(--mute-on-kraft)}

/* ============================================================
   About
   ============================================================ */
.about-top{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sp-7);align-items:center;padding-top:var(--sp-7)}
.about-top h1{max-width:22ch;font-family:var(--font-slab);font-size:clamp(34px,4.6vw,68px);line-height:1.04;margin-top:14px}
.about-top figure{margin:0;display:flex;justify-content:center}
.about-top .snap{max-width:400px;width:100%}
.prose{display:grid;gap:var(--sp-4)}
.prose .kicker{font-family:var(--font-head);font-weight:700;font-size:clamp(23px,2.6vw,32px);line-height:1.25;color:var(--ink)}
.prose p{font-size:18px;line-height:1.75;color:var(--ink-body)}
.timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--sp-4)}
.tcard{background:var(--kraft);border:var(--hard);box-shadow:5px 5px 0 rgba(34,26,18,.16);padding:20px}
.tcard .y{font-family:var(--font-slab);font-size:30px;line-height:1.1;color:var(--red-on-kraft);display:block}
.tcard p{margin-top:12px;font-size:15.5px;line-height:1.6;color:var(--ink-body)}
.tcard--now{background:var(--sun)}
.tcard--now .y{color:var(--red-deep)}
.tcard--now p{color:var(--brown)}
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-5)}
.pair figure{margin:0}
.ctapanel{display:grid;grid-template-columns:1.4fr auto;gap:var(--sp-6);align-items:center;transform:rotate(-.3deg)}
.ctapanel h2{font-family:var(--font-slab);font-size:clamp(28px,4vw,58px);line-height:1.04;color:var(--red)}
.ctapanel .copy{color:var(--brown);max-width:52ch}

/* ============================================================
   Contact
   ============================================================ */
.outlets{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);margin-top:var(--sp-5)}
.outlet{padding:30px 28px}
.outlet--a{transform:rotate(-.4deg)}
.outlet--b{transform:rotate(.5deg)}
.outlet .head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.outlet .head .zh{font-family:var(--font-cjk);font-weight:900;font-size:24px;line-height:1;color:var(--red-deep)}
.outlet .head h2{font-family:var(--font-slab);font-size:clamp(26px,3vw,32px);line-height:1;color:var(--red)}
.outlet .addr{margin-top:18px;font-size:18px;line-height:1.55;color:var(--brown)}
.outlet .hrs{margin-top:8px;font-family:var(--font-mono);font-weight:700;font-size:16px;color:var(--red-dark)}
.outlet .tel{margin-top:12px;font-size:17px}
.outlet .tel a{color:var(--red-dark);font-weight:600}
.outlet .acts{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.outlet .todo{margin-top:14px;background:var(--cream);border-color:var(--ink)}

.maprow{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,320px);gap:var(--sp-5);align-items:start;margin-top:var(--sp-6)}
.maprow > figure{margin:0}
.mapframe{background:var(--white);padding:9px;border:var(--hard);box-shadow:var(--drop-md)}
.mapframe iframe{display:block;width:100%;height:440px;border:0;background:var(--kraft)}

.infogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-6);margin-top:var(--sp-7)}
.infoblock h2,.infoblock h3{font-family:var(--font-head);font-weight:700;font-size:26px;line-height:1.15}
.infoblock p{margin-top:12px;font-size:16.5px;line-height:1.7;color:var(--ink-body);max-width:44ch}
.linklist{margin-top:16px;list-style:none}
.linklist li{border-bottom:1px dotted var(--rule-dot)}
.linklist a,.linklist .off{
  display:flex;align-items:baseline;gap:12px;padding:12px 2px;
  font-family:var(--font-head);font-weight:700;font-size:17px;color:var(--ink);text-decoration:none;
}
.linklist a:hover{color:var(--red-deep)}
.linklist .gap{flex:1}
.linklist .mark{font-family:var(--font-mono);font-size:13px;font-weight:400;color:var(--red-dark);white-space:nowrap}
.linklist .off{color:var(--ink-mute);font-weight:400;font-family:var(--font-body);font-size:16px}

.faq{margin-top:var(--sp-4);border-top:var(--hard)}
.faq details{border-bottom:1px dotted var(--rule-dot)}
.faq summary{
  list-style:none;cursor:pointer;padding:18px 40px 18px 2px;position:relative;
  font-family:var(--font-head);font-weight:700;font-size:19px;line-height:1.35;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:6px;top:16px;
  font-family:var(--font-mono);font-weight:700;font-size:22px;color:var(--red-dark);
}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{color:var(--red-deep)}
.faq .a{padding:0 6px 20px 2px;font-size:16.5px;line-height:1.7;color:var(--ink-body);max-width:68ch}
.faq .a p + p{margin-top:10px}

/* ============================================================
   Footer + sticky mobile bar
   ============================================================ */
.site-footer{
  background:var(--night);
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.02) 0 2px,transparent 2px 8px);
  color:var(--night-text);margin-top:var(--sp-8);padding:var(--sp-7) 0 0;
}
.footer-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:var(--sp-6)}
.footer-brand .mark{display:flex;align-items:center;gap:12px}
.footer-brand .mark img{width:42px;height:42px;border:2px solid var(--night-rule)}
.footer-brand .wordmark{font-family:var(--font-slab);font-size:24px;line-height:1;color:var(--sun)}
.footer-brand .wordmark .zh{font-family:var(--font-cjk);font-weight:900}
.footer-brand p{margin-top:16px;max-width:34ch;font-size:15px;line-height:1.7;color:var(--night-mute)}
.footer-col .head{
  display:block;font-family:var(--font-mono);font-weight:700;font-size:13px;
  letter-spacing:.18em;color:var(--gold-soft);text-transform:uppercase;
}
.footer-col ul{list-style:none;margin-top:12px;display:grid;gap:8px}
.footer-col a{color:var(--night-text);text-decoration:none;font-size:15px}
.footer-col a:hover{color:var(--sun);text-decoration:underline}
.footer-col address{margin-top:12px;font-style:normal;font-size:15px;line-height:1.8;color:var(--night-text)}
.footer-col address a{color:var(--sun)}
.footer-col .hrs{font-family:var(--font-mono);font-weight:700;color:var(--sun)}
.footer-col .soft{color:var(--night-mute);font-size:14px}
.footer-bottom{
  border-top:1px solid var(--night-rule);margin-top:var(--sp-6);padding:16px 0 22px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:13px;color:var(--night-mute);
}

.mobile-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar);gap:10px;padding:9px 12px;
  background:var(--sun);border-top:3px solid var(--red);box-shadow:0 -4px 12px rgba(34,26,18,.18);
}
.mobile-bar .btn{flex:1;min-height:50px;font-size:16px;padding:0 8px;box-shadow:3px 3px 0 rgba(34,26,18,.24)}

/* ============================================================
   Responsive — verified at 360 / 414 / 768 / 1280 / 1900
   ============================================================ */
@media (max-width:1080px){
  .split,.band-red .split,.about-top{grid-template-columns:1fr;gap:var(--sp-6)}
  .split > figure,.about-top figure{justify-content:flex-start}
  .split .snap,.band-red .snap,.about-top .snap{max-width:480px}
  .slipgrid{grid-template-columns:1fr;gap:var(--sp-5)}
  .ctapanel{grid-template-columns:1fr;gap:var(--sp-4)}
  .outlets,.maprow{grid-template-columns:1fr}
  .maprow > figure{max-width:400px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp-5)}
  .hero-figure{margin-top:var(--sp-5);justify-content:flex-start}
  .hero-figure .snap{max-width:100%}
}
@media (max-width:900px){
  .nav-links,.nav-wa{display:none}
  .nav-toggle{display:inline-flex}
  .mobile-bar{display:flex}
  body{padding-bottom:72px}
  .section{padding-top:var(--sp-6)}
  .section--last{padding-bottom:var(--sp-6)}
  .band-red{padding:var(--sp-6) 0;margin-top:var(--sp-6)}
  .site-footer{margin-top:var(--sp-6)}
  .mapframe iframe{height:360px}
  .wm-addr{margin-left:0;text-align:left;width:100%}
  /* auto-fit gives 3 columns here, stranding the fourth card alone. Force 2 x 2. */
  .timeline{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  /* Kill every decorative rotation: a rotated block can push a corner
     past the viewport edge and create horizontal scroll on a phone. */
  .tilt-a,.tilt-b,.tilt-c,.tilt-d,.hero-panel,.slip,.outlet--a,.outlet--b,.ctapanel{transform:none}
  .footer-grid{grid-template-columns:1fr;gap:var(--sp-4)}
  .footer-bottom{justify-content:flex-start}
  .wm{gap:16px}
  .chiprow{gap:14px;padding:9px 16px;font-size:17px;letter-spacing:.1em}
  .hero-actions{gap:14px}
  .hero-actions .btn{width:100%}
  .trio figcaption,.gallery figcaption{flex-direction:column;align-items:flex-start;gap:8px}
  .pagehead{gap:var(--sp-4)}
  .pagehead p{max-width:none}
}
@media (max-width:640px){
  /* The single-line board row (name, English, leader, price) zig-zags on a
     phone. Two-column grid: name over English on the left, price at the right. */
  .row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:baseline;padding:12px 2px}
  .row .zh{grid-column:1;grid-row:1;white-space:normal}
  .row .en{grid-column:1;grid-row:2}
  .row .gap{display:none}
  .row .amt{grid-column:2;grid-row:1/span 2;align-self:center}
  .slip-row{flex-wrap:wrap;row-gap:2px}
  .slip-row .en{width:100%;padding-left:37px;order:5}
  .outlet{padding:24px 20px}
  .topstrip{font-size:11px;letter-spacing:.1em}
  .timeline{grid-template-columns:1fr}
}
@media (max-width:420px){
  .brand .en{font-size:17px}
  .brand .sub{font-size:11px;letter-spacing:.1em}
  .brand img{width:40px;height:40px}
  .mobile-bar .btn{font-size:15px}
  .slip{padding:16px 14px 14px}
  .slip-row .en{padding-left:0}
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
}