/* ─────────────  shared page header  ───────────── */
.phead{padding:clamp(26px,5vw,60px) 0 clamp(16px,3vw,26px)}
.phead__h{font-family:var(--display);font-weight:600;line-height:1.03;margin:.1em 0 .35em;
  font-size:clamp(2.3rem,6.6vw,4.2rem);
  background-image:linear-gradient(96deg,var(--orange-disp),var(--green-disp));
  color:var(--orange-disp)}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .phead__h{-webkit-background-clip:text;background-clip:text;color:transparent}
}
.phead__cta{display:flex;flex-wrap:wrap;gap:10px;margin:var(--gap-cta) 0 0}
h2{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,3.4vw,2.3rem);
  line-height:1.15;margin:0 0 14px}

/* ─────────────  lunch tabs  ───────────── */
.ltabs{padding:clamp(20px,4vw,44px) 0}
.ltabs__row{display:flex;gap:8px;margin:0 0 20px;overflow-x:auto;scrollbar-width:none}
.ltabs__row::-webkit-scrollbar{display:none}
.ltab{flex:0 0 auto;min-width:60px;min-height:46px;padding:0 16px;cursor:pointer;
  border-radius:999px;border:1px solid var(--line);background:var(--film);
  color:var(--fg);font-family:var(--sans);font-size:.94rem;font-weight:500}
.ltab:hover{color:var(--fg)}
.ltab[aria-selected="true"]{background:var(--orange);border-color:var(--orange);color:#1a1204}
.ltabs__note{color:var(--fg);margin:0 0 20px;max-width:60ch}

.lpanel[hidden]{display:none}
.lpanel__h{font-family:var(--display);font-weight:600;font-size:1.3rem;margin:0 0 16px;
  color:var(--fg)}
.ltrack{margin:0 0 26px}
.ltrack__h{font-family:var(--sans);font-weight:500;font-size:.76rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--orange-ink);margin:0 0 10px}
.ldishes{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ldish{display:grid;grid-template-columns:1fr auto;gap:2px 14px;
  padding-bottom:12px;border-bottom:1px solid var(--hair)}
.ldish__name{font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--fg)}
.ldish__price{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;
  text-align:right;color:var(--fg)}
.ldish__desc{grid-column:1/-1;color:var(--fg);font-size:.91rem;max-width:62ch}

.lweek__wrap{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.lweek{width:100%;border-collapse:collapse;font-size:.92rem}
.lweek caption{text-align:left;font-family:var(--sans);font-weight:500;font-size:.76rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--orange-ink);padding-bottom:10px}
.lweek th,.lweek td{text-align:left;vertical-align:top;padding:10px 8px;
  border-bottom:1px solid var(--hair)}
.lweek th{white-space:nowrap;color:var(--fg);font-weight:500;width:1%}
.lweek td{color:var(--fg)}
.lweek b{color:var(--fg);font-weight:500;font-variant-numeric:tabular-nums}

/* ─────────────  offer band (home page)  ───────────── */
/* No box and no wash. A bordered rectangle with an orange tint sitting directly under
   the hero read as a stray panel rather than an offer; the type carries it instead.
   The one remaining device is a green rule on the leading edge, which is where green
   does its job on this page. */
.band{margin:clamp(28px,5vw,56px) auto;padding:2px 0 2px clamp(16px,2.4vw,26px);
  border-left:3px solid var(--green)}
.band__badge{margin:0 0 6px;font-size:.74rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange-ink)}
.band__h{margin:0 0 8px}
.band__body{color:var(--fg);max-width:62ch;margin:0 0 var(--gap-cta)}

/* ─────────────  bottom-anchored cards  ─────────────
   The promo card and the privacy notice share this geometry and must never be on
   screen together — assets/js/notice.js sequences them. */

.offer__valid{color:var(--fg-faint);font-size:.9rem;margin:0}


/* ─────────────  privacy notice  ───────────── */

/* ─────────────  two-up cards  ───────────── */
.cards2{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  align-items:start}
.ocard{padding:clamp(20px,3vw,30px);border:1px solid var(--line);border-radius:18px;
  background:var(--panel)}
.ocard h3{font-family:var(--display);font-variation-settings:"SOFT" 60;font-weight:600;
  font-size:1.2rem;line-height:1.2;margin:0 0 10px;color:var(--fg)}
.ocard p{color:var(--fg);margin:0 0 16px;max-width:52ch}
/* Zeroed, this fell back to .ocard p's 16px bottom margin, which read as cramped.
   The card supplies its own padding, so it takes the tighter of the two rhythms. */
.ocard .phead__cta{margin:var(--gap-cta-tight) 0 0}

/* ─────────────  home hero (extends the .hero in site.css)  ───────────── */
/* The wordmark's own split: "asia" green, "hub" orange, exactly as the logo sets it.
   That is what puts all three brand colours in the largest element on the page, with
   the place name in charcoal underneath so the two hues are not competing with a
   third bright line. No gradient: a 96deg orange-to-green ramp across two lines put
   line two halfway between the hues and it read as murky olive.
   Both accents are the -disp tier, which is the tier valid at 24px and up. */
.hero__h{font-family:var(--display);font-variation-settings:"SOFT" 60;font-weight:700;
  line-height:.98;margin:.08em 0 .1em;font-size:clamp(2.7rem,10.5vw,6rem)}
.hero__h span{display:block}
.hero__h b{font-weight:inherit}
.hero__a{color:var(--green-disp)}
.hero__b{color:var(--orange-disp)}
.hero__h em{display:block;font-style:normal;color:var(--fg)}
.hero__script{font-family:var(--script);font-size:clamp(1.5rem,4.4vw,2.4rem);
  color:var(--green-ink);margin:0 0 .5em;line-height:1.1}
.hero__meta{color:var(--fg-faint);font-size:.92rem;margin:16px 0 0}
/* The delivery portals: a sentence under the buttons, not two more buttons. They are
   things to press, so the links take green — but --green-ink, not --green-disp, because
   this is .92rem and the display tier is only valid from 24px. Underlined rather than
   coloured alone, so the link is not carried by hue for a colour-blind reader. */
.hero__deliver{margin:14px 0 0;font-size:.92rem;color:var(--fg);max-width:52ch}
.hero__deliver a{color:var(--green-ink);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.hero__deliver a:hover,.hero__deliver a:focus-visible{color:var(--fg)}

/* The vegetarian/vegan line under the favourites CTA. Deliberately the same
   treatment as .hero__deliver rather than a new one: it is the same kind of object —
   a quiet sentence with a link in it, sitting under a louder button. It replaced a
   full heading+paragraph+button section, which put three near-identical text blocks
   in a row at the foot of the home page and read as something written for a search
   engine instead of a guest. Left-aligned to match .phead__cta above it. */
.hls__note{margin:14px 0 0;font-size:.92rem;color:var(--fg);max-width:56ch}
.hls__note a{color:var(--green-ink);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.hls__note a:hover,.hls__note a:focus-visible{color:var(--fg)}

/* ─────────────  today's lunch  ───────────── */
/* One section, not two. An offer band sat directly above this saying the same thing —
   same hours, same price, same "whole week" link to the same page — and the pair read
   as a stutter. The band's content lives here now, and its green leading rule comes
   with it: that rule is inherited deliberately, not redrawn, so the offer surface and
   the lunch surface stay visually one thing if the band ever returns for a campaign.
   No box and no wash, for the reason the band recorded — a bordered, tinted rectangle
   under the hero read as a stray panel. The type carries it. */
.lunch__head{display:flex;flex-wrap:wrap;align-items:flex-end;
  gap:16px clamp(20px,4vw,44px);margin:0 0 clamp(22px,3.4vw,34px);
  padding-left:clamp(16px,2.4vw,26px);border-left:3px solid var(--green)}
.lunch__intro{flex:1 1 300px;min-width:0}
.lunch__intro h2{margin:0 0 8px}
.lunch__lede{color:var(--fg);max-width:54ch;margin:0}
/* Shown by home.js only at the weekend, when the section falls forward to Monday and
   the visitor needs telling why the day on screen is not today. --fg, not a grey:
   this is a sentence, and --fg-faint is for micro-labels. */
.lunch__note{color:var(--fg);font-size:.93rem;max-width:54ch;margin:8px 0 0}
.lunch__note[hidden]{display:none}
/* The price is the one number someone scanning for lunch is looking for, so it takes
   display size rather than sitting inside a sentence. At 32px and up the -disp tier is
   the correct green (3.25:1, and AA asks 3:1 at that size) — the clamp floor is 2rem
   precisely so it can never render below the size that tier is valid at. "ab" is a
   micro-label and takes --fg-faint; it must NOT inherit the display green. */
.lunch__price{margin:0 0 4px;line-height:1;flex:0 0 auto}
.lunch__from{display:block;font-size:.78rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-faint);margin:0 0 6px}
.lunch__amount{display:block;font-family:var(--display);font-variation-settings:"SOFT" 60;
  font-weight:600;font-size:clamp(2rem,5vw,2.75rem);line-height:1;
  color:var(--green-disp);font-variant-numeric:tabular-nums}

.todays{display:grid;gap:18px}
.today[hidden]{display:none}
/* a weekday label is information, so it is green -- see the job split in site.css */
.today__h{font-family:var(--sans);font-weight:500;font-size:.78rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--green-ink);margin:0 0 10px}
.today__list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.today__list li{display:flex;gap:14px;align-items:baseline;
  padding-bottom:9px;border-bottom:1px solid var(--hair)}
.today__list span{flex:1 1 auto;color:var(--fg)}
.today__list b{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;
  color:var(--fg)}

/* ─────────────  highlight strip  ───────────── */
/* Six dishes in two complete rectangles: 2×3 on a phone, 3×2 from 760px. Fixed
   counts, never auto-fill — auto-fill packed six across a laptop and left a ragged
   third row, and at 320px it collapsed to a single column, which turned the strip
   into six full-width photographs a visitor had to scroll past to reach anything
   else. Two columns hold at 320px because the tile is a 4:3 photo, not a card with
   text inside it: ~136px wide is still a legible dish. */
.hls{display:grid;gap:14px 12px;grid-template-columns:repeat(2,1fr)}
/* The card fills its grid cell and the price is pushed to the bottom of it, so the
   prices in a row line up however many lines the names above them take. Dish names
   are not truncated to make that happen: "Exotische Kathmandu-Style Chilli-Varianten
   (leicht scharf)" runs to four lines on a 390px phone, and a clipped dish name on the
   front page is worse than an uneven block of text. */
.hl{display:flex}
.hl a{display:flex;flex-direction:column;width:100%;height:100%;
  text-decoration:none;border-radius:16px}

.hl img,.hl__ph{display:block;width:100%;aspect-ratio:4/3;border-radius:16px;
  object-fit:cover}
/* A placeholder, not a coloured void: the tile carries the brand starburst so it reads
   as "photo to come". --ph-hue varies it per dish so twelve of them are not identical.
   Drop assets/food/NNN.webp in and the template swaps in the real photo. */
.hl__ph{position:relative;overflow:hidden;background:
    radial-gradient(circle at 34% 26%,rgba(255,255,255,.55),transparent 60%),
    linear-gradient(140deg,hsl(var(--ph-hue) 30% 90%),hsl(var(--ph-hue) 26% 82%))}
.hl__ph::after{content:"";position:absolute;top:28%;right:28%;bottom:28%;left:28%;
  background:rgba(62,62,63,.16);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='58'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='58'/%3E%3C/svg%3E") center/contain no-repeat}
.hl__h{font-family:var(--display);font-variation-settings:"SOFT" 60;font-weight:600;
  font-size:1rem;line-height:1.25;margin:10px 0 2px;color:var(--fg)}
/* margin-top:auto, not margin:0 — this is what pushes the price to the bottom of the
   card so the prices in a row line up under names of different lengths. It has to live
   in THIS rule: an earlier `.hl__p{margin-top:auto}` was overridden by the `margin:0`
   that used to be here, and the alignment silently did nothing. */
.hl__p{margin:auto 0 0;color:var(--green-ink);font-size:.9rem;
  font-variant-numeric:tabular-nums;padding-top:3px}

@media (min-width:760px){
  .todays{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px}
  .hls{grid-template-columns:repeat(3,1fr);gap:24px 20px}
}

/* ─────────────  prose blocks (about)  ───────────── */
.prose{display:grid;gap:clamp(22px,4vw,38px)}
.prose__block h2{font-size:clamp(1.3rem,2.8vw,1.85rem);margin:0 0 8px}
.prose__block p{color:var(--fg);margin:0;max-width:66ch}

/* ─────────────  plain lists, hours table, faq (contact)  ───────────── */
.plain{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:4px;
  color:var(--fg);font-style:normal;line-height:1.6}
/* The phone number and the email address are the whole point of the contact page,
   and as bare inline links they measured 22px — the hardest things on the page to
   tap. 44px is the comfortable minimum for a touch target. */
.plain a{color:var(--fg);min-height:44px;display:inline-flex;align-items:center}
.plain a:hover{color:var(--green-ink)}

.hours{border-collapse:collapse;font-size:.95rem;margin:0 0 18px;
  min-width:min(340px,100%)}
.hours th,.hours td{text-align:left;padding:10px 24px 10px 0;
  border-bottom:1px solid var(--hair)}
.hours th{font-weight:400;color:var(--fg)}
.hours td{color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap}

.faq{display:grid;gap:10px;max-width:74ch}
.faq__item{border:1px solid var(--line);border-radius:14px;
  background:var(--panel);padding:0 18px}
.faq__item summary{cursor:pointer;padding:14px 0;font-family:var(--display);
  font-variation-settings:"SOFT" 60;font-weight:600;font-size:1.02rem;
  min-height:48px;display:flex;align-items:center;color:var(--fg)}
.faq__item summary::marker{color:var(--green-ink)}
.faq__item[open] summary{color:var(--green-ink)}
.faq__item p{color:var(--fg);margin:0 0 16px;max-width:64ch;line-height:1.6}

/* ─────────────  legal pages  ───────────── */
.legal{max-width:74ch}
.legal h2{font-size:clamp(1.15rem,2.4vw,1.5rem);margin:32px 0 10px}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--fg);margin:0 0 14px;line-height:1.65}
.legal a{color:var(--fg)}
.legal a:hover{color:var(--green-ink)}
.legal b{color:var(--fg);font-weight:500}
/* Bracketed and highlighted so an unfilled statutory field cannot be mistaken for
   real data, or quietly reach launch. */
.todo{display:inline-block;padding:3px 9px;border-radius:6px;
  background:rgba(244,147,42,.18);color:#8A5215;
  font-family:var(--sans);font-size:.9rem;font-weight:500}

/* ─────────────  hero image  ─────────────
   The photograph shows in FULL at every width. It used to go full-bleed behind the
   headline above 900px with object-fit:cover, which cropped it to 55% at 1280px and
   47% on a wide monitor — a 3.11:1 banner squeezed into a 1.47:1 box. Phones showed
   the whole thing and desktops showed a slice of it, which is backwards.

   Nothing here assumes a ratio, so replacing the placeholder photo with a portrait or
   a square needs no CSS change. Text sits below the image on the page ground, so the
   hero also needs no scrim, no inverted palette and no contrast bound — all three
   existed only to make cream type legible on a photograph. */
.hero--img{padding-top:0}
.hero__media{display:block;width:100%;margin:0 0 clamp(20px,4vw,34px);
  border-radius:clamp(12px,1.4vw,18px);overflow:hidden}
.hero__media img{width:100%;height:auto;display:block}