/* THE CULINARY COMPASS
   The verified site remains readable without this layer. When the motion engine is alive,
   the compass holds the centre while four real photographs trade places at the edge.
   House pass 2026-07-16: eyebrow kickers removed (the slop law), copy centred inside its
   lane (the centred law), the drawn thali replaced by their real one in the house aperture,
   the slats matched to the 115deg chevron of the real screen (one system with the
   cross-document jali transition in g28.css), and the phone compass decluttered. */

:root {
  --leaf: #426858;
  --saffron: #d27a2c;
  --turmeric: #d4a72c;
}

/* ---- GLOBAL INSTRUMENTS ------------------------------------------------ */
.experience-progress {
  position: fixed; z-index: 260; top: var(--nav-h); left: 0; right: 0; height: 2px;
  pointer-events: none; opacity: 0;
  background: color-mix(in srgb, var(--ic-900) 12%, transparent);
  transition: opacity var(--dur-element) var(--ease-standard);
}
.experience-progress span {
  display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--crimson), var(--brass), var(--crimson));
  box-shadow: 0 0 12px color-mix(in srgb, var(--brass) 70%, transparent);
}
.experience-on .experience-progress { opacity: 1; }

/* ---- THE ODYSSEY ------------------------------------------------------- */
.odyssey {
  --scene-tone: var(--brass);
  position: relative; isolation: isolate; overflow: clip;
  color: var(--ink-on-deep); background: var(--surface-deep);
}
.odyssey__stage {
  position: relative; min-height: calc(100svh - var(--nav-h)); overflow: clip;
  display: grid; align-items: center; padding: var(--space-7) var(--edge);
}
.odyssey__room,
.odyssey__room.frame {
  position: absolute; inset: 0; z-index: -4; width: 100%; height: 100%;
  max-width: none; aspect-ratio: auto; clip-path: none; margin: 0;
}
.odyssey__room .frame__door,
.odyssey__room picture,
.odyssey__room img { width: 100%; height: 100%; }
.odyssey__room img { object-fit: cover; object-position: 46% 64%; scale: 1.08; }
.odyssey__room .frame__scrim {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ic-900) 94%, transparent) 0 28%,
      color-mix(in srgb, var(--ic-900) 48%, transparent) 62%,
      color-mix(in srgb, var(--ic-900) 78%, transparent) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--ic-900) 92%, transparent), transparent 70%);
}
.odyssey__aurora {
  position: absolute; z-index: -2; inset: -30%; pointer-events: none;
  background:
    radial-gradient(38% 30% at calc(50% + var(--light-x, 0px)) calc(48% + var(--light-y, 0px)),
      color-mix(in srgb, var(--scene-tone) 52%, transparent), transparent 72%),
    conic-gradient(from 210deg at 54% 54%, transparent, color-mix(in srgb, var(--scene-tone) 24%, transparent), transparent 45%);
  mix-blend-mode: screen; opacity: 0.7; will-change: transform;
}

.flavor-compass {
  position: relative; z-index: 2; width: min(24rem, 60vw); aspect-ratio: 1;
  margin-inline: auto; display: grid; place-items: center; color: var(--ink-on-deep);
}
.flavor-compass::before,
.flavor-compass::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.flavor-compass::before {
  inset: 0; border: 1px solid color-mix(in srgb, var(--scene-tone) 70%, transparent);
  box-shadow: 0 0 80px color-mix(in srgb, var(--scene-tone) 22%, transparent), inset 0 0 55px color-mix(in srgb, var(--scene-tone) 13%, transparent);
}
.flavor-compass::after { inset: 12%; border: 1px solid color-mix(in srgb, var(--ic-50) 30%, transparent); }
.flavor-compass__dial {
  position: absolute; inset: 7%; border-radius: 50%; will-change: transform;
  background:
    radial-gradient(circle, transparent 0 28%, color-mix(in srgb, var(--scene-tone) 16%, transparent) 29% 30%, transparent 31% 100%),
    repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--scene-tone) 28%, transparent) 0 1deg, transparent 1deg 45deg);
}
.flavor-compass__petals { position: absolute; inset: 0; }
.flavor-compass__petals span {
  position: absolute; left: 50%; top: 50%; width: 1px; height: 46%; transform-origin: 50% 0;
  rotate: calc(var(--i) * 45deg); background: linear-gradient(var(--scene-tone), transparent);
}
.flavor-compass__petals span::after {
  content: ''; position: absolute; left: 50%; top: 68%; width: clamp(14px, 2.2vw, 28px); aspect-ratio: 1;
  translate: -50% -50%; rotate: 45deg; border: 1px solid color-mix(in srgb, var(--scene-tone) 62%, transparent);
}
.flavor-compass__core {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 42%; aspect-ratio: 1;
  display: grid; place-content: center; justify-items: center; gap: 2px; border-radius: 50%;
  background: color-mix(in srgb, var(--ic-900) 88%, transparent); border: 1px solid color-mix(in srgb, var(--brass) 55%, transparent);
  box-shadow: 0 20px 55px color-mix(in srgb, black 35%, transparent);
}
.flavor-compass__core img { width: 38%; opacity: 0.86; }
.flavor-compass__core span { font-family: var(--display); font-size: clamp(var(--ms-dn1), 1.6vw, var(--ms-1)); font-weight: 850; line-height: 1; }
.flavor-compass__core small { font-size: 0.55rem; font-weight: 700; letter-spacing: 0.14em; /* g28-ui-label: compass place legend */ }
.flavor-compass__route {
  position: absolute; top: 50%; left: 50%; margin: 0; width: 132%; max-width: none; translate: -50% -50%;
  display: flex; justify-content: space-between; color: color-mix(in srgb, var(--ic-50) 66%, transparent);
  font-size: 0.52rem; font-weight: 700; letter-spacing: 0.18em; /* g28-ui-label: compass route legend */
}
.flavor-compass__route span { color: var(--scene-tone); }

.odyssey-cards { position: relative; z-index: 3; display: grid; gap: var(--space-5); }
.odyssey-card { position: relative; width: min(30rem, 82vw); aspect-ratio: 4 / 5; margin-inline: auto; }
.odyssey-card__inner {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 48% 48% 1rem 1rem / 19% 19% 1rem 1rem;
  border: 1px solid color-mix(in srgb, var(--card-tone, var(--brass)) 76%, transparent);
  box-shadow: 0 30px 70px color-mix(in srgb, black 45%, transparent), 0 0 34px color-mix(in srgb, var(--card-tone, var(--brass)) 18%, transparent);
  will-change: transform;
}
.odyssey-card[data-tone="0"] { --card-tone: var(--turmeric); }
.odyssey-card[data-tone="1"] { --card-tone: var(--saffron); }
.odyssey-card[data-tone="2"] { --card-tone: var(--crimson); }
.odyssey-card[data-tone="3"] { --card-tone: var(--leaf); }
.odyssey-card__frame,
.odyssey-card__frame.frame { width: 100%; height: 100%; max-width: none; clip-path: none; }
.odyssey-card__frame .frame__door,
.odyssey-card__frame picture,
.odyssey-card__frame img { width: 100%; height: 100%; clip-path: none; }
.odyssey-card__frame::after { display: none; }
.odyssey-card__frame img { object-fit: cover; transition: scale 900ms var(--ease-expressive); }
/* The photograph names its region and nothing else: the 01-04 counter that used to sit
   opposite it was decoration (Campbell, 2026-07-17), and a caption with one thing to say
   does not need two ends. */
.odyssey-card__label {
  position: absolute; z-index: 3; left: var(--space-5); right: var(--space-5); bottom: var(--space-4);
  display: flex; justify-content: flex-start; max-width: none; margin: 0; padding-top: var(--space-3);
  color: var(--ic-50); border-top: 1px solid color-mix(in srgb, var(--ic-50) 40%, transparent);
  font-size: var(--ms-dn2); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; /* g28-ui-label: photograph chapter label */
  text-shadow: 0 2px 10px var(--ic-900);
}
.odyssey-card__label::before { content: ''; position: absolute; z-index: -1; inset: -5rem -2rem -2rem; background: linear-gradient(transparent, color-mix(in srgb, var(--ic-900) 78%, transparent)); }
.odyssey-card__inner::after,
[data-magic-frame]::after {
  content: ''; position: absolute; z-index: 4; inset: -35%; pointer-events: none; opacity: var(--shine-alpha, 0);
  background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 50%), color-mix(in srgb, white 42%, transparent), transparent 23%);
  mix-blend-mode: screen; transition: opacity 500ms var(--ease-standard);
}

.odyssey__panels { position: relative; z-index: 4; display: grid; gap: var(--space-10); }
.odyssey__panel {
  min-height: 58svh; display: grid; align-content: center; justify-items: center;
  gap: var(--space-4); padding: var(--space-6); text-shadow: 0 2px 22px color-mix(in srgb, var(--ic-900) 80%, transparent);
}
.odyssey__panel h1,
.odyssey__panel h2 { color: var(--ink-on-deep); }
.odyssey__panel h1 { font-size: clamp(var(--ms-5), 7.2vw, 6.4rem); max-width: 11ch; }
.odyssey__panel h2 { font-size: clamp(var(--ms-4), 6vw, var(--ms-6)); max-width: 12ch; }
.odyssey__panel .lead { color: var(--ic-100); max-width: 40ch; }
.odyssey__panel .keystone { order: -1; margin-bottom: 0; color: var(--ic-50); background: color-mix(in srgb, var(--ic-900) 74%, transparent); }
/* The ledger line: region and price as one entry under the dish, the way a menu book
   writes it. Data wearing a rule, never a kicker floating over a headline. */
.odyssey__ledger {
  display: inline-flex; align-items: baseline; gap: var(--space-4);
  padding-top: var(--space-3); border-top: 1px solid color-mix(in srgb, var(--brass) 55%, transparent);
  color: var(--brass); font-size: var(--ms-0); font-weight: 650;
}
.odyssey__ledger .num { font-size: var(--ms-1); font-weight: 750; }
.odyssey__rail,
.odyssey__cue { display: none; }

.experience-on .odyssey { height: 570svh; }
.experience-on .odyssey__stage {
  position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); min-height: 0;
  display: block; padding: 0;
}
.experience-on .flavor-compass {
  position: absolute; z-index: 4; left: 50%; top: 31%; margin: 0; translate: none;
  width: min(17rem, 17vw); will-change: transform, opacity;
}
.experience-on .odyssey-cards {
  position: absolute; z-index: 5; right: max(4vw, var(--edge)); bottom: 4%;
  width: min(28rem, 30vw); height: min(35rem, 64svh); display: block;
}
.experience-on .odyssey-card { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; will-change: clip-path, transform, opacity; }
.experience-on .odyssey__panels { position: absolute; z-index: 7; inset: 0; display: block; }
/* The copy lane sits left of the cards, but the words inside it stay CENTRED: the
   centred law holds inside the lane, the lane holds the cinema. */
.experience-on .odyssey__panel {
  position: absolute; inset: 0; min-height: 0; opacity: 0; visibility: hidden;
  align-content: end; justify-items: center; text-align: center;
  padding: var(--space-8) max(var(--edge), calc((100vw - 75rem) / 2));
  padding-right: 53vw; pointer-events: none; will-change: transform, opacity;
}
.experience-on .odyssey__panel > * { margin-inline: auto; }
.experience-on .odyssey__panel .actions { justify-content: center; }
.experience-on .odyssey__panel[data-scene="intro"] { opacity: 1; visibility: visible; }
.experience-on .odyssey__panel[data-scene="final"] {
  align-content: center; padding: var(--space-8) var(--edge);
}
.experience-on .odyssey__rail {
  position: absolute; z-index: 9; left: 50%; right: auto; top: var(--space-4); translate: -50% 0;
  display: flex; gap: var(--space-4); padding: 0; list-style: none;
}
.odyssey__rail li {
  display: grid; grid-template-columns: 8px auto; align-items: center; gap: var(--space-2);
  color: var(--ink-on-deep-muted); font-size: var(--ms-dn2); font-weight: 600;
}
.odyssey__rail li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ic-500); transition: scale var(--dur-element) var(--ease-standard), background-color var(--dur-element) var(--ease-standard);
}
.odyssey__rail li[aria-current="step"] { color: var(--ink-on-deep); }
.odyssey__rail li[aria-current="step"]::before { scale: 1.8; background: var(--brass); box-shadow: 0 0 12px var(--brass); }
.experience-on .odyssey__cue {
  position: absolute; z-index: 9; left: 50%; bottom: var(--space-3); translate: -50% 0;
  display: flex; gap: var(--space-2); color: var(--ic-100); font-size: var(--ms-dn1); font-weight: 600;
}
.odyssey__cue::after { content: '↓'; color: var(--brass); animation: odyssey-cue 1.8s var(--ease-standard) infinite; }
@keyframes odyssey-cue { 50% { transform: translateY(6px); } }

/* ---- SET THE TABLE (the composer) ------------------------------------- */
.table-set {
  position: relative; overflow: clip; padding-block: var(--space-10);
  background:
    radial-gradient(52% 46% at 12% 18%, color-mix(in srgb, var(--saffron) 15%, transparent), transparent 74%),
    radial-gradient(55% 52% at 86% 74%, color-mix(in srgb, var(--leaf) 12%, transparent), transparent 76%),
    radial-gradient(60% 54% at 20% 46%, color-mix(in srgb, var(--brass) 22%, transparent), transparent 74%),
    var(--surface-sunk);
}
.table-set__in { display: grid; gap: var(--space-9); align-items: start; }
.table-set__visual { position: relative; display: grid; place-items: center; }
/* THE SERVICE: their own gold thali, photographed at their own table, held in the house
   aperture (the card arch the odyssey taught, not the ogee lintel). No drawn plate, no
   cartoon brass: the framing law holds even inside an interaction. */
.builder-service { position: relative; display: grid; gap: var(--space-5); justify-items: center; width: 100%; }
.builder-service__f,
.builder-service__f.frame {
  position: relative; width: min(32rem, 100%); max-width: none; aspect-ratio: 4 / 3;
  margin: 0; overflow: hidden; clip-path: none;
  border-radius: 44% 44% 1rem 1rem / 24% 24% 1rem 1rem;
  border: 1px solid color-mix(in srgb, var(--brass) 76%, transparent);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--ic-900) 28%, transparent),
    0 0 30px color-mix(in srgb, var(--brass) 14%, transparent);
}
.builder-service__f .frame__door,
.builder-service__f picture,
.builder-service__f img { width: 100%; height: 100%; clip-path: none; }
.builder-service__f::after { display: none; }
.builder-service__f img { object-fit: cover; }

/* THE SEATS: one brass dot per person at the table. It is the party size made physical, so
   the number on the stepper is never abstract: three people is three places set. */
.builder-seats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: 0; min-height: 1rem; }
.builder-seats span {
  width: 0.85rem; height: 0.85rem; border-radius: var(--r-full);
  background: radial-gradient(120% 120% at 40% 30%, var(--gold), var(--brass));
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ic-900) 40%, transparent);
}
/* THE PER-HEAD TOKEN: the number that answers "is this in my budget" without a menu-math
   headache. It sits on the plate's lower edge like a check laid on the table. */
.builder-badge {
  position: absolute; right: 4%; bottom: -0.75rem; z-index: 2; margin: 0;
  display: grid; justify-items: center; gap: 1px; padding: var(--space-3) var(--space-4);
  border-radius: var(--r-full); text-align: center; color: var(--ic-900);
  background: radial-gradient(130% 130% at 50% 18%, var(--gold), var(--brass));
  border: 2px solid color-mix(in srgb, var(--ic-900) 22%, transparent);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--ic-900) 34%, transparent);
}
.builder-badge .num { font-family: var(--display); font-weight: 800; font-size: var(--ms-3); line-height: 0.95; }
.builder-badge__k { font-size: var(--ms-dn2); font-weight: 700; opacity: 0.86; /* g28-decorative */ }

.table-set__copy { display: grid; gap: var(--space-6); justify-items: center; }

/* THE CONTROLS: three plain questions. No uppercase kickers (the slop law); the label is
   a quiet lead-in and the control does the talking. */
.lay-controls { display: grid; gap: var(--space-4); width: min(100%, 40rem); }
.lay-ctl {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
  margin: 0; padding: 0; border: 0;
}
.lay-ctl__label { font-size: var(--ms-dn1); font-weight: 600; color: var(--ink-muted); min-width: 8.5rem; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-pill); overflow: hidden; }
.stepper__btn {
  min-width: 3rem; min-height: 3rem; border: 0; background: transparent; color: var(--ink);
  font-size: var(--ms-2); line-height: 1; cursor: pointer;
}
.stepper__btn:hover:not(:disabled) { background: color-mix(in srgb, var(--brass) 22%, transparent); }
.stepper__btn:disabled { opacity: 0.35; cursor: not-allowed; /* g28-decorative */ }
.stepper__val { min-width: 2.5rem; text-align: center; font-family: var(--display); font-weight: 800; font-size: var(--ms-2); }
.segmented { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
.seg {
  min-height: 3rem; padding: 0 var(--space-4); border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); background: transparent; color: var(--ink); font: inherit;
  font-size: var(--ms-dn1); font-weight: 700; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.seg:hover { border-color: var(--accent); }
.seg.is-active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

/* THE LAY: the composed table itself, rendered as the menu's own ledger row so it reads as
   a real order, not a widget. */
.lay { width: min(100%, 40rem); display: grid; gap: var(--space-5); text-align: left; }
.lay__say { font-family: var(--display); font-size: var(--ms-2); font-weight: 700; line-height: 1.2; text-wrap: balance; margin: 0; }
.lay__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.lay__row {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--space-2) var(--space-4);
  padding-block: var(--space-3); border-top: 1px solid var(--line);
}
.lay__main { display: grid; gap: 2px; }
.lay__n { font-family: var(--display); font-size: var(--ms-1); font-weight: 700; margin: 0; }
.lay__role { font-size: var(--ms-dn1); color: var(--ink-muted); margin: 0; }
.lay__p { font-weight: 700; margin: 0; white-space: nowrap; }
.lay__foot { display: grid; gap: var(--space-2); }
.lay__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  padding-top: var(--space-4); border-top: 2px solid var(--ink);
  font-family: var(--display); font-size: var(--ms-2); font-weight: 800; margin: 0;
}
.lay__note { margin: 0; color: var(--ink-muted); }

/* ---- THE ROOM PASSAGE -------------------------------------------------- */
.room-passage { position: relative; overflow: clip; background: var(--surface-deep); color: var(--ink-on-deep); }
.room-passage__stage { position: relative; min-height: 94svh; overflow: clip; display: grid; place-items: center; }
.room-passage__room,
.room-passage__jali,
.room-passage__room.frame,
.room-passage__jali.frame {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  aspect-ratio: auto; clip-path: none; margin: 0;
}
.room-passage__room .frame__door,
.room-passage__jali .frame__door,
.room-passage__room picture,
.room-passage__jali picture,
.room-passage__room img,
.room-passage__jali img { width: 100%; height: 100%; }
.room-passage__room img,
.room-passage__jali img { object-fit: cover; }
.room-passage__room img { object-position: 50% 46%; scale: 1.06; }
.room-passage__jali img { object-position: 62% 40%; scale: 1.08; }
.room-passage__room { opacity: 0; }
.room-passage__jali { opacity: 1; }
.room-passage__slats { position: absolute; z-index: 3; inset: -12% -16%; overflow: hidden; pointer-events: none; }
/* The slats lean 25deg: the same 115deg chevron the cross-document jali transition runs,
   measured off their real screen. Matte lacquered wood, never a glossy plastic ridge. */
.room-passage__slats span {
  position: absolute; top: -10%; bottom: -10%; left: calc(var(--i) * 9% - 8%); width: 7%;
  opacity: 0; transform: skewX(-25deg); transform-origin: center;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--crimson) 58%, var(--ic-900)),
    color-mix(in srgb, var(--crimson) 88%, var(--ic-900)) 55%,
    color-mix(in srgb, var(--crimson) 46%, var(--ic-900)));
  box-shadow: 6px 0 18px color-mix(in srgb, var(--ic-900) 44%, transparent);
  will-change: transform, opacity;
}
.room-passage__copy {
  position: relative; z-index: 5; display: grid; justify-items: center; gap: var(--space-5);
  padding: var(--space-8) var(--edge); text-shadow: 0 2px 24px var(--ic-900);
}
/* The copy's own ground: the lead crosses the white booth panel in the settled frame, and
   the contrast scar says the worst pixel is the one that counts. A soft pool of the deep
   surface sits under the words, doing contrast work, not decoration. */
.room-passage__copy::before {
  content: ''; position: absolute; z-index: -1; inset: -12% -8%;
  background: radial-gradient(58% 70% at 50% 55%,
    color-mix(in srgb, var(--ic-900) 62%, transparent), transparent 78%);
}
.room-passage__copy h2 { color: var(--ink-on-deep); font-size: clamp(var(--ms-4), 7vw, var(--ms-7)); max-width: 13ch; }
.room-passage__copy .lead { color: var(--ic-100); max-width: 39ch; }
.experience-on .room-passage { height: 250svh; }
.experience-on .room-passage__stage {
  position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); min-height: 0;
}
.experience-on .room-passage__copy { opacity: 0; transform: translateY(42px); }

/* ---- VOICES ------------------------------------------------------------ */
.voices {
  padding-block: var(--space-10); overflow: clip;
  background:
    radial-gradient(42% 34% at 8% 14%, color-mix(in srgb, var(--saffron) 10%, transparent), transparent 75%),
    radial-gradient(38% 30% at 92% 78%, color-mix(in srgb, var(--leaf) 10%, transparent), transparent 78%);
}
.voices__head { display: grid; gap: var(--space-3); margin-bottom: var(--space-9); justify-items: center; text-align: center; }
.voices__score { font-family: var(--display); font-size: var(--ms-3); font-weight: 800; color: var(--accent); }
.voices__set { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-10) var(--gutter); align-items: center; }
/* Scattered across the twelve columns, but every voice reads centred (the centred law);
   the tone rule sits above each like a place marker, never a left margin flag. */
.voice { position: relative; display: grid; gap: var(--space-4); align-content: center; justify-items: center; text-align: center; padding-top: var(--space-4); }
.voice::before {
  content: ''; position: absolute; left: 50%; top: 0; translate: -50% 0; height: 2px; width: 3rem;
  background: linear-gradient(90deg, transparent, var(--voice-tone, var(--brass)), transparent);
}
.voice:nth-child(3n + 1) { --voice-tone: var(--saffron); }
.voice:nth-child(3n + 2) { --voice-tone: var(--leaf); }
.voice:nth-child(3n) { --voice-tone: var(--crimson); }
.voice:nth-child(1) { grid-column: 1 / 8; }
.voice:nth-child(2) { grid-column: 8 / 13; }
.voice:nth-child(3) { grid-column: 4 / 12; }
.voice:nth-child(4) { grid-column: 1 / 6; }
.voice:nth-child(5) { grid-column: 7 / 13; }
.voice:nth-child(6) { grid-column: 3 / 11; }
.voice blockquote p {
  font-family: var(--display); font-size: clamp(var(--ms-2), 3.5vw, var(--ms-4));
  font-weight: 300; line-height: 1.25; max-width: 29ch; margin-inline: auto; text-wrap: balance;
}
.voice blockquote p::before { content: '“'; color: var(--brass); }
.voice blockquote p::after { content: '”'; color: var(--brass); }
.voice figcaption { font-size: var(--ms-dn1); font-weight: 700; }
.voice__meta { display: block; color: var(--ink-muted); font-weight: 500; }
/* The katori circle drawn geometrically as well as by the SVG reference: a composited
   (parallaxed) child can escape a url() clip in Chromium, and the corners of the
   photograph read as a matte ghost. border-radius clips compositor layers reliably. */
.voice__f { width: min(15rem, 42vw); border-radius: 50%; overflow: hidden; }

/* ---- PAGE PORTALS ------------------------------------------------------ */
.book-portal,
.arrival-hero { position: relative; min-height: calc(100svh - var(--nav-h)); overflow: clip; display: grid; place-items: end center; }
.book-portal__frame,
.arrival-hero__frame,
.book-portal__frame.frame,
.arrival-hero__frame.frame {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  aspect-ratio: auto; clip-path: none; margin: 0;
}
.book-portal__frame .frame__door,
.arrival-hero__frame .frame__door,
.book-portal__frame picture,
.arrival-hero__frame picture,
.book-portal__frame img,
.arrival-hero__frame img { width: 100%; height: 100%; }
.book-portal__frame .frame__door,
.arrival-hero__frame .frame__door { clip-path: none; }
.book-portal__frame img,
.arrival-hero__frame img { object-fit: cover; }
.book-portal__frame .frame__scrim,
.arrival-hero__frame .frame__scrim {
  background:
    radial-gradient(50% 46% at 18% 16%, color-mix(in srgb, var(--saffron) 23%, transparent), transparent 76%),
    linear-gradient(0deg, var(--ic-900) 0%, color-mix(in srgb, var(--ic-900) 74%, transparent) 48%, transparent 88%);
}
.arrival-hero__frame .frame__scrim {
  background:
    radial-gradient(54% 48% at 78% 14%, color-mix(in srgb, var(--leaf) 34%, transparent), transparent 76%),
    linear-gradient(0deg, var(--ic-900) 0%, color-mix(in srgb, var(--ic-900) 72%, transparent) 48%, transparent 88%);
}
.book-portal__copy,
.arrival-hero__copy {
  position: relative; z-index: 2; display: grid; justify-items: center; gap: var(--space-4);
  padding: var(--space-8) var(--edge) var(--space-9); color: var(--ink-on-deep);
}
.book-portal__copy .display,
.arrival-hero__copy .display { color: var(--ink-on-deep); max-width: 13ch; }
.book-portal__copy .subhead,
.arrival-hero__copy .subhead { color: var(--ic-100); }
.arrival-hero__frame img { object-position: 50% 52%; }
.book-portal__frame img { object-position: 50% 64%; }

/* Existing pages join the same motion grammar without losing their semantic fallback. */
.bar-hero__stage::after {
  content: ''; position: absolute; z-index: 3; inset: 8% 18%; pointer-events: none;
  background: linear-gradient(108deg, transparent 36%, color-mix(in srgb, white 48%, transparent) 50%, transparent 64%);
  mix-blend-mode: screen; translate: -110% 0; animation: glass-light 8s var(--ease-standard) infinite;
}
@keyframes glass-light { 55%, 100% { translate: 110% 0; } }
.story-hero__frame,
.bar-hero__stage,
.chap__f,
.chap__wide { will-change: transform; }

/* Photographs respond like polished objects, not links with a canned scale-up. The frame
   tilts a few degrees toward the pointer while a soft light follows inside it. */
[data-magic-frame] { --shine-alpha: 0; position: relative; }
@media (hover: hover) and (pointer: fine) {
  [data-magic-frame] img { transition: scale 900ms var(--ease-expressive); }
  [data-magic-frame]:hover img { scale: 1.055; }
}

/* The book takes restrained colour from the actual room: orange light, the green wall,
   crimson screen. It marks rhythm without turning menu rows into coloured cards. */
.chap--plate:nth-of-type(4n + 1) .chap__side { border-top: 3px solid color-mix(in srgb, var(--saffron) 74%, transparent); padding-top: var(--space-4); }
.chap--plate:nth-of-type(4n + 2) .chap__side { border-top: 3px solid color-mix(in srgb, var(--leaf) 74%, transparent); padding-top: var(--space-4); }
.chap--plate:nth-of-type(4n + 3) .chap__side { border-top: 3px solid color-mix(in srgb, var(--crimson) 68%, transparent); padding-top: var(--space-4); }
.chap--type .chap__shout { color: color-mix(in srgb, var(--ink) 88%, var(--leaf)); }

/* ---- ARRIVAL MODE ------------------------------------------------------ */
.journey {
  position: fixed; z-index: 280; left: 50%; bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  translate: -50% calc(100% + var(--space-8)); width: min(calc(100% - 2 * var(--edge)), 58rem);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-3) var(--space-5);
  padding: var(--space-4) var(--space-5); color: var(--ink-on-deep);
  background: color-mix(in srgb, var(--ic-900) 96%, transparent); border: 1px solid color-mix(in srgb, var(--brass) 56%, transparent);
  box-shadow: var(--e4); opacity: 0; pointer-events: none;
  transition: translate var(--dur-cinematic) var(--ease-expressive), opacity var(--dur-element) var(--ease-standard);
}
.journey.is-active { translate: -50% 0; opacity: 1; pointer-events: auto; }
.journey__copy { display: grid; gap: var(--space-1); text-align: center; justify-items: center; }
.journey__title { font-family: var(--display); font-size: var(--ms-1); font-weight: 800; }
.journey__line { color: var(--ink-on-deep-muted); font-size: var(--ms-dn1); }
.journey__table { color: var(--brass); font-size: var(--ms-dn2); font-weight: 650; }
.journey__actions { display: flex; align-items: center; gap: var(--space-2); }
.journey__actions a,
.journey__close {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 10px var(--space-4); border: 1px solid var(--line-on-deep); color: var(--ink-on-deep);
  background: transparent; font: inherit; font-size: var(--ms-dn1); font-weight: 700; text-decoration: none; cursor: pointer;
}
.journey__actions a:first-child { background: var(--accent); border-color: var(--accent); }
.journey__close { width: 48px; padding: 0; }
.journey-launch {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 12px var(--space-5); border: 1px solid color-mix(in srgb, var(--brass) 70%, transparent);
  background: color-mix(in srgb, var(--ic-900) 55%, transparent); color: var(--ink-on-deep);
  font: inherit; font-weight: 700; cursor: pointer;
}

/* ---- RESPONSIVE -------------------------------------------------------- */
@media (min-width: 64rem) {
  .table-set__in { grid-template-columns: 5fr 7fr; }
  .table-set__visual { position: sticky; top: calc(var(--nav-h) + var(--space-5)); }
  .table-set__copy { justify-items: start; text-align: left; padding-top: var(--space-6); }
  .table-set__copy > * { margin-inline: 0; }
}

@media (max-width: 63.99rem) {
  .experience-on .odyssey { height: 520svh; }
  .experience-on .flavor-compass { left: 17%; top: 20%; width: min(13rem, 26vw); }
  .experience-on .odyssey-cards { right: 4%; top: 6%; bottom: auto; width: min(24rem, 54vw); height: 48%; }
  .experience-on .odyssey__panel {
    align-content: end; justify-items: center; text-align: center;
    padding: var(--space-6) var(--edge) var(--space-9); padding-right: var(--edge);
    background: linear-gradient(0deg, color-mix(in srgb, var(--ic-900) 96%, transparent), transparent 62%);
  }
  .experience-on .odyssey__panel > * { margin-inline: auto; }
  .experience-on .odyssey__panel .actions { justify-content: center; }
  .experience-on .odyssey__rail { left: auto; top: var(--space-5); right: var(--edge); translate: 0; }
  .odyssey__rail li { grid-template-columns: 8px; }
  .odyssey__rail li span { display: none; }
  .voices__set {
    position: relative; left: calc(var(--edge) * -1); width: calc(100% + 2 * var(--edge));
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(17rem, 84vw);
    gap: var(--space-5); overflow-x: auto; scroll-snap-type: inline mandatory;
    overscroll-behavior-inline: contain; scrollbar-width: none; padding: var(--space-4) var(--edge) var(--space-7);
  }
  .voices__set::-webkit-scrollbar { display: none; }
  .voice, .voice:nth-child(n) {
    grid-column: auto; min-height: 31rem; align-content: center; padding: var(--space-6);
    scroll-snap-align: center; border-block: 1px solid var(--line);
  }
}

@media (max-width: 48rem) {
  .odyssey__stage { padding-inline: 0; }
  .odyssey__room img { object-position: 44% 66%; scale: 1.5; transform-origin: 44% 72%; }
  .odyssey__room .frame__scrim {
    background: linear-gradient(0deg, var(--ic-900) 0 20%, color-mix(in srgb, var(--ic-900) 72%, transparent) 58%, transparent 100%);
  }
  .experience-on .odyssey { height: 500svh; }
  /* the phone compass is an emblem, not an instrument panel: the route legend and the
     ring text would collide with the core at this size, so only the dial and the seal ride */
  .experience-on .flavor-compass { left: 15%; top: 16%; width: min(6.5rem, 24vw); }
  .flavor-compass__route { display: none; }
  .flavor-compass__core small { display: none; }
  .experience-on .odyssey-cards { right: 4%; top: 4%; width: 58vw; height: 38%; }
  .odyssey-card__inner { border-radius: 44% 44% 0.75rem 0.75rem / 17% 17% 0.75rem 0.75rem; }
  .odyssey__panel { padding-inline: var(--edge); }
  .odyssey__panel h1 { font-size: clamp(2.3rem, 10.5vw, var(--ms-5)); }
  .odyssey__panel h2 { font-size: clamp(var(--ms-3), 9vw, var(--ms-5)); }
  .odyssey__panel .lead { font-size: var(--ms-0); line-height: 1.38; max-width: 32ch; }
  .experience-on .odyssey__panel { gap: var(--space-3); padding-bottom: var(--space-5); }
  .experience-on .odyssey__panel[data-scene="intro"],
  .experience-on .odyssey__panel[data-scene="final"] { padding-bottom: var(--space-5); }
  .experience-on .odyssey__panel .keystone {
    max-width: 100%; padding: 10px var(--space-3); font-size: var(--ms-dn2); line-height: 1.25;
  }
  .experience-on .odyssey__panel .actions { width: 100%; flex-wrap: nowrap; gap: var(--space-2); }
  .experience-on .odyssey__panel .actions .btn,
  .experience-on .odyssey__panel .actions .journey-launch {
    flex: 1 1 0; min-width: 0; padding-inline: var(--space-2); font-size: var(--ms-dn1);
  }
  .experience-on .odyssey__cue { display: none; }

  .table-set { padding-block: var(--space-8); }
  .table-set__in { gap: var(--space-7); }
  .builder-service__f { width: min(30rem, 94vw); }
  .table-set__copy { gap: var(--space-4); }
  /* the label stops reserving a fixed lane on a phone so the control gets the full width */
  .lay-ctl { gap: var(--space-2); }
  .lay-ctl__label { min-width: 100%; }
  .segmented { width: 100%; }
  .seg { flex: 1 1 6rem; padding-inline: var(--space-2); }

  /* One thumb flick covers ~1500px, and at 250svh the passage's whole scroll span WAS
     1331px: the reveal was spent in a single swipe and the hold had nowhere to live.
     At 320svh the span is ~1850px, so the payoff lands inside the flick and the room
     still holds the screen afterwards. Measured on a 390x844 phone, 2026-07-17. */
  .experience-on .room-passage { height: 320svh; }
  .room-passage__copy { padding-bottom: var(--space-9); align-self: end; }
  .room-passage__copy .lead { font-size: var(--ms-0); }
  .room-passage__room img { object-position: 50% 50%; scale: 1.35; }
  .room-passage__jali img { scale: 1.4; }

  .book-portal,
  .arrival-hero { min-height: max(43rem, calc(100svh - var(--nav-h))); }
  .book-portal__copy,
  .arrival-hero__copy { padding-bottom: var(--space-8); }
  .book-portal__frame img { scale: 1.36; transform-origin: 50% 66%; }
  .arrival-hero__frame img { scale: 1.32; transform-origin: 50% 54%; }

  .journey { grid-template-columns: 1fr; padding: var(--space-4); }
  .journey__table { font-size: var(--ms-dn1); line-height: 1.35; }
  .journey__actions { display: grid; grid-template-columns: 1fr 1fr 48px; }
  .journey__actions a { padding-inline: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  .experience-progress { display: none; }
  .odyssey__cue::after,
  .bar-hero__stage::after { animation: none; animation-delay: 0ms; }
  .odyssey__aurora { display: none; }
  .flavor-compass,
  .flavor-compass__dial,
  .odyssey-card,
  .builder-seats span,
  .room-passage__slats span { transform: none !important; }
  .room-passage__room { opacity: 1; }
  .room-passage__jali { opacity: 0; }
  .room-passage__slats { display: none; }
  .journey { transition: none; }
}