/* ==========================================================================
   吴江路美食 · WUJIANG STREET DELIGHTS
   Palette, type scale and layout follow Website_Design_v2.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — light theme (complete set; every other block only redefines)
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* grounds */
  --paper:    #FCFAF6;
  --cream:    #F7F2E8;
  --mint:     #EAF3EE;
  --surface:  #FFFFFF;

  /* brand */
  --jade:           #0B6B4A;
  --jade-deep:      #084F37;
  --on-jade:        #FFFFFF;
  --vermilion:      #C92A2A;
  --vermilion-deep: #A81F1F;
  --on-vermilion:   #FFFFFF;

  /* text — neutrals biased warm, to sit on the cream */
  --ink:   #242424;
  --muted: #6B6B6B;

  /* lines */
  --rule:      #E5DED1;
  --rule-soft: #EFE9DC;
  --rule-jade: #CFE2D8;

  /* the closing green band */
  --band-bg:   #0B6B4A;
  --band-fg:   #FFFFFF;
  --band-dim:  rgba(255, 255, 255, .72);
  --band-rule: rgba(255, 255, 255, .22);

  --header-bg: rgba(252, 250, 246, .88);

  /* badge — sky, mountain/needle, snow, shiba */
  --logo-sky:  #EAF3EE;
  --logo-ink:  #0B6B4A;
  --logo-snow: #FFFFFF;
  --logo-dog:  #C92A2A;

  --shadow-sm: 0 1px 2px rgba(11, 58, 42, .05), 0 4px 14px rgba(11, 58, 42, .05);
  --shadow-md: 0 2px 4px rgba(11, 58, 42, .06), 0 14px 32px rgba(11, 58, 42, .10);

  /* type */
  --font-display: "Noto Serif SC", "Songti SC", "STSong", "SimSun", Georgia, serif;
  --font-body:    "Archivo", "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB",
                  "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;

  /* rhythm */
  --shell:   1200px;
  --gutter:  clamp(1.25rem, 4.5vw, 3rem);
  --band-y:  clamp(3.5rem, 7vw, 6.5rem);
  --radius:  2px;          /* signage, not app chrome */
  --header-h: 4.75rem;
}

/* dark — redefines tokens only */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:   #0F1512;
    --cream:   #151D19;
    --mint:    #13201B;
    --surface: #19221E;

    --jade:           #5FC195;
    --jade-deep:      #7BD3AB;
    --on-jade:        #062018;
    --vermilion:      #F0776C;
    --vermilion-deep: #F79287;
    --on-vermilion:   #2B0B08;

    --ink:   #EDE6D8;
    --muted: #9CAAA2;

    --rule:      #2A3832;
    --rule-soft: #222E29;
    --rule-jade: #2E4A3D;

    --band-bg:   #0A2A20;
    --band-fg:   #E4F1EA;
    --band-dim:  rgba(228, 241, 234, .72);
    --band-rule: rgba(228, 241, 234, .16);

    --header-bg: rgba(15, 21, 18, .90);

    /* the badge inverts: light peak, dark snow line and sky */
    --logo-sky:  #131C18;
    --logo-ink:  #5FC195;
    --logo-snow: #0C120F;
    --logo-dog:  #F0776C;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40), 0 4px 14px rgba(0, 0, 0, .30);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .40);
  }
}

/* dark — explicit toggle wins in both directions */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:   #0F1512;
  --cream:   #151D19;
  --mint:    #13201B;
  --surface: #19221E;

  --jade:           #5FC195;
  --jade-deep:      #7BD3AB;
  --on-jade:        #062018;
  --vermilion:      #F0776C;
  --vermilion-deep: #F79287;
  --on-vermilion:   #2B0B08;

  --ink:   #EDE6D8;
  --muted: #9CAAA2;

  --rule:      #2A3832;
  --rule-soft: #222E29;
  --rule-jade: #2E4A3D;

  --band-bg:   #0A2A20;
  --band-fg:   #E4F1EA;
  --band-dim:  rgba(228, 241, 234, .72);
  --band-rule: rgba(228, 241, 234, .16);

  --header-bg: rgba(15, 21, 18, .90);

  /* the badge inverts: light peak, dark snow line and sky */
  --logo-sky:  #131C18;
  --logo-ink:  #5FC195;
  --logo-snow: #0C120F;
  --logo-dog:  #F0776C;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40), 0 4px 14px rgba(0, 0, 0, .30);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .45), 0 14px 32px rgba(0, 0, 0, .40);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, .97rem + .12vw, 1.0625rem);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
p, ul, ol, dl, dd, dt, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--jade); text-decoration-thickness: 1px; text-underline-offset: .18em; }

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

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--jade);
  color: var(--on-jade);
  padding: .75rem 1.25rem;
  font-size: .875rem;
  text-decoration: none;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* shared bilingual lockup: Chinese title, English name in vermilion small caps */
.section__title-en,
.hero__title-en {
  margin-top: .55rem;
  color: var(--vermilion);
  font-size: clamp(.75rem, .71rem + .17vw, .8125rem);
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--jade);
  --btn-bg-hover: var(--jade-deep);
  --btn-fg: var(--on-jade);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem 1.7rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 0;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover { background: var(--btn-bg-hover); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }

.btn--accent { --btn-bg: var(--vermilion); --btn-bg-hover: var(--vermilion-deep); --btn-fg: var(--on-vermilion); }
.btn--sm { padding: .6rem 1.05rem; font-size: .8125rem; }

/* --------------------------------------------------------------------------
   4. Header + navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--rule);
  box-shadow: 0 1px 12px rgba(11, 58, 42, .05);
}

.site-header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* brand — badge, then the vermilion rule that reads as a hanging shop sign */
.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: inherit;
}
.brand__mark { flex: none; display: block; }
/* the rim text puts the scene inside an inner ring, so the seal needs more
   room than a plain mark would */
.brand__mark svg {
  display: block;
  width: clamp(2.875rem, 2.3rem + 1.6vw, 3.75rem);
  height: auto;
}
.brand__mark text { font-family: var(--font-body); }
.brand__text {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  padding-left: .7rem;
  border-left: 2px solid var(--vermilion);
}
@media (max-width: 480px) {
  .brand { gap: .5rem; }
  .brand__mark svg { width: 2.75rem; }
  .brand__text { padding-left: .5rem; }
}
.brand__zh {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .07em;
  color: var(--jade);
}
.brand__en {
  font-size: .5625rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--muted);
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav__list { display: flex; align-items: center; gap: clamp(.9rem, 1.9vw, 2rem); }

.nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .35rem .15rem;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.nav__zh { font-size: .9375rem; font-weight: 600; line-height: 1.2; letter-spacing: .06em; }
.nav__en {
  font-size: .5625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--muted);
  transition: color .18s ease;
}
.nav__link:hover,
.nav__link.is-current { color: var(--jade); border-bottom-color: var(--jade); }
.nav__link:hover .nav__en,
.nav__link.is-current .nav__en { color: var(--jade); }

.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--jade);
}
.nav-toggle__bars { display: grid; gap: 4px; width: 18px; }
.nav-toggle__bars i { display: block; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }

  /* closed by default so the panel never flashes open before JS runs;
     with JS off the .no-js rule below leaves the nav in view */
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--gutter) 1.5rem;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-md);
  }
  .site-header.is-nav-open .nav,
  .no-js .nav { display: flex; }
  .no-js .nav-toggle { display: none; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: .6rem;
    padding: .95rem .25rem;
    border-bottom: 1px solid var(--rule-soft);
  }
  .nav__link:hover,
  .nav__link.is-current { border-bottom-color: var(--rule-soft); }
  .nav__zh { font-size: 1.0625rem; }
  .nav__cta { margin-top: 1.25rem; align-self: flex-start; padding: .85rem 1.6rem; font-size: .875rem; }
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
/* The opening band carries the pitch and the dishes together, so the food
   photos land above the fold — hence the restrained vertical padding. */
.hero {
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(2.25rem, 3.4vw, 2.75rem) clamp(2.75rem, 5vw, 4rem);
  scroll-margin-top: var(--header-h);
}

.hero__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 940px) {
  .hero__row { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); align-items: center; }
}

/* The headline's longest line is 10 full-width glyphs, so it has to stay
   narrower than its column at every width — hence the gentle vw slope. */
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, .9rem + 3.1vw, 3.25rem);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: .01em;
  color: var(--jade);
}
@media (max-width: 400px) { .hero__title { font-size: 1.625rem; } }

/* the second couplet: same voice as the headline, a level quieter — the
   claim is jade, the promise is plain ink */
.hero__promise {
  margin-top: 1.05rem;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, .95rem + .55vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .04em;
  color: var(--ink);
}

.hero__lead {
  max-width: 32em;
  font-size: clamp(1rem, .95rem + .28vw, 1.0625rem);
  line-height: 1.8;
}
.hero__lead--en {
  margin-top: .8rem;
  max-width: 40em;
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.7;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.6rem; }

.hero__cities {
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.hero__cities span { color: var(--vermilion); padding-inline: .35em; }

/* menu heading, sharing the hero's band */
.menu-head {
  margin-top: clamp(2rem, 3.6vw, 2.75rem);
  padding-top: clamp(1.5rem, 2.6vw, 2rem);
  border-top: 1px solid var(--rule);
  margin-bottom: clamp(1.25rem, 2.2vw, 1.75rem);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.menu-head .section__title { font-size: clamp(1.625rem, 1.2rem + 1.7vw, 2.25rem); }

/* --------------------------------------------------------------------------
   6. Values strip
   -------------------------------------------------------------------------- */
.values {
  background: var(--mint);
  border-bottom: 1px solid var(--rule-jade);
}
.values__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) {
  .values__list { grid-template-columns: repeat(4, 1fr); }
}

.value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: clamp(1.35rem, 2.6vw, 2.1rem) .75rem;
  text-align: center;
  border-inline-start: 1px solid var(--rule-jade);
}
/* 2 columns: no divider down the left edge, a rule between the two rows */
.value:nth-child(odd)  { border-inline-start: 0; }
.value:nth-child(n+3)  { border-top: 1px solid var(--rule-jade); }
@media (min-width: 760px) {
  /* 4 across: dividers between every pair, none at the outer edges */
  .value:nth-child(odd) { border-inline-start: 1px solid var(--rule-jade); }
  .value:nth-child(n+3) { border-top: 0; }
  .value:first-child    { border-inline-start: 0; }
}

.value__zh {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem);
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.3;
  color: var(--jade);
}
.value__en {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   7. Sections
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--band-y);
  scroll-margin-top: var(--header-h);
}
/* the values band already draws the rule above the story */
.section--story { background: var(--paper); }

.section__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 2.3vw, 2.75rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .03em;
  color: var(--jade);
}
.section__title--left,
.section__title-en--left { text-align: left; }

/* --------------------------------------------------------------------------
   8. Dish cards
   -------------------------------------------------------------------------- */
/* Three dishes: 1 across, then 3 across — a 2-column stage would strand the
   third card alone in its row, so the middle widths turn the cards sideways
   instead. */
.dishes {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 2.4vw, 1.75rem);
}
@media (min-width: 1020px) { .dishes { grid-template-columns: repeat(3, 1fr); } }

.dish {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.dish:hover {
  transform: translateY(-3px);
  border-color: var(--rule-jade);
  box-shadow: var(--shadow-md);
}

.dish__media { overflow: hidden; background: var(--mint); }
.dish__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .45s ease;
}
.dish:hover .dish__media img { transform: scale(1.04); }

.dish__body {
  display: flex;
  flex-direction: column;
  padding: clamp(1.15rem, 2vw, 1.5rem);
  border-top: 1px solid var(--rule-soft);
}
.dish__zh {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + .55vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .05em;
  color: var(--jade);
}
.dish__en {
  margin-top: .4rem;
  color: var(--vermilion);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.dish__desc {
  margin-top: .9rem;
  font-size: .9375rem;
  line-height: 1.8;
  color: var(--ink);
}

/* tablet: one card per row, laid on its side */
@media (min-width: 620px) and (max-width: 1019px) {
  .dish { flex-direction: row; min-height: 13rem; }
  /* the photo comes out of flow so a portrait source can't stretch the card —
     the text sets the height and all three rows match */
  .dish__media { position: relative; flex: 0 0 38%; }
  .dish__media img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .dish__body {
    flex: 1 1 auto;
    justify-content: center;
    padding: clamp(1.35rem, 3vw, 2rem);
    border-top: 0;
    border-inline-start: 1px solid var(--rule-soft);
  }
  .dish__desc { max-width: 40em; }
}

/* --------------------------------------------------------------------------
   9. Story + how to order
   -------------------------------------------------------------------------- */
.story__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.25rem, 4.5vw, 3.75rem);
  align-items: start;
}
@media (min-width: 940px) {
  /* the order card runs taller than the prose; centring the text against it
     reads as composed, where top-aligning leaves a hole under the story */
  .story__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); align-items: center; }
}

.story__p {
  max-width: 34em;
  margin-top: 1.6rem;
  font-size: clamp(1rem, .96rem + .22vw, 1.0625rem);
  line-height: 1.9;
}
/* the opening paragraph carries the section — give it a size of its own */
.story__p:first-of-type { font-size: clamp(1.0625rem, 1rem + .38vw, 1.1875rem); line-height: 1.85; }
.story__p--en { color: var(--muted); font-size: .9375rem; line-height: 1.75; max-width: 42em; }

/* order panel */
.order {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.order__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .04em;
  color: var(--jade);
}

/* the numerals earn their place: joining, browsing and booking happen in order */
.steps {
  display: grid;
  gap: 0;
  margin-top: 1.85rem;
  counter-reset: step;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 1rem;
  padding: 1.05rem 0;
  border-top: 1px solid var(--rule);
}
.step:first-child { border-top: 0; padding-top: 0; }
.step__num {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: var(--vermilion);
}
.step__zh {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--jade);
}
.step__desc { margin-top: .3rem; color: var(--muted); font-size: .875rem; line-height: 1.75; }

/* QR */
.qr {
  margin-top: 1.85rem;
  padding-top: 1.65rem;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.qr__label {
  color: var(--jade);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.qr__label-sep { color: var(--vermilion); padding-inline: .3em; }

.qr__img,
.qr__placeholder {
  width: min(220px, 62%);
  aspect-ratio: 1;
  margin: 1.1rem auto 0;
  border-radius: var(--radius);
}
.qr__img { border: 1px solid var(--rule); background: var(--surface); object-fit: contain; padding: .5rem; }

.qr__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  background: var(--surface);
  border: 2px dashed var(--rule-jade);
  color: var(--jade);
}
.qr__placeholder svg { width: 42%; height: auto; opacity: .5; }
.qr__hint {
  color: var(--muted);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   10. Closing line
   -------------------------------------------------------------------------- */
.closer {
  background: var(--cream);
  border-top: 1px solid var(--rule);
  padding-block: clamp(3rem, 6vw, 5rem);
  text-align: center;
}
.closer__zh {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.875rem);
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: .05em;
  color: var(--jade);
}
.closer__en {
  margin-top: 1rem;
  color: var(--muted);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
}
@media (min-width: 720px) { .closer__br { display: none; } }

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--band-bg); color: var(--band-fg); }

.cities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.cities li {
  padding: clamp(1.5rem, 3.2vw, 2.4rem) .5rem;
  text-align: center;
  font-size: clamp(.75rem, .7rem + .3vw, .9375rem);
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  border-inline-start: 1px solid var(--band-rule);
}
.cities li:first-child { border-inline-start: 0; }

.colophon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding-block: 1.85rem;
  border-top: 1px solid var(--band-rule);
}
.colophon__brand { display: flex; flex-direction: column; gap: .2rem; }
.colophon__brand .brand__zh { color: var(--band-fg); }
.colophon__brand .brand__en { color: var(--band-dim); }

.colophon__note,
.colophon__legal { color: var(--band-dim); font-size: .8125rem; line-height: 1.7; }
.colophon__note span { display: block; font-size: .75rem; letter-spacing: .04em; }

/* --------------------------------------------------------------------------
   12. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .dish:hover { transform: none; }
  .dish:hover .dish__media img { transform: none; }
  .btn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   13. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .nav-toggle, .skip-link, .hero__actions { display: none !important; }
  body { background: #fff; color: #000; }
  .dish, .order { box-shadow: none; break-inside: avoid; }
}