/* Warung Ravaya Arim
   The page descends a rice hillside: a dawn sky and the sign at the gate, then the menu terrace by terrace.
   Light theme is midday haze over the paddies; dark theme is dusk over the same fields.
   Every color is OKLCH. Neutrals lean toward the warm walnut of the printed menu's boards. */

:root {
  color-scheme: light;
  --font: 'Alegreya Sans', 'Alegreya Sans Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --hand: 'Caveat', 'Segoe Print', 'Bradley Hand', 'Marker Felt', cursive;
  --brand: 'Alegreya Sans', 'Alegreya Sans Fallback', system-ui, sans-serif;

  /* space, 4pt base, named by relationship */
  --sp-xs: 0.25rem; --sp-sm: 0.5rem; --sp-md: 1rem; --sp-lg: 1.5rem; --sp-xl: 2.5rem; --sp-2xl: 4rem; --sp-3xl: 6rem;
  --gutter: clamp(1rem, 5vw, 2.5rem);
  --maxw: 72rem;
  --rail-h: 0px;

  /* type scale, ratio about 1.25; Alegreya Sans has a small x-height, so text starts at 18px */
  --t-sm: 0.9375rem; --t-base: 1.125rem; --t-md: 1.375rem; --t-lg: 1.75rem;

  /* primitives */
  --rice-50: oklch(0.985 0.012 98);
  --rice-100: oklch(0.95 0.028 92);
  --rice-200: oklch(0.93 0.032 98);
  --walnut: oklch(0.27 0.035 75);
  --walnut-2: oklch(0.44 0.035 78);
  --board: oklch(0.25 0.035 50);
  --board-2: oklch(0.2 0.03 50);
  /* vertical teak planks: seams, then two grain layers with unrelated periods */
  --planks: repeating-linear-gradient(90deg, transparent 0 3.4rem, oklch(0.1 0.02 50 / 0.5) 3.4rem calc(3.4rem + 2px)), repeating-linear-gradient(90deg, oklch(0.45 0.06 55 / 0.13) 0 0.21rem, transparent 0.21rem 0.55rem), repeating-linear-gradient(90deg, oklch(0.06 0.02 50 / 0.18) 0 0.13rem, transparent 0.13rem 0.97rem);
  --cream: oklch(0.96 0.03 92);
  --orange: oklch(0.69 0.13 54);
  --orange-deep: oklch(0.5 0.12 45);
  --leaf-deep: oklch(0.38 0.09 155);
  --pen: oklch(0.3 0.06 262);
  --bamboo: oklch(0.66 0.09 88);
  --bamboo-hi: oklch(0.78 0.09 92);

  /* semantic */
  --bg: var(--rice-100);
  --surface: var(--rice-50);
  --text: var(--walnut);
  --text-2: var(--walnut-2);
  --line: oklch(0.27 0.035 75 / 0.16);
  --line-strong: oklch(0.27 0.035 75 / 0.42);
  --accent: var(--orange);
  --accent-ink: var(--orange-deep);
  --sticker: oklch(0.995 0.008 95);
  --shadow: oklch(0.22 0.03 70 / 0.5);

  /* the scene: a bright day seen from the veranda */
  --on-scene: var(--walnut);
  --sky-0: oklch(0.79 0.06 218);
  --sky-1: oklch(0.88 0.055 195);
  --sky-2: oklch(0.95 0.055 105);
  --sun: oklch(0.99 0.05 95);
  --bloom: oklch(0.99 0.08 92);
  --shaft: oklch(0.99 0.07 95);
  --shaft-o: 0.7;
  --lit: oklch(0.97 0.11 105);
  --vig: oklch(0.26 0.05 70);
  --leafshade: oklch(0.18 0.05 165);
  --dapple-o: 0.24;
  --sun-dy: 0px;
  --disc-o: 0;
  --cloud: oklch(0.985 0.03 95);
  --cloud-sh: oklch(0.88 0.02 235);
  --mtn-far: oklch(0.7 0.05 190);
  --mtn-lit: oklch(0.79 0.055 165);
  --mtn-mid: oklch(0.55 0.07 170);
  --forest-far: oklch(0.58 0.06 165);
  --forest: oklch(0.3 0.06 165);
  --forest-2: oklch(0.4 0.085 155);
  --t1: oklch(0.6 0.095 155);
  --t2: oklch(0.66 0.115 148);
  --t3: oklch(0.72 0.135 140);
  --t4: oklch(0.78 0.15 132);
  --t5: oklch(0.83 0.16 125);
  --water: oklch(0.88 0.05 215);
  --water-hi: oklch(0.985 0.03 95);
  --row: oklch(0.5 0.1 150);
  --riser: oklch(0.34 0.07 160);
  --palm: oklch(0.27 0.06 165);
  --palm-hi: oklch(0.5 0.1 148);
  --wood: oklch(0.28 0.045 48);
  --wood-hi: oklch(0.5 0.09 55);
  --wood-sh: oklch(0.15 0.025 48);
  --wood-dk: oklch(0.18 0.03 48);
  --tile: oklch(0.4 0.09 28);
  --tile-hi: oklch(0.52 0.08 32);
  --win: oklch(0.24 0.03 62);
  --blind: oklch(0.56 0.07 85);
  --tile-dk: oklch(0.31 0.08 25);
  --trunk: oklch(0.36 0.04 75);
  --nut: oklch(0.3 0.06 100);
  --cr: oklch(0.46 0.15 27); --cy: oklch(0.78 0.14 95); --co: oklch(0.62 0.16 48); --cg: oklch(0.38 0.09 150); --cv: oklch(0.88 0.12 100);
  --bn: oklch(0.66 0.12 128); --bn2: oklch(0.46 0.09 148); --bst: oklch(0.6 0.07 120); --bbud: oklch(0.34 0.11 10);
  --egret: oklch(0.99 0.01 95);
  --star-o: 0;

  /* world header bands: sky, then three terraces */
  --band-0: oklch(0.84 0.055 205);
  --band-1: oklch(0.94 0.055 105);
  --on-band: var(--walnut);
  --w1: oklch(0.64 0.08 152); --w2: oklch(0.7 0.095 142); --w3: oklch(0.77 0.1 130);

  --rev-top: oklch(0.93 0.055 118);
  --rev-bot: oklch(0.87 0.065 155);
  --rev-bg: var(--rev-top);
  --streak: oklch(1 0.05 100 / 0.16);
  --e0: oklch(0.78 0.15 128);
  --e1: oklch(0.69 0.14 142);
  --tl-far: oklch(0.4 0.04 65);
  --rev-ink: var(--walnut);
  --visit-t: oklch(0.42 0.05 65);
  --shade: oklch(0.28 0.05 230);
  --edge: oklch(0.99 0.02 100);
  --paper: url('../img/paper.webp');
  --mottle: url('../img/mottle.webp');
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 24C150 6 300 38 480 22S820 4 1000 22 1140 32 1200 18V40H0Z'/%3E%3C/svg%3E");
  --wh: clamp(2rem, 5vw, 3.75rem);
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: oklch(0.2 0.03 200);
  --surface: oklch(0.245 0.035 200);
  --rice-200: oklch(0.29 0.04 200);
  --text: oklch(0.94 0.02 95);
  --text-2: oklch(0.8 0.03 95);
  --line: oklch(0.94 0.02 95 / 0.16);
  --line-strong: oklch(0.94 0.02 95 / 0.42);
  --accent: oklch(0.72 0.12 54);
  --accent-ink: oklch(0.8 0.13 62);
  --sticker: oklch(0.34 0.045 200);
  --pen: oklch(0.93 0.03 95);
  --shadow: oklch(0.08 0.02 250 / 0.7);

  --on-scene: oklch(0.96 0.02 95);
  --sky-0: oklch(0.21 0.045 275);
  --sky-1: oklch(0.3 0.06 310);
  --sky-2: oklch(0.46 0.095 40);
  --sun: oklch(0.8 0.1 65);
  --bloom: oklch(0.78 0.14 50);
  --shaft: oklch(0.82 0.13 58);
  --shaft-o: 0.55;
  --lit: oklch(0.8 0.14 55);
  --vig: oklch(0.06 0.03 280);
  --leafshade: oklch(0.07 0.03 270);
  --dapple-o: 0.4;
  --sun-dy: 150px;
  --disc-o: 1;
  --cloud: oklch(0.46 0.055 350);
  --cloud-sh: oklch(0.36 0.05 350);
  --mtn-far: oklch(0.34 0.05 300);
  --mtn-lit: oklch(0.44 0.07 335);
  --mtn-mid: oklch(0.27 0.045 260);
  --t1: oklch(0.34 0.045 205);
  --t2: oklch(0.36 0.055 192);
  --t3: oklch(0.38 0.065 175);
  --t4: oklch(0.4 0.075 158);
  --t5: oklch(0.43 0.08 145);
  --water: oklch(0.52 0.07 35);
  --water-hi: oklch(0.74 0.08 58);
  --row: oklch(0.3 0.05 160);
  --riser: oklch(0.23 0.045 200);
  --palm: oklch(0.16 0.025 250);
  --palm-hi: oklch(0.26 0.045 205);
  --forest-far: oklch(0.29 0.05 300);
  --forest: oklch(0.2 0.035 250);
  --forest-2: oklch(0.24 0.045 215);
  --wood: oklch(0.16 0.025 300);
  --wood-hi: oklch(0.36 0.06 20);
  --wood-sh: oklch(0.09 0.02 280);
  --wood-dk: oklch(0.1 0.02 280);
  --tile: oklch(0.3 0.06 20);
  --tile-hi: oklch(0.44 0.08 28);
  --win: oklch(0.82 0.11 74);
  --blind: oklch(0.34 0.06 60);
  --tile-dk: oklch(0.22 0.05 20);
  --trunk: oklch(0.2 0.03 280);
  --nut: oklch(0.2 0.04 260);
  --cr: oklch(0.34 0.09 15); --cy: oklch(0.48 0.07 72); --co: oklch(0.4 0.08 42); --cg: oklch(0.22 0.05 185); --cv: oklch(0.6 0.08 70);
  --bn: oklch(0.36 0.06 170); --bn2: oklch(0.25 0.05 190); --bst: oklch(0.3 0.04 190); --bbud: oklch(0.2 0.06 350);
  --egret: oklch(0.88 0.04 40);
  --star-o: 0.9;

  --band-0: oklch(0.24 0.05 280);
  --band-1: oklch(0.46 0.09 22);
  --on-band: oklch(0.96 0.02 95);
  --w1: oklch(0.36 0.055 200); --w2: oklch(0.4 0.065 170); --w3: oklch(0.44 0.07 150);

  --rev-top: oklch(0.27 0.06 205);
  --rev-bot: oklch(0.22 0.05 215);
  --rev-bg: var(--rev-top);
  --streak: oklch(0.9 0.05 150 / 0.05);
  --e0: oklch(0.43 0.1 150);
  --e1: oklch(0.35 0.085 175);
  --tl-far: oklch(0.3 0.04 60);
  --rev-ink: var(--text);
  --visit-t: oklch(0.3 0.03 200);

  --shade: oklch(0.05 0.03 280);
  --edge: oklch(0.8 0.1 45);
}
/* ---------- 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: var(--t-base); line-height: 1.5; font-kerning: normal;
  color: var(--text); background-color: var(--bg); background-image: var(--paper), var(--mottle); background-size: 256px, 1024px; background-blend-mode: soft-light, soft-light; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
:root[data-theme='dark'] body { line-height: 1.55; letter-spacing: 0.01em; }
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 var(--accent); outline-offset: 3px; border-radius: 4px; }
.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 Alegreya Sans lacks use Noto; joined and tall glyphs need neutral tracking and more air. */
:lang(hi), :lang(zh), :lang(ja), :lang(ko) { letter-spacing: 0 !important; --t-base: 1.0625rem; }
:lang(hi) { --font: 'Noto Sans Devanagari', 'Alegreya Sans', 'Alegreya Sans Fallback', system-ui, sans-serif; --hand: 'Caveat', 'Noto Sans Devanagari', cursive; }
:lang(zh) { --font: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Alegreya Sans', 'Alegreya Sans Fallback', system-ui, sans-serif; --hand: 'Caveat', 'Noto Sans SC', 'PingFang SC', cursive; }
:lang(ja) { --font: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', 'Alegreya Sans', 'Alegreya Sans Fallback', system-ui, sans-serif; --hand: 'Caveat', 'Noto Sans JP', 'Hiragino Sans', cursive; }
:lang(ko) { --font: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Alegreya Sans', 'Alegreya Sans Fallback', system-ui, sans-serif; --hand: 'Caveat', 'Noto Sans KR', 'Apple SD Gothic Neo', cursive; }
:lang(hi) body { line-height: 1.75; }
:lang(zh) body, :lang(ja) body, :lang(ko) body { line-height: 1.7; }
/* Korean wraps at spaces, not between syllables; Japanese wraps at phrase boundaries where the browser can. */
:lang(ko) { word-break: keep-all; }
:lang(ja) { word-break: auto-phrase; }
h1, h2, h3 { text-wrap: balance; }

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

/* ---------- Buttons & small controls ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 3rem; padding: 0.6rem 1.35rem; border-radius: 0.4rem;
  border: 2px solid currentColor; background: transparent; color: inherit;
  font-weight: 700; font-size: 1.0625rem; 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::after { content: ''; position: absolute; inset: -3px -3px -6px; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 0.6rem 1rem -0.7rem var(--shadow); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--solid { background: var(--walnut); border-color: var(--walnut); color: var(--cream); }
:root[data-theme='dark'] .btn--solid { background: var(--orange); border-color: var(--orange); color: var(--walnut); }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.85rem; border-radius: 0.4rem;
  border: 2px solid currentColor; background: transparent; font-weight: 700; font-size: var(--t-sm);
  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(--on-scene); color: var(--sky-1); }
.iconbtn:active { transform: scale(0.96); }
.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: 0.1rem; inset-block-start: 50%; width: 1.4rem; height: 1.4rem; transform: translateY(-50%); }
.search .clear [data-icon] { width: 1.2rem; height: 1.2rem; }
.totop [data-icon] { width: 1.3rem; height: 1.3rem; }

/* ---------- Hero: the terraces, and the sign at the gate ---------- */
.hero { position: relative; isolation: isolate; overflow: clip; color: var(--on-scene); min-height: min(100svh, 54rem); display: flex; flex-direction: column; }
.hero__scene { position: absolute; inset: 0; z-index: -1; background: var(--sky-0); container-type: size; }
/* A stack of sheets with one shared viewBox (see art.js scene()). */
.scene { position: relative; width: 100%; height: 100%; }
.scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Parallax shift: `--n` viewBox units, scaled the way `slice` scales the drawing (the larger of width/1600, height/900). */
.scene .lyr { --dy: max(calc(var(--n) * 1cqw / 16), calc(var(--n) * 1cqh / 9)); }
/* paper grain: one tiled noise sheet laid over the scene */
.hero__scene::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--paper) 0 0 / 256px; mix-blend-mode: overlay; opacity: 0.85; }
.scene .sky0 { fill: var(--sky-0); } .scene .sky1 { fill: var(--sky-1); } .scene .sky2 { fill: var(--sky-2); }
.scene .halo { fill: var(--sun); } .scene .h3 { opacity: 0.07; } .scene .h2 { opacity: 0.1; }
/* paper: a sheet shadows the one behind it, and its cut edge catches the light */
.scene .sh { fill: none; stroke: var(--shade); stroke-linejoin: round; stroke-linecap: round; }
.scene .sh.s1 { stroke-width: 30; opacity: 0.05; } .scene .sh.s2 { stroke-width: 18; opacity: 0.07; } .scene .sh.s3 { stroke-width: 8; opacity: 0.15; }
.scene .faint { opacity: 0.55; }
:root[data-theme='dark'] .scene .hl { opacity: 0.3; }
.scene .hl { fill: none; stroke: var(--edge); stroke-width: 1.4; stroke-linejoin: round; opacity: 0.35; }
.scene .sun .disc { fill: var(--sun); opacity: var(--disc-o); }
.scene .sun { translate: 0 var(--sun-dy); }
.scene .star { fill: var(--cream); opacity: var(--star-o); }
.scene .cloud ellipse { fill: url(#hz); }
.scene .bloom { fill: url(#bloom); }
.scene .shafts { opacity: var(--shaft-o); }
.scene .shaft { fill: url(#shaft); }
.scene .vig { fill: url(#vig); }
.scene .tlit { fill: url(#tg); }
.scene .veil { fill: url(#veilg); }
.scene .veranda .grain { fill: none; stroke: var(--wood-sh); stroke-width: 1.1; stroke-linecap: round; opacity: 0.42; }
.scene .veranda .knot ellipse { fill: var(--wood-sh); opacity: 0.6; }
.scene .dapple { opacity: var(--dapple-o); }
.scene .dapple path { fill: var(--leafshade); }
.scene .mtn-far { fill: var(--mtn-far); }
.scene .mtn-lit { fill: var(--mtn-lit); }
.scene .mtn-mid { fill: var(--mtn-mid); }
.scene .forest { fill: var(--forest); } .scene .forest.f2 { fill: var(--forest-2); } .scene .forest.far { fill: var(--forest-far); }
.scene .ter.t1 { fill: var(--t1); } .scene .ter.t2 { fill: var(--t2); } .scene .ter.t3 { fill: var(--t3); }
.scene .ter.t4 { fill: var(--t4); } .scene .ter.t5 { fill: var(--t5); }
.scene .riser { fill: var(--riser); opacity: 0.38; }
.scene .water { fill: var(--water); }
.scene .water.hi { fill: var(--water-hi); opacity: 0.55; }
.scene .rows { fill: none; stroke: var(--row); stroke-width: 3; stroke-dasharray: 2 14; stroke-linecap: round; opacity: 0.5; }
.scene .rows.fine { stroke-width: 1.8; stroke-dasharray: 1.4 8; opacity: 0.3; }
:is(.scene, .world__art) .palm .trunk { fill: var(--trunk); }
:is(.scene, .world__art) .palm .crown path { fill: var(--palm); }
:is(.scene, .world__art) .palm .crown path.hi { fill: var(--palm-hi); }
:is(.scene, .world__art) .palm .crown path.rib { fill: none; stroke: var(--palm); stroke-width: 1.5; stroke-linecap: round; }
:is(.scene, .world__art) .palm .rings { fill: none; stroke: var(--wood-sh); stroke-width: 0.9; opacity: 0.45; }
:is(.scene, .world__art) .palm .trunk-hi { fill: none; stroke: var(--palm-hi); stroke-width: 1.6; stroke-linecap: round; opacity: 0.4; }
:is(.scene, .world__art) .palm .nuts circle { fill: var(--nut); }
.scene .egret .wing { fill: none; stroke: var(--egret); stroke-width: 3; stroke-linecap: round; }
.scene .egret ellipse { fill: var(--egret); }
/* the wooden house and the veranda rail */
.scene .w { fill: var(--wood); } .scene .w-hi { fill: var(--wood-hi); } .scene .w-sh { fill: var(--wood-sh); opacity: 0.6; } .scene .w-dk { fill: var(--wood-dk); }
.scene .tile { fill: var(--tile); }
.scene .tile-b { fill: var(--tile-hi); opacity: 0.2; }
.scene .tile-dk { fill: var(--tile-dk); }
.scene .roofg { fill: url(#roofg); }
.scene .eaveshade { fill: url(#eg); }
.scene .shade { fill: var(--wood-sh); }
.scene .blind { fill: var(--blind); }
.scene .bl { fill: none; stroke: var(--wood-sh); stroke-width: 0.8; opacity: 0.5; }
.scene .tile-rows { fill: none; stroke: var(--wood-sh); stroke-width: 1; opacity: 0.35; }
.scene .win { fill: var(--win); }
.scene .croton .cr { fill: var(--cr); } .scene .croton .cy { fill: var(--cy); } .scene .croton .co { fill: var(--co); } .scene .croton .cg { fill: var(--cg); }
.scene .croton .cvn { fill: none; stroke: var(--cv); stroke-width: 0.8; stroke-linecap: round; opacity: 0.32; }
.scene .banana .bn { fill: var(--bn); } .scene .banana .bn2 { fill: var(--bn2); }
.scene .banana .bm { fill: none; stroke: var(--bn2); stroke-width: 2.4; opacity: 0.7; stroke-linecap: round; }
.scene .banana .bst { fill: var(--bst); }
.scene .banana .bsr { fill: none; stroke: var(--bn2); stroke-width: 1.3; opacity: 0.55; stroke-linecap: round; }
.scene .banana .bbud { fill: var(--bbud); }

.top { position: relative; z-index: 5; display: flex; align-items: center; gap: 0.75rem; padding-block: var(--sp-md); }
.brand { font-family: var(--brand); display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font-weight: 900; font-size: 1.3rem; letter-spacing: -0.005em; }
.brand .logo { display: block; width: 2.75rem; height: 2.75rem; 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(fr) #lang-current:empty::before { content: 'Français'; }
:root:lang(ru) #lang-current:empty::before { content: 'Русский'; }
:root:lang(ja) #lang-current:empty::before { content: '日本語'; }
:root:lang(ko) #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: var(--t-sm); content: 'EN'; }
  :root:lang(zh) #lang-current::after { content: 'ZH'; }
  :root:lang(hi) #lang-current::after { content: 'HI'; }
  :root:lang(fr) #lang-current::after { content: 'FR'; }
  :root:lang(ru) #lang-current::after { content: 'RU'; }
  :root:lang(ja) #lang-current::after { content: 'JA'; }
  :root:lang(ko) #lang-current::after { content: 'KO'; }
  :root:lang(uk) #lang-current::after { content: 'UK'; }
  :root:lang(id) #lang-current::after { content: 'ID'; }
}
.i18n-pending .hero__body, .i18n-pending [data-i18n], .i18n-pending #status-text, .i18n-pending .legend, .i18n-pending .quotes { visibility: hidden; }
.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.5rem; border-radius: 0.5rem;
  background: var(--surface); color: var(--text); box-shadow: 0 1.5rem 3rem -1rem var(--shadow), 0 0 0 2px var(--text);
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem;
}
.langpanel[hidden] { display: none; }
.langpanel button {
  min-height: 2.9rem; padding: 0.4rem 0.8rem; border: 0; border-radius: 0.3rem; background: transparent;
  text-align: start; font-weight: 700; transition: background-color 0.15s;
}
.langpanel button:hover { background: var(--rice-200); }
.langpanel button[aria-pressed='true'] { background: var(--text); color: var(--bg); }
.langpanel button:last-child:nth-child(odd) { grid-column: 1 / -1; }

.hero > .wrap { width: 100%; }
.hero__body { position: relative; z-index: 2; padding-block: clamp(1rem, 4vw, 2.5rem) clamp(12rem, 24vw, 17rem); }

/* The sign hangs from a bamboo beam, like the board at the gate: dark teak planks, cream and orange letters. */
.sign { position: relative; width: fit-content; max-width: 100%; min-width: min(100%, 21rem); margin-block-start: 2rem; }
.sign__beam { position: absolute; z-index: 1; inset-block-start: -1.1rem; inset-inline: -1.5rem; height: 0.85rem; border-radius: 999px; background: linear-gradient(var(--bamboo-hi), var(--bamboo)); box-shadow: 0 0.3rem 0.5rem -0.3rem var(--shadow); }
.sign__beam::before, .sign__beam::after { content: ''; position: absolute; inset-block: -1px; width: 0.35rem; border-radius: 999px; background: oklch(0.5 0.08 80); }
.sign__beam::before { inset-inline-start: 22%; } .sign__beam::after { inset-inline-end: 22%; }
.sign__board {
  position: relative; padding: 1.25rem 1.5rem 1.35rem; border-radius: 0.35rem; transform-origin: 50% -1rem;
  background: var(--planks), var(--board);
  box-shadow: 0 1.6rem 2rem -1.3rem var(--shadow), inset 0 0 0 0.2rem oklch(0.34 0.045 55), inset 0 0 0 0.5rem oklch(0.2 0.03 50), inset 0 0 0 0.56rem oklch(0.5 0.07 60 / 0.55);
}
.sign__board::before, .sign__board::after { content: ''; position: absolute; inset-block-start: -1rem; width: 3px; height: 1.1rem; background: oklch(0.55 0.07 80); }
.sign__board::before { inset-inline-start: 1.25rem; } .sign__board::after { inset-inline-end: 1.25rem; }
.sign h1, .sign__sub, .gate__sign { font-family: var(--brand); }
.sign h1 { display: flex; flex-direction: column; align-items: flex-start; }
.sign__the { font-family: var(--hand); font-weight: 700; font-size: 2.1rem; line-height: 1; color: var(--orange); }
.sign__name { font-weight: 900; font-size: clamp(3rem, 13vw, 4.7rem); line-height: 0.92; letter-spacing: -0.01em; color: var(--cream); margin-inline-start: -0.03em; }
.sign__sub { margin-block-start: 0.85rem; padding-block-start: 0.65rem; border-block-start: 2px solid oklch(0.96 0.03 92 / 0.3); font-weight: 900; font-size: 1.0625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); }
.sign__sub span { color: var(--cream); }
/* Rating tag hanging under the sign */
.hang {
  position: relative; display: flex; align-items: center; gap: 0.5rem; width: fit-content; max-width: 100%;
  margin: 1.15rem 1.25rem 0 auto; padding: 0.4rem 0.85rem 0.5rem; rotate: 1.4deg; transform-origin: 1rem -1.1rem;
  background: var(--sticker); color: var(--pen); border-radius: 0.3rem; font-weight: 700; font-size: var(--t-sm);
  box-shadow: 0 0 0 1px var(--line), 0 0.5rem 0.8rem -0.5rem var(--shadow);
}
.hang::before { content: ''; position: absolute; inset-block-start: -1.1rem; inset-inline-start: 0.9rem; width: 2px; height: 1.1rem; background: oklch(0.55 0.07 80); }
.hang::after { content: ''; position: absolute; inset-block-start: -1.1rem; inset-inline-end: 0.9rem; width: 2px; height: 1.1rem; background: oklch(0.55 0.07 80); }
.hang__ears { display: inline-flex; }
.hang__ears svg { width: 1.35rem; height: 1.35rem; }
.hang__ears .ear-stem { fill: none; stroke: var(--leaf-deep); stroke-width: 1.7; stroke-linecap: round; }
.hang__ears .ear-grains ellipse { fill: var(--orange); }
:root[data-theme='dark'] .hang__ears .ear-stem { stroke: oklch(0.8 0.1 150); }

.hero .lead { margin-block-start: var(--sp-lg); max-width: 27rem; font-size: var(--t-md); line-height: 1.38; }
.cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: var(--sp-lg); }
.hero .btn:not(.btn--solid) { border-color: var(--on-scene); color: var(--on-scene); background: oklch(0.98 0.02 95 / 0.55); }
:root[data-theme='dark'] .hero .btn:not(.btn--solid) { background: oklch(0.2 0.04 280 / 0.45); }
.hero .btn--solid { background: var(--on-scene); border-color: var(--on-scene); color: var(--sky-1); }
:root[data-theme='dark'] .hero .btn--solid { background: var(--orange); border-color: var(--orange); color: var(--walnut); }

/* Narrow screens: the text would sit on the house, so the panorama becomes a strip under the copy. */
@media (max-width: 58rem) {
  .hero { --strip: max(24rem, 56.25vw); background: var(--sky-0); }
  .hero__scene { inset: auto 0 0 0; height: var(--strip); }
  .hero__body { padding-block-end: calc(var(--strip) - 3rem); }
  .scene { mask-image: linear-gradient(transparent, #000 14%); }
  /* the grain covers the whole hero here, otherwise it would end in a visible line above the strip */
  .hero__scene::after { display: none; }
  .hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--paper) 0 0 / 256px; mix-blend-mode: overlay; opacity: 0.85; }
}

#main { overflow-x: clip; }

/* ---------- Menu shell: tools and the terrace ladder on the left, dishes on the right ---------- */
.shell { padding-block: var(--sp-xl) var(--sp-2xl); }
.search { position: relative; }
.search input {
  width: 100%; min-height: 3.25rem; padding: 0.4rem 0.25rem 0.4rem 2rem; background: transparent; color: inherit; text-overflow: ellipsis;
  border: 0; border-block-end: 2px solid var(--text); border-radius: 0; font: 500 1.125rem var(--font); transition: border-color 0.2s, box-shadow 0.2s;
}
.search input::placeholder { color: var(--text-2); opacity: 1; }
.search input:focus { outline: none; border-block-end-color: var(--accent); box-shadow: 0 2px 0 var(--accent); }
.search input::-webkit-search-cancel-button { display: none; }
.search > [data-icon] { pointer-events: none; color: var(--text-2); }
.search > [data-icon] svg { width: 100%; height: 100%; }
.search .clear { position: absolute; inset-inline-end: 0; 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: 0.3rem; background: transparent; }
.search .clear:hover { background: var(--rice-200); }
.search[data-has='true'] .clear { display: inline-flex; }
.search[data-has='true'] input { padding-inline-end: 2.5rem; }

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-block-start: var(--sp-md); }
/* Filters are hang tags: a punched hole, a square corner. */
.toggle {
  position: relative; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0.3rem 0.85rem 0.3rem 1.8rem;
  border: 1.5px solid var(--line-strong); border-radius: 0.3rem; background: var(--surface); font-size: var(--t-sm); font-weight: 700;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}
.toggle::before { content: ''; position: absolute; inset-inline-start: 0.65rem; inset-block-start: 50%; translate: 0 -50%; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.toggle svg { width: 1.1rem; height: 1.1rem; flex: none; }
.toggle:hover { border-color: var(--text); }
.toggle[aria-pressed='true'] { background: var(--text); color: var(--bg); border-color: var(--text); }
.toggle[aria-pressed='true']::before { background: var(--accent); box-shadow: none; }
.toggle:active { transform: scale(0.96); }
.count { margin-inline-start: auto; font-size: var(--t-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
.legend { display: grid; gap: 0.3rem; margin-block-start: 0.75rem; font-size: var(--t-sm); color: var(--text-2); min-height: 1.65rem; }
.legend li { display: flex; align-items: center; gap: 0.5rem; }

/* Rail: on phones a strip of text tabs stuck to the top; on wide screens a ladder of terraces. */
.rail { position: sticky; inset-block-start: 0; z-index: 30; margin-block-start: var(--sp-md); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); background: var(--bg); box-shadow: 0 1px 0 var(--line), 0 0.9rem 1rem -1rem var(--shadow); }
.rail__scroll {
  display: flex; align-items: center; gap: 0.25rem; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1rem, #000 calc(100% - 1.5rem), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 1rem, #000 calc(100% - 1.5rem), transparent 100%);
}
.rail__scroll::-webkit-scrollbar { display: none; }
.rail__group { display: contents; }
.rail__world { flex: none; padding-block: 0.6rem; padding-inline: 0.5rem 0.15rem; font-family: var(--hand); font-weight: 700; font-size: 1.45rem; line-height: 1; color: var(--accent-ink); text-decoration: none; white-space: nowrap; }
.rail__group:not(:first-child) .rail__world { margin-inline-start: 0.75rem; }
.rail__world[data-on] { color: var(--text); }
.step { flex: none; padding: 0.8rem 0.7rem; font-weight: 700; font-size: 1.0625rem; color: var(--text-2); text-decoration: none; white-space: nowrap; box-shadow: inset 0 -3px 0 transparent; transition: color 0.2s, box-shadow 0.2s; }
.step:hover { color: var(--text); }
.step[aria-current='true'] { color: var(--text); box-shadow: inset 0 -3px 0 var(--accent); }
.step::before { content: none; }

#menu-root { min-width: 0; max-width: 47rem; }
.js #menu-root:empty { min-height: 100svh; }

@media (min-width: 64rem) {
  .shell { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 4rem; align-items: start; }
  .side { position: sticky; inset-block-start: 1.25rem; max-height: calc(100svh - 2.5rem); overflow-y: auto; scrollbar-width: thin; padding-block-end: 1rem; padding-inline-end: 0.5rem; }
  .rail { position: static; margin: var(--sp-lg) 0 0; padding: 0; background: none; box-shadow: none; }
  .rail__scroll { display: block; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .rail__group { display: block; margin-block-end: 0.85rem; }
  .rail__world { display: block; padding: 0; margin-block-end: 0; font-size: 1.6rem; }
  .rail__group:not(:first-child) .rail__world { margin-inline-start: 0; }
  .step { position: relative; display: block; margin-inline-start: calc(var(--n) * 0.6rem); padding: 0.2rem 0.5rem 0.2rem 1.4rem; border-radius: 0.25rem; box-shadow: none; }
  .step:hover { background: var(--rice-200); }
  .step::before { content: ''; position: absolute; inset-inline-start: 0.4rem; inset-block-start: 50%; width: 0.7rem; height: 0.36rem; border-radius: 50%; background: var(--accent); translate: 0 -50%; rotate: -32deg; opacity: 0; transition: opacity 0.2s; }
  .step[aria-current='true'] { box-shadow: none; font-weight: 900; }
  .step[aria-current='true']::before { opacity: 1; }
}
@media (max-width: 63.999rem) {
  .side { display: contents; }
  .filters { margin-block-end: 0; }
  #menu-root { margin-block-start: var(--sp-md); }
}

/* ---------- World headers: a strip of terraces, drawn for each part of the menu ---------- */
.world + .world { margin-block-start: var(--sp-2xl); }
.world[data-world='warung'] { --w1: oklch(0.6 0.11 160); --w2: oklch(0.7 0.145 142); --w3: oklch(0.8 0.16 125); }
.world[data-world='western'] { --w1: oklch(0.58 0.08 200); --w2: oklch(0.67 0.105 178); --w3: oklch(0.77 0.135 150); }
.world[data-world='sweet'] { --w1: oklch(0.72 0.11 105); --w2: oklch(0.8 0.14 95); --w3: oklch(0.87 0.14 88); }
.world[data-world='drinks'] { --w1: oklch(0.52 0.09 185); --w2: oklch(0.62 0.115 168); --w3: oklch(0.74 0.14 148); }
:root[data-theme='dark'] .world[data-world='warung'] { --w1: oklch(0.36 0.075 200); --w2: oklch(0.4 0.09 170); --w3: oklch(0.45 0.1 150); }
:root[data-theme='dark'] .world[data-world='western'] { --w1: oklch(0.34 0.07 225); --w2: oklch(0.38 0.08 200); --w3: oklch(0.43 0.09 175); }
:root[data-theme='dark'] .world[data-world='sweet'] { --w1: oklch(0.42 0.08 90); --w2: oklch(0.47 0.1 85); --w3: oklch(0.52 0.11 80); }
:root[data-theme='dark'] .world[data-world='drinks'] { --w1: oklch(0.32 0.07 200); --w2: oklch(0.37 0.085 180); --w3: oklch(0.42 0.1 160); }
.world__head { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-start; height: clamp(9.5rem, 26vw, 13rem); padding: 1.15rem 1.4rem; border-radius: 0.5rem; margin-block-end: var(--sp-md); color: var(--on-band); scroll-margin-top: calc(var(--rail-h) + 1rem); }
.world__art { position: absolute; inset: 0; z-index: -2; background: radial-gradient(22rem 11rem at 82% 22%, var(--bloom), transparent 70%), linear-gradient(var(--band-0), var(--band-1) 66%); }
.world__art::after { content: ''; position: absolute; inset: 0; background: var(--paper) 0 0 / 256px; mix-blend-mode: overlay; opacity: 0.85; }
.world__art svg { width: 100%; height: 100%; }
.b-sky { fill: none; }
.b-ridge { fill: var(--mtn-far); }
/* the palms at the far end of a band would sit on its text on narrow screens */
@media (max-width: 42rem) { .world__art .b-palms { display: none; } }
.b-f1 { fill: var(--w1); } .b-f2 { fill: var(--w2); } .b-f3 { fill: var(--w3); }
.bsh { fill: none; stroke: var(--shade); stroke-linejoin: round; stroke-linecap: round; }
.bsh.s1 { stroke-width: 22; opacity: 0.05; } .bsh.s2 { stroke-width: 13; opacity: 0.08; } .bsh.s3 { stroke-width: 5; opacity: 0.14; }
.bhl { fill: none; stroke: var(--edge); stroke-width: 1.4; opacity: 0.5; }
.b-water { fill: var(--water-hi); opacity: 0.6; }
.world__plant { position: absolute; z-index: -1; inset-inline-end: 5%; inset-block-end: -0.4rem; width: clamp(3.5rem, 11vw, 6.5rem); --sprig-a: var(--orange); --sprig-b: var(--cream); --sprig-blade: var(--leaf-deep); --sprig-stem: var(--leaf-deep); }
.sprig { width: 100%; height: auto; overflow: visible; transform-origin: 50% 100%; filter: drop-shadow(1px 3px 3px oklch(0.2 0.04 160 / 0.28)); }
.sprig .br { fill: none; stroke: var(--sprig-stem, var(--leaf-deep)); stroke-width: 1.1; stroke-linecap: round; opacity: 0.7; }
.sprig .stem { fill: none; stroke: var(--sprig-stem, var(--leaf-deep)); stroke-width: 3.4; stroke-linecap: round; }
.sprig .lf { transform-box: fill-box; transform-origin: 50% 50%; }
.sprig .bl { fill: var(--sprig-blade, var(--leaf-deep)); transform-origin: 50% 100%; }
.sprig .ga { fill: var(--sprig-a, var(--orange)); }
.sprig .gb { fill: var(--sprig-b, var(--cream)); }
.world__txt { max-width: 30rem; }
.world__title { font-size: clamp(2.25rem, 3vw + 1.25rem, 3.75rem); font-weight: 900; line-height: 1; letter-spacing: -0.01em; }
.world__desc { margin-block-start: 0.4rem; font-family: var(--hand); font-weight: 700; font-size: 1.65rem; line-height: 1.05; rotate: -0.5deg; transform-origin: 0 50%; }
:lang(hi) .world__title { line-height: 1.25; }

/* ---------- Sections & dishes ---------- */
.sec { padding-block-start: var(--sp-xl); scroll-margin-top: calc(var(--rail-h) + 1rem); }
.world__head + .sec { padding-block-start: var(--sp-lg); }
.snap--head { --snap: 7.75rem; order: 3; margin-inline-start: auto; rotate: 1deg; }
.sec__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-block-end: 0.5rem; }
.sec__head h3 { font-size: clamp(1.75rem, 1.5vw + 1.25rem, 2.35rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.005em; }
.sec__head h3::after { content: ''; display: block; width: 3.25rem; height: 0.5rem; margin-block-start: 0.4rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 8'%3E%3Cpath d='M1 5c4-5 8-5 12 0s8 5 12 0 8-5 12 0 8 5 12 0' fill='none' stroke='%23e8823a' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; }
.flat { display: inline-flex; align-items: center; gap: 0.6rem; margin-block-start: 0.3rem; }
.flat small { font-family: var(--hand); font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--accent-ink); }

.items { display: grid; }
.item { --snap: clamp(5.25rem, 21vw, 7.25rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: start; padding-block: 1rem; border-block-end: 1px dashed var(--line-strong); min-width: 0; }
.item--pic { grid-template-columns: var(--snap) minmax(0, 1fr) auto; column-gap: clamp(0.9rem, 3vw, 1.4rem); padding-block: 1.25rem; }
.item__main { min-width: 0; }
/* Photos are snapshots stuck on the page, like the ones on the printed menu. */
.snap { width: var(--snap); aspect-ratio: 1; padding: 0.3rem; background: var(--sticker); border-radius: 0.15rem; rotate: -1.1deg; box-shadow: 0 0 0 1px var(--line), 0 0.6rem 0.9rem -0.6rem var(--shadow); transition: rotate 0.4s var(--ease), scale 0.4s var(--ease); }
/* While a lazy photo is on its way the frame shows a muted print, not a blank white square. */
.snap img { width: 100%; height: 100%; object-fit: cover; background: color-mix(in oklch, var(--line) 70%, var(--sticker)); }
.item:nth-child(even) .snap { rotate: 0.8deg; }
.item:nth-child(3n) .snap { rotate: -0.4deg; }
.item__name { font-size: 1.25rem; font-weight: 700; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }
.tags { display: inline-flex; gap: 0.3rem; margin-inline-start: 0.45rem; vertical-align: -0.28em; }
.tag { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 0.3rem; }
.tag svg { width: 0.95rem; height: 0.95rem; }
.tag--fav { background: var(--orange); color: var(--walnut); }
.tag--ham { background: var(--rice-200); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.item__orig { font-size: var(--t-sm); color: var(--text-2); }
.item__desc { margin-block-start: 0.2rem; max-width: 34rem; font-size: 1.0625rem; line-height: 1.42; color: var(--text-2); }
/* Prices are handwritten stickers, as on the printed menu. */
.price {
  position: relative; align-self: start; min-width: 3.5rem; padding: 0.1em 0.42em 0.16em; border-radius: 0.2rem; rotate: -1deg; text-align: center; white-space: nowrap;
  background: var(--sticker); color: var(--pen); font-family: var(--hand); font-weight: 700; font-size: 1.9rem; line-height: 1;
  box-shadow: 0 0 0 1px var(--line), 0 0.45rem 0.6rem -0.45rem var(--shadow);
}
.price i { margin-inline-start: 0.05em; font-size: 0.62em; font-style: normal; }
.price::before { content: ''; position: absolute; inset-block-start: -0.32rem; inset-inline-start: 50%; width: 1.5rem; height: 0.62rem; translate: -50% 0; rotate: -2deg; background: oklch(0.88 0.05 90 / 0.6); }
.item:nth-child(even) > .price { rotate: 0.7deg; }
.price--sm { min-width: 0; padding: 0.04em 0.36em 0.12em; font-size: 1.4rem; box-shadow: 0 0 0 1px var(--line); }
.price--sm::before, .price--flat::before { content: none; }
.price--flat { font-size: 2.5rem; rotate: -1.5deg; padding-inline: 0.5em; }
.variants { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-block-start: 0.6rem; }
.var { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: var(--t-sm); }
@media (hover: hover) and (pointer: fine) { .item--pic:hover .snap { rotate: 0deg; scale: 1.05; } }

.empty { padding-block: var(--sp-2xl); text-align: center; }
.empty h3 { font-size: 2rem; font-weight: 900; }
.empty p { color: var(--text-2); margin-block: 0.5rem 1.5rem; }

/* ---------- The sign at the gate ---------- */
.gate { display: grid; gap: var(--sp-lg) 3rem; align-items: center; padding-block: var(--sp-lg) calc(clamp(5rem, 11vw, 9rem) + var(--sp-lg)); }
@media (min-width: 48rem) { .gate { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); } }
.gate__sign { padding: 1.1rem 1.4rem 1.35rem; border-radius: 0.35rem; rotate: -0.6deg; text-align: center; color: var(--cream); background: var(--planks), var(--board); box-shadow: 0 1.4rem 1.8rem -1.2rem var(--shadow), inset 0 0 0 0.2rem oklch(0.34 0.045 55), inset 0 0 0 0.5rem oklch(0.2 0.03 50), inset 0 0 0 0.56rem oklch(0.5 0.07 60 / 0.55); }
.gate__the { font-family: var(--hand); font-weight: 700; font-size: 1.8rem; line-height: 1; color: var(--orange); }
.gate__w { margin-block: 0.15rem 0.6rem; padding-block-end: 0.5rem; border-block-end: 2px solid oklch(0.96 0.03 92 / 0.3); font-weight: 900; font-size: 1.5rem; letter-spacing: 0.08em; text-transform: uppercase; }
.gate__sign ul { display: grid; gap: 0.1rem; font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.06em; text-transform: uppercase; }
.gate__note h2 { font-size: var(--t-lg); font-weight: 900; line-height: 1.1; }
.gate__note p { margin-block-start: 0.5rem; max-width: 34rem; color: var(--text-2); }

/* ---------- Reviews: a guest book on the water ---------- */
.reviews, .visit { position: relative; isolation: isolate; overflow-x: clip; }
/* Section edges are drawn, not masked: terraces sloping into the water above the reviews, a treeline above the dark board. */
.edge { position: absolute; inset-inline: 0; z-index: -1; pointer-events: none; }
.edge svg { display: block; width: 100%; height: 100%; }
.edge--paddy { inset-block-start: calc(-1 * clamp(5rem, 11vw, 9rem) + 1px); height: calc(clamp(5rem, 11vw, 9rem) + 3px); }
.edge--trees { inset-block-start: calc(-1 * clamp(7rem, 15vw, 13rem) + 1px); height: calc(clamp(7rem, 15vw, 13rem) + 3px); }
.ed.e0 { fill: var(--e0); } .ed.e1 { fill: var(--e1); } .ed.e2 { fill: var(--rev-top); }
.tl { fill: var(--board); } .tl-far { fill: var(--tl-far); }
.edge--trees .palm * { fill: var(--board); stroke: none; }
.edge--trees .far .palm * { fill: var(--tl-far); }
.edge--trees .palm .rib { fill: none; stroke: var(--board); stroke-width: 1.5; stroke-linecap: round; }
.edge--trees .far .palm .rib { stroke: var(--tl-far); }
.edge--trees .palm .rings, .edge--trees .palm .trunk-hi { display: none; }
/* Water in a flooded paddy: the sky's haze above, jade below, a few faint streaks where the wind ruffles it, and paper under it all. */
.reviews { background-color: var(--rev-top); background-image: var(--paper), var(--mottle), repeating-linear-gradient(180deg, transparent 0 2.7rem, var(--streak) 2.7rem 2.82rem), linear-gradient(var(--rev-top), var(--rev-bot)); background-size: 256px, 1024px, auto, auto; background-blend-mode: soft-light, soft-light, normal, normal; color: var(--rev-ink); padding-block: var(--sp-lg) calc(clamp(7rem, 15vw, 13rem) + var(--sp-md)); --sprig-a: oklch(0.76 0.14 85); --sprig-b: oklch(0.9 0.08 95); --sprig-blade: var(--leaf-deep); --sprig-stem: var(--leaf-deep); }
:root[data-theme='dark'] .reviews { --sprig-a: oklch(0.62 0.1 85); --sprig-b: oklch(0.74 0.07 92); --sprig-blade: oklch(0.5 0.12 150); --sprig-stem: oklch(0.55 0.12 150); }
.reviews__sprig { position: absolute; z-index: -1; inset-inline-end: -1%; inset-block-start: 0.5rem; width: clamp(8rem, 20vw, 14rem); opacity: 0.95; }
@media (max-width: 40rem) { .reviews__sprig { width: 5.5rem; inset-block-start: 0; inset-inline-end: 0; } }
.reviews h2 { max-width: 12ch; font-size: clamp(2.5rem, 4vw + 1rem, 4.25rem); font-weight: 900; line-height: 1; letter-spacing: -0.01em; }
.reviews__meta { display: grid; gap: var(--sp-xl); margin-block-start: var(--sp-xl); }
@media (min-width: 52rem) { .reviews__meta { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; } }
.score { display: flex; align-items: center; gap: 1.5rem; }
.score__num { flex: none; font-family: var(--hand); font-weight: 700; font-size: clamp(5.25rem, 12vw, 8rem); line-height: 0.8; color: var(--accent-ink); rotate: -2deg; min-width: 1.9ch; }
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; font-weight: 700; font-size: 1.125rem; }
.ears { display: inline-flex; gap: 0.05rem; color: var(--leaf-deep); }
.ears svg { width: 1.85rem; height: 1.85rem; }
.ear-stem { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.ear-grains ellipse { fill: var(--orange); }
:root[data-theme='dark'] .ears { color: oklch(0.8 0.1 150); }
.dist { display: grid; gap: 0.3rem; max-width: 22rem; margin-block-start: 0.9rem; font-size: var(--t-sm); 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.6rem; border-radius: 0.15rem; background: color-mix(in oklch, var(--rev-ink) 14%, transparent); overflow: hidden; }
.dist .bar i { display: block; height: 100%; width: var(--w); background: var(--leaf-deep); }
:root[data-theme='dark'] .dist .bar i { background: oklch(0.75 0.12 150); }
.dist dt { font-weight: 700; text-align: end; }
.dist dd { text-align: end; opacity: 0.85; }
.topics__label { font-weight: 700; margin-block-end: 0.6rem; }
.topics { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.topics li { display: inline-flex; gap: 0.5em; align-items: baseline; padding: 0.25rem 0.75rem 0.35rem; border-radius: 0.2rem; background: var(--sticker); color: var(--pen); font-weight: 700; box-shadow: 0 0 0 1px var(--line), 0 0.4rem 0.6rem -0.45rem var(--shadow); rotate: -0.7deg; }
.topics li:nth-child(even) { rotate: 0.6deg; }
.topics li b { font-family: var(--hand); font-size: 1.3rem; line-height: 1; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.quotes { display: grid; gap: var(--sp-xl) 3.5rem; margin-block-start: var(--sp-2xl); }
@media (min-width: 48rem) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quote--lead { grid-column: 1 / -1; } }
.quote p { max-width: 38ch; font-size: 1.3rem; line-height: 1.42; }
.quote--lead blockquote::before { content: '\201C'; display: block; height: 2.4rem; font-family: var(--hand); font-weight: 700; font-size: 7rem; line-height: 0.9; color: var(--orange); }
.quote--lead p { max-width: 20ch; font-size: clamp(2.1rem, 4vw + 0.5rem, 3.75rem); font-weight: 900; line-height: 1.04; letter-spacing: -0.01em; text-wrap: balance; }
.quote footer { display: flex; align-items: center; gap: 0.6rem; margin-block-start: 0.8rem; }
.quote footer .ears svg { width: 1.3rem; height: 1.3rem; }
.quote .who { font-family: var(--hand); font-weight: 700; font-size: 1.55rem; line-height: 1; color: var(--accent-ink); }
.quote footer small { font-size: var(--t-sm); opacity: 0.8; }
.reviews__foot { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; margin-block-start: var(--sp-xl); }
.reviews__foot p { max-width: 30rem; font-size: var(--t-sm); opacity: 0.9; }
.reviews .btn { border-color: var(--rev-ink); color: var(--rev-ink); }
.reviews .btn:hover { background: var(--rev-ink); color: var(--rev-bg); }

/* ---------- Visit: the wooden board ---------- */
.visit { padding-block: var(--sp-xl) var(--sp-3xl); color: var(--cream); background: var(--paper) 0 0 / 256px, repeating-linear-gradient(90deg, transparent 0 8rem, oklch(0.1 0.01 60 / 0.35) 8rem calc(8rem + 2px)), var(--board); background-blend-mode: soft-light, normal, normal; }
.visit__grid { display: grid; gap: var(--sp-2xl) 4rem; align-items: center; }
@media (min-width: 56rem) { .visit__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.visit h2 { max-width: 9ch; font-size: clamp(2.5rem, 4vw + 1rem, 4.25rem); font-weight: 900; line-height: 1; letter-spacing: -0.01em; }
.visit .lead { margin-block-start: var(--sp-md); max-width: 26rem; font-size: var(--t-md); line-height: 1.38; color: oklch(0.9 0.03 90); }
.facts { display: grid; gap: 1rem; max-width: 34rem; margin-block-start: var(--sp-xl); }
.fact { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); gap: 0.25rem 1rem; align-items: baseline; padding-block-end: 1rem; border-block-end: 1px dashed oklch(0.96 0.03 92 / 0.28); }
.fact dt { font-family: var(--hand); font-weight: 700; font-size: 1.55rem; line-height: 1; color: var(--orange); }
.fact dd { font-size: 1.125rem; font-weight: 500; }
/* Taller hit area for thumbs; the negative margin keeps the line where it was. */
.fact a { display: inline-block; padding-block: 0.4rem; margin-block: -0.4rem; text-underline-offset: 0.22em; }
.visit__note { max-width: 34rem; margin-block-start: 0.75rem; font-size: 1.0625rem; color: oklch(0.9 0.03 90); }
.visit .cta { margin-block-start: var(--sp-lg); }
.visit .btn { color: var(--cream); }
.visit .btn--solid { background: var(--orange); border-color: var(--orange); color: var(--walnut); }
.visit .btn:not(.btn--solid):hover { background: var(--cream); color: var(--board); }

.map { position: relative; display: block; padding: 0.6rem; border-radius: 0.25rem; rotate: 0.7deg; background: var(--rice-50); text-decoration: none; color: var(--walnut); box-shadow: 0 1.8rem 2.6rem -1.2rem oklch(0.05 0.01 60 / 0.8); transition: rotate 0.4s var(--ease), scale 0.4s var(--ease); }
.map:hover { rotate: 0deg; scale: 1.02; }
.map__art { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.map__art svg { width: 100%; height: 100%; }
.map::before { content: ''; position: absolute; inset: 0.6rem; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent 49.6%, oklch(0.2 0.03 70 / 0.16) 50%, transparent 50.5%); }
.map__stamp { position: absolute; z-index: 2; inset-inline-end: 1.2rem; inset-block-end: 1.2rem; padding: 0.4rem 0.8rem 0.45rem; border-radius: 0.25rem; rotate: -1.5deg; background: var(--orange); color: var(--walnut); font-weight: 900; font-size: 1.0625rem; line-height: 1.2; box-shadow: 0 0.5rem 0.8rem -0.5rem oklch(0.1 0.02 60 / 0.8); }
.m-land { fill: var(--t2); }
.m-ter.t1 { fill: var(--t1); } .m-ter.t2 { fill: var(--t2); } .m-ter.t3 { fill: var(--t3); } .m-ter.t4 { fill: var(--t4); } .m-ter.t5 { fill: var(--t5); }
.m-roadsh { fill: none; stroke: var(--shade); stroke-width: 15; stroke-linecap: round; opacity: 0.22; translate: 0 3px; }
.m-road { fill: none; stroke: var(--rice-50); stroke-width: 11; stroke-linecap: round; }
.m-road2 { fill: none; stroke: oklch(0.7 0.08 80); stroke-width: 1.6; stroke-dasharray: 7 8; stroke-linecap: round; }
.m-ripple { fill: none; stroke: var(--orange); stroke-width: 2; opacity: 0.55; }
.m-pinsh { fill: var(--shade); opacity: 0.3; }
.m-pinbody { fill: var(--orange); } .m-pinhi { fill: oklch(0.97 0.05 75); opacity: 0.4; } .m-pinhole { fill: var(--board); }

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

/* ---------- Footer ---------- */
.foot { padding-block: 2rem 3rem; background: var(--board-2) var(--paper) 0 0 / 256px; background-blend-mode: soft-light; color: var(--cream); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; font-size: var(--t-sm); }
.foot p { max-width: 40rem; opacity: 0.88; }
.totop { position: fixed; inset-inline-end: 1rem; inset-block-end: max(1rem, env(safe-area-inset-bottom)); z-index: 50; width: 3.1rem; height: 3.1rem; display: none; align-items: center; justify-content: center; border: 2px solid var(--text); border-radius: 0.4rem; background: var(--surface); color: var(--text); box-shadow: 0 0.8rem 1.4rem -0.8rem var(--shadow); }
.totop[data-show='true'] { display: inline-flex; }
.totop svg { width: 1.3rem; height: 1.3rem; }

@media print {
  .rail, .top, .totop, .hero__scene, .world__plant, .reviews__sprig, .map, .progress { display: none !important; }
  .hero, .reviews, .visit, .world__head { background: none !important; color: #000 !important; }
}