/* Moringa Cafe and Mart
   Palette comes from the printed menu: marigold, forest, teal, coral.
   Every color is OKLCH; neutrals are tinted toward the forest hue. */

:root {
  color-scheme: light;
  --font: 'Rubik', 'Rubik Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --paper: oklch(0.975 0.022 92);
  --paper-2: oklch(0.945 0.045 90);
  --ink: oklch(0.26 0.06 160);
  --ink-2: oklch(0.43 0.05 158);
  --line: oklch(0.26 0.06 160 / 0.17);
  --line-strong: oklch(0.26 0.06 160 / 0.42);

  --marigold: oklch(0.82 0.165 82);
  --forest: oklch(0.36 0.085 158);
  --teal: oklch(0.52 0.10 205);
  --coral: oklch(0.70 0.155 36);
  --leaf: oklch(0.58 0.13 150);
  --leaf-2: oklch(0.70 0.12 138);
  --price: oklch(0.50 0.165 32);

  --hero-bg: var(--marigold);
  --hero-ink: var(--ink);
  --hero-accent: var(--forest);

  --w-food: var(--marigold);  --on-food: oklch(0.26 0.06 160);
  --w-cafe: var(--teal);      --on-cafe: oklch(0.985 0.02 92);
  --w-fresh: var(--coral);    --on-fresh: oklch(0.24 0.06 160);
  --w-bar: var(--forest);     --on-bar: oklch(0.975 0.03 92);

  --rev-bg: var(--marigold);
  --rev-ink: oklch(0.26 0.06 160);
  --visit-bg: var(--forest);
  --visit-ink: oklch(0.975 0.03 92);

  --rib-open: oklch(0.44 0.11 152);   --on-rib-open: oklch(0.975 0.03 92);
  --rib-closed: var(--coral);        --on-rib-closed: oklch(0.24 0.06 160);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(1rem, 4.5vw, 2.75rem);
  --maxw: 76rem;
  --rail-h: 3.5rem;
  --pic: clamp(4.75rem, 21vw, 6.75rem);
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --paper: oklch(0.235 0.045 165);
  --paper-2: oklch(0.29 0.05 165);
  --ink: oklch(0.955 0.03 92);
  --ink-2: oklch(0.81 0.045 100);
  --line: oklch(0.955 0.03 92 / 0.15);
  --line-strong: oklch(0.955 0.03 92 / 0.4);
  --price: oklch(0.84 0.15 84);
  --leaf: oklch(0.66 0.13 150);

  --hero-bg: oklch(0.3 0.07 160);
  --hero-ink: oklch(0.96 0.03 92);
  --hero-accent: var(--marigold);

  --w-cafe: oklch(0.45 0.09 205);
  --w-bar: oklch(0.4 0.09 158);
  --rev-bg: oklch(0.33 0.075 200);
  --rev-ink: oklch(0.97 0.03 92);
  --visit-bg: oklch(0.19 0.04 165);
  --rib-open: oklch(0.72 0.13 140);
  --on-rib-open: oklch(0.22 0.05 160);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* Scripts with joined or tall glyphs need neutral tracking and more air. */
:lang(ar), :lang(hi), :lang(zh) { letter-spacing: 0 !important; }
:lang(hi) { --font: 'Noto Sans Devanagari', 'Rubik', 'Rubik Fallback', system-ui, sans-serif; }
:lang(zh) { --font: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Rubik', 'Rubik Fallback', system-ui, sans-serif; }
:lang(ar) body, :lang(hi) body { line-height: 1.75; }
:lang(zh) body { line-height: 1.7; }

.skip { position: absolute; inset-block-start: -4rem; inset-inline-start: 1rem; z-index: 100; padding: 0.7rem 1.1rem; background: var(--ink); color: var(--paper); border-radius: 999px; text-decoration: none; font-weight: 600; }
.skip:focus { inset-block-start: 0.75rem; }

/* ---------- Buttons & small controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 3rem; padding: 0.7rem 1.4rem; border-radius: 999px;
  border: 2px solid var(--ink); background: transparent; color: var(--ink);
  font-weight: 600; font-size: 1rem; text-decoration: none; line-height: 1.2;
  transition: transform 0.2s var(--ease), background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
.btn { position: relative; }
.btn::after { content: ''; position: absolute; inset: -3px -3px -6px; }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 0.6rem 1.2rem -0.7rem var(--ink); }
.btn:active { transform: translateY(0) scale(0.98); }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.9rem; border-radius: 999px;
  border: 2px solid currentColor; background: transparent; font-weight: 500; font-size: 0.9375rem;
  transition: background-color 0.2s, color 0.2s, transform 0.2s var(--ease);
}
.iconbtn svg { width: 1.3rem; height: 1.3rem; flex: none; }
.iconbtn:hover { background: var(--ink); color: var(--paper); }
.iconbtn:active { transform: scale(0.96); }

/* ---------- Top bar & hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--hero-bg); color: var(--hero-ink); border-radius: 0 0 clamp(2rem, 7vw, 5rem) clamp(2rem, 7vw, 5rem); isolation: isolate; }
.top { position: relative; z-index: 5; display: flex; align-items: center; gap: 0.75rem; padding-block: 1rem; }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; font-weight: 700; letter-spacing: -0.01em; }
.ico { display: inline-flex; }
.ico svg, [data-icon] svg { width: 1.25rem; height: 1.25rem; }
/* Slots that scripts fill in keep their final size from the first paint, so nothing shifts. */
[data-icon] { display: inline-flex; flex: none; width: 1.25rem; height: 1.25rem; }
.iconbtn [data-icon] { width: 1.3rem; height: 1.3rem; }
.toggle [data-icon] { width: 1.1rem; height: 1.1rem; }
.search > [data-icon] { position: absolute; inset-inline-start: 1.05rem; inset-block-start: 50%; width: 1.3rem; height: 1.3rem; transform: translateY(-50%); }
.search .clear [data-icon] { width: 1.2rem; height: 1.2rem; }
.totop [data-icon] { width: 1.3rem; height: 1.3rem; }
.brand .logo { display: block; width: 3.5rem; height: 3.5rem; flex: none; }
#theme-btn { width: 2.75rem; padding: 0; }
#lang-btn { min-width: 8.25rem; justify-content: center; }
#lang-current { white-space: nowrap; }
/* Button label is generated until the script writes the same text, so the label never swaps. */
#lang-current:empty::before { content: 'English'; }
:root:lang(zh) #lang-current:empty::before { content: '中文'; }
:root:lang(hi) #lang-current:empty::before { content: 'हिन्दी'; }
:root:lang(es) #lang-current:empty::before { content: 'Español'; }
:root:lang(ar) #lang-current:empty::before { content: 'العربية'; }
:root:lang(fr) #lang-current:empty::before { content: 'Français'; }
:root:lang(pt) #lang-current:empty::before { content: 'Português'; }
:root:lang(ru) #lang-current:empty::before { content: 'Русский'; }
:root:lang(uk) #lang-current:empty::before { content: 'Українська'; }
:root:lang(id) #lang-current:empty::before { content: 'Indonesia'; }
@media (max-width: 34rem) {
  /* Narrow screens: a two-letter code keeps the top bar from ever wrapping or resizing. */
  #lang-btn { min-width: 5rem; padding-inline: 0.8rem; }
  #lang-current { font-size: 0; }
  #lang-current::before { content: none !important; }
  #lang-current::after { font-size: 0.9375rem; content: 'EN'; }
  :root:lang(zh) #lang-current::after { content: 'ZH'; }
  :root:lang(hi) #lang-current::after { content: 'HI'; }
  :root:lang(es) #lang-current::after { content: 'ES'; }
  :root:lang(ar) #lang-current::after { content: 'AR'; }
  :root:lang(fr) #lang-current::after { content: 'FR'; }
  :root:lang(pt) #lang-current::after { content: 'PT'; }
  :root:lang(ru) #lang-current::after { content: 'RU'; }
  :root:lang(uk) #lang-current::after { content: 'UK'; }
  :root:lang(id) #lang-current::after { content: 'ID'; }
}
.i18n-pending .hero__grid, .i18n-pending [data-i18n], .i18n-pending #status-text, .i18n-pending #hours-val, .i18n-pending .legend, .i18n-pending .quotes { visibility: hidden; }
.brand span { line-height: 1.1; }
.top__spacer { flex: 1; }
.langwrap { position: relative; }
.langpanel {
  position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 0.6rem); z-index: 40;
  width: min(19rem, calc(100vw - 2rem)); padding: 0.6rem; border-radius: 1.25rem;
  background: var(--paper); color: var(--ink); box-shadow: 0 1.5rem 3rem -1rem oklch(0.2 0.05 160 / 0.55), 0 0 0 2px var(--ink);
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem;
}
.langpanel[hidden] { display: none; }
.langpanel button {
  min-height: 2.9rem; padding: 0.4rem 0.8rem; border: 0; border-radius: 0.8rem; background: transparent;
  text-align: start; font-weight: 500; transition: background-color 0.15s;
}
.langpanel button:hover { background: var(--paper-2); }
.langpanel button[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
.langpanel button:last-child:nth-child(odd) { grid-column: 1 / -1; }

.hero__grid { position: relative; z-index: 2; display: grid; gap: clamp(1.5rem, 5vw, 3rem); padding-block: clamp(1rem, 4vw, 2rem) clamp(3.5rem, 9vw, 6.5rem); align-items: center; }
@media (min-width: 60rem) { .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } .hero h1 .wm { font-size: clamp(4.4rem, 11.4vw, 9.4rem); } }

/* Open / closed ribbon. Colour carries the state; the dot repeats it as filled (open) or hollow (closed). */
.status {
  --notch: 0.7rem;
  display: inline-flex; align-items: center; gap: 0.6rem; max-width: 100%;
  min-height: 2.6rem; padding: 0.45rem calc(var(--notch) + 0.9rem);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--notch)) 50%, 100% 100%, 0 100%, var(--notch) 50%);
  background: var(--rib-open); color: var(--on-rib-open);
  font-size: 0.9375rem; font-weight: 500; text-wrap: balance;
  transition: background-color 0.3s, color 0.3s;
}
.status[data-open='false'] { background: var(--rib-closed); color: var(--on-rib-closed); }
.status .dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: currentColor; flex: none; }
.status[data-open='false'] .dot { background: none; box-shadow: inset 0 0 0 2px currentColor; }
@media (max-width: 26rem) { .status { --notch: 0.6rem; gap: 0.5rem; font-size: 0.875rem; } }

.hero h1 { margin-block: clamp(1rem, 3vw, 1.6rem) 0; display: flex; flex-direction: column; line-height: 0.86; }
.hero h1 .wm { font-size: clamp(4.4rem, 20vw, 11rem); font-weight: 900; letter-spacing: -0.045em; margin-inline-start: -0.04em; }
.hero h1 .wm-sub { display: inline-flex; align-self: flex-start; margin-block-start: 0.6rem; padding: 0.3em 0.8em 0.35em; border-radius: 999px; background: var(--hero-accent); color: var(--paper); font-size: clamp(1.15rem, 3.6vw, 1.9rem); font-weight: 700; letter-spacing: -0.01em; }
:root[data-theme='dark'] .hero h1 .wm-sub { color: oklch(0.24 0.06 160); }
:root[data-theme='dark'] .hero h1 .wm { color: var(--marigold); }
.hero .lead { margin-block-start: clamp(1.1rem, 3vw, 1.7rem); max-width: 30rem; font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.5; font-weight: 400; }
.cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: clamp(1.3rem, 3.5vw, 2rem); }
.hero .btn { border-color: var(--hero-ink); color: var(--hero-ink); }
.hero .btn--solid { background: var(--hero-ink); color: var(--hero-bg); }
.hero .btn:hover { box-shadow: 0 0.6rem 1.2rem -0.7rem var(--hero-ink); }

.hero__art { position: relative; aspect-ratio: 1 / 1; width: min(100%, 34rem); margin-inline: auto; }
.hero__sprig { position: absolute; inset-inline-end: -14%; inset-block-start: -10%; width: 70%; z-index: 0; --sprig-a: var(--coral); --sprig-b: var(--leaf); --sprig-stem: var(--leaf); rotate: 18deg; }
.plate {
  position: absolute; z-index: 1; margin: 0; border-radius: 50%; aspect-ratio: 1; background: var(--paper-2);
  rotate: var(--rot, 0deg);
  box-shadow: 0 0 0 0.35rem var(--hero-bg), 0 0 0 0.55rem var(--coral), 0 1.6rem 2.6rem -1.2rem oklch(0.18 0.05 160 / 0.6);
}
.plate img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.plate__f { display: block; width: 100%; height: 100%; border-radius: 50%; }
.hero__art .plate { box-shadow: none; background: none; border-radius: 0; }
.hero__art .plate__f { background: var(--paper-2); box-shadow: 0 0 0 0.35rem var(--hero-bg), 0 0 0 0.55rem var(--coral), 0 1.6rem 2.6rem -1.2rem oklch(0.18 0.05 160 / 0.6); }
.plate--1 { width: 56%; inset-block-start: 5%; inset-inline-start: 29%; --rot: -4deg; --d: 0.05s; }
.plate--2 { width: 37%; inset-block-start: 44%; inset-inline-start: 1%; --rot: 5deg; --d: 0.15s; }
.plate--3 { width: 41%; inset-block-start: 55%; inset-inline-start: 50%; --rot: -6deg; --d: 0.25s; }
.plate--4 { width: 24%; inset-block-start: 1%; inset-inline-start: 73%; --rot: 8deg; --d: 0.35s; }
.plate--5 { width: 23%; inset-block-start: 74%; inset-inline-start: 26%; --rot: -3deg; --d: 0.45s; }

/* Sprig: pairs of round leaflets on a curved stem, like the printed menu's leaves. */
.sprig { width: 100%; height: auto; overflow: visible; transform-origin: 50% 100%; }
.sprig .stem { fill: none; stroke: var(--sprig-stem, var(--leaf)); stroke-width: 3.5; stroke-linecap: round; }
.sprig .lf { transform-box: fill-box; transform-origin: 50% 50%; }
.sprig .la { fill: var(--sprig-a, var(--coral)); }
.sprig .lb { fill: var(--sprig-b, var(--leaf)); }

/* ---------- Category rail ---------- */
.rail { position: sticky; inset-block-start: 0; z-index: 30; background: var(--paper); border-block-end: 1px solid var(--line); }
.rail__scroll {
  min-height: 3.5rem; align-items: center;
  display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.55rem var(--gutter); scrollbar-width: none; scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1rem, #000 calc(100% - 1rem), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 1rem, #000 calc(100% - 1rem), transparent 100%);
}
.rail__scroll::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.4rem; padding: 0 1rem; border-radius: 999px;
  border: 1.5px solid var(--line-strong); text-decoration: none; font-weight: 500; font-size: 0.9375rem; white-space: nowrap; scroll-snap-align: center;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}
.chip::before { content: ''; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--w, var(--coral)); box-shadow: 0 0 0 1.5px var(--paper); flex: none; }
.chip[data-world='food'] { --w: var(--w-food); }
.chip[data-world='cafe'] { --w: var(--w-cafe); }
.chip[data-world='fresh'] { --w: var(--w-fresh); }
.chip[data-world='bar'] { --w: var(--w-bar); }
.chip:hover { border-color: var(--ink); }
.chip[aria-current='true'] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip[aria-current='true']::before { box-shadow: 0 0 0 1.5px var(--ink); }
.chip:active { transform: scale(0.96); }
.chip[hidden] { display: none; }
.chip--group { font-weight: 700; gap: 0.4rem; }
.chip--group .chev { width: 1rem; height: 1rem; flex: none; margin-inline-end: -0.3rem; transition: transform 0.25s var(--ease); }
.chip--group[aria-expanded='true'] .chev { transform: rotate(90deg); }
:root[dir='rtl'] .chip--group[aria-expanded='false'] .chev { transform: scaleX(-1); }
/* Section chips of the open world sit a little apart from the other worlds that follow. */
.chip--group[aria-expanded='true'] ~ .chip:not([hidden]) + .chip--group { margin-inline-start: 0.5rem; }

/* ---------- Menu toolbar ---------- */
.toolbar { padding-block: clamp(1.75rem, 5vw, 3rem) clamp(0.5rem, 2vw, 1rem); display: grid; gap: 1rem; }
.search { position: relative; display: block; max-width: 38rem; }
.search > [data-icon] { pointer-events: none; color: var(--ink-2); }
.search > [data-icon] svg { width: 100%; height: 100%; }
.search input {
  width: 100%; min-height: 3.4rem; padding: 0 3.2rem; border-radius: 999px; border: 2px solid var(--line-strong);
  background: var(--paper); color: var(--ink); font: inherit; font-size: 1.0625rem; transition: border-color 0.2s;
}
.search input::placeholder { color: var(--ink-2); opacity: 0.85; }
.search input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--paper-2); }
.search input::-webkit-search-cancel-button { display: none; }
.search .clear { position: absolute; inset-inline-end: 0.5rem; inset-block-start: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; display: none; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; }
.search .clear svg { position: static; transform: none; width: 1.2rem; height: 1.2rem; color: currentColor; }
.search .clear:hover { background: var(--paper-2); }
.search[data-has='true'] .clear { display: inline-flex; }

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.toggle {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.6rem; padding: 0 1.05rem; border-radius: 999px;
  border: 1.5px solid var(--line-strong); background: transparent; font-size: 0.9375rem; font-weight: 500;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}
.toggle svg { width: 1.1rem; height: 1.1rem; flex: none; }
.toggle:hover { border-color: var(--ink); }
.toggle[aria-pressed='true'] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.toggle:active { transform: scale(0.96); }
.count { margin-inline-start: auto; font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-size: 0.875rem; color: var(--ink-2); min-height: 1.65rem; }
.legend li { display: inline-flex; align-items: center; gap: 0.45rem; }

/* ---------- World banners ---------- */
.world { --world: var(--w-food); --on: var(--on-food); }
.world[data-world='cafe'] { --world: var(--w-cafe); --on: var(--on-cafe); --sprig-a: oklch(0.86 0.13 90); --sprig-b: oklch(0.8 0.1 150); --sprig-stem: oklch(0.82 0.09 150); }
.world[data-world='fresh'] { --world: var(--w-fresh); --on: var(--on-fresh); --sprig-a: oklch(0.96 0.05 92); --sprig-b: var(--forest); --sprig-stem: var(--forest); }
.world[data-world='bar'] { --world: var(--w-bar); --on: var(--on-bar); --sprig-a: var(--coral); --sprig-b: oklch(0.78 0.13 140); --sprig-stem: oklch(0.78 0.11 145); }
.world[data-world='food'] { --sprig-a: var(--coral); --sprig-b: var(--forest); --sprig-stem: var(--forest); }
.world__banner {
  position: relative; overflow: hidden; isolation: isolate; background: var(--world); color: var(--on);
  padding-block: clamp(2.75rem, 8vw, 5.5rem); margin-block-start: clamp(2.5rem, 7vw, 5rem);
  scroll-margin-top: var(--rail-h);
}
.world__banner::before { /* a low sun disc behind the type */
  content: ''; position: absolute; z-index: -1; width: clamp(16rem, 60vw, 40rem); aspect-ratio: 1; border-radius: 50%;
  inset-inline-end: -12%; inset-block-start: -30%; background: color-mix(in oklch, var(--on) 9%, transparent);
}
.world__title { font-size: clamp(3rem, 10.5vw, 7.75rem); font-weight: 900; letter-spacing: -0.04em; line-height: 0.92; max-width: 4.9em; text-wrap: balance; overflow-wrap: break-word; }
:lang(ar) .world__title, :lang(hi) .world__title { line-height: 1.2; }
.world__desc { margin-block-start: clamp(0.8rem, 2vw, 1.2rem); font-size: clamp(1.05rem, 2.2vw, 1.35rem); max-width: 24rem; font-weight: 500; }
.world__art { position: absolute; z-index: -1; inset-inline-end: max(calc(var(--gutter) - 1.5rem), calc((100% - var(--maxw)) / 2 + var(--gutter) - 1.5rem)); inset-block-end: -18%; width: clamp(11rem, 36vw, 27rem); opacity: 0.96; }
.world__art .disc { width: 100%; height: auto; }
.world__sprig { position: absolute; z-index: -2; inset-inline-end: 3%; inset-block-start: -8%; width: clamp(7rem, 20vw, 15rem); transform: rotate(16deg); opacity: 0.9; }
.world:not([data-world='food']) .world__sprig { inset-inline-end: auto; inset-inline-start: 52%; inset-block-start: -9%; width: clamp(4.5rem, 9vw, 8rem); transform: rotate(194deg); opacity: 0.95; }
@media (max-width: 48rem) { .world:not([data-world='food']) .world__sprig { display: none; } }
.world__cluster { position: absolute; z-index: -1; inset-inline-end: max(calc(var(--gutter) - 1rem), calc((100% - var(--maxw)) / 2 + var(--gutter) - 1rem)); inset-block-end: -8%; width: clamp(13rem, 42vw, 30rem); aspect-ratio: 1.15; }
.world__cluster .plate { box-shadow: 0 0 0 0.3rem var(--world), 0 0 0 0.5rem var(--coral), 0 1.2rem 2rem -1rem oklch(0.18 0.05 160 / 0.55); }
.world__cluster .plate--1 { width: 54%; inset-block-start: 0; inset-inline-start: 4%; }
.world__cluster .plate--2 { width: 40%; inset-block-start: 38%; inset-inline-start: 50%; }
.world__cluster .plate--3 { width: 30%; inset-block-start: 62%; inset-inline-start: 0; }
@media (max-width: 40rem) {
  .world__banner { padding-block-end: max(9.5rem, 50vw); }
  .world__art, .world__cluster { inset-block-end: -6%; opacity: 0.95; }
  /* The plate cluster sets the banner height, so the gap under the copy stays the same in every language. */
  .world[data-world='food'] { --cluster-w: min(62vw, 20rem); }
  .world[data-world='food'] .world__banner { padding-block-end: calc(var(--cluster-w) / 1.15 - 0.25rem); }
  .world__cluster { width: var(--cluster-w); inset-block-end: -1.5rem; }
  .world[data-world='food'] .world__sprig { inset-inline-end: -2.25rem; }
}

/* ---------- Sections & items ---------- */
.sec { padding-block-start: clamp(2.5rem, 7vw, 4.5rem); scroll-margin-top: calc(var(--rail-h) + 0.5rem); }
.sec__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-block-end: 0.75rem; }
.sec__head h3 { font-size: clamp(2rem, 5.2vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.flat { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 4.6rem; height: 4.6rem; border-radius: 50%; background: var(--coral); color: oklch(0.24 0.06 160); line-height: 1; text-align: center; transform: rotate(-8deg); flex: none; }
.flat b { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.02em; }
.flat small { font-size: 0.72rem; font-weight: 600; margin-block-start: 0.15rem; max-width: 3.6rem; overflow-wrap: anywhere; }
.sec__note { font-size: 0.9375rem; color: var(--ink-2); max-width: 32rem; }
.cols-head { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(1.75rem, 5vw, 4rem); font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); padding-block-end: 0.4rem; }
.cols-head .ch { display: flex; justify-content: flex-end; }
.cols-head .ch:nth-child(2) { display: none; }
.cols-head span { min-width: 3.6rem; text-align: end; }
@media (min-width: 56rem) { .cols-head { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols-head .ch:nth-child(2) { display: flex; } }

.items { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(1.75rem, 5vw, 4rem); }
@media (min-width: 56rem) { .items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.item { padding-block: 0.95rem; border-block-end: 1px solid var(--line); min-width: 0; }
.item--pic { display: grid; grid-template-columns: var(--pic) minmax(0, 1fr); gap: 0.4rem clamp(0.85rem, 2.5vw, 1.25rem); align-items: start; padding-block: 1.15rem; }
.item__main { min-width: 0; }
.item__pic { width: var(--pic); height: var(--pic); border-radius: 50%; object-fit: cover; background: var(--paper-2); box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--coral); margin-block-start: 0.2rem; }
.item__head { display: flex; align-items: baseline; gap: 0.6rem; }
.item__name { font-size: 1.0625rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; display: inline; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.tags { display: inline-flex; gap: 0.3rem; margin-inline-start: 0.4rem; vertical-align: -0.2em; }
.tag { display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; }
.tag svg { width: 0.95rem; height: 0.95rem; }
.tag--fav { background: var(--coral); color: oklch(0.24 0.06 160); }
.tag--pork { background: var(--paper-2); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.leader { flex: 1 1 1rem; min-width: 0.75rem; height: 4px; align-self: end; margin-block-end: 0.32em; background-image: radial-gradient(circle, var(--ink-2) 1px, transparent 1.6px); background-size: 8px 4px; background-repeat: repeat-x; opacity: 0.45; }
.prices { display: inline-flex; flex: none; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--price); font-size: 1.0625rem; }
.pc { min-width: 3.6rem; text-align: end; }
.pc i, .prices i { font-style: normal; font-size: 0.72em; font-weight: 600; margin-inline-start: 0.08em; opacity: 0.85; }
.pc--na { color: var(--ink-2); font-weight: 400; }
.item__orig { font-size: 0.8125rem; color: var(--ink-2); margin-block-start: 0.1rem; }
:root[dir='rtl'] .item__orig { text-align: right; }
.item__desc { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; margin-block-start: 0.3rem; max-width: 34rem; }
.variants { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; margin-block-start: 0.55rem; }
.var { display: inline-flex; gap: 0.5em; align-items: baseline; padding: 0.2em 0.75em 0.25em; border-radius: 999px; background: var(--paper-2); font-size: 0.875rem; }
.var b { color: var(--price); font-weight: 700; font-variant-numeric: tabular-nums; }
.subs { display: grid; gap: 0.85rem; margin-block-start: 0.7rem; }
.sub { position: relative; padding-inline-start: 1.15rem; }
.sub::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 0.5em; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--coral); }
.sub .item__name { font-size: 1rem; font-weight: 600; }
.addons { margin-block-start: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; font-size: 0.9375rem; }
.addons > b { font-weight: 700; }
.addons span { display: inline-flex; gap: 0.5em; padding: 0.25em 0.8em 0.3em; border-radius: 999px; background: var(--paper-2); }
.addons span i { font-style: normal; color: var(--price); font-weight: 700; }

.js #menu-root:empty { min-height: 100svh; }
.empty { padding-block: clamp(3rem, 10vw, 6rem); text-align: center; }
.empty h3 { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; }
.empty p { color: var(--ink-2); margin-block: 0.6rem 1.4rem; }
.tail { height: clamp(2.5rem, 7vw, 4.5rem); }

/* ---------- Reviews ---------- */
.reviews { --sprig-a: var(--coral); --sprig-b: var(--forest); --sprig-stem: var(--forest); position: relative; overflow: hidden; isolation: isolate; background: var(--rev-bg); color: var(--rev-ink); padding-block: clamp(3.5rem, 10vw, 7rem); }
:root[data-theme='dark'] .reviews { --sprig-a: oklch(0.78 0.13 60); --sprig-b: oklch(0.68 0.11 165); --sprig-stem: oklch(0.68 0.11 165); }
.reviews__sprig { position: absolute; z-index: -1; inset-inline-end: -3%; inset-block-start: -6%; width: clamp(9rem, 26vw, 20rem); transform: rotate(24deg); opacity: 0.95; }
.reviews h2 { font-size: clamp(2.6rem, 9vw, 6.5rem); font-weight: 900; letter-spacing: -0.04em; line-height: 0.92; max-width: 8em; text-wrap: balance; }
.reviews__meta { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); margin-block-start: clamp(1.5rem, 4vw, 2.5rem); }
@media (min-width: 52rem) { .reviews__meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } }
.rating { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; font-size: 1.15rem; font-weight: 500; }
.stars { display: inline-flex; gap: 0.15rem; }
.stars svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }
.dist { display: grid; gap: 0.3rem; max-width: 22rem; margin-block-start: 1rem; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.dist div { display: grid; grid-template-columns: 1.2rem 1fr 2.4rem; align-items: center; gap: 0.6rem; }
.dist .bar { height: 0.55rem; border-radius: 999px; background: color-mix(in oklch, currentColor 16%, transparent); overflow: hidden; }
.dist .bar i { display: block; height: 100%; width: var(--w); border-radius: 999px; background: currentColor; }
.dist dt { font-weight: 600; text-align: end; }
.dist dd { text-align: end; opacity: 0.85; }
.topics__label { font-size: 0.9375rem; font-weight: 600; margin-block-end: 0.6rem; }
.topics { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.topics li { display: inline-flex; gap: 0.55em; align-items: baseline; padding: 0.35em 1em 0.4em; border-radius: 999px; border: 2px solid currentColor; font-weight: 500; }
.topics li b { font-variant-numeric: tabular-nums; }
.quotes { margin-block-start: clamp(2.5rem, 7vw, 4.5rem); columns: 1; column-gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 48rem) { .quotes { columns: 2; } }
@media (min-width: 72rem) { .quotes { columns: 3; } }
.quote { break-inside: avoid; margin-block-end: clamp(1.75rem, 4vw, 2.75rem); padding-block-start: 1.1rem; border-block-start: 2px solid currentColor; }
.quote p { font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.45; font-weight: 500; }
.quote--lead { column-span: all; border-block-start: 0; padding-block-start: 0; }
.quote--lead p { font-size: clamp(2rem, 6.5vw, 4.6rem); line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; max-width: 16ch; }
.quote footer { display: flex; align-items: center; gap: 0.7rem; margin-block-start: 0.9rem; font-size: 0.9375rem; font-weight: 500; }
.quote footer .stars svg { width: 1rem; height: 1rem; }
.quote footer small { opacity: 0.8; font-size: inherit; }
.reviews__foot { margin-block-start: 1rem; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; }
.reviews__foot p { font-size: 0.875rem; opacity: 0.85; max-width: 30rem; }
.reviews .btn { border-color: var(--rev-ink); color: var(--rev-ink); }
.reviews .btn:hover { background: var(--rev-ink); color: var(--rev-bg); }

/* ---------- Visit ---------- */
.visit { position: relative; overflow: hidden; background: var(--visit-bg); color: var(--visit-ink); padding-block: clamp(3.5rem, 10vw, 7rem); margin-block-start: clamp(-1.5rem, -3vw, -0.5rem); border-radius: clamp(2rem, 6vw, 4.5rem) clamp(2rem, 6vw, 4.5rem) 0 0; }
.visit__grid { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
@media (min-width: 56rem) { .visit__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.visit h2 { font-size: clamp(2.6rem, 9vw, 6.2rem); font-weight: 900; letter-spacing: -0.04em; line-height: 0.92; max-width: 7em; text-wrap: balance; }
.visit .lead { margin-block-start: 1.1rem; font-size: clamp(1.05rem, 2.2vw, 1.3rem); max-width: 26rem; }
.facts { margin-block-start: clamp(1.5rem, 4vw, 2.25rem); display: grid; gap: 1.1rem; max-width: 34rem; }
.fact { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.25rem 1rem; padding-block-end: 1.1rem; border-block-end: 1px solid oklch(0.975 0.03 92 / 0.22); }
.fact dt { font-size: 0.9375rem; opacity: 0.8; }
.fact dd { font-weight: 500; }
.fact a { text-underline-offset: 0.2em; }
.visit__note { margin-block-start: 0.7rem; max-width: 34rem; font-size: 0.9375rem; opacity: 0.9; }
.visit .cta { margin-block-start: clamp(1.5rem, 4vw, 2rem); }
.visit .btn { border-color: var(--visit-ink); color: var(--visit-ink); }
.visit .btn--solid { background: var(--marigold); color: oklch(0.26 0.06 160); border-color: var(--marigold); }
.visit .btn:not(.btn--solid):hover { background: var(--visit-ink); color: var(--visit-bg); }
.mapdisc { position: relative; display: block; width: min(100%, 26rem); aspect-ratio: 1; margin-inline: auto; border-radius: 50%; background: var(--teal); color: inherit; text-decoration: none; box-shadow: 0 0 0 0.4rem var(--visit-bg), 0 0 0 0.65rem var(--coral); overflow: hidden; transition: transform 0.4s var(--ease); }
.mapdisc:hover { transform: rotate(-3deg) scale(1.02); }
.mapdisc svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapdisc span { position: absolute; inset-inline: 12%; inset-block-end: 11%; text-align: center; padding: 0.7rem 1rem; border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 600; font-size: 0.95rem; line-height: 1.2; }

/* Decorative pieces that only render when motion.css switches them on. */
.marquee, .progress, .ripple, .rail__ind { display: none; }

/* ---------- Footer ---------- */
.foot { padding-block: 2rem 3rem; background: var(--visit-bg); color: var(--visit-ink); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; font-size: 0.875rem; }
.foot p { max-width: 40rem; opacity: 0.85; }
.totop { position: fixed; inset-inline-end: 1rem; inset-block-end: 1rem; z-index: 50; width: 3.1rem; height: 3.1rem; display: none; align-items: center; justify-content: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: 0 0.8rem 1.6rem -0.8rem oklch(0.2 0.05 160 / 0.7); }
.totop[data-show='true'] { display: inline-flex; }
.totop svg { width: 1.3rem; height: 1.3rem; }

@media print {
  .rail, .toolbar, .top, .totop, .world__art, .world__cluster, .hero__art { display: none !important; }
  .world__banner, .reviews, .visit, .hero { background: none !important; color: #000 !important; }
}