/* site/css/main.css — the one stylesheet (a second file buys nothing at
   this size — v1 precedent, unchanged reasoning). Palette, spacing and
   type come from the design's inline styles (`.pipeline/design/Direction
   A - Menu Board.dc.html`) — the print PDFs are no longer the palette
   source (spec §7). RTL is handled almost entirely by logical properties
   (inline-start/end, flexbox `dir` awareness); the exceptions (arrow
   flip, RTL heading font swap) are called out below. */

/* ---------------------------------------------------------------------
   Fonts — self-hosted Fontsource 5.3.0, exact files per spec §6.
   unicode-range values below are copied verbatim from Fontsource's own
   published CSS (fetched and diffed against this file while writing it,
   not guessed) EXCEPT Tajawal's, which Fontsource ships with no range at
   all — that one is hand-added, unchanged from v1.
   ------------------------------------------------------------------- */

@font-face {
  font-family: "Playfair Display Variable";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/playfair-display-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  /* Same family NAME as the latin face above, on purpose: this is what
     lets one `font-family: "Playfair Display Variable"` entry in a stack
     serve both scripts — the browser tries every @font-face sharing the
     name and picks whichever unicode-range covers the glyph being
     painted. RU renders THE ORIGINAL from this rule's sibling (latin)
     and КУРИНЫЕ СТРИПСЫ from this one, on the same line, with zero JS —
     the same mechanism v1 already used for Latin-inside-Arabic. Loads
     only when RU is the active language (spec §6 budget table). */
  font-family: "Playfair Display Variable";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/playfair-display-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  font-family: "Figtree Variable";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/figtree-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  /* Figtree has no Cyrillic face at all (confirmed by a 404 against
     Fontsource's CDN while sourcing these files) — RU body text falls
     through Figtree's latin-only range to THIS family instead. */
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/noto-sans-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  /* Always loaded, every language: the "РУ" switcher pill renders in
     this face regardless of which language is active (spec §6/§12 edge
     4) — CSS weight-matching (pill is styled ≥600) picks this 700 file
     over the 400 one above without any extra markup; see the disclosure
     comment further down for the general mechanism. */
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/noto-sans-cyrillic-700-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  /* Always loaded, every language — not just when TH is active: note2's
     beef/price footnote contains a literal ฿ (U+0E3F) in EVERY language,
     and U+0E01-0E5B below includes it. This closes v1's known
     limitation where a Thai-font-less desktop Linux showed tofu for ฿ —
     see README "known limitations". */
  font-family: "Noto Sans Thai";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/noto-sans-thai-thai-400-normal.woff2") format("woff2");
  unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}

@font-face {
  /* Always loaded: the "ไทย" switcher pill (weight ≥600) needs it
     regardless of active language, same reasoning as Noto Sans 700 above. */
  font-family: "Noto Sans Thai";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/noto-sans-thai-thai-700-normal.woff2") format("woff2");
  unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}

@font-face {
  /* Arabic face: Tajawal, NOT the design's Noto Sans Arabic — an
     operator ruling (48,840 B for weight 400 alone vs Tajawal's 8,932 B;
     spec intro). AR renders in a different face than the mock; intended,
     do not "fix". Fontsource ships Tajawal with no unicode-range, so
     this hand-written one is unchanged from v1. */
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/tajawal-arabic-400-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;
}

@font-face {
  /* Always loaded, every language — NOT just AR: the bilingual halal
     badge ("حلال HALAL") renders Arabic script on every page regardless
     of active language (spec §4.3 row 9), and the "عربي" switcher pill
     does too. Both are styled ≥600, so weight-matching against this
     400/700 pair picks this file for them without help from `[dir]`
     (see --font-body below, which is intentionally NOT dir-gated). */
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/tajawal-arabic-700-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;
}

/* ---------------------------------------------------------------------
   Tokens
   ------------------------------------------------------------------- */

:root {
  /* Palette — from the design's inline styles (spec §7), not the print
     PDFs. Four tokens below carry the operator's ESCAPE-HATCH values
     instead of the design's literal ones — ruling recorded here because
     it reverses what spec §7's prose defaults to (see the long comment
     immediately below this block for the full disclosure; do not
     "restore" the literal values without re-reading it). */
  --green: #06512e;
  --green-deep: #06421f;      /* CTA text on gold; also the darkest header-gradient stop context */
  --grad-a: #0b4227;          /* header gradient, 175deg, stop 0% */
  --grad-b: #0b3d24;          /* header gradient, 175deg, stop 100% (--green is the 60% stop) */
  --gold: #d9b45f;            /* badges/pills/handle on green — 4.79:1, passes AA (see disclosure) */
  --gold-line: #b98a2f;       /* rules, borders — decorative only, never text */
  --gold-ink: #8d6213;        /* ESCAPE HATCH (was #a2731f) — solo price-sub line, cat-note */
  --gold-deep: #7c5a12;       /* size-pill text — passes AA outright, no escape hatch needed */
  --gold-pale: #e9d9ae;       /* header "sub" (concept) text on green */
  --gold-hover: #e3c377;      /* :hover only — decorative, not a static text/bg pair, no AA relevance */
  --cream: #f5ead8;           /* text/badges on green & sage — NOT the page bg */
  --sage: #5f6f48;            /* ESCAPE HATCH (was #7a8a5e) — tag pill background */
  --sage-pale: #bfd6c2;       /* footer trust line on green */
  --pill-idle: #cfdccb;       /* idle language-pill text on green */
  --ink-muted: #5c6152;       /* item descriptions — 5.37:1, passes */
  --nav-idle: #6c6a57;        /* ESCAPE HATCH (was #7d7a68) — idle sticky-nav links */
  --note-muted: #6e6b58;      /* ESCAPE HATCH (was #8a8672) — category note2 */

  --navh: 53px;               /* re-measured after the +2pt type bump (was 48px) */
  --radius: 10px;
  --shell-width: 35rem;       /* 560px — the design's own wrapper max-width */

  /* RTL swap for Arabic ONLY affects --font-heading (item names/cat
     titles when AR is active) — v1's pattern, unchanged (spec §6: "keep
     v1's [dir=rtl] stack swap to Tajawal 700, Playfair first for Latin
     names"). --font-body is deliberately NOT dir-gated: see its own
     comment below. */
  --font-heading: "Playfair Display Variable", "Noto Sans Thai", system-ui, serif;
  --font-body: "Figtree Variable", "Noto Sans Thai", "Noto Sans", "Tajawal", system-ui, sans-serif;
  /* Tagline-only: spec §6's "tagline italic" deviation — a real italic
     Playfair file would cost 23,076 B (38,804 B more for a RU cyrillic
     italic) for one 14.5px line. Weight 500 + font-style italic +
     browser-synthesized slant instead. TH/AR taglines render upright —
     neither font has an italic face — same as v1, intended. */
  --font-tagline: "Playfair Display Variable", "Noto Sans Thai", system-ui, serif;
}

/* Why --font-body is NOT wrapped in a [dir="rtl"] override (unlike
   --font-heading, which still is): the bilingual halal badge and the
   "عربي" language pill both use --font-body, and both render Arabic
   script on EVERY page load regardless of the active language or its
   directionality (spec §4.3 row 9, §12 edge 4) — gating Tajawal behind
   [dir="rtl"] the way v1 did would starve those two elements of it on
   every LTR (en/fr/th/ru) visit. Listing Tajawal (and Noto Sans /
   Noto Sans Thai) unconditionally costs nothing extra: a @font-face is
   only ever fetched when a glyph it actually covers needs to be painted,
   so an EN visitor who never renders a Cyrillic or Devanagari-range
   character never fetches those faces just because they are named in
   the stack. This is the same mechanism, just applied one level higher
   than v1's per-element RTL gating.
   Regular body text (weight ~400) still only pulls Tajawal when it is
   actually Arabic (i.e. only in AR mode, which is always [dir="rtl"]
   anyway) — the always-loaded/AR-only split in spec §6's budget table
   falls out of weight-matching + glyph presence, not of a CSS gate:
   400 is fetched only for AR body copy; 700 is fetched by the
   badge/pill everywhere (weight ≥600 resolves upward to the 700 face). */
html[dir="rtl"] {
  --font-heading: "Playfair Display Variable", "Noto Sans Thai", "Tajawal", system-ui, serif;
}

/* ---------------------------------------------------------------------
   §7 escape-hatch disclosure — READ BEFORE "restoring" the literal
   design colours.
   Spec §7's prose default is to ship the design's four literal values
   (#a2731f, #7d7a68, #8a8672, #7a8a5e sage-pill-bg) and disclose the
   resulting sub-4.5 AA failures. The OPERATOR overrode that default:
   ship pre-derived escape-hatch values instead (spec §7 called these
   "NOT shipped" — they are, here, by ruling). The FIRST escape-hatch
   pass (`#8f6415`, `#716e5b`) computed at 4.41:1 and 4.32:1 — still
   sub-4.5 despite the swap, contradicting spec §7's "each clears 4.5"
   claim; disclosed rather than silently shipping that claim, matching
   this file's own precedent (the v1 4.4818-vs-4.65 correction). The
   operator then ruled a SECOND nudge for exactly those two tokens,
   verified independently below (not taken on trust — this file already
   caught one wrong contrast claim in this same spot).
   Computed WCAG 2.x contrast, current shipped values (same sRGB
   relative-luminance method the spec's own 4.79/7.93/etc. figures use):
     #8d6213 on #fff (4.54:1 back when the page was #f5ead8) -> 5.40:1
     #6c6a57 on #fff (4.60:1 on #f5ead8) -> 5.47:1
     #6e6b58 on #fff (4.52:1 on #f5ead8) -> 5.38:1
     #f5ead8 on #5f6f48 (was #7a8a5e) -> 4.58:1 — cream-on-sage, the one
       pair the white page does not touch, unchanged since the first pass
   All four clear AA 4.5:1. The white page only widened the first three
   margins; the ruled hexes stay (pinned by tests/assets.test.mjs).
   Lighthouse Accessibility should no longer carry a color-contrast
   deduction from these four tokens (any other deduction is unrelated to
   this palette).
   ------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   Reset / base
   ------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: #fff;
  color: var(--green);
  font-family: var(--font-body);
  font-size: calc(1rem + 2pt);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, p, ul, figure { margin: 0; }
img { max-width: 100%; display: block; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
ul { padding: 0; }

/* The `.chip` etc. rules below set `display` with the same specificity
   as the UA stylesheet's `[hidden]` rule; without this, our later
   `display` declarations would win by source order and the table chip
   would stay visible when it shouldn't (v1 rule, unchanged). */
[hidden] { display: none !important; }

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}
.brand :focus-visible {
  outline-color: var(--cream); /* green outline is invisible on the green header */
}

/* ---------------------------------------------------------------------
   Skip link
   ------------------------------------------------------------------- */

.skip {
  position: absolute;
  inset-inline-start: .5rem;
  inset-block-start: -3rem;
  z-index: 100;
  background: var(--green);
  color: var(--cream);
  font-weight: 600;
  padding: .6em 1.1em;
  border-radius: 6px;
  transition: inset-block-start .15s ease;
}
.skip:focus {
  inset-block-start: .5rem;
}

/* ---------------------------------------------------------------------
   Header
   ------------------------------------------------------------------- */

.brand {
  max-width: var(--shell-width);
  margin-inline: auto;
  background: linear-gradient(175deg, var(--grad-a) 0%, var(--green) 60%, var(--grad-b) 100%);
  color: var(--cream);
  text-align: center;
  padding: 1.625rem 1.25rem 1.375rem;
}
.brand__logo {
  width: 236px;
  max-width: 80%;
  margin-inline: auto;
}
.brand__concept {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: calc(.75rem + 2pt);
  color: var(--gold-pale);
  margin-block-start: .75rem;
}
.brand__tagline {
  font-family: var(--font-tagline);
  font-weight: 500;
  font-style: italic;
  font-synthesis-style: auto;
  font-size: calc(.906rem + 2pt);
  color: var(--sage-pale);
  margin-block-start: .4375rem;
}
.brand__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-block-start: .875rem;
}
.badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(217, 180, 95, .7);
  color: var(--gold);
  border-radius: 999px;
  padding: .25rem .75rem;
  font-size: calc(.72rem + 2pt);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}
.chip--table {
  font-weight: 500;
  letter-spacing: normal;
  font-size: calc(.82rem + 2pt);
  color: var(--cream);
  border-color: rgba(245, 234, 216, .4);
  background: transparent;
  border-radius: 999px;
  padding: .25rem .75rem;
  border-width: 1px;
  border-style: solid;
}

.lang-switch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .375rem;
  margin-block-start: 1rem;
}
.lang-btn {
  border-radius: 999px;
  padding: .3125rem .6875rem;
  font-size: calc(.6875rem + 2pt);
  cursor: pointer;
  border: 1px solid rgba(245, 234, 216, .4);
  color: var(--pill-idle);
  background: transparent;
  font-weight: 600;
}
.lang-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.lang-btn[aria-pressed="true"] {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--green-deep);
  font-weight: 700;
}
.lang-btn[aria-pressed="true"]:hover {
  background: var(--gold-hover);
}

.cta {
  display: block;
  width: fit-content;
  background: var(--gold);
  color: var(--green-deep);
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
}
.cta:hover {
  background: var(--gold-hover);
}
.cta__arrow {
  display: inline-block;
}
/* The arrow is a system-font glyph outside Fontsource's latin range by
   design (spec §6) — under RTL it must point the reading direction. */
html[dir="rtl"] .cta__arrow {
  transform: scaleX(-1);
}
.brand__cta {
  margin: 1.125rem auto 0;
  max-width: 200px;
  padding: .5625rem 1.125rem;
  font-size: calc(.8125rem + 2pt);
  letter-spacing: .05em;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}

/* ---------------------------------------------------------------------
   Chip nav / scroll-spy
   ------------------------------------------------------------------- */

.catnav {
  max-width: var(--shell-width);
  margin-inline: auto;
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, .95);
  /* rgba above is a solid-ish (95% opaque) fallback on its own — an
     engine that ignores backdrop-filter entirely still gets a readable,
     nearly-opaque nav bar (spec §12 edge 12), the blur below is a
     progressive enhancement, not a requirement for legibility. */
  backdrop-filter: blur(6px);
  border-block-end: 1px solid rgba(6, 81, 46, .18);
  padding-block: .625rem;
}
.catnav__list {
  display: flex;
  gap: 1.125rem;
  list-style: none;
  margin: 0;
  padding-inline: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}
.catnav__list::-webkit-scrollbar { display: none; }
.catnav__list li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.chip {
  display: inline-block;
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: .1em;
  font-size: calc(.8125rem + 2pt);
  color: var(--nav-idle);
  padding-block-end: .1875rem;
  border-block-end: 2px solid transparent;
}
.chip:hover {
  color: var(--green);
}
.chip.chip--active {
  color: var(--green);
  border-block-end-color: var(--gold-line);
}

/* ---------------------------------------------------------------------
   Menu
   ------------------------------------------------------------------- */

#menu {
  max-width: var(--shell-width);
  margin-inline: auto;
  padding-inline: 1.25rem;
  padding-block-end: 1.5rem;
}
main > section {
  padding-block: 1.625rem .375rem;
  /* Nav is sticky at --navh; land a little below it, not flush. */
  scroll-margin-top: calc(var(--navh) + 8px);
}
/* Cheap perf win for the sections below the fold — skip rendering work
   until they are near the viewport. contain-intrinsic-size keeps their
   place in layout (and hence scroll-spy geometry) sane before that
   (v1 pattern, unchanged mechanism — spec §5.4/§12 edge 14). */
main > section:not(:first-of-type) {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

.cat-title {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.35rem + 2pt, 5vw + 2pt, 1.875rem + 2pt);
  color: var(--green);
  text-wrap: pretty;
}
.cat-note {
  display: flex;
  align-items: center;
  gap: .625rem;
  color: var(--gold-ink);
  font-size: calc(.8125rem + 2pt);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-align: center;
  text-wrap: pretty;
  margin-block: .5em .25em;
}
.cat-note::before, .cat-note::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--gold-line);
  opacity: .5;
}
.cat-note2 {
  text-align: center;
  color: var(--note-muted);
  font-size: calc(.8125rem + 2pt);
  text-wrap: pretty;
  margin-block-end: .375rem;
}

.items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.item {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding-block: 1rem;
  border-block-end: 1px solid rgba(185, 138, 47, .3);
}
.item__img {
  flex: none;
  object-fit: contain;
}
.item__body { flex: 1 1 0%; min-width: 0; }
.item__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.item__name {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: calc(1.156rem + 2pt);
  color: var(--green);
}
.item__tag {
  background: var(--sage);
  color: var(--cream);
  border-radius: 999px;
  padding: .125rem .5625rem;
  font-size: calc(.625rem + 2pt);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}
.item__desc {
  font-size: calc(.906rem + 2pt);
  line-height: 1.45;
  color: var(--ink-muted);
  margin-block-start: .1875rem;
}

.item__sizes {
  display: flex;
  gap: .375rem;
  flex-wrap: wrap;
  margin-block-start: .5rem;
}
.size-pill {
  border: 1px solid rgba(185, 138, 47, .5);
  color: var(--gold-deep);
  border-radius: 999px;
  padding: .1875rem .625rem;
  font-size: calc(.781rem + 2pt);
  font-weight: 700;
  /* Uppercases only the label letters ("Small" -> "SMALL"); digits/×/—
     have no case and pass through unchanged. Matches print's "SMALL ×4"
     (spec §4.3 row 5) from Title-Case data ("Small ×4"), same mechanism
     as item names (row 8) — do NOT apply this same treatment to
     .item__price-sub, whose "burger only 289" is print-mandated
     lowercase (row 1), the opposite convention. */
  text-transform: uppercase;
  white-space: nowrap;
}

.item__price {
  flex: none;
  text-align: end;
}
.price {
  /* The ฿ trap (only reachable via authored note2 prose now, prices
     themselves are bare digits): U+0E3F is outside Figtree/Playfair's
     latin range, so a glyph that did need it would fall through to Noto
     Sans Thai — always loaded, see the @font-face block above. Prices
     never contain it directly any more (v2 drops the symbol from
     formatPrice entirely — spec §8), this comment stays because a future
     maintainer might otherwise "helpfully" re-add ฿ here. */
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: calc(1.3125rem + 2pt);
  color: var(--green);
  white-space: nowrap;
}
.item__price-sub {
  display: block;
  margin-block-start: .125rem;
  font-size: calc(.781rem + 2pt);
  color: var(--gold-ink);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------- */

.site-footer {
  max-width: var(--shell-width);
  margin-inline: auto;
  background: var(--green);
  margin-block-start: 1.625rem;
  padding: 1.625rem 1.25rem;
  padding-block-end: max(1.625rem, env(safe-area-inset-bottom));
  text-align: center;
}
.footer__cta {
  margin: 0 auto 1.25rem;
  max-width: 240px;
  padding: .6875rem 1.25rem;
  font-size: calc(.875rem + 2pt);
  letter-spacing: .04em;
}
.footer__socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--green);
}
.social-link:hover { color: var(--green-deep); }
/* CSS-only: the data value stays lowercase (it's also a functional href
   username); print/design render it "@THEHOMIESPHUKET" (spec §8). */
.footer__handle {
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: calc(.75rem + 2pt);
  margin-block-start: .75rem;
}
.footer__claims {
  color: var(--sage-pale);
  font-size: calc(.6875rem + 2pt);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-block-start: .625rem;
}

/* ---------------------------------------------------------------------
   Error state / noscript
   ------------------------------------------------------------------- */

.error-state {
  max-width: 30rem;
  margin-inline: auto;
  padding: 3rem 1rem;
  text-align: center;
}
.error-state h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--green);
}
.error-state p {
  color: var(--ink-muted);
  margin-block-start: .5em;
}
.retry-btn {
  font-weight: 600;
  background: var(--green);
  color: var(--cream);
  border: none;
  border-radius: 999px;
  padding: .65em 1.7em;
  margin-block-start: 1.25em;
  cursor: pointer;
}

noscript {
  display: block;
  padding: 2rem 1rem;
  text-align: center;
}