/* ==========================================================================
   No.17 Tea — Bukit Timah demo
   Design system: "No.17 Tea — Design System" (export-v1/_ds/…)
   Tokens below are encoded VERBATIM from _ds/tokens/{colors,typography,spacing,effects}.css
   ========================================================================== */

/* ---- tokens/colors.css (verbatim) --------------------------------------- */
:root{
/* Blossom pink — packaging bags, interiors */
--pink-50:#FDF5F2;--pink-100:#FBEAE5;--pink-200:#F7D8D0;--pink-300:#F3C5BC;--pink-400:#EBA69B;--pink-500:#DD8578;--pink-600:#C4645A;
/* Cream — menu boards, pages, paper */
--cream-50:#FDFBF6;--cream-100:#FAF4E9;--cream-200:#F6EBD8;--cream-300:#F0DEBE;--cream-400:#E8CD9E;
/* Antique gold — logo, frames, props */
--gold-300:#EFD9A7;--gold-400:#E3B963;--gold-500:#C9992F;--gold-600:#A87C22;--gold-700:#8A6420;
/* Rosewood — menu headers, prices, promos */
--rosewood-300:#DE9D82;--rosewood-400:#C96A54;--rosewood-500:#B34A3A;--rosewood-600:#94382C;
/* Pandan teal — seals, kiosk exteriors */
--pandan-300:#7FB0A7;--pandan-500:#3C7871;--pandan-600:#2C5D57;--pandan-700:#234A45;
/* Cocoa — promo display type, warm ink */
--cocoa-300:#A78B72;--cocoa-500:#6F4A2D;--cocoa-700:#4A3220;
/* Warm neutrals */
--ink:#3A2C22;--ink-soft:#6B5847;--ink-muted:#97836F;--line:#ECDCCB;--line-strong:#DCC7B0;--white:#FFFFFF;
/* Semantic */
--bg-page:var(--cream-100);--bg-wash:var(--pink-50);--bg-blush:var(--pink-100);--surface-card:var(--white);--surface-paper:var(--cream-200);
--text-body:var(--ink);--text-soft:var(--ink-soft);--text-muted:var(--ink-muted);--text-section:var(--rosewood-500);--text-price:var(--rosewood-500);
--brand-pink:var(--pink-300);--brand-gold:var(--gold-500);--brand-red:var(--rosewood-500);--brand-teal:var(--pandan-500);--brand-cocoa:var(--cocoa-500);
--action-primary:var(--rosewood-500);--action-primary-hover:var(--rosewood-600);--action-secondary:var(--pink-200);--action-secondary-hover:var(--pink-300);
--focus-ring:var(--gold-400);--success:var(--pandan-500);--danger:var(--rosewood-600);
--link:var(--rosewood-500);--link-hover:var(--rosewood-600);
}

/* ---- AA-safe additions ---------------------------------------------------
   Two design-system tokens do not clear WCAG AA (4.5:1) for normal-size text
   on this site's cream surfaces. They are kept above, verbatim and unchanged;
   these variants are used wherever the token would carry small text.

   --ink-muted  #97836F  on --cream-100 #FAF4E9 = 3.31:1  FAIL
   --ink-muted-aa #7B6552 on --cream-100        = 5.01:1  PASS
                          on --cream-50  #FDFBF6 = 5.31:1 PASS
                          on --cream-200 #F6EBD8 = 4.65:1 PASS
                          on --white            = 5.49:1  PASS

   --gold-600   #A87C22  on --cream-100          = 3.44:1  FAIL
   --gold-aa    #8A6420  on --cream-100          = 4.89:1  PASS
                          on --cream-200         = 4.53:1  PASS
                          on --white             = 5.35:1  PASS
   (--gold-aa is the system's own --gold-700, promoted to a text role.)

   --gold-500 #C9992F on --cream-50 = 2.37:1 — fails even the 3:1 non-text
   threshold, so the ♛ recommended glyph uses --gold-aa rather than --gold-500.
   --gold-400/500 remain in use for rules, borders and frames, which are
   decorative and carry no meaning on their own.
   -------------------------------------------------------------------------- */
:root{
--ink-muted-aa:#7B6552;
--gold-aa:#8A6420;
}

/* ---- tokens/typography.css (verbatim) ----------------------------------- */
:root{
--font-display:"DM Serif Display",Georgia,serif;
--font-serif:"Lora",Georgia,serif;
--font-sans:"Hanken Grotesk","Avenir Next",system-ui,sans-serif;
--font-script:"Pinyon Script",cursive;
--font-promo:"Oswald","Arial Narrow",sans-serif;
--font-cjk:"Noto Serif SC",serif;
--text-display-xl:56px;--text-display:40px;--text-title:28px;--text-heading:22px;--text-subhead:18px;--text-body:16px;--text-small:14px;--text-caption:12px;
--leading-tight:1.1;--leading-snug:1.3;--leading-body:1.6;
--tracking-caps:.14em;--tracking-wide:.05em;
--weight-body:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;
}

/* ---- tokens/spacing.css (verbatim) -------------------------------------- */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:32px;--space-8:40px;--space-9:48px;--space-10:64px;--space-11:80px;--space-12:96px;
--container:1120px;--container-narrow:720px;
}

/* ---- tokens/effects.css (verbatim) -------------------------------------- */
:root{
--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-pill:999px;
--octagon-clip:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
--shadow-card:0 6px 20px rgba(94,58,48,.08);--shadow-raise:0 10px 26px rgba(94,58,48,.12);--shadow-pop:0 18px 48px rgba(58,44,34,.18);
--border-hairline:1px solid var(--line);--border-gold:1px solid var(--gold-400);
--ease-out:cubic-bezier(.22,.61,.36,1);
--speed-fast:150ms;
--speed-med:220ms;
}

/* z-index scale.
   The backdrop sits BELOW the nav on purpose: .nav is sticky with a z-index,
   so it opens a stacking context that the drawer panel lives inside. A backdrop
   above the nav would therefore tint the open drawer as well as the page. */
:root{ --z-backdrop:30; --z-nav:40; --z-drawer:50; --z-skip:60; }

/* ==========================================================================
   Base reset — zero the UA defaults that break column layouts
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream-100);
  font-family:var(--font-sans);
  color:var(--text-body);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  overflow-x:hidden;
}
figure,blockquote{margin:0}           /* UA gives these margin:1em 40px */
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline;text-decoration-color:var(--gold-400)}
button{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--gold-aa);outline-offset:3px;border-radius:2px}

.skip-link{
  position:absolute;left:8px;top:-64px;z-index:var(--z-skip);
  background:var(--rosewood-500);color:var(--cream-50);
  padding:12px 20px;border-radius:var(--radius-pill);
  font-weight:600;font-size:15px;text-decoration:none;
  transition:top var(--speed-fast) var(--ease-out);
}
.skip-link:focus{top:8px;color:var(--cream-50)}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.page{display:flex;flex-direction:column;min-height:100vh}
main{flex:1}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.nav{
  position:sticky;top:0;z-index:var(--z-nav);
  background:rgba(250,244,233,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--container);margin:0 auto;padding:10px 24px;
  display:flex;align-items:center;gap:32px;
}
.nav-logo{display:flex;align-items:center;text-decoration:none;flex:none}
.nav-logo:hover{text-decoration:none}
.nav-logo img{height:88px;width:auto;display:block}

.nav-panel{display:flex;align-items:center;gap:32px;flex:1}
.nav-links{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.nav-links a{
  font-family:var(--font-sans);font-size:14.5px;font-weight:600;
  color:var(--ink-soft);text-decoration:none;
  padding:12px 14px;border-radius:var(--radius-pill);
  background:transparent;position:relative;
  display:inline-flex;align-items:center;min-height:44px;
  transition:background var(--speed-fast) var(--ease-out);
}
.nav-links a:hover{background:var(--pink-100);color:var(--ink-soft);text-decoration:none}
.nav-links a.is-active{font-weight:700;color:var(--rosewood-500)}
.nav-links a.is-active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:6px;
  height:2px;background:var(--gold-400);border-radius:2px;
}
.nav-cta{
  font-family:var(--font-sans);font-weight:600;font-size:14px;
  background:var(--action-primary);color:var(--cream-50);
  border:0;border-radius:var(--radius-pill);
  padding:9px 20px;min-height:44px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--speed-fast) var(--ease-out);
}
.nav-cta:hover{background:var(--action-primary-hover);color:var(--cream-50);text-decoration:none}

.nav-toggle{
  display:none;align-items:center;gap:8px;
  margin-left:auto;min-height:44px;padding:9px 16px;
  background:transparent;border:1px solid var(--gold-500);
  color:var(--cocoa-500);border-radius:var(--radius-pill);
  font-size:14px;font-weight:600;cursor:pointer;
}
.nav-toggle svg{width:18px;height:18px;flex:none}
.nav-backdrop{
  position:fixed;inset:0;z-index:var(--z-backdrop);
  background:rgba(58,44,34,.42);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--speed-med) var(--ease-out),visibility var(--speed-med) var(--ease-out);
}
.nav-backdrop.is-open{opacity:1;visibility:visible;pointer-events:auto}

@media (max-width:899px){
  .nav-inner{gap:12px;padding:8px 20px}
  .nav-logo img{height:64px}
  .nav-toggle{display:inline-flex}
  .nav-panel{
    position:fixed;left:0;right:0;top:0;z-index:var(--z-drawer);
    flex-direction:column;align-items:stretch;gap:8px;
    padding:20px 20px 28px;
    background:var(--cream-50);
    border-bottom:1px solid var(--gold-400);
    box-shadow:var(--shadow-pop);
    /* hidden IN PLACE — never translateX */
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity var(--speed-med) var(--ease-out),visibility var(--speed-med) var(--ease-out);
    max-height:100vh;overflow-y:auto;
  }
  .nav-panel.is-open{opacity:1;visibility:visible;pointer-events:auto}
  .nav-drawer-head{display:flex;justify-content:flex-end;margin-bottom:4px}
  .nav-close{
    display:inline-flex;align-items:center;gap:8px;
    min-height:44px;padding:9px 16px;background:transparent;
    border:1px solid var(--line-strong);color:var(--ink-soft);
    border-radius:var(--radius-pill);font-size:14px;font-weight:600;cursor:pointer;
  }
  .nav-close svg{width:16px;height:16px}
  .nav-links{flex-direction:column;gap:2px;width:100%}
  .nav-links a{font-size:17px;padding:14px 16px;min-height:48px;width:100%}
  .nav-links a.is-active::after{left:16px;right:auto;width:28px;bottom:10px}
  .nav-cta{width:100%;font-size:16px;min-height:48px;margin-top:12px}
}
@media (min-width:900px){
  .nav-drawer-head{display:none}
  .nav-backdrop{display:none}
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  font-family:var(--font-sans);font-weight:600;
  border:1px solid transparent;border-radius:var(--radius-pill);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;letter-spacing:.01em;text-decoration:none;white-space:nowrap;
  transition:background var(--speed-fast) var(--ease-out),color var(--speed-fast) var(--ease-out),
             border-color var(--speed-fast) var(--ease-out),transform var(--speed-fast) var(--ease-out);
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn--sm{padding:7px 16px;font-size:14px;min-height:44px}
.btn--md{padding:10px 22px;font-size:15px;min-height:44px}
.btn--lg{padding:14px 30px;font-size:17px;min-height:52px}
.btn--primary{background:var(--action-primary);color:var(--cream-50)}
.btn--primary:hover{background:var(--action-primary-hover);color:var(--cream-50)}
.btn--secondary{background:var(--action-secondary);color:var(--rosewood-600)}
.btn--secondary:hover{background:var(--action-secondary-hover);color:var(--rosewood-600)}
.btn--outline{background:transparent;color:var(--cocoa-500);border-color:var(--gold-500)}
.btn--outline:hover{background:var(--cream-200);color:var(--cocoa-500)}
.btn--ghost{background:transparent;color:var(--rosewood-500)}
.btn--ghost:hover{background:var(--pink-100);color:var(--rosewood-500)}

/* ==========================================================================
   Badge / Tag
   ========================================================================== */
.badge{
  font-family:var(--font-sans);font-weight:600;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;
  padding:3px 10px;border-radius:var(--radius-pill);
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
}
.badge__mark{font-size:10px;transform:translateY(-.5px)}
.badge--gold{background:var(--cream-200);color:var(--gold-700);border:1px solid var(--gold-400)}
.badge--teal{background:var(--pandan-500);color:var(--cream-50);border:1px solid var(--pandan-500)}
.badge--blush{background:var(--pink-100);color:var(--rosewood-600);border:1px solid var(--pink-200)}
.badge--line{background:transparent;color:var(--ink-soft);border:1px solid var(--line-strong)}

.tag{
  font-family:var(--font-serif);font-size:12.5px;font-weight:500;
  color:var(--ink-soft);background:var(--cream-50);
  border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  padding:2px 11px;display:inline-flex;align-items:center;white-space:nowrap;
}

/* ==========================================================================
   SectionHeader
   ========================================================================== */
.sh-eyebrow{
  font-family:var(--font-sans);font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-aa);margin-bottom:8px;
}
.sh-title{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--text-title);line-height:var(--leading-tight);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--text-section);margin:0;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
}
.sh-rule{width:56px;height:2px;background:var(--gold-400);margin:14px 0 0}
.sh-sub{
  font-family:var(--font-sans);font-size:var(--text-small);
  color:var(--text-soft);margin:12px 0 0;max-width:520px;
}
.sh--center{text-align:center}
.sh--center .sh-title{justify-content:center}
.sh--center .sh-rule{margin:14px auto 0}
.sh--center .sh-sub{margin-left:auto;margin-right:auto}

/* ==========================================================================
   Home — hero
   ========================================================================== */
.hero{position:relative;min-height:700px;overflow:hidden;background:var(--cream-100)}
.hero__img{
  position:absolute;top:0;left:0;width:130%;height:100%;
  background-repeat:no-repeat;background-size:cover;background-position:50% 42%;
}
.hero__veil{
  position:absolute;top:0;left:0;width:100%;height:100%;
  background:linear-gradient(97deg,#FAF4E9 0%,#FAF4E9 42%,rgba(250,244,233,0.88) 56%,rgba(250,244,233,0) 78%);
}
/* box-sizing:content-box is load-bearing and matches the canvas exactly:
   the design's hero column is a 640px CONTENT box inside 96px padding
   (probed: h1 width 640, body width 832). Under the global border-box reset
   the column collapses to 448px and the H1 wraps to four lines. */
.hero__body{
  box-sizing:content-box;
  position:relative;max-width:640px;padding:88px 96px 0;
  display:flex;flex-direction:column;align-items:flex-start;gap:26px;
}
.hero__kicker{
  font-family:var(--font-sans);font-size:13px;font-weight:600;
  letter-spacing:var(--tracking-caps);color:var(--rosewood-500);
}
.hero__title{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:64px;line-height:1.07;color:var(--ink);text-wrap:pretty;
}
.hero__lede{
  margin:0;font-family:var(--font-sans);font-size:19px;line-height:1.55;
  color:var(--ink-soft);max-width:480px;text-wrap:pretty;
}
.hero__actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero__meta{
  margin-top:8px;font-family:var(--font-sans);font-size:12.5px;
  letter-spacing:var(--tracking-caps);color:var(--ink-muted-aa);
}
.hero__seal{position:absolute;bottom:64px;right:80px}

.seal{
  width:150px;height:150px;border-radius:50%;
  background:var(--pandan-500);box-shadow:var(--shadow-card);
  display:flex;align-items:center;justify-content:center;text-align:center;
  transform:rotate(-6deg);
}
.seal__inner{
  width:136px;height:136px;border-radius:50%;
  border:1.5px dashed var(--cream-50);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:10px;
}
.seal__top{font-family:var(--font-sans);font-weight:700;font-size:11.25px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-50)}
.seal__big{font-family:var(--font-display);font-size:23.25px;line-height:1.12;color:var(--white);margin:3px 0}
.seal__bottom{font-family:var(--font-serif);font-size:11.7px;color:var(--cream-50)}

@media (max-width:1280px){ .hero__seal{display:none} }
@media (max-width:1100px){
  .hero{min-height:620px}
  .hero__body{padding:72px 40px 0}
  .hero__title{font-size:clamp(40px,5.6vw,64px)}
}
@media (max-width:899px){
  .hero{min-height:0}
  .hero__img{width:100%;background-size:cover;background-position:50% 55%}
  /* Vertical veil on mobile: solid cream behind the copy, the photograph
     surfacing in the strip below it, then returning to cream at the very
     bottom so there is no hard seam against the next section. */
  .hero__veil{background:linear-gradient(180deg,#FAF4E9 0%,#FAF4E9 38%,rgba(250,244,233,0.86) 56%,rgba(250,244,233,0.22) 86%,#FAF4E9 100%)}
  .hero__body{max-width:none;padding:48px 24px 280px;gap:22px}
  .hero__title{font-size:clamp(34px,8vw,44px);line-height:1.14}
  .hero__lede{font-size:17px}
  .hero__actions{gap:12px;width:100%}
  .hero__actions .btn{flex:1 1 auto;justify-content:center}
  .hero__meta{font-size:12px;line-height:1.7}
}
@media (max-width:420px){
  .hero__body{padding:40px 20px 250px}
}

/* ==========================================================================
   Home — "together" band
   ========================================================================== */
.together{
  display:flex;flex-direction:column;align-items:center;gap:22px;
  padding:104px 24px;text-align:center;
}
.together__sum{font-family:var(--font-cjk);font-size:58px;line-height:1;color:var(--ink)}
.together__op{color:var(--gold-400);font-family:var(--font-display);font-size:40px}
.together__yiqi{color:var(--rosewood-500)}
.together__romaji{
  font-family:var(--font-sans);font-size:12px;
  letter-spacing:var(--tracking-caps);color:var(--ink-muted-aa);
}
.together__line{
  margin:0;font-family:var(--font-serif);font-size:20px;line-height:1.5;
  color:var(--ink-soft);max-width:520px;text-wrap:pretty;
}
@media (max-width:899px){
  .together{padding:72px 24px}
  .together__sum{font-size:clamp(38px,11vw,58px)}
  .together__op{font-size:clamp(26px,7.5vw,40px)}
  .together__line{font-size:18px}
  .together__romaji{font-size:12px}
}

/* ==========================================================================
   Home — kiosks band
   ========================================================================== */
.kiosks{background:var(--pink-100)}
.kiosks__inner{
  max-width:var(--container);margin:0 auto;padding:96px 24px;
  display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;
}
.kiosks__text{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
/* Canvas frame probed at 524 x 420 (ratio 131/105) with the photograph laid
   in at height:130% and cropped by the frame's overflow — that tighter crop
   is the designed framing, so it is reproduced rather than re-cropped. */
.kiosks__frame{
  width:100%;aspect-ratio:131/105;
  clip-path:var(--octagon-clip);overflow:hidden;position:relative;
}
.kiosks__frame img{
  position:absolute;top:0;left:0;width:100%;height:130%;
  object-fit:cover;object-position:50% 18%;display:block;
}
@media (max-width:899px){
  .kiosks__inner{grid-template-columns:1fr;gap:36px;padding:64px 24px}
  .kiosks__frame{aspect-ratio:16/11}
}

/* ==========================================================================
   Menu page
   ========================================================================== */
.menu-top{max-width:var(--container);width:100%;margin:0 auto;padding:80px 24px 0}
.drink-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
@media (max-width:1023px){
  .drink-grid{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media (max-width:899px){
  .menu-top{padding:56px 24px 0}
}
@media (max-width:619px){
  .drink-grid{grid-template-columns:1fr;gap:20px;margin-top:32px}
}

.drink-card{
  background:var(--surface-card);border-radius:var(--radius-lg);
  border:1px solid var(--line);box-shadow:var(--shadow-card);
  overflow:hidden;font-family:var(--font-sans);
  transition:transform var(--speed-med) var(--ease-out),box-shadow var(--speed-med) var(--ease-out);
}
.drink-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-raise)}
.drink-card__media{position:relative;aspect-ratio:4/3.4;background:var(--cream-200)}
.drink-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.drink-card__media .badge{position:absolute;top:12px;left:12px;box-shadow:var(--shadow-card)}
.drink-card__body{padding:16px 18px 18px}
.drink-card__head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.drink-card__code{
  font-family:var(--font-serif);font-weight:600;font-size:13px;
  color:var(--gold-aa);letter-spacing:.06em;
}
.drink-card__name{
  font-family:var(--font-serif);font-weight:600;font-size:17px;
  color:var(--ink);line-height:1.25;margin:0;
}
.drink-card__foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.drink-card__price{font-family:var(--font-serif);color:var(--text-price);font-weight:600;font-size:15px}
.drink-card__size{font-size:11px;color:var(--ink-muted-aa);font-family:var(--font-sans)}

/* -- printed menu board -- */
.board-wrap{display:flex;justify-content:center;padding:72px 24px 104px}
.board{
  width:1040px;max-width:100%;background:var(--cream-50);
  border:1.5px solid var(--gold-500);padding:6px;box-shadow:var(--shadow-card);
}
.board__inner{border:1px solid var(--gold-400);padding:44px 56px 36px}
.board__head{display:flex;flex-direction:column;align-items:center;gap:10px}
.board__eyebrow{
  font-family:var(--font-display);font-size:15px;
  letter-spacing:var(--tracking-caps);color:var(--ink);text-align:center;
}
.board__rule{width:64px;border-bottom:2px solid var(--gold-400)}
.board__grid{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;row-gap:40px;margin-top:36px}
.board__col{display:flex;flex-direction:column;gap:13px}

.row{display:flex;align-items:baseline;gap:10px}
.row__code{
  font-family:var(--font-sans);font-size:11px;letter-spacing:.08em;
  color:var(--ink-muted-aa);width:28px;flex:none;
}
.row__name{font-family:var(--font-serif);font-weight:500;font-size:17px;color:var(--ink)}
.row__crown{color:var(--gold-aa);font-size:14px}
.row__leader{flex:1;border-bottom:2px dotted var(--line-strong);transform:translateY(-4px);min-width:16px}
.row__price{font-family:var(--font-serif);font-weight:600;font-size:16px;color:var(--text-price)}
.row-tags{display:flex;gap:8px;margin-left:38px;flex-wrap:wrap}

.board__foot{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  border-top:1px solid var(--line);margin-top:34px;padding-top:22px;flex-wrap:wrap;
}
.board__foot-left{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.board__flag{
  font-family:var(--font-sans);font-size:12px;font-weight:600;
  letter-spacing:var(--tracking-caps);color:var(--rosewood-500);
}
.board__croffle{font-family:var(--font-serif);font-size:17px;color:var(--ink)}
/* margin-left:auto keeps the legend right-aligned as the canvas has it even
   when the required "prices to confirm" marker pushes it onto its own row. */
.board__foot-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
.board__note{font-family:var(--font-sans);font-size:12px;color:var(--ink-muted-aa)}

@media (max-width:899px){
  .board-wrap{padding:48px 20px 72px}
  .board__inner{padding:28px 22px 26px}
  .board__grid{column-gap:36px;row-gap:34px;margin-top:28px}
  .board__note{font-size:13px}
  .board__foot{gap:16px}
  .board__foot-right{margin-left:0}
}
@media (max-width:719px){
  .board__grid{grid-template-columns:1fr;column-gap:0}
  .row__code{font-size:12.5px}
  .row__name{font-size:16px}
  .row__price{font-size:16px}
  .board__croffle{font-size:16px}
}
@media (max-width:400px){
  .board__inner{padding:22px 16px 22px}
  .row{gap:8px}
  .row__code{width:26px}
  .row__name{font-size:15px}
  .row-tags{margin-left:34px}
}

/* ==========================================================================
   About page
   ========================================================================== */
.story{
  max-width:980px;width:100%;margin:0 auto;padding:96px 24px 24px;
  display:flex;flex-direction:column;align-items:flex-start;gap:36px;
}
.story__eyebrow{
  font-family:var(--font-sans);font-size:13px;font-weight:600;
  letter-spacing:var(--tracking-caps);color:var(--rosewood-500);
}
.equation{display:flex;align-items:flex-start;gap:36px;flex-wrap:wrap}
.equation__term{display:flex;flex-direction:column;align-items:center;gap:14px}
.equation__glyph{font-family:var(--font-cjk);font-size:128px;line-height:1;color:var(--ink)}
.equation__glyph--result{color:var(--rosewood-500)}
.equation__label{
  font-family:var(--font-sans);font-size:12px;
  letter-spacing:var(--tracking-caps);color:var(--ink-muted-aa);text-align:center;
}
.equation__op{font-family:var(--font-display);font-size:68px;line-height:1;color:var(--gold-400);padding-top:38px}
.story__title{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:44px;line-height:1.15;color:var(--ink);
}
.story__p{
  margin:0;font-family:var(--font-sans);font-size:18px;line-height:1.65;
  color:var(--ink-soft);max-width:640px;text-wrap:pretty;
}
/* Design system: Noto Serif SC carries 一起 and its characters. Without this,
   inline 一 in a Latin sans is easily misread as an em dash. */
.story__p [lang="zh"]{font-family:var(--font-cjk);font-size:1.05em}

.why{
  max-width:var(--container);width:100%;margin:0 auto;padding:80px 24px 104px;
  display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;
}
/* height:auto is load-bearing — the width/height HTML attributes map to a
   presentational height, which would otherwise beat aspect-ratio and render
   this landscape frame as a tall portrait. */
.why__img{
  width:100%;height:auto;aspect-ratio:5/4;    /* 500 x 400 as designed */
  object-fit:cover;object-position:50% 46%;
  border-radius:var(--radius-lg);display:block;box-shadow:var(--shadow-card);
}
.why__text{display:flex;flex-direction:column;align-items:flex-start;gap:24px}

@media (max-width:899px){
  .story{padding:56px 24px 16px;gap:28px}
  /* Sized so all five terms stay on ONE row down to 360px — a wrapped
     equation orphans the "=" at the end of the first line. */
  .equation{gap:clamp(8px,2.5vw,36px);justify-content:center;align-self:stretch;flex-wrap:nowrap}
  .equation__term{flex:0 1 auto;min-width:0}
  .equation__glyph{font-size:clamp(46px,13.5vw,128px);white-space:nowrap}
  .equation__label{font-size:clamp(10px,2.7vw,12px);white-space:nowrap}
  .equation__op{font-size:clamp(24px,7vw,68px);padding-top:clamp(14px,4.5vw,38px)}
  .story__title{font-size:clamp(32px,7.5vw,44px)}
  .story__p{font-size:17px}
  .why{grid-template-columns:1fr;gap:32px;padding:56px 24px 72px}
  .why__img{aspect-ratio:16/11}
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact{
  max-width:var(--container);width:100%;margin:0 auto;padding:80px 24px 104px;
  display:flex;flex-direction:column;gap:56px;
}
.contact__grid{display:grid;grid-template-columns:460px 1fr;gap:40px;align-items:stretch}
.contact-card{
  background:var(--surface-card);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
  padding:36px 40px;display:flex;flex-direction:column;gap:24px;
}
.contact-card__head{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.contact-card__title{font-family:var(--font-display);font-size:26px;color:var(--ink);line-height:1.2;margin:0}
.contact-block{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:20px}
.contact-block__label{
  font-family:var(--font-sans);font-size:11.5px;font-weight:600;
  letter-spacing:var(--tracking-caps);color:var(--ink-muted-aa);
}
.contact-block__value{font-family:var(--font-serif);font-size:17px;color:var(--ink);font-style:normal}
.contact-block__note{font-family:var(--font-sans);font-size:14px;color:var(--ink-soft)}
.contact-block__value a{
  color:var(--link);text-decoration:underline;
  text-decoration-color:var(--gold-400);text-underline-offset:3px;
}
.contact-block--actions{gap:12px}
.contact-actions{display:flex;gap:12px;flex-wrap:wrap}
.contact__map{
  border:1px solid var(--gold-400);border-radius:var(--radius-lg);
  overflow:hidden;min-height:520px;background:var(--cream-50);
}
.contact__map iframe{width:100%;height:100%;min-height:520px;border:0;display:block}

.outlets{display:flex;flex-direction:column;gap:24px;margin-top:16px}
.outlets__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.outlet-card{
  background:var(--surface-card);border-radius:var(--radius-lg);
  border:1px solid var(--line);box-shadow:var(--shadow-card);
  padding:22px 24px;font-family:var(--font-sans);
}
.outlet-card__badges{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.outlet-card__name{font-family:var(--font-display);font-size:22px;color:var(--ink);line-height:1.2;margin:0}
.outlet-card__addr{font-size:14px;color:var(--text-soft);margin-top:6px}
.outlet-card__hours{font-size:13.5px;color:var(--gold-aa);margin-top:10px;font-weight:600}
.outlet-card__note{font-size:13px;color:var(--ink-muted-aa);margin-top:6px;font-style:italic;font-family:var(--font-serif)}

@media (max-width:1023px){
  .contact__grid{grid-template-columns:1fr}
  .contact__map,.contact__map iframe{min-height:380px}
  .outlets__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:899px){
  .contact{padding:56px 20px 72px;gap:40px}
  .contact-card{padding:26px 22px}
  .contact-card__title{font-size:24px}
  .contact-block__label{font-size:12px}
  .outlet-card__addr{font-size:15px}
  .outlet-card__hours{font-size:14px}
  .outlet-card__note{font-size:14px}
}
@media (max-width:660px){
  .outlets__grid{grid-template-columns:1fr}
  .contact-actions .btn{flex:1 1 auto}
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--surface-paper);border-top:1px solid var(--gold-400);font-family:var(--font-sans)}
.site-footer__inner{
  max-width:var(--container);margin:0 auto;padding:48px 24px 28px;
  display:flex;gap:48px;flex-wrap:wrap;
}
.site-footer__brand{flex:1 1 260px}
.site-footer__brand img{height:72px;width:auto;display:block}
.site-footer__tagline{font-family:var(--font-cjk);font-size:14px;color:var(--cocoa-500);margin-top:12px}
.site-footer__nap{margin-top:18px;font-size:14px;line-height:1.65;color:var(--ink-soft);font-style:normal;max-width:280px}
.site-footer__nap a{
  color:var(--link);text-decoration:underline;
  text-decoration-color:var(--gold-400);text-underline-offset:3px;
}
.site-footer__nap strong{font-weight:600;color:var(--ink)}
.site-footer__col{flex:0 1 180px}
.site-footer__col-title{
  font-size:12px;font-weight:700;letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--gold-aa);margin-bottom:12px;
}
.site-footer__links{display:flex;flex-direction:column;gap:8px}
.site-footer__links a{
  font-size:14px;color:var(--ink-soft);text-decoration:none;
  display:inline-block;padding:3px 0;
}
.site-footer__links a:hover,.site-footer__links a:focus-visible{
  color:var(--rosewood-500);text-decoration:underline;
  text-decoration-color:var(--gold-400);text-underline-offset:3px;
}
.site-footer__bottom{
  border-top:1px solid var(--line);padding:14px 24px;
  text-align:center;font-size:12.5px;color:var(--ink-muted-aa);
}
@media (max-width:899px){
  .site-footer__inner{gap:32px;padding:40px 20px 24px}
  .site-footer__col{flex:1 1 140px}
  .site-footer__links a{font-size:15px;padding:6px 0}
  .site-footer__nap{font-size:15px;max-width:none}
  .site-footer__bottom{font-size:13px}
}