/* ============================================================================
   SAKURA SUSHI CATERING — "Washi & Ink" visual system
   ----------------------------------------------------------------------------
   Warm paper editorial: washi cream ground, sumi ink type, vermilion (shu)
   hinomaru accent, gold used sparingly. Instrument Serif display, IBM Plex
   Mono labels, Shippori Mincho for kanji. Motion lives in js/polish.js
   (Lenis smooth scroll + GSAP choreography); every animated element is fully
   visible without JS — initial hidden states are set by JS only.
   ========================================================================== */

:root {
  --paper:    #F2EDE2;
  --paper-2:  #E9E2D1;
  --paper-3:  #DFD6C2;
  --ink:      #1B1712;
  --ink-2:    #262019;
  --ink-soft: #4A4238;
  --shu:      #C13A1C;
  --shu-deep: #A02F14;
  --gold:     #9C7C3C;
  --bone:      #EFE9DA;
  --bone-edge: #C9BFA8;
  --line:     rgba(27, 23, 18, .16);
  --line-strong: rgba(27, 23, 18, .8);
  --serif: "Zen Old Mincho", Georgia, serif;
  --sans:  "Inter", -apple-system, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --kanji: "Zen Old Mincho", serif;
  --accent: "Instrument Serif", Georgia, serif;   /* refined italic, accent words only */
  --pad-x: clamp(20px, 5vw, 72px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--shu); color: var(--paper); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 0; border: 2px solid var(--paper-2); }
html { scrollbar-color: var(--ink) var(--paper-2); scrollbar-width: thin; }

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

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

/* Grain overlay */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Type utilities ---------- */
.mono {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.serif { font-family: var(--serif); font-weight: 400; }
/* Accent words keep a light, true-italic serif so the mincho headings gain a
   handwritten lift where they need it (e.g. "ceremony."). */
.it { font-family: var(--accent); font-style: italic; font-weight: 400; }
.shu { color: var(--shu); }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.04; letter-spacing: -.01em; }

.wrap { max-width: 1360px; margin: 0 auto; padding-inline: var(--pad-x); }

/* Kinetic line wrappers — JS animates .kl > span from below.
   padding-bottom extends the reveal mask so italic descenders (e.g. the "y" in
   "ceremony") aren't clipped; the equal negative margin keeps layout unchanged. */
.kl { display: block; overflow: hidden; padding-bottom: .2em; margin-bottom: -.2em; }
.kl > span { display: inline-block; will-change: transform; }

/* =========================================================================
   PAGE TRANSITIONS (driven by js/transition.js)
   -------------------------------------------------------------------------
   An ink curtain that sweeps up over the outgoing page and keeps going up and
   off the incoming one, so a navigation reads as one continuous movement.
   The panel is an ::before on <html> that only exists while transition.js has
   a class on the element — no JS, no curtain, page renders normally.
   ========================================================================= */
html.pt-cover::before,
html.pt-out::before {
  content: "";
  position: fixed; inset: 0;
  z-index: 5000;
  background: var(--ink);
  pointer-events: none;
  will-change: transform;
}
/* Leaving: rise from below to cover. */
html.pt-out::before { animation: ptOut .43s cubic-bezier(.76, 0, .24, 1) forwards; }
/* Arriving: .pt-cover alone holds it still over the first paint, then .pt-in
   carries it the rest of the way up and off. */
html.pt-in::before { animation: ptIn .56s cubic-bezier(.76, 0, .24, 1) forwards; }
@keyframes ptOut { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes ptIn  { from { transform: translateY(0); }    to { transform: translateY(-100%); } }

/* =========================================================================
   TOUCH REVEALS (classes added by touchReveals() in js/polish.js)
   -------------------------------------------------------------------------
   Phones skip the GSAP/ScrollTrigger choreography, so this is the motion they
   get. Both the hidden state AND the transition live on classes the script
   adds at runtime — nothing here applies unless JS ran, which keeps the
   "no element is hidden by CSS" contract in js/polish.js intact.
   ========================================================================= */
.rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .72s var(--ease-out), transform .72s var(--ease-out);
}
.rv.rv-in { opacity: 1; transform: none; }
/* Kinetic lines slide up out of their own mask, matching the desktop version. */
.rv-line {
  transform: translateY(106%);
  transition: transform .9s var(--ease-out);
}
.rv-line.rv-in { transform: none; }

/* =========================================================================
   HEADER / NAV  (injected by js/site.js)
   ========================================================================= */
#site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 300;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad-x);
  transition: background .45s var(--ease-out), box-shadow .45s, padding .45s var(--ease-out);
}
#site-header.scrolled {
  background: rgba(242, 237, 226, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-block: 12px;
  box-shadow: 0 1px 0 var(--line);
}
.brand { display: flex; align-items: baseline; gap: 12px; text-decoration: none; }
.brand-name { font-family: var(--serif); font-size: 1.55rem; line-height: 1; letter-spacing: -.01em; }
.brand-kanji { font-family: var(--kanji); font-size: .95rem; color: var(--shu); font-weight: 700; }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); }
.site-nav a {
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; position: relative; padding: 4px 0;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--shu);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav-cta {
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 9px 20px !important;
  transition: background .35s, color .35s, border-color .35s;
}
.nav-cta:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.nav-cta::after { display: none; }

/* Burger + overlay menu (mobile) */
.nav-burger {
  display: none;
  background: none; border: 0; padding: 10px;
  flex-direction: column; gap: 6px;
}
.nav-burger span { display: block; width: 26px; height: 2px; background: var(--ink); transition: transform .4s var(--ease-out), opacity .3s; }
#nav-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: var(--ink);
  color: var(--paper);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--pad-x);
  transform: translateY(-102%);
  transition: transform .65s cubic-bezier(.76, 0, .24, 1);
  visibility: hidden;
}
#nav-overlay.open { transform: translateY(0); visibility: visible; }
/* The overlay covers the viewport but the page kept scrolling underneath it,
   so a swipe in the menu quietly moved you somewhere else. */
html.nav-open, html.nav-open body { overflow: hidden; }
#nav-overlay a {
  font-family: var(--serif); font-size: clamp(2.4rem, 9vw, 4.2rem);
  line-height: 1.15; text-decoration: none;
  display: flex; align-items: baseline; gap: 18px;
  opacity: 0; transform: translateY(28px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color .3s;
}
#nav-overlay.open a { opacity: 1; transform: none; }
#nav-overlay a:hover { color: var(--shu); font-style: italic; }
#nav-overlay a .idx { font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; color: var(--gold); }
.overlay-close {
  position: absolute; top: 22px; right: var(--pad-x);
  background: none; border: 0; color: var(--paper);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  padding: 10px;
}
.overlay-foot { position: absolute; bottom: 30px; left: var(--pad-x); right: var(--pad-x);
  display: flex; justify-content: space-between; font-family: var(--mono);
  font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(242,237,226,.5); }

/* =========================================================================
   HERO (index)
   ========================================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 140px var(--pad-x) 0;
  overflow: hidden;
}
.hero-disc {
  position: absolute;
  top: 8%; right: -6vw;
  width: clamp(300px, 42vw, 640px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #D8542F 0%, var(--shu) 45%, var(--shu-deep) 100%);
  z-index: 0;
  will-change: transform;
}
.hero-disc::after {
  content: ""; position: absolute; inset: -7%;
  border-radius: 50%;
  border: 1px solid rgba(27,23,18,.25);
}
.hero-kanji {
  position: absolute; top: 16%; right: clamp(14px, 3.4vw, 48px);
  writing-mode: vertical-rl;
  font-family: var(--kanji); font-weight: 700;
  font-size: clamp(.95rem, 1.5vw, 1.3rem);
  letter-spacing: .55em;
  color: var(--paper);
  mix-blend-mode: normal;
  z-index: 2;
}
.hero-meta-top {
  position: absolute; top: 96px; left: var(--pad-x);
  display: flex; gap: 34px; flex-wrap: wrap;
  color: var(--ink-soft);
  z-index: 2;
}
.hero-copy { position: relative; z-index: 2; }
.hero-title {
  font-size: clamp(3.4rem, 11.2vw, 10.6rem);
  line-height: .93;
  letter-spacing: -.03em;
  margin-bottom: clamp(28px, 4vh, 48px);
}
.hero-title .indent { padding-left: clamp(40px, 11vw, 190px); }
.hero-title .it { color: var(--shu); }
.hero-sub {
  display: grid; grid-template-columns: minmax(0, 520px) auto;
  align-items: end; justify-content: space-between; gap: 30px;
  padding-bottom: clamp(30px, 5vh, 60px);
}
.hero-tagline { font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.65; color: var(--ink-soft); max-width: 46ch; }
.hero-cta-row { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 26px; }
.hero-foot {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  border-top: 1px solid var(--line);
  padding-block: 16px;
  color: var(--ink-soft);
}
.scroll-hint { display: inline-flex; align-items: center; gap: 10px; }
.scroll-hint::after {
  content: ""; width: 1px; height: 34px; background: var(--ink);
  display: inline-block;
  animation: scrollPulse 2.2s var(--ease-out) infinite;
  transform-origin: top;
}
@keyframes scrollPulse {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Buttons */
.cta {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 17px 34px;
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  position: relative; overflow: hidden;
  transition: color .4s var(--ease-out);
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background: var(--shu);
  transform: translateY(101%);
  transition: transform .5s var(--ease-out);
  border-radius: inherit;
}
.cta:hover::before { transform: translateY(0); }
.cta span, .cta .arr { position: relative; z-index: 1; }
.cta .arr { transition: transform .4s var(--ease-out); }
.cta:hover .arr { transform: translateX(6px); }
.link-underline {
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; position: relative; padding-bottom: 5px;
}
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--ink);
  transition: transform .4s var(--ease-out); transform-origin: right;
}
.link-underline:hover::after { transform: scaleX(.3); transform-origin: left; }

/* =========================================================================
   MARQUEE
   ========================================================================= */
.marquee {
  background: var(--ink); color: var(--paper);
  overflow: hidden;
  padding: 15px 0;
  border-block: 1px solid var(--ink);
}
.marquee-track {
  display: flex; width: max-content;
  animation: marquee 36s linear infinite;
  will-change: transform;
}
.marquee-track > span {
  display: inline-flex; align-items: center; gap: 34px;
  padding-right: 34px;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  white-space: nowrap;
}
.marquee-track .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--shu); display: inline-block; }
.marquee-track .jp { font-family: var(--kanji); font-weight: 700; letter-spacing: .3em; color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =========================================================================
   SECTIONS — shared editorial scaffolding
   ========================================================================= */
.sec { padding: clamp(90px, 13vh, 170px) var(--pad-x); position: relative; }
.sec-tight { padding-block: clamp(70px, 9vh, 110px); }
.sec-head { margin-bottom: clamp(44px, 7vh, 90px); }
.sec-index {
  display: flex; align-items: center; gap: 14px;
  color: var(--shu); margin-bottom: 22px;
}
.sec-index::after { content: ""; height: 1px; width: 64px; background: var(--shu); }
.sec-title { font-size: clamp(2.6rem, 6.4vw, 5.6rem); letter-spacing: -.02em; max-width: 14ch; }
.sec-lede { margin-top: 20px; max-width: 52ch; color: var(--ink-soft); font-size: 1.05rem; }
.sec-head-split { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }

.band-ink { background: var(--ink); color: var(--paper); }
.band-ink .sec-lede { color: rgba(242, 237, 226, .6); }
.band-paper2 { background: var(--paper-2); }

/* Centered section header variant */
.sec-head-center { text-align: center; }
.sec-head-center .sec-index { justify-content: center; }
.sec-head-center .sec-index::before { content: ""; height: 1px; width: 64px; background: var(--shu); }
.sec-head-center .sec-title { max-width: none; margin-inline: auto; }
.sec-head-center .sec-lede { margin-inline: auto; }

/* =========================================================================
   HOW IT WORKS — three clear steps
   ========================================================================= */
.how-grid {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
  counter-reset: how;
}
.how-step { position: relative; padding-top: 30px; border-top: 2px solid var(--ink); }
.how-num {
  font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1; color: var(--shu); display: block; margin-bottom: 16px;
}
.how-step h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-bottom: 12px; letter-spacing: -.01em; }
.how-step p { color: var(--ink-soft); font-size: .96rem; line-height: 1.6; max-width: 34ch; }
.how-cta { text-align: center; margin-top: clamp(40px, 6vh, 64px); }

@media (max-width: 820px) {
  .how-grid { grid-template-columns: 1fr; gap: 0; }
  .how-step { padding: 24px 0; border-top: 1px solid var(--line); }
  .how-step:first-child { border-top: 2px solid var(--ink); }
  .how-num { margin-bottom: 8px; }
  .how-step p { max-width: 60ch; }
}

/* Inline step markers in the quote builder */
.build-step-label {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--shu);
  margin-bottom: 16px; display: flex; align-items: center; gap: 14px;
}
.build-step-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.builder-cols + .build-step-label, .cater-guests + .build-step-label { margin-top: 40px; }

/* =========================================================================
   INTRO / CRAFT (index)
   ========================================================================= */
.intro-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.intro-state {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.1vw, 2.9rem);
  line-height: 1.28; letter-spacing: -.01em;
}
.intro-state .it { color: var(--shu); }
.intro-side { border-left: 1px solid var(--line); padding-left: clamp(24px, 2.6vw, 44px); display: grid; gap: 34px; }
.stat .stat-num {
  font-family: var(--serif); font-size: clamp(2.6rem, 4.4vw, 4rem); line-height: 1;
  display: flex; align-items: baseline; gap: 4px;
}
.stat .stat-num sup { font-size: .45em; color: var(--shu); }
.stat .stat-label { margin-top: 8px; color: var(--ink-soft); }
.intro-note { color: var(--ink-soft); font-size: .95rem; max-width: 34ch; }

/* =========================================================================
   MENU — a real printed menu card
   ========================================================================= */
.menu-card {
  max-width: 780px; margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  box-shadow: 12px 12px 0 rgba(27, 23, 18, .06);
  padding: clamp(22px, 3.4vw, 44px) clamp(20px, 3.6vw, 52px);
}
.menu-card-head { text-align: center; margin-bottom: clamp(26px, 3.4vh, 38px); }
.menu-card-eyebrow { display: inline-block; color: var(--shu); margin-bottom: 12px; }
.menu-card-note { color: var(--ink-soft); font-size: .86rem; max-width: 52ch; margin: 0 auto; }
.menu-legend {
  list-style: none; display: flex; justify-content: center; flex-wrap: wrap;
  gap: 8px 18px; margin-top: 18px;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
}
.menu-legend li { display: inline-flex; align-items: center; gap: 7px; }

/* dietary badges */
.mi-badges { display: inline-flex; gap: 5px; margin-left: 10px; vertical-align: middle; }
.mi-badge {
  font-family: var(--mono); font-size: .54rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; border: 1px solid currentColor;
  line-height: 1.5; white-space: nowrap;
}
.b-veg { color: #4E7A3A; }
.b-vgn { color: #3E7B5E; }
.b-gf  { color: var(--gold); }
.b-raw { color: var(--shu); }

/* category groups */
.menu-group { margin-top: clamp(30px, 4vh, 46px); }
.menu-group:first-of-type { margin-top: 0; }
/* A <summary>: display:flex drops the disclosure triangle, and the explicit
   list-style rules cover the browsers that keep it anyway. */
.menu-group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 9px;
  list-style: none; cursor: default;
}
.menu-group-head::-webkit-details-marker { display: none; }
.menu-group-head::marker { content: ""; }
/* The +/- indicator only means anything where the groups actually collapse. */
.menu-group-x { display: none; }
.menu-group-title { font-size: clamp(1.35rem, 2.4vw, 1.8rem); letter-spacing: -.01em; }
.menu-group-seal { font-family: var(--kanji); font-size: 1.15rem; color: var(--shu); line-height: 1; }
.menu-group-note { color: var(--ink-soft); font-size: .82rem; margin: 9px 0 4px; max-width: 62ch; }

.menu-items { list-style: none; }
.menu-item { padding: 13px 0 12px; border-bottom: 1px solid var(--line); }
.menu-item:last-child { border-bottom: 0; }
.mi-head { display: flex; align-items: baseline; gap: 10px; }
.mi-name {
  font-family: var(--serif); font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  letter-spacing: -.005em; line-height: 1.2;
}
.mi-lead { flex: 1 1 auto; border-bottom: 1.5px dotted rgba(27, 23, 18, .32); transform: translateY(-4px); min-width: 20px; }
.mi-price {
  font-family: var(--serif); font-size: 1.12rem; color: var(--ink);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.mi-price small { font-family: var(--mono); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.mi-sub { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-top: 5px; }
.mi-desc { color: var(--ink-soft); font-size: .82rem; line-height: 1.5; max-width: 64ch; }
.mi-meta {
  font-size: .54rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); white-space: nowrap; padding-top: 2px;
}
.mi-badge { font-size: .5rem; padding: 1px 6px; }
@media (max-width: 560px) {
  .mi-sub { flex-direction: column; gap: 4px; }
  .mi-name { font-size: 1rem; }
  .menu-card { box-shadow: 8px 8px 0 rgba(27, 23, 18, .06); }
}

/* =========================================================================
   QUOTE BUILDER
   ========================================================================= */
#builder { background: var(--paper-2); }

/* Step 1 — guests, appetite, and the live estimate */
.cater-guests {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 48px);
  align-items: end; border: 1px solid var(--line-strong);
  padding: clamp(24px, 3vw, 40px); margin-bottom: clamp(30px, 4vh, 52px);
  background: var(--paper); position: relative;
}
.cater-guests::before {
  content: "見積"; position: absolute; top: -12px; left: 24px;
  font-family: var(--kanji); font-weight: 700; font-size: .8rem; letter-spacing: .3em;
  background: var(--shu); color: var(--paper); padding: 3px 12px;
}
.cg-field label, .cg-lbl {
  font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; display: block; margin-bottom: 10px; color: var(--ink-soft);
}
.cg-field input[type="number"] {
  background: transparent; border: 0; border-bottom: 1px solid var(--line-strong);
  font-family: var(--serif); font-size: 2.2rem; width: 128px; padding: 2px 4px 6px;
  -moz-appearance: textfield; appearance: textfield;
}
.cg-field input::-webkit-outer-spin-button, .cg-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cg-field input:focus { outline: none; box-shadow: 0 2px 0 var(--shu); }
.cg-appetite { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.cg-appetite .cg-lbl { width: 100%; margin-bottom: 2px; }
.apbtn {
  font-family: var(--serif); font-size: 1.05rem; line-height: 1.05;
  padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; cursor: pointer; transition: background .25s, color .25s, border-color .25s;
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
}
.apbtn small { font-family: var(--mono); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.apbtn:hover { border-color: var(--shu); }
.apbtn.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.apbtn.on small { color: rgba(242, 237, 226, .6); }
.cg-estimate {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap;
  border-top: 1px dashed var(--line-strong); padding-top: 18px; margin-top: 4px;
}
.cg-estimate .ce-hint { font-size: .95rem; color: var(--ink-soft); }
.ce-fig { display: inline-flex; flex-direction: column; }
.ce-fig b { font-family: var(--serif); font-size: 1.7rem; line-height: 1; }
.ce-fig small { font-family: var(--mono); font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }
.ce-fig.ce-hi b { color: var(--shu); }
.ce-x { font-family: var(--serif); font-size: 1.4rem; color: var(--ink-soft); }
.cg-estimate.flash { animation: ceFlash .6s ease; }
@keyframes ceFlash { from { background: rgba(193, 58, 28, .14); } to { background: transparent; } }
@keyframes menuGroupIn { from { opacity: 0; transform: translateY(-6px); } }

.btn {
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: 999px;
  padding: 14px 28px;
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  transition: background .35s, border-color .35s;
}
.btn:hover { background: var(--shu); border-color: var(--shu); }

.builder-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw, 420px);
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}

/* Step 2 — pick your sushi (markup from builder.js) */
.cater-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.adv-toggle { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); cursor: pointer; }
.adv-toggle input { accent-color: var(--shu); width: 15px; height: 15px; }

.cater-progress { margin-bottom: 22px; }
.cp-bar { height: 4px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
.cp-bar i { display: block; height: 100%; width: 0; background: var(--shu); transition: width .5s cubic-bezier(.4, 0, .1, 1); }
.cater-progress.is-covered .cp-bar i { background: var(--gold); }
.cp-msg { font-size: .9rem; color: var(--ink-soft); }
.cp-msg b { color: var(--ink); font-weight: 600; }

.cater-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.cater-card {
  border: 1px solid var(--line); background: var(--paper); padding: 18px 18px 15px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .3s, box-shadow .3s;
}
.cater-card.has { border-color: var(--shu); box-shadow: inset 0 0 0 1px var(--shu); }
.cc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cc-name { font-family: var(--serif); font-size: 1.35rem; letter-spacing: -.01em; }
.cc-price { font-family: var(--mono); font-size: .66rem; letter-spacing: .04em; color: var(--shu); white-space: nowrap; }
.cc-desc { font-size: .82rem; color: var(--ink-soft); line-height: 1.5; flex: 1; margin: 0; }
.cc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; }
.cc-tags { font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.cc-step { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; background: var(--paper); }
.cc-step button { width: 38px; height: 38px; border: 0; background: transparent; font-size: 1.15rem; line-height: 1; cursor: pointer; transition: background .25s, color .25s; }
.cc-step button:hover { background: var(--ink); color: var(--paper); }
.cc-step input { width: 52px; height: 38px; border: 0; background: transparent; text-align: center; font-family: var(--mono); font-size: .8rem; -moz-appearance: textfield; appearance: textfield; }
.cc-step input::-webkit-outer-spin-button, .cc-step input::-webkit-inner-spin-button { -webkit-appearance: none; }
.cc-step input:focus { outline: none; background: var(--paper-2); }

.cater-extras { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 16px; }
.cater-extras summary { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); cursor: pointer; }
.cater-extras summary:hover { color: var(--shu); }
.cater-addon-list { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.cater-addon { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.ca-name { font-family: var(--serif); font-size: 1.1rem; flex: 1; }
.ca-price { font-size: .72rem; color: var(--shu); }

/* Cart — receipt on ink */
.cart-panel {
  position: sticky; top: 96px;
  background: var(--ink); color: var(--paper);
  padding: clamp(26px, 2.6vw, 40px);
  box-shadow: 14px 14px 0 rgba(27, 23, 18, .12);
}
.cart-panel::before {
  content: "見積書 · Your estimate";
  display: block;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px dashed rgba(242, 237, 226, .3);
  padding-bottom: 14px; margin-bottom: 14px;
}
.cart-panel h3 { font-size: 1.9rem; margin-bottom: 18px; }
.cart-panel table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .74rem; }
.cart-panel thead th {
  text-align: left; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  font-size: .58rem; color: rgba(242, 237, 226, .55);
  padding-bottom: 10px; border-bottom: 1px dashed rgba(242, 237, 226, .3);
}
.cart-panel thead th:last-child, .cart-panel td:last-child { text-align: right; }
.cart-panel tbody td { padding: 9px 6px 9px 0; border-bottom: 1px dashed rgba(242, 237, 226, .14); vertical-align: top; }
.cart-panel tfoot td { padding: 8px 0; }
.cart-panel tfoot tr:first-child td { padding-top: 16px; }
.cart-total-row td {
  border-top: 1px dashed rgba(242, 237, 226, .3);
  font-size: 1rem; padding-top: 14px !important;
}
#cart-total { font-family: var(--serif); font-size: 2rem; color: var(--paper); line-height: 1; }
#cart-warning { margin-top: 16px; font-size: .8rem; color: #E8896F; border-left: 2px solid var(--shu); padding-left: 12px; }
.cart-panel small { color: rgba(242, 237, 226, .45); font-size: .72rem; display: block; margin-top: 16px; line-height: 1.6; }

/* =========================================================================
   BOOKING FORM
   ========================================================================= */
.booking-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.booking-aside { position: sticky; top: 120px; }
.booking-aside .big-kanji {
  font-family: var(--kanji); font-weight: 700;
  font-size: clamp(4rem, 8vw, 7.5rem); line-height: 1.1;
  color: var(--paper-3); writing-mode: vertical-rl; letter-spacing: .18em;
}
.booking-aside .aside-note { margin-top: 26px; color: var(--ink-soft); max-width: 34ch; font-size: .95rem; }

#booking-form { display: grid; grid-template-columns: 1fr 1fr; gap: 34px clamp(24px, 3vw, 48px); }
#booking-form label {
  font-family: var(--mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft);
  display: block; margin-bottom: 8px;
}
#booking-form input[type="text"],
#booking-form input[type="email"],
#booking-form input[type="tel"],
#booking-form input[type="date"],
#booking-form input[type="number"],
#booking-form textarea {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid rgba(27, 23, 18, .4);
  border-radius: 0;
  padding: 8px 2px 12px;
  font-family: var(--serif); font-size: 1.25rem;
  transition: box-shadow .3s var(--ease-out);
}
#booking-form input:focus, #booking-form textarea:focus {
  outline: none; box-shadow: 0 2px 0 var(--shu);
}
#booking-form textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.fg { display: block; }
.fg-full { grid-column: 1 / -1; }
#address-row { grid-column: 1 / -1; }
.radio-row { display: flex; gap: 14px; }
.radio-row label {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 12px 24px; margin: 0;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.radio-row label:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.radio-row input { accent-color: var(--shu); }
#booking-form button[type="submit"] {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: 999px;
  padding: 20px 44px;
  font-family: var(--mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  position: relative; overflow: hidden;
  transition: background .4s var(--ease-out);
}
#booking-form button[type="submit"]:hover { background: var(--shu); border-color: var(--shu); }

#form-errors {
  grid-column: 1 / -1;
  background: var(--paper);
  border: 1px solid var(--shu); border-left: 5px solid var(--shu);
  padding: 20px 24px; margin-bottom: 30px;
  font-size: .92rem;
}
#form-errors ul { margin: 8px 0 0 18px; }
#booking-confirm {
  background: var(--ink); color: var(--paper);
  padding: clamp(28px, 3.4vw, 48px);
  margin-bottom: 36px;
  box-shadow: 14px 14px 0 rgba(27, 23, 18, .12);
}
#booking-confirm h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 12px; }
#booking-confirm code { font-family: var(--mono); color: var(--gold); font-size: .85em; }
#booking-confirm strong { color: #E8896F; }
/* The panel is ink-dark, so flip the CTA to paper-on-ink to keep it readable. */
#booking-confirm .cta {
  margin-top: 22px;
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}
#booking-confirm .cta:hover { color: var(--paper); }

/* =========================================================================
   TESTIMONIALS — ink band, oversized quotes
   ========================================================================= */
#testimonials .t-stack { display: grid; gap: clamp(50px, 8vh, 90px); }
.testimonial { max-width: 30ch; }
.testimonial:nth-child(2) { margin-left: auto; text-align: right; }
.testimonial:nth-child(2) footer { justify-content: flex-end; }
.testimonial:nth-child(3) { margin-left: clamp(0px, 10vw, 180px); }
.testimonial p {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.5rem, 3.2vw, 2.7rem);
  line-height: 1.22; letter-spacing: -.01em;
}
.testimonial p::before { content: "“"; color: var(--shu); }
.testimonial p::after { content: "”"; color: var(--shu); }
.testimonial footer {
  margin-top: 18px;
  font-family: var(--mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
  display: flex; align-items: center; gap: 12px;
}
.testimonial footer::before { content: ""; width: 34px; height: 1px; background: var(--gold); }

/* =========================================================================
   FOOTER (injected by js/site.js)
   ========================================================================= */
#site-footer { background: var(--ink); color: var(--paper); overflow: hidden; }
.foot-cta {
  padding: clamp(80px, 12vh, 150px) var(--pad-x) clamp(60px, 8vh, 100px);
  border-bottom: 1px solid rgba(242, 237, 226, .14);
}
.foot-cta .mono { color: var(--gold); display: block; margin-bottom: 20px; }
.foot-cta-link {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6.6vw, 6rem);
  line-height: 1.02; letter-spacing: -.02em;
  text-decoration: none;
  display: inline-block;
  transition: color .4s;
}
.foot-cta-link .it { color: var(--shu); transition: color .4s; }
.foot-cta-link:hover, .foot-cta-link:hover .it { color: var(--shu); }
.foot-cta-link:hover .it { font-style: italic; }
.foot-cta-link .arr { display: inline-block; transition: transform .45s var(--ease-out); }
.foot-cta-link:hover .arr { transform: translateX(16px); }
.foot-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding: clamp(40px, 6vh, 70px) var(--pad-x);
}
.foot-grid h4 { font-family: var(--mono); font-size: .6rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgba(242, 237, 226, .45); margin-bottom: 16px; }
.foot-grid p, .foot-grid a { font-size: .92rem; color: rgba(242, 237, 226, .85); text-decoration: none; line-height: 1.8; }
.foot-grid a:hover { color: var(--shu); }
.foot-mark {
  padding: 0 var(--pad-x);
  font-family: var(--serif);
  font-size: clamp(5rem, 19vw, 21rem);
  line-height: .78;
  letter-spacing: -.02em;
  color: rgba(242, 237, 226, .07);
  transform: translateY(14%);
  user-select: none;
  white-space: nowrap;
}
.foot-legal {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 22px var(--pad-x);
  font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(242, 237, 226, .4);
}
.foot-legal a { color: inherit; text-decoration: none; }
.foot-legal a:hover { color: var(--shu); }
.foot-credit {
  padding: 16px var(--pad-x) 26px;
  border-top: 1px solid rgba(242, 237, 226, .1);
  text-align: center;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(242, 237, 226, .38);
}
.foot-credit a { color: rgba(242, 237, 226, .68); text-decoration: none; transition: color .3s; }
.foot-credit a:hover { color: var(--shu); }

/* =========================================================================
   INNER PAGE HERO
   ========================================================================= */
.page-hero {
  padding: clamp(160px, 24vh, 240px) var(--pad-x) clamp(50px, 7vh, 80px);
  border-bottom: 1px solid var(--line-strong);
  position: relative;
  overflow: hidden;
}
.page-hero h1 { font-size: clamp(3rem, 8.4vw, 7.6rem); letter-spacing: -.025em; line-height: .95; max-width: 12ch; }
.page-hero .lede { margin-top: 24px; max-width: 52ch; color: var(--ink-soft); font-size: 1.05rem; }
.page-hero .eyebrow { display: flex; align-items: center; gap: 14px; color: var(--shu); margin-bottom: 24px; }
.page-hero .eyebrow::after { content: ""; height: 1px; width: 64px; background: var(--shu); }
.page-kanji {
  position: absolute; top: clamp(120px, 18vh, 180px); right: clamp(16px, 4vw, 60px);
  writing-mode: vertical-rl;
  font-family: var(--kanji); font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  letter-spacing: .4em;
  color: var(--paper-3);
  z-index: -1;
}

/* =========================================================================
   ABOUT
   ========================================================================= */
.about-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 100px); }
.about-lede { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.3; letter-spacing: -.01em; }
.about-lede .it { color: var(--shu); }
.about-body { margin-top: 34px; color: var(--ink-soft); max-width: 62ch; display: grid; gap: 18px; }
.about-fig {
  background: var(--ink);
  aspect-ratio: 3 / 4;
  position: relative; overflow: hidden;
}
.about-fig svg { width: 100%; height: 100%; }
.steps { border-top: 1px solid var(--line-strong); margin-top: clamp(50px, 8vh, 80px); }
.step {
  display: grid; grid-template-columns: 90px minmax(0, 4fr) minmax(0, 7fr);
  gap: 20px clamp(20px, 3vw, 60px);
  padding: 34px 0; border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.step-num { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; color: var(--shu); }
.step h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.step p { color: var(--ink-soft); font-size: .95rem; }
.promise {
  margin-top: clamp(60px, 9vh, 100px);
  background: var(--ink); color: var(--paper);
  padding: clamp(40px, 5vw, 80px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center;
}
.promise p { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.35; max-width: 44ch; }
.promise .jp-seal {
  font-family: var(--kanji); font-weight: 700; font-size: 1rem; letter-spacing: .3em;
  color: var(--paper);
  border: 1px solid var(--shu); background: var(--shu);
  padding: 18px 12px;
  writing-mode: vertical-rl;
}

/* =========================================================================
   FAQ — accordion
   ========================================================================= */
.faq-list { border-top: 1px solid var(--line-strong); max-width: 900px; }
details.faq-item { border-bottom: 1px solid var(--line); }
details.faq-item summary {
  list-style: none;
  display: grid; grid-template-columns: 70px minmax(0, 1fr) 40px;
  align-items: baseline; gap: 18px;
  padding: 28px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
details.faq-item summary::-webkit-details-marker { display: none; }
.faq-num { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; color: var(--gold); }
details.faq-item h3 { font-size: clamp(1.35rem, 2.4vw, 2rem); transition: color .3s; }
details.faq-item summary:hover h3 { color: var(--shu); font-style: italic; }
.faq-x { position: relative; width: 18px; height: 18px; justify-self: end; align-self: center; }
.faq-x::before, .faq-x::after {
  content: ""; position: absolute; background: var(--ink); left: 0; top: 8px; width: 18px; height: 2px;
  transition: transform .4s var(--ease-out);
}
.faq-x::after { transform: rotate(90deg); }
details[open] .faq-x::after { transform: rotate(0); }
details[open] .faq-x::before { background: var(--shu); }
details[open] .faq-x::after { background: var(--shu); }
.faq-body { padding: 0 0 30px 88px; max-width: 62ch; color: var(--ink-soft); animation: faqIn .5s var(--ease-out); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-8px); } }

/* =========================================================================
   GALLERY — asymmetric art tiles
   ========================================================================= */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 2vw, 28px);
}
.g-tile { position: relative; overflow: hidden; background: var(--paper-2); }
.g-tile svg { width: 100%; height: 100%; transition: transform 1.1s var(--ease-out); }
.g-tile:hover svg { transform: scale(1.06); }
.g-tile .g-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  transform: translateY(101%);
  transition: transform .5s var(--ease-out);
}
.g-tile:hover .g-cap { transform: translateY(0); }
.g-tile .g-cap .jp { font-family: var(--kanji); color: var(--gold); }
/* No hover on touch, so the slide-up caption could never be read — every tile
   was an unlabelled picture. Show them by default there. */
@media (hover: none) {
  .g-tile .g-cap { transform: none; }
}
.g-a { grid-column: span 7; aspect-ratio: 7 / 5; }
.g-b { grid-column: span 5; aspect-ratio: 5 / 5; }
.g-c { grid-column: span 4; aspect-ratio: 4 / 5; }
.g-d { grid-column: span 8; aspect-ratio: 8 / 5; }
.g-e { grid-column: span 5; aspect-ratio: 5 / 4; }
.g-f { grid-column: span 7; aspect-ratio: 7 / 4; }
.gallery-note { margin-top: 26px; color: var(--ink-soft); font-size: .85rem; }

/* =========================================================================
   ADMIN
   ========================================================================= */
.req-card {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  padding: clamp(22px, 2.6vw, 36px);
  margin-bottom: 26px;
  position: relative;
}
.req-card[data-status="confirmed"] { border-left: 5px solid var(--gold); }
.req-card[data-status="new"] { border-left: 5px solid var(--shu); }
.req-card h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-bottom: 6px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.req-status {
  font-family: var(--mono); font-size: .58rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  background: var(--ink); color: var(--paper);
  padding: 4px 12px; border-radius: 999px;
}
.req-card[data-status="confirmed"] .req-status { background: var(--gold); }
.req-card[data-status="new"] .req-status { background: var(--shu); }
.req-meta { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; color: var(--ink-soft); margin-bottom: 14px; }
.req-card p { font-size: .92rem; margin-bottom: 8px; }
.req-card ul { margin: 12px 0 12px 4px; list-style: none; font-family: var(--mono); font-size: .74rem; border-top: 1px dashed var(--line); }
.req-card ul li { padding: 7px 0; border-bottom: 1px dashed var(--line); }
.req-card button {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 9px 20px; margin-top: 10px; margin-right: 8px;
  font-family: var(--mono); font-size: .62rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  transition: background .3s, color .3s, border-color .3s;
}
.req-card button:hover { background: var(--ink); color: var(--paper); }
.req-card button[data-del]:hover { background: var(--shu); border-color: var(--shu); }
#requests-empty { color: var(--ink-soft); font-family: var(--serif); font-size: 1.4rem; font-style: italic; }

#price-editor { margin-top: 30px; border-top: 1px solid var(--line-strong); }
.price-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.price-row label { font-family: var(--serif); font-size: 1.15rem; }
.price-row label small { font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-top: 2px; }
.price-row input[type="number"] {
  background: transparent; border: 0; border-bottom: 1px solid var(--line-strong);
  font-family: var(--mono); font-size: .95rem; width: 100px; text-align: right;
  padding: 6px 2px;
}
.price-row input:focus { outline: none; box-shadow: 0 2px 0 var(--shu); }
.price-flag {
  font-family: var(--mono); font-size: .56rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--paper); background: var(--shu); padding: 3px 10px; border-radius: 999px;
}

/* =========================================================================
   404
   ========================================================================= */
.nf-hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 120px var(--pad-x); position: relative; overflow: hidden; }
.nf-hero h1 { font-size: clamp(5rem, 20vw, 18rem); line-height: .9; letter-spacing: -.04em; }
.nf-hero .it { color: var(--shu); }
.nf-hero p { margin: 26px 0 34px; color: var(--ink-soft); max-width: 40ch; font-size: 1.05rem; }

/* =========================================================================
   CUSTOM CURSOR — chopsticks (injected by polish.js, pointer:fine only)
   ========================================================================= */
@media (pointer: fine) {
  /* Hide the native arrow only once JS has actually mounted the chopsticks. */
  html.chopsticks-on, html.chopsticks-on * { cursor: none !important; }

  .cursor-sticks {
    position: fixed; top: 0; left: 0;
    width: 64px; height: 64px;
    pointer-events: none; z-index: 3000;
    will-change: transform;
    transition: opacity .25s var(--ease-out);
  }
  .cursor-sticks svg { width: 64px; height: 64px; overflow: visible; display: block; }

  /* held angle — tips stay put at the hotspot (30,54) */
  .cs-rot { transform-box: view-box; transform-origin: 30px 54px; transform: rotate(28deg); }

  /* Ink lacquer with a light halo so the sticks read on cream AND ink bands. */
  .cs-stick {
    fill: var(--ink);
    stroke: rgba(242, 237, 226, .92); stroke-width: .8;
    transform-box: view-box;
    transition: transform .13s var(--ease-out), fill .2s var(--ease-out);
  }
  .cs-left  { transform-origin: 26px 5px; }
  .cs-right { transform-origin: 34px 5px; }

  /* hover an interactive element: sticks lift a touch (scale the SVG, never the
     wrap — the wrap's transform is the pointer position and must stay instant) */
  .cursor-sticks svg { transition: transform .18s var(--ease-out); transform-origin: 30px 54px; }
  .cursor-sticks.is-hover svg { transform: scale(1.12); }

  /* press: pinch the tips together and ink them vermilion (picking up a bite) */
  .cursor-sticks.is-press .cs-stick { fill: var(--shu); stroke: rgba(242, 237, 226, .8); }
  .cursor-sticks.is-press .cs-left  { transform: rotate(-5deg); }
  .cursor-sticks.is-press .cs-right { transform: rotate(5deg); }

  .cursor-hidden .cursor-sticks { opacity: 0; }
}

/* Coarse pointers (touch) keep the normal cursor — no chopsticks. */
@media (pointer: coarse) { .cursor-sticks { display: none; } }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1020px) {
  .booking-grid { grid-template-columns: 1fr; }
  .booking-aside { position: static; display: flex; align-items: center; gap: 30px; }
  .booking-aside .big-kanji { writing-mode: horizontal-tb; font-size: clamp(2.6rem, 8vw, 4rem); letter-spacing: .1em; }
  .about-grid { grid-template-columns: 1fr; }
  .about-fig { max-width: 480px; aspect-ratio: 4 / 3; }
  .intro-grid { grid-template-columns: 1fr; }
  .intro-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 34px; grid-template-columns: repeat(3, 1fr); }
  .intro-note { grid-column: 1 / -1; max-width: 60ch; }
}

@media (max-width: 900px) {
  .site-nav { display: none; }
  .nav-burger { display: flex; }
  .builder-cols { grid-template-columns: 1fr; }
  .cart-panel { position: static; }
  .menu-cat-head { grid-template-columns: 1fr; }
  .cat-note { justify-self: start; text-align: left; }
  .step { grid-template-columns: 50px 1fr; }
  .step p { grid-column: 2; }
  .promise { grid-template-columns: 1fr; }
  .promise .jp-seal { writing-mode: horizontal-tb; justify-self: start; padding: 10px 18px; }
  .g-a, .g-b, .g-c, .g-d, .g-e, .g-f { grid-column: span 12; }
  .g-c { aspect-ratio: 4 / 3; }
  .hero-sub { grid-template-columns: 1fr; }
  .hero-kanji { display: none; }
  .faq-body { padding-left: 0; }
  details.faq-item summary { grid-template-columns: 44px minmax(0, 1fr) 30px; }
}

@media (max-width: 640px) {
  /* .sec already pays the page gutter; the nested .wrap was paying it a second
     time, so section content sat 40px in from each edge and only ~80% of a
     390px screen was usable. The hero (no .wrap) never did this, which is why
     its text and every section's text disagreed on where the margin was. */
  .sec > .wrap { padding-inline: 0; }

  #booking-form { grid-template-columns: 1fr; }
  .mr-main { flex-wrap: wrap; gap: 4px 12px; }
  .mr-name { white-space: normal; }
  .mr-leader { display: none; }
  .mr-tags { display: none; }
  .mr-price { margin-left: auto; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .mr-sub { flex-direction: column; gap: 4px; }
  .mr-meta { padding-top: 0; }
  .cater-guests { grid-template-columns: 1fr; }
  .cater-grid { grid-template-columns: 1fr; }
  .hero-meta-top { gap: 16px; }
  .testimonial { max-width: 100%; }
  .testimonial:nth-child(3) { margin-left: 0; }

  /* --- hero: keep the big headline from clipping / overflowing on phones --- */
  .hero { padding-top: 116px; min-height: 88svh; }
  /* Pull the disc further off the right edge so it clears the meta line — at
     68vw it ran behind "Private & corporate events", putting ink text on
     vermilion. */
  .hero-disc { top: 4%; right: -26vw; width: 62vw; }
  .hero-title { font-size: clamp(2.3rem, 12vw, 3.4rem); letter-spacing: -.02em; line-height: .98; }
  .hero-title .indent { padding-left: 22px; }
  .hero-tagline { font-size: 1rem; }
  .hero-cta-row { gap: 16px 20px; margin-top: 22px; }
  .hero-cta-row .cta { padding: 15px 26px; }
  .hero-meta-top { position: static; margin-bottom: 8px; gap: 6px 18px; }
  /* Three mono columns in 350px wrapped every one of them; the third is
     repeated verbatim in the footer, so drop it and let the rest breathe. */
  .hero-foot { flex-wrap: wrap; gap: 4px 20px; }
  .hero-foot > span:last-child { display: none; }

  /* --- tighter section rhythm on mobile ---
     The page ran ~13 phone screens. Section padding alone was ~170px of empty
     band between every section; the editorial airiness reads as padding on a
     small screen, not as composition. */
  .sec { padding-top: clamp(48px, 7vh, 64px); padding-bottom: clamp(48px, 7vh, 64px); }
  .sec-title { font-size: clamp(2.2rem, 8.5vw, 3rem); }
  .sec-head { margin-bottom: 28px; }
  .sec-lede { margin-top: 14px; }
  .sec-index { margin-bottom: 14px; }

  /* how-it-works: three short steps were eating a screen and a half */
  .how-step { padding: 18px 0; }
  .how-num { font-size: 2rem; margin-bottom: 4px; }
  .how-step h3 { margin-bottom: 8px; }
  .how-cta { margin-top: 26px; }

  /* order cards: 6 of these stacked, so every px of chrome counts */
  .cater-card { padding: 14px 14px 12px; gap: 6px; }
  .cater-grid { gap: 10px; }
  .cc-name { font-size: 1.2rem; }
  .cater-guests { padding: 20px 16px; margin-bottom: 26px; }
  .builder-cols + .build-step-label, .cater-guests + .build-step-label { margin-top: 28px; }

  /* testimonials + footer: generous desktop gaps, dead space on a phone */
  #testimonials .t-stack { gap: 44px; }
  .foot-cta { padding-block: clamp(52px, 8vh, 72px) clamp(38px, 5vh, 52px); }
  .foot-grid { padding-block: clamp(30px, 4vh, 44px); gap: 24px; }
  .foot-mark { font-size: clamp(3.4rem, 16vw, 6rem); }

  /* --- menu card: edge-to-edge feel, no wasted side padding --- */
  .menu-card { padding: 22px 18px; box-shadow: 6px 6px 0 rgba(27, 23, 18, .06); }
  .menu-group-title { font-size: 1.3rem; }

  /* --- menu categories collapse here (see menu-display.js) --- */
  .menu-group-head { cursor: pointer; padding-block: 12px 10px; align-items: center; }
  .menu-group-seal { margin-left: auto; }
  .menu-group-x {
    display: block; position: relative;
    width: 14px; height: 14px; flex: 0 0 14px;
  }
  .menu-group-x::before, .menu-group-x::after {
    content: ""; position: absolute; left: 0; top: 6px;
    width: 14px; height: 2px; background: var(--ink);
    transition: transform .3s var(--ease-out);
  }
  .menu-group-x::after { transform: rotate(90deg); }
  .menu-group[open] .menu-group-x::after { transform: rotate(0); }
  .menu-group[open] .menu-group-x::before,
  .menu-group[open] .menu-group-x::after { background: var(--shu); }
  .menu-group-body { animation: menuGroupIn .38s var(--ease-out); }
  .menu-group { margin-top: 0; }
  .menu-group + .menu-group { border-top: 1px solid var(--line); }

  /* --- how-it-works & step labels --- */
  .how-cta { margin-top: 32px; }

  /* --- full-width tap-friendly primary buttons --- */
  #booking-form button[type="submit"] { width: 100%; justify-content: center; padding: 18px 24px; }
  .cater-toolbar { flex-direction: column; align-items: stretch; }
  .cater-toolbar .btn { width: 100%; text-align: center; }

  /* --- booking: stack the decorative kanji off the copy --- */
  /* At <=1020px the aside turns into a row; on a phone the kanji ate a third
     of the line and squeezed the note into a 5-word column. */
  .booking-aside { flex-direction: column; align-items: flex-start; gap: 14px; }
  .booking-aside .big-kanji { font-size: 2.2rem; }
  .booking-aside .aside-note { margin-top: 0; max-width: none; }
  /* 1.25rem serif ran long placeholders off the end of the field. 1.05rem is
     still >=16px, so iOS won't zoom the page on focus. */
  #booking-form input[type="text"],
  #booking-form input[type="email"],
  #booking-form input[type="tel"],
  #booking-form input[type="date"],
  #booking-form input[type="number"],
  #booking-form textarea { font-size: 1.05rem; }
  #booking-form { gap: 26px; }
  .radio-row { flex-wrap: wrap; gap: 10px; }
  .radio-row label { padding: 12px 18px; }

  /* --- testimonials: the desktop zig-zag reads as broken in one column --- */
  .testimonial:nth-child(2) { margin-left: 0; text-align: left; }
  .testimonial:nth-child(2) footer { justify-content: flex-start; }

  /* --- order cards: long names shoved the price into a ragged second line --- */
  .cc-top { flex-direction: column; align-items: flex-start; gap: 3px; }
  .cc-name { line-height: 1.15; }

  /* --- estimate receipt: 4 mono columns in ~310px wrapped every single cell,
         breaking "JD 1.00" and "70 pcs" across lines. Shrink the type and let
         only the item name wrap; the numbers stay on one line. --- */
  .cart-panel { padding: 24px 18px; box-shadow: 8px 8px 0 rgba(27, 23, 18, .12); }
  .cart-panel table { font-size: .62rem; }
  .cart-panel thead th { font-size: .5rem; letter-spacing: .06em; }
  .cart-panel th + th, .cart-panel td + td { white-space: nowrap; }
  .cart-panel tbody td { padding: 8px 4px 8px 0; }
  #cart-total { font-size: 1.5rem; }

  /* --- admin price editor: the input orphaned itself mid-row when wrapped --- */
  .price-row { flex-wrap: wrap; gap: 8px 20px; }
  .price-row label { flex: 1 1 100%; }
  .price-row input[type="number"] { width: 100%; text-align: left; font-size: 1rem; padding: 8px 2px; }

  /* --- inner pages: 200px of empty space above every page title --- */
  .page-hero { padding-top: 122px; }
  .promise { padding: 28px 24px; }
}

/* Overlay nav: allow it to scroll and shrink on short/small screens so all
   links stay reachable. */
@media (max-width: 900px) {
  #nav-overlay { overflow-y: auto; padding-block: 88px; justify-content: flex-start; }
  #nav-overlay a { font-size: clamp(2rem, 8.5vw, 3.2rem); padding-block: 4px; }
  .overlay-close { padding: 14px; }
}

/* Very small phones */
@media (max-width: 380px) {
  .hero-title { font-size: 2.05rem; }
  .cg-field input[type="number"] { font-size: 1.9rem; width: 100px; }
  .mi-name { font-size: .95rem; }
  .mi-price { font-size: 1.02rem; }
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
}

/* =========================================================================
   THE CRAFT — scroll-driven ink drawings (craft.html, js/craft.js)
   ========================================================================= */
.craft-hero { border-bottom: 0; }
.craft-scroll-cue {
  margin-top: 40px; display: inline-flex; align-items: center; gap: 16px;
  color: var(--ink-soft);
}
.craft-scroll-cue .cue-line { display: inline-block; width: 72px; height: 1px; background: var(--ink-soft); }

/* --- pinned stage shell --- */
.craft-stage {
  position: relative;
  min-height: 100vh;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.stage-pin { min-height: 100vh; display: flex; flex-direction: column; }
.stage-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 96px; width: 100%;
}
.stage-progress { display: inline-flex; align-items: center; gap: 12px; color: var(--ink-soft); }
.band-ink .stage-progress { color: rgba(242, 237, 226, .55); }
.stage-bar {
  display: inline-block; width: 120px; height: 2px;
  background: var(--line); position: relative; overflow: hidden;
}
.band-ink .stage-bar { background: rgba(242, 237, 226, .18); }
.stage-bar i {
  position: absolute; inset: 0; background: var(--shu);
  transform: scaleX(0); transform-origin: left center;
}
.stage-pct { font-variant-numeric: tabular-nums; min-width: 3ch; }

.stage-body {
  flex: 1; width: 100%;
  display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  align-items: center; gap: clamp(24px, 4vw, 64px);
  padding-bottom: 40px;
}

/* --- captions --- */
.stage-captions { position: relative; min-height: 200px; }
.stage-captions .cap { max-width: 34ch; }
.stage-captions.caps-live .cap { position: absolute; top: 0; left: 0; will-change: transform, opacity; }
.stage-captions:not(.caps-live):not(.caps-static) .cap { margin-bottom: 34px; } /* no-JS: stack readably */
.stage-captions.caps-static .cap { display: none; }
.stage-captions.caps-static .cap:last-child { display: block; }
.cap-idx { color: var(--shu); display: block; margin-bottom: 14px; }
.cap-line {
  font-family: var(--serif); font-size: clamp(1.7rem, 2.6vw, 2.5rem);
  line-height: 1.08; letter-spacing: -.015em;
}
.cap-line .it { color: var(--shu); }
.cap-note { margin-top: 14px; color: var(--ink-soft); font-size: .92rem; max-width: 30ch; }
.band-ink .cap-note { color: rgba(242, 237, 226, .58); }
.band-ink .cap-line .it { color: #E8896F; }

/* --- svg canvas --- */
.stage-canvas svg { width: 100%; height: auto; max-height: calc(100vh - 200px); display: block; margin: 0 auto; }
#svg-nigiri { max-width: 860px; }
#svg-salmon { max-width: 980px; }
#svg-home-nigiri { max-width: 820px; }

/* home nigiri — inline CTA under the final caption */
.home-nigiri #hn-cta { margin-top: 26px; }

.svg-kanji-bg {
  font-family: var(--kanji); font-weight: 700; font-size: 270px;
  fill: var(--ink); opacity: .05;
}
.svg-kanji-bg.on-ink { fill: var(--paper); opacity: .06; }

.ink-hair line, .ink-hair path { stroke: var(--ink); stroke-opacity: .3; stroke-width: 1; fill: none; }
.draw { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.grain { stroke: var(--ink-soft); stroke-opacity: .55; stroke-width: 1.5; fill: none; stroke-linecap: round; }
.stria path { stroke: rgba(251, 247, 236, .75); stroke-width: 5; fill: none; stroke-linecap: round; }
#n-seeds ellipse { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.stamp-kanji { font-family: var(--kanji); font-weight: 700; font-size: 40px; fill: var(--paper); }

.callouts .co circle { fill: var(--shu); }
.callouts .co-line { stroke: var(--ink); stroke-opacity: .55; stroke-width: 1; fill: none; }
.callouts text {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em;
  fill: var(--ink-soft); text-transform: uppercase;
}
.callouts .co-jp { font-family: var(--kanji); font-size: 14px; letter-spacing: .3em; fill: var(--ink); }
.callouts.on-ink .co-line { stroke: var(--paper); stroke-opacity: .45; }
.callouts.on-ink text { fill: rgba(242, 237, 226, .7); }
.callouts.on-ink .co-jp { fill: var(--paper); }

/* salmon scene */
.fish-outline { fill: none; stroke: var(--paper); stroke-width: 2.2; stroke-linejoin: round; }
#s-flesh .fin { fill: rgba(196, 82, 47, .55); stroke: rgba(242, 237, 226, .55); stroke-width: 1.2; }
.flesh-line { stroke: rgba(24, 19, 16, .5); stroke-width: 2; fill: none; }
.flesh-line.thin, .flesh-line.thin line { stroke: rgba(24, 19, 16, .32); stroke-width: 1.2; }
#s-tailrays-flesh line { stroke: rgba(24, 19, 16, .35); stroke-width: 1.2; }
.scale { stroke: rgba(24, 19, 16, .3); stroke-width: 1.1; fill: none; }
.bone path, .bone line, .bone circle { stroke: var(--paper); stroke-width: 1.9; fill: none; stroke-linecap: round; }
.bone.thin path, .bone.thin line { stroke-width: 1.1; stroke-opacity: .85; }
.bone .bone-fill { fill: var(--paper); stroke: none; }
.scan-read { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; fill: #E8896F; }

/* interstitial + outro */
.craft-between, .craft-outro { padding-block: clamp(90px, 14vh, 160px); }
.between-line {
  font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 3.1rem);
  line-height: 1.2; letter-spacing: -.015em; max-width: 26ch;
}
.between-line .it { color: var(--shu); }
.craft-outro .hero-cta-row { margin-top: 44px; }

/* static fallback (reduced motion / no ScrollTrigger) */
.stage-static { min-height: auto; }
.stage-static .stage-pin { min-height: auto; padding-bottom: 60px; }
.stage-static .stage-progress { display: none; }

/* --- responsive --- */
@media (max-width: 900px) {
  /* The eyebrow wrapped to two lines and the progress meter, still floated to
     the far right, cut straight through it. Stack them instead. */
  .stage-head { padding-top: 84px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .stage-bar { width: 90px; }
  .stage-body { grid-template-columns: 1fr; align-items: start; gap: 10px; padding-bottom: 24px; }
  .stage-captions { order: 2; min-height: 170px; margin-top: 8px; }
  .stage-canvas { order: 1; align-self: center; }
  .stage-canvas svg { max-height: 52vh; }
  .cap-line { font-size: clamp(1.35rem, 5.6vw, 1.7rem); }
  .cap-note { font-size: .85rem; }
  .craft-hero .lede { font-size: .98rem; }
}

/* =========================================================================
   3D NIGIRI CENTERPIECE (index.html, js/nigiri3d.js)
   ========================================================================= */
.nigiri3d { position: relative; border-top: 1px solid var(--line); }
.n3-pin { min-height: 100vh; display: flex; flex-direction: column; }
.n3-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 96px; width: 100%;
}
.n3-hint { color: var(--ink-soft); }
.n3-hint i { color: var(--shu); font-style: normal; padding: 0 6px; }
.n3-stage { position: relative; flex: 1; width: 100%; min-height: 62vh; }

/* cinematic hero video BLENDED into the page (js/nigiri-hero.js).
   Tall section + sticky pin = the video holds still while scroll drives it.
   The ORIGINAL clip is used untouched — no colour grade, no filter, so its
   brightness and quality are exactly as shot. It's blended by matching the PAGE
   to the CLIP instead of the other way round: a "studio pool" whose centre is the
   same cool neutral grey as the clip's seamless backdrop (sampled from the file),
   dissolving outward — first holding that neutral grey through the whole zone the
   clip covers, then warming to the paper cream only at the very edge where the
   clip is already gone. The clip is object-fit:contain (whole composition always
   visible, never cropped) and feathered with a radial mask, so its grey backdrop
   melts into the matching pool and the pool melts into paper — a luminous studio
   window in the page, never a rectangular video block, sushi untouched. */
.nigiri3d.hero-blend { position: relative; height: 320vh; background: var(--paper); border-top: 0; }
.hero-blend .n3-pin {
  position: sticky; top: 0; height: 100vh; min-height: 100vh; overflow: hidden;
  /* warm pool tuned to THIS clip's GRADED backdrop (the footage is colour-graded
     into the paper palette — the studio sweep now reads as a warm ivory ~#dcd6c6
     brightening to ~#e6ddc4, sampled from the graded frames). Three layers, back→
     front:
       1. the warm pool itself — the clip's backdrop colour, so the feathered edge
          of the clip melts into an identical warm tone with no seam on any screen;
       2. a soft top wash lifting the clip's slightly darker upper band back to the
          pool tone (sits BEHIND the clip, so the sushi's pixels stay untouched);
       3. a top+bottom paper melt so the whole pinned panel dissolves into the
          paper sections above and below — never a rectangle sitting on the page. */
  background:
    linear-gradient(180deg,
      var(--paper) 0%, rgba(242,237,226,0) 15%,
      rgba(242,237,226,0) 85%, var(--paper) 100%),
    radial-gradient(140% 56% at 58% -6%,
      rgba(216,209,193,0.5) 0%, rgba(216,209,193,0) 58%),
    radial-gradient(130% 122% at 58% 55%,
      #ded8c8 0%, #d9d2c1 42%, #dcd5c5 60%, #e2dbcc 74%,
      #eae3d5 84%, var(--paper) 98%);
}
/* The clip is sized to its OWN 16:9 box (never letterboxed inside a bigger frame):
   width/height resolve to whichever fits the pin, so the element edges ARE the clip
   edges on every aspect ratio. That lets one radial mask — transparent exactly at
   those edges (50% radii), opaque across the central 60% where the sushi lives —
   feather all four sides to nothing on desktop AND portrait. The clip is never a
   block; it's a luminous oval of studio light melting into the pool, then the page.
   No colour touched: only alpha at the rim and the page colour around it change. */
.hero-blend #n3-video {
  position: absolute; top: 57%; left: 61%;   /* pushed right + slightly low, off-centre */
  width:  min(100%, calc(100vh * 16 / 9));
  height: min(100%, calc(100vw * 9 / 16));
  object-fit: cover; display: block; z-index: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(0.8); transform-origin: 50% 50%;  /* zoomed out to keep the render soft/small, hiding low-res detail */
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 60%, transparent 100%);
  mask-image: radial-gradient(50% 50% at 50% 50%, #000 60%, transparent 100%);
}
/* The enlarged clip is nudged low, so its bottom edge bleeds off-screen and the
   mask's fade-to-nothing lands below the fold — leaving the clip ~half-opaque
   where the section cuts it, i.e. a faint horizontal "border" line at the bottom.
   This paper wash sits ON TOP of the clip (after it in the DOM, below the z-index:1
   captions) and dissolves that bottom band into the page. It starts transparent
   through the sushi zone and only ramps to paper well below the rice, so the sushi
   is untouched — it just erases the edge line. */
.hero-blend .n3-pin::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24%;
  z-index: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(242,237,226,0) 0%, rgba(242,237,226,0) 42%, var(--paper) 100%);
}
.hero-blend .n3-head, .hero-blend .n3-stage { position: relative; z-index: 1; }
.n3-fallback[hidden] { display: none; }
.hero-blend .n3-fb-img {
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 52%, transparent 100%);
  mask-image: radial-gradient(70% 70% at 50% 50%, #000 52%, transparent 100%);
}
.n3-fb-img { max-width: min(560px, 84vw); height: auto; display: block; }
/* headline sits in the open space to the upper-left, ABOVE the off-centre sushi
   but not pinned to the very top (there's breathing room above it). */
.n3-caption {
  position: absolute; left: max(28px, 6vw); top: 21%; bottom: auto;
  max-width: 26ch; pointer-events: none;
}
.n3-step { color: var(--shu); display: block; margin-bottom: 10px; }
.n3-line {
  font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  line-height: 1.08; letter-spacing: -.015em;
}
.n3-fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 14px;
}
.n3-fb-kanji {
  font-family: var(--kanji); font-weight: 700; line-height: 1;
  font-size: clamp(90px, 18vw, 200px); color: var(--ink); opacity: .1;
}
.n3-fb-line { font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 2rem); }

@media (max-width: 900px) {
  /* Phones: drop the tall pinned scroll-scrub entirely (it was 190vh of mostly
     empty scrolling — a huge dead gap). Make it a normal, short section that
     just shows the finished piece. */
  .nigiri3d.hero-blend { height: auto; }
  .n3-head { padding-top: 84px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .hero-blend #n3-video {
    top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.86);
  }
  .hero-blend .n3-pin {
    position: static; height: auto; min-height: 76vh;
    background:
      linear-gradient(180deg,
        var(--paper) 0%, rgba(242,237,226,0) 15%,
        rgba(242,237,226,0) 85%, var(--paper) 100%),
      radial-gradient(150% 52% at 50% -6%,
        rgba(216,209,193,0.5) 0%, rgba(216,209,193,0) 58%),
      radial-gradient(120% 118% at 50% 55%,
        #ded8c8 0%, #d9d2c1 42%, #dcd5c5 60%, #e2dbcc 74%,
        #eae3d5 84%, var(--paper) 98%);
  }
  /* Desktop parks the headline in open space beside the off-centre sushi. In
     one column there is no "beside" — at top:16% the text landed straight on
     the rice. Drop it below the piece instead. */
  .n3-caption {
    top: auto; bottom: 7%;
    left: max(20px, 5vw); right: max(20px, 5vw);
    max-width: none;
  }
  .n3-line { font-size: clamp(1.5rem, 6.4vw, 2rem); }
}

/* =========================================================================
   SALMON MENU SELECTOR (index.html #menu, js/salmon-menu.js)
   ========================================================================= */
.salmon-menu { margin-bottom: clamp(44px, 6vw, 84px); }
.sm-instruct {
  color: var(--ink-soft); text-align: center; margin-bottom: 10px;
  letter-spacing: .14em; text-transform: uppercase;
}
.sm-instruct span, .sm-instruct b { color: var(--shu); font-weight: 500; }
.sm-canvas { max-width: 1000px; margin: 0 auto; }
.sm-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* -- skeleton — everything is a rib -- */
.sm-rib { stroke: var(--ink); fill: none; stroke-linecap: round; stroke-width: 1.6; stroke-opacity: .42; }
.sm-rib.skull { stroke-opacity: .6; stroke-width: 1.8; }
.sm-rib.tail { stroke-opacity: .6; stroke-width: 1.7; }
.sm-vert { stroke: var(--ink); fill: none; stroke-width: 1.5; stroke-opacity: .5; stroke-linecap: round; }
.sm-spine { stroke: var(--ink); fill: none; stroke-width: 2.4; stroke-opacity: .72; stroke-linecap: round; }
.sm-eye { fill: var(--ink); }
.sm-eye-socket { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-opacity: .6; }

/* -- flesh fillets: peel apart when the section is skinned (slow, deliberate) -- */
.sm-fillet { transition: transform 2.1s cubic-bezier(.45,0,.15,1), opacity 1.7s ease; }
.sm-skin-edge { fill: none; stroke: #D9A9B4; stroke-width: 3; stroke-opacity: .7; }
.is-skinned .sm-fillet-top { transform: translateY(-58px) rotate(-1.6deg); opacity: 0; }
.is-skinned .sm-fillet-bot { transform: translateY(58px) rotate(1.6deg); opacity: 0; }

/* -- the 4 raised selector ribs: same rib shape, bolder + lifted above the rest -- */
.sm-pick { cursor: pointer; outline: none; }
.sm-pick-out { stroke: var(--ink); fill: none; stroke-linecap: round; stroke-width: 7.5; stroke-opacity: .85; transition: stroke .3s, stroke-opacity .3s; }
.sm-pick-fill { stroke: var(--bone); fill: none; stroke-linecap: round; stroke-width: 5; transition: stroke .3s; }
.sm-pick-knob { fill: var(--bone); stroke: var(--ink); stroke-width: 1.6; transition: fill .3s, stroke .3s; }
.sm-name { font-family: var(--serif); font-size: 20px; fill: var(--ink); transition: fill .3s; }
.sm-jp { font-family: var(--kanji); font-weight: 700; font-size: 15px; fill: var(--ink); opacity: .75; transition: fill .3s, opacity .3s; }
.sm-count { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; fill: var(--ink-soft); transition: fill .3s; }

/* pop up slightly above the other ribs after the (slow) skinning, staggered */
.sm-pick {
  transform: translateY(26px); transform-box: fill-box; transform-origin: 50% 100%;
  opacity: 0; transition: transform .8s cubic-bezier(.34,1.5,.5,1), opacity .5s ease;
}
.is-skinned .sm-pick { transform: none; opacity: 1; }
.is-skinned .sm-pick.d0 { transition-delay: 1.50s; }
.is-skinned .sm-pick.d1 { transition-delay: 1.63s; }
.is-skinned .sm-pick.d2 { transition-delay: 1.76s; }
.is-skinned .sm-pick.d3 { transition-delay: 1.89s; }

/* hover / focus / selected: rise a touch more + ink the rib vermilion */
.sm-lift { transition: transform .34s cubic-bezier(.34,1.4,.5,1); }
.sm-pick:hover .sm-lift, .sm-pick.hover .sm-lift,
.sm-pick:focus-visible .sm-lift, .sm-pick.on .sm-lift { transform: translateY(-14px); }
.sm-pick:hover .sm-pick-out, .sm-pick.hover .sm-pick-out, .sm-pick:focus-visible .sm-pick-out, .sm-pick.on .sm-pick-out { stroke: var(--shu); stroke-opacity: 1; }
.sm-pick:hover .sm-pick-fill, .sm-pick.hover .sm-pick-fill, .sm-pick:focus-visible .sm-pick-fill, .sm-pick.on .sm-pick-fill { stroke: var(--shu); }
.sm-pick:hover .sm-pick-knob, .sm-pick.hover .sm-pick-knob, .sm-pick:focus-visible .sm-pick-knob, .sm-pick.on .sm-pick-knob { fill: var(--shu); stroke: var(--shu); }
.sm-pick:hover .sm-jp, .sm-pick.hover .sm-jp, .sm-pick:focus-visible .sm-jp, .sm-pick.on .sm-jp { fill: var(--paper); opacity: 1; }
.sm-pick:hover .sm-name, .sm-pick.hover .sm-name, .sm-pick:focus-visible .sm-name, .sm-pick.on .sm-name,
.sm-pick:hover .sm-count, .sm-pick.hover .sm-count, .sm-pick:focus-visible .sm-count, .sm-pick.on .sm-count { fill: var(--shu); }

/* legend — the accessible mirror control */
.sm-legend {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; max-width: 1000px; margin: 26px auto 0;
}
.sm-cut-btn {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 16px 16px 14px; background: transparent;
  border: 1px solid var(--line); border-radius: 3px; cursor: pointer;
  transition: border-color .3s, background .3s, transform .3s;
}
.sm-cut-btn:hover, .sm-cut-btn:focus-visible {
  border-color: var(--shu); transform: translateY(-2px);
}
.sm-cut-btn[aria-pressed="true"] {
  border-color: var(--shu); background: rgba(193,58,28,.06);
}
.sm-btn-jp { font-family: var(--kanji); font-weight: 700; font-size: 22px; color: var(--shu); }
.sm-btn-name { font-family: var(--serif); font-size: 1.15rem; line-height: 1.1; }
.sm-btn-count { color: var(--ink-soft); font-size: .72rem; letter-spacing: .1em; }
.sm-reset {
  grid-column: 1 / -1; justify-self: center; margin-top: 6px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--shu); letter-spacing: .1em; padding: 8px 4px;
  text-transform: uppercase; font-size: .78rem;
}
.sm-reset:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .sm-fillet, .sm-pick, .sm-lift { transition: none; }
}
@media (max-width: 720px) {
  .sm-legend { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   INTERACTION POLISH
   ========================================================================= */
/* Anchor jumps clear the fixed header instead of tucking underneath it. */
main section[id] { scroll-margin-top: clamp(72px, 9vh, 104px); }

/* Tactile press feedback on tap/click for non-magnetic controls. */
.apbtn, .cc-step button, .cater-extras summary, .sm-cut-btn, .sm-reset {
  transition: transform .12s ease, background .25s, color .25s, border-color .25s;
}
.apbtn:active, .cc-step button:active, .cater-extras summary:active,
.sm-cut-btn:active, .sm-reset:active { transform: scale(.95); }

/* Order cards feel interactive: lift on hover, ring on focus/selection. */
.cater-card:not(.has):hover { border-color: var(--line-strong); transform: translateY(-2px); }
.cater-card:focus-within { border-color: var(--shu); }
.cc-step:focus-within { border-color: var(--shu); box-shadow: 0 0 0 1px var(--shu); }
.cater-addon { transition: border-color .25s; }
.cater-addon:hover { border-bottom-color: var(--line-strong); }

/* No grey flash when tapping controls on touch devices. */
button, a, summary, .apbtn, .sm-pick, label { -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .apbtn:active, .cc-step button:active, .cater-card:not(.has):hover { transform: none; }
}