/* ───────── tokens ───────── */
:root {
  --lacquer: #6E0910;      /* table: deep version of the logo headband */
  --lacquer-hi: #A3121C;   /* logo red */
  --stone: #151413;        /* ink-black coated stock */
  --stone-hi: #23211F;
  --rice: #F2ECE2;         /* text on stone */
  --rice-dim: rgba(242, 236, 226, .58);
  --sesame: #E4B183;       /* prices — lifted from the peach backdrop of the photos */
  --paper: #FBFAF7;        /* cover */
  --sumi: #121110;         /* ink on paper */

  --serif: "Noto Serif Georgian", "Noto Serif", Georgia, serif;   /* Noto Serif / Sans carry the Latin and Cyrillic */
  --sans: "Noto Sans Georgian", "Noto Sans", system-ui, sans-serif;

  --pw: 400px;             /* page width, set by app.js */
  --ph: 600px;             /* page height (2:3) */
  --flip: 650ms;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
/* the browser's own bars and overscroll take this colour: keep them the dark of the table, never white */
html { background: #121110; color-scheme: dark; }
body {
  background:
    radial-gradient(120% 80% at 20% 0%, #8E0D17 0%, transparent 60%),
    radial-gradient(90% 70% at 90% 100%, #4B050A 0%, transparent 70%),
    var(--lacquer);
  color: var(--rice);
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
/* silk sheen on the table (baked texture; no blend mode, so animations don't repaint the screen) */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: url("tex-silk.png");
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--sesame); outline-offset: 3px; }

/* ───────── stage + book ───────── */
.stage {
  position: fixed; inset: 60px 0 0 0;
  display: grid; place-items: center;
  perspective: 4200px;
  touch-action: pan-y;
}
.book {
  position: relative; user-select: none; -webkit-user-select: none;
  width: calc(var(--pw) * 2); height: var(--ph);
  transform-style: preserve-3d;
  transition: transform var(--flip) cubic-bezier(.45,.05,.25,1);
}
.book[data-closed="front"] { transform: translateX(calc(var(--pw) * -.5)); }
.book[data-closed="back"]  { transform: translateX(calc(var(--pw) * .5)); }

.half, .leaf { position: absolute; top: 0; width: var(--pw); height: var(--ph); }
.half-l { left: 0; }
.half-r { left: var(--pw); }
.leaf { display: none; z-index: 5; pointer-events: none; }
.leaf.on { display: block; }
/* the turning sheet: two fold-space clips (front, folded-over back) over a shadow on the page beneath */
.f-under { position: absolute; inset: 0; overflow: hidden; }
.f-clip { position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: 0 0; will-change: transform; }
.f-page { position: absolute; left: 0; top: 0; width: var(--pw); height: var(--ph); overflow: hidden; transform-origin: 0 0; will-change: transform; }
.f-drop, .f-crease, .f-gloss { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; z-index: 9; will-change: transform, opacity; }
/* shadow the lifted sheet throws on the page it uncovers */
.f-drop { background: linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.28) 22%, rgba(0,0,0,.08) 60%, transparent); }
/* the front bends up into the fold */
.f-crease { background: linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,.12) 30%, rgba(255,255,255,.05) 55%, transparent); }
/* coated paper rolling over: a dark crease, a bright specular band, then the sheet lying flatter */
.f-gloss {
  background: linear-gradient(90deg,
    rgba(0,0,0,.5) 0, rgba(0,0,0,.2) 2%, rgba(255,255,255,0) 5%,
    rgba(255,255,255,.34) 10%, rgba(255,255,255,.5) 12.5%, rgba(255,255,255,.14) 18%,
    rgba(255,255,255,0) 32%, rgba(0,0,0,0) 70%, rgba(0,0,0,.16) 100%);
}
/* soft shadow around the folded-over sheet */
.f-lift { position: absolute; left: 0; top: 0; width: var(--pw); height: var(--ph); transform-origin: 0 0; will-change: transform, opacity;
  box-shadow: 0 0 24px rgba(0,0,0,.45), 0 0 4px rgba(0,0,0,.35); }

/* page-edge stacks: thickness follows reading progress */
.edges { position: absolute; top: 3px; bottom: 3px; border-radius: 2px; }
.edges-l { right: 100%; width: calc(var(--lt, 1) * 1px);
  background: repeating-linear-gradient(90deg, #3a3836 0 1px, #24221f 1px 2px); }
.edges-r { left: 100%; width: calc(var(--rt, 1) * 1px);
  background: repeating-linear-gradient(90deg, #24221f 0 1px, #3a3836 1px 2px); }
.book[data-closed="front"] .edges-l, .book[data-closed="back"] .edges-r, .book[data-mode="single"] .edges-l { display: none; }

/* drop shadow of the whole book onto the table */
.half:not(:empty)::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  box-shadow: 0 30px 60px rgba(0,0,0,.45), 0 8px 18px rgba(0,0,0,.35);
}

/* single-page mode: one recto, spine on the left */
.book[data-mode="single"] { width: var(--pw); }
.book[data-mode="single"] .half-l { display: none; }
.book[data-mode="single"] .half-r { left: 0; }
.book[data-mode="single"] .leaf { left: 0; }

/* ───────── page + golden canon grid ─────────
   2:3 page; Tschichold / Van de Graaf canon:
   inner = W/9, top = H/9, outer = 2W/9, bottom = 2H/9  →  text block = 6/9 × 6/9.
   The page takes whatever shape the screen gives it, and the canon is measured on the
   real width (cqw) and height (cqh). Type and spacing use --u, which follows the page's
   limiting side, so a page holds the same content whatever its proportions.          */
.page {
  position: absolute; inset: 0; overflow: hidden;
  container-type: size;
  background:
    radial-gradient(70% 50% at 60% 30%, var(--stone-hi), transparent 70%),
    var(--stone);
  color: var(--rice);
  --in: 11.111cqw; --out: 22.222cqw; --top: 11.111cqh; --bot: 22.222cqh;
  --u: min(1cqw, .6667cqh);
}
.page.photo-page, .page.welcome {
  background:
    var(--stone);
}
.page[data-side="r"] { border-radius: 0 3px 3px 0; }
.page[data-side="l"] { border-radius: 3px 0 0 3px; }
/* stone grain sits over everything on the page, photos included, so it never breaks */
.page:not(.paper)::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: url("tex-stone.png");
}
/* gutter shadow at the spine */
.page::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: calc(9 * var(--u)); pointer-events: none; z-index: 3;
}
.page[data-side="r"]::after { left: 0;  background: linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,.12) 40%, transparent); }
.page[data-side="l"]::after { right: 0; background: linear-gradient(270deg, rgba(0,0,0,.5), rgba(0,0,0,.12) 40%, transparent); }

.block { position: absolute; top: var(--top); bottom: var(--bot); display: flex; flex-direction: column; z-index: 2; }
.page[data-side="r"] .block { left: var(--in);  right: var(--out); }
.page[data-side="l"] .block { left: var(--out); right: var(--in); }

.folio {
  position: absolute; bottom: calc(var(--bot) * .5); z-index: 2;
  font: 500 calc(2.6 * var(--u))/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--rice-dim);
}
.page[data-side="r"] .folio { right: var(--out); transform: translateX(50%); }
.page[data-side="l"] .folio { left: var(--out); transform: translateX(-50%); }

/* canon construction overlay */
.canon { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 9; pointer-events: none; opacity: 0; transition: opacity .3s; }
body.show-grid .canon { opacity: 1; }
.canon * { fill: none; stroke: #4FC3F7; stroke-width: 1; vector-effect: non-scaling-stroke; }
.canon .tb { stroke: #FFD54F; stroke-dasharray: 4 3; }
.page[data-side="l"] .canon { transform: scaleX(-1); }

/* ───────── type ───────── */
.cat-title {
  margin: 0; font: 700 calc(9.5 * var(--u))/0.95 var(--serif); font-stretch: 62.5%;
  letter-spacing: .01em;
}
.brush { display: block; overflow: hidden; width: calc(46 * var(--u)); height: calc(2.6 * var(--u)); fill: var(--lacquer-hi); margin: calc(1.4 * var(--u)) 0 0 calc(-1 * var(--u)); }
.cat-part { font: 400 calc(3 * var(--u))/1 var(--sans); color: var(--rice-dim); margin: calc(2 * var(--u)) 0 0; }

.items { list-style: none; margin: calc(5 * var(--u)) 0 0; padding: 0; display: flex; flex-direction: column; gap: calc(2.4 * var(--u)); }
.item {
  display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer;
  position: relative;
}
.item-row { display: flex; align-items: baseline; gap: calc(1.6 * var(--u)); }
.item-name { font: 600 calc(4.6 * var(--u))/1.15 var(--sans); font-stretch: 80%; transition: color .2s; }
.item-lead { flex: 1; border-bottom: 1px dotted rgba(242,236,226,.28); transform: translateY(calc(-.8 * var(--u))); min-width: calc(3 * var(--u)); }
.item-price { font: 600 calc(4.2 * var(--u))/1 var(--sans); font-stretch: 80%; color: var(--sesame); font-variant-numeric: tabular-nums; white-space: nowrap; }
.item-desc {
  margin: calc(.9 * var(--u)) 0 0; font: 400 calc(3.15 * var(--u))/1.38 var(--sans); font-stretch: 87.5%; color: var(--rice-dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.item[aria-current="true"] .item-name { color: var(--sesame); }
.item[aria-current="true"]::before {
  content: ""; position: absolute; top: calc(.9 * var(--u)); width: calc(1.2 * var(--u)); height: calc(3.6 * var(--u)); background: var(--lacquer-hi);
  border-radius: 1px;
}
.page[data-side="r"] .item[aria-current="true"]::before { left: calc(-3.4 * var(--u)); }
.page[data-side="l"] .item[aria-current="true"]::before { left: calc(-3.4 * var(--u)); }
@media (hover: hover) { .item:hover .item-name { color: var(--sesame); } }

/* ───────── photo page ───────── */
.photo {
  position: absolute; left: 0; right: 0; top: 0; height: min(50cqh, 66cqw); margin: 0; z-index: 1; overflow: hidden;
}
.photo::after { /* photo sinks into the stone */
  content: ""; position: absolute; inset: auto 0 0 0; height: calc(34 * var(--u)); z-index: 1;
  background: linear-gradient(rgba(21,20,19,0), rgba(21,20,19,.6) 45%, rgba(21,20,19,.95) 80%, var(--stone));
}
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s ease; }
.photo img.out { opacity: 0; }
.feature { margin-top: auto; }
.feature-name { margin: 0; font: 700 calc(7.2 * var(--u))/1 var(--serif); font-stretch: 70%; text-wrap: balance; }
.feature .brush { width: calc(30 * var(--u)); height: calc(2 * var(--u)); }
.feature-desc { margin: calc(2.4 * var(--u)) 0 0; font: 400 calc(3.15 * var(--u))/1.45 var(--sans); font-stretch: 87.5%; color: var(--rice-dim); }
.feature-meta { margin: calc(2.4 * var(--u)) 0 0; display: flex; gap: calc(3 * var(--u)); align-items: baseline; }
.feature-price { font: 600 calc(5.4 * var(--u))/1 var(--sans); font-stretch: 80%; color: var(--sesame); font-variant-numeric: tabular-nums; }
.feature-pcs { font: 400 calc(3 * var(--u))/1 var(--sans); color: var(--rice-dim); }
.feature > * { transition: opacity .3s ease; }
.feature.swap > * { opacity: 0; }

/* ───────── cover / back (rice paper) ───────── */
.page.paper {
  background: url("tex-paper.webp"), var(--paper);
  color: var(--sumi);
}
.paper .block { align-items: center; justify-content: center; text-align: center; }
.cover-logo { width: 100%; height: auto; }
.cover-word { margin: calc(6 * var(--u)) 0 0; font: 700 calc(8 * var(--u))/1 var(--serif); font-stretch: 62.5%; letter-spacing: .12em; }
.paper .brush { width: calc(26 * var(--u)); margin-left: 0; }
.cover-hint { position: absolute; left: 0; right: 0; bottom: calc(12 * var(--u)); text-align: center; font: 400 calc(3 * var(--u))/1.3 var(--sans); color: rgba(18,17,16,.55); z-index: 2; }
.back-logo { width: 62%; height: auto; }
.back-text { margin: calc(5 * var(--u)) 0 0; font: 400 calc(3.4 * var(--u))/1.5 var(--sans); max-width: calc(48 * var(--u)); }
.wolt {
  display: inline-block; margin-top: calc(4 * var(--u)); padding: calc(2.4 * var(--u)) calc(5 * var(--u)); border-radius: 99px;
  background: var(--lacquer-hi); color: #fff; text-decoration: none; font: 600 calc(3.4 * var(--u))/1 var(--sans);
}
.page:not(.paper) .wolt { margin-top: calc(3 * var(--u)); }

/* ───────── welcome / contents ───────── */
.welcome .photo { height: min(64cqh, 110cqw); }
.welcome .block { justify-content: flex-end; }
.welcome-line { margin: 0; font: 700 calc(8.6 * var(--u))/1.02 var(--serif); font-stretch: 70%; text-wrap: balance; }
.welcome-sub { margin: calc(3 * var(--u)) 0 0; font: 400 calc(3.4 * var(--u))/1.45 var(--sans); color: var(--rice-dim); }

.toc { list-style: none; margin: calc(7 * var(--u)) 0 0; padding: 0; display: flex; flex-direction: column; }
.toc button {
  width: 100%; display: flex; align-items: baseline; gap: calc(2 * var(--u)); background: none; border: 0; padding: calc(2.2 * var(--u)) 0; cursor: pointer; text-align: left;
  border-bottom: 1px solid rgba(242,236,226,.12);
}
.toc-name { font: 600 calc(5.6 * var(--u))/1.1 var(--serif); font-stretch: 75%; }
.toc-count { font: 400 calc(2.9 * var(--u))/1 var(--sans); color: var(--rice-dim); }
.toc-pg { margin-left: auto; font: 600 calc(4.4 * var(--u))/1 var(--sans); color: var(--sesame); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .toc button:hover .toc-name { color: var(--sesame); } }

.drinks-note { margin-top: auto; padding-top: calc(4 * var(--u)); border-top: 1px solid rgba(242,236,226,.14); }
.drinks-note p { margin: 0; font: 400 calc(3.3 * var(--u))/1.45 var(--sans); color: var(--rice-dim); }

/* page-turn hint at the outer corner */
.corner {
  position: absolute; bottom: 0; width: calc(12 * var(--u)); height: calc(12 * var(--u)); z-index: 6; border: 0; padding: 0; cursor: pointer; background: none;
}
.page[data-side="r"] .corner { right: 0; }
.page[data-side="l"] .corner { left: 0; }
.corner::before {
  content: ""; position: absolute; bottom: 0; width: 0; height: 0; transition: width .25s, height .25s;
  box-shadow: -2px -2px 6px rgba(0,0,0,.35);
}
.page[data-side="r"] .corner::before { right: 0; background: linear-gradient(315deg, transparent 50%, #d9d4cb 50%, #fff 80%); }
.page[data-side="l"] .corner::before { left: 0; background: linear-gradient(45deg, transparent 50%, #d9d4cb 50%, #fff 80%); box-shadow: 2px -2px 6px rgba(0,0,0,.35); }
@media (hover: hover) { .corner:hover::before { width: calc(7 * var(--u)); height: calc(7 * var(--u)); } }
.leaf .corner { display: none; }

/* ───────── controls ───────── */
.controls {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 99px;
  background: rgba(20, 4, 6, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08);
}
.ctl {
  height: 44px; min-width: 44px; border: 0; border-radius: 99px; background: rgba(255,255,255,.08);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; padding: 0 12px;
  transition: background .2s, transform .12s;
}
.ctl:hover { background: rgba(255,255,255,.16); }
.ctl:active { transform: scale(.96); }
.ctl:disabled { opacity: .3; cursor: default; }
.ctl svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ctl-grid { font-size: 13px; }
.ctl-grid svg { stroke-width: 1.4; }
.ctl-grid[aria-pressed="true"] { background: rgba(79,195,247,.25); }
.folio-now { min-width: 76px; text-align: center; font: 500 14px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--rice-dim); }

/* ───────── dish photo: shines on hover, opens the dish ───────── */
.photo-hit {
  position: absolute; inset: 0; z-index: 3; border: 0; padding: 0; background: none; cursor: pointer;
}
.photo img { transition: opacity .45s ease, transform .7s cubic-bezier(.2,.8,.2,1), filter .45s ease; }
.photo .shine {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255,250,238,.0) 38%, rgba(255,250,238,.55) 47%, rgba(255,255,255,.75) 50%, rgba(255,250,238,.2) 56%, transparent 64%);
  transform: translateX(-130%); mix-blend-mode: soft-light;
}
.photo .glow { /* warm light pooling on the dish */
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(60% 55% at 50% 45%, rgba(255,236,200,.38), transparent 70%);
  mix-blend-mode: overlay;
}
.photo-badge {
  position: absolute; z-index: 3; top: calc(4 * var(--u)); right: calc(4 * var(--u)); pointer-events: none;
  display: inline-flex; align-items: center; gap: calc(1.4 * var(--u));
  padding: calc(1.5 * var(--u)) calc(2.8 * var(--u)); border-radius: 99px;
  background: rgba(18,17,16,.62); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font: 600 calc(2.8 * var(--u))/1 var(--sans);
  transition: opacity .3s ease, transform .3s ease;
}
.photo-badge svg { width: calc(3.6 * var(--u)); height: calc(3.6 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
@media (hover: hover) {
  .photo-badge { opacity: 0; transform: translateY(-6px); }
  .photo:hover img, .photo:has(.photo-hit:focus-visible) img { transform: scale(1.045); filter: brightness(1.12) saturate(1.15) contrast(1.04); }
  .photo:hover .shine { transform: translateX(130%); transition: transform 1.1s cubic-bezier(.3,.6,.2,1); }
  .photo:hover .glow { opacity: 1; }
  .photo:hover .photo-badge, .photo:has(.photo-hit:focus-visible) .photo-badge { opacity: 1; transform: none; }
}
.photo-hit:focus-visible { outline: 2px solid var(--sesame); outline-offset: -4px; }

/* ───────── dish sheet: rises from the bottom ───────── */
.sheet {
  padding: 0; border: 0; margin: auto auto 0; width: 100%; max-width: 640px; max-height: 94dvh;
  background: var(--stone); color: var(--rice); border-radius: 22px 22px 0 0; overflow: hidden;
  box-shadow: 0 -20px 60px rgba(0,0,0,.5);
}
.sheet::backdrop { background: rgba(10,2,3,.7); }
.sheet[open] { animation: rise .5s cubic-bezier(.32,.72,0,1); }
.sheet[open]::backdrop { animation: fade .4s ease; }
@keyframes rise { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }
.sheet-inner { position: relative; display: flex; flex-direction: column; max-height: 94dvh; }
.sheet-grab { position: absolute; top: 8px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 9px; background: rgba(255,255,255,.55); z-index: 4; }
.sheet-stage {
  position: relative; flex: none; height: min(48dvh, 92vw); overflow: hidden; touch-action: none;
  background:
    radial-gradient(70% 60% at 50% 42%, #F7D9B8 0%, #EEC39A 55%, #DFA77A 100%);
}
.sheet-stage::after { /* leaf shadows, as in the photos */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18; mix-blend-mode: multiply;
  background:
    radial-gradient(40% 18% at 12% 18%, #6b3b1a, transparent 70%),
    radial-gradient(30% 12% at 22% 30%, #6b3b1a, transparent 70%),
    radial-gradient(28% 10% at 80% 8%, #6b3b1a, transparent 70%);
  filter: blur(8px);
}
.stage3d { position: absolute; inset: 0; cursor: grab; }
.stage3d:active { cursor: grabbing; }
.stage3d canvas { display: block; width: 100%; height: 100%; }
.stage-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.sheet[data-view="photo"] .stage-photo { opacity: 1; }
.sheet[data-view="photo"] .stage-note { opacity: 0; }
.stage-note {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; z-index: 2;
  font: 500 12.5px/1 var(--sans); color: rgba(40,20,8,.6); transition: opacity .3s; pointer-events: none;
}
.view-toggle {
  position: absolute; left: 14px; top: 14px; z-index: 3; display: flex; padding: 3px; border-radius: 99px;
  background: rgba(18,17,16,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.view-toggle button {
  border: 0; background: none; color: rgba(255,255,255,.75); font: 600 13px/1 var(--sans); padding: 8px 14px; border-radius: 99px; cursor: pointer;
}
.view-toggle button[aria-pressed="true"] { background: #fff; color: var(--sumi); }

.sheet-body { padding: 22px 26px max(26px, env(safe-area-inset-bottom)); overflow-y: auto; }
.sheet-meta { margin: 0; display: flex; gap: 14px; font: 500 13px/1 var(--sans); color: var(--rice-dim); }
.sheet-meta span:empty { display: none; }
.sheet h2 { margin: 10px 0 0; font: 700 30px/1.05 var(--serif); font-stretch: 70%; text-wrap: balance; }
.sheet-price { margin: 12px 0 0; font: 600 24px/1 var(--sans); font-stretch: 80%; color: var(--sesame); font-variant-numeric: tabular-nums; }
.sheet-h { margin: 22px 0 10px; font: 600 14px/1 var(--sans); color: var(--rice); }
.sheet-h[hidden] { display: none; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { padding: 7px 11px; border-radius: 99px; background: rgba(242,236,226,.08); border: 1px solid rgba(242,236,226,.1); font: 400 14px/1 var(--sans); }
.sheet-parts { list-style: none; margin: 0; padding: 0; }
.sheet-parts li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(242,236,226,.1); font: 400 15px/1.3 var(--sans); }
.sheet-parts li span:last-child { color: var(--rice-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sheet-order { margin-top: 24px; font-size: 15px; padding: 13px 22px; }
.sheet-close {
  position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 99px; border: 0; z-index: 5;
  background: rgba(18,17,16,.6); color: #fff; display: grid; place-items: center; cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.sheet-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* wide screens: model on the left, details on the right */
@media (min-width: 900px) {
  .sheet { max-width: min(1060px, 94vw); }
  .sheet-inner { flex-direction: row; height: min(640px, 86dvh); }
  .sheet-stage { height: auto; flex: 1.25; }
  .sheet-body { flex: 1; padding: 44px 40px 36px; }
  .sheet h2 { font-size: 38px; }
  .sheet-note-desktop { display: block; }
}

/* ───────── polish: lacquer, gloss, glass ───────── */

/* the table: lacquered red with a soft specular pool of light */
body {
  background:
    radial-gradient(70% 45% at 28% -5%, rgba(255,214,206,.16), transparent 60%),
    radial-gradient(120% 80% at 20% 0%, #92101A 0%, transparent 60%),
    radial-gradient(90% 70% at 90% 100%, #3F0408 0%, transparent 70%),
    var(--lacquer);
}

/* pages: a sheen of light across polished stone, satin on the cover */
.page:not(.paper)::before {
  background:
    linear-gradient(118deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.02) 26%, transparent 42%, transparent 70%, rgba(255,255,255,.035) 100%),
    url("tex-stone.png");
}
.page.paper {
  background:
    linear-gradient(118deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 32%, rgba(0,0,0,0) 68%, rgba(120,100,80,.06) 100%),
    url("tex-paper.webp"), var(--paper);
}
.page { box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.page[data-side="r"] { border-radius: 2px 8px 8px 2px; }
.page[data-side="l"] { border-radius: 8px 2px 2px 8px; }
.half:not(:empty)::before { border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,.25), 0 18px 40px rgba(20,0,2,.4), 0 50px 90px rgba(20,0,2,.35); }

/* press feedback: on pointer-down, instantly */
.item, .toc button, .wolt, .ctl, .view-toggle button, .sheet-close { transition: transform .12s ease-out, background .2s, color .2s; }
.item:active { transform: scale(.985); }
.toc button:active { transform: scale(.985); }
.wolt:active, .sheet-close:active { transform: scale(.95); }
.photo-hit:active ~ * { transition-duration: .1s; }
.photo:active img { transform: scale(1.02) !important; }

/* control bar: liquid glass */
.controls {
  gap: 4px; padding: 5px;
  background: linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.07));
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.18), 0 12px 32px rgba(30,0,4,.45);
}
.ctl { background: rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.ctl:hover { background: rgba(255,255,255,.18); }
.ctl:active { transform: scale(.92); background: rgba(255,255,255,.26); }
.ctl:disabled { opacity: .28; box-shadow: none; }
.folio-now { color: rgba(255,255,255,.82); font-weight: 600; letter-spacing: .01em; }

/* photo badge: glass pill */
.photo-badge {
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.16));
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 6px 18px rgba(0,0,0,.22);
  backdrop-filter: blur(14px) saturate(170%); -webkit-backdrop-filter: blur(14px) saturate(170%);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* the dish sheet: dark glass, iOS proportions */
.sheet {
  border-radius: 28px 28px 0 0; max-width: 680px;
  background: rgba(28,27,26,.9);
  backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 -30px 80px rgba(0,0,0,.55);
}
.sheet-grab { top: 0; height: 26px; width: 120px; margin-left: -60px; background: none; cursor: grab; touch-action: none; }
.sheet-grab::before { content: ""; position: absolute; left: 50%; top: 9px; width: 38px; height: 5px; margin-left: -19px; border-radius: 9px; background: rgba(255,255,255,.6); }
.sheet-stage::before { /* soft edge where the stage meets the sheet, instead of a hard line */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; z-index: 1; pointer-events: none;
  background: linear-gradient(transparent, rgba(28,27,26,.35));
}
.sheet h2 { letter-spacing: -.01em; }
.sheet-meta { font-weight: 600; letter-spacing: .01em; }
.sheet-meta span + span { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.18); }
.chips li {
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.wolt {
  background: linear-gradient(180deg, #C9212C, #9C0F18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.2), 0 8px 22px rgba(163,18,28,.4);
}
.sheet-close {
  background: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}

/* segmented control with a sliding thumb */
.view-toggle {
  background: rgba(20,19,18,.42); border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%);
}
.view-toggle button { position: relative; z-index: 1; min-width: 64px; }
.view-toggle button[aria-pressed="true"] { background: none; color: var(--sumi); }
.seg-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: 64px; border-radius: 99px;
  background: linear-gradient(180deg, #fff, #F1EEEA);
  box-shadow: 0 2px 6px rgba(0,0,0,.22), inset 0 -1px 0 rgba(0,0,0,.06);
  transition: transform .4s cubic-bezier(.32,.72,0,1);
}
.sheet[data-view="photo"] .seg-thumb { transform: translateX(64px); }

/* wide screens: the sheet floats as a card */
@media (min-width: 900px) {
  .sheet { max-width: min(1060px, 94vw); margin-bottom: 24px; border-radius: 28px; }
  .sheet-stage { border-radius: 28px 0 0 28px; }
}

@media (prefers-reduced-transparency: reduce) {
  .controls, .sheet, .view-toggle, .photo-badge { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .controls { background: #3a0a0e; }
  .sheet { background: #1F1E1D; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet[open] { animation: none; }
}

/* narrow pages (phones): type steps up a size to stay legible */
@container (max-width: 520px) {
  .book[data-mode="single"] .item-name { font-size: calc(5.1 * var(--u)); }
  .book[data-mode="single"] .item-price { font-size: calc(5 * var(--u)); }
  .book[data-mode="single"] .item-desc { font-size: calc(3.8 * var(--u)); }
  .book[data-mode="single"] .cat-part,
  .book[data-mode="single"] .folio { font-size: calc(3.6 * var(--u)); }
  .book[data-mode="single"] .feature-desc,
  .book[data-mode="single"] .welcome-sub,
  .book[data-mode="single"] .drinks-note p { font-size: calc(3.8 * var(--u)); }
  .book[data-mode="single"] .items { gap: calc(2.8 * var(--u)); }
}
/* short phones: the page is near 2:3, so ingredients keep to one line (tap shows them all) */
@container (max-width: 520px) and (min-aspect-ratio: 11/20) {
  .book[data-mode="single"] .item-desc { -webkit-line-clamp: 1; }
}

/* the text block overlaps the photo on dish pages; let the pointer reach the photo */
.photo-page .block, .welcome .block { pointer-events: none; }

/* keep the photo's fade into the stone above the hover glow and shine, so no edge shows */
.photo::after { z-index: 3; }
.photo-badge, .photo-hit { z-index: 4; }

/* ───────── magazine stock: smooth coated paper, not board ───────── */
/* no grain: a coated sheet is smooth; it reads through the light that slides across it */
.page:not(.paper)::before {
  background:
    linear-gradient(112deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.035) 18%, transparent 34%),
    linear-gradient(112deg, transparent 58%, rgba(255,255,255,.045) 66%, rgba(255,255,255,.012) 72%, transparent 80%);
}
.page { background: radial-gradient(80% 60% at 55% 30%, var(--stone-hi), var(--stone) 80%); box-shadow: none; }
.page.photo-page, .page.welcome { background: var(--stone); }
.page.paper {
  background:
    linear-gradient(112deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 30%),
    linear-gradient(112deg, transparent 58%, rgba(255,255,255,.7) 66%, transparent 78%),
    linear-gradient(180deg, #fdfcfa, #f1eee8);
}
/* square trimmed corners, like a magazine */
.page[data-side="r"] { border-radius: 0 2px 2px 0; }
.page[data-side="l"] { border-radius: 2px 0 0 2px; }
.half:not(:empty)::before { border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 24px rgba(20,0,2,.38), 0 34px 70px rgba(20,0,2,.3); }
/* the sheet curves into the binding: deep at the spine, a highlight where it rises, then flat */
.page::after { width: 16cqw; }
.page[data-side="r"]::after { background: linear-gradient(90deg, rgba(0,0,0,.62) 0, rgba(0,0,0,.22) 9%, rgba(255,255,255,.07) 26%, rgba(255,255,255,.02) 40%, rgba(0,0,0,.05) 60%, transparent); }
.page[data-side="l"]::after { background: linear-gradient(270deg, rgba(0,0,0,.62) 0, rgba(0,0,0,.22) 9%, rgba(255,255,255,.07) 26%, rgba(255,255,255,.02) 40%, rgba(0,0,0,.05) 60%, transparent); }
.paper[data-side="r"]::after { background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,.05) 20%, transparent 50%); }
/* thin stock: fine, light page edges */
.edges-l { background: repeating-linear-gradient(90deg, #bdb8b0 0 1px, #77726c 1px 2px); }
.edges-r { background: repeating-linear-gradient(90deg, #77726c 0 1px, #bdb8b0 1px 2px); }

/* the cover sits centred on its sheet: the canon's asymmetric margins are for reading pages */
.page.paper[data-side] .block { left: 16.667cqw; right: 16.667cqw; }

/* cover: a finger shows the sheet can be swiped over */
.swipe-hint { position: absolute; left: 50%; bottom: calc(9 * var(--u)); width: calc(30 * var(--u)); height: calc(12 * var(--u)); transform: translateX(-50%); z-index: 4; pointer-events: none; }
.swipe-hand {
  position: absolute; right: 0; top: 0; width: calc(9 * var(--u)); height: calc(9 * var(--u));
  fill: var(--sumi); opacity: 0; filter: drop-shadow(0 calc(.6 * var(--u)) calc(.8 * var(--u)) rgba(0,0,0,.25));
  animation: swipe-hand 2.6s cubic-bezier(.32,.72,0,1) infinite;
}
.swipe-trail {
  position: absolute; right: calc(5 * var(--u)); top: calc(1.6 * var(--u)); width: calc(22 * var(--u)); height: calc(.7 * var(--u)); border-radius: 99px;
  background: linear-gradient(90deg, rgba(163,18,28,0), rgba(163,18,28,.85));
  transform-origin: 100% 50%; transform: scaleX(0); opacity: 0;
  animation: swipe-trail 2.6s cubic-bezier(.32,.72,0,1) infinite;
}
@keyframes swipe-hand {
  0%   { opacity: 0; transform: translateX(0) scale(1.08); }
  12%  { opacity: 1; transform: translateX(0) scale(1.08); }
  20%  { opacity: 1; transform: translateX(0) scale(.94); }                       /* press */
  56%  { opacity: 1; transform: translateX(calc(-18 * var(--u))) scale(.94); }  /* swipe */
  66%  { opacity: 0; transform: translateX(calc(-20 * var(--u))) scale(1.04); } /* lift off */
  100% { opacity: 0; transform: translateX(calc(-20 * var(--u))) scale(1.04); }
}
@keyframes swipe-trail {
  0%, 20% { opacity: 0; transform: scaleX(0); }
  24%     { opacity: 1; }
  56%     { opacity: 1; transform: scaleX(1); }
  76%, 100% { opacity: 0; transform: scaleX(1); }
}
.leaf .swipe-hint { display: none; }
.book[data-mode="single"] .swipe-hint { transform: translateX(-50%) scale(1.6); transform-origin: 50% 100%; bottom: calc(14 * var(--u)); }

/* ───────── list items carry the dish's photo, like a printed menu ───────── */
.item.has-thumb { display: flex; align-items: center; gap: calc(3 * var(--u)); }
.item-text { display: block; flex: 1; min-width: 0; }
.item-thumb {
  flex: none; width: calc(13 * var(--u)); height: calc(13 * var(--u)); object-fit: cover; border-radius: calc(2.6 * var(--u));
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 calc(.8 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.45);
  transition: transform .25s cubic-bezier(.32,.72,0,1), box-shadow .25s;
}
@media (hover: hover) { .item:hover .item-thumb { transform: scale(1.06); box-shadow: 0 0 0 1px rgba(228,177,131,.5), 0 calc(1.2 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.5); } }
.item[aria-current="true"] .item-thumb { box-shadow: 0 0 0 calc(.4 * var(--u)) var(--sesame), 0 calc(.8 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.45); }
.item.has-thumb[aria-current="true"]::before { display: none; } /* the ringed photo marks it now */
/* a chevron says "this opens" — shown where there is no hover to discover it */
.item-go { display: none; flex: none; width: calc(3.6 * var(--u)); height: calc(3.6 * var(--u)); fill: none; stroke: var(--rice-dim); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: none) { .item-go { display: block; } }
.book[data-mode="single"] .item-thumb { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.book[data-mode="single"] .item-go { display: block; }
.items:has(.has-thumb) { gap: calc(2 * var(--u)); }
.item-thumb { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.has-thumb .item-desc { margin-top: calc(.5 * var(--u)); }
.page.tight .item-desc { -webkit-line-clamp: 1; }
.page.tighter .item-desc { display: none; }
.page.tighter .item-thumb { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
/* phone: the column is narrow, so a dish reads like a menu card: photo · name, description, price;
   the chevron hangs in the canon's wide outer margin */
.book[data-mode="single"] .has-thumb { position: relative; }
.book[data-mode="single"] .has-thumb .item-text { display: flex; flex-direction: column; }
.book[data-mode="single"] .has-thumb .item-row { display: contents; }
.book[data-mode="single"] .has-thumb .item-lead { display: none; }
.book[data-mode="single"] .has-thumb .item-name { order: 1; }
.book[data-mode="single"] .has-thumb .item-desc { order: 2; }
.book[data-mode="single"] .has-thumb .item-price { order: 3; margin-top: calc(1.2 * var(--u)); }
.book[data-mode="single"] .item-thumb { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.book[data-mode="single"] .page.tighter .item-thumb { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.book[data-mode="single"] .has-thumb .item-go { position: absolute; right: calc(-9 * var(--u)); top: 50%; margin-top: calc(-2.2 * var(--u)); width: calc(4.4 * var(--u)); height: calc(4.4 * var(--u)); }

/* ───────── category tabs (top) and page arrows: liquid glass ───────── */
.tabs, .arrow {
  background: linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.07));
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.18), 0 10px 28px rgba(30,0,4,.42);
}
.tabs {
  position: fixed; z-index: 20; top: 9px; left: 50%; transform: translateX(-50%);
  max-width: calc(100vw - 20px); padding: 4px; border-radius: 99px;
}
.tabs-track { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: 99px; }
.tabs-track::-webkit-scrollbar { display: none; }
.tab {
  flex: none; border: 0; margin: 0; background: none; cursor: pointer; white-space: nowrap;
  padding: 10px 16px; border-radius: 99px;
  font: 600 14px/1 var(--sans); letter-spacing: .01em; color: rgba(255,255,255,.86);
  transition: background .3s cubic-bezier(.32,.72,0,1), color .3s, box-shadow .3s, transform .12s ease-out;
}
.tab:active { transform: scale(.94); }
@media (hover: hover) { .tab:hover:not([aria-current]) { background: rgba(255,255,255,.12); } }
.tab[aria-current="true"] { background: rgba(255,255,255,.94); color: #6E0910; box-shadow: 0 2px 10px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.06); }

.arrow {
  position: fixed; z-index: 15; width: 52px; height: 52px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; color: #fff; cursor: pointer;
  top: calc(50% + 30px - 26px);
  transition: opacity .3s, transform .12s ease-out, background .2s;
}
.arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.arrow:active { transform: scale(.9); }
@media (hover: hover) { .arrow:hover { background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.12)); } }
.arrow:disabled { opacity: 0; pointer-events: none; }
.arrow-prev { left: max(10px, calc(50% - var(--pw) - 62px)); }
.arrow-next { right: max(10px, calc(50% - var(--pw) - 62px)); }
/* phone: the page fills the width, so the arrows sit in the canon's empty bottom margin */
body[data-mode="single"] .arrow { top: auto; bottom: max(24px, env(safe-area-inset-bottom)); width: 46px; height: 46px; }
body[data-mode="single"] .arrow-prev { left: 22px; }
body[data-mode="single"] .arrow-next { right: 22px; }
body[data-mode="single"] .tab { padding: 10px 14px; }

/* details sheet: its scroll never hands off to the page behind */
.sheet-body { overscroll-behavior: contain; }
.sheet-grab { touch-action: none; }

@media (prefers-reduced-transparency: reduce) {
  .tabs, .arrow { backdrop-filter: none; -webkit-backdrop-filter: none; background: #3a0a0e; }
}

/* trimmed pages with softly rounded outer corners */
.page[data-side="r"] { border-radius: 2px 10px 10px 2px; }
.page[data-side="l"] { border-radius: 10px 2px 2px 10px; }
.half:not(:empty)::before { border-radius: 10px; }
.f-lift { border-radius: 10px 2px 2px 10px; }

/* images never start a native drag: a drag anywhere on the page turns it */
.book img { -webkit-user-drag: none; user-select: none; }

/* ───────── red edition ─────────
   Lacquer-red pages in a black border, dry-brush titles in rice cream, and the dishes cut out of
   their backdrop so they sit on the page with their own shadow, bleeding off the outer edge.
   The book lies on a dark slate table so the red glows.                                        */
:root { --red: #C3161F; --red-hi: #D91F28; --red-deep: #8A0B13; --ink: #141010; --cream: #FBE9DA; --cream-dim: rgba(251,233,218,.74); }

body { background: radial-gradient(85% 65% at 50% 38%, #2B2826 0%, #181615 58%, #0D0C0B 100%); }
body::before { background: url("tex-silk.png"); opacity: .3; }

.page, .page.photo-page, .page.welcome, .page.paper {
  background: radial-gradient(120% 85% at 30% 16%, var(--red-hi) 0%, var(--red) 46%, var(--red-deep) 100%);
  color: var(--cream);
  --rice: var(--cream); --rice-dim: var(--cream-dim);
  box-shadow: inset 0 0 0 2.4cqw var(--ink), inset 0 0 0 calc(2.4cqw + 1px) rgba(255,255,255,.07);
}
/* print grain and a soft sheen, under the content so the food stays clean */
.page:not(.paper)::before, .page.paper::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(112deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.03) 22%, transparent 38%), url("tex-grain.png");
}
.page[data-side="r"]::after { background: linear-gradient(90deg, rgba(0,0,0,.5) 0, rgba(0,0,0,.16) 9%, rgba(255,255,255,.05) 22%, transparent 45%); }
.page[data-side="l"]::after { background: linear-gradient(270deg, rgba(0,0,0,.5) 0, rgba(0,0,0,.16) 9%, rgba(255,255,255,.05) 22%, transparent 45%); }

/* brush titles with a black ink swash beneath */
.bh { margin: 0; line-height: 0; }
.bh img { display: block; height: calc(13 * var(--u)); width: auto; max-width: 100%; margin-left: calc(-1.4 * var(--u));
  filter: drop-shadow(0 calc(.4 * var(--u)) calc(.5 * var(--u)) rgba(50,0,0,.35)); }
.brush { fill: var(--ink); }
.cat-part { color: var(--cream-dim); }

/* lists: cream type, prices on black tags, dishes cut out */
.item-name { color: var(--cream); }
.item-lead { border-bottom-color: rgba(251,233,218,.32); }
.item-price, .feature-price, .toc-pg {
  color: var(--cream); background: var(--ink); border-radius: 99px;
  padding: calc(.9 * var(--u)) calc(1.8 * var(--u)) calc(.7 * var(--u));
  box-shadow: 0 calc(.3 * var(--u)) calc(.8 * var(--u)) rgba(40,0,0,.35);
}
.item-price { font-size: calc(3.5 * var(--u)); }
.item[aria-current="true"] .item-name { color: #FFE0B6; }
@media (hover: hover) { .item:hover .item-name { color: #fff; } }
.item-thumb, .book[data-mode="single"] .item-thumb {
  width: calc(15 * var(--u)); height: calc(15 * var(--u)); object-fit: contain; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 calc(.8 * var(--u)) calc(.9 * var(--u)) rgba(35,0,0,.55));
}
.book[data-mode="single"] .item-thumb { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
@media (hover: hover) { .item:hover .item-thumb { transform: scale(1.1) rotate(-3deg); box-shadow: none; } }
.item[aria-current="true"] .item-thumb { box-shadow: none; transform: scale(1.08); }
.item-go { stroke: var(--cream-dim); }
.folio { color: var(--cream-dim); }

/* contents */
.toc button { border-bottom-color: rgba(251,233,218,.2); }
.toc-name { color: var(--cream); }
.toc-pg { font-size: calc(3.6 * var(--u)); }
@media (hover: hover) { .toc button:hover .toc-name { color: #fff; } }
.drinks-note { border-top-color: rgba(251,233,218,.2); }
.page .wolt { background: var(--ink); color: var(--cream); box-shadow: 0 calc(.5 * var(--u)) calc(1.4 * var(--u)) rgba(40,0,0,.4); }

/* featured dish: cut out, large, running off the outer edge */
.photo-page .photo, .welcome .photo { overflow: visible; }
.photo::after, .photo .glow, .photo .shine { display: none; }
.photo img { object-fit: contain; filter: drop-shadow(0 2.4cqw 2.2cqw rgba(30,0,0,.6)); }
.photo-page .photo { top: 4cqh; height: min(52cqh, 78cqw); }
.page[data-side="l"].photo-page .photo { left: -14cqw; right: 3cqw; }
.page[data-side="r"].photo-page .photo { left: 3cqw; right: -14cqw; }
@media (hover: hover) {
  .photo:hover img, .photo:has(.photo-hit:focus-visible) img { transform: scale(1.04) rotate(-1.5deg); filter: drop-shadow(0 3cqw 2.6cqw rgba(30,0,0,.65)) brightness(1.06) saturate(1.1); }
}
.feature-name { color: var(--cream); font-size: calc(7.8 * var(--u)); }
.feature-desc { color: var(--cream-dim); }
.feature-pcs { color: var(--cream-dim); }
.feature-price { font-size: calc(4.6 * var(--u)); }
/* the house seal, stamped in the inner corner */
.seal { position: absolute; z-index: 2; width: 15cqw; bottom: 4.5cqh; transform: rotate(-9deg); opacity: .88; pointer-events: none; }
.page[data-side="l"] .seal { right: 7cqw; }
.page[data-side="r"] .seal { left: 7cqw; }

/* welcome: the whole table of dishes, then the brush line */
.welcome .photo { top: 2cqh; left: -10cqw; right: -10cqw; height: min(56cqh, 96cqw); }
.welcome-line { margin: 0; line-height: 0; }
.welcome-line img { display: block; height: calc(10.5 * var(--u)); width: auto; max-width: 100%; margin-left: calc(-1.2 * var(--u));
  filter: drop-shadow(0 calc(.4 * var(--u)) calc(.5 * var(--u)) rgba(50,0,0,.35)); }
.welcome-line img + img { margin-top: calc(1.2 * var(--u)); }

/* covers: the logo on a rice-paper sun, the title brushed beneath, a dish sliding in from the edge */
.page.paper .block { justify-content: flex-start; padding-top: 1cqh; }
.disc { width: min(100%, 50cqh); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 36% 30%, #FFFBF4 0%, #F7E9D7 55%, #E9D0B5 100%);
  box-shadow: 0 2cqw 4cqw rgba(50,0,0,.45), inset 0 -1.2cqw 2.4cqw rgba(140,70,20,.2), inset 0 1px 0 #fff; }
.disc .cover-logo, .disc .back-logo { width: 80%; height: auto; }
.page.paper .cover-word { display: block; height: calc(12 * var(--u)); width: auto; margin: calc(5 * var(--u)) 0 0; font: inherit; letter-spacing: 0;
  filter: drop-shadow(0 calc(.4 * var(--u)) calc(.5 * var(--u)) rgba(50,0,0,.35)); }
.hero-dish { position: absolute; z-index: 1; pointer-events: none; width: 66cqw; right: -16cqw; bottom: -3cqh; transform: rotate(-10deg);
  filter: drop-shadow(0 2.4cqw 2.4cqw rgba(30,0,0,.6)); }
.page .hero-dish { width: 74cqw; right: -22cqw; bottom: -6cqh; }
.page.paper .back-text { color: var(--cream); }
.page.paper .wolt { margin-top: calc(4 * var(--u)); }
.swipe-hand { fill: var(--cream); }
.swipe-trail { background: linear-gradient(90deg, rgba(251,233,218,0), rgba(251,233,218,.9)); }

/* phone arrows: black glass on the red */
body[data-mode="single"] .arrow { background: linear-gradient(180deg, rgba(34,28,28,.9), rgba(14,12,12,.9)); border-color: rgba(255,255,255,.16); }
.page.tighter .item-thumb { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }

/* desktop pages hold the descriptions: titles and dish cut-outs a step smaller there */
.book[data-mode="spread"] .bh img { height: calc(11 * var(--u)); }
.book[data-mode="spread"] .item-thumb { width: calc(12.5 * var(--u)); height: calc(12.5 * var(--u)); }
.items { margin-top: calc(4 * var(--u)); }
.swipe-hint { left: 34%; }
.book[data-mode="single"] .has-thumb .item-price { align-self: flex-start; }
.book[data-mode="single"] .item-thumb { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.book[data-mode="single"] .hero-dish { width: 104cqw; right: -34cqw; bottom: 3cqh; }
.book[data-mode="single"] .seal { left: auto; right: 7cqw; bottom: 15cqh; width: 17cqw; }
.page[data-p="21"] .disc { width: min(78%, 34cqh); }
.page[data-p="21"] .cover-word { margin-top: calc(3.5 * var(--u)); }

/* front cover: the finished cover art, full bleed; the square art is cropped to the page around the logo */
.cover-art { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; pointer-events: none; }
.book[data-mode="single"] .cover-art { object-position: 52% 50%; }

/* ───────── inside pages: dark photo pages with red brush, red list pages with black brush ───────── */
:root { --gold: #E2B06A; }
.page.photo-page, .page.welcome { background: radial-gradient(110% 80% at 60% 28%, #2C1513 0%, #171110 55%, #0E0B0A 100%); }
.decos { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* the art is drawn for dark pages on the left and red pages on the right; it turns over for the other side */
.photo-page[data-side="r"] .decos, .welcome[data-side="r"] .decos, .page:not(.photo-page):not(.welcome)[data-side="l"] .decos { transform: scaleX(-1); }
.deco { position: absolute; display: block; background: center / 100% 100% no-repeat; }
.d-red { left: -10cqw; width: 125cqw; aspect-ratio: 1000 / 700; bottom: 6cqh; background-image: url("deco/red.webp"); opacity: .92; }
.d-edge { left: 0; top: 0; height: 100%; aspect-ratio: 500 / 1000; background-image: url("deco/edge.webp"); opacity: .75; }
.d-tr { right: 0; top: 0; width: 64cqw; aspect-ratio: 900 / 700; background-image: url("deco/tr.webp"); }
.d-br { right: 0; bottom: 0; width: 58cqw; aspect-ratio: 1; background-image: url("deco/br.webp"); }
.d-waves { width: 52cqw; aspect-ratio: 540 / 330; background-image: url("deco/waves.png"); opacity: .3;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent); mask-image: radial-gradient(closest-side, #000 35%, transparent); }
.page:not(.photo-page):not(.welcome) .d-waves { right: -8cqw; top: 9cqh; }
.photo-page .d-waves, .welcome .d-waves { left: -6cqw; bottom: 22cqh; }

/* dish name on the dark page: cream, a red brush underline, price on a gold brush stroke */
.photo-page .brush, .welcome .brush { fill: var(--red-hi); }
.photo-page .feature-price {
  background: url("deco/gold.webp") center / 100% 100% no-repeat; box-shadow: none; border-radius: 0;
  color: var(--ink); font-weight: 800; padding: calc(1.4 * var(--u)) calc(4 * var(--u)) calc(1.2 * var(--u)) calc(2.6 * var(--u));
}

/* lists: gold counter, rules between dishes, black tags with a fine cream edge */
.cat-part { color: var(--gold); font-weight: 600; letter-spacing: .06em; }
.items:has(.has-thumb) .item { padding-bottom: calc(1.6 * var(--u)); border-bottom: 1px solid rgba(251,233,218,.18); }
.items:has(.has-thumb) li:last-child .item { border-bottom: 0; }
.item-price, .toc-pg { box-shadow: 0 0 0 1px rgba(251,233,218,.45), 0 calc(.3 * var(--u)) calc(.8 * var(--u)) rgba(40,0,0,.35); }
.item-lead { visibility: hidden; }

/* contents: a gold icon for every section */
.toc button { align-items: center; gap: calc(3 * var(--u)); border-bottom-color: rgba(226,176,106,.35); }
.toc-ic { flex: none; width: calc(7 * var(--u)); height: calc(7 * var(--u)); fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.toc-count { color: var(--gold); }

/* folios with a fine gold rule toward the spine */
.folio { color: var(--cream-dim); }
.page[data-side="l"] .folio::after, .page[data-side="r"] .folio::before {
  content: ""; display: inline-block; vertical-align: middle; width: calc(8 * var(--u)); height: 1px; background: var(--gold); opacity: .7;
}
.page[data-side="l"] .folio::after { margin-left: calc(2 * var(--u)); }
.page[data-side="r"] .folio::before { margin-right: calc(2 * var(--u)); }
.d-red { bottom: -12cqh; opacity: .85; }
.d-waves { width: 96cqw; opacity: .22; }
.page:not(.photo-page):not(.welcome) .d-waves { right: -30cqw; top: 4cqh; }
.photo-page .d-waves, .welcome .d-waves { left: -34cqw; bottom: 26cqh; }
.photo-page .feature-price { padding: calc(1.6 * var(--u)) calc(5 * var(--u)) calc(1.4 * var(--u)) calc(3 * var(--u)); }

/* ───────── dish sheet, red edition ─────────
   The dish turns on a dark stage brushed with red; its details sit on the red page with a
   black brush corner, the name in cream, the price on a gold stroke — the book's own language. */
.sheet {
  background: radial-gradient(120% 90% at 20% 0%, var(--red-hi) 0%, var(--red) 45%, var(--red-deep) 100%);
  backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--cream);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 -30px 80px rgba(0,0,0,.6);
}
.sheet::backdrop { background: rgba(6,4,4,.78); }
.sheet-stage { background: radial-gradient(90% 80% at 50% 40%, #2E1714 0%, #181110 60%, #0D0A09 100%); }
.sheet-stage::after { display: none; }
.sheet-stage::before { background: linear-gradient(transparent, rgba(0,0,0,.35)); }
.stage-deco { position: absolute; inset: 0; pointer-events: none; opacity: .9;
  background: url("deco/red.webp") left -40px bottom -120px / 115% auto no-repeat; }
.stage-note { color: var(--cream-dim); z-index: 2; }
.stage3d { z-index: 1; }
.stage-photo { z-index: 1; }
.view-toggle { background: rgba(10,8,8,.55); border-color: rgba(251,233,218,.18); }
.view-toggle button { color: var(--cream-dim); }
.view-toggle button[aria-pressed="true"] { color: var(--ink); }
.seg-thumb { background: linear-gradient(180deg, #FFF3E6, var(--cream)); }
.sheet-grab::before { background: rgba(251,233,218,.6); }
.sheet-close { background: var(--ink); color: var(--cream); box-shadow: 0 0 0 1px rgba(251,233,218,.3), 0 6px 16px rgba(0,0,0,.4); }

.sheet-body { position: relative; isolation: isolate; }
.sheet-body::before { /* print grain and a black brush corner, as on the list pages */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("deco/tr.webp") right -30px top -20px / 62% auto no-repeat, url("tex-grain.png");
}
.sheet-meta { color: var(--gold); font-weight: 700; letter-spacing: .04em; }
.sheet-meta span + span { border-left-color: rgba(226,176,106,.45); }
.sheet h2 { color: var(--cream); font-weight: 800; text-shadow: 0 2px 10px rgba(60,0,0,.35); max-width: 88%; }
.sheet-brush { display: block; fill: var(--ink); width: 180px; height: 13px; margin: 8px 0 0 -4px; }
.sheet-price {
  display: inline-block; margin: 16px 0 0; color: var(--ink); font-weight: 800; font-size: 22px;
  background: url("deco/gold.webp") center / 100% 100% no-repeat; padding: 9px 30px 8px 18px;
}
.sheet-h { color: var(--gold); font-weight: 700; letter-spacing: .03em; display: flex; align-items: center; gap: 10px; }
.sheet-h::after { content: ""; flex: 1; height: 1px; background: rgba(226,176,106,.35); }
.sheet-parts li { border-bottom-color: rgba(251,233,218,.18); }
.sheet-parts li span:last-child { color: var(--cream-dim); }
.chips li { background: rgba(10,4,4,.22); border: 1px solid rgba(251,233,218,.28); box-shadow: none; color: var(--cream); }
.sheet .wolt { background: var(--ink); color: var(--cream); box-shadow: 0 0 0 1px rgba(226,176,106,.5), 0 8px 22px rgba(0,0,0,.35); }
@media (min-width: 900px) {
  .sheet { border-radius: 22px; }
  .sheet-stage { border-radius: 22px 0 0 22px; }
  .sheet h2 { font-size: 40px; }
  .sheet-brush { width: 240px; height: 16px; }
}

/* phones: dishes stay on the page instead of running off the screen */
.book[data-mode="single"] .photo-page .photo { left: 4cqw; right: 4cqw; }
.book[data-mode="single"] .welcome .photo { left: 2cqw; right: 2cqw; }
.book[data-mode="single"] .page .hero-dish { width: 80cqw; right: -6cqw; bottom: 4cqh; }
.sheet-body { scrollbar-width: thin; scrollbar-color: rgba(251,233,218,.35) transparent; }

/* the stage's dish and photo live in one layer that can shrink as a whole */
.stage-in { position: absolute; inset: 0; z-index: 1; transform-origin: 50% 0; }
.sheet-grab, .sheet-close { z-index: 6; }

/* phones: one scroll for the whole sheet; the stage collapses into a strip as the details come up */
@media (max-width: 899px) {
  .sheet-inner { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .sheet-inner::-webkit-scrollbar { display: none; }
  .sheet-body { overflow: visible; }
  .sheet-stage { position: sticky; top: var(--stick, 0px); z-index: 3; }
  .stage-in { transform: translateY(var(--s, 0px)) scale(var(--k, 1)); will-change: transform; }
  .view-toggle { transform: translateY(var(--s, 0px)); }
  .stage-note { opacity: var(--open, 1); }
  .sheet-stage::before { z-index: 2; }
}

/* ───────── the book / list switch ───────── */
.mode-switch {
  position: fixed; z-index: 30; left: 50%; bottom: max(26px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; padding: 4px; border-radius: 99px;
  background: rgba(14,12,12,.84); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 10px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
}
.mode-switch button {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 92px;
  border: 0; background: none; color: rgba(255,255,255,.82); font: 700 14px/1 var(--sans); padding: 10px 14px; border-radius: 99px; cursor: pointer;
  transition: color .3s, transform .12s ease-out;
}
.mode-switch button:active { transform: scale(.95); }
.mode-switch button[aria-pressed="true"] { color: #0E0C0B; }
.mode-switch svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.ms-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 99px;
  background: linear-gradient(180deg, #FFF6EB, #F4E3D0); box-shadow: 0 2px 8px rgba(0,0,0,.3); transition: transform .4s cubic-bezier(.32,.72,0,1); }
.mode-switch[data-mode="list"] .ms-thumb { transform: translateX(100%); }
@media (min-width: 1180px) { body:not(.list-mode) .mode-switch { left: auto; right: 20px; top: 9px; bottom: auto; transform: none; } }

/* ───────── list view: one scrolling page, a card per dish ─────────
   The layout of a modern scrolling menu (header, sticky section tabs, a card grid);
   the look is the book's own: ink and lacquer red, brush titles, gold price strokes.   */
body.list-mode { overflow: auto; background: #121110; }
body.list-mode::before, .list-mode .stage, .list-mode .tabs, .list-mode .arrow { display: none; }
.lv[hidden] { display: none; }
.lv { min-height: 100vh; color: var(--cream);
  background: url("tex-grain.png"), radial-gradient(90% 50% at 50% 0%, #2B1412 0%, #141010 60%, #0F0D0C 100%); }
.lv-top { max-width: 1120px; margin: 0 auto; height: 84px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; }
.lv-logo { height: 54px; width: auto; }
.lv-order { background: var(--red); color: var(--cream); text-decoration: none; font: 700 14px/1 var(--sans); padding: 13px 22px; border-radius: 99px;
  box-shadow: 0 0 0 1px rgba(226,176,106,.45), 0 8px 20px rgba(0,0,0,.4); transition: transform .12s ease-out; }
.lv-order:active { transform: scale(.95); }

.lv-hero { position: relative; max-width: 1120px; margin: 0 auto; min-height: 380px; padding: 40px 20px 30px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.lv-hero-brush { position: absolute; left: -6%; right: -6%; bottom: -30px; height: 280px; background: url("deco/red.webp") center / 100% 100% no-repeat; opacity: .9; }
.lv-hero-dish { position: absolute; right: -40px; top: 0; width: min(62%, 640px); filter: drop-shadow(0 26px 26px rgba(0,0,0,.6)); }
.lv-hero-title { position: relative; margin: 0; line-height: 0; }
.lv-hero-title img { display: block; height: clamp(44px, 7vw, 84px); width: auto; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.lv-hero-title img + img { margin-top: 8px; }
.lv-hero-sub { position: relative; margin: 18px 0 0; font: 500 15px/1.4 var(--sans); color: var(--cream-dim); max-width: 34ch; }

.lv-tabs { position: sticky; top: 0; z-index: 10; margin-top: 18px; background: rgba(18,16,15,.88);
  backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border-bottom: 1px solid rgba(226,176,106,.22); }
.lv-tabs-in { max-width: 1120px; margin: 0 auto; padding: 0 8px; display: flex; overflow-x: auto; scrollbar-width: none; }
.lv-tabs-in::-webkit-scrollbar { display: none; }
.lv-tabs a { position: relative; flex: none; padding: 20px 16px 18px; color: var(--cream-dim); text-decoration: none; font: 700 15px/1 var(--sans); transition: color .2s; }
.lv-tabs a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 2px; background: var(--red-hi); transform: scaleX(0); transition: transform .35s cubic-bezier(.32,.72,0,1); }
.lv-tabs a[aria-current] { color: var(--cream); }
.lv-tabs a[aria-current]::after { transform: none; }
@media (hover: hover) { .lv-tabs a:hover { color: var(--cream); } }

.lv-main { max-width: 1120px; margin: 0 auto; padding: 0 20px 40px; }
.lv-sec { padding-top: 54px; }
.lv-sec h2 { margin: 0; line-height: 0; }
.lv-sec h2 img { height: clamp(46px, 6vw, 70px); width: auto; }
.lv-brush { display: block; fill: var(--red-hi); width: 200px; height: 14px; margin: 6px 0 28px -4px; }
.lv-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.lv-open, .lv-plain {
  display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 90% at 20% 0%, var(--red-hi) 0%, var(--red) 50%, var(--red-deep) 100%);
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 22px 36px -22px rgba(0,0,0,.9); transition: transform .35s cubic-bezier(.32,.72,0,1), box-shadow .35s;
}
.lv-plain { cursor: default; }
.lv-pic { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden;
  background: radial-gradient(85% 75% at 50% 45%, #33181A 0%, #1A1211 70%, #120E0D 100%); }
.lv-pic::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -12%; height: 55%; background: url("deco/red.webp") center / 100% 100% no-repeat; opacity: .55; }
.lv-pic img { position: relative; width: 88%; height: 86%; object-fit: contain; filter: drop-shadow(0 16px 16px rgba(0,0,0,.6)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) {
  .lv-card:hover .lv-add { transform: translateY(-4px); transition-duration: .35s; }
  .lv-open:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 30px 46px -22px rgba(0,0,0,.95); }
  .lv-open:hover img { transform: scale(1.06) rotate(-2deg); }
}
.lv-open:active { transform: scale(.985); }
.lv-info { display: flex; flex-direction: column; flex: 1; padding: 20px; background: url("tex-grain.png"); }
.lv-name, .lv-plain h3 { margin: 0; font: 800 22px/1.15 var(--serif); font-stretch: 70%; color: var(--cream); }
.lv-desc { margin: 10px 0 16px; font: 400 14px/1.45 var(--sans); color: var(--cream-dim); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lv-price { align-self: flex-start; margin-top: auto; color: var(--ink); font: 800 20px/1 var(--sans); font-variant-numeric: tabular-nums;
  background: url("deco/gold.webp") center / 100% 100% no-repeat; padding: 9px 28px 8px 16px; }
.lv-plain .lv-price { margin-top: 16px; }
.lv-foot { text-align: center; padding: 50px 20px 140px; }
.lv-foot img { height: 64px; width: auto; }
.lv-foot p { margin: 14px 0 0; font: 700 15px/1 var(--sans); color: var(--cream-dim); }
@media (max-width: 600px) {
  .lv-top { height: 72px; padding: 0 16px; } .lv-logo { height: 44px; } .lv-order { padding: 11px 16px; font-size: 13px; }
  .lv-hero { min-height: 330px; padding: 20px 16px 24px; }
  .lv-hero-dish { width: 96%; right: -18%; top: 0; }
  .lv-hero-brush { height: 190px; }
  .lv-hero-sub { font-size: 14px; }
  .lv-tabs a { padding: 17px 13px 15px; font-size: 14px; }
  .lv-main { padding: 0 16px 30px; } .lv-sec { padding-top: 40px; } .lv-grid { gap: 18px; }
}
.book[data-mode="single"] .swipe-hint { bottom: calc(34 * var(--u)); }
/* the logo sits on its own rice-paper disc, as on the cover */
.lv-logo, .lv-foot img { box-sizing: content-box; aspect-ratio: 1; object-fit: contain; padding: 6px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #FFFBF4 0%, #F7E9D7 60%, #E9D0B5 100%); box-shadow: 0 6px 16px rgba(0,0,0,.45); }
.lv-logo { height: 58px; } .lv-foot img { height: 84px; }
@media (max-width: 600px) {
  .lv-logo { height: 48px; }
  .lv-hero { min-height: 0; padding-top: 0; }
  .lv-hero-dish { position: relative; right: auto; top: auto; width: 108%; margin: -6px -4% 4px; }
}

/* ───────── the basket ─────────
   Ink and cream on the lacquer red, like the rest of the book. The basket button only appears once something is in it. */
.bh-text { display: block; font: 800 calc(9 * var(--u))/1.05 var(--serif); font-stretch: 70%; color: var(--cream); text-wrap: balance;
  text-shadow: 0 2px 8px rgba(40,0,0,.35); }
.book[data-mode="spread"] .bh-text { font-size: calc(7.6 * var(--u)); }
.lv-sec h2 .bh-text { font-size: clamp(34px, 5vw, 52px); line-height: 1.05; }

/* drinks and other dishes without a photo: tap the line to add it */
.item-add { display: flex; align-items: center; gap: calc(3 * var(--u)); cursor: pointer; }
.item-add .item-text { flex: 1; min-width: 0; }
.item-plus { flex: none; width: calc(6.4 * var(--u)); height: calc(6.4 * var(--u)); padding: calc(1.4 * var(--u)); border-radius: 50%;
  background: var(--ink); fill: none; stroke: var(--cream); stroke-width: 2.4; stroke-linecap: round; box-shadow: 0 0 0 1px rgba(226,176,106,.5); }
.item-add:active .item-plus { transform: scale(.9); }

/* dish sheet: how many, and into the basket */
.buy { display: flex; gap: 10px; align-items: stretch; margin-top: 22px; }
.qty { display: flex; align-items: center; border-radius: 99px; background: rgba(10,4,4,.28); box-shadow: inset 0 0 0 1px rgba(251,233,218,.28); }
.qty button { width: 44px; height: 48px; border: 0; background: none; color: var(--cream); display: grid; place-items: center; cursor: pointer; border-radius: 99px; }
.qty button:active { transform: scale(.88); }
.qty svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.qty output { min-width: 22px; text-align: center; font: 700 17px/1 var(--sans); font-variant-numeric: tabular-nums; }
.buy-add { flex: 1; border: 0; border-radius: 99px; padding: 0 20px; min-height: 48px; cursor: pointer;
  background: var(--ink); color: var(--cream); font: 700 15px/1.1 var(--sans);
  box-shadow: 0 0 0 1px rgba(226,176,106,.55), 0 10px 24px rgba(0,0,0,.35); transition: transform .12s ease-out; }
.buy-add:active { transform: scale(.97); }
.buy-add span { display: block; margin-top: 4px; color: var(--gold); font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sheet.no-pic .sheet-stage { display: none; }
.sheet.no-3d .view-toggle, .sheet.no-3d .stage-note { display: none; }
@media (min-width: 900px) { .sheet.no-pic .sheet-inner { height: auto; } }

.cart-fab {
  position: fixed; z-index: 31; right: 16px; bottom: max(24px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px;
  height: 56px; min-width: 56px; padding: 0 18px 0 16px; border: 0; border-radius: 99px; cursor: pointer;
  background: var(--ink); color: var(--cream); font: 700 15px/1 var(--sans); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 1px rgba(226,176,106,.6), 0 14px 30px rgba(0,0,0,.5);
  transition: transform .12s ease-out;
}
.cart-fab[hidden] { display: none; }
.cart-fab:active { transform: scale(.94); }
.cart-fab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.cart-n { position: absolute; top: -4px; left: 34px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center;
  background: var(--red-hi); color: #fff; font-size: 12px; box-shadow: 0 0 0 2px var(--ink); }
.cart-sum { color: var(--gold); }
.cart-fab.bump { animation: bump .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes bump { 30% { transform: scale(1.14); } }
@media (max-width: 600px) { .cart-fab { padding: 0; width: 56px; justify-content: center; } .cart-sum { display: none; } .cart-n { left: 32px; } }

.toast { position: fixed; z-index: 40; left: 50%; bottom: calc(max(24px, env(safe-area-inset-bottom)) + 70px); margin: 0; max-width: calc(100vw - 32px);
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s cubic-bezier(.32,.72,0,1);
  padding: 12px 18px; border-radius: 14px; background: var(--cream); color: var(--ink); font: 600 14px/1.3 var(--sans); box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* the basket sheet: from the bottom on phones, from the right on wide screens */
.cart {
  padding: 0; border: 0; margin: auto auto 0; width: 100%; max-width: 560px; max-height: 92dvh; flex-direction: column;
  border-radius: 22px 22px 0 0; overflow: hidden; color: var(--cream);
  background: url("tex-grain.png"), radial-gradient(120% 90% at 20% 0%, var(--red-hi) 0%, var(--red) 45%, var(--red-deep) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 -30px 80px rgba(0,0,0,.6);
}
.cart[open] { display: flex; animation: rise .45s cubic-bezier(.32,.72,0,1); }
.cart::backdrop { background: rgba(6,4,4,.78); }
.cart[open]::backdrop { animation: fade .3s ease; }
.cart.closing { transform: translateY(100%); transition: transform .22s cubic-bezier(.4,0,.8,.4); }
@media (min-width: 900px) {
  .cart { margin: 0 0 0 auto; height: 100dvh; max-height: none; border-radius: 22px 0 0 22px; max-width: 460px; }
  .cart[open] { animation-name: slide; }
  .cart.closing { transform: translateX(100%); }
}
@keyframes slide { from { transform: translateX(100%); } }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 12px 24px; }
.cart-head h2 { margin: 0; font: 800 28px/1 var(--serif); font-stretch: 70%; }
.cart-x { width: 40px; height: 40px; border-radius: 99px; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--ink); color: var(--cream);
  box-shadow: 0 0 0 1px rgba(251,233,218,.3); }
.cart-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cart-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 24px 16px; }
.cart-lines { list-style: none; margin: 0; padding: 0; }
.cart-lines li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(251,233,218,.18); }
.cart-lines img { width: 64px; height: 46px; object-fit: contain; flex: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.cart-dot { width: 64px; flex: none; }
.cl-text { flex: 1; min-width: 0; }
.cl-name { margin: 0; font: 700 15px/1.25 var(--sans); }
.cl-price { margin: 4px 0 0; font: 500 13px/1 var(--sans); color: var(--cream-dim); font-variant-numeric: tabular-nums; }
.cart-lines .qty button { width: 38px; height: 40px; }
.cart-empty { padding: 40px 0; text-align: center; font: 500 16px/1.5 var(--sans); color: var(--cream-dim); }
.cart-empty p { margin: 0; }
.cart-form { display: grid; gap: 14px; margin-top: 20px; }
.seg { display: flex; padding: 4px; border-radius: 99px; background: rgba(10,4,4,.3); box-shadow: inset 0 0 0 1px rgba(251,233,218,.2); }
.seg label { flex: 1; position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; text-align: center; padding: 11px 8px; border-radius: 99px; font: 700 14px/1 var(--sans); color: var(--cream-dim); cursor: pointer; transition: background .25s, color .25s; }
.seg input:checked + span { background: var(--cream); color: var(--ink); }
.seg input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.cart-kind { margin: 0; font: 700 14px/1 var(--sans); color: var(--gold); }
.fld { display: grid; gap: 6px; }
.fld[hidden] { display: none; }
.fld > span { font: 600 13px/1 var(--sans); color: var(--cream-dim); }
.fld i { font-style: normal; opacity: .7; }
.fld input, .fld textarea { width: 100%; border: 0; border-radius: 12px; padding: 13px 14px; font: 500 16px/1.3 var(--sans); color: var(--ink);
  background: var(--cream); box-shadow: inset 0 1px 2px rgba(0,0,0,.15); resize: vertical; }
.fld input::placeholder, .fld textarea::placeholder { color: rgba(20,16,16,.4); }
.fld input:focus, .fld textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.fld [aria-invalid="true"] { outline: 2px solid #FFD25E; }
.cart-foot { display: grid; gap: 10px; padding: 14px 24px max(20px, env(safe-area-inset-bottom)); background: rgba(10,4,4,.28); border-top: 1px solid rgba(251,233,218,.16); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font: 600 15px/1 var(--sans); }
.cart-total strong { font: 800 24px/1 var(--sans); color: var(--cream); font-variant-numeric: tabular-nums; }
.cart-err { margin: 0; font: 600 14px/1.3 var(--sans); color: #FFD25E; }
.cart-err:empty { display: none; }
.cart-off { margin: 0; font: 500 14px/1.4 var(--sans); color: var(--cream-dim); }
.cart-off a { color: var(--cream); }
.send { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border: 0; border-radius: 99px; cursor: pointer; text-decoration: none;
  font: 700 16px/1 var(--sans); transition: transform .12s ease-out; }
.send:active { transform: scale(.97); }
.send-wa { background: var(--ink); color: var(--cream); box-shadow: 0 0 0 1px rgba(226,176,106,.6), 0 10px 24px rgba(0,0,0,.35); }
.send-wa svg { width: 22px; height: 22px; fill: none; stroke: #4BD37B; stroke-width: 1.7; stroke-linejoin: round; }
.send-alt { background: none; color: var(--cream); box-shadow: inset 0 0 0 1px rgba(251,233,218,.4); min-height: 46px; font-size: 15px; }
.sent { padding: 8px 0 4px; }
.sent-code { margin: 0; font: 700 13px/1 var(--sans); color: var(--gold); letter-spacing: .04em; }
.sent h3 { margin: 10px 0 8px; font: 800 26px/1.1 var(--serif); font-stretch: 70%; }
.sent p { margin: 0; font: 500 15px/1.5 var(--sans); color: var(--cream-dim); }
.sent-text { margin: 16px 0 0; padding: 14px 16px; border-radius: 12px; background: rgba(10,4,4,.32); white-space: pre-wrap; font: 500 14px/1.5 var(--sans);
  color: var(--cream); user-select: text; -webkit-user-select: text; }

/* list view: "+" on each card */
.lv-card { position: relative; }
.lv-add { position: absolute; right: 14px; bottom: 14px; width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: var(--ink); color: var(--cream); box-shadow: 0 0 0 1px rgba(226,176,106,.6), 0 8px 18px rgba(0,0,0,.4); transition: transform .12s ease-out; }
.lv-add:active { transform: scale(.88); }
.lv-add svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.lv-plain .lv-desc { margin: 8px 0 0; }
.lv-plain .lv-info { padding-right: 76px; }
@media (prefers-reduced-motion: reduce) { .cart[open], .cart-fab.bump { animation: none; } .toast { transition: opacity .2s; } }

/* ───────── list on phones: one row per dish ─────────
   Name, two lines of what's in it and the price on the left; the dish as photographed on the right,
   with "+" set into its corner. Rows are divided by a hairline, not boxed. */
@media (max-width: 600px) {
  .lv-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } /* a long name must not widen the column */
  .lv-card { min-width: 0; border-bottom: 1px solid rgba(251,233,218,.14); }
  .lv-card:last-child { border-bottom: 0; }
  .lv-open, .lv-plain { flex-direction: row; align-items: stretch; gap: 14px; padding: 16px 0; border-radius: 0; background: none; box-shadow: none; }
  .lv-open:active { transform: none; background: rgba(251,233,218,.04); }
  .lv-info { flex: 1; padding: 0; background: none; min-width: 0; }
  .lv-name, .lv-plain h3 { font: 700 16px/1.3 var(--sans); font-stretch: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lv-desc { margin: 6px 0 12px; font-size: 14px; line-height: 1.4; -webkit-line-clamp: 2; }
  .lv-price { font-size: 16px; padding: 7px 22px 6px 12px; }
  .lv-pic { order: 2; flex: none; width: 45%; max-width: 190px; aspect-ratio: 3 / 2; align-self: center; border-radius: 12px; background: #1E1513; }
  .lv-pic::before { display: none; }
  .lv-pic img { inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
  /* "+" sits in the photo's top corner, its inner corner rounded like a tab */
  .lv-add { top: 16px; right: 0; bottom: auto; width: 44px; height: 44px; border-radius: 0 12px 0 14px; box-shadow: none; background: rgba(20,16,16,.92); }
  .lv-add:active { transform: scale(.92); }
  .lv-card:hover .lv-add { transform: none; }
  /* a dish without a photo: the "+" stands at the row's end */
  .lv-plain .lv-info { padding-right: 60px; }
  .lv-plain .lv-desc { margin: 6px 0 0; }
  .lv-plain .lv-price { margin-top: 12px; }
  .lv-plain .lv-add { top: 50%; margin-top: -22px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(226,176,106,.5); }
  .lv-brush { margin-bottom: 8px; }
}

/* the list, read as a screenshot: logo and title on top, each line with its sum */
.cart-head { gap: 12px; justify-content: flex-start; }
.cart-head .cart-x { margin-left: auto; }
.cart-logo { width: 40px; height: 40px; padding: 4px; border-radius: 50%; object-fit: contain; background: radial-gradient(#FFF6EC, var(--cream)); }
.cl-price b { color: var(--cream); font-weight: 700; }
.cart-tip { margin: 0; font: 500 13px/1.45 var(--sans); color: var(--cream-dim); }
.cart-tip a { color: var(--cream); }

/* the dish fills its frame by position, not by a percentage height: Safari resolves a % height
   against an aspect-ratio box as zero and the photo vanished on iPhones */
.lv-pic { display: block; }
.lv-pic picture { position: absolute; inset: 0; display: block; }
.lv-pic img { position: absolute; inset: 7% 6%; width: 88%; height: 86%; }
@media (max-width: 600px) { .lv-pic img { inset: 0; width: 100%; height: 100%; } }

/* ───────── languages ─────────
   GEO / ENG / RUS in the list's header, where the Wolt button was. */
.lang { display: flex; padding: 3px; border-radius: 99px; background: rgba(14,12,12,.7);
  box-shadow: inset 0 0 0 1px rgba(251,233,218,.18); }
.lang button { border: 0; background: none; color: var(--cream-dim); font: 700 13px/1 var(--sans); letter-spacing: .04em;
  padding: 10px 12px; border-radius: 99px; cursor: pointer; transition: background .25s, color .25s, transform .12s ease-out; }
.lang button[aria-pressed="true"] { background: var(--cream); color: var(--ink); }
.lang button:active { transform: scale(.94); }
.lang button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 600px) { .lang button { padding: 9px 10px; font-size: 12px; } }

/* the brush-lettered titles, set in type for English and Russian */
.hero-text { display: block; font: 800 clamp(40px, 6.6vw, 78px)/1 var(--serif); font-stretch: 75%; color: var(--cream);
  letter-spacing: -.01em; text-shadow: 0 3px 10px rgba(0,0,0,.45); }
.hero-text-red { color: var(--red-hi); margin-top: 6px; }
.lv-hero-title .hero-text { line-height: 1.02; }
.welcome-line .hero-text { font-size: calc(10 * var(--u)); line-height: 1.05; }
.welcome-line .hero-text-red { margin-top: calc(1 * var(--u)); }
.cover-word-text { margin: calc(5 * var(--u)) 0 0; font: 800 calc(9 * var(--u))/1.05 var(--serif); font-stretch: 75%; color: var(--sumi); letter-spacing: 0; }

/* the order list shows each dish as photographed, like the list's rows; no filter (Safari drops filtered images in scrolling dialogs) */
.cart-lines img { width: 66px; height: 44px; object-fit: cover; border-radius: 8px; filter: none; }

/* under the languages: one tap to call the restaurant */
.lv-top { height: auto; padding-top: 14px; padding-bottom: 8px; align-items: flex-start; }
.lv-actions { display: grid; gap: 8px; justify-items: stretch; }
.lv-call { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 99px;
  background: var(--red); color: var(--cream); text-decoration: none; font: 700 14px/1 var(--sans);
  box-shadow: 0 0 0 1px rgba(226,176,106,.45), 0 8px 20px rgba(0,0,0,.4); transition: transform .12s ease-out, background .2s; }
.lv-call:hover { background: var(--red-hi); }
.lv-call:active { transform: scale(.96); }
.lv-call:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lv-call svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
@media (max-width: 600px) { .lv-top { padding-top: 12px; } .lv-call { min-height: 40px; font-size: 13px; padding: 0 12px; } }
.lv-actions .lang button { flex: 1; } /* the three languages share the width of the call button below */

/* iOS Safari reads flex: 1 (a 0% basis) inside a dialog that only has a max-height as "no room" and the dishes collapsed
   under the total. Size the list by its content and let it shrink and scroll only when the screen runs out. */
.cart-scroll { flex: 1 1 auto; min-height: 0; -webkit-overflow-scrolling: touch; }
.cart-head, .cart-foot { flex: none; }

/* small phones: tighter rows and a slimmer footer, so a screenshot holds more of the order */
@media (max-width: 420px) {
  .cart-head { padding: 14px 14px 8px 18px; }
  .cart-head h2 { font-size: 23px; }
  .cart-logo { width: 34px; height: 34px; }
  .cart-scroll { padding: 0 18px 8px; }
  .cart-lines li { gap: 10px; padding: 8px 0; }
  .cart-lines img, .cart-dot { width: 54px; height: 38px; }
  .cl-name { font-size: 14px; }
  .cl-price { font-size: 12px; }
  .cart-lines .qty button { width: 32px; height: 34px; }
  .cart-lines .qty output { min-width: 18px; font-size: 15px; }
  .cart-foot { gap: 8px; padding: 10px 18px max(12px, env(safe-area-inset-bottom)); }
  .cart-total strong { font-size: 21px; }
  .cart-tip { font-size: 12px; }
  .cart-foot .send-alt { min-height: 38px; font-size: 14px; }
}

/* special offers: the old price struck through, a gold tag with the percent off */
.was { font-weight: 500; opacity: .62; text-decoration-thickness: 1.5px; margin-right: .15em; }
.off-tag { display: inline-block; vertical-align: .12em; margin-left: .45em; padding: .28em .5em .2em; border-radius: 6px;
  background: #E9B86A; color: #2A0A08; font: 800 12px/1 var(--sans); font-stretch: 100%; letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.item-name .off-tag { font-size: calc(2.7 * var(--u)); border-radius: calc(.9 * var(--u)); }
.lv-pic > .off-tag { position: absolute; z-index: 2; top: 12px; left: 12px; margin: 0; font-size: 14px; padding: 6px 9px 5px; border-radius: 8px;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.7); }
.lv-price .was { color: rgba(42,10,8,.7); opacity: 1; }
.sheet-price .off-tag { font-size: 14px; vertical-align: .2em; }
.cl-name .off-tag { font-size: 11px; }
@media (max-width: 600px) { .lv-pic > .off-tag { top: 8px; left: 8px; font-size: 12px; padding: 5px 7px 4px; } }

.lv-was { align-self: flex-start; margin: auto 0 6px; font: 600 14px/1 var(--sans); color: var(--cream-dim); font-variant-numeric: tabular-nums; text-decoration-thickness: 1.5px; }
.lv-was + .lv-price { margin-top: 0; }
.lv-plain .lv-was { margin-top: 12px; }
.item-price .was { font-size: .8em; }