/* --------------------------------------------------------------------------
   Fonts - Self-hosted, same origin as this stylesheet
   --------------------------------------------------------------------------
   These used to come from fonts.googleapis.com, which cost two extra
   round trips on two third-party origins before a single glyph could render:
   one for the stylesheet, then another to fonts.gstatic.com for the files.
   Locally that measured 109ms to first byte against 1ms for this file, so the
   font was never arriving with the CSS - It arrived long after it.

   Self-hosting puts the woff2 files behind the same connection that already
   fetched the HTML and the CSS, which means they can be preloaded from the
   document head and land together. Variable fonts cover every weight we use
   in four files rather than the ten static instances Google was serving.

   The @font-face blocks below the real ones are metric-matched fallbacks.
   font-display: swap paints text in a fallback first and swaps when the
   webfont lands; if the two fonts have different metrics that swap reflows
   every line of text, which is a layout shift the user never asked for.
   Overriding the fallback's ascent, descent and advance width to match makes
   the swap invisible instead. Fraunces against plain Georgia was the worst
   offender - It sets every heading on the site.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/fraunces-latin.woff2') format('woff2');
  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 {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/inter-latin.woff2') format('woff2');
  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;
}

/* Metric-matched stand-ins.
   --------------------------------------------------------------------------
   Every number here is measured, not estimated: size-adjust is the ratio of
   average character advance between the real face and the stand-in, weighted
   by English letter frequency, and ascent/descent are the real face's metrics
   divided by that ratio.

   Width is what matters. Headings and body text on this site set line-height
   as a unitless multiple (1.18 and 1.65), so the line box is a function of
   font-size alone and the vertical overrides never move it. What moves the
   page is WRAPPING: if the stand-in is narrower than the real face, a heading
   that fits two lines before the swap needs three after it, and everything
   below jumps. That is the whole of the layout shift.

   The previous values gave Georgia size-adjust 103%, an effective average
   width of 0.4551 against Fraunces' 0.4940 at heading sizes - 8.6% too
   narrow. On a phone, where a heading nearly fills the viewport, a margin
   that big changes the line count constantly.

   Fraunces is measured at weight 700 and the optical sizes its headings
   actually request (font-optical-sizing is auto, so opsz tracks font-size),
   NOT at the file's default instance, which is weight 900 at opsz 9 and much
   wider than anything the site renders.

   One face per stand-in, because a single set of numbers cannot serve fonts
   of different widths: Georgia, Times and Noto Serif are 9% apart. Listing
   them together would leave two of the three miscalibrated. Android carries
   none of the first two, so without the Noto face the whole @font-face fails
   to load there and no adjustment is applied at all.
   -------------------------------------------------------------------------- */

/* Inter against Arial (0.4442) and Roboto (0.4438) - Near enough identical
   that one calibration serves both, so Apple, Windows and Android agree. */
@font-face {
  font-family: 'Inter Fallback';
  /* Arial leads even on macOS: Helvetica Neue measures +1.2% wider than the
     Arial these numbers are calibrated for, and the stand-in is on screen for
     milliseconds - Exact width beats a marginally prettier flash. Every face
     here measures 0.444 em average advance within a whisker. */
  src: local('Arial'), local('Liberation Sans'), local('Arimo'),
       local('Roboto'), local('Noto Sans'), local('Droid Sans'),
       local('Helvetica Neue'), local('Segoe UI');
  size-adjust: 107.2%;
  ascent-override: 90.4%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

/* Fraunces against Georgia (0.4418): Apple, Windows and most desktops. */
@font-face {
  font-family: 'Fraunces Fallback';
  src: local('Georgia');
  size-adjust: 111.8%;
  ascent-override: 87.5%;
  descent-override: 22.8%;
  line-gap-override: 0%;
}
/* Against Times (0.4034), which is 9% narrower than Georgia and needs its
   own numbers. Liberation Serif and Tinos are metric clones of it. */
@font-face {
  font-family: 'Fraunces Fallback Times';
  src: local('Times New Roman'), local('Times'), local('Liberation Serif'),
       local('Tinos');
  size-adjust: 122.5%;
  ascent-override: 79.9%;
  descent-override: 20.8%;
  line-gap-override: 0%;
}
/* Against Noto Serif (0.4791), which is what Android actually has. Android
   ships no Georgia and no Times, so before this face existed the stand-in
   simply failed to load there. */
@font-face {
  font-family: 'Fraunces Fallback Android';
  src: local('Noto Serif'), local('Droid Serif'), local('Roboto Serif'),
       local('Source Serif Pro');
  size-adjust: 103.1%;
  ascent-override: 94.9%;
  descent-override: 24.7%;
  line-gap-override: 0%;
}

/* ============================================================
   FoodMenu.guide - Design system
   Structure follows the clean, card-and-table chrome of sudoku.by;
   the palette is built for food: paprika orange, basil green for
   prices, saffron for data, espresso ink on warm cream.
   ============================================================ */

:root {
  --brand:        #e2571f;
  --brand-dark:   #bd4213;
  --brand-deep:   #93300b;
  --brand-light:  #fff2ea;
  --brand-border: #ffd3bd;

  --accent:       #0f7a5c;   /* prices, "cheapest", value signals */
  --accent-dark:  #0b5f47;
  --accent-light: #e8f6f1;

  --gold:         #d9930f;   /* stats, badges, index bars */
  --gold-light:   #fff6e3;

  --ink:          #1a1411;
  --text:         #2b2320;
  --text-muted:   #6f635b;
  --text-light:   #9b8f86;

  --surface:      #ffffff;
  --surface-2:    #fbf7f2;
  --surface-3:    #f4ede4;
  --border:       #e9dfd3;
  --border-strong:#d9cbba;

  --shadow-sm: 0 1px 3px rgba(43,35,32,.07);
  --shadow:    0 4px 14px rgba(43,35,32,.10);
  --shadow-lg: 0 12px 32px rgba(43,35,32,.15);

  --radius:    12px;
  --radius-sm: 7px;
  --radius-lg: 18px;
  --nav-height: 62px;

  --font: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Fraunces', 'Fraunces Fallback', 'Fraunces Fallback Times', 'Fraunces Fallback Android', Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --max: 1200px;
  --content: 760px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  /* Desktop CLS that has nothing to do with fonts: on browsers with classic
     scrollbars (Windows mostly), the bar appears only once content overflows,
     and when it does the viewport narrows ~15px and every centered container
     shifts left. Reserving the gutter up front makes the width stable from
     the first paint. Overlay-scrollbar platforms ignore this. */
  scrollbar-gutter: stable; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--surface-2);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, iframe { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-dark); text-decoration: none; }
a:hover { color: var(--brand-deep); }

h1, h2, h3, h4, h5, h6 { line-height: 1.18; color: var(--ink); font-weight: 700; }
h1 { font-size: clamp(1.85rem, 4vw, 2.6rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); letter-spacing: -.015em; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
.display, .page-hero h1, .article-body h1, .article-body h2,
.hub-card h3, .magazine h2 { font-family: var(--display); font-optical-sizing: auto; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink);
  color: #fff; padding: 10px 16px; z-index: 300; }
.skip-link:focus { left: 0; }

/* ---------- Layout ---------- */
.container { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }
.container-narrow { max-width: 900px; margin: 0 auto; padding: 0 1.25rem; }
/* Most page wrappers are also .container elements. Set only the block-axis
   spacing here so the container's horizontal gutter is preserved on phones
   and at viewports that sit directly on the maximum content width. */
.page-wrap { padding-top: 2.25rem; padding-bottom: 3rem; }
.section { padding: 2.75rem 0; }
.section-tight { padding: 1.75rem 0; }
.section-alt { background: var(--surface); border-block: 1px solid var(--border); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.section-head h2 { margin: 0; }
.section-head p { margin: .35rem 0 0; color: var(--text-muted); font-size: .94rem; }
.see-all { font-weight: 600; font-size: .88rem; white-space: nowrap; }

/* ---------- Navigation ---------- */
.site-nav {
  background: var(--surface); border-bottom: 1px solid var(--border);
  height: var(--nav-height); position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow-sm);
}
.nav-inner { display: flex; align-items: center; height: 100%; gap: 0; }
.nav-logo {
  display: flex; align-items: center; gap: .5rem; font-size: 1.22rem;
  font-weight: 800; color: var(--ink); letter-spacing: -.03em;
  margin-right: 1.5rem; white-space: nowrap; flex-shrink: 0;
  font-family: var(--display);
}
.nav-logo:hover { color: var(--brand-dark); }
.nav-logo .logo-mark {
  display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 9px; background: var(--brand); color: #fff; font-size: 1rem;
  box-shadow: 0 2px 6px rgba(226,87,31,.35);
}
.nav-logo .tld { color: var(--brand); font-weight: 700; }
.nav-links { display: flex; align-items: center; gap: .1rem; flex: 1; list-style: none; }
.nav-links a, .nav-dropdown-trigger {
  display: block; padding: .4rem .7rem; border-radius: var(--radius-sm);
  font-size: .88rem; font-weight: 500; color: var(--text); white-space: nowrap;
  transition: background .15s, color .15s; cursor: pointer; user-select: none;
  background: none; border: 0; font-family: inherit;
}
.nav-links a:hover, .nav-links a.active,
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger.active { background: var(--brand-light); color: var(--brand-dark); }
.nav-has-dropdown { position: relative; }
.nav-dropdown-trigger { display: flex; align-items: center; gap: .3rem; }
.nav-dropdown-trigger svg { flex-shrink: 0; transition: transform .15s; }
.nav-mega {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 14px 44px rgba(43,35,32,.16); width: 680px;
  /* The 8px top padding doubles as the bridge between trigger and panel: the
     panel now starts at the trigger's bottom edge, so travelling down never
     crosses dead space. */
  padding: .8rem 0 .55rem; margin-top: 0;
  z-index: 300;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .13s ease, transform .13s ease, visibility .13s;
}
.nav-mega.narrow { width: 420px; }
/* Opened by JS (.is-open) so a short delay can keep it open while the pointer
   crosses the gap. The :hover and :focus-within rules are the no-JS fallback. */
.nav-has-dropdown.is-open > .nav-mega,
.no-js .nav-has-dropdown:hover > .nav-mega,
.nav-has-dropdown:focus-within > .nav-mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-has-dropdown.is-open > .nav-dropdown-trigger,
.nav-has-dropdown:focus-within > .nav-dropdown-trigger {
  background: var(--brand-light); color: var(--brand-dark);
}
.nav-has-dropdown.is-open > .nav-dropdown-trigger svg { transform: rotate(180deg); }
/* An invisible strip under the trigger so a diagonal mouse path stays inside
   the hover target the whole way down. */
.nav-has-dropdown::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px;
  display: none;
}
.nav-has-dropdown.is-open::after { display: block; }
.nav-mega-cols { display: grid; grid-template-columns: 1fr 1fr; }
.nav-mega-cols.three { grid-template-columns: 1fr 1fr 1fr; }
.nav-mega-col { padding: 0 .3rem; }
.nav-mega-heading {
  font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-light); padding: .55rem 1rem .2rem;
}
.nav-mega a {
  display: flex; align-items: center; gap: .45rem; padding: .3rem 1rem;
  font-size: .83rem; color: var(--text); border-radius: 5px;
  transition: background .1s, color .1s;
}
.nav-mega a:hover { background: var(--brand-light); color: var(--brand-dark); }
.nav-mega a .flag { font-size: .95rem; }
.nav-mega a .count { margin-left: auto; font-size: .7rem; color: var(--text-light); }
.nav-mega-footer {
  border-top: 1px solid var(--border); margin-top: .5rem; padding: .55rem 1rem 0;
  display: flex; justify-content: flex-end;
}
.nav-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0;
  margin-left: auto; }

.nav-search { position: relative; }
.nav-search input {
  width: 190px; padding: .38rem .7rem .38rem 2rem; border: 1.5px solid var(--border);
  border-radius: 999px; font-size: .84rem; font-family: inherit; background: var(--surface-2);
  color: var(--text); transition: width .18s, border-color .15s, background .15s;
}
.nav-search input:focus { outline: none; width: 230px; border-color: var(--brand-border);
  background: var(--surface); box-shadow: 0 0 0 3px rgba(226,87,31,.12); }
.nav-search svg { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%);
  color: var(--text-light); pointer-events: none; }

.nav-hamburger {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 44px; height: 44px; border: none; background: none; cursor: pointer;
  border-radius: var(--radius-sm); padding: 6px; flex-shrink: 0;
}
.nav-hamburger:hover { background: var(--brand-light); }
.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--text);
  border-radius: 2px; transition: transform .22s, opacity .22s, width .22s; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The nav opens as a drawer from the right rather than a sheet dropping over
   the whole screen. The hamburger is on the right, so the panel arrives from
   under the thumb that opened it, and leaving the left edge uncovered keeps
   the page visible behind it - You can see what you are navigating away from,
   and there is somewhere obvious to tap to dismiss. */
.nav-mobile-panel {
  display: none; position: fixed; top: var(--nav-height); right: 0; bottom: 0;
  left: auto; width: min(86vw, 380px);
  z-index: 99; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 30px rgba(43,35,32,.14);
  padding: .5rem 0 calc(2.5rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(100%);
  transition: transform .24s cubic-bezier(.22, .8, .3, 1);
}
.nav-mobile-panel.open { transform: translateX(0); }

/* Tapping the page beside the drawer closes it. */
.nav-mobile-scrim {
  display: none; position: fixed; top: var(--nav-height); inset: var(--nav-height) 0 0 0;
  z-index: 98; background: rgba(45, 26, 18, .38);
  opacity: 0; transition: opacity .2s ease;
}
.nav-mobile-scrim.open { opacity: 1; }
.mob-link { display: block; padding: .65rem 1.25rem; font-size: .95rem; font-weight: 500; color: var(--text); }
.mob-link:hover, .mob-link.active { background: var(--brand-light); color: var(--brand-dark); }
.nav-mobile-section { border-top: 1px solid var(--border); margin-top: .4rem; padding-top: .4rem; }
.nav-mobile-acc-btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: .65rem 1.25rem; font-size: .95rem; font-weight: 500; color: var(--text);
  background: none; border: none; cursor: pointer; text-align: left; font-family: inherit;
}
.nav-mobile-acc-btn:hover { background: var(--brand-light); color: var(--brand-dark); }
.nav-mobile-acc-btn svg { transition: transform .2s; flex-shrink: 0; }
.nav-mobile-acc-btn.open svg { transform: rotate(180deg); }
.nav-mobile-acc-body { display: none; padding: 0 0 .4rem; }
.nav-mobile-acc-body.open { display: block; }
.mob-sub-link { display: block; padding: .45rem 1.25rem .45rem 2.25rem; font-size: .87rem; color: var(--text-muted); }
.mob-sub-link:hover { background: var(--brand-light); color: var(--brand-dark); }
.nav-mobile-search { padding: .8rem 1.25rem; }
.nav-mobile-search input { width: 100%; padding: .6rem .9rem; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); font-size: .92rem; font-family: inherit; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem 1.2rem; border-radius: var(--radius-sm); font-size: .88rem;
  font-weight: 600; cursor: pointer; border: 2px solid transparent;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
  white-space: nowrap; font-family: inherit;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-outline { background: transparent; color: var(--brand-dark); border-color: var(--brand-border); }
.btn-outline:hover { background: var(--brand-light); color: var(--brand-deep); }
.btn-ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-ink:hover { background: #000; color: #fff; }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-3); color: var(--text); }
.btn-white { background: #fff; color: var(--brand-dark); border-color: #fff; }
.btn-sm { padding: .32rem .8rem; font-size: .79rem; }
.btn-lg { padding: .75rem 1.7rem; font-size: 1rem; }
.btn-full { width: 100%; }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-body { padding: 1.25rem 1.35rem; }
.card-header { padding: .9rem 1.35rem; border-bottom: 1px solid var(--border); font-weight: 700; }
.card-footer { padding: .85rem 1.35rem; border-top: 1px solid var(--border);
  background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }

/* ---------- Badges & chips ---------- */
.badge { display: inline-block; padding: .15rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; letter-spacing: .01em; }
.badge-brand { background: var(--brand-light); color: var(--brand-dark); }
.badge-accent { background: var(--accent-light); color: var(--accent-dark); }
.badge-gold { background: var(--gold-light); color: #8a5c04; }
.badge-gray { background: var(--surface-3); color: var(--text-muted); }
.badge-ink { background: var(--ink); color: #fff; }

.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .8rem;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
  font-size: .82rem; font-weight: 500; color: var(--text); transition: all .13s;
}
.chip:hover { border-color: var(--brand-border); background: var(--brand-light); color: var(--brand-dark); }
.chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip.active:hover { color: #fff; }
.chip .n { font-size: .72rem; color: var(--text-light); }
.chip.active .n { color: rgba(255,255,255,.75); }

/* ---------- Price typography ---------- */
.price { font-weight: 700; color: var(--accent-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-lg { font-size: 1.35rem; }
.price-usd { color: var(--text-muted); font-size: .82rem; font-weight: 500; }
.price-none { color: var(--text-light); font-weight: 400; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(900px 420px at 85% -20%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(152deg, #e2571f 0%, #c0400f 52%, #8f2f0a 100%);
  padding: 3.25rem 0 3.5rem;
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 6px;
  background: linear-gradient(90deg, var(--gold) 0 25%, #fff 25% 50%, var(--accent) 50% 75%, var(--brand-light) 75% 100%);
}
.hero h1 { color: #fff; margin-bottom: .75rem; }
.hero .kicker {
  display: inline-flex; align-items: center; gap: .4rem; background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: .76rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; padding: .32rem .85rem;
  border-radius: 999px; margin-bottom: 1rem;
}
.hero .sub { font-size: 1.05rem; color: rgba(255,255,255,.93); margin-bottom: 1.5rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 2rem;
  padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.22); }
.hero-stat .n { font-family: var(--display); font-size: 1.85rem; font-weight: 700; color: #fff; line-height: 1; }
.hero-stat .l { font-size: .78rem; color: rgba(255,255,255,.8); letter-spacing: .04em;
  text-transform: uppercase; margin-top: .3rem; }

.hero-search { margin-top: 1.6rem; max-width: 560px; position: relative; }
.hero-search input {
  width: 100%; padding: .9rem 1rem .9rem 2.85rem; border: 0; border-radius: var(--radius);
  font-size: 1rem; font-family: inherit; box-shadow: var(--shadow-lg); color: var(--text);
}
.hero-search input:focus { outline: 3px solid rgba(255,255,255,.5); }
.hero-search svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--text-light); pointer-events: none; }
.hero-search button { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); }

/* ---------- Page hero (interior) ---------- */
.page-hero { background: var(--surface); border-bottom: 1px solid var(--border); padding: .75rem 0 1.9rem; }
.page-hero h1 { margin: .55rem 0 .5rem; }
.page-hero .sub { color: var(--text-muted); margin: 0; font-size: 1rem; }
.page-hero-meta { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-top: .9rem;
  font-size: .84rem; color: var(--text-muted); align-items: center; }
.page-hero-dark { background: var(--ink); border: 0; color: #fff; padding-bottom: 2.1rem; }
.page-hero-dark h1 { color: #fff; }
.page-hero-dark .sub { color: rgba(255,255,255,.78); }
.page-hero-dark .breadcrumb, .page-hero-dark .breadcrumb a { color: rgba(255,255,255,.62); }
.page-hero-dark .breadcrumb a:hover { color: #fff; }
.page-hero-dark .page-hero-meta { color: rgba(255,255,255,.72); }

.hero-brand-row { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.index-brand-lockup { flex: 0 0 auto; }
.index-brand-name { display: none; }
.index-hero-copy { flex: 1 1 430px; min-width: 0; }
.index-product-preview {
  width: 200px; flex: 0 0 200px; margin: 0 0 0 auto; overflow: hidden;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
}
.index-product-preview > img {
  width: 100%; height: 150px; display: block; object-fit: cover;
}
.index-product-preview figcaption {
  padding: .38rem .5rem; color: var(--text-muted); font-size: .67rem;
  line-height: 1.3; text-align: center; border-top: 1px solid var(--border);
}
.index-product-preview figcaption a { color: var(--brand-dark); text-decoration: underline; }
.index-product-preview.is-placeholder > img { opacity: .6; }
.brand-logo-lg {
  width: 78px; height: 78px; flex-shrink: 0; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--border); display: grid; place-items: center;
  padding: .5rem; box-shadow: var(--shadow-sm);
}
.brand-logo-lg img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
.brand-logo-sm {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 8px; background: #fff;
  border: 1px solid var(--border); display: grid; place-items: center; padding: .28rem;
}
.brand-logo-sm img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }

@media (max-width: 720px) {
  /* On a phone the old flex row wrapped the logo, headline and photograph as
     three unrelated rows. Keep the brand as a compact label, then give the
     useful content the full viewport width in a predictable reading order. */
  .index-detail-hero { padding: .6rem 0 1.2rem; }
  .index-detail-hero .breadcrumb { font-size: .75rem; line-height: 1.35; }
  .index-detail-hero .index-hero-row {
    display: grid; grid-template-columns: minmax(0, 1fr); align-items: start;
    gap: .7rem; margin-top: .7rem !important;
  }
  .index-brand-lockup { display: flex; align-items: center; gap: .6rem; }
  .index-brand-lockup .brand-logo-lg {
    width: 44px; height: 44px; padding: .3rem; border-radius: 10px;
  }
  .index-brand-name {
    display: block; color: var(--text-muted); font-size: .79rem;
    font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  }
  .index-detail-hero .index-hero-copy { width: 100%; }
  .index-detail-hero .index-hero-copy h1 {
    font-size: clamp(1.75rem, 9vw, 2.25rem); line-height: 1.06;
    margin: 0 0 .45rem !important;
  }
  .index-detail-hero .index-hero-copy .sub {
    font-size: .9rem; line-height: 1.5;
  }
  .index-detail-hero .index-lead { font-size: .86rem; line-height: 1.5; }
  .index-product-preview {
    margin: .15rem auto 0; width: min(170px, 56vw); flex-basis: auto;
  }
  .index-product-preview > img { height: auto; aspect-ratio: 4 / 3; }
  .index-product-preview figcaption { padding: .32rem .45rem; font-size: .64rem; }
  .index-detail-wrap { padding-top: 1rem; }
  .index-stat-strip { margin-top: 0; }
}

/* ---------- Breadcrumbs ---------- */
.breadcrumb { font-size: .81rem; color: var(--text-muted); display: flex; flex-wrap: wrap;
  gap: .3rem; align-items: center; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--brand-dark); }
.breadcrumb .sep { opacity: .45; }

/* ---------- Grids ---------- */
.grid { display: grid; gap: 1.1rem; }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.grid-5 { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }

/* ---------- Tiles: country / brand / dish ---------- */
.tile {
  display: flex; flex-direction: column; gap: .3rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 1.05rem 1.15rem;
  color: var(--text); box-shadow: var(--shadow-sm); transition: transform .14s, border-color .14s;
}
.tile:hover { transform: translateY(-2px); border-color: var(--brand-border); color: var(--text); }
.tile:hover .tile-title { color: var(--brand-dark); }
.brand-tile .tile-primary { display: flex; flex-direction: column; gap: .3rem; color: inherit; }
.brand-tile .tile-primary:hover { color: inherit; }
.tile-top { display: flex; align-items: center; gap: .65rem; }
.tile-flag { font-size: 1.6rem; line-height: 1; }
.tile-emoji { font-size: 1.55rem; line-height: 1; }
.tile-title { font-weight: 700; font-size: 1.02rem; color: var(--ink); letter-spacing: -.01em; }
.tile-sub { font-size: .82rem; color: var(--text-muted); }
/* Three figures sharing one card width. A flex item defaults to min-width:auto,
   so it will not shrink below its own content and the last column simply hangs
   out of the card - Which is what "AED 149" did next to "AED 52.91". Each
   column takes an equal share, is allowed to shrink to nothing, and wraps
   rather than overflowing. Currency prefixes vary from one character to four
   ("$" against "AED "), so this cannot be solved by picking a font size. */
.tile-stats { display: flex; flex-wrap: wrap; gap: .35rem .7rem;
  margin-top: .5rem; padding-top: .55rem;
  border-top: 1px solid var(--border); font-size: .76rem; color: var(--text-muted); }
.tile-stats > * { flex: 1 1 0; min-width: 0; }
.tile-stats b { display: block; font-size: .95rem; color: var(--ink); font-weight: 700;
  overflow-wrap: anywhere; line-height: 1.25; font-variant-numeric: tabular-nums; }
.tile-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.tile-tag { font-size: .7rem; padding: .12rem .45rem; border-radius: 4px;
  background: var(--surface-3); color: var(--text-muted); }
.tile-tags a.tile-tag:hover, .tile-tags a.tile-tag:focus-visible {
  color: var(--brand-dark); background: var(--brand-light); outline-color: var(--brand);
}

.dish-tile { position: relative; overflow: hidden; }
.dish-tile .tile-emoji { font-size: 2rem; }

/* ---------- Data tables ---------- */
/* A table is its own object on the page.
   Two of these can sit one above the other on an index page, and without a
   closed bottom edge and real space beneath it the first one runs straight
   into the next heading and the two read as one long list. The radius has to
   clip as well: a highlighted row paints its background to the corner and
   squares it off again unless the wrapper hides the overflow. */
.table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  /* A full border and a radius, so a table is a closed object rather than a
     stretch of page with rules across it. overflow: hidden is what makes the
     radius real - Without it a highlighted row paints its background into the
     corner and squares it off again. */
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.4rem;
}
.table-wrap:last-child { margin-bottom: 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: .89rem; }
.data-table thead tr { background: var(--surface-3); }
/* No corner rounding on a table header: the rule above it is the edge. */
.data-table th {
  padding: .7rem 1rem; font-weight: 700; color: var(--ink); text-align: left;
  border-bottom: 2px solid var(--border-strong); white-space: nowrap; font-size: .8rem;
  letter-spacing: .03em; text-transform: uppercase;
}
.data-table td { padding: .68rem 1rem; border-bottom: 1px solid var(--border);
  vertical-align: top; line-height: 1.5; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--surface-2); }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A rank is two characters that must stay together. `width: 3rem` is a
   suggestion a table will overrule when the row is tight, and it did: rank 14
   rendered as "1" above "4". nowrap and a real minimum keep it one number. */
.data-table td.rank, .data-table th.rank {
  width: 3rem; min-width: 2.6rem; white-space: nowrap;
  font-weight: 700; color: var(--text-light); font-variant-numeric: tabular-nums;
}
.data-table .row-highlight { background: var(--gold-light) !important; }
.data-table .row-highlight td { border-color: #f0dcae; }
.table-note { font-size: .8rem; color: var(--text-muted);
  margin: -.8rem 0 1.6rem; }

/* Bar cell for index tables */
.bar-cell { min-width: 130px; width: 26%; }
.bar { height: 9px; border-radius: 5px; background: linear-gradient(90deg, var(--gold), var(--brand)); min-width: 4px; }
.bar-accent { background: linear-gradient(90deg, #35b98f, var(--accent)); }

/* ---------- Menu page ---------- */
.menu-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 2rem; align-items: start; }
.menu-toc { position: sticky; top: calc(var(--nav-height) + 1rem); max-height: calc(100vh - var(--nav-height) - 2rem);
  overflow-y: auto; padding-right: .35rem; }
.menu-toc-title { font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-light); margin-bottom: .5rem; padding-left: .6rem; }
.menu-toc a {
  display: flex; justify-content: space-between; gap: .5rem; padding: .34rem .6rem;
  border-radius: 6px; font-size: .84rem; color: var(--text); line-height: 1.35;
}
.menu-toc a:hover, .menu-toc a.active { background: var(--brand-light); color: var(--brand-dark); }
.menu-toc a .n { color: var(--text-light); font-size: .74rem; flex-shrink: 0; }

.menu-cat { margin-bottom: 2.25rem; scroll-margin-top: calc(var(--nav-height) + 1rem); }
.menu-cat-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap; margin-bottom: .3rem; padding-bottom: .5rem;
  border-bottom: 2px solid var(--brand); }
.menu-cat-head h2 { margin: 0; font-size: 1.28rem; }
.menu-cat-head .n { font-size: .8rem; color: var(--text-muted); }
.menu-cat-desc { font-size: .88rem; color: var(--text-muted); margin: .55rem 0 .8rem; }

.item-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) clamp(240px, 28vw, 320px);
  gap: .75rem 1rem; padding: .85rem 0; border-bottom: 1px solid var(--border);
  align-items: start;
}
.item-row.no-thumb {
  grid-template-columns: minmax(0, 1fr) clamp(240px, 28vw, 320px);
}
.item-row:last-child { border-bottom: 0; }
.item-name { font-weight: 600; color: var(--ink); font-size: .98rem; }
.item-desc { font-size: .85rem; color: var(--text-muted); margin-top: .12rem; }
.item-meta { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.item-meta .badge { font-size: .67rem; }
.item-prices { display: flex; flex-direction: column; gap: .18rem; align-items: stretch;
  text-align: right; width: 100%; min-width: 0; }
@media (max-width: 520px) {
  .item-prices { min-width: 0; }
}
.opt-line { display: grid; grid-template-columns: minmax(0, 1fr) max-content;
  gap: .6rem; align-items: baseline; width: 100%;
  font-size: .85rem; white-space: nowrap; min-width: 0; }
/* Long product names ("Family Meal: Breakfast Deluxe + Sausage McMuffin(R)
   Extra Value Meal + Hotcakes Happy Meal" is 88 characters) must wrap rather
   than push the price out of the card. */
.opt-line > .text-sm, .opt-line > .opt-name {
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
  min-width: 0; flex: 1 1 auto; line-height: 1.4;
  /* The whole column is anchored to its right edge, so a label that wraps
     must rag LEFT, toward the page, not jag against the prices. Without this
     a two-line combo label ("with Drink (Part of Jolly Spaghetti combo)")
     left-aligns inside a right-aligned column and the row reads broken. */
  text-align: right;
}
/* And the price pins to the top line of a wrapped label, so every price in a
   category sits on the same visual rail regardless of how long its label is. */
.opt-line > .price,
.opt-line > .price-stack,
.opt-line > .price-none {
  grid-column: 2; justify-self: end; align-self: baseline; white-space: nowrap;
}
.opt-name { color: var(--text-muted); font-size: .79rem; }
.opt-desc { font-size: .75rem; color: var(--text-light); text-align: right;
  white-space: normal; overflow-wrap: anywhere; }

/* ---------- Stat strip ---------- */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .8rem; margin: 1.25rem 0; }
.stat-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .95rem 1.05rem; box-shadow: var(--shadow-sm);
}
.stat-box .n { font-family: var(--display); font-size: 1.5rem; font-weight: 700;
  color: var(--ink); line-height: 1.1; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  /* Two 140px columns on a 360px screen leave roughly 150px each, which a
     four-figure price in a four-character currency does not fit at 1.5rem. */
  .stat-strip { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .stat-box { padding: .8rem .85rem; }
  .stat-box .n { font-size: 1.25rem; }
  .index-detail-hero .index-hero-copy h1 {
    font-size: clamp(1.7rem, 7.5vw, 1.95rem);
  }
  /* Four comparison facts should scan as one group, not as a 3+1 orphaned
     layout. This selector is deliberately page-specific: other stat strips
     can still size themselves from their own content. */
  .index-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .index-stat-strip .stat-box { padding: .75rem .8rem; }
  .index-stat-strip .stat-box .l { line-height: 1.45; letter-spacing: 0; }
}
.stat-box .n.accent { color: var(--accent-dark); }
.stat-box .n.brand { color: var(--brand-dark); }
.stat-box .n.gold { color: #a86e08; }
.stat-box .l { font-size: .76rem; color: var(--text-muted); margin-top: .2rem; letter-spacing: .02em; }

/* ---------- Magazine article ---------- */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 3rem; align-items: start; }
.article-body { font-size: 1.045rem; line-height: 1.72; color: var(--text); }
.article-body > p { margin-bottom: 1.15rem; }
.article-body p.lead {
  font-family: var(--display); font-size: 1.24rem; line-height: 1.5; color: var(--ink);
  border-left: 4px solid var(--brand); padding-left: 1.1rem; margin-bottom: 1.7rem; font-weight: 400;
}
.article-body h2 {
  font-family: var(--display); font-size: 1.62rem; margin: 2.1rem 0 .8rem;
  padding-top: 1.1rem; border-top: 1px solid var(--border); scroll-margin-top: calc(var(--nav-height) + 1rem);
}
.article-body h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.2rem; }
.article-body h3 { font-size: 1.12rem; margin: 1.5rem 0 .5rem; color: var(--ink); }
.article-body ul, .article-body ol { padding-left: 1.35rem; margin-bottom: 1.15rem; }
.article-body li { margin-bottom: .42rem; }
.article-body strong { color: var(--ink); font-weight: 650; }
.article-body a { text-decoration: underline; text-decoration-color: var(--brand-border);
  text-underline-offset: 2px; }
.article-body a:hover { text-decoration-color: var(--brand); }
.article-body img { border-radius: var(--radius); margin: 1.4rem 0; box-shadow: var(--shadow); }
.article-body .table-scroll { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.article-body table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.article-body table th { background: var(--surface-3); padding: .65rem .9rem; text-align: left;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  border-bottom: 2px solid var(--border-strong); white-space: nowrap; }
.article-body table td { padding: .6rem .9rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.article-body table tr:last-child td { border-bottom: 0; }
.article-body table tbody tr:nth-child(even) td { background: var(--surface-2); }

.article-body .callout {
  background: var(--brand-light); border: 1px solid var(--brand-border);
  border-left: 4px solid var(--brand); border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem; margin: 1.6rem 0;
}
.article-body .callout h3 { margin-top: 0; color: var(--brand-deep); font-size: 1.02rem; }
.article-body .callout :last-child { margin-bottom: 0; }
.article-body .callout-warn { background: var(--gold-light); border-color: #f0dcae; border-left-color: var(--gold); }
.article-body .callout-warn h3 { color: #8a5c04; }
.article-body .callout-note { background: var(--accent-light); border-color: #bfe5d8; border-left-color: var(--accent); }
.article-body .callout-note h3 { color: var(--accent-dark); }

.article-body blockquote.pull-quote {
  font-family: var(--display); font-size: 1.32rem; line-height: 1.42; color: var(--ink);
  border-left: 4px solid var(--gold); padding: .2rem 0 .2rem 1.15rem; margin: 1.8rem 0;
  font-weight: 500;
}
.article-body .stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: .75rem; margin: 1.6rem 0;
}
.article-body .stat {
  background: var(--ink); color: #fff; border-radius: var(--radius-sm);
  padding: .95rem .85rem; text-align: center; display: flex; flex-direction: column; gap: .18rem;
}
.article-body .stat-num { font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--gold); line-height: 1.1; }
.article-body .stat-label { font-size: .74rem; color: rgba(255,255,255,.78); line-height: 1.3; }

.takeaways { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 1.4rem 1.6rem; margin: 1.6rem 0; }
.takeaways h2 { color: var(--gold) !important; border: 0 !important; padding: 0 !important;
  margin: 0 0 .7rem !important; font-size: 1.12rem; font-family: var(--font); letter-spacing: .02em; }
.takeaways ul { margin: 0; padding-left: 1.15rem; }
.takeaways li { margin-bottom: .45rem; color: rgba(255,255,255,.9); font-size: .95rem; }
.takeaways li:last-child { margin-bottom: 0; }

.article-hero-img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); margin: 1.4rem 0 1.6rem; }
.article-hero-img img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.article-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center;
  font-size: .83rem; color: var(--text-muted); margin-top: .8rem; }
.article-meta .dot { opacity: .4; }

/* FAQ */
.faq-section { margin: 2rem 0; }
.faq-item { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); margin-bottom: .55rem; overflow: hidden; }
.faq-item summary { cursor: pointer; padding: .85rem 1.1rem; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: .8rem; font-size: .95rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.25rem; color: var(--brand); flex-shrink: 0; line-height: 1; }
.faq-item[open] summary::after { content: "\2013"; }
.faq-item .faq-a { padding: 0 1.1rem 1rem; color: var(--text-muted); font-size: .93rem; }

.references { font-size: .88rem; color: var(--text-muted); margin: 2rem 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.35rem; }
.references h2 { font-size: 1.05rem; border: 0 !important; padding: 0 !important;
  margin: 0 0 .6rem !important; font-family: var(--font); }
.references ol { margin: 0; padding-left: 1.3rem; }
.references li { margin-bottom: .35rem; }

.author-box { display: flex; gap: 1.1rem; align-items: flex-start; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.35rem; margin: 1.8rem 0; }
.author-box img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.author-box .a-name { font-weight: 700; color: var(--ink); }
.author-box .a-cred { font-size: .79rem; color: var(--brand-dark); font-weight: 600; }
.author-box p { margin: .45rem 0 0; font-size: .87rem; color: var(--text-muted); }

/* Article sidebar rail */
.article-rail { position: sticky; top: calc(var(--nav-height) + 1rem); display: flex;
  flex-direction: column; gap: 1.1rem; max-height: calc(100vh - var(--nav-height) - 2rem); overflow-y: auto; }
.rail-card { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.05rem 1.15rem; box-shadow: var(--shadow-sm); }
.rail-card h3 { font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-light); margin-bottom: .65rem; }
.rail-card ul { list-style: none; }
.rail-card li { margin-bottom: .5rem; line-height: 1.4; }
.rail-card li:last-child { margin-bottom: 0; }
.rail-card li a { font-size: .87rem; color: var(--text); font-weight: 500; }
.rail-card li a:hover { color: var(--brand-dark); }
.toc-nav a { display: block; padding: .22rem .5rem; border-left: 2px solid var(--border);
  font-size: .84rem; color: var(--text-muted); line-height: 1.4; }
.toc-nav a:hover, .toc-nav a.active { border-left-color: var(--brand); color: var(--brand-dark);
  background: var(--brand-light); }
.toc-nav a.toc-h3 { padding-left: 1.2rem; font-size: .79rem; }

/* Article & hub cards */
.article-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
.article-card:hover { transform: translateY(-3px); border-color: var(--brand-border); }
.article-card .img-wrap { aspect-ratio: 16/9; background: var(--surface-3); overflow: hidden; }
.article-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.article-card .card-body { padding: 1rem 1.15rem 1.15rem; flex: 1; display: flex; flex-direction: column; }
.article-card .hub-tag { font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand-dark); }
.article-card h3 { font-size: 1.05rem; margin: .35rem 0 .45rem; line-height: 1.3; font-family: var(--display); }
.article-card h3 a { color: var(--ink); }
.article-card h3 a:hover { color: var(--brand-dark); }
.article-card p { font-size: .85rem; color: var(--text-muted); flex: 1; margin: 0; }
.article-card .read-time { margin-top: .75rem; font-size: .75rem; color: var(--text-light); }

.hub-card {
  position: relative; border-radius: var(--radius); overflow: hidden; background: var(--ink);
  min-height: 200px; display: flex; box-shadow: var(--shadow); transition: transform .15s;
}
.hub-card:hover { transform: translateY(-3px); }
.hub-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.hub-card .hub-label { position: relative; align-self: flex-end; width: 100%;
  padding: 2.2rem 1.2rem 1.1rem; background: linear-gradient(transparent, rgba(0,0,0,.88)); color: #fff; }
.hub-card h3 { color: #fff; margin: 0 0 .25rem; font-family: var(--display); font-size: 1.2rem; }
.hub-card p { color: rgba(255,255,255,.82); font-size: .84rem; margin: 0; }
.hub-card .count { font-size: .74rem; color: var(--gold); font-weight: 600; margin-top: .35rem; display: block; }

/* ---------- Search & filters ---------- */
.filter-bar {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.15rem; margin-bottom: 1.4rem; box-shadow: var(--shadow-sm);
}
.filter-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; }
.filter-field { display: flex; flex-direction: column; gap: .28rem; min-width: 150px; flex: 1; }
.filter-field label { font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-light); }
.form-control {
  width: 100%; padding: .55rem .8rem; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); font-size: .9rem; font-family: inherit;
  background: var(--surface); color: var(--text);
}
.form-control:focus { outline: none; border-color: var(--brand-border);
  box-shadow: 0 0 0 3px rgba(226,87,31,.13); }
select.form-control { cursor: pointer; }
.filter-note { font-size: .84rem; color: var(--text-muted); margin-top: .7rem; }
.index-search-field { flex: 2 1 320px; }
.filter-search-status { align-self: flex-end; padding-bottom: .55rem;
  color: var(--text-muted); font-size: .84rem; white-space: nowrap; }
.filter-search-status .linkish { margin-left: .45rem; }

.result-row {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .6rem 1.2rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .8rem 1rem; margin-bottom: .5rem; align-items: center;
}
.result-row:hover { border-color: var(--brand-border); }
.result-name { font-weight: 600; color: var(--ink); }
.result-path { font-size: .79rem; color: var(--text-muted); margin-top: .12rem;
  display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.result-path a { color: var(--text-muted); }
.result-path a:hover { color: var(--brand-dark); }
.result-path .sep { opacity: .4; }

.pagination { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: center; margin-top: 1.6rem; }
.pagination a, .pagination span {
  padding: .4rem .75rem; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); font-size: .86rem; color: var(--text); font-weight: 500;
}
.pagination a:hover { border-color: var(--brand-border); background: var(--brand-light); color: var(--brand-dark); }
.pagination .current { background: var(--brand); border-color: var(--brand); color: #fff; }
.pagination .gap { border: 0; background: none; color: var(--text-light); }

/* ---------- Compare ---------- */
.compare-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center;
  margin-bottom: 1.2rem; }
.compare-side { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.15rem; text-align: center; }
.compare-side .flag { font-size: 2rem; line-height: 1; }
.compare-side .cname { font-weight: 700; margin-top: .3rem; }
.compare-side .cmeta { font-size: .8rem; color: var(--text-muted); }
.compare-vs { font-family: var(--display); font-size: 1.35rem; color: var(--text-light); font-weight: 700; }
.diff-up { color: var(--brand-dark); font-weight: 600; }
.diff-down { color: var(--accent-dark); font-weight: 600; }
.diff-flat { color: var(--text-light); }

/* ---------- Notices ---------- */
.notice {
  background: var(--gold-light); border: 1px solid #f0dcae; border-radius: var(--radius-sm);
  padding: .8rem 1.1rem; font-size: .87rem; color: #7a5304; margin: 1.1rem 0;
}
.notice a { color: #7a5304; text-decoration: underline; }
.notice-info { background: var(--accent-light); border-color: #bfe5d8; color: var(--accent-dark); }
.notice-info a { color: var(--accent-dark); }
.flash { background: var(--accent-light); border: 1px solid #bfe5d8; color: var(--accent-dark);
  border-radius: var(--radius-sm); padding: .7rem 1.1rem; margin: .8rem 0; font-size: .9rem; }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.empty-state h2 { color: var(--ink); margin-bottom: .5rem; }

/* ---------- Prose (country/brand descriptions from markdown) ---------- */
.prose { font-size: .98rem; line-height: 1.72; color: var(--text); }
.prose h2 { font-family: var(--display); font-size: 1.35rem; margin: 1.7rem 0 .6rem; }
.prose h3 { font-size: 1.06rem; margin: 1.25rem 0 .4rem; }
.prose p { margin-bottom: 1rem; }
.prose ul, .prose ol { padding-left: 1.35rem; margin-bottom: 1rem; }
.prose li { margin-bottom: .35rem; }
.prose strong { color: var(--ink); font-weight: 650; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 1.6rem 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 1.2rem 0; }
.prose th, .prose td { padding: .55rem .8rem; border-bottom: 1px solid var(--border); text-align: left; }
.prose a { text-decoration: underline; text-decoration-color: var(--brand-border); text-underline-offset: 2px; }
.collapse-body { position: relative; max-height: 22rem; overflow: hidden; }
.collapse-body.open { max-height: none; }
.collapse-body:not(.open)::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 6rem;
  background: linear-gradient(transparent, var(--surface-2));
}
.collapse-toggle { margin-top: .7rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #b3a79e; margin-top: 3.5rem; padding: 2.75rem 0 1.4rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2.2rem; }
.footer-brand { font-family: var(--display); font-size: 1.35rem; font-weight: 700; color: #fff; margin-bottom: .6rem; }
.footer-brand .tld { color: var(--brand); }
.footer-desc { font-size: .85rem; line-height: 1.6; color: #b3a79e; }
.footer-heading { font-weight: 700; color: #f0e9e3; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .09em; margin-bottom: .85rem; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: .42rem; }
.footer-links a { color: #b3a79e; font-size: .85rem; }
.footer-links a:hover { color: var(--brand); }
.footer-bottom { border-top: 1px solid #35292a; padding-top: 1.2rem; display: flex;
  align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .79rem; color: #8a7d74; }
.footer-disclaimer { font-size: .78rem; color: #8a7d74; margin-top: 1rem; line-height: 1.55; }

/* ---------- Admin ---------- */
.admin-wrap { max-width: 1100px; margin: 2rem auto 3rem; padding: 0 1.25rem; }
/* Pages that are mostly side-by-side tables opt out of the reading column. */
.admin-wrap.admin-wrap-wide { max-width: none; padding: 0 2rem; }
.admin-nav { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.admin-nav a { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .45rem .9rem; font-weight: 600; font-size: .86rem; color: var(--text); }
.admin-nav a:hover { border-color: var(--brand-border); color: var(--brand-dark); }
.admin-form label { display: block; font-weight: 600; font-size: .84rem; margin: .9rem 0 .25rem; }
.admin-form input, .admin-form textarea, .admin-form select {
  width: 100%; padding: .55rem .75rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-family: inherit; font-size: .9rem; background: var(--surface); }
.admin-form textarea { min-height: 320px; font-family: var(--mono); font-size: .8rem; }
.admin-price { width: 96px !important; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Utilities ---------- */
.text-muted { color: var(--text-muted); }
.text-sm { font-size: .86rem; }
.text-xs { font-size: .76rem; }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.nowrap { white-space: nowrap; }
.hide { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-mobile-panel { display: block; }
  .nav-mobile-scrim.open { display: block; }
  .nav-search { display: none; }
}
@media (max-width: 980px) {
  /* minmax(0, 1fr), never a bare 1fr. A bare 1fr floors the track at the
     min-content width of its widest child, so a single wide table inside
     .table-scroll dragged the entire article column past the screen edge. */
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .article-rail { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; }
  .article-rail .rail-card { flex: 1 1 260px; }
  .menu-layout { grid-template-columns: minmax(0, 1fr); }
  .menu-toc { position: static; max-height: none; display: flex; flex-wrap: wrap; gap: .3rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .8rem; margin-bottom: 1.2rem; }
  .menu-toc-title { width: 100%; padding-left: 0; }
  .menu-toc a { border: 1px solid var(--border); border-radius: 999px; padding: .25rem .7rem; font-size: .79rem; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .hero { padding: 2.25rem 0 2.5rem; }
  .hero-stats { gap: 1.1rem; }
  .hero-stat .n { font-size: 1.45rem; }
  .section { padding: 2rem 0; }
  .compare-head { grid-template-columns: 1fr; }
  .compare-vs { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  .item-row { grid-template-columns: 1fr; }
  .item-prices { align-items: flex-start; text-align: left; }
  .opt-line { justify-content: flex-start; }
  .opt-desc { text-align: left; }
  .article-body { font-size: 1rem; }
  .article-body p.lead { font-size: 1.12rem; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}
@media print {
  .site-nav, .site-footer, .filter-bar, .nav-mobile-panel { display: none !important; }
  body { background: #fff; }
}


/* ---------- Custom flat icons (components/icons.html) ---------- */
/* Emoji rendered differently on every platform, so the site had no single
   visual language. These are drawn in the site palette at one weight. */
.ico { display: inline-block; vertical-align: middle; flex-shrink: 0; }
/* Rounded via CSS rather than an SVG clipPath: a fixed clipPath id collided
   across repeated flags and bound to the copy inside the hidden nav panel,
   which clipped every visible flag to nothing. */
.ico-flag { border-radius: 3px; clip-path: inset(0 round 3px); }
.ico-dish { border-radius: 8px; }
.tile-top .ico-flag, .tile-top .ico-dish { margin-right: .1rem; }
.data-table .ico-flag { margin-right: .35rem; }
.nav-mega a .ico-flag, .nav-mega a .ico-dish { margin-right: .1rem; }
.mob-sub-link .ico-flag, .mob-sub-link .ico-dish { margin-right: .45rem; }
.chip .ico-flag, .chip .ico-dish { margin-right: .1rem; }
h1 .ico-dish, h1 .ico-flag { vertical-align: -.14em; margin-right: .3rem; }
.compare-side .ico-flag { margin: 0 auto .25rem; display: block; }
.nav-logo svg { display: block; }

/* ---------- No shadow on hover, anywhere ---------- */
/* Requested explicitly: hover should move and tint, never bloom. */
a:hover, button:hover, .tile:hover, .card:hover, .chip:hover,
.article-card:hover, .hub-card:hover, .result-row:hover,
.item-card:hover, .stat-box:hover, .btn:hover {
  box-shadow: none !important;
}


/* ---------- Menu item thumbnails with hover enlarge ---------- */
/* Exact product photographs come from the provenance catalogue. Remaining
   rows share a labelled food-concept fallback from item_concepts.py. */
.item-thumb {
  position: relative; width: 72px; height: 56px; margin: 0; flex-shrink: 0;
  border-radius: var(--radius-sm); background: var(--surface-3);
  border: 1px solid var(--border); overflow: visible;
}
.item-thumb > img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: calc(var(--radius-sm) - 1px); display: block;
  transition: opacity .15s;
}
/* The enlarged version is a separate, larger image so it stays sharp. It is
   inert until hover/focus so it never intercepts a click on the row. */
.item-zoom {
  position: absolute; top: 50%; left: calc(100% + .55rem); transform: translateY(-50%) scale(.92);
  width: 260px; z-index: 60; opacity: 0; visibility: hidden; pointer-events: auto;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 5px;
}
.item-zoom img { width: 100%; height: 195px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.item-zoom .zoom-cap {
  display: block; font-size: .7rem; color: var(--text-light); text-align: center;
  padding: .32rem .25rem .1rem; line-height: 1.3;
}
.item-zoom .zoom-cap a { color: var(--brand-dark); text-decoration: underline; }
.item-thumb:hover .item-zoom,
.item-thumb:focus-visible .item-zoom,
.item-row:focus-within .item-zoom { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); }
.item-thumb:hover > img { opacity: .82; }
.item-thumb:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Near the right edge, flip the panel to the other side of the thumbnail. */
.item-zoom.flip { left: auto; right: calc(100% + .55rem); }

.item-main { min-width: 0; }
.img-note {
  font-size: .78rem; color: var(--text-muted); margin: .5rem 0 0;
  padding: .5rem .75rem; background: var(--surface-3); border-radius: var(--radius-sm);
}

/* Category summary strip on menu pages */
.cat-summary {
  display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .78rem;
  color: var(--text-muted); margin: .25rem 0 .85rem;
}
.cat-summary b { color: var(--ink); font-weight: 650; }

@media (max-width: 720px) {
  .item-row { grid-template-columns: 56px minmax(0, 1fr); }
  .item-thumb { width: 56px; height: 46px; }
  .item-prices { grid-column: 2; width: 100%; min-width: 0; max-width: none;
    align-items: stretch; text-align: left; }
  .opt-line > .text-sm, .opt-line > .opt-name { text-align: left; }
  /* A hover panel is meaningless on touch; tapping the thumb opens the item
     image inline instead via .item-thumb.open. */
  .item-zoom { left: 0; right: auto; top: calc(100% + .4rem); transform: none; width: min(260px, 78vw); }
  .item-thumb.open .item-zoom { opacity: 1; visibility: visible; transform: none; }
  .item-thumb:hover .item-zoom { opacity: 0; visibility: hidden; }
}


/* ---------- Menu page tools: in-page filter and sort ---------- */
/* A 225-item board is the largest menu in this database. Reading it top to
   bottom is not how anyone actually uses a menu, so give them a way in. */
.menu-tools {
  position: sticky; top: calc(var(--nav-height) - 1px); z-index: 40;
  background: var(--surface-2); padding: .7rem 0 .6rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.menu-tools-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.menu-filter { position: relative; flex: 1 1 240px; max-width: 340px; }
.menu-filter svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
  color: var(--text-light); pointer-events: none; }
.menu-filter input {
  width: 100%; padding: .5rem .8rem .5rem 2.1rem; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); font-size: .9rem; font-family: inherit;
  background: var(--surface); color: var(--text);
}
.menu-filter input:focus { outline: none; border-color: var(--brand-border);
  box-shadow: 0 0 0 3px rgba(226,87,31,.13); }
.menu-tools-toggles { display: flex; gap: .35rem; flex-wrap: wrap; }
.menu-tools-toggles .chip { cursor: pointer; font-family: inherit; }
.menu-tools-toggles .chip[aria-pressed="true"] {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.menu-tools-count { font-size: .82rem; color: var(--text-muted); margin: .5rem 0 0; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--brand-dark);
  cursor: pointer; text-decoration: underline; }
.menu-cat.is-hidden, .item-row.is-hidden { display: none; }

/* The category heading stays put while its items scroll past. */
.menu-cat-head {
  position: sticky; top: calc(var(--nav-height) + 3.4rem); z-index: 30;
  background: var(--surface-2); padding-top: .5rem;
}
@media (max-width: 720px) {
  .menu-tools { position: static; }
  .menu-cat-head { position: static; }
}


/* ---------- Nothing may overflow its container ---------- */
/* Menu item names, category names and index product names are all
   uncontrolled-length strings from source menus. */
.item-name, .item-desc, .result-name, .tile-title, .tile-sub,
.menu-cat-head h2, .card-header, .data-table td, .data-table th {
  overflow-wrap: anywhere; word-break: break-word; min-width: 0;
}
.data-table td.num, .data-table th.num, .data-table td.nowrap { word-break: normal; }
.card, .card-body, .tile, .stat-box, .item-row, .result-row { min-width: 0; }
.menu-cat-head { flex-wrap: wrap; }
.stat-box .n { overflow-wrap: anywhere; }


/* ---------- Placeholder thumbnails and nutrition ---------- */
/* A missing picture must look missing. Muted and flat, so it never reads as a
   photograph of the item. */
.item-thumb.is-placeholder { background: var(--surface-3); }
.item-thumb.is-placeholder > img { opacity: .55; }
.item-thumb.is-placeholder:hover > img { opacity: .7; }
.item-zoom .zoom-cap { font-style: normal; }

.item-nutrition { margin-top: .45rem; }
.item-nutrition summary {
  cursor: pointer; font-size: .78rem; color: var(--text-muted);
  list-style: none; display: inline-flex; align-items: center; gap: .3rem;
}
.item-nutrition summary::-webkit-details-marker { display: none; }
.item-nutrition summary::after { content: "▾"; font-size: .7rem; }
.item-nutrition[open] summary::after { content: "▴"; }
.item-nutrition summary:hover { color: var(--brand-dark); }
.nutrition-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: .25rem .8rem; margin: .45rem 0 0; padding: .55rem .7rem;
  background: var(--surface-3); border-radius: var(--radius-sm); font-size: .78rem;
}
.nutrition-grid > div { display: flex; justify-content: space-between; gap: .5rem; }
.nutrition-grid .nl { color: var(--text-muted); }
.nutrition-grid .nv { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.nutrition-src { font-size: .72rem; color: var(--text-light); margin: .35rem 0 0; }

/* A price-index product spans countries, but a nutrition label belongs to one
   market and one standard recipe. The panel makes that scope as prominent as
   the numbers and keeps the quick read separate from the full table. */
.index-nutrition { margin-top: 2.25rem; }
.index-nutrition-head { margin-bottom: .85rem; }
.nutrition-profile {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.nutrition-at-a-glance {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) repeat(3, minmax(120px, 1fr));
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.nutrition-at-a-glance > div {
  min-width: 0;
  padding: 1rem 1.15rem;
  border-right: 1px solid var(--border);
}
.nutrition-at-a-glance > div:last-child { border-right: 0; }
.nutrition-primary { display: flex; align-items: baseline; gap: .35rem; }
.nutrition-primary-label {
  display: block; flex-basis: 100%;
  color: var(--text-muted); font-size: .75rem; font-weight: 650;
  letter-spacing: .05em; text-transform: uppercase;
}
.nutrition-primary { flex-wrap: wrap; }
.nutrition-primary strong {
  font-family: var(--display); font-size: 2.15rem; line-height: 1;
  color: var(--brand-dark); font-variant-numeric: tabular-nums;
}
.nutrition-primary > span:last-child { color: var(--text-muted); font-size: .9rem; }
.nutrition-highlight { display: flex; flex-direction: column; justify-content: center; }
.nutrition-highlight > span { color: var(--text-muted); font-size: .78rem; }
.nutrition-highlight strong {
  margin-top: .12rem; font-size: 1.25rem; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.nutrition-highlight small { margin-top: .1rem; color: var(--text-light); }
.nutrition-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 0;
  padding: .45rem 1.15rem;
}
.nutrition-facts-grid > div {
  display: flex; justify-content: space-between; gap: .8rem;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--border);
  font-size: .86rem;
}
.nutrition-facts-grid > div span { color: var(--text-muted); }
.nutrition-facts-grid > div strong {
  color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nutrition-reading-note {
  padding: .9rem 1.3rem .45rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.nutrition-reading-note p { margin: 0 0 .55rem; font-size: .84rem; line-height: 1.55; }
.nutrition-source-line {
  margin: 0; padding: .7rem 1.3rem 1rem;
  color: var(--text-light); font-size: .75rem; overflow-wrap: anywhere;
}
.source-badge {
  display: inline-block; margin-right: .35rem; padding: .15rem .42rem;
  border-radius: 999px; background: var(--accent-light);
  color: var(--accent-dark); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; font-size: .66rem;
}
@media (max-width: 760px) {
  .nutrition-at-a-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nutrition-at-a-glance > div:nth-child(2) { border-right: 0; }
  .nutrition-at-a-glance > div:nth-child(-n + 2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 430px) {
  .nutrition-at-a-glance { grid-template-columns: 1fr; }
  .nutrition-at-a-glance > div { border-right: 0; border-bottom: 1px solid var(--border); }
  .nutrition-at-a-glance > div:last-child { border-bottom: 0; }
  .nutrition-facts-grid { grid-template-columns: 1fr; }
}


/* ---------- Rollout-sourced pages ---------- */
.fact-list { list-style: none; padding: 0; margin: 1rem 0; }
.fact-list li { padding: .3rem 0; border-bottom: 1px solid var(--border); font-size: .92rem; }
.fact-list li:last-child { border-bottom: 0; }
.source-list { font-size: .84rem; }
.source-list li { margin-bottom: .3rem; overflow-wrap: anywhere; }


/* ---------- Width ---------- */
/* Content blocks fill their container. No reading-measure caps: they left
   large empty gutters inside cards and section heads while the container was
   several hundred pixels wider. The .container (1200px) is the only width
   bound the site applies to body content. */
.prose, .prose > *,
.article-body, .article-body > *,
.section-head p, .page-hero .sub, .hero .sub, .hero h1,
.notice, .img-note, .table-note {
  max-width: none;
}
.section-head > div { flex: 1 1 auto; min-width: 0; }
.card-body > .prose { width: 100%; }


/* The read-more control is hidden until main.js confirms the text overflows.
   Hiding it after the fact would shift the page; starting hidden means the
   only movement is the button appearing where there was already nothing. */
.collapse-toggle[hidden] { display: none; }


/* The item name as the menu itself prints it, sat under the English one.
   Quiet enough that the English reads as the label, present enough to be
   used - Someone ordering in Shanghai points at this line, not the English.
   Uncontrolled-length source strings, so it wraps like everything else. */
.item-original {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin-top: .1rem;
  overflow-wrap: anywhere;
}
.item-name + .item-original { margin-bottom: .15rem; }

/* --------------------------------------------------------------------------
   Mobile related-links dock
   --------------------------------------------------------------------------
   A dot-grid button that appears once the reader has scrolled past the top,
   opening a sheet of pages related to what they are reading. Phones only:
   the desktop mega nav already does this job and a floating button over a
   wide layout is just clutter.

   It sits above the safe-area inset so it clears the home indicator on a
   notched phone, and it is hidden entirely from print.
   -------------------------------------------------------------------------- */
.dock-fab {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 0;
  background: var(--brand);
  color: #fff;
  display: none;                 /* revealed by JS once scrolled */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(45, 26, 18, .28);
  /* Appears from below rather than fading in, so it reads as arriving
     rather than as something that was always there and went unnoticed. */
  transform: translateY(12px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease, background-color .15s ease;
}
.dock-fab.is-visible { display: flex; transform: translateY(0); opacity: 1; }
.dock-fab:active { background: var(--brand-dark); transform: translateY(1px); }
.dock-fab:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.dock-backdrop {
  position: fixed;
  inset: 0;
  z-index: 91;
  background: rgba(45, 26, 18, .48);
  opacity: 0;
  transition: opacity .2s ease;
}
.dock-backdrop.is-open { opacity: 1; }

.dock-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 92;
  max-height: 78vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-top: 3px solid var(--brand);
  padding: 0 0 calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform .24s cubic-bezier(.22, .8, .3, 1);
}
.dock-panel.is-open { transform: translateY(0); }

.dock-head {
  position: sticky;
  top: 0;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem .7rem;
  border-bottom: 1px solid var(--border);
}
.dock-head h2 {
  font-family: var(--display);
  font-size: 1.12rem;
  margin: 0;
}
.dock-close {
  background: none;
  border: 0;
  color: var(--text-muted);
  padding: .35rem;
  cursor: pointer;
  border-radius: 8px;
}
.dock-close:active { background: var(--surface-2); }

.dock-body { padding: .9rem 1.1rem 0; }
.dock-group { margin-bottom: 1.15rem; }
.dock-group h3 {
  font-size: .74rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 .5rem;
  font-weight: 600;
}
.dock-links { display: flex; flex-direction: column; gap: .1rem; }
.dock-links a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .62rem .1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  font-size: .95rem;
  /* Source names are uncontrolled length; nothing overflows its box. */
  overflow-wrap: anywhere;
}
.dock-links a:last-child { border-bottom: 0; }
.dock-links a:active { color: var(--brand); }
.dock-meta { margin-left: auto; font-size: .78rem; color: var(--text-muted); flex: none; }

/* The generic browse block reads better as chips than as another list. */
.dock-links-wrap { flex-direction: row; flex-wrap: wrap; gap: .45rem; }
.dock-links-wrap a {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .4rem .8rem;
  font-size: .88rem;
  background: var(--surface-2);
}
.dock-links-wrap a:last-child { border: 1px solid var(--border); }

.dock-all {
  display: inline-block;
  margin-top: .55rem;
  font-size: .88rem;
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}

/* Desktop: the same button, but the panel comes in from the right as a drawer
   rather than up from the bottom. A bottom sheet on a wide screen puts the
   links along the edge furthest from the pointer and covers the width of the
   page to show one narrow column; a right-hand drawer sits where the cursor
   already is, leaves the article visible beside it, and has the height to
   show every group at once without scrolling.

   The mega nav still exists, but it is at the top of a page that can be two
   thousand pixels tall. Deep in a menu table this is the closer way out. */
@media (min-width: 860px) {
  .dock-fab {
    right: 24px;
    bottom: 24px;
    width: 56px;
    height: 56px;
  }
  .dock-fab:hover { background: var(--brand-dark); transform: translateY(-2px); }

  .dock-panel {
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    width: min(420px, 92vw);
    max-height: none;
    border-radius: 0;
    border-top: 0;
    border-left: 3px solid var(--brand);
    padding-bottom: 1.5rem;
    transform: translateX(100%);
  }
  .dock-panel.is-open { transform: translateX(0); }

  .dock-head { padding: 1.15rem 1.3rem .8rem; }
  .dock-head h2 { font-size: 1.25rem; }
  .dock-body { padding: 1rem 1.3rem 0; }

  /* Room for two columns of chips, and a hover state that tints and moves
     without blooming - Same as everything else on the site. */
  .dock-links a:hover { color: var(--brand); background: var(--surface-2); }
  .dock-links-wrap a:hover { border-color: var(--brand); background: var(--surface); }
  .dock-close:hover { background: var(--surface-2); color: var(--text); }
}
@media print {
  .dock-fab, .dock-backdrop, .dock-panel { display: none !important; }
}
/* Someone who has asked for less motion gets the panel without the slide. */
@media (prefers-reduced-motion: reduce) {
  .dock-fab, .dock-panel, .dock-backdrop { transition: none; }
}

/* An action inside the dock reads the same as a link there. */
.dock-action {
  display: flex; align-items: center; gap: .5rem;
  width: 100%; padding: .62rem .1rem;
  background: none; border: 0; border-bottom: 1px solid var(--border);
  color: var(--text); font: inherit; font-size: .95rem;
  text-align: left; cursor: pointer;
}
.dock-action:last-child { border-bottom: 0; }
.dock-action:active { color: var(--brand); }
@media (min-width: 860px) {
  .dock-action:hover { color: var(--brand); background: var(--surface-2); }
}

/* --------------------------------------------------------------------------
   Data tables on a phone
   --------------------------------------------------------------------------
   `.data-table { width: 100% }` inside a scrolling wrapper does not scroll: it
   obeys the 100% and crushes every column to fit, which is how a cell reading
   "Menu ->" ended up rendering one letter per line down a 20px column, and how
   "United Arab Emirates" became four lines of one word.

   Two layers fix it. A min-width makes the table genuinely wider than a phone,
   so the wrapper's overflow-x has something to scroll - That alone makes every
   table on the site usable and needs no markup change. Then at phone width the
   rows restack into labelled cards, which reads far better than sideways
   scrolling for anything with more than three columns. The labels come from
   the table's own <th> cells, copied onto each <td> by main.js, so no template
   had to be touched.
   -------------------------------------------------------------------------- */
.table-wrap { position: relative; -webkit-overflow-scrolling: touch; }
.data-table { min-width: 34rem; }

@media (max-width: 700px) {
  /* Stacked rows do not scroll sideways, so the wrapper stops pretending to. */
  .table-wrap:has(.data-table.is-stacked) { overflow-x: visible; border: 0; background: none; box-shadow: none; }
  .data-table.is-stacked { min-width: 0; width: 100%; font-size: .95rem; }
  .data-table.is-stacked thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .data-table.is-stacked tbody tr {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .2rem .9rem;
    margin-bottom: .6rem;
  }
  .data-table.is-stacked tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    width: auto;
    padding: .5rem 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .data-table.is-stacked tbody td:last-child { border-bottom: 0; }
  /* The label sits on the left, the value keeps the right edge, so a column of
     cards still scans vertically the way the table's columns did. */
  .data-table.is-stacked tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 45%;
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted);
  }
  /* A cell whose column has no heading - the "Menu ->" link column - is an
     action, not a value. It gets the full width and no label. */
  .data-table.is-stacked tbody td[data-label=""]::before { content: none; }
  .data-table.is-stacked tbody td[data-label=""] { justify-content: flex-start; padding-top: .6rem; }
  /* The first cell is the row's identity - The item, the product, the market.
     As a flex pair it was squeezed against its own description into a third
     of the card and long names broke mid-word ("Margh/erita"). As a block it
     is the card's title, full width, and the label would only repeat what the
     text already is. */
  .data-table.is-stacked tbody td:first-child { display: block; }
  .data-table.is-stacked tbody td:first-child::before { content: none; }
  .data-table.is-stacked tbody td:first-child > a > strong { font-size: 1.02rem; }
  .data-table.is-stacked tbody td.num { justify-content: space-between; }
  /* The first cell is the row's subject, so it leads like a card title. */
  .data-table.is-stacked tbody tr td:first-child { font-weight: 700; font-size: 1rem; }
  .data-table.is-stacked tbody tr td:first-child::before { content: none; }
}

/* Browsers without :has() still get the horizontal scroll, which is correct
   rather than broken. */
@supports not selector(:has(*)) {
  @media (max-width: 700px) {
    .data-table.is-stacked { min-width: 34rem; }
    .data-table.is-stacked thead { position: static; width: auto; height: auto; clip: auto; }
    .data-table.is-stacked tbody tr { display: table-row; }
    .data-table.is-stacked tbody td { display: table-cell; }
    .data-table.is-stacked tbody td::before { content: none; }
  }
}

/* --------------------------------------------------------------------------
   Touch-device corrections
   --------------------------------------------------------------------------
   iOS Safari zooms the entire page in when a text field smaller than 16px
   receives focus, and it does not zoom back out afterwards. The reader is left
   on a page they now have to pan sideways to read, and the usual reaction is
   to leave. The fields are set in rem for the desktop rhythm, so the floor is
   applied only where a coarse pointer says it matters.
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  /* Every field, not a list of types - An <input> with no type attribute
     defaults to text and would slip through a type-selector list. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea {
    font-size: 16px;
  }

  /* --------------------------------------------------------------------
     Touch targets
     --------------------------------------------------------------------
     44px is the floor for something a finger has to hit. Controls sized for
     a mouse land around 34-36px here, and the ones that suffer most are the
     rows of them: category jump chips on 255 menu pages, filter chips on the
     price index, the contents list on 48 articles, and pagination. A row of
     34px targets 6px apart is a coin toss for every tap.

     Padding rather than height, so the label stays centred and nothing that
     was already large enough changes shape. -------------------------------- */
  .btn, .btn-sm, .chip, .page-link, .menu-toc a, .article-toc a,
  .dock-close, .nav-hamburger, .collapse-toggle, .see-all,
  .pagination a, .pagination span {
    min-height: 44px;
  }
  .btn, .btn-sm, .chip, .page-link, .dock-close,
  .pagination a, .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .menu-toc a, .article-toc a { display: flex; align-items: center; }
  /* Rows of chips need room between them as well as size, or two neighbours
     share one fingertip. */
  .chip-row, .menu-toc, .article-toc, .pagination, .menu-tools-toggles {
    gap: .5rem;
  }
}

/* An in-page jump has to clear everything pinned above it. On a menu page that
   is the site nav AND the filter bar underneath it, so a heading landed behind
   the filter and the reader saw the wrong category. */
@media (max-width: 860px) {
  .menu-cat { scroll-margin-top: calc(var(--nav-height) + 4.5rem); }
  .article-body h2, .article-body h3 { scroll-margin-top: calc(var(--nav-height) + 1rem); }
  [id] { scroll-margin-top: calc(var(--nav-height) + 1rem); }
}

/* The floating dock sits over the bottom-right corner. Give the last thing on
   a page room to clear it, so a final link is never sitting under the button. */
@media (max-width: 859px) {
  .site-footer { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* --------------------------------------------------------------------------
   Mobile audit corrections
   --------------------------------------------------------------------------
   Findings confirmed by measuring real pages at 360-390px. Each one is a
   defect a reader hits, not a preference.
   -------------------------------------------------------------------------- */

/* Search results kept two side-by-side columns at every width, so on a phone
   the name column was squeezed to a sliver beside the metadata. */
@media (max-width: 620px) {
  .result-row { grid-template-columns: minmax(0, 1fr); gap: .45rem; }
  .result-row > * { min-width: 0; }
}

/* The home hero search put its submit button on top of the right end of the
   input, so a long query typed on a phone ran underneath the button and the
   last words could not be read. Below 620px the button sits under the field
   at full width instead. */
@media (max-width: 620px) {
  .hero-search { position: static; }
  .hero-search input { padding-right: 1rem; }
  .hero-search button {
    position: static; transform: none; width: 100%;
    margin-top: .55rem; justify-content: center;
  }
  .hero-search svg { position: absolute; }
}

@media (hover: none) and (pointer: coarse) {
  /* The menu jump list and the article contents list are the two densest rows
     of links on the site. The pill and block variants both landed near 26px. */
  .menu-toc a, .toc-nav a, .footer-links a, .footer-bottom a, .dock-links-wrap a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .dock-links-wrap a { justify-content: center; }
  .footer-links { gap: .1rem; }
  .footer-bottom { gap: .35rem 1rem; }
}

/* The dock drawer starts at the top of the viewport, which on a phone in
   landscape put its heading behind the opaque sticky nav. Start it below. */
@media (min-width: 860px) and (max-height: 520px) {
  .dock-panel { top: var(--nav-height); }
}

/* The floating dock exists at every width, so the footer needs clearance at
   every width - The 859px cut-off left the desktop drawer button sitting on
   top of the last row of footer links. */
@media (min-width: 860px) {
  .site-footer { padding-bottom: 5rem; }
}

/* Some .data-table elements have no <thead> at all - The hub lists on /guides/
   are a table used for layout, one link per row. Those are not tabular data,
   there is nothing to scroll sideways to, and forcing them to 34rem made the
   reader drag six of them across the screen for nothing. JS marks them, and
   :has() covers the case where JS never runs. */
.data-table.is-listing, .data-table:not(:has(thead th)) { min-width: 0; }

/* Reader-reported prices and the form that collects them.
   A price someone sent us is real evidence but it is one branch on one day, so
   it is shown in the data colour rather than the price colour and carries its
   own line saying where it came from. It must never read as a published
   figure. */
.price-reader { color: var(--gold); }
.reader-note { color: var(--text-light); font-style: italic; }
.submit-link { display: block; font-size: .78rem; color: var(--brand); margin-top: .2rem; }
.report-link { display: block; font-size: .74rem; color: var(--text-light); margin-top: .22rem; }
.report-link:hover { color: var(--brand); }

.submit-form { max-width: 640px; }
.submit-form .form-row { margin-bottom: 1.1rem; }
.submit-form label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.submit-form input[type="text"], .submit-form input[type="email"],
.submit-form input[type="date"], .submit-form input[type="url"],
.submit-form select, .submit-form textarea {
  width: 100%; padding: .6rem .75rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-family: inherit; font-size: .95rem;
  background: var(--surface);
}
.submit-form .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 1rem; }
.form-hint { font-size: .8rem; color: var(--text-muted); margin: .3rem 0 0; }
.form-static { margin: 0; }
/* The honeypot: off-screen rather than display:none, because some bots skip
   hidden fields but not positioned ones. Never focusable, never announced. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.inline-form { display: inline-flex; gap: .4rem; align-items: center; margin-right: .5rem; }
.admin-dl { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .8rem; font-size: .88rem; margin: .5rem 0; }
.admin-dl dt { font-weight: 600; color: var(--text-muted); }
.admin-dl dd { margin: 0; }
.admin-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chip-on { background: var(--brand); color: #fff; border-color: var(--brand); }

/* Brand tile figures.
   Three figures side by side, each repeating "AED" or "K", wrapped mid-number
   in a 280px tile - "AED 21.66" became "AED 1" over "21.66". The currency is
   named once in a heading and the figures are bare, which is what any
   financial table does and what makes them fit. The dollar column is not a
   nicety: a reader who has never handled kyat learns nothing from "K13,287".

   This table is deliberately excluded from the responsive stacking in
   main.js by carrying no .data-table class - It is already the right shape. */
.tile-figures {
  width: 100%;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.tile-figures thead th {
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-light);
  text-align: right;
  padding: 0 0 .2rem;
  border: 0;
  white-space: nowrap;
}
.tile-figures thead th:first-child { text-align: left; }
.tile-figures tbody th {
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-muted);
  text-align: left;
  padding: .16rem 0;
  border: 0;
  white-space: nowrap;
}
.tile-figures tbody td {
  font-size: .92rem;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  padding: .16rem 0 .16rem .7rem;
  border: 0;
  white-space: nowrap;
}
.tile-figures td.in-usd {
  font-weight: 500;
  font-size: .82rem;
  color: var(--text-muted);
}

/* The Big Mac Index block on /price-index/. One comparison here is famous in
   its own right; it should not be a row in a table of three hundred. */
.featured-index { border-color: var(--brand-border); background: var(--brand-light); }
.featured-index h2 { font-family: var(--display); }
.featured-index p { margin: 0 0 .6rem; }

/* Two featured comparisons side by side on wide screens, stacked on a phone. */
.featured-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1rem; }

/* Named currency indexes.
   These pages answer one question, so the answer goes at the top and the
   valuation column carries a bar: the shape of the finding should be readable
   without going through every row. Basil for a currency that buys more than
   the dish implies, paprika for one that buys less, matching the price and
   brand colours used everywhere else. */
.index-lead {
  margin-top: .9rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: #fff;
  max-width: none;
}
.ppp-over { color: var(--accent-dark); font-weight: 700; white-space: nowrap; }
.ppp-under { color: var(--brand-dark); font-weight: 700; white-space: nowrap; }
.data-table td.ppp-bar-cell { width: 22%; min-width: 90px; padding-left: .8rem; }
.ppp-bar { display: block; height: 8px; border-radius: 999px; min-width: 3px; }
.ppp-bar-over { background: linear-gradient(90deg, var(--accent), var(--accent-dark)); }
.ppp-bar-under { background: linear-gradient(90deg, var(--brand), var(--brand-deep)); }
@media (max-width: 700px) {
  /* The bar is decoration; on a phone the number does the work. */
  .data-table.is-stacked td.ppp-bar-cell { display: none; }
}

/* An index page carries two tables that answer different questions. Give the
   second one a heading with air above it so the join is obvious. */
/* A page can carry several tables answering different questions. Without a
   real break between them they read as one long run of rows, so each section
   after the first gets air and a rule above its heading.

   Applied both to a .section-head that IS .index-section and to one that
   contains it, because the two templates nest it differently. */
.index-section,
.section-head.index-section { margin-top: 2.6rem; }
.section-head.index-section { padding-top: 1.5rem; border-top: 2px solid var(--border); }
.index-section .section-head { margin-bottom: 1rem; }
.index-section .section-head h2 {
  font-family: var(--display);
  padding-top: 1.4rem;
  border-top: 2px solid var(--border);
}
.section-head.index-section h2 { font-family: var(--display); }

/* The header is the lid: it fills the top of the box and keeps its corners. */
.table-wrap .data-table thead tr { background: var(--surface-3); }
.table-wrap .data-table thead th:first-child { border-top-left-radius: calc(var(--radius) - 1px); }
.table-wrap .data-table thead th:last-child { border-top-right-radius: calc(var(--radius) - 1px); }
.table-wrap .data-table thead th {
  border-bottom: 1px solid var(--border-strong);
  padding-top: .85rem;
  padding-bottom: .6rem;
  color: var(--text-muted);
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.table-wrap .data-table tbody tr:last-child td { border-bottom: 0; }

/* The two sides of a comparison carry the same facts in the same order, so
   they can be read across rather than hunted through. */
/* The summary at the head of a comparison: two markets as columns, facts as
   rows. The row label carries the question and the two columns answer it side
   by side, which is the only arrangement that lets the eye compare without
   remembering a number while it hunts for its pair. */
.compare-summary .data-table th:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
.compare-summary .data-table thead th {
  font-size: .8rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  font-weight: 700;
}
.compare-summary .data-table thead th .ico-flag { vertical-align: -3px; margin-right: .25rem; }
.compare-summary .data-table td {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  white-space: nowrap;
}
.compare-summary .in-usd {
  display: block;
  font-weight: 500;
  font-size: .78rem;
  color: var(--text-muted);
}
/* Two columns of figures need equal width or the eye reads a false difference. */
.compare-summary .data-table thead th:nth-child(2),
.compare-summary .data-table thead th:nth-child(3) { width: 34%; }

/* Three short columns fit a phone without scrolling, so this one opts out of
   the min-width that makes wide data tables scrollable. */
.compare-summary .data-table { min-width: 0; }
@media (max-width: 560px) {
  .compare-summary .data-table th:first-child { white-space: normal; font-size: .8rem; }
  .compare-summary .data-table td { font-size: .92rem; padding-left: .5rem; padding-right: .5rem; }
  .compare-summary .data-table thead th { font-size: .74rem; }
}

/* Row rules must cross the whole table. A tbody <th> is still a cell in the
   row, and without the same bottom border the divider under the label column
   sits at a different width from the one under the figures, which reads as a
   rendering fault. */
.data-table tbody th {
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.data-table tbody tr:last-child th { border-bottom: 0; }

/* --------------------------------------------------------------------------
   Accounts: sign-in, dashboard, the register-to-report modal
   -------------------------------------------------------------------------- */
.auth-card {
  max-width: 430px; margin: 2.5rem auto; padding: 2rem 2.2rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); text-align: center;
}
.auth-card h1 { font-family: var(--display); font-size: 1.5rem; margin-bottom: .6rem; }
.btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  margin-top: 1.1rem; padding: .7rem 1.4rem; width: 100%;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink); font-weight: 600; font-size: .95rem;
  min-height: 44px;
}
.btn-google:active { background: var(--surface-2); }

.nav-signin {
  font-weight: 600; font-size: .9rem; color: var(--brand-dark);
  padding: .45rem .8rem; border: 1px solid var(--brand-border);
  border-radius: 999px; white-space: nowrap;
}
.nav-account img { border-radius: 50%; display: block; }
.nav-account-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand); color: #fff; font-weight: 700; font-size: .85rem;
}
.avatar { border-radius: 50%; vertical-align: -10px; margin-right: .4rem; }
.save-form { display: inline; }

/* --------------------------------------------------------------------------
   Calculators and saved results
   -------------------------------------------------------------------------- */
.tool-featured {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
}
.tool-card {
  display: flex; flex-direction: column; min-height: 220px; padding: 1.45rem;
  color: var(--ink); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.tool-card:hover { transform: translateY(-2px); border-color: var(--brand-border); box-shadow: var(--shadow-md); }
.tool-card-primary { grid-column: 1 / -1; min-height: 250px; color: #fff; background: linear-gradient(135deg, var(--brand-deep), var(--brand)); border: 0; }
.tool-card h2 { margin: .4rem 0 .65rem; font-family: var(--display); font-size: 1.45rem; }
.tool-card-primary h2 { color: #fff; }
.tool-card p { max-width: 660px; color: var(--text-muted); line-height: 1.58; }
.tool-card-primary p { color: rgba(255,255,255,.85); }
.tool-kicker { color: var(--brand-dark); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.tool-card-primary .tool-kicker { color: #ffd9c7; }
.tool-cta { margin-top: auto; padding-top: 1.2rem; color: var(--brand-dark); font-weight: 700; }
.tool-card-primary .tool-cta { color: #fff; }
.tool-form {
  padding: 1.25rem; margin-bottom: 1.5rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.tool-form-grid { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); gap: .9rem; margin-bottom: 1rem; align-items: end; }
.tool-form-grid .tool-field-wide { grid-column: span 2; }
.tool-form-markets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tool-result {
  padding: 1.5rem; margin: 1.5rem 0; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.tool-result h2 { margin: .22rem 0; font-family: var(--display); font-size: clamp(1.55rem, 3vw, 2.25rem); }
.tool-result-head { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start; margin-bottom: 1.2rem; }
.tool-result-head p, .tool-result-context span { color: var(--text-muted); }
.tool-result-context { display: flex; flex-direction: column; text-align: right; }
.metric-grid, .nutrition-total-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: .75rem; margin: 1rem 0; }
.metric, .nutrition-total { padding: .9rem 1rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.metric span, .nutrition-total span { display: block; color: var(--text-muted); font-size: .78rem; }
.metric strong, .nutrition-total strong { display: block; margin-top: .25rem; color: var(--accent-dark); font-size: 1.2rem; }
.metric small, .nutrition-total small { color: var(--text-muted); font-weight: 500; }
.tool-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.tool-actions form { display: inline; }
.tool-action-status { color: var(--accent-dark); font-size: .82rem; font-weight: 600; }
.tool-explainer { margin: 2.2rem 0; padding: 1.2rem 1.3rem; background: var(--surface-2); border-left: 4px solid var(--brand); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.tool-explainer h2 { margin-bottom: .45rem; font-family: var(--display); font-size: 1.25rem; }
.tool-explainer p + p { margin-top: .7rem; }
.tool-related { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 2px solid var(--border); }
.tool-guide { margin: 3rem 0 0; }
.tool-guide > header { margin-bottom: 1.35rem; }
.tool-guide > header h2 {
  margin: .35rem 0 .55rem; font-family: var(--display);
  font-size: clamp(1.45rem, 3vw, 2rem);
}
.tool-guide > header p { color: var(--text-muted); font-size: .96rem; }
.tool-steps {
  list-style: none; counter-reset: tool-step; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem;
  margin: 1.2rem 0 1.35rem;
}
.tool-steps li {
  counter-increment: tool-step; position: relative; min-width: 0;
  padding: 1rem 1rem 1rem 3.3rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.tool-steps li::before {
  content: counter(tool-step); position: absolute; top: 1rem; left: .9rem;
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  color: #fff; background: var(--brand); border-radius: 50%;
  font-size: .78rem; font-weight: 800;
}
.tool-steps strong, .tool-steps span { display: block; }
.tool-steps strong { color: var(--ink); font-size: .9rem; }
.tool-steps span { margin-top: .22rem; color: var(--text-muted); font-size: .78rem; line-height: 1.48; }
.tool-formula {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  margin: 1.25rem 0; padding: 1rem 1.15rem; overflow-x: auto;
  color: #fff; background: var(--ink); border-radius: var(--radius);
}
.tool-formula > span { min-width: 105px; text-align: center; }
.tool-formula small, .tool-formula strong { display: block; }
.tool-formula small { color: rgba(255,255,255,.68); font-size: .68rem; }
.tool-formula strong { margin-top: .12rem; color: #fff; font-size: .94rem; white-space: nowrap; }
.tool-formula > b { color: #f7b28f; font-family: var(--display); font-size: 1.25rem; }
.tool-guide-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem; margin: 1.25rem 0 1.8rem;
}
.tool-guide-card {
  padding: 1.15rem 1.25rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.tool-guide-card h3 { margin-bottom: .55rem; font-family: var(--display); }
.tool-guide-card ul { margin: 0; padding-left: 1.15rem; color: var(--text-muted); }
.tool-guide-card li { margin: .28rem 0; font-size: .85rem; line-height: 1.52; }
.tool-guide-card li::marker { color: var(--brand); }
.tool-copy { margin: 1.8rem 0; }
.tool-copy h2 { margin: 1.5rem 0 .55rem; font-family: var(--display); font-size: 1.35rem; }
.tool-copy p { color: var(--text-muted); font-size: .91rem; }
.tool-definition {
  margin-top: 1rem; padding: .9rem 1rem; color: var(--text-muted);
  background: var(--gold-light); border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .86rem;
}
.tool-definition strong { color: var(--ink); }
.tool-faq { margin: 2rem 0 0; }
.tool-faq h2 { margin-bottom: .65rem; font-family: var(--display); font-size: 1.35rem; }
.tool-faq details { border-top: 1px solid var(--border); }
.tool-faq details:last-child { border-bottom: 1px solid var(--border); }
.tool-faq summary {
  padding: .85rem 1.8rem .85rem 0; color: var(--ink); cursor: pointer;
  font-size: .9rem; font-weight: 700;
}
.tool-faq details p { padding: 0 1.5rem .9rem 0; color: var(--text-muted); font-size: .86rem; }
.basket-picker { margin: 1rem 0; padding: 0; border: 0; }
.basket-picker legend { margin-bottom: .7rem; font-weight: 750; }
.basket-picker legend span { margin-left: .4rem; color: var(--text-muted); font-size: .78rem; font-weight: 500; }
.basket-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 370px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.basket-option { display: flex; gap: .65rem; align-items: flex-start; padding: .72rem .8rem; border-bottom: 1px solid var(--border); cursor: pointer; font-size: .88rem; }
.basket-option:nth-child(odd) { border-right: 1px solid var(--border); }
.basket-option:hover { background: var(--surface-2); }
.basket-option input { flex: 0 0 auto; margin-top: .18rem; accent-color: var(--brand); }
.basket-option small { display: block; margin-top: .18rem; color: var(--text-muted); }
.nutrition-picker-help { margin: -.15rem 0 1rem; color: var(--text-muted); font-size: .88rem; }
.nutrition-item-search { display: grid; grid-template-columns: minmax(180px, 320px) auto; gap: .45rem 1rem; align-items: end; margin: 0 0 .75rem; }
.nutrition-item-search label { grid-column: 1; font-weight: 700; font-size: .82rem; }
.nutrition-item-search input { grid-column: 1; }
.nutrition-item-search span { grid-column: 2; grid-row: 2; color: var(--text-muted); font-size: .82rem; padding-bottom: .7rem; }
.basket-total-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1rem 0; }
.basket-total { padding: 1.1rem; background: var(--surface-2); border-radius: var(--radius-sm); text-align: center; }
.basket-total span, .basket-total small { display: block; color: var(--text-muted); }
.basket-total strong { display: block; margin: .35rem 0; color: var(--accent-dark); font-size: 1.45rem; }
.result-callout { padding: .8rem 1rem; margin: .9rem 0; border-radius: var(--radius-sm); background: var(--brand-light); }
.result-callout.is-lower { background: #e9f6f1; }
.basket-bars { display: grid; gap: .55rem; margin: 1rem 0 1.3rem; }
.basket-bars div { display: grid; grid-template-columns: minmax(90px, 150px) 1fr 75px; gap: .65rem; align-items: center; font-size: .82rem; }
.basket-bars i { display: block; min-width: 3px; height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-dark)); }
.basket-bars div:first-child i { background: linear-gradient(90deg, var(--accent), var(--accent-dark)); }
.basket-bars b { text-align: right; }
.nutrition-total strong { font-size: 1.35rem; }
.nutrition-table th span { color: var(--text-light); font-size: .66rem; }
.nutrition-sources { margin-top: 1.1rem; padding: 1rem; background: var(--surface-2); border-radius: var(--radius-sm); }
.nutrition-sources h3 { margin-bottom: .45rem; font-size: 1rem; }
.nutrition-sources ul { margin: 0; padding-left: 1.15rem; font-size: .82rem; }
.compare-chart { margin: 2.2rem 0; padding: 1.2rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.diverging-chart { display: grid; gap: .55rem; }
.chart-axis { display: grid; grid-template-columns: 1fr 1fr; margin-left: min(38%, 250px); padding: 0 3.8rem .3rem 0; color: var(--text-light); font-size: .7rem; }
.chart-axis span:last-child { text-align: right; }
.chart-row { display: grid; grid-template-columns: minmax(130px, 30%) 1fr 48px; gap: .6rem; align-items: center; }
.chart-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.chart-track { position: relative; height: 13px; background: linear-gradient(90deg, var(--surface-2) 49.7%, var(--border-strong) 49.7%, var(--border-strong) 50.3%, var(--surface-2) 50.3%); border-radius: 999px; overflow: hidden; }
.chart-track i { position: absolute; top: 0; height: 100%; }
.chart-track i.positive { left: 50%; background: var(--brand); }
.chart-track i.negative { right: 50%; background: var(--accent); }
.chart-row strong { text-align: right; font-size: .78rem; }

@media (max-width: 700px) {
  .tool-featured, .tool-form-grid, .tool-form-markets { grid-template-columns: 1fr; }
  .tool-card-primary, .tool-form-grid .tool-field-wide { grid-column: auto; }
  .tool-result-head { flex-direction: column; }
  .tool-result-context { text-align: left; }
  .basket-options { grid-template-columns: 1fr; }
  .basket-option:nth-child(odd) { border-right: 0; }
  .nutrition-item-search { grid-template-columns: 1fr; }
  .nutrition-item-search span { grid-column: 1; grid-row: auto; padding-bottom: 0; }
  .chart-row { grid-template-columns: minmax(90px, 34%) 1fr 43px; }
  .chart-axis { margin-left: 34%; padding-right: 3.2rem; }
  .nutrition-table { min-width: 900px; }
  .tool-guide { margin-top: 2.25rem; }
  .tool-steps, .tool-guide-grid { grid-template-columns: 1fr; }
  .tool-formula {
    display: grid; grid-template-columns: minmax(0, 1fr);
    justify-content: stretch; gap: .3rem; overflow: visible;
  }
  .tool-formula > span { min-width: 0; }
  .tool-formula > b { line-height: 1; text-align: center; }
}

/* The modal is small on purpose: one sentence of why, one button of how. */
.auth-modal-backdrop {
  position: fixed; inset: 0; z-index: 95; background: rgba(45, 26, 18, .5);
}
.auth-modal {
  position: fixed; z-index: 96; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 400px); padding: 1.6rem 1.7rem;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.auth-modal h2 { font-family: var(--display); font-size: 1.25rem; margin-bottom: .5rem; }
.auth-modal p { font-size: .92rem; }
.auth-modal-close { position: absolute; top: .6rem; right: .6rem; }

/* --------------------------------------------------------------------------
   The shelf - App Store style editorial cards
   --------------------------------------------------------------------------
   One idea per card, large type and momentum snap scrolling. The shelf stays
   inside the normal content column: the page never becomes the scroll area,
   and a visible scrollbar makes the remaining cards discoverable. */
.shelf {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(320px, 78vw);
  gap: 1rem;
  width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: .15rem;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  padding: .4rem .15rem .8rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.shelf:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.shelf::-webkit-scrollbar { height: 8px; }
.shelf::-webkit-scrollbar-track { background: transparent; }
.shelf::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
.shelf::-webkit-scrollbar-thumb:hover { background: var(--text-light); }
.shelf-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .35rem;
  min-height: 200px;
  padding: 1.4rem 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  color: var(--text);
  transition: transform .18s ease, background-color .18s ease,
              border-color .18s ease;
}
/* Move and tint on hover, per the house rule - No bloom. */
.shelf-card:hover { transform: translateY(-3px); color: var(--text); }
.shelf-card:active { transform: translateY(-1px); }
.shelf-kicker {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase;
}
.shelf-title {
  font-family: var(--display); font-size: 1.45rem; font-weight: 700;
  line-height: 1.15; letter-spacing: -.01em; color: var(--ink);
}
.shelf-sub { font-size: .9rem; color: var(--text-muted); line-height: 1.4; }
/* Each card keeps an identity through a quiet wash of a colour the site
   already owns, not a poster gradient the rest of the page cannot answer. */
.shelf-brand  { background: var(--brand-light); border-color: var(--brand-border); }
.shelf-brand .shelf-kicker { color: var(--brand-dark); }
.shelf-brand:hover { background: #ffe9dc; border-color: #f7bda0; }
.shelf-gold   { background: var(--gold-light); border-color: #f0dcae; }
.shelf-gold .shelf-kicker { color: #a86e08; }
.shelf-gold:hover { background: #fdefcf; border-color: #e6c98a; }
.shelf-accent { background: var(--accent-light); border-color: #c4e4d8; }
.shelf-accent .shelf-kicker { color: var(--accent-dark); }
.shelf-accent:hover { background: #dcf1e9; border-color: #a4d4c3; }
.shelf-deep   { background: #f5eee7; border-color: #e4d6c6; }
.shelf-deep .shelf-kicker { color: #4a3527; }
.shelf-deep:hover { background: #efe5da; border-color: #d5c2ad; }
@media (prefers-reduced-motion: reduce) {
  .shelf { scroll-behavior: auto; }
  .shelf-card, .shelf-card:hover { transition: none; transform: none; }
}

/* Collection cards on /collections/ - the same language at rest. */
.collection-card { border-radius: 16px; }
/* A collection on the landing page is a panel, not a tile: the reader sees
   the top of the actual table before deciding to open it, and every row is a
   descriptive link to a deep page rather than one link to a list of links. */
.collection-panel { margin-top: 2.2rem; }
.collection-panel .section-head h2 { margin-bottom: .2rem; }
/* This heading is a link with no card around it to imply so - Article cards
   get their affordance from the card itself, this one has nothing. A muted
   rule under the text says "clickable" without turning four display headings
   paprika and competing with the real accents on the page. */
.collection-panel .section-head h2 a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: color .14s, text-decoration-color .14s;
}
.collection-panel .section-head h2 a:hover {
  color: var(--brand-dark);
  text-decoration-color: var(--brand);
}
/* The two named indexes are the flagships of this page, so they carry a heavy
   paprika edge rather than the hairline every other tile uses. Border width is
   set on both states so hover retints without the box resizing. */
.named-index-tile { border: 3px solid var(--brand); }
.named-index-tile:hover { border-color: var(--brand-deep); }
.named-index-tile .collection-kicker { color: var(--brand-dark); }
.collection-kicker {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: .3rem;
}
.collection-peek {
  display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem;
}
.collection-peek span {
  font-size: .74rem; padding: .18rem .55rem; border-radius: 999px;
  background: var(--surface-2); color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Command palette - Spotlight's manners
   -------------------------------------------------------------------------- */
.palette-backdrop {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(45, 26, 18, .35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.palette {
  position: fixed; z-index: 111; left: 50%; top: 14vh;
  transform: translateX(-50%);
  width: min(92vw, 560px);
  border-radius: 16px;
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 24px 70px rgba(45, 26, 18, .3);
  overflow: hidden;
}
@supports not (backdrop-filter: blur(1px)) {
  .palette { background: var(--surface); }
}
.palette-field {
  display: flex; align-items: center; gap: .7rem;
  padding: .95rem 1.1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
.palette-field input {
  flex: 1; border: 0; background: none; outline: none;
  font: inherit; font-size: 1.05rem; color: var(--text);
}
.palette kbd {
  font-family: var(--font); font-size: .68rem; color: var(--text-muted);
  border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 5px; padding: .1rem .4rem; background: var(--surface-2);
}
.palette-results { list-style: none; margin: 0; padding: .4rem; max-height: 46vh; overflow-y: auto; }
.palette-results li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .6rem .8rem; border-radius: 10px; cursor: pointer;
}
.palette-results li.is-active { background: var(--brand-light); }
.palette-results li.is-active .pal-title { color: var(--brand-dark); }
.pal-title { font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.pal-kind { flex: none; font-size: .72rem; color: var(--text-light); text-transform: uppercase; letter-spacing: .06em; }
.palette-hint {
  display: flex; gap: 1.1rem; padding: .55rem 1.1rem .7rem;
  border-top: 1px solid var(--border);
  font-size: .72rem; color: var(--text-muted);
}
@media (max-width: 640px) { .palette-hint { display: none; } .palette { top: 8vh; } }

/* The palette's visible handle. A keyboard shortcut nobody can discover is a
   feature that does not exist, so the search field wears its hint. */
.nav-kbd {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font); font-size: .66rem; font-weight: 600;
  color: var(--text-muted); background: var(--surface);
  border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 5px; padding: .12rem .38rem; cursor: pointer;
}
.nav-kbd:hover { color: var(--brand-dark); border-color: var(--brand-border); }
@media (max-width: 1080px) { .nav-kbd { display: none; } }

/* Comments. Quiet by design: the data is the page's voice, the discussion
   sits under it in a lighter register. */
.comments .comment {
  padding: .85rem 0; border-bottom: 1px solid var(--border);
}
.comment-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.comment-head img { border-radius: 50%; }
.comment-body {
  margin-top: .35rem; font-size: .95rem; line-height: 1.55;
  white-space: pre-line; overflow-wrap: anywhere;
}
.comment-hide { margin-left: auto; }
.comment-hide button {
  background: none; border: 0; cursor: pointer;
  color: var(--text-light); text-decoration: underline; font-family: inherit;
}
.comment-form { margin-top: 1.1rem; }
.comment-form textarea {
  width: 100%; padding: .7rem .8rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font: inherit; font-size: .95rem;
  background: var(--surface); margin-bottom: .6rem; resize: vertical;
}
.comment-signin {
  margin-top: 1rem; padding: .8rem 1rem; border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm); font-size: .92rem; color: var(--text-muted);
}

/* USD equivalents under local prices. The stack keeps the local figure on the
   row's baseline rail and hangs the conversion under it, right-anchored, so
   the dollar line never pushes a price out of column. */
.price-stack { display: inline-flex; flex-direction: column; align-items: flex-end;
  flex: 0 0 auto; }
.price-stack .price-usd { line-height: 1.3; white-space: nowrap; }
.opt-line > .price-stack { align-self: baseline; }
.stat-box .price-usd { margin-top: -.15rem; margin-bottom: .1rem; }
.usd-hidden .price-usd { display: none; }
.comment-pending { opacity: .75; border-left: 3px dashed var(--border, #ddd); padding-left: .8rem; }

/* Standalone callout. The article-body callout is scoped to prose; a tool page
   needs the same object outside an article. */
.callout {
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 4px solid var(--brand); border-radius: var(--radius);
  padding: 1rem 1.15rem; margin-bottom: 1.5rem;
}
.callout p { margin-bottom: .6rem; }
.callout :last-child { margin-bottom: 0; }
.callout-warn { background: var(--gold-light); border-color: #f0dcae;
  border-left-color: var(--gold); }

/* Filter chips: a checkbox that reads as a toggle, checked state tinted. */
.filter-set { margin: 0 0 1rem; padding: 0; border: 0; }
.filter-set legend { margin-bottom: .55rem; font-weight: 750; font-size: .9rem; }
.filter-set { display: block; }
.filter-chip { display: inline-flex; align-items: center; gap: .4rem;
  margin: 0 .4rem .4rem 0; padding: .3rem .75rem; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: .84rem; cursor: pointer; transition: background .14s, border-color .14s; }
.filter-chip:hover { border-color: var(--brand-border); background: var(--brand-light); }
.filter-chip input { margin: 0; }
.filter-chip:has(input:checked) { background: var(--brand-light);
  border-color: var(--brand); color: var(--brand-dark); font-weight: 600; }

/* ---------- Dish page groups ---------- */
.dish-group { margin-bottom: 1.6rem; }
.dish-group-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: .5rem; flex-wrap: wrap; }
.dish-group-head h3 { font-size: 1.08rem; font-family: var(--display); }
.dish-group-head h3 a { color: var(--ink); }
.dish-group-head h3 a:hover { color: var(--brand-dark); }

/* ---------- Hero tightening ---------- */
/* The dot separators assume the meta stays on one line; the moment it wraps
   on a phone a dot orphans at a line end and reads as a typo. The gap does
   the separating on every hero, so the dots only ever applied polish to the
   one-line case - Drop them everywhere rather than per template. */
.page-hero-meta .sep { display: none; }
.hero-cta { align-items: center; }
.hero-stamp { font-size: .8rem; color: var(--text-muted); }
@media (max-width: 520px) {
  /* The logo belongs beside the title, not alone above it. At phone width it
     shrinks instead of wrapping, and the title column absorbs the rest. */
  .hero-brand-row { flex-wrap: nowrap; align-items: flex-start; gap: .8rem; }
  .hero-brand-row > div:last-child { min-width: 0; }
  .brand-logo-lg { width: 54px; height: 54px; flex: 0 0 54px; padding: 6px; }
}

/* ---------- Save pill ---------- */
/* The save control sits beside badge pills in every hero, and a squared
   outline button next to fully-round badges read as two different systems.
   Unsaved is the loud state - Solid paprika, it is the ask - And Saved calms
   to a tinted pill, because a done action should stop shouting. */
/* Sized to the badge it sits beside: same font, same line-height, same
   vertical padding, no border - The .btn's 2px border alone made it 4px
   taller than the pill next to it. */
.save-pill { border-radius: 999px; border: 0; padding: .15rem .8rem;
  font-size: .72rem; line-height: 1.65; font-weight: 600; }
.save-pill.btn-outline { background: var(--brand); color: #fff; }
.save-pill.btn-outline:hover { background: var(--brand-dark); color: #fff; }
.save-pill.btn-primary { background: var(--brand-light); color: var(--brand-dark); }
.save-pill.btn-primary:hover { background: #ffe9dc; color: var(--brand-deep); }