/* ─────────────────────────────────────────────────────────────────────
   U.canteen — "Signboard". Read the header comment in index.html first.

   Palette, from their logo file (images/masters/logo.png):
     blue   #002FFB   the logo's blue          (on white 7.6:1, text-safe)
     ink    #0F1020   body text                (on white 19:1)
     paper  #FFFFFF   the sign panel
     tint   #F2F3FB   the one tinted band      (blue on it 9.9:1)
     muted  #4E5166   secondary text           (on white 8.0:1, tint 7.3:1)
   ───────────────────────────────────────────────────────────────────── */

:root {
  --blue: #002ffb;
  --blue-deep: #0024c2;
  --ink: #0f1020;
  --paper: #ffffff;
  --tint: #f2f3fb;
  --muted: #4e5166;
  --rule: #dfe1ec;

  --f-sign: "Michroma", "Eurostile Extended", "Microgramma", "Noto Sans TC", sans-serif;
  --f-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-zh: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;

  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-h2: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);

  --wrap: 1180px;
  --gut: clamp(16px, 4vw, 40px);
  --head-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-body) / 1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-underline-offset: 3px; }
p, h1, h2, h3, h4, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
[lang^="zh"] { font-family: var(--f-zh); }
[lang="zh-Hans"], [lang="zh-Hans-CN"] { font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; }

/* Chinese modes (lang.js): Michroma and Manrope have no CJK glyphs, so
   name the Chinese face for the script in use, drop the wide tracking
   that only suits Latin caps, and lead each dish with its Chinese. */
:root[lang="zh-Hant-HK"] { --f-sign: "Michroma", "Noto Sans TC", sans-serif; --f-body: "Manrope", "Noto Sans TC", "PingFang TC", sans-serif; }
:root[lang="zh-Hans-CN"] { --f-sign: "Michroma", "Noto Sans SC", sans-serif; --f-body: "Manrope", "Noto Sans SC", "PingFang SC", sans-serif; }
:root[lang^="zh"] .btn, :root[lang^="zh"] .eyebrow, :root[lang^="zh"] .hero__kicker,
:root[lang^="zh"] .top__nav a, :root[lang^="zh"] .hero__facts dt { letter-spacing: .06em; font-weight: 700; }
:root[lang^="zh"] .btn, :root[lang^="zh"] .top__nav a { font-size: .9375rem; }
:root[lang^="zh"] .eyebrow, :root[lang^="zh"] .hero__kicker, :root[lang^="zh"] .hero__facts dt { font-size: .875rem; }
:root[lang^="zh"] .dish { display: flex; flex-direction: column; }
:root[lang^="zh"] .dish__zh { order: -1; margin: 0 0 2px; color: var(--ink); font-weight: 700; font-size: 1.0625rem; }
:root[lang^="zh"] .dish__en { font-weight: 500; font-size: .95rem; color: var(--muted); }

/* ── Language switch ── */
.lang { display: flex; gap: 2px; align-items: center; }
.lang button {
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: 7px 9px; border-radius: 999px; white-space: nowrap;
  font: 600 .8125rem/1 var(--f-body); color: var(--muted);
}
.lang button[lang="zh-Hant"] { font-family: var(--f-zh); }
.lang button[lang="zh-Hans"] { font-family: "Noto Sans SC", "PingFang SC", sans-serif; }
.lang button:hover { color: var(--blue); }
.lang button[aria-pressed="true"] { background: var(--blue); color: #fff; }
@media (max-width: 520px) {
  .top__in { gap: 10px; }
  .lang button { padding: 6px 6px; font-size: .75rem; }
  .top .btn--sm { padding: 0 12px; min-height: 36px; font-size: .625rem; letter-spacing: .06em; }
  .top__in { gap: 6px; }
  .lang { gap: 0; }
  :root[lang^="zh"] .top .btn--sm { font-size: .875rem; }
}

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
[id] { scroll-margin-top: calc(var(--head-h) + 16px); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--blue); color: #fff; padding: 10px 14px; border-radius: 6px;
}
.skip:focus { top: 12px; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  font: 600 0.75rem/1 var(--f-sign); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; border-radius: 999px; border: 2px solid var(--blue); white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.btn--solid { background: var(--blue); color: #fff; }
.btn--solid:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.btn--line { color: var(--blue); }
.btn--line:hover { background: var(--tint); }
.btn--sm { min-height: 40px; padding: 0 18px; }

.eyebrow {
  font: 400 0.75rem/1.4 var(--f-sign); letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue);
}
.h2 {
  font: 400 var(--t-h2)/1.15 var(--f-sign); text-transform: uppercase; letter-spacing: .02em;
  color: var(--blue);
}
.h2__zh { font-size: .7em; font-weight: 700; letter-spacing: .1em; margin-left: .4em; }

.veg {
  display: inline-grid; place-items: center; width: 1.35em; height: 1.35em;
  font: 700 0.7rem/1 var(--f-body); text-decoration: none; border-radius: 50%;
  border: 1.5px solid var(--blue); color: var(--blue); vertical-align: .15em;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.top__in { height: var(--head-h); display: flex; align-items: center; gap: 24px; }
.top__brand { color: var(--blue); display: block; margin-right: auto; }
.top__logo { display: block; width: 150px; height: auto; }
.top__nav { display: flex; gap: 22px; }
.top__nav a {
  font: 400 0.75rem/1 var(--f-sign); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
}
.top__nav a:hover { color: var(--blue); }
@media (max-width: 520px) { .top__nav { display: none; } .top__logo { width: 92px; } }

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero { padding: clamp(36px, 7vw, 88px) 0 clamp(40px, 6vw, 72px); }
.hero__sign { color: var(--blue); }
.hero__sign img { display: block; width: 100%; height: auto; }
.hero__body {
  display: grid; gap: 20px 48px; align-items: end;
  margin-top: clamp(28px, 5vw, 56px);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .hero__body { grid-template-columns: 1.3fr 1fr; } }
.hero__kicker { grid-column: 1 / -1; }
.hero__kicker { font: 400 0.8rem/1.4 var(--f-sign); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.hero__lead { font-size: clamp(1.2rem, 1rem + .8vw, 1.55rem); line-height: 1.45; font-weight: 500; max-width: 34ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 860px) { .hero__cta { justify-content: flex-end; } }

.hero__facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: clamp(32px, 5vw, 56px);
  border-top: 2px solid var(--blue);
}
.hero__facts > div { padding: 16px 0 0; }
.hero__facts dt { font: 400 0.7rem/1.4 var(--f-sign); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hero__facts dd { font-weight: 600; margin-top: 4px; }
.hero__facts a { text-decoration: none; }
.hero__facts a:hover { text-decoration: underline; }

/* ── Counters ────────────────────────────────────────────────────────── */
.counters { background: var(--tint); padding: clamp(48px, 7vw, 88px) 0; }
.counters__grid {
  display: grid; gap: 40px 32px; margin-top: 28px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.counter { display: flex; flex-direction: column; gap: 10px; }
/* The dish sits straight on the tint: no card, frame or shadow. */
.counter__img { display: block; width: min(100%, 240px); height: auto; aspect-ratio: 1; object-fit: contain; margin: 0 0 6px -6px; }
/* Same lift as the On the menu dishes, on hovering anywhere in the block. */
.counter__imglink { display: block; }
.counter__img { transition: transform .25s ease; }
.counter:hover .counter__img { transform: translateY(-4px) rotate(-1.5deg); }
@media (prefers-reduced-motion: reduce) { .counter__img { transition: none; } .counter:hover .counter__img { transform: none; } }
.counter__zh { font: 700 clamp(3rem, 2.4rem + 2vw, 4.2rem)/1 var(--f-zh); color: var(--blue); letter-spacing: .04em; }
.counter h3 { font: 400 1rem/1.3 var(--f-sign); text-transform: uppercase; letter-spacing: .06em; margin-top: 8px; }
.counter p:not(.counter__zh) { color: var(--muted); font-size: var(--t-small); }
.counter a { margin-top: auto; padding-top: 6px; font-weight: 700; font-size: var(--t-small); color: var(--blue); }

/* ── Picks ───────────────────────────────────────────────────────────── */
.picks { padding: clamp(56px, 8vw, 104px) 0 0; }
.picks__top { display: grid; gap: 12px; max-width: 46rem; }
.picks__lead { color: var(--muted); font-size: 1.0625rem; }
.picks__grid {
  display: grid; gap: clamp(28px, 4vw, 48px) clamp(16px, 3vw, 40px); margin-top: clamp(32px, 5vw, 56px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 860px) { .picks__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pick a { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.pick img {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain;
  margin-bottom: 14px; transition: transform .25s ease;
}
.pick a:hover img { transform: translateY(-4px) rotate(-1.5deg); }
@media (prefers-reduced-motion: reduce) { .pick img { transition: none; } .pick a:hover img { transform: none; } }
.pick__zh { font-weight: 700; color: var(--blue); font-size: 1.05rem; letter-spacing: .04em; }
.pick__en { font-weight: 600; font-size: .95rem; line-height: 1.35; margin-top: 2px; }
:root[lang^="zh"] .pick__en { font-weight: 500; color: var(--muted); }
.picks__more { margin-top: clamp(32px, 5vw, 48px); }

/* ── Menu ────────────────────────────────────────────────────────────── */
.menu { padding: clamp(56px, 8vw, 104px) 0; }
.menu__top { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: end; justify-content: space-between; }
.menu__note { color: var(--muted); margin-top: 10px; font-size: var(--t-small); }

.menu__rail {
  position: sticky; top: var(--head-h); z-index: 10;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 28px calc(var(--gut) * -1) 0; padding: 12px var(--gut);
  background: var(--paper); border-bottom: 1px solid var(--rule);
}
.menu__rail::-webkit-scrollbar { display: none; }
.menu__rail a {
  flex: none; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--rule);
  font: 600 var(--t-small)/1 var(--f-body); text-decoration: none; white-space: nowrap;
}
.menu__rail a:hover, .menu__rail a[aria-current] { border-color: var(--blue); color: var(--blue); }

.menu__cat { padding-top: clamp(40px, 5vw, 64px); }
.menu__head {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 2px solid var(--blue);
}
.menu__head h3 { font: 400 clamp(1.15rem, 1rem + .7vw, 1.5rem)/1.2 var(--f-sign); text-transform: uppercase; letter-spacing: .04em; color: var(--blue); }
.menu__zh { font-weight: 700; font-size: 1.15rem; color: var(--blue); letter-spacing: .1em; }

.menu__list { display: grid; grid-template-columns: 1fr; column-gap: 48px; }
@media (min-width: 760px) { .menu__list { grid-template-columns: 1fr 1fr; } }
.dish { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.dish__en { font-weight: 700; font-size: 1.0625rem; line-height: 1.35; }
.dish__zh { color: var(--muted); margin-top: 2px; font-size: 0.95rem; letter-spacing: .04em; }
.dish__meta { font-weight: 500; font-size: .8rem; color: var(--muted); margin-left: 6px; white-space: nowrap; }
.dish__desc { color: var(--muted); font-size: var(--t-small); margin-top: 2px; }
.dish .veg { margin-left: 4px; }

.menu__sub { margin-top: 26px; font: 400 .8rem/1.4 var(--f-sign); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.menu__sub span { font-weight: 700; letter-spacing: .1em; margin-left: 6px; }
.menu__list--extras .dish__en { font-weight: 600; }

/* ── Visit ───────────────────────────────────────────────────────────── */
.visit { background: var(--tint); padding: clamp(56px, 8vw, 96px) 0; }
.visit__grid { display: grid; gap: 40px; margin-top: 32px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .visit__grid { grid-template-columns: minmax(260px, 1fr) 1.6fr; align-items: stretch; } }
.visit__cols { display: grid; gap: 28px; align-content: start; }
.visit__cols > div { border-top: 1px solid var(--blue); padding-top: 18px; }
.visit address, .visit p { font-style: normal; font-weight: 600; font-size: 1.15rem; line-height: 1.55; margin-top: 10px; }
.visit p a { text-decoration: none; }
.visit p a:hover { text-decoration: underline; }
.hours { border-collapse: collapse; margin-top: 10px; font-size: 1.05rem; }
.hours th { text-align: left; font-weight: 500; color: var(--muted); padding: 3px 24px 3px 0; }
.hours td { font-weight: 600; padding: 3px 0; font-variant-numeric: tabular-nums; }
.hours__closed { color: var(--muted); }
.link { display: inline-block; margin-top: 12px; font-weight: 700; color: var(--blue); }

/* ── Footer: the sign, inverted ──────────────────────────────────────
   Call to action, four columns on white hairlines, then the wordmark
   run the full width of the page like the shopfront, then a base row. */
.foot { background: var(--blue); color: #fff; padding: clamp(44px, 6vw, 72px) 0 24px; }
.foot a { color: #fff; }
.foot :focus-visible { outline-color: #fff; }

.foot__cta {
  display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between;
}
.foot__logo { display: block; width: clamp(180px, 22vw, 280px); height: auto; }
.foot__order { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.foot__h {
  font: 400 clamp(.95rem, .85rem + .4vw, 1.15rem)/1.35 var(--f-sign);
  text-transform: uppercase; letter-spacing: .04em; text-align: right;
}
@media (max-width: 700px) { .foot__h { text-align: left; } }
.btn--white { background: #fff; color: var(--blue) !important; border-color: #fff; }
.btn--white:hover { background: transparent; color: #fff !important; }

.foot__cols {
  display: grid; gap: 32px 40px; margin-top: clamp(36px, 5vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 40%), 1fr));
}
.foot__cols > * { border-top: 1px solid rgb(255 255 255 / .45); padding-top: 18px; }
.foot__label {
  margin: 0 0 12px; font: 400 .75rem/1.4 var(--f-sign);
  letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .8);
}
.foot__cols p { font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.foot__cols p a { text-decoration: none; }
.foot__cols p a:hover, .foot__links a:hover { text-decoration: underline; }
.foot__more { display: inline-block; margin-top: 10px; font-weight: 700; }
.foot__links { display: grid; gap: 6px; }
.foot__links a { font-weight: 600; text-decoration: none; }


.foot__base {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  margin-top: clamp(36px, 5vw, 56px); padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .45);
  font-size: var(--t-small); color: rgb(255 255 255 / .85);
}
.foot__base a { text-decoration: none; font-weight: 600; }
.foot__base a:hover { text-decoration: underline; }
:root[lang^="zh"] .foot__h { letter-spacing: .04em; font-weight: 700; line-height: 1.35; }
:root[lang^="zh"] .foot__label { font-size: .875rem; font-weight: 700; letter-spacing: .06em; }

/* ── Map (scripts/u-canteen-map.py) ── OSM in the sign's colours: white
   streets on a pale blue-grey town, the venue's building and the pin in
   the brand blue, the pin's head the logo's dot. */
.mapbox {
  position: relative; min-width: 0; width: 100%; margin: 0;
  min-height: 420px; border: 1px solid var(--rule); border-radius: 8px;
  overflow: hidden; background: var(--paper);
}
.map { display: block; width: 100%; height: 100%; }
.map .m-ground { fill: #f7f8fc; }
.map .m-grn { fill: #e4ecf2; }
.map .m-park { fill: #eceef6; }
.map .m-water { fill: none; stroke: #c4d3ef; stroke-width: 4; }
.map .m-bld { fill: #e3e6f1; stroke: #d6daea; stroke-width: .6; }
.map .m-umami { fill: var(--blue); }
.map .m-foot { fill: none; stroke: #cfd3e4; stroke-width: 1.5; stroke-dasharray: 3 3; }
.map .m-case { fill: none; stroke: #d3d7e8; stroke-linecap: round; stroke-linejoin: round; }
.map .m-road { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
.map .m-st {
  font: 600 11px var(--f-body); letter-spacing: .06em; text-transform: uppercase;
  fill: var(--muted); paint-order: stroke; stroke: #fff; stroke-width: 4px;
  text-anchor: middle; dominant-baseline: middle;
}
/* Minor street names clutter a town-centre grid this dense: main roads only. */
.map .m-minor { display: none; }
.map .m-p rect { fill: #fff; stroke: var(--muted); stroke-width: 1.2; }
.map .m-p text { font: 700 12px var(--f-body); fill: var(--muted); }
.map .m-pinbody { fill: var(--blue); }
.map .m-pinseal { fill: #fff; }
.map .m-tag { fill: var(--blue); }
.map .m-tagtxt { font: 400 12px var(--f-sign); letter-spacing: .04em; fill: #fff; }
.map__credit {
  position: absolute; right: 0; bottom: 0; padding: 3px 8px;
  font-size: .6875rem; color: var(--muted);
  background: rgb(255 255 255 / .9); border-top-left-radius: 4px;
}
.map__credit a { color: inherit; }
@media (max-width: 600px) {
  .mapbox { min-height: 0; aspect-ratio: 1 / 1; }
}