/* OTO Sushi - Coastal Parchment
   Tokens follow OTO-STYLE-GUIDE.md. Warm parchment canvas, ocean-ink type,
   brass only as a hairline accent, square photography, outlined actions. */

/* Satoshi — the body face named in the brand handoff, self-hosted (Fontshare, free
   for commercial use). Replaces the Manrope substitute: same coastal-modern register,
   but with the flatter terminals and quieter apertures that read as editorial rather
   than product UI. url() is relative to this stylesheet, so clean URLs resolve fine. */
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --oto-color-parchment: #e7dfd2;
  --oto-color-sand: #d8cbb8;
  --oto-color-shell: #f4eee5;
  --oto-color-driftwood: #b8ac99;
  --oto-color-oak: #655f55;
  --oto-color-ocean: #142a32;
  --oto-color-tide: #102129;
  --oto-color-brass: #b18a58;

  --oto-surface-page: var(--oto-color-parchment);
  --oto-surface-secondary: var(--oto-color-sand);
  --oto-surface-dark: var(--oto-color-tide);
  --oto-text: var(--oto-color-ocean);
  --oto-text-muted: var(--oto-color-oak);
  --oto-text-inverse: var(--oto-color-shell);
  --oto-border: var(--oto-color-driftwood);
  --oto-control-border: var(--oto-color-ocean);
  --oto-focus: var(--oto-color-ocean);

  --oto-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --oto-font-body: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --oto-weight-light: 300;
  --oto-weight-body: 400;
  --oto-weight-medium: 500;
  --oto-weight-bold: 700;
  --oto-text-caption: 0.8125rem;
  --oto-text-label: 0.875rem;
  --oto-text-body: 1rem;
  --oto-text-intro: clamp(1.25rem, 1rem + 0.75vw, 1.625rem);
  --oto-text-card: clamp(1.75rem, 1.5rem + 0.8vw, 2.25rem);
  --oto-text-subheading: clamp(2rem, 1.4rem + 2vw, 3.125rem);
  --oto-text-heading: clamp(2.25rem, 1.25rem + 3vw, 4rem);
  --oto-text-display: clamp(3rem, 1.5rem + 5vw, 5.75rem);
  --oto-text-wordmark: clamp(4rem, 1rem + 14vw, 12.4375rem);
  --oto-leading-body: 1.6;
  --oto-leading-display: 0.96;
  --oto-tracking-display: -0.035em;
  --oto-tracking-body: -0.006em;
  --oto-tracking-label: 0.025em;

  --oto-gutter: clamp(1.25rem, 4.5vw, 4rem);
  --oto-section-space: clamp(3rem, 5vw, 4.5rem);
  --oto-layout-gap: clamp(1.5rem, 3.5vw, 3rem);
  --oto-element-gap: 1rem;
  --oto-page-max: 90rem;
  --oto-copy-max: 60ch;
  --oto-radius-card: 0;
  --oto-radius-control: 3px;
  --oto-duration: 240ms;
  --oto-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --oto-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --oto-header-h: 4.75rem;
}

/* ---------- Veil: navy sheet, small gold brand, a diagonal cut at the chopstick angle that widens ----------
   Two panes split along a line through the centre; they slide apart along the line's normal. On the home page the
   hero video is already playing behind the cut, so the opening feels continuous. Progress is driven from oto.js. */
html.oto-loading { overflow: hidden; }
.oto-veil { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.oto-veil__cut { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 0; block-size: 0; transform: rotate(var(--veil-angle, 34deg)); }
.oto-veil__pane { position: absolute; inset-inline-start: -260vmax; inline-size: 520vmax; block-size: 260vmax; background: var(--oto-color-tide); will-change: transform; }
.oto-veil__pane--a { inset-block-end: 0; border-block-end: 1px solid var(--oto-color-brass); box-shadow: 0 1px 0 rgb(177 138 88 / 35%), 0 0 24px rgb(177 138 88 / 25%); transform: translateY(calc(-1 * var(--veil-gap, 0px))); }
.oto-veil__pane--b { inset-block-start: 0; border-block-start: 1px solid var(--oto-color-brass); box-shadow: 0 -1px 0 rgb(177 138 88 / 35%), 0 0 24px rgb(177 138 88 / 25%); transform: translateY(var(--veil-gap, 0px)); }
.oto-veil__brand { position: absolute; inset-block-start: 0; inset-inline-start: 0; transform-origin: top left; opacity: 0; color: var(--oto-color-shell); will-change: transform, opacity; }
.oto-veil__brand .oto-header__mark, .oto-veil__brand .oto-header__name { visibility: visible; }
body.oto-veiled .oto-header .oto-header__mark, body.oto-veiled .oto-header .oto-header__name { visibility: hidden; }
body.oto-veil-landed .oto-veil { display: none; }
/* Leaving for another page: the veil comes back and closes along the same cut, the next page opens it again,
   so moving between pages reads as one continuous cut rather than a reload. */
body.oto-leaving .oto-veil { display: block; }
/* ease-in-out cubic, not the intro's quint: a click has to answer at once, and quint sits still for its first third */
body.oto-leaving .oto-veil__pane { transition: transform 560ms cubic-bezier(0.65, 0, 0.35, 1); }
@media (prefers-reduced-motion: reduce) { .oto-veil { display: none; } body.oto-veiled .oto-header .oto-header__mark, body.oto-veiled .oto-header .oto-header__name { visibility: visible; } }

/* ---------- Theme: dark ----------
   html[data-theme="dark"] flips the canvas to Evening Tide; brass, photography, and the dark bands keep their roles. */
html[data-theme="dark"] {
  color-scheme: dark;
  --oto-surface-page: #12242d;
  --oto-surface-secondary: #183038;
  --oto-surface-dark: #0b161c;
  --oto-text: var(--oto-color-shell);
  --oto-text-muted: #c9bda9;
  --oto-text-inverse: var(--oto-color-shell);
  --oto-border: #35494f;
  --oto-control-border: var(--oto-color-shell);
  --oto-focus: var(--oto-color-brass);
}
html[data-theme="dark"] .oto-site ::selection { background: var(--oto-color-brass); color: var(--oto-color-tide); }
html[data-theme="dark"] .oto-button:hover { background: var(--oto-color-shell); color: var(--oto-color-ocean); }
html[data-theme="dark"] .oto-button--solid { background: var(--oto-color-shell); color: var(--oto-color-ocean); border-color: var(--oto-color-shell); }
html[data-theme="dark"] .oto-header { border-block-end: 1px solid rgb(244 238 229 / 8%); }
html[data-theme="dark"] .mn-chip[aria-pressed="true"] { background: var(--oto-color-shell); color: var(--oto-color-ocean); border-color: var(--oto-color-shell); }
html[data-theme="dark"] .mn-chip[aria-pressed="true"]::before { background: var(--oto-color-brass); border-color: var(--oto-color-brass); }
html[data-theme="dark"] .mn-tag { color: var(--oto-text-muted); border-color: var(--oto-border); }
html[data-theme="dark"] .oto-mobile-actions { --oto-text: var(--oto-color-shell); --oto-control-border: var(--oto-color-shell); --oto-focus: var(--oto-color-brass); background: var(--oto-surface-dark); color: var(--oto-color-shell); border-block-start-color: rgb(244 238 229 / 12%); }
html[data-theme="dark"] .oto-mobile-actions .oto-button:hover { background: var(--oto-color-shell); color: var(--oto-color-ocean); }

/* Theme toggle */
.oto-theme { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border: 1px solid rgb(244 238 229 / 22%); border-radius: 999px; background: transparent; color: inherit; cursor: pointer; transition: border-color var(--oto-duration) var(--oto-ease), transform var(--oto-duration) var(--oto-ease); }
.oto-theme:hover { border-color: var(--oto-color-shell); }
.oto-theme:active { transform: scale(0.96); }
.oto-theme svg { inline-size: 1.05rem; block-size: 1.05rem; }
.oto-theme__moon { display: none; }
html[data-theme="dark"] .oto-theme__sun { display: none; }
html[data-theme="dark"] .oto-theme__moon { display: block; }
.oto-theme__label { display: none; }
.oto-header__nav .oto-theme { margin-inline-start: 0.25rem; }
@media (max-width: 56rem) {
  .oto-header__nav .oto-theme { margin-inline-start: 0; inline-size: auto; block-size: auto; border: 0; border-radius: 0; justify-content: flex-start; gap: 0.75rem; padding-block: 0.9rem; border-block-end: 1px solid rgb(244 238 229 / 8%); font-size: var(--oto-text-label); letter-spacing: var(--oto-tracking-label); text-transform: uppercase; }
  .oto-header__nav .oto-theme .oto-theme__label { display: inline; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Nothing may ever widen the page sideways. `clip` (not `hidden`) so neither element becomes a scroll container:
   the sticky header, the pinned round table and Lenis all keep working. The main offender was the round
   table's ring on phones — rotating, its square box pokes past both edges and let the page pan ~15px. */
html, body { overflow-x: clip; }
/* Lenis (vendor/lenis.min.js) smooths wheel scrolling once the veil lands; it sets scroll itself every frame,
   so the CSS smooth behaviour has to stand down or the two would fight over each step. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
body.oto-site {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--oto-surface-page);
  color: var(--oto-text);
  font-family: var(--oto-font-body);
  font-size: var(--oto-text-body);
  font-weight: var(--oto-weight-body);
  line-height: var(--oto-leading-body);
  letter-spacing: var(--oto-tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
main { flex: 1 0 auto; }
.oto-site :where(h1, h2, h3, h4, p, figure, ul, ol, dl) { margin: 0; }
.oto-site :where(ul, ol) { padding: 0; list-style: none; }
.oto-site :where(a) { color: inherit; text-underline-offset: 0.22em; }
.oto-site :where(img, svg) { display: block; max-inline-size: 100%; block-size: auto; }
.oto-site :where(button, input, select, textarea) { font: inherit; }
.oto-site :where(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--oto-focus);
  outline-offset: 5px;
}
.oto-site [id] { scroll-margin-block-start: calc(var(--oto-header-h) + 1rem); }
.oto-site ::selection { background: var(--oto-color-ocean); color: var(--oto-color-shell); }
.oto-site [hidden] { display: none !important; }
.oto-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.oto-skip-link { position: absolute; inset-block-start: 0.75rem; inset-inline-start: 0.75rem; z-index: 100; padding: 1rem; background: var(--oto-color-shell); color: var(--oto-color-ocean); transform: translateY(-200%); }
.oto-skip-link:focus { transform: translateY(0); }

/* ---------- Layout primitives ---------- */
.oto-container { inline-size: 100%; max-inline-size: var(--oto-page-max); margin-inline: auto; padding-inline: var(--oto-gutter); }
.oto-section { padding-block: var(--oto-section-space); }
.oto-section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.oto-section--sand { background: var(--oto-surface-secondary); }
.oto-section--dark, .oto-hero, .oto-header, .oto-footer {
  --oto-text: var(--oto-text-inverse);
  --oto-text-muted: var(--oto-color-sand);
  --oto-border: var(--oto-color-oak);
  --oto-control-border: var(--oto-color-shell);
  --oto-focus: var(--oto-color-shell);
  background: var(--oto-surface-dark);
  color: var(--oto-text);
}
.oto-rule { border: 0; border-block-start: 1px solid var(--oto-border); margin: 0; }
.oto-rule--brass { border-color: var(--oto-color-brass); }
.oto-stack { display: flex; flex-direction: column; gap: var(--oto-element-gap); }
.oto-stack--loose { gap: 1.5rem; }
.oto-body { max-inline-size: var(--oto-copy-max); }
.oto-muted { color: var(--oto-text-muted); }
.oto-intro { max-inline-size: 38ch; font-size: var(--oto-text-intro); line-height: 1.45; }
.oto-caption { font-size: var(--oto-text-caption); line-height: 1.4; letter-spacing: var(--oto-tracking-label); text-transform: uppercase; }
.oto-eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; font-size: var(--oto-text-caption); letter-spacing: 0.12em; text-transform: uppercase; color: var(--oto-text-muted); }
.oto-eyebrow::before { content: ""; inline-size: 2rem; block-size: 1px; background: var(--oto-color-brass); }
.oto-flow > * + * { margin-block-start: 1em; }

/* ---------- Type ---------- */
.oto-display, .oto-heading, .oto-subheading, .oto-card-title, .oto-serif {
  font-family: var(--oto-font-display);
  font-weight: var(--oto-weight-light);
  font-synthesis: none;
  letter-spacing: var(--oto-tracking-display);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.oto-display { font-size: var(--oto-text-display); line-height: var(--oto-leading-display); text-transform: uppercase; }
.oto-heading { font-size: var(--oto-text-heading); line-height: 1; text-transform: uppercase; }
.oto-subheading { font-size: var(--oto-text-subheading); line-height: 1.04; text-transform: uppercase; }
.oto-card-title { font-size: var(--oto-text-card); line-height: 1.1; letter-spacing: -0.02em; }
.oto-serif { font-size: var(--oto-text-intro); letter-spacing: -0.01em; line-height: 1.3; font-style: italic; }
.oto-wordmark { font-family: var(--oto-font-body); font-size: var(--oto-text-wordmark); font-weight: var(--oto-weight-medium); line-height: 0.92; letter-spacing: -0.04em; text-transform: uppercase; overflow-wrap: break-word; }
.oto-section-heading { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--oto-layout-gap); align-items: end; margin-block-end: clamp(1.5rem, 3vw, 2.5rem); }
.oto-section-heading__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }

/* ---------- Actions ---------- */
.oto-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.oto-button {
  display: inline-flex; justify-content: center; align-items: center; gap: 0.75rem;
  min-block-size: 3rem; max-inline-size: 100%; padding: 1rem 1.5rem;
  border: 1px solid var(--oto-control-border); border-radius: var(--oto-radius-control);
  background: transparent; color: inherit;
  font: var(--oto-weight-medium) var(--oto-text-label) / 1.3 var(--oto-font-body);
  letter-spacing: var(--oto-tracking-label); text-align: center; text-decoration: none; text-transform: uppercase;
  cursor: pointer;
  transition: color var(--oto-duration) var(--oto-ease), background-color var(--oto-duration) var(--oto-ease), transform var(--oto-duration) var(--oto-ease);
}
.oto-button:hover { background: var(--oto-text); color: var(--oto-surface-page); }
.oto-button:active { transform: translateY(1px); }
:is(.oto-section--dark, .oto-hero, .oto-header, .oto-footer, .oto-closing) .oto-button:hover { background: var(--oto-color-shell); color: var(--oto-color-ocean); }
.oto-button--solid { background: var(--oto-color-ocean); color: var(--oto-color-shell); border-color: var(--oto-color-ocean); }
.oto-button--solid:hover { background: var(--oto-color-shell); color: var(--oto-color-ocean); }
.oto-button:disabled { cursor: not-allowed; opacity: 0.55; }
.oto-text-link { display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 3rem; font-size: var(--oto-text-label); line-height: 1.4; letter-spacing: var(--oto-tracking-label); text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 1px; transition: text-decoration-thickness var(--oto-duration) var(--oto-ease); }
.oto-text-link:hover { text-decoration-thickness: 2px; }
.oto-text-link svg { inline-size: 0.875rem; block-size: 0.875rem; transition: transform var(--oto-duration) var(--oto-ease); }
.oto-text-link:hover svg { transform: translateX(3px); }

/* ---------- Header ---------- */
.oto-header { position: sticky; inset-block-start: 0; z-index: 30; border-block-end: 1px solid rgb(244 238 229 / 10%); }
.oto-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; min-block-size: var(--oto-header-h); }
.oto-header__brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; white-space: nowrap; font-size: 1.125rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: var(--oto-weight-bold); }
.oto-header__brand img { block-size: 2.25rem; inline-size: auto; }
.oto-header__nav { display: flex; align-items: center; gap: 0.25rem 1.75rem; }
.oto-header__nav a { position: relative; padding-block: 0.75rem; font-size: var(--oto-text-label); font-weight: var(--oto-weight-medium); letter-spacing: var(--oto-tracking-label); line-height: 1.5; text-transform: uppercase; text-decoration: none; }
.oto-header__nav a::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0.35rem; block-size: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--oto-duration) var(--oto-ease-out); }
.oto-header__nav a:hover::after, .oto-header__nav a[aria-current="page"]::after { transform: scaleX(1); }
.oto-header__nav .oto-button { margin-inline-start: 0.5rem; padding-block: 0.75rem; min-block-size: 2.75rem; }
.oto-header__nav .oto-button::after { display: none; }
.oto-header__toggle { display: none; align-items: center; gap: 0.75rem; min-block-size: 3rem; padding: 0.5rem 0; border: 0; background: none; color: inherit; font-size: var(--oto-text-label); font-weight: var(--oto-weight-medium); letter-spacing: var(--oto-tracking-label); text-transform: uppercase; cursor: pointer; }
.oto-burger { position: relative; inline-size: 1.25rem; block-size: 0.75rem; }
.oto-burger::before, .oto-burger::after { content: ""; position: absolute; inset-inline: 0; block-size: 1px; background: currentColor; transition: transform var(--oto-duration) var(--oto-ease); }
.oto-burger::before { inset-block-start: 0; }
.oto-burger::after { inset-block-end: 0; }
.oto-header__toggle[aria-expanded="true"] .oto-burger::before { transform: translateY(5.5px) rotate(45deg); }
.oto-header__toggle[aria-expanded="true"] .oto-burger::after { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- Header: the bar as part of the room ---------- */
/* One brass hairline glides between the items and settles back under the current page, so the
   nav reads as a single connected surface. JS adds .oto-nav-ready and the trail element; without
   JS the per-link ::after underline below is still what you get, so this fails safe. */
.oto-header__nav { position: relative; }
.oto-nav__trail {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  inline-size: 1px; block-size: 1px; border-radius: 1px;
  background: var(--oto-color-brass); transform-origin: left top; opacity: 0;
  transform: translate(var(--trail-x, 0px), var(--trail-y, 0px)) scaleX(var(--trail-w, 0));
  transition: transform 520ms var(--oto-ease-out), opacity 240ms var(--oto-ease);
  pointer-events: none;
}
.oto-nav__trail.is-lit { opacity: 1; }

/* Hovering a link rolls the word up and lifts an identical one into its place — the small
   "service" gesture the rest of the site makes with its reveals, at nav scale. */
.oto-navswap { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; }
.oto-navswap__t { display: block; transition: transform 420ms var(--oto-ease-out); }
.oto-navswap__t + .oto-navswap__t { position: absolute; inset-block-start: 100%; inset-inline-start: 0; color: var(--oto-color-brass); }
.oto-header__nav a:hover .oto-navswap__t,
.oto-header__nav a:focus-visible .oto-navswap__t { transform: translateY(-100%); }

/* The mark is a fish: give it a tail-flick when you touch the brand. */
.oto-header .oto-header__brand img { transition: transform 420ms var(--oto-ease-out); }
.oto-header .oto-header__brand:hover img { animation: oto-mark-swim 1s var(--oto-ease); }
@keyframes oto-mark-swim {
  0% { transform: rotate(0deg); }
  22% { transform: rotate(-8deg) translateX(-1px); }
  52% { transform: rotate(7deg) translateX(1px); }
  78% { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

/* Scrolled state is cosmetic only — the header keeps its height, because --oto-header-h feeds the
   round-table pin maths and a bar that resized mid-scroll would move the platter with it. */
.oto-header::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--oto-color-brass) 20%, var(--oto-color-brass) 80%, transparent);
  transform: scaleX(0); transition: transform 760ms var(--oto-ease-out); pointer-events: none;
}
html.oto-scrolled .oto-header::after { transform: scaleX(1); }
html.oto-scrolled .oto-header .oto-header__brand img { transform: scale(0.92); }

/* Reserve fills like a tide coming in rather than snapping to a new colour. */
.oto-header .oto-header__nav .oto-button { position: relative; overflow: hidden; isolation: isolate; }
.oto-header .oto-header__nav .oto-button::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--oto-color-shell);
  transform: translateY(101%); transition: transform 460ms var(--oto-ease-out);
}
.oto-header .oto-header__nav .oto-button:hover { background: transparent; color: var(--oto-color-ocean); }
.oto-header .oto-header__nav .oto-button:hover::before { transform: translateY(0); }

.oto-theme svg { transition: transform 460ms var(--oto-ease-out); }
.oto-theme:hover svg { transform: rotate(20deg); }
.oto-theme.is-flip svg { animation: oto-theme-flip 560ms var(--oto-ease-out); }
@keyframes oto-theme-flip {
  from { transform: rotate(-150deg) scale(0.6); opacity: 0; }
  to { transform: rotate(0deg) scale(1); opacity: 1; }
}

@media (min-width: 56.01rem) {
  html.oto-nav-ready .oto-header__nav a::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .oto-header .oto-header__brand:hover img { animation: none; }
  .oto-theme.is-flip svg { animation: none; }
  .oto-nav__trail { transition: opacity 240ms var(--oto-ease); }
}

/* ---------- Hero ---------- */
.oto-hero { position: relative; isolation: isolate; display: grid; align-items: end; min-block-size: min(46rem, calc(100svh - var(--oto-header-h))); overflow: hidden; }
.oto-hero--short { min-block-size: min(34rem, 70svh); }
.oto-hero__image { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; }
.oto-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(16 33 41 / 62%); }
.oto-hero__content { padding-block: clamp(4rem, 8vw, 6rem) clamp(2.5rem, 4vw, 3.5rem); display: flex; flex-direction: column; gap: 1.25rem; }
.oto-hero__content .oto-display { max-inline-size: 13ch; }
.oto-hero__content .oto-body { max-inline-size: 43ch; }
.oto-hero__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: var(--oto-text-caption); letter-spacing: 0.12em; text-transform: uppercase; color: var(--oto-color-sand); }
.oto-hero__meta li { display: inline-flex; align-items: center; gap: 1.5rem; }
.oto-hero__meta li + li::before { content: ""; inline-size: 1px; block-size: 0.9em; background: var(--oto-color-brass); }
@media (prefers-reduced-motion: no-preference) {
  .oto-hero__image { animation: oto-settle 2.4s var(--oto-ease-out) both; }
  @keyframes oto-settle { from { transform: scale(1.04); } to { transform: scale(1); } }
}

/* ---------- Video hero: the veil opens on the moving footage, the headline rises with the lift ----------
   Every phase is driven by video.currentTime in oto.js; CSS only defines the resting states. */
.oto-hero--video { --hero-scrim: 0; min-block-size: calc(100svh - var(--oto-header-h)); }
.oto-hero--video::before { background: rgb(16 33 41 / var(--hero-scrim)); }
.oto-hero--video .oto-hero__content { text-shadow: 0 1px 2px rgb(16 33 41 / 55%), 0 8px 32px rgb(16 33 41 / 45%); }
.oto-hero__video { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; animation: none; }
.oto-hero__still { z-index: -3; animation: none; }
body.oto-hero-intro .oto-hero--video .oto-hero__content > * { opacity: 0; will-change: transform, opacity; }
body.oto-hero-intro .oto-hero--video { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { body.oto-hero-intro .oto-hero--video .oto-hero__content > * { opacity: 1 !important; transform: none !important; } }


/* ---------- Images and figures ---------- */
.oto-figure { position: relative; }
.oto-figure figcaption { margin-block-start: 0.75rem; font-size: var(--oto-text-caption); color: var(--oto-text-muted); display: flex; justify-content: space-between; gap: 1rem; }
.oto-image { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--oto-radius-card); background: var(--oto-surface-secondary); }
.oto-image--wide { aspect-ratio: 3 / 2; }
.oto-image--square { aspect-ratio: 1; }
.oto-image--tall { aspect-ratio: 2 / 3; }
.oto-image--natural { aspect-ratio: auto; object-fit: contain; }
.oto-img-frame { display: block; overflow: hidden; background: var(--oto-surface-secondary); }
/* ---------- Parallax drift on photography ----------
   Driven by the INDEPENDENT `translate` and `scale` properties, never `transform`. The images already use
   transform for the hover zoom below (with a 900ms transition), and .oto-reveal uses transform: translateY on the
   outer figure, so a transform-based parallax would silently overwrite one or both. Independent properties
   compose with them instead. The 8% upscale gives the already-clipping frame enough overflow for the drift to
   stay inside the crop, so nothing shifts layout. oto.js adds .oto-px and the ready class only once it can
   actually drive them, and never under reduced motion, so this is inert until then. */
html.oto-parallax-ready .oto-px { overflow: hidden; }
html.oto-parallax-ready .oto-px img { scale: 1.08; translate: 0 var(--px-y, 0px); will-change: translate; }
.oto-img-frame img { transition: transform 900ms var(--oto-ease-out); }
a.oto-img-frame:hover img, .oto-figure:hover .oto-img-frame img, .oto-menu-card:hover .oto-img-frame img { transform: scale(1.03); }

/* ---------- Spread ---------- */
.oto-spread { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--oto-layout-gap); align-items: center; }
.oto-spread--reverse > :first-child { order: 2; }
.oto-spread--top { align-items: start; }
.oto-spread > *, .oto-section-heading > *, .oto-locations > * { min-inline-size: 0; }
.oto-spread__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.oto-spread .oto-image { max-block-size: min(62vh, 30rem); }
.oto-spread__detail { margin-block-start: clamp(1.25rem, 3vw, 2rem); max-inline-size: 42%; margin-inline-start: auto; }
.oto-spread__detail .oto-image { max-block-size: 16rem; }

/* ---------- Find your seat (home): the experience spread ----------
   A dedicated, screen-filling take on the shared .oto-spread pattern: a large dining-room photo with a smaller
   bar/mezzanine shot overlapping its lower-left corner (bleeding into the gutter, since the section is full-bleed
   sand/dark), and the seating options recast as a short scannable list instead of one run-on sentence. */
.oto-seat { position: relative; overflow: visible; }
.oto-seat__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(3rem, 7vw, 7rem); align-items: center; }
.oto-seat__main { position: relative; z-index: 1; }
.oto-seat__media { position: relative; }
.oto-seat__main .oto-image { max-block-size: min(70vh, 37rem); }
.oto-seat__accent { position: absolute; z-index: 2; inset-block-end: 0; inset-inline-start: -11%; inline-size: 46%; }
.oto-seat__accent .oto-img-frame { padding: 0.4rem; border: 1px solid rgb(177 138 88 / 45%); background: var(--oto-surface-secondary); box-shadow: 0 28px 48px -24px rgb(16 33 41 / 45%); }
.oto-seat__accent .oto-image { max-block-size: 13rem; }
.oto-seat__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; max-inline-size: 32rem; }
.oto-seat__list { display: flex; flex-direction: column; inline-size: 100%; }
.oto-seat__list li { position: relative; padding-block: 0.85rem; padding-inline-start: 1.6rem; border-block-end: 1px solid var(--oto-border); font-size: var(--oto-text-body); }
.oto-seat__list li:first-child { border-block-start: 1px solid var(--oto-border); }
.oto-seat__list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 1.4rem; inline-size: 0.85rem; block-size: 1px; background: var(--oto-color-brass); }
@media (min-width: 56.01rem) {
  .oto-seat { min-block-size: 100svh; display: grid; align-items: center; }
}
@media (max-width: 56rem) {
  .oto-seat__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .oto-seat__main .oto-image { max-block-size: none; }
  .oto-seat__accent { position: static; inline-size: min(56%, 14rem); margin-block-start: 0.85rem; margin-inline: auto 0; }
  .oto-seat__copy { max-inline-size: none; }
}

/* ---------- Round table (home, "for the table") ----------
   A lacquered round table with a brass rim, eight plates of sushi around it and the chef's platter at the centre.
   The table rests on the section boundary and carries into the section below (Zinc-style caption straddle, at scale). */
.oto-tablesec { --table: clamp(18rem, 38vw, 34rem); --overhang: 0.28; padding-block-end: 0; overflow: visible; position: relative; z-index: 2; }
.oto-tablesec__grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--table) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.oto-tablesec__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.oto-tablesec__copy--left .oto-heading { font-size: clamp(2rem, 1.1rem + 2.4vw, 3.25rem); }
.oto-tablesec__copy--right { align-self: center; }
.oto-tablesec__copy .oto-serif { margin-block-start: 0.5rem; }
.oto-table { position: relative; inline-size: var(--table); block-size: var(--table); margin-block-end: calc(-1 * var(--table) * var(--overhang)); justify-self: center; align-self: end; }
.oto-table__top { position: absolute; inset: 0; border-radius: 50%; background:
    radial-gradient(circle at 50% 38%, #1f3a44 0%, #142a32 48%, #0f2129 100%);
  box-shadow: inset 0 0 0 1px rgb(177 138 88 / 55%), inset 0 0 0 10px rgb(16 33 41 / 100%), inset 0 0 0 11px rgb(177 138 88 / 28%), 0 30px 60px -30px rgb(16 33 41 / 70%), 0 2px 0 rgb(244 238 229 / 6%); }
.oto-table__top::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; border: 1px solid rgb(177 138 88 / 22%); }
.oto-table__ring { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
.oto-plate { --r: calc(var(--table) * 0.365); --d: calc(var(--table) * 0.19 * var(--s, 1)); position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: var(--d); block-size: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%; overflow: hidden;
  transform: rotate(calc(var(--i) * 45deg - 90deg)) translateX(var(--r)) rotate(calc(90deg - var(--i) * 45deg));
  box-shadow: 0 0 0 3px var(--oto-color-shell), 0 0 0 4px rgb(177 138 88 / 45%), 0 14px 26px -12px rgb(0 0 0 / 60%); background: var(--oto-color-shell); }
.oto-plate img { inline-size: 100%; block-size: 100%; object-fit: cover; transform: scale(1.06); }
.oto-plate { transition: box-shadow 300ms var(--oto-ease); }
.oto-plate:hover { box-shadow: 0 0 0 3px var(--oto-color-shell), 0 0 0 5px var(--oto-color-brass), 0 14px 26px -12px rgb(0 0 0 / 60%); }
.oto-table__centre { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: calc(var(--table) * 0.42); block-size: calc(var(--table) * 0.42); transform: translate(-50%, -50%); margin: 0; border-radius: 50%; }
.oto-table__centre img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 5px var(--oto-color-shell), 0 0 0 6px rgb(177 138 88 / 55%), 0 22px 40px -16px rgb(0 0 0 / 65%); }
.oto-table__centre figcaption { position: absolute; inset-inline-start: 50%; inset-block-start: calc(100% + var(--table) * 0.29 + 0.9rem); transform: translateX(-50%); display: flex; gap: 1rem; white-space: nowrap; font-size: var(--oto-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--oto-text-muted); }
.oto-table__centre figcaption span + span { color: var(--oto-color-brass); }
.oto-section--after-table { padding-block-start: calc(var(--oto-section-space) + clamp(18rem, 38vw, 34rem) * 0.28); }
@media (prefers-reduced-motion: no-preference) {
  .oto-table__ring { animation: oto-lazy-susan 140s linear infinite; }
  .oto-plate img { animation: oto-lazy-susan-rev 140s linear infinite; }
  .oto-table:hover .oto-table__ring, .oto-table:hover .oto-plate img { animation-play-state: paused; }
  @keyframes oto-lazy-susan { to { transform: rotate(360deg); } }
  @keyframes oto-lazy-susan-rev { from { transform: rotate(0deg) scale(1.06); } to { transform: rotate(-360deg) scale(1.06); } }
}
/* Pinned table (Peony LazySusanRing port): the section is 260vh tall; the sticky stage holds the table for the
   whole pin; oto.js writes the custom properties from native scroll progress. Resting states only live here. */
@media (min-width: 56.01rem) and (prefers-reduced-motion: no-preference) {
  .oto-tablesec.is-pinned { padding-block: 0; z-index: 1; }
  .oto-tablesec.is-pinned .oto-tablesec__sticky { position: sticky; inset-block-start: var(--oto-header-h); block-size: calc(100svh - var(--oto-header-h)); display: grid; align-items: center; overflow: hidden; }
  .oto-tablesec.is-pinned { --table: min(clamp(18rem, 38vw, 34rem), calc((100svh - var(--oto-header-h)) * 0.68)); }
  .oto-tablesec.is-pinned .oto-tablesec__grid { align-items: center; }
  .oto-tablesec.is-pinned .oto-tablesec__copy { opacity: var(--copy, 1); will-change: opacity; }
  .oto-tablesec.is-pinned .oto-table { align-self: center; margin-block-end: 0; }
  .oto-tablesec.is-pinned .oto-table__ring { animation: none; transform: rotate(var(--spin, -20deg)) translateZ(0); will-change: transform; }
  .oto-tablesec.is-pinned .oto-plate { opacity: var(--others, 1); will-change: opacity; }
  .oto-tablesec.is-pinned .oto-plate img { animation: none; transform: rotate(calc(-1 * var(--spin, -20deg))) scale(1.06); }
  .oto-tablesec.is-pinned .oto-table__top { opacity: var(--plate, 1); will-change: opacity; }
  /* No will-change/backface promotion here on purpose: a composited layer is rasterised once at the
     unzoomed 228px size and then stretched by scale(), which is what made the platter go soft the
     moment the zoom started. Left unpromoted, Chrome re-rasterises at the current scale each frame
     and the platter stays sharp all the way to full screen. */
  .oto-tablesec.is-pinned .oto-table__centre { z-index: 2; opacity: 1; transition: none; transform: translate3d(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px)), 0) scale(var(--zoom, 1)); }
  .oto-tablesec.is-pinned .oto-table__centre figcaption { opacity: var(--cap, 1); filter: none; transition: none; }
  /* the scrim carries the next section's colour so the sticky releases into it seamlessly */
  .oto-tablesec__scrim { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: var(--scrim, 0); will-change: opacity;
    background: linear-gradient(0deg, var(--oto-surface-secondary) 0%, color-mix(in srgb, var(--oto-surface-secondary) 72%, transparent) 22%, color-mix(in srgb, var(--oto-surface-secondary) 30%, transparent) 45%, transparent 66%); }
  .oto-tablesec.is-pinned + .oto-section--after-table { padding-block-start: var(--oto-section-space); }
}
html[data-theme="dark"] .oto-table__top { background: radial-gradient(circle at 50% 38%, #24434f 0%, #17303a 48%, #10232b 100%); }
@media (max-width: 56rem) {
  .oto-tablesec { --table: min(84vw, 26rem); }
  .oto-tablesec__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .oto-table { justify-self: center; margin-block: calc(var(--table) * 0.06) 0; }
  .oto-tablesec__copy--right { order: 3; padding-block-start: 2.5rem; }
  .oto-table__centre figcaption { inset-block-start: calc(100% + var(--table) * 0.29 + 0.9rem); }
  .oto-section--after-table { padding-block-start: var(--oto-section-space); }
  .oto-section--after-table { padding-block-start: calc(var(--oto-section-space) + min(84vw, 26rem) * 0.28 + 1.5rem); }
}

/* ---------- Gallery ---------- */
.oto-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.75rem, 1.5vw, 1.25rem); }
.oto-gallery > * { aspect-ratio: 1; }
.oto-gallery > :nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.oto-gallery .oto-image { block-size: 100%; aspect-ratio: auto; }

/* ---------- Menu page ("the counter") ---------- */
.mn-mast { --oto-text: var(--oto-text-inverse); --oto-text-muted: var(--oto-color-sand); --oto-border: var(--oto-color-oak); --oto-control-border: var(--oto-color-shell); --oto-focus: var(--oto-color-shell); background: var(--oto-surface-dark); color: var(--oto-text); padding-block: clamp(2rem, 4vw, 3rem) 0; overflow: hidden; }
.mn-mast__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--oto-layout-gap); align-items: end; margin-block-end: clamp(1.5rem, 3vw, 2.5rem); }
.mn-mast__grid > * { min-inline-size: 0; }
.mn-mast__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.mn-mast__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; inline-size: 100%; padding-block-start: 1.25rem; border-block-start: 1px solid var(--oto-border); }
.mn-mast__facts dt, .mn-mast__facts dd { margin: 0; }
.mn-mast__facts span { display: block; font-size: var(--oto-text-caption); letter-spacing: 0.1em; text-transform: uppercase; color: var(--oto-text-muted); margin-block-end: 0.25rem; }
.mn-mast__facts p { font-size: 0.9375rem; }
.mn-strip { --strip-gap: clamp(0.75rem, 1.5vw, 1.25rem); --strip-n: 6; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--strip-n) - 1) * var(--strip-gap)) / var(--strip-n)); gap: var(--strip-gap); padding-block: 0 clamp(1.5rem, 3vw, 2.5rem); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mn-strip::-webkit-scrollbar { display: none; }
.mn-strip__item { scroll-snap-align: start; display: flex; flex-direction: column; gap: 0.6rem; min-inline-size: 0; }
.mn-strip__img { aspect-ratio: 1; overflow: hidden; background: var(--oto-color-ocean); }
.mn-strip__img img { inline-size: 100%; block-size: 100%; object-fit: fill; transition: transform 900ms var(--oto-ease-out); }
.mn-strip__item:hover .mn-strip__img img { transform: scale(1.04); }
.mn-strip__cap { font-family: var(--oto-font-display); font-size: 1.125rem; line-height: 1.2; color: var(--oto-color-sand); }

.mn-layout { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; padding-block: clamp(2rem, 3vw, 2.5rem) 0; }
.mn-layout > * { min-inline-size: 0; }
.mn-rail__nav ol { max-inline-size: 100%; }
.mn-rail { position: sticky; inset-block-start: calc(var(--oto-header-h) + 1.5rem); display: flex; flex-direction: column; gap: 1.75rem; }
.mn-rail__nav ol { display: flex; flex-direction: column; counter-reset: none; }
.mn-rail__nav a { display: grid; grid-template-columns: 1.75rem 1fr; align-items: baseline; gap: 0.5rem; padding-block: 0.55rem; font-size: var(--oto-text-label); letter-spacing: 0.02em; text-decoration: none; color: var(--oto-text-muted); border-block-end: 1px solid var(--oto-border); transition: color var(--oto-duration) var(--oto-ease); }
.mn-rail__nav li:first-child a { border-block-start: 1px solid var(--oto-border); }
.mn-rail__num { font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--oto-color-brass); font-variant-numeric: tabular-nums; }
.mn-rail__nav a:hover, .mn-rail__nav a[aria-current="true"] { color: var(--oto-text); }
.mn-rail__nav a[aria-current="true"] { font-weight: var(--oto-weight-bold); }
.mn-rail__nav a[aria-current="true"] .mn-rail__num { color: var(--oto-text); }
.mn-filters { display: flex; flex-direction: column; gap: 0.75rem; }
.mn-filters__label { font-size: var(--oto-text-caption); letter-spacing: 0.1em; text-transform: uppercase; color: var(--oto-text-muted); }
.mn-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mn-chip { display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 2.5rem; padding: 0.4rem 0.9rem; border: 1px solid var(--oto-border); border-radius: 999px; background: transparent; color: var(--oto-text); font-size: var(--oto-text-caption); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background-color var(--oto-duration) var(--oto-ease), color var(--oto-duration) var(--oto-ease), border-color var(--oto-duration) var(--oto-ease), transform var(--oto-duration) var(--oto-ease); }
.mn-chip::before { content: ""; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; border: 1px solid currentColor; }
.mn-chip:hover { border-color: var(--oto-color-ocean); }
.mn-chip:active { transform: scale(0.97); }
.mn-chip[aria-pressed="true"] { background: var(--oto-color-ocean); color: var(--oto-color-shell); border-color: var(--oto-color-ocean); }
.mn-chip[aria-pressed="true"]::before { background: var(--oto-color-brass); border-color: var(--oto-color-brass); }
.mn-rail__note { font-size: var(--oto-text-caption); color: var(--oto-text-muted); min-block-size: 1.5em; }
.mn-rail__pdf { align-self: flex-start; }

.mn-main { display: flex; flex-direction: column; min-inline-size: 0; }
.mn-section { padding-block: clamp(2rem, 3.5vw, 3rem); border-block-start: 1px solid var(--oto-border); display: flex; flex-direction: column; gap: clamp(1.25rem, 2vw, 1.75rem); }
.mn-section:first-child { border-block-start: 0; padding-block-start: 0; }
.mn-section--sand { background: var(--oto-surface-secondary); margin-inline: calc(-1 * var(--oto-gutter)); padding-inline: var(--oto-gutter); border-block-start: 0; }
.mn-section__head { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem clamp(1rem, 3vw, 2.5rem); align-items: end; }
.mn-section__head > div { display: flex; flex-direction: column; gap: 0.75rem; }
.mn-section__num { font-family: var(--oto-font-display); font-size: clamp(2.25rem, 1.25rem + 3vw, 4rem); line-height: 1; color: var(--oto-color-brass); font-weight: 300; align-self: end; }
.mn-section__intro { grid-column: 2; max-inline-size: 56ch; color: var(--oto-text-muted); }
.mn-subgroup { display: flex; flex-direction: column; gap: 1.25rem; }
.mn-subgroup__title { font-size: var(--oto-text-caption); letter-spacing: 0.12em; text-transform: uppercase; color: var(--oto-text-muted); font-weight: var(--oto-weight-medium); padding-block-end: 0.6rem; border-block-end: 1px solid var(--oto-border); }
.mn-subgroup__note { font-size: var(--oto-text-caption); color: var(--oto-text-muted); margin-block-start: -0.5rem; }
.mn-subgroup[hidden] { display: none; }

.mn-price { font-variant-numeric: tabular-nums; font-size: var(--oto-text-label); color: var(--oto-text-muted); white-space: nowrap; flex-shrink: 0; }
.mn-raw { color: var(--oto-color-brass); margin-inline-start: 0.1em; }
.mn-tags { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.mn-tag { font-family: var(--oto-font-body); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oto-color-oak); border: 1px solid var(--oto-color-driftwood); border-radius: 2px; padding: 0.1rem 0.4rem; line-height: 1.4; }
.mn-item[hidden] { display: none; }

/* Plate grid
   Cards used to scatter: the name/price header was a wrapping flex row, so a two-line dish name pushed the price
   onto its own orphan line below it, and neither the name nor the description reserved a minimum height — so a
   one-line "Cauliflower" and a two-line "Crispy Garlic Edamame" left their descriptions, tags, and prices starting
   at different heights card to card in the same row. Fixed by giving the header a fixed two-column grid (the price
   can never wrap off the name's line) and reserving two-line minimum heights for both the name and the description,
   so every card's description, and then its tag, starts at the same y-position regardless of how much text is
   above it; the tag block is margin-pushed to the card's own bottom so it lines up even when a sibling card's
   description runs a line longer. */
.mn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1.75rem clamp(0.875rem, 1.5vw, 1.25rem); }
.mn-plate { display: flex; flex-direction: column; gap: 0.6rem; block-size: 100%; }
.mn-plate__img { aspect-ratio: 1; overflow: hidden; background: var(--oto-surface-secondary); margin-block-end: 0.35rem; display: grid; place-items: center; }
.mn-section--sand .mn-plate__img { background: var(--oto-surface-page); }
/* Dish photos are square and stretched to fill by choice; the cocktail photography is portrait, so the drinks
   section keeps the source 4:5 frame instead, otherwise object-fit: fill squashes every tall glass sideways. */
#cocktails .mn-plate__img { aspect-ratio: 4 / 5; }
.mn-plate__img img { inline-size: 100%; block-size: 100%; object-fit: fill; transition: transform 900ms var(--oto-ease-out); }
.mn-plate:hover .mn-plate__img img { transform: scale(1.02); }
.mn-plate__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0.3rem 0.75rem; min-block-size: 3.2rem; }
.mn-plate .mn-price { text-align: end; padding-block-start: 0.2rem; white-space: normal; max-inline-size: 6rem; }
/* Phones: a two-up card is ~165px wide, too narrow for name and price side by side ("6 for $24 / 12 for $48"
   pushed "Oysters on the Half Shell" onto four lines). The price moves under the name; the name keeps its
   two-line reserve so prices and descriptions still line up across a row. */
@media (max-width: 40rem) {
  /* the two-line reserve sits on name + price together, so the price hugs the name and the spare space falls
     below it: 2 name lines (1.375rem x 1.15) + gap + one price line */
  .mn-plate__head { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0.15rem; min-block-size: calc(2 * 1.375rem * 1.15 + 0.15rem + 1.35rem); }
  .mn-plate .mn-price { text-align: start; max-inline-size: none; padding-block-start: 0; }
}
.mn-plate__name { font-family: var(--oto-font-display); font-weight: 400; font-size: 1.375rem; line-height: 1.15; letter-spacing: -0.01em; }
.mn-plate__desc { min-block-size: 2.85rem; font-size: 0.9375rem; color: var(--oto-text-muted); line-height: 1.5; }
.mn-plate > .mn-tags { margin-block-start: auto; padding-block-start: 0.2rem; }
.mn-plate--text { justify-content: flex-start; background: var(--oto-surface-secondary); padding: 1.25rem 1.25rem 1.5rem; position: relative; gap: 0.6rem; min-block-size: 11rem; }
.mn-section--sand .mn-plate--text { background: var(--oto-surface-page); }
.mn-plate--text::before { content: ""; position: absolute; inset-inline: 1.5rem; inset-block-start: 0; block-size: 1px; background: var(--oto-color-brass); }
.mn-plate--text .mn-plate__name { font-size: 1.75rem; font-weight: 300; }
.mn-plate--text .mn-plate__desc { min-block-size: 0; margin-block-start: auto; }
.mn-plate--text > .mn-tags { margin-block-start: 0; }

/* Rows (sushi, happy hour) */
.mn-rows__head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oto-text-muted); margin-block-end: -1rem; }
.mn-rows__hcol { display: flex; justify-content: flex-end; gap: 0.5rem; }
.mn-rows__hcol b { font-weight: inherit; inline-size: 4rem; text-align: end; }
.mn-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; align-content: start; }
.mn-rows > li:nth-child(2) .mn-row { border-block-start: 1px solid var(--oto-border); }
.mn-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: 0.25rem 1rem; align-items: center; padding-block: 0.7rem; border-block-end: 1px solid var(--oto-border); }
.mn-rows > li:first-child .mn-row { border-block-start: 1px solid var(--oto-border); }
.mn-row__thumb { inline-size: 4.5rem; aspect-ratio: 1; overflow: hidden; background: var(--oto-surface-secondary); }
.mn-row__thumb--empty { background: rgb(20 42 50 / 5%); }
.mn-rows--noimg .mn-row { grid-template-columns: minmax(0, 1fr) auto; }
.mn-rows--noimg .mn-row__thumb { display: none; }
.mn-row__thumb img { inline-size: 100%; block-size: 100%; object-fit: fill; transition: transform 900ms var(--oto-ease-out); }
.mn-section--sand .mn-row__thumb { background: var(--oto-surface-page); }
.mn-row:hover .mn-row__thumb img { transform: scale(1.05); }
.mn-row__body { display: flex; flex-direction: column; gap: 0.2rem; }
.mn-row__name { font-family: var(--oto-font-display); font-weight: 400; font-size: 1.375rem; line-height: 1.15; letter-spacing: -0.01em; }
.mn-row__origin { font-size: var(--oto-text-caption); letter-spacing: 0.04em; text-transform: uppercase; color: var(--oto-color-brass); }
.mn-row__desc { font-size: 0.9375rem; color: var(--oto-text-muted); max-inline-size: 48ch; }
.mn-row__price { font-variant-numeric: tabular-nums; font-size: var(--oto-text-label); white-space: nowrap; text-align: end; }
.mn-row__price--dual { display: grid; grid-template-columns: 4rem 4rem; gap: 0.5rem; }
.mn-row__price--dual .mn-span { grid-column: 1 / -1; }

/* Feature (sushi boards) */
.mn-feature { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.mn-feature__img { overflow: hidden; background: var(--oto-surface-secondary); }
.mn-feature__img img { inline-size: 100%; block-size: auto; }
.mn-feature__body { display: flex; flex-direction: column; gap: 1.5rem; }
.mn-feature__intro { color: var(--oto-text-muted); max-inline-size: 52ch; }
.mn-boards { display: flex; flex-direction: column; }
.mn-board { padding-block: 1rem; border-block-start: 1px solid var(--oto-border); display: flex; flex-direction: column; gap: 0.4rem; }
.mn-board__head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.mn-board__name { font-family: var(--oto-font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.1; }
.mn-board__desc { font-size: 0.9375rem; color: var(--oto-text-muted); white-space: pre-line; max-inline-size: 60ch; }

/* The bar (dark) */
.mn-bar { --oto-text: var(--oto-text-inverse); --oto-text-muted: var(--oto-color-sand); --oto-border: var(--oto-color-oak); --oto-control-border: var(--oto-color-shell); --oto-focus: var(--oto-color-shell); background: var(--oto-surface-dark); color: var(--oto-text); margin-inline: calc(-1 * var(--oto-gutter)); padding-inline: var(--oto-gutter); margin-block-start: clamp(2rem, 3.5vw, 3rem); padding-block: clamp(2rem, 3.5vw, 3rem) clamp(1.5rem, 3vw, 2rem); }
.mn-bar__head { display: flex; flex-direction: column; gap: 0.75rem; margin-block-end: 1rem; }
.mn-bar .mn-section__num { color: var(--oto-color-brass); }
.mn-bar .mn-tag { color: var(--oto-color-sand); border-color: var(--oto-color-oak); }
.mn-bar .mn-section:first-of-type { border-block-start: 1px solid var(--oto-border); padding-block-start: clamp(2rem, 3.5vw, 3rem); }
.mn-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem 2rem; align-content: start; }
.mn-line { display: flex; flex-direction: column; gap: 0.2rem; }
.mn-line__head { display: flex; align-items: baseline; gap: 0.75rem; }
.mn-line__name { font-family: var(--oto-font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; }
.mn-line__dots { flex: 1 1 auto; border-block-end: 1px dotted var(--oto-border); min-inline-size: 1rem; transform: translateY(-0.3em); }
.mn-line__desc { font-size: 0.875rem; color: var(--oto-text-muted); max-inline-size: 42ch; }

.mn-foot { display: flex; flex-direction: column; gap: 0.6rem; padding-block: 1.75rem 2.5rem; border-block-start: 1px solid var(--oto-border); font-size: var(--oto-text-caption); color: var(--oto-text-muted); }
.mn-foot p { max-inline-size: 72ch; }
.mn-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; }

/* Zoom buttons and lightbox */
.mn-zoom { display: block; inline-size: 100%; block-size: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: zoom-in; overflow: hidden; }
.mn-zoom img { display: block; }

.mn-zoom:focus-visible { outline: 2px solid var(--oto-focus); outline-offset: 3px; }
.mn-lightbox { inline-size: min(100vw, 100%); block-size: 100dvh; max-inline-size: none; max-block-size: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--oto-color-shell); }
.mn-lightbox::backdrop { background: rgb(16 33 41 / 92%); }
.mn-lightbox[open] { display: grid; grid-template-rows: auto 1fr auto; }
.mn-lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem var(--oto-gutter); }
.mn-lightbox__count { font-size: var(--oto-text-caption); letter-spacing: 0.1em; text-transform: uppercase; color: var(--oto-color-sand); font-variant-numeric: tabular-nums; }
.mn-lightbox__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-inline-size: 3rem; min-block-size: 3rem; padding: 0.5rem 1rem; border: 1px solid var(--oto-color-shell); border-radius: var(--oto-radius-control); background: transparent; color: var(--oto-color-shell); font-size: var(--oto-text-label); letter-spacing: var(--oto-tracking-label); text-transform: uppercase; cursor: pointer; transition: background-color var(--oto-duration) var(--oto-ease), color var(--oto-duration) var(--oto-ease); }
.mn-lightbox__btn:hover { background: var(--oto-color-shell); color: var(--oto-color-ocean); }
.mn-lightbox__btn:focus-visible { outline: 2px solid var(--oto-color-shell); outline-offset: 4px; }
.mn-lightbox__btn svg { inline-size: 1rem; block-size: 1rem; }
.mn-lightbox__stage { position: relative; display: grid; place-items: center; min-block-size: 0; padding-inline: var(--oto-gutter); }
.mn-lightbox__img { max-inline-size: min(100%, 56rem); max-block-size: min(60vh, calc(100dvh - 15rem)); inline-size: auto; block-size: auto; object-fit: contain; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 60%); }
.mn-lightbox__stage { overflow: hidden; }
.mn-lightbox__nav { position: absolute; inset-block-start: 50%; transform: translateY(-50%); }
.mn-lightbox__nav--prev { inset-inline-start: var(--oto-gutter); }
.mn-lightbox__nav--next { inset-inline-end: var(--oto-gutter); }
.mn-lightbox__cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1.5rem; align-items: baseline; padding: 1rem var(--oto-gutter) max(1.25rem, env(safe-area-inset-bottom)); max-inline-size: 60rem; inline-size: 100%; margin-inline: auto; }
.mn-lightbox__name { font-family: var(--oto-font-display); font-weight: 300; font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); line-height: 1.1; letter-spacing: -0.02em; }
.mn-lightbox__price { font-variant-numeric: tabular-nums; color: var(--oto-color-sand); }
.mn-lightbox__desc { grid-column: 1 / -1; color: var(--oto-color-sand); max-inline-size: 60ch; font-size: 0.9375rem; }
.mn-lightbox__credit { grid-column: 1 / -1; color: var(--oto-color-driftwood); font-size: var(--oto-text-caption); }
.mn-zoom--stock::after { content: "Illustrative"; position: absolute; inset-inline-end: 0.5rem; inset-block-end: 0.5rem; padding: 0.15rem 0.45rem; font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oto-color-shell); background: rgb(16 33 41 / 70%); border-radius: 2px; pointer-events: none; }
.mn-zoom--stock { position: relative; }
.mn-row__thumb .mn-zoom--stock::after { display: none; }
.mn-credits { max-inline-size: 72ch; }
.mn-credits summary { cursor: pointer; text-decoration: underline; text-underline-offset: 0.22em; }
.mn-credits p { margin-block: 0.75rem 0.5rem; }
.mn-credits ul { display: flex; flex-direction: column; gap: 0.25rem; }
.mn-credits li span { color: var(--oto-text); }
@media (prefers-reduced-motion: no-preference) {
  .mn-lightbox[open] { animation: mn-fade 220ms var(--oto-ease-out); }
  .mn-lightbox[open] .mn-lightbox__img { animation: mn-rise 320ms var(--oto-ease-out); }
  @keyframes mn-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes mn-rise { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
}
@media (max-width: 40rem) {
  .mn-lightbox__nav { inset-block-start: auto; inset-block-end: 0.5rem; transform: none; }
  .mn-lightbox__nav--prev { inset-inline-start: var(--oto-gutter); }
  .mn-lightbox__nav--next { inset-inline-end: var(--oto-gutter); }
  .mn-lightbox__stage { padding-block-end: 4rem; }
  .mn-lightbox__img { max-block-size: min(48vh, calc(100dvh - 19rem)); }
  .mn-lightbox__cap { grid-template-columns: 1fr; }
}

/* Filters */
.oto-menu-page[data-filter="veg"] .mn-item:not([data-veg]) { display: none; }
.oto-menu-page[data-filter="vegan"] .mn-item:not([data-vegan]) { display: none; }

/* ---------- Home: food & drink cards ----------
   Image-forward cards with a numbered index (echoes the menu page's own section numerals), a brass frame and
   colour-wash that appear on hover/focus alongside the existing image zoom, and a whole-card lift. The heading
   and the three cards also use .oto-reveal (see below) for a staggered scroll-in. */
.oto-menu-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3.5vw, 3rem); }
.oto-menu-card { display: flex; flex-direction: column; gap: 1.25rem; text-decoration: none; transition: transform 420ms var(--oto-ease-out); }
.oto-menu-card:nth-child(2) { margin-block-start: clamp(1rem, 2.5vw, 2rem); }
.oto-menu-card:hover, .oto-menu-card:focus-visible { transform: translateY(-6px); }
.oto-menu-card__frame { position: relative; }
.oto-menu-card__frame::after { content: ""; position: absolute; inset: 0; border: 1px solid transparent; transition: border-color 420ms var(--oto-ease); pointer-events: none; }
.oto-menu-card:hover .oto-menu-card__frame::after, .oto-menu-card:focus-visible .oto-menu-card__frame::after { border-color: rgb(177 138 88 / 55%); }
.oto-menu-card__frame .oto-img-frame { position: relative; transition: box-shadow 420ms var(--oto-ease-out); }
.oto-menu-card:hover .oto-menu-card__frame .oto-img-frame, .oto-menu-card:focus-visible .oto-menu-card__frame .oto-img-frame { box-shadow: 0 32px 48px -28px rgb(16 33 41 / 45%); }
.oto-menu-card__frame .oto-img-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgb(177 138 88 / 24%), transparent 60%); opacity: 0; transition: opacity 420ms var(--oto-ease); }
.oto-menu-card:hover .oto-menu-card__frame .oto-img-frame::after, .oto-menu-card:focus-visible .oto-menu-card__frame .oto-img-frame::after { opacity: 1; }
.oto-menu-card__num { position: absolute; inset-block-start: 0.85rem; inset-inline-start: 0.85rem; z-index: 2; font-size: 0.6875rem; letter-spacing: 0.12em; color: var(--oto-color-shell); background: rgb(16 33 41 / 70%); border-radius: 2px; padding: 0.2rem 0.5rem; transition: background-color 420ms var(--oto-ease); }
.oto-menu-card:hover .oto-menu-card__num, .oto-menu-card:focus-visible .oto-menu-card__num { background: var(--oto-color-brass); }
.oto-menu-card .oto-image { aspect-ratio: 1; max-block-size: min(50vh, 25rem); }
.oto-menu-card__body { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.oto-menu-card .oto-card-title { transition: color 320ms var(--oto-ease); }
.oto-menu-card:hover .oto-card-title, .oto-menu-card:focus-visible .oto-card-title { color: var(--oto-color-brass); }

/* (The old .oto-reveal fade-up lived here; it is superseded by the Omakase block at the end of this file.
   The .oto-reveal classes left in the page markup are now inert grouping hooks.) */

/* ---------- Locations ---------- */
.oto-locations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--oto-layout-gap); margin-block-start: 1rem; }
.oto-location { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--oto-border); }
.oto-location address { font-style: normal; }
.oto-location__meta { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; inline-size: 100%; }
.oto-location__meta dt { color: var(--oto-text-muted); font-size: var(--oto-text-caption); letter-spacing: 0.1em; text-transform: uppercase; padding-block-start: 0.2em; }
.oto-hours { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 1.5rem; inline-size: 100%; margin: 0; max-inline-size: 26rem; }
.oto-hours dt, .oto-hours dd { margin: 0; }
.oto-hours dd { text-align: end; font-variant-numeric: tabular-nums; }
.oto-hours--muted { color: var(--oto-text-muted); }

/* ---------- Feature list ---------- */
.oto-feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--oto-layout-gap); inline-size: 100%; }
.oto-feature-list--stack { grid-template-columns: 1fr; align-self: start; }
.oto-feature-list li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding-block: 0.8rem; border-block-start: 1px solid var(--oto-border); }
.oto-feature-list li strong { display: block; font-family: var(--oto-font-display); font-weight: 400; font-size: 1.25rem; letter-spacing: -0.01em; }
.oto-tags-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* The bar section carries no hero photo; the three signature drinks are its imagery. Their height is pinned to
   the viewport rather than the column width, so heading + drinks + detail stay inside one screen on short
   laptops instead of spilling over. */
.oto-bar-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); margin-block-start: clamp(1.75rem, 3.5vw, 2.5rem); justify-items: center; }
/* Cap the figure WIDTH, not the image height: .oto-image is 4:5 with object-fit: cover, so capping height would
   letterbox a portrait glass into a landscape crop. width = target height x 0.8 keeps the full 4:5 frame. */
.oto-bar-trio .oto-figure { inline-size: 100%; max-inline-size: calc(min(30vh, 16rem) * 0.8); }
.oto-bar__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-block-start: clamp(1.25rem, 2.5vw, 1.75rem); }
.oto-feature-list--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Slightly tighter than the standard section rhythm: this section carries a heading band, three captioned
   drinks, a disclosure line and a three-item list, and the user asked for all of it on one screen. */
@media (min-width: 56.01rem) { .oto-bar { min-block-size: 100svh; display: grid; align-items: center; padding-block: clamp(2.25rem, 4vw, 3.25rem); } }
@media (max-width: 56rem) { .oto-feature-list--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) {
  /* Phones: stacked, the width-capped glasses sat as narrow columns with wide empty margins either side. A
     swipeable row that runs to both screen edges fills the width, and the peeking next glass invites the swipe. */
  .oto-bar-trio {
    display: flex; gap: 0.9rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--oto-gutter)); padding-inline: var(--oto-gutter); scroll-padding-inline: var(--oto-gutter);
    scrollbar-width: none;
  }
  .oto-bar-trio::-webkit-scrollbar { display: none; }
  .oto-bar-trio .oto-figure { flex: 0 0 74%; max-inline-size: none; scroll-snap-align: start; }
  .oto-bar-trio .oto-image { max-block-size: none; }
  .oto-feature-list--three { grid-template-columns: 1fr; }
}

/* ---------- Tableside filmstrip (experience.html, "Served the way we mean it") ----------
   2026-09-20, at the user's request for "an animated gallery style scape where the image will be visible in
   their full size": replaced the static photo mosaic with a continuously auto-scrolling filmstrip. Every source
   photo here happens to share the same native 900x1349 crop already, so showing them uncropped at a fixed height
   (no aspect-ratio override, no object-fit: cover) renders a clean, evenly sized row rather than a jumble — the
   images are simply their own natural rectangle, full frame, nothing trimmed off. oto.js clones the track's
   figures once so a single `translateX(-50%)` loops seamlessly; paused on hover so a guest can actually read a
   caption, and the whole animation (including the clone) never runs at all under reduced motion, where this is
   instead a plain, manually scrollable row — matching how the round table's own ambient rotation is gated. */
.oto-filmstrip { overflow: hidden; margin-inline: calc(-1 * var(--oto-gutter)); }
.oto-filmstrip__track { display: flex; gap: clamp(1rem, 2vw, 1.75rem); padding-inline: var(--oto-gutter); will-change: transform; }
.oto-filmstrip__item { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.75rem; }
.oto-filmstrip__item img { display: block; block-size: min(56vh, 26rem); inline-size: auto; max-inline-size: none; border-radius: var(--oto-radius-card); }
.oto-filmstrip__item figcaption { font-size: var(--oto-text-caption); letter-spacing: 0.02em; color: var(--oto-text-muted); text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .oto-filmstrip__track { animation: oto-filmstrip-scroll 38s linear infinite; }
  .oto-filmstrip:hover .oto-filmstrip__track { animation-play-state: paused; }
  @keyframes oto-filmstrip-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) { .oto-filmstrip { overflow-x: auto; -webkit-overflow-scrolling: touch; } }
.oto-tableside-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(2rem, 4vw, 4rem); margin-block-start: clamp(2.5rem, 5vw, 3.5rem); }
.oto-tableside-notes > div + div { padding-inline-start: clamp(2rem, 4vw, 4rem); border-inline-start: 1px solid var(--oto-border); }
.oto-tableside-notes__link { display: block; margin-block-start: 1.5rem; }
@media (max-width: 40rem) {
  .oto-filmstrip__item img { block-size: min(50vh, 22rem); }
  .oto-tableside-notes { grid-template-columns: 1fr; gap: 1.5rem; }
  .oto-tableside-notes > div + div { padding-inline-start: 0; border-inline-start: 0; padding-block-start: 1.5rem; border-block-start: 1px solid var(--oto-border); }
}
.oto-feature-list__num { font-size: var(--oto-text-caption); color: var(--oto-color-brass); letter-spacing: 0.1em; padding-block-start: 0.4em; font-variant-numeric: tabular-nums; }

/* ---------- Facts strip ---------- */
.oto-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--oto-layout-gap); }
.oto-facts > div { padding-block-start: 1.25rem; border-block-start: 1px solid var(--oto-border); display: flex; flex-direction: column; gap: 0.5rem; }

/* ---------- Award and certifications ---------- */
.oto-award { display: inline-grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.25rem; text-decoration: none; color: inherit; }
.oto-award__laurel { position: relative; display: grid; place-items: center; inline-size: 7.5rem; block-size: 7.5rem; color: var(--oto-color-brass); }
.oto-award__laurel svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.oto-award__place { position: relative; font-family: var(--oto-font-display); font-weight: 300; font-size: 2.75rem; line-height: 1; letter-spacing: -0.03em; color: currentColor; }
.oto-award__place sup { font-size: 0.4em; vertical-align: super; letter-spacing: 0; margin-inline-start: 0.05em; }
.oto-award__body { display: flex; flex-direction: column; gap: 0.3rem; }
.oto-award__eyebrow { font-size: var(--oto-text-caption); letter-spacing: 0.12em; text-transform: uppercase; color: var(--oto-text-muted); }
.oto-award__title { font-family: var(--oto-font-display); font-weight: 300; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); line-height: 1.05; letter-spacing: -0.02em; }
.oto-award__sub { color: var(--oto-text-muted); }
.oto-award:hover .oto-award__title { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.oto-award--compact { gap: 0.75rem; margin-block-start: 0.75rem; }
.oto-award--compact .oto-award__laurel { inline-size: 3rem; block-size: 3rem; border: 1px solid var(--oto-color-brass); border-radius: 50%; }
.oto-award--compact .oto-award__place { font-size: 1.25rem; }
.oto-award--compact .oto-award__title { font-size: 1.125rem; }
.oto-award--compact .oto-award__eyebrow { font-size: 0.6875rem; }
.oto-recognition.oto-section--tight { padding-block: clamp(1rem, 2vw, 1.5rem); }
.oto-recognition__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-block-end: 1rem; padding-block-end: 0.6rem; border-block-end: 1px solid var(--oto-border); }
.oto-recognition .oto-award__laurel { inline-size: 4.5rem; block-size: 4.5rem; }
.oto-recognition .oto-award__place { font-size: 1.6rem; }
.oto-recognition .oto-award__place--word { font-size: 0.5rem; letter-spacing: 0.1em; }
.oto-recognition .oto-award__title { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); }
.oto-recognition .oto-award__sub { font-size: var(--oto-text-label); }
.oto-recognition .oto-award { gap: 0.9rem; }
.oto-recognition .oto-award__body { gap: 0.15rem; }
.oto-awards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.oto-awards > .oto-award + .oto-award { padding-inline-start: clamp(1.5rem, 4vw, 4rem); border-inline-start: 1px solid var(--oto-border); }
.oto-award__place--word { font-family: var(--oto-font-body); font-size: 0.8125rem; font-weight: var(--oto-weight-bold); letter-spacing: 0.16em; text-transform: uppercase; }
.oto-award--compact .oto-award__place--word { font-size: 0.5rem; letter-spacing: 0.06em; }
.oto-award-plate { display: flex; justify-content: flex-start; padding: clamp(1.25rem, 2.5vw, 2rem); border: 1px solid var(--oto-border); }
/* .oto-award-plate and .oto-awards are combined on one element, and .oto-award-plate's own `display: flex`
   (same specificity, later in the file) wins over .oto-awards's `display: grid` — so this is really a flex row,
   not a grid, and stacking it means flex-direction: column, not a grid-template-columns override. */
.oto-awards--stack { flex-direction: column; align-items: stretch; gap: 1.5rem; align-self: start; }
.oto-awards--stack > .oto-award + .oto-award { padding-inline-start: 0; border-inline-start: 0; padding-block-start: 1.5rem; border-block-start: 1px solid var(--oto-border); }

/* Standalone pull-quote: lifts one resonant line out of the surrounding prose as its own centred, breathing
   moment, instead of leaving it buried at the end of a paragraph. */
.oto-pullquote { max-inline-size: 40rem; margin-inline: auto; text-align: center; }
.oto-pullquote::before { content: ""; display: block; inline-size: 2.5rem; block-size: 1px; background: var(--oto-color-brass); margin-inline: auto; margin-block-end: 1.75rem; }
.oto-pullquote p { font-family: var(--oto-font-display); font-style: italic; font-weight: 300; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.35; letter-spacing: -0.01em; }
.oto-certs-band { margin-block-start: clamp(2rem, 4vw, 3rem); padding-block-start: 1.5rem; border-block-start: 1px solid var(--oto-border); display: flex; flex-direction: column; gap: 1.5rem; }
/* Each certifier ships its own logo art with no shared treatment (a free-floating navy oval, a solid teal
   rectangle, bare line art, a rounded teal app-icon) — boxing each one in its own card only made the clash more
   visible. Instead every mark is mounted the same way OTO already mounts a badge of honour (see .oto-award's brass
   laurel ring above): a small brass-ringed medallion, grayscale until hovered/focused so the four different brand
   colours never fight each other, with true colour as the reveal. The row itself borrows the awards row's own
   hairline dividers rather than adding another block of card chrome to a section that is otherwise all type. */
.oto-certs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2rem) 0; }
.oto-cert { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; padding-inline: clamp(0.5rem, 1.5vw, 1rem); }
.oto-cert + .oto-cert { border-inline-start: 1px solid var(--oto-border); }
.oto-cert__logo { display: flex; align-items: center; justify-content: center; inline-size: 5rem; block-size: 5rem; padding: 0.9rem; border: 1px solid var(--oto-color-brass); border-radius: 50%; background: var(--oto-color-shell); transition: transform 380ms var(--oto-ease-out), box-shadow 380ms var(--oto-ease-out); }
.oto-cert:hover .oto-cert__logo, .oto-cert:focus-within .oto-cert__logo { transform: translateY(-4px); box-shadow: 0 16px 28px -16px rgb(16 33 41 / 45%); }
.oto-cert__logo img { max-block-size: 100%; max-inline-size: 100%; inline-size: auto; block-size: auto; object-fit: contain; filter: grayscale(1) contrast(1.05); transition: filter 380ms var(--oto-ease); }
.oto-cert:hover .oto-cert__logo img, .oto-cert:focus-within .oto-cert__logo img { filter: grayscale(0) contrast(1); }
.oto-cert__name { font-family: var(--oto-font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.1; }
.oto-cert__text { font-size: 0.875rem; color: var(--oto-text-muted); line-height: 1.5; max-inline-size: 16rem; }
@media (max-width: 64rem) {
  .oto-certs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .oto-cert + .oto-cert { border-inline-start: 1px solid var(--oto-border); }
  .oto-cert:nth-child(2n+1) { border-inline-start: 0; }
  .oto-cert:nth-child(n+3) { padding-block-start: 2rem; border-block-start: 1px solid var(--oto-border); }
}
@media (max-width: 30rem) {
  /* phones keep the 2x2 grid from the tablet rule; just tighten it */
  .oto-certs { row-gap: 1.5rem; }
  .oto-cert { padding-inline: 0.6rem; }
  .oto-cert:nth-child(n+3) { padding-block-start: 1.5rem; }
  .oto-cert__text { font-size: 0.8125rem; }
}
@media (max-width: 56rem) { .oto-awards { grid-template-columns: 1fr; } .oto-awards > .oto-award + .oto-award { padding-inline-start: 0; border-inline-start: 0; padding-block-start: 1.5rem; border-block-start: 1px solid var(--oto-border); } }
@media (max-width: 40rem) {
  .oto-award { grid-template-columns: auto 1fr; gap: 1rem; }
  .oto-award__laurel { inline-size: 5.5rem; block-size: 5.5rem; }
  .oto-award__place { font-size: 2rem; }
  .oto-award__place--word { font-size: 0.6875rem; letter-spacing: 0.14em; }
}

/* ---------- Closing / footer ---------- */
.oto-closing { position: relative; isolation: isolate; overflow: hidden; --oto-text: var(--oto-text-inverse); --oto-text-muted: var(--oto-color-sand); --oto-border: var(--oto-color-oak); --oto-control-border: var(--oto-color-shell); --oto-focus: var(--oto-color-shell); color: var(--oto-text); background: var(--oto-surface-dark); }
.oto-closing__image { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 40%; }
.oto-closing::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(16 33 41 / 72%); }
.oto-footer { padding-block: 1.75rem 0.9rem; margin-block-start: auto; }
.oto-footer__col { gap: 0.35rem; }
.oto-footer__col a { padding-block: 0.15rem; }
.oto-footer__col h3 { margin-block-end: 0.25rem; }
/* Instagram mark in the footer: the same hairline circle as the header theme toggle,
   so the one social link reads as a control rather than a stray text link. */
.oto-social { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.75rem; block-size: 2.75rem; border: 1px solid rgb(244 238 229 / 22%); border-radius: 999px; color: inherit; text-decoration: none; transition: border-color var(--oto-duration) var(--oto-ease), color var(--oto-duration) var(--oto-ease), transform var(--oto-duration) var(--oto-ease); }
.oto-social svg { inline-size: 1.15rem; block-size: 1.15rem; }
.oto-social:hover { border-color: var(--oto-color-brass); color: var(--oto-color-brass); transform: translateY(-2px); }
.oto-social:active { transform: translateY(0) scale(0.96); }
.oto-footer__awards { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-block-start: 0.5rem; }
.oto-footer__awards .oto-award--compact { margin-block-start: 0; }
.oto-closing.oto-section { padding-block: clamp(1.75rem, 3vw, 2.25rem); display: grid; align-items: center; min-block-size: max(0px, calc(100svh - var(--oto-header-h) - var(--oto-footer-h, 0px))); }
.oto-closing .oto-display { font-size: clamp(2.5rem, 1.25rem + 3vw, 3.75rem); }
.oto-closing .oto-stack--loose { gap: 1.25rem; }
.oto-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--oto-layout-gap); }
.oto-footer__col { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.oto-footer__col h3 { font-size: var(--oto-text-caption); letter-spacing: 0.12em; text-transform: uppercase; color: var(--oto-text-muted); margin-block-end: 0.5rem; font-weight: var(--oto-weight-medium); }
.oto-footer__col a { text-decoration: none; padding-block: 0.25rem; }
.oto-footer__col a:hover { text-decoration: underline; }
.oto-footer__col address { font-style: normal; color: var(--oto-text-muted); }
.oto-footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; border-block-start: 1px solid var(--oto-border); margin-block-start: 1.25rem; padding-block-start: 0.9rem; font-size: var(--oto-text-caption); color: var(--oto-text-muted); }
.oto-footer__lockup { inline-size: clamp(11rem, 16vw, 14rem); block-size: auto; margin-block-end: 0.5rem; }
.oto-footer__wordmark { font-family: var(--oto-font-display); font-weight: 300; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 0.9; letter-spacing: -0.03em; text-transform: uppercase; }
.oto-mobile-actions { display: none; }

/* ---------- Forms ---------- */
.oto-input { inline-size: 100%; min-block-size: 3rem; border: 1px solid var(--oto-control-border); border-radius: var(--oto-radius-control); padding: 0.875rem 1rem; color: inherit; background: transparent; }
.oto-input::placeholder { color: var(--oto-text-muted); opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 64rem) {
  .oto-footer__grid { grid-template-columns: 1fr 1fr; }
  .mn-layout { grid-template-columns: 1fr; gap: 0; }
  .mn-rail { position: sticky; inset-block-start: var(--oto-header-h); z-index: 10; background: var(--oto-surface-page); margin-inline: calc(-1 * var(--oto-gutter)); padding: 0.75rem var(--oto-gutter); gap: 0.75rem; border-block-end: 1px solid var(--oto-border); }
  .mn-rail__nav ol { flex-direction: row; gap: 0.25rem 1.25rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .mn-rail__nav ol::-webkit-scrollbar { display: none; }
  .mn-rail__nav a { grid-template-columns: auto; border: 0 !important; padding-block: 0.35rem; white-space: nowrap; font-size: var(--oto-text-caption); letter-spacing: 0.08em; text-transform: uppercase; }
  .mn-rail__num { display: none; }
  .mn-rail__nav a[aria-current="true"] { text-decoration: underline; text-underline-offset: 0.4em; }
  .mn-filters { flex-direction: row; align-items: center; gap: 0.75rem; min-inline-size: 0; }
  .mn-filters__label, .mn-rail__note, .mn-rail__pdf { display: none; }
  .mn-chips { flex-wrap: nowrap; overflow-x: auto; max-inline-size: 100%; scrollbar-width: none; padding-block: 2px; }
  .mn-chips::-webkit-scrollbar { display: none; }
  .mn-chip { flex: 0 0 auto; min-block-size: 2rem; padding-block: 0.2rem; }
  .mn-rail { padding-block: 0.5rem 0.6rem; gap: 0.4rem; }
  .mn-main { padding-block-start: clamp(2rem, 5vw, 3rem); }
  .mn-section:first-child { padding-block-start: 0; }
  .mn-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mn-rows, .mn-rows__head { grid-template-columns: 1fr; }
  .mn-rows__hcol:last-child { display: none; }
  .mn-rows > li:nth-child(2) .mn-row { border-block-start: 0; }
  .mn-mast__grid { grid-template-columns: 1fr; }
  .mn-strip { --strip-n: 4; }
  .mn-mast__facts { grid-template-columns: 1fr; gap: 1rem; }
  .mn-feature { grid-template-columns: 1fr; }
  .mn-feature__img { max-inline-size: 28rem; }
}
@media (max-width: 56rem) {
  .oto-section-heading, .oto-spread, .oto-facts { grid-template-columns: 1fr; }
  .oto-spread--reverse > :first-child { order: 0; }
  .oto-section-heading { gap: 1.5rem; }
  .oto-menu-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oto-menu-card:nth-child(2) { margin-block-start: 0; }
  .oto-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oto-feature-list { grid-template-columns: 1fr; }
  .oto-spread__detail { max-inline-size: 75%; }
  .oto-header__inner { position: relative; }
  .oto-header__nav { position: absolute; inset-inline: 0; inset-block-start: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem var(--oto-gutter) 1.5rem; background: var(--oto-surface-dark); border-block-end: 1px solid rgb(244 238 229 / 10%); }
  .oto-header__nav a { padding-block: 0.9rem; border-block-end: 1px solid rgb(244 238 229 / 8%); }
  .oto-header__nav a::after { display: none; }
  .oto-header__nav .oto-button { margin: 1rem 0 0; border-block-end: 1px solid var(--oto-control-border); }
  .oto-header__toggle { display: inline-flex; }
}
@media (max-width: 40rem) {
  .oto-locations, .oto-menu-cards { grid-template-columns: 1fr; }
  .mn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0.875rem; }
  .mn-plate__name { font-size: 1.125rem; }
  .mn-plate--text { padding: 1rem; min-block-size: 0; }
  .mn-plate--text .mn-plate__name { font-size: 1.375rem; }
  .mn-row { grid-template-columns: 4rem minmax(0, 1fr); gap: 0.25rem 0.875rem; }
  .mn-row__thumb { inline-size: 4rem; }
  .mn-row__price { grid-column: 2; text-align: start; }
  .mn-rows--noimg .mn-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mn-rows--noimg .mn-row__price { grid-column: 2; text-align: end; }
  .mn-row__price--dual { grid-template-columns: auto auto; justify-content: start; gap: 1rem; }
  .mn-row__price--dual span::before { font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oto-text-muted); margin-inline-end: 0.35rem; }
  .mn-row__price--dual span:first-child::before { content: "Nigiri"; }
  .mn-row__price--dual span:last-child:not(:first-child)::before { content: "Sashimi"; }
  .mn-rows__head { display: none; }
  .mn-section__head { grid-template-columns: 1fr; }
  .mn-section__num { display: none; }
  .mn-section__intro { grid-column: 1; }
  .mn-strip { --strip-n: 2; }
  .oto-footer__grid { grid-template-columns: 1fr; }
  .oto-hero { min-block-size: 36rem; }
  .oto-hero--video { min-block-size: calc(100svh - var(--oto-header-h)); }
  .oto-hero__content { padding-block: 4.5rem 3rem; }
  .oto-display { letter-spacing: -0.025em; line-height: 1; }
  .mn-list { grid-template-columns: 1fr; }
  .oto-spread .oto-image { aspect-ratio: 4 / 3; }
  .oto-menu-card { display: grid; grid-template-columns: 38% minmax(0, 1fr); gap: 1rem; align-items: center; }
  .oto-menu-card .oto-image { aspect-ratio: 1; }
  .oto-menu-card__body { gap: 0.3rem; }
  .oto-menu-card .oto-card-title { font-size: 1.375rem; }
  .oto-footer { padding-block: 2.5rem 1.25rem; }
  .oto-mobile-actions {
    --oto-text: var(--oto-color-ocean); --oto-control-border: var(--oto-color-ocean); --oto-focus: var(--oto-color-ocean);
    display: flex; flex-wrap: wrap; gap: 0.5rem; position: sticky; inset-block-end: 0; z-index: 20;
    background: var(--oto-color-parchment); color: var(--oto-color-ocean);
    padding: 0.75rem var(--oto-gutter) max(0.75rem, env(safe-area-inset-bottom));
    border-block-start: 1px solid var(--oto-color-ocean);
    transform: translateY(100%); transition: transform 360ms var(--oto-ease-out); pointer-events: none;
  }
  .oto-mobile-actions.is-shown { transform: none; pointer-events: auto; }
  .oto-mobile-actions > * { flex: 1 1 8rem; }
  .oto-mobile-actions .oto-button:hover { background: var(--oto-color-ocean); color: var(--oto-color-shell); }
}
@media (max-width: 40rem) and (max-height: 28rem) { .oto-mobile-actions { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .oto-site *, .oto-site *::before, .oto-site *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .oto-button, .oto-input { border-color: ButtonText; }
  .oto-site :focus-visible { outline-color: Highlight; }
  .oto-hero::before, .oto-closing::before { background: Canvas; }
}
@media print {
  .oto-site { background: transparent; color: var(--oto-color-ocean); }
  .oto-header, .oto-mobile-actions, .oto-skip-link, .mn-rail { display: none; }
  .mn-layout { grid-template-columns: 1fr; }
  .oto-hero { min-block-size: auto; background: transparent; color: var(--oto-color-ocean); }
  .oto-hero::before, .oto-hero__image, .oto-closing__image { display: none; }
  .oto-section { padding-block: 2rem; }
  .oto-location { break-inside: avoid; }
  html.oto-fx .oto-site * { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .fx-cut, .fx-close__rim { display: none !important; }
}

/* ==========================================================================================================
   Omakase — the page served course by course
   ----------------------------------------------------------------------------------------------------------
   One motion language on every page, built from the opening veil's knife line (34deg, brass seam):
     The cut      editorial photographs are carved out of the page: a brass hairline slices the frame on the
                  chopstick angle, the page parts along it, and the photograph settles from 1.14 to 1.
     Plating      headings rise word by word from behind a mask, each tipped a few degrees like a piece being
                  set on the board; menu numerals roll up the same way.
     Service      supporting copy surfaces in order after its heading (short rise, blur resolving to focus).
     The tray     coloured surfaces (tide, sand) arrive inset with softened corners and widen to full bleed as
                  they reach the top of the screen, then narrow again as they are cleared.
     Clearing     heroes lift away: copy rises faster than the page, the photograph lags behind and deepens.
     The plate    the closing band opens through a circle with a brass rim — the meal ends on a plate.
   Everything is gated on html.oto-fx, which oto.js adds only when it can run the whole system (motion allowed,
   IntersectionObserver present). Without it these rules are inert and the page is simply static. Hide/move
   rules sit inside :where() so a component's own hover/focus rules always win, and oto.js strips each element's
   entrance classes when its entrance ends, handing it back untouched.
   ========================================================================================================== */
:root {
  --fx-angle: 34deg;                                   /* the veil's chopstick angle */
  --fx-ease-cut: cubic-bezier(0.83, 0, 0.17, 1);       /* lingers as a line, then opens decisively */
  --fx-ease-plate: cubic-bezier(0.19, 1, 0.22, 1);     /* long, weighted settle */
  --fx-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}
/* The surface each part of the page is printed on: what a photograph is carved out of, and what a tray is made of. */
.oto-section, .mn-section, .oto-footer { --fx-surface: var(--oto-surface-page); }
.oto-section--sand, .mn-section--sand { --fx-surface: var(--oto-surface-secondary); }
.oto-section--dark, .oto-closing, .mn-mast, .oto-hero, .oto-footer { --fx-surface: var(--oto-surface-dark); }

/* ---- Plating: word-by-word rise behind a mask ---- */
.fx-w, .fx-w__i { display: inline-block; }
/* the padding/negative-margin pair gives Cormorant's tall caps and accents room inside the mask without moving a pixel of layout */
html.oto-fx .fx-w { overflow: hidden; vertical-align: top; padding-block: 0.12em 0.18em; margin-block: -0.12em -0.18em; }
html.oto-fx :where(.fx-plate) .fx-w__i {
  transform: translate3d(0, 115%, 0) rotate(6deg); transform-origin: 0% 100%;
  transition: transform 1.2s var(--fx-ease-plate);
  transition-delay: calc(var(--fx-d, 0ms) + var(--i, 0) * 52ms);
}
html.oto-fx :where(.fx-plate.is-in) .fx-w__i { transform: none; }

/* ---- Eyebrows: the brass rule is drawn, then the label slides in off it ---- */
html.oto-fx :where(.fx-rule)::before { transform: scaleX(0); transform-origin: 0% 50%; transition: transform 0.9s var(--fx-ease-plate) var(--fx-d, 0ms); }
html.oto-fx :where(.fx-rule.is-in)::before { transform: none; }
.fx-rule__t { display: inline-block; }
html.oto-fx :where(.fx-rule) .fx-rule__t {
  opacity: 0; transform: translate3d(-0.9rem, 0, 0);
  transition: opacity 0.8s var(--fx-ease-soft), transform 1s var(--fx-ease-plate);
  transition-delay: calc(var(--fx-d, 0ms) + 240ms);
}
html.oto-fx :where(.fx-rule.is-in) .fx-rule__t { opacity: 1; transform: none; }

/* ---- Service: supporting copy surfaces in order ---- */
html.oto-fx :where(.fx-serve) {
  opacity: 0; transform: translate3d(0, 1.4rem, 0); filter: blur(8px);
  transition: opacity 1s var(--fx-ease-soft), transform 1.2s var(--fx-ease-plate), filter 1s var(--fx-ease-soft);
  transition-delay: var(--fx-d, 0ms);
}
/* menu rows and cards: dozens at once, so no blur (cheaper, and crisper for scanning prices) */
html.oto-fx :where(.fx-serve--lite) {
  filter: none; transform: translate3d(0, 0.9rem, 0);
  transition: opacity 0.7s var(--fx-ease-soft), transform 0.85s var(--fx-ease-plate); transition-delay: var(--fx-d, 0ms);
}
html.oto-fx :where(.fx-serve.is-in) { opacity: 1; transform: none; filter: none; }

/* ---- The cut: a photograph carved out of the page along the chopstick line ---- */
.fx-cut { display: none; }
html.oto-fx .fx-cut-host { position: relative; }
html.oto-fx .fx-cut { display: block; position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
/* Two panes of the section's own surface meet on a line through the centre, rotated to the veil angle. Sized to
   what the geometry needs and no more (each pane is a GPU layer, and phones pay for every pixel): at 34deg a frame
   spans w*cos+h*sin along the line and w*sin+h*cos across it, so 2x wide and 1x tall covers every frame from 2:3
   to 3:2 with room to spare, and a travel of 100% of its own height clears the frame. */
.fx-cut__pane, .fx-cut__knife { position: absolute; inset-inline-start: -50%; inline-size: 200%; }
.fx-cut__pane {
  block-size: 100%; background: var(--fx-surface, var(--oto-surface-page));
  transition: transform 1.35s var(--fx-ease-cut); transition-delay: calc(var(--fx-d, 0ms) + 330ms);
}
.fx-cut__pane--a {
  inset-block-end: 50%; transform-origin: 50% 100%; transform: rotate(var(--fx-angle));
  border-block-end: 1px solid var(--oto-color-brass); box-shadow: 0 1px 0 rgb(177 138 88 / 35%), 0 0 22px rgb(177 138 88 / 28%);
}
.fx-cut__pane--b {
  inset-block-start: 50%; transform-origin: 50% 0%; transform: rotate(var(--fx-angle));
  border-block-start: 1px solid var(--oto-color-brass); box-shadow: 0 -1px 0 rgb(177 138 88 / 35%), 0 0 22px rgb(177 138 88 / 28%);
}
.fx-cut-host.is-in .fx-cut__pane--a { transform: rotate(var(--fx-angle)) translate3d(0, -100%, 0); }
.fx-cut-host.is-in .fx-cut__pane--b { transform: rotate(var(--fx-angle)) translate3d(0, 100%, 0); }
/* the knife: a glint that runs the length of the line a beat before the page parts */
.fx-cut__knife {
  inset-block-start: 50%; block-size: 1px; margin-block-start: -0.5px; background: var(--oto-color-brass);
  box-shadow: 0 0 8px 1px rgb(214 184 138 / 70%), 0 0 24px 3px rgb(177 138 88 / 40%);
  transform-origin: 50% 50%; transform: rotate(var(--fx-angle)) scaleX(0); opacity: 0;
}
.fx-cut-host.is-in .fx-cut__knife { animation: fx-knife 1s var(--fx-ease-soft) var(--fx-d, 0ms) both; }
@keyframes fx-knife {
  0% { opacity: 0; transform: rotate(var(--fx-angle)) scaleX(0); }
  30% { opacity: 1; }
  48% { opacity: 1; transform: rotate(var(--fx-angle)) scaleX(1); }
  100% { opacity: 0; transform: rotate(var(--fx-angle)) scaleX(1); }
}
html.oto-fx :where(.fx-cut-host) img { transform: scale(1.14); transition: transform 1.8s var(--fx-ease-plate); transition-delay: calc(var(--fx-d, 0ms) + 400ms); }
html.oto-fx :where(.fx-cut-host.is-in) img { transform: none; }

/* ---- The cut, light: menu photos (60+) open along the same line with a clip, no extra DOM ---- */
/* A band around the 34deg line through the centre: zero-thick, then wide enough to cover the frame. */
html.oto-fx :where(.fx-wipe) img {
  clip-path: polygon(0% 16.3%, 100% 83.7%, 100% 83.7%, 0% 16.3%);
  transition: clip-path 0.9s var(--fx-ease-cut); transition-delay: var(--fx-d, 0ms);
}
html.oto-fx :where(.fx-wipe.is-in) img { clip-path: polygon(0% -73.7%, 100% -6.3%, 100% 173.7%, 0% 106.3%); }

/* ---- The tray: coloured surfaces arrive inset and widen to full bleed (oto.js writes --tray-i / --tray-r) ---- */
html.oto-fx .fx-tray { position: relative; isolation: isolate; background-color: transparent; }
/* The tray is painted by its own injected element (.fx-tray__bg) whose clip-path oto.js writes directly. Writing
   custom properties on the section instead would restyle every descendant of the section on every scroll frame,
   because custom properties inherit. As it is cleared the tray also lifts off its bottom edge, so a strip of page
   separates it from whatever comes next. */
.fx-tray__bg { display: none; }
html.oto-fx .fx-tray__bg { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--fx-surface); }

/* ---- Clearing: the hero deepens as it is lifted away (oto.js writes --hx-shade; copy and media move inline) ---- */
/* the shade is its own leaf element (opacity written directly), for the same reason as the tray */
.fx-hero__shade { display: none; }
html.oto-fx .fx-hero__shade { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--oto-color-tide); opacity: 0; }

/* ---- The plate: the closing band opens through a brass-rimmed circle ---- */
html.oto-fx .fx-close { background: var(--oto-surface-dark); }
.fx-close__rim { display: none; }
html.oto-fx .fx-close__rim {
  display: block; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; z-index: -1;
  inline-size: 100px; block-size: 100px; margin: -50px 0 0 -50px; overflow: visible; pointer-events: none;
  transform: scale(var(--rim-s, 1)); opacity: var(--rim-o, 0);
}
.fx-close__rim circle { fill: none; stroke: var(--oto-color-brass); stroke-width: 1.25; vector-effect: non-scaling-stroke; }

/* ---- Clearing a course: content that leaves through the top recedes a little as the next one arrives ---- */
/* anchored at the bottom: the lines still on screen (the section's last ones) are the ones that visibly lag */
html.oto-fx .fx-course { transform-origin: 50% 100%; }
/* the menu masthead is a dark band rather than a hero, so it needs the hero's stacking to take the shade */
html.oto-fx .mn-mast.fx-hero { position: relative; isolation: isolate; }

/* Ambient loops pause while their section is off screen (oto.js toggles .is-offscreen): the round table's ring and
   its eight counter-rotating plates were costing ~6% of a throttled phone's main thread while the visitor was still
   looking at the hero. */
.oto-table.is-offscreen .oto-table__ring, .oto-table.is-offscreen .oto-plate img,
.oto-filmstrip.is-offscreen .oto-filmstrip__track { animation-play-state: paused; }