/* ============================================================
   Umami — La carta (/carta), K11 · Chalk
   The room of menu/ is the stage: one dish rests on the table, only
   the table is in focus, and handwritten ingredient names point at the
   food. The dock at the bottom is the menu: full menu, dish types,
   the strip of dishes. A simple top bar holds the sections (K12).
   Design: canvas "Umami menu dock variations", K11 · Chalk and
   K12 · Top bar (docs/design/natural-stage/README.md).
   The full menu (static HTML) and the no-JavaScript layout are at the end.
   ============================================================ */

/* Lets the focal band of the stage animate (rack focus). Browsers
   without @property simply jump between focus positions. */
@property --focus {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 57%;
}

:root {
  color-scheme: dark;
  --bg: #120c09;
  --ink: #fff8ef;
  --ink-soft: rgba(255, 248, 239, .8);
  --ink-mute: rgba(255, 248, 239, .7);
  --ink-faint: rgba(255, 248, 239, .5);
  --line: rgba(255, 236, 214, .18);
  --chalk: #fdf6ea;

  /* the selected dish card, and the full menu */
  --cream: #f4e9da;
  --cream-ink: #2b1d20;
  --cream-muted: #6b5560;
  --cream-line: #e3d5c3;

  /* diet colours: on the dark dock, and on cream */
  --veggie: #c9d98a;  --veggie-on-cream: #5f7f2e;
  --vegan:  #9fd38f;  --vegan-on-cream:  #3f7a35;
  --fish:   #9cc9ee;  --fish-on-cream:   #2f6fa8;
  --meat:   #eba58f;  --meat-on-cream:   #a8452f;

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand: 'Caveat', 'Bradley Hand', cursive;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.5, 0, .75, 0);
  --t-rack: 420ms;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --base-y: 72.5%;  /* where the dish in focus rests on the table (scene %); set per section by the script */
  --dish-k: 1.15;   /* K11: every dish 15% bigger than menu/ */
}

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

html, body { height: 100%; }
/* the page's own colour behind everything, which iPhone Safari also uses for its bars */
html.js { background: var(--bg); }

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Backdrop (only visible around the scene on wide screens) ---------- */

.backdrop {
  position: fixed;
  inset: -40px;
  background: url('../assets/stage/food-blur.webp') center 62% / cover no-repeat;
  filter: brightness(.36) saturate(1.1);
}
.backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 75% at 50% 55%, transparent 30%, rgba(10, 6, 4, .75) 100%);
}

/* ---------- Scene: the room, never stretched ----------
   The script sets its height and top so the dish's base line meets the dock
   (see placeScene in js/carta.js); these are the fallbacks. */

.scene {
  position: fixed;
  top: var(--scene-top, 0px);
  left: 50%;
  height: var(--scene-h, 100dvh);
  aspect-ratio: 852 / 1672;
  transform: translateX(-50%);
  container-type: size;
  touch-action: pan-y;
  --px: 0;
  --py: 0;
  --focus: var(--focus-rest, 57%);
  transition: --focus 900ms var(--ease-out);
}

.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.stage__set {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 450ms ease;
}
.stage__set.is-on { opacity: 1; }
/* K10/K11: the room's frame tilts 3% up, so the table's back edge shows behind the plate */
.stage__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(calc(var(--px) * -6px), calc(var(--py) * -4px + var(--tilt, -3%)), 0) scale(1.03);
  transition: transform 600ms var(--ease-out);
}
body[data-section="desserts"] .stage__img,
body[data-section="drinks"] .stage__img { --tilt: 0%; }
/* Plane of focus on the dish (K11): the wall and the logo stay soft, the table is sharp.
   At rest (--focus 57%): soft above 46%, sharp from 57% to 92%. */
.stage__img--sharp {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent calc(var(--focus) - 11%),
    #000 var(--focus),
    #000 calc(var(--focus) + 35%),
    transparent calc(var(--focus) + 43%));
          mask-image: linear-gradient(to bottom,
    transparent calc(var(--focus) - 11%),
    #000 var(--focus),
    #000 calc(var(--focus) + 35%),
    transparent calc(var(--focus) + 43%));
  transition: opacity 700ms ease, transform 600ms var(--ease-out);
}
/* desserts keep their own photos' band (the slice on the bar) */
body[data-section="desserts"] .stage__img--sharp {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent calc(var(--focus) - 46%),
    #000 calc(var(--focus) - 16%),
    #000 calc(var(--focus) + 12%),
    transparent calc(var(--focus) + 30%));
          mask-image: linear-gradient(to bottom,
    transparent calc(var(--focus) - 46%),
    #000 calc(var(--focus) - 16%),
    #000 calc(var(--focus) + 12%),
    transparent calc(var(--focus) + 30%));
}
body.is-intro .scene,
body.is-racking .scene,
body.is-moving .scene { --focus: 24%; }
body.is-racking .scene { transition-duration: 520ms; }
/* a section without dishes yet: the room is entirely out of focus */
body.is-soon .stage__img--sharp { opacity: 0; }

.shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(18, 12, 9, .6) 0%, rgba(18, 12, 9, 0) 17%),
    radial-gradient(ellipse 90% 70% at 50% 55%, transparent 55%, rgba(10, 6, 4, .5) 100%);
}

/* lights down between sections */
.veil {
  position: absolute;
  inset: 0;
  background: #0b0705;
  opacity: 0;
  pointer-events: none;
  transition: opacity 450ms ease;
}
body.is-soon .veil { opacity: .3; }
body.is-moving .veil { opacity: .92; }

/* ---------- Turntable + dishes (food) ---------- */

.turntable {
  position: absolute;
  inset: 0;
  cursor: grab;
  transition: filter var(--t-rack) var(--ease-out), opacity var(--t-rack) var(--ease-out), transform var(--t-rack) var(--ease-out);
}
.turntable.is-grabbing { cursor: grabbing; }
body.is-intro .turntable,
body.is-racking .turntable,
body.is-moving .turntable {
  filter: blur(14px);
  opacity: 0;
  transform: translateY(-3%) scale(.94);
  transition-timing-function: var(--ease-in);
}
body.is-soon .turntable,
body.is-photo .turntable { visibility: hidden; }

/* a dish rests on its base: `top` is the table line, the box grows upwards */
.dish {
  position: absolute;
  left: 50%;
  top: var(--base-y);
  width: calc(var(--w, .6) * var(--dish-k, 1) * 100%);
  transform-origin: 50% 100%;
  will-change: transform, filter, opacity;
  pointer-events: none;
}
.dish__img {
  position: relative;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
  pointer-events: none;
}
/* Shadows follow the table's grazing perspective: the light is above and behind,
   so the shadow sits under the dish and only a soft edge shows in front and at the sides.
   Keep it black, never filtered by the grade. */
.dish__shadow {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  transform-origin: 50% 100%;
  transform: translateY(var(--sh-y, 2.5%)) scale(var(--sh-sx, 1.03), var(--sh-sy, .78));
  filter: brightness(0) blur(7px);
  opacity: .62;
  pointer-events: none;
}
/* a bowl only touches the table with its foot: a flat ellipse, nothing beside its walls */
.dish--bowl { --sh-sx: .86; --sh-sy: .2; --sh-y: 1.5%; }
/* a glass or cup the same: no dark halo beside a see-through wall (drinks, 1 Nov) */
.dish--glass { --sh-sx: .8; --sh-sy: .1; --sh-y: 1%; }
.dish--glass .dish__shadow { opacity: .45; }
/* contact line where the dish meets the wood */
.dish::before {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -1.5%;
  height: 7%;
  background: radial-gradient(ellipse at 50% 50%, rgba(14, 5, 0, .7) 0%, rgba(14, 5, 0, .3) 50%, transparent 72%);
  filter: blur(1.5px);
}
.dish--bowl::before { left: 18%; right: 18%; }

/* No photo yet: the spot on the table stays empty, with a quiet note. Nothing is drawn in its place. */
.dish--empty { aspect-ratio: 2.4 / 1; }
.dish--empty::before { display: none; }
.dish__tag {
  position: absolute;
  left: 50%;
  bottom: 30%;
  transform: translateX(-50%);
  padding: 6px 12px;
  border: 1px dashed rgba(255, 248, 239, .45);
  border-radius: 999px;
  background: rgba(18, 12, 9, .35);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 200ms ease;
}
.dish.is-hero .dish__tag { opacity: 1; }

/* ---------- Callouts: K11 · Chalk ---------- */

.callouts {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.callouts__pool {
  position: absolute;
  background: radial-gradient(ellipse 62% 60% at 50% 55%, rgba(18, 12, 9, .4) 0%, rgba(18, 12, 9, 0) 100%);
  opacity: 0;
  transition: opacity 400ms ease;
}
.callouts__pool.is-in { opacity: 1; }
.callouts__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.callouts__svg path {
  fill: none;
  stroke: var(--chalk);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .95;
}
.chalk-line {
  stroke-dasharray: var(--len, 300);
  stroke-dashoffset: var(--len, 300);
  transition: stroke-dashoffset 520ms var(--ease-out) 120ms;
}
.chalk-line.is-in { stroke-dashoffset: 0; }
.callouts__svg .chalk-head { opacity: 0; transition: opacity 160ms ease 560ms; }
.callouts__svg .chalk-head.is-in { opacity: .95; }
.chalk {
  position: absolute;
  font: 600 24px/1 var(--hand);
  color: var(--chalk);
  text-transform: lowercase;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(18, 12, 9, .6);
  opacity: 0;
  transform: translate(-50%, 4px) rotate(var(--tilt, 0deg));
  transition: opacity 260ms ease, transform 320ms var(--ease-out);
}
/* the title: the first ingredient, big and bold white in the middle (round 12/13) */
.chalk--title { font: 700 36px/1 var(--hand); color: #fff; text-shadow: 0 1px 4px rgba(18, 12, 9, .8), 0 0 14px rgba(18, 12, 9, .4); }
.chalk.is-in { opacity: 1; transform: translate(-50%, 0) rotate(var(--tilt, 0deg)); }
.callouts.is-leaving .chalk,
.callouts.is-leaving path,
.callouts.is-leaving .callouts__pool { opacity: 0 !important; transition: opacity 140ms ease; }

/* ---------- The controls' column: the phone's width, centred over the scene ---------- */

.frame {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100vw, var(--col, 100vw));
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
}
.frame > * { pointer-events: auto; }

/* ---------- Tabs: one style for the sections (top) and the dish types (dock) ---------- */

.tabs {
  display: flex;
  align-items: center;
  gap: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: none;
  height: 44px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-mute);
  font: 400 15px/1 var(--sans);
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-pressed="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }

/* ---------- Top (round 13): the website row, the menu's sections hanging under it ----------
   An inverted L on the right (Chris, K12 notes): the plants on the left stay clear. */

.top-shade {
  position: absolute;
  left: 96px;
  top: calc(var(--safe-t) - 52px);
  width: 340px;
  height: 290px;
  background: radial-gradient(ellipse 55% 50% at 70% 40%, rgba(18, 12, 9, .72) 0%, rgba(18, 12, 9, .38) 55%, rgba(18, 12, 9, 0) 100%);
  pointer-events: none !important;
  transition: opacity 500ms ease;
}
.top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
}
.top > * { pointer-events: auto; }
body.is-intro .top,
body.is-intro .top-shade { opacity: 0; }

/* the website: v1's pages, this one current (it ends before the language corner) */
.site {
  position: absolute;
  top: calc(var(--safe-t) + 10px);
  left: 6px;
  right: 0;
  padding-right: 98px; /* the links end before the language corner; the line runs under it to the edge */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid var(--line);
}
.site a {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  color: var(--ink-mute);
  font: 400 13px/1 var(--sans);
  text-decoration: none;
  white-space: nowrap;
}
.site a:hover { color: var(--ink); }
.site a[aria-current="page"] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--ink); }
/* the language corner: the square above the sections, split on the diagonal (Chris, R14) */
.langs {
  position: absolute;
  top: var(--safe-t);
  right: 0;
  width: 84px;
  height: 54px; /* ends on the top bar's line (row at 10 px, 44 px tall) */
  border-left: 1px solid var(--line);
  background: linear-gradient(to bottom right, transparent calc(50% - .6px), var(--line) 50%, transparent calc(50% + .6px));
}
.langs a {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 5px;
  color: var(--ink-mute);
  font: 600 12px/1 var(--sans);
  letter-spacing: .04em;
  text-decoration: none;
}
.langs a[href]:hover { color: var(--ink); }
.langs a[aria-current="page"] { color: var(--ink); font-weight: 800; }
.langs a > span { line-height: 12px; }
.langs__en { clip-path: polygon(0 0, 100% 0, 0 100%); align-items: flex-start; justify-content: flex-start; padding: 8px 0 0 7px; }
.langs__es { clip-path: polygon(100% 0, 100% 100%, 0 100%); align-items: flex-end; justify-content: flex-end; padding: 0 7px 8px 0; }
.langs__es .flag { order: 2; }
/* both flags at their own proportions, one height (UK 2:1, Spain 3:2) */
.flag { flex: none; display: block; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 248, 239, .35); }
.langs__en .flag { width: 24px; }
.langs__es .flag { width: 18px; }

/* the menu's sections: a column on a thin rail, flush with the right edge (Chris's T1 edit) */
.rail {
  position: absolute;
  top: calc(var(--safe-t) + 56px);
  right: -1px;
  min-width: 83px;
  padding-right: 8px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
}
.rail button {
  height: 40px;
  padding: 0 0 0 14px;
  border: 0;
  background: transparent;
  color: var(--ink-mute);
  font: 400 15px/1 var(--sans);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.rail button:hover { color: var(--ink); }
.rail button[aria-pressed="true"] {
  margin-left: -1px;
  padding-left: 13px;
  border-left: 2px solid var(--ink);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}

/* ---------- Dock (round 13): full menu, dish types, the strip, the first-visit hint ---------- */

.dock {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  /* --bar-b: room for a browser bar that floats over the page (iPhone, set in carta.js) */
  padding: 0 0 calc(var(--safe-b) + 8px + var(--bar-b, 0px));
  /* the bar lift drops with the hint (carta.js, markSwiped), at the hint's pace */
  transition: opacity 400ms ease, transform 400ms var(--ease-out), padding-bottom 450ms var(--ease-out);
}
/* the dark fade the dock sits in; 10 px lower since the row above the tabs lost its note
   and the speaker (Chris, 24 Oct: "un poquito más abajo") */
.dock::before {
  content: '';
  position: absolute;
  inset: -7px -14px 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(18, 12, 9, 0) 0%, rgba(18, 12, 9, .88) 28%, var(--bg) 100%);
  pointer-events: none;
}
body.is-intro .dock { opacity: 0; transform: translateY(16px); }
/* the first entrance: 800 ms instead of 400 (Chris, 24 Oct: "appears suddenly, too quick") */
body.is-entering .dock { transition-duration: 800ms; }
.dock > * { transition: opacity 140ms ease; }
.dock.is-leaving .strip-wrap { opacity: 0; }

.dock__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.list-open {
  display: flex;
  align-items: flex-end;
  min-height: 32px;
  color: var(--ink);
  font: 700 14px/1 var(--sans);
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
}
.list-open:hover { color: var(--cream); }
/* test data, said quietly */
.senses-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0 -6px 0 -8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.senses-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.senses-toggle[aria-pressed="true"] { color: var(--ink); }
.dock__note[hidden] { display: none; }
.dock__note {
  margin: 0 0 1px;
  font-size: 10.5px;
  line-height: 1.2;
  text-align: right;
  color: var(--ink-faint);
}

.dock__tabs {
  display: flex;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid var(--line);
}
.dock__tabs .types { flex: 1; min-width: 0; }
.dock__tabs .types:empty { height: 44px; }
.diet-filter {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: 400 13px/1 var(--sans);
  cursor: pointer;
}
.diet-filter svg { width: 14px; height: 14px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.diet-filter:hover { color: var(--ink); }
.diet-filter.is-on { color: var(--ink); font-weight: 600; }
.diet-filter.is-on svg { stroke: var(--veggie); }

/* the strip (round 15 · a carousel): every dish has a card, placed each frame by js
   (layoutStrip) from the same position as the dish on the table; the one in the
   middle grows to 112 px, and a fixed line marks the middle */
.strip-wrap {
  position: relative;
  height: 100px;
  margin-top: 4px;
  overflow: hidden;
  touch-action: pan-y;
}
.strip-wrap::before,
.strip-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  pointer-events: none;
}
.strip-wrap::before { left: -14px; background: linear-gradient(270deg, rgba(18, 12, 9, 0) 0%, var(--bg) 85%); }
.strip-wrap::after { right: -14px; background: linear-gradient(90deg, rgba(18, 12, 9, 0) 0%, var(--bg) 85%); }
.strip {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 100%;
}
.strip.is-empty { position: static; width: auto; height: auto; }
.strip-wrap.is-empty::before,
.strip-wrap.is-empty::after,
.strip-wrap.is-empty .strip__focus { display: none; }
/* the middle of the strip: the dishes pass through it (the PSP's focus spot) */
.strip__focus {
  position: absolute;
  left: 50%;
  top: var(--focus-top, 96px);
  width: var(--focus-w, 112px);
  height: 3px;
  background: var(--ink);
  transform: translateX(-50%);
  pointer-events: none;
}
.strip__empty {
  margin: 0;
  padding: 14px 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.dish-s {
  position: absolute;
  left: 0;
  top: 0;
  width: 84px;
  padding: 0 0 11px;
  border: 0;
  background: transparent;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: .55;
  cursor: pointer;
  will-change: transform, opacity;
}
.dish-s__img {
  width: 84px;
  height: 44px;
  object-fit: contain;
  -webkit-user-drag: none;
}
.dish-s__img--none {
  display: grid;
  place-items: center;
  border: 1px dashed rgba(255, 248, 239, .35);
  border-radius: 50%;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-faint);
}
.dish-s__head { display: flex; width: 100%; min-height: 18px; justify-content: center; align-items: baseline; gap: 6px; }
.dish-s__name {
  min-width: 0;
  overflow: hidden;
  font: 500 13px/1.2 var(--sans);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dish-s__price { flex: none; font-size: 13px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.dish-s__icons { display: flex; width: 100%; gap: 6px; align-items: center; min-height: 14px; opacity: var(--near, 0); }
.dish-s__head .dish-s__price { display: none; }
.dish-s__icons svg { width: 14px; height: 14px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dish-s__icons .al { stroke: rgba(255, 248, 239, .75); }
.dish-s__icons .diet { stroke-width: 2.2; }
.dish-s__icons .dish-s__price { display: none; margin-left: auto; }
.diet--veggie { stroke: var(--veggie); }
.diet--vegan  { stroke: var(--vegan); }
.diet--fish   { stroke: var(--fish); }
.diet--meat   { stroke: var(--meat); }

/* the dish in the middle: bold white name, its price and icons (they fade in as it arrives) */
.dish-s.is-on { cursor: default; }
.dish-s.is-on .dish-s__head { justify-content: space-between; }
.dish-s.is-on .dish-s__head .dish-s__price { display: inline; opacity: var(--near, 0); }
.dish-s.is-on .dish-s__name { font-size: 15px; font-weight: 800; color: #fff; }
.dish-s.is-long .dish-s__head .dish-s__price { display: none; }
.dish-s.is-long .dish-s__icons .dish-s__price { display: inline; }

/* round 13 · E: the swipe hint, for the first visit only */
.hint {
  display: flex;
  align-items: center;
  gap: 0;
  height: 24px;
  transition: opacity 400ms ease, visibility 0s linear 0s;
}
/* gone: it folds to nothing (its gap too) and the dock drops by its height (23 Oct) */
.hint.is-gone {
  height: 0;
  margin-top: -7px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, height 450ms var(--ease-out), margin 450ms var(--ease-out), visibility 0s linear 450ms;
}
body.is-dropping .scene { transition: --focus 900ms var(--ease-out), top 450ms var(--ease-out); }
.hint__end { flex: none; width: 12px; height: 14px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hint__line { flex: 1; height: 0; border-top: 1.6px solid var(--ink); }
.hint__pill {
  flex: none;
  padding: 3px 12px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--bg);
  font: 800 11px/1.3 var(--sans);
  letter-spacing: .22em;
  animation: nudge 2.4s ease-in-out 1.6s 3;
}
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-7px); }
  60% { transform: translateX(7px); }
}

/* ---------- Short phones (browser bars): every photo in the strip a little smaller ---------- */

@media (max-height: 720px) {
  .dock { gap: 4px; padding-bottom: calc(var(--safe-b) + 6px + var(--bar-b, 0px)); }
  .list-open { min-height: 28px; }
  .strip-wrap { height: 78px; margin-top: 2px; }
  .dish-s { gap: 5px; }
  .dish-s__img { height: 26px; }
  .dish-s { padding-bottom: 9px; }
  .hint { height: 18px; }
  .hint.is-gone { height: 0; margin-top: -4px; }
  .hint__pill { padding: 2px 10px; font-size: 10px; }
  .strip__empty { padding: 8px 0; }
}

/* ---------- Focus ---------- */

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .scene, .stage__set, .stage__img, .veil, .turntable, .chalk, .callouts__pool,
  .chalk-line, .callouts__svg .chalk-head, .top, .top-shade, .dock, .dock > *, .dish-s, .strip, .hint {
    transition: none !important;
  }
  body.is-intro .turntable, body.is-racking .turntable, body.is-moving .turntable { filter: none; transform: none; }
  .hint__pill { animation: none; }
}


/* ============================================================
   The full menu: real HTML, a small photo of each dish
   ============================================================ */

.list {
  --pad: clamp(18px, 5vw, 48px);
  background: var(--cream);
  color: var(--cream-ink);
  font: 400 15px/1.5 var(--sans);
  user-select: text;
  -webkit-user-select: text;
}
.list__head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 6px 14px;
  padding: calc(var(--safe-t) + 22px) max(var(--pad), calc((100% - 760px) / 2 + var(--pad))) 14px;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--cream);
  border-bottom: 1px solid var(--cream-line);
}
.list__brand { margin: 0; grid-column: 1 / -1; font: italic 500 18px/1 var(--serif); color: var(--cream-muted); }
.list__title { margin: 0; font: 600 clamp(26px, 6vw, 38px)/1.1 var(--serif); }
.list__lang, .list__close {
  font: 600 12px/1 var(--sans);
  letter-spacing: .04em;
  color: var(--cream-ink);
  text-decoration: none;
  padding: 11px 14px;
  border: 1px solid var(--cream-line);
  border-radius: 99px;
  background: none;
  cursor: pointer;
}
.list__jump { grid-column: 1 / -1; display: flex; gap: 18px; margin-top: 6px; }
.list__jump a { color: var(--cream-ink); font: 500 14px/1 var(--sans); text-decoration: none; border-bottom: 1px solid var(--cream-line); padding: 8px 0 4px; }
.list__note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 12.5px; color: var(--cream-muted); }

.list__made { max-width: 760px; margin: 0 auto; padding: 28px var(--pad) 40px; font-size: 12px; color: var(--cream-muted); }

.list__sec { padding: 26px var(--pad) 8px; max-width: 760px; margin: 0 auto; scroll-margin-top: 150px; }
.list__secname { margin: 0 0 6px; font: 600 26px/1.2 var(--serif); }
.list__typename {
  margin: 22px 0 4px;
  font: 600 11px/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream-muted);
}
.list__items { list-style: none; margin: 0; padding: 0; }
.list__soon { color: var(--cream-muted); }

/* each dish: its photo on the left, the words on the right */
.item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 0 14px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px dashed var(--cream-line);
}
.item__photo {
  grid-row: 1 / span 4;
  width: 96px;
  height: 60px;
  object-fit: contain;
  margin-top: 2px;
}
.item__photo--none {
  display: grid;
  place-items: center;
  border: 1px dashed var(--cream-line);
  border-radius: 50%;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cream-muted);
}
.item > :not(.item__photo) { grid-column: 2; }
.item__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.item__name { margin: 0; font: 600 19px/1.25 var(--serif); }
.item__price { font: 500 17px/1 var(--serif); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.item__price small { display: block; margin-top: 4px; font: 400 10.5px/1 var(--sans); color: var(--cream-muted); }
.item__price--ask { font: 400 13px/1.2 var(--sans); color: var(--cream-muted); }
.item__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; font-size: 12.5px; color: var(--cream-muted); }
.item__diet { display: inline-flex; align-items: center; gap: 6px; color: var(--cream-ink); }
.item__desc { margin: 8px 0 0; }
.item__ing { margin: 6px 0 0; font-size: 13px; color: var(--cream-muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot--vegan { background: var(--vegan-on-cream); }
.dot--meat { background: var(--meat-on-cream); }
.dot--fish { background: var(--fish-on-cream); }
.dot--veggie { background: var(--veggie-on-cream); }

@media (max-width: 380px) {
  .item { grid-template-columns: 76px 1fr; gap: 0 12px; }
  .item__photo { width: 76px; height: 48px; }
}

/* With JavaScript: a narrow sheet that rises over the room (23 Oct, Chris: "the background
   still there, and you can see in the laterals the background, but the menu is thinner").
   It never touches the screen's edges, so iPhone Safari keeps colouring its bars from the
   dark room, not from the cream paper (the white top margin, then a white bottom band
   while it rose from the bottom edge). So it ends at the middle of the dock (--sheet-b,
   carta.js) and pops up from there instead of sliding in from below the screen. Food
   only for now; it ends where the list ends, and pulling down at its top closes it. */
html.js .list {
  --pull: 0px;
  position: fixed;
  z-index: 20;
  left: max(16px, calc(50% - 280px));
  right: max(16px, calc(50% - 280px));
  top: calc(var(--safe-t) + 64px);
  bottom: var(--sheet-b, 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 22px;
  padding-bottom: 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 248, 239, .08);
  visibility: hidden;
  opacity: 0;
  transform: translateY(56px) scale(.96);
  transform-origin: 50% 100%;
  transition: transform 260ms cubic-bezier(.5, 0, .75, 0), opacity 220ms ease 40ms, visibility 0s linear 260ms;
}
html.js body.is-list .list {
  visibility: visible;
  opacity: 1;
  transform: translateY(var(--pull));
  transition: transform 520ms var(--ease-out), opacity 200ms ease;
}
html.js body.is-list .list.is-pulling { transition: none; }
/* closed: out of the page entirely (carta.js keeps it in only while it slides away) */
html.js body:not(.is-list):not(.is-list-leaving) .list { display: none; }

/* the sheet's own head: a grab handle, the title and Close; no brand, language or jumps */
html.js .list__head {
  grid-template-columns: 1fr auto;
  padding: 22px 20px 12px;
  border-radius: 22px 22px 0 0;
}
html.js .list__head::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  border-radius: 2px;
  background: var(--cream-line);
}
html.js .list__brand,
html.js .list__lang { display: none; }
/* Food · Desserts at the right, under Close, beside the note (Chris, 24 Oct) */
html.js .list__head { grid-template-areas: 'title close' 'note jump'; align-items: start; }
html.js .list__title { grid-area: title; }
html.js .list__close { grid-area: close; }
html.js .list__note { grid-area: note; margin-top: 8px; }
html.js .list__jump { grid-area: jump; grid-column: auto; display: flex; justify-content: flex-end; gap: 14px; margin-top: 4px; }
html.js .list__jump a { font-size: 14px; white-space: nowrap; }
html.js .list__title { font-size: 26px; }
html.js .list__sec { padding: 8px 20px 0; }
html.js .list__sec { scroll-margin-top: 150px; } /* below the sticky head */
html.js .list__sec + .list__sec { margin-top: 18px; }
html.js .item[data-dish] { cursor: pointer; }
/* in the sheet each dish is short (Chris: "I can barely see 2 rows"): no taste line, which
   only repeats the ingredients, a smaller photo and name; 3–4 dishes at a glance */
html.js .list .item__desc { display: none; }
html.js .list .item { grid-template-columns: 72px 1fr; gap: 0 12px; padding: 12px 0; }
html.js .list .item__photo { width: 72px; height: 46px; }
html.js .list .item__name { font-size: 17px; }
html.js .list .item__price { font-size: 16px; }
html.js .list .item__meta { margin-top: 3px; }
html.js .list .item__ing { margin-top: 4px; font-size: 12.5px; line-height: 1.4; }
html.js .item.is-here { background: linear-gradient(90deg, transparent, rgba(18, 12, 9, .05) 20%, rgba(18, 12, 9, .05) 80%, transparent); }

/* the room behind: dimmed, the dock and labels out of the way, the top row resting */
body.is-list .veil,
body.is-mine .veil { opacity: .55; }
body.is-list .dock,
body.is-list .callouts,
body.is-mine .dock,
body.is-mine .callouts,
body.is-mine .cake { opacity: 0; pointer-events: none; }
body.is-list .top, body.is-mine .top { opacity: .3; }
body.is-list .top *, body.is-mine .top * { pointer-events: none !important; }

/* Without JavaScript: the list is the page */
html:not(.js) body { height: auto; overflow: auto; background: var(--cream); }
html:not(.js) .backdrop,
html:not(.js) .scene,
html:not(.js) .callouts,
html:not(.js) .frame,
html:not(.js) .list__close { display: none; }
html:not(.js) .list__head { grid-template-columns: 1fr auto; }

/* ---------------- THE CHEESECAKES: a quiet note, no lines (24 Oct) ----------------
   Name, one line of description and the main ingredients, under the top row, over the
   soft part of the dessert photo. It shows only on the desserts and hides while a photo
   changes. */
.cake {
  position: fixed;
  z-index: 6;
  left: 50%;
  /* below the section rail (Comida / Postres), narrow enough to stay clear of it */
  /* 31 Oct: 28 px lower, clear of our credit under the rail */
  top: calc(var(--safe-t) + 196px);
  width: min(80vw, 340px);
  transform: translateX(-50%);
  text-align: center;
  color: var(--chalk, #f6efe4);
  text-shadow: 0 1px 3px rgba(18, 12, 9, .75), 0 0 14px rgba(18, 12, 9, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}
body.is-photo .cake { opacity: 1; }
body.is-photo.is-racking .cake,
body.is-moving .cake,
body.is-list .cake,
body.is-intro .cake { opacity: 0; }
.cake p { margin: 0; }
.cake__name { font: 700 32px/1.05 var(--hand); transform: rotate(-3deg); text-wrap: balance; }
/* drinks (1 Nov): longer names; narrower and a size smaller, so a title never reaches our credit under the rail */
body[data-section="drinks"] .cake { width: min(62vw, 240px); left: 44%; }
/* the tall chai reaches the note: drinks show the name and one line, the ingredients stay in the
   full menu; short phones show only the name */
body[data-section="drinks"] .cake__ing { display: none; }
@media (max-height: 720px) {
  body[data-section="drinks"] .cake__desc { display: none; }
}
body[data-section="drinks"] .cake__name { font-size: 25px; }
.cake__desc { margin-top: 8px !important; font: 500 15px/1.35 var(--sans); }
.cake__ing { margin-top: 6px !important; font: 600 20px/1.2 var(--hand); text-transform: lowercase; opacity: .95; }


/* ---------------- 31 Oct: the full-menu banner, the sheet's selector, My list ---------------- */

/* the banner: floats over the room just above the dock, so nothing moves */
.coach {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100vw - 40px);
  padding: 10px 16px 10px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(253, 246, 234, .96);
  color: var(--cream-ink);
  font: 400 14px/1.25 var(--sans);
  text-align: left;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity 360ms ease, transform 500ms var(--ease-out);
  pointer-events: none;
}
.coach.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.coach b { font-weight: 700; }
.coach svg {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: coach-up 1.4s var(--ease-out) infinite;
}
@keyframes coach-up {
  0% { transform: translateY(5px); opacity: .3; }
  60% { transform: translateY(-3px); opacity: 1; }
  100% { transform: translateY(-3px); opacity: 0; }
}

/* the selector: the dish on the sheet's middle line lights up; the others rest dimmer */
/* no scroll snap: it jumped to centre a dish whenever a scroll stopped between two (Chris,
   31 Oct). The scroll stays where the finger leaves it; the dish nearest the line is lit. */
html.js .list .item { position: relative; transition: opacity 220ms ease, background-color 220ms ease, box-shadow 220ms ease; }
html.js .list .item::before {
  content: '';
  position: absolute;
  inset: 0 -12px;
  z-index: -1;
  border-radius: 14px;
  background: #fffaf3;
  box-shadow: 0 6px 18px rgba(43, 29, 32, .12), inset 3px 0 0 var(--cream-ink);
  opacity: 0;
  transition: opacity 220ms ease;
}
html.js .list__items { position: relative; z-index: 0; }
html.js .list.has-focus .item { opacity: .55; }
html.js .list.has-focus .item.is-focus { opacity: 1; border-bottom-color: transparent; }
html.js .list .item.is-focus::before { opacity: 1; }
html.js .list .item__photo { transition: transform 260ms var(--ease-out); }
html.js .list .item.is-focus .item__photo { transform: scale(1.12); }
/* the last dishes can reach the middle line too */
html.js .list::after { content: ''; display: block; height: 30vh; }
.item__go { display: none; }
html.js .list .item__go {
  display: block;
  grid-column: 2;
  max-height: 0;
  overflow: hidden;
  font: 700 12.5px/1.2 var(--sans);
  letter-spacing: .02em;
  color: var(--cream-ink);
  opacity: 0;
  transition: max-height 260ms var(--ease-out), opacity 200ms ease, margin 260ms var(--ease-out);
}
html.js .list .item.is-focus .item__go { max-height: 20px; margin-top: 6px; opacity: 1; }

/* hearts: in the dock for the dish on the table, and on every dish of the full menu */
.keep-wrap { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.keep, .fav {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.keep { margin: 0 -8px -2px 0; }
.keep svg, .fav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; transition: fill 200ms ease, transform 200ms ease; }
.keep[aria-pressed="true"] svg, .fav[aria-pressed="true"] svg { fill: #e0574a; stroke: #e0574a; }
.keep.is-pop svg { animation: keep-pop 360ms var(--ease-out); }
@keyframes keep-pop { 40% { transform: scale(1.3); } }
.mine-open {
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 700 14px/1 var(--sans);
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
  cursor: pointer;
}
.mine-open[hidden] { display: none; }
.fav { display: none; }
html.js .list .fav {
  display: grid;
  position: absolute;
  right: -6px;
  bottom: 6px;
  color: var(--cream-muted);
}
html.js .list .item__meta, html.js .list .item__ing, html.js .list .item__go { padding-right: 34px; }

/* My list: a sheet like the full menu's */
.mine {
  position: fixed;
  z-index: 21;
  left: max(16px, calc(50% - 280px));
  right: max(16px, calc(50% - 280px));
  top: calc(var(--safe-t) + 64px);
  bottom: var(--sheet-b, 120px);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 22px;
  background: var(--cream);
  color: var(--cream-ink);
  font: 400 15px/1.45 var(--sans);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 248, 239, .08);
  visibility: hidden;
  opacity: 0;
  transform: translateY(56px) scale(.96);
  transform-origin: 50% 100%;
  transition: transform 260ms cubic-bezier(.5, 0, .75, 0), opacity 220ms ease 40ms, visibility 0s linear 260ms;
}
body.is-mine .mine { visibility: visible; opacity: 1; transform: none; transition: transform 520ms var(--ease-out), opacity 200ms ease; }
body:not(.is-mine):not(.is-mine-leaving) .mine { display: none; }
.mine__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
  padding: 22px 20px 12px;
  background: var(--cream);
  border-bottom: 1px solid var(--cream-line);
}
.mine__title { margin: 0; font: 600 26px/1.1 var(--serif); }
.mine__close {
  align-self: start;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--cream-ink);
  font: 600 14px/1 var(--sans);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.mine__note { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12.5px; color: var(--cream-muted); }
.mine__items { list-style: none; margin: 0; padding: 4px 20px; }
.mine__item { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--cream-line); }
.mine__photo { width: 72px; height: 46px; object-fit: contain; }
.mine__words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mine__name { font: 600 17px/1.2 var(--serif); }
.mine__ask { font-size: 12.5px; color: var(--cream-muted); }
.mine__es { display: none; }
.mine__qty { display: flex; align-items: center; gap: 2px; }
.mine__qty button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--cream-line);
  border-radius: 50%;
  background: #fffaf3;
  color: var(--cream-ink);
  font: 500 18px/1 var(--sans);
  cursor: pointer;
}
.mine__n { min-width: 22px; text-align: center; font: 600 16px/1 var(--sans); font-variant-numeric: tabular-nums; }
.mine__empty { display: none; margin: 0; padding: 26px 20px; color: var(--cream-muted); }
.mine.is-empty .mine__empty { display: block; }
.mine.is-empty .mine__foot { display: none; }
.mine__hello { display: none; }
.mine__foot { margin-top: auto; padding: 14px 20px 18px; }
.mine__total { margin: 0 0 12px; font-size: 15px; }
.mine__total b { font: 600 19px/1 var(--serif); }
.mine__total small { color: var(--cream-muted); font-size: 11.5px; }
.mine__actions { display: flex; justify-content: space-between; gap: 12px; }
.mine__clear, .mine__staff {
  padding: 11px 16px;
  border-radius: 999px;
  font: 600 14px/1 var(--sans);
  cursor: pointer;
}
.mine__clear { border: 1px solid var(--cream-line); background: transparent; color: var(--cream-muted); }
.mine__staff { flex: 1; border: 0; background: var(--cream-ink); color: var(--cream); }

/* "Show to staff": the Spanish names, big, nothing else to read */
.mine.is-staff .mine__head .mine__note,
.mine.is-staff .mine__photo,
.mine.is-staff .mine__name,
.mine.is-staff .mine__ask,
.mine.is-staff .mine__qty button,
.mine.is-staff .mine__clear { display: none; }
.mine.is-staff .mine__hello { display: block; margin: 0; padding: 18px 20px 0; font: italic 500 20px/1.3 var(--serif); }
.mine.is-staff .mine__item { grid-template-columns: auto 1fr; gap: 14px; padding: 14px 0; }
.mine.is-staff .mine__qty { order: -1; }
.mine.is-staff .mine__n { font: 600 28px/1 var(--serif); }
.mine.is-staff .mine__n::after { content: ' ×'; font-size: 20px; }
.mine.is-staff .mine__es { display: flex; flex-direction: column; font: 600 26px/1.1 var(--serif); }
.mine.is-staff .mine__es small { font: 600 12px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cream-muted); }

@media (prefers-reduced-motion: reduce) {
  .coach svg, .keep.is-pop svg { animation: none; }
}

/* the full menu, shorter (31 Oct, Chris: "apenas puedo visualizar 3 items"): allergens behind
   a button with a small pop-up, the ingredients on one line except on the lit dish */
.item__albtn[hidden] { display: none; }
html.js .list .item { padding: 9px 0; }
html.js .list .item__meta { position: relative; align-items: center; }
html.js .list .item__al { display: none; }
html.js .list .item__albtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border: 1px solid var(--cream-line);
  border-radius: 999px;
  background: transparent;
  color: var(--cream-muted);
  font: 500 11.5px/1.5 var(--sans);
  cursor: pointer;
}
html.js .list .item__albtn::before { content: 'i'; display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: var(--cream-muted); color: var(--cream); font: italic 700 9px/1 var(--serif); }
html.js .list .item.is-al .item__albtn { background: var(--cream-ink); border-color: var(--cream-ink); color: var(--cream); }
html.js .list .item.is-al .item__al {
  display: block;
  position: absolute;
  z-index: 3;
  left: 0;
  top: calc(100% + 6px);
  width: max-content;
  max-width: min(240px, 60vw);
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--cream-ink);
  color: var(--cream);
  font: 500 12.5px/1.4 var(--sans);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
}
html.js .list .item__ing {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
html.js .list .item.is-focus .item__ing { -webkit-line-clamp: 3; }

/* ---------------- 31 Oct, later: the guide's spotlight, both banners lit ----------------
   Game-style coach marks: the room dims, only the banner and its target stay lit. */
.spot {
  position: fixed;
  inset: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 450ms ease;
}
.spot.is-on { opacity: 1; }
.spot__dim { fill: rgba(10, 6, 4, .66); }
body.is-list .spot, body.is-mine .spot { opacity: 0; }
/* the banner glows while it waits */
.coach.is-on { animation: coach-glow 1.8s ease-in-out .5s infinite; }
@keyframes coach-glow {
  0%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 0 rgba(253, 246, 234, .55); }
  50% { box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 9px rgba(253, 246, 234, 0); }
}
/* the tap banner: a finger's tap, pulsing */
.coach--tap svg { animation: none; }
.coach--tap .coach__dot { fill: currentColor; stroke: none; }
.coach--tap .coach__ring { transform-origin: 12px 12px; animation: coach-tap 1.3s var(--ease-out) infinite; }
@keyframes coach-tap {
  0% { transform: scale(.4); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* "Tap to see it": a dark pill on the lit dish that pulses and nudges toward the tap */
html.js .list .item.is-focus .item__go { max-height: 34px; margin-top: 8px; }
html.js .list .item__go {
  justify-self: start;
  width: max-content;
  padding: 0;
  border-radius: 999px;
}
html.js .list .item.is-focus .item__go {
  padding: 6px 14px 6px 12px;
  background: var(--cream-ink);
  color: var(--cream);
  animation: go-pulse 1.6s ease-in-out .3s infinite;
}
@keyframes go-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(43, 29, 32, .35); transform: translateX(0); }
  45% { box-shadow: 0 0 0 7px rgba(43, 29, 32, 0); transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .coach.is-on, .coach--tap .coach__ring, html.js .list .item.is-focus .item__go { animation: none; }
}
/* the tap banner's dots, on the dishes either side of the one on the table */
.spot-dot {
  position: fixed;
  z-index: 8;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--chalk, #fdf6ea);
  box-shadow: 0 0 0 0 rgba(253, 246, 234, .7);
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms ease;
  animation: dot-pulse 1.3s var(--ease-out) infinite;
}
.spot-dot.is-on { opacity: 1; }
@keyframes dot-pulse {
  0% { box-shadow: 0 0 0 0 rgba(253, 246, 234, .7); }
  100% { box-shadow: 0 0 0 16px rgba(253, 246, 234, 0); }
}
@media (prefers-reduced-motion: reduce) { .spot-dot { animation: none; } }

/* our credit, under the sections column (31 Oct): small, but on every screen */
.made {
  position: absolute;
  top: calc(var(--safe-t) + 56px + var(--rail-h, 80px) + 14px);
  right: 8px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  color: var(--ink-mute);
  text-decoration: none;
  text-align: right;
  text-shadow: 0 1px 3px rgba(18, 12, 9, .6);
}
.made__by { font: 500 9px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.made__name { font: 600 17px/1 var(--hand); color: var(--ink); }
a.made:hover .made__name { text-decoration: underline; text-underline-offset: 3px; }
body.is-list .made, body.is-mine .made { opacity: .3; }
html:not(.js) .made { display: none; }