/* ─── kotori — page-specific styles ─── */

/* ─────────── INTRO OVERLAY (index only) ─────────── */
.intro {
  position: fixed; inset: 0;
  background: var(--sumi);
  z-index: 1000;
  display: grid; place-items: center;
  animation: introFadeOut 1.2s var(--ease) 2.4s forwards;
}
.intro-logo {
  width: clamp(180px, 22vw, 280px);
  opacity: 0;
  transform: scale(.96);
  animation: introLogoIn 1.2s var(--ease) .25s forwards;
  filter: drop-shadow(0 0 30px rgba(193,74,42,.18));
}
@keyframes introLogoIn {
  to { opacity: 1; transform: scale(1); }
}
@keyframes introFadeOut {
  to { opacity: 0; visibility: hidden; }
}
.intro.skip {
  display: none !important;
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .intro { animation: introFadeOut .001ms 0s forwards; }
  .intro-logo { animation: introLogoIn .001ms 0s forwards; opacity: 1; transform: none; }
}

/* ─────────── HERO ─────────── */
.hero {
  position: relative;
  height: 100vh; min-height: 640px;
  width: 100%;
  overflow: hidden;
  display: grid; place-items: center;
  isolation: isolate;
  background: var(--sumi); /* until video loads */
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  /* Uniform soft blur across the whole b-roll so every clip reads the same
     (the footage itself has sharper and softer scenes). The slight scale-up
     hides the blurred edges so no background shows through at the borders. */
  filter: blur(3px);
  transform: scale(1.06);
  /* Starts at 0.01 (not 0) so iOS Safari treats it as visible enough for
     autoplay — opacity: 0 is one of the conditions that blocks autoplay
     even on muted, playsinline videos. The user sees no difference. */
  opacity: 0.01;
  animation: heroVideoIn 1.4s var(--ease) 2.6s forwards;
}
.intro-skipped .hero-video,
body.no-intro .hero-video {
  animation: heroVideoIn .001ms 0s forwards;
}
/* On phone, skip the fade-in entirely — iOS autoplay heuristics also weigh
   in-viewport visibility, and getting the video to a stable opacity:1
   before the page finishes loading is the safest route. */
@media (max-width: 600px) {
  .hero-video {
    opacity: 1;
    animation: none;
    /* iOS sometimes paints a "tap to play" overlay button on the video
       when autoplay is blocked (Low Power Mode etc.). Hide that button
       and let touches pass through, so the first tap anywhere on the
       page is what triggers the gesture-fallback play(). */
    pointer-events: none;
  }
}
/* hide iOS's native big play button overlay */
.hero-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
.hero-video::-webkit-media-controls {
  display: none !important;
}
@keyframes heroVideoIn {
  to { opacity: 1; }
}

/* A still photo instead of the b-roll. Same box as .hero-video so the veil,
   the wordmark and the scroll cue all sit exactly where they did.

   Deliberately NOT blurred. The video is blurred because the footage varies
   scene to scene and the blur makes every clip read the same; a photo the
   restaurant chose on purpose should stay sharp. The veil above it is what
   keeps the wordmark legible either way.

   object-position is driven by posX/posY from the editor, so a face or a dish
   can be kept in frame when the hero is cropped to a tall phone screen. */
.hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: -2;
  opacity: 0;
  animation: heroVideoIn .9s ease .05s forwards;
}

/* Whichever one is not in use is removed from the layout entirely, rather
   than merely hidden, so a browser never fetches or decodes both. */
.hero-video[hidden], .hero-img[hidden] { display: none !important; }

.hero-veil {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at center, rgba(10,9,8,.15) 0%, rgba(10,9,8,.55) 70%, rgba(10,9,8,.85) 100%),
    linear-gradient(180deg, rgba(10,9,8,.55) 0%, rgba(10,9,8,.15) 35%, rgba(10,9,8,.35) 60%, rgba(10,9,8,.85) 100%);
}
.hero-veil::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .07;
  mix-blend-mode: overlay;
}

.hero-content {
  position: relative;
  text-align: center;
  padding: var(--deck-h) 24px 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 28px;
}
.hero-word {
  font-family: var(--display);
  font-weight: 500;
  font-size: 11rem;
  line-height: .95;
  letter-spacing: .01em;
  color: var(--washi);
  text-shadow: 0 6px 32px rgba(0,0,0,.55), 0 1px 0 rgba(0,0,0,.3);
  opacity: 0;
  transform: translateY(14px);
  animation: heroFadeUp 1.2s var(--ease) 3.05s forwards;
  margin: 4px 0 6px;
}
.hero-rule {
  width: 0;
  height: 1px;
  background: var(--gold);
  opacity: 0;
  animation: heroRule 1.1s var(--ease) 3.45s forwards;
}
@keyframes heroRule {
  to { width: 64px; opacity: .85; }
}
.hero-tagline {
  font-family: var(--body);
  font-weight: 400;
  font-size: .86rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--washi-dim);
  opacity: 0;
  transform: translateY(8px);
  animation: heroFadeUp 1s var(--ease) 3.65s forwards;
}
/* default: show the wide tagline, hide the phone variant */
.hero-tagline-phone { display: none; }
@media (max-width: 600px) {
  .hero-tagline-wide  { display: none; }
  .hero-tagline-phone { display: inline; }
}
.hero-ctas {
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
  margin-top: 14px;
  opacity: 0;
  transform: translateY(10px);
  animation: heroFadeUp 1s var(--ease) 3.85s forwards;
}
@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}
body.no-intro .hero-word,
body.no-intro .hero-rule,
body.no-intro .hero-tagline,
body.no-intro .hero-ctas {
  animation: none;
  opacity: 1;
  transform: none;
}
body.no-intro .hero-rule { width: 64px; opacity: .85; }

.hero-scroll {
  position: absolute;
  bottom: 28px;
  /* center via auto margins (NOT translateX(-50%)) — heroFadeUp's keyframe
     ends with transform: translateY(0) which would otherwise wipe the X
     centering, leaving the element offset to the right. */
  left: 0; right: 0;
  margin: 0 auto;
  width: max-content;
  font-family: var(--body);
  font-size: .68rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--washi-dim);
  opacity: 0;
  animation: heroFadeUp 1s var(--ease) 4.1s forwards;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.hero-scroll .line {
  width: 1px; height: 32px;
  background: linear-gradient(180deg, transparent, var(--gold));
  animation: scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine {
  0%, 100% { transform: scaleY(.6); transform-origin: top; }
  50%      { transform: scaleY(1); }
}
body.no-intro .hero-scroll { animation: none; opacity: 1; }

@media (max-width: 540px) {
  .hero-word { font-size: 5rem; }
  .hero-tagline { letter-spacing: .3em; }
}

@media (min-width: 541px) and (max-width: 900px) {
  .hero-word { font-size: 7rem; }
}

/* ─────────── HOMEPAGE TEASER STRIP ─────────── */
.teaser {
  position: relative;
  background:
    radial-gradient(ellipse at 88% 15%, rgba(193,74,42,.22), transparent 34rem),
    radial-gradient(ellipse at 9% 76%, rgba(107,68,35,.24), transparent 31rem),
    linear-gradient(180deg, #fbf2dc 0%, #efe2c5 58%, #d7c19d 100%);
  color: var(--sumi);
  padding: clamp(80px, 12vw, 160px) clamp(20px, 5vw, 56px);
  overflow: hidden;
}
.teaser::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(62,32,15,.05) 1px, transparent 1px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .20  0 0 0 0 .13  0 0 0 0 .06  0 0 0 .42 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 84px 100%, 260px 260px;
  opacity: .35;
  mix-blend-mode: multiply;
}
.teaser::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 16px;
  background:
    linear-gradient(180deg, rgba(17,8,3,.36), transparent),
    repeating-linear-gradient(90deg, rgba(55,24,9,.30) 0 28px, rgba(127,64,28,.18) 28px 61px);
  pointer-events: none;
}
.teaser-inner {
  position: relative;
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  min-height: 720px;
}
@media (max-width: 800px) { .teaser-inner { grid-template-columns: 1fr; min-height: 0; } }

.teaser-copy {
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
.teaser-inner.is-book-open .teaser-copy {
  opacity: .08;
  filter: blur(.7px) saturate(.75);
  transform: translateX(-18px);
  pointer-events: none;
}

.teaser-eyebrow { color: var(--gold-soft); }
.teaser-copy h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 3.6rem;
  line-height: 1.05;
  letter-spacing: 0;
  margin: 18px 0 24px;
  color: var(--sumi);
}
.teaser-copy h2 em {
  font-style: italic;
  color: #b7351c;
}
.teaser p {
  font-size: 1.02rem;
  color: rgba(10,9,8,.78);
  max-width: 52ch;
  margin-bottom: 30px;
}
.teaser-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.teaser-prompt {
  font-family: var(--body);
  font-size: .76rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 4px 0 28px;
  display: flex; align-items: center; gap: 14px;
}
.teaser-prompt::before {
  content: '';
  width: 28px; height: 1px; background: var(--gold-soft);
}

/* ─────────── HOMEPAGE FOOD GALLERY ─────────── */
.gallery {
  position: relative;
  background:
    radial-gradient(ellipse at 88% 15%, rgba(193,74,42,.22), transparent 34rem),
    radial-gradient(ellipse at 9% 76%, rgba(107,68,35,.24), transparent 31rem),
    linear-gradient(180deg, #fbf2dc 0%, #efe2c5 58%, #d7c19d 100%);
  color: var(--sumi);
  padding: clamp(40px, 4.5vw, 64px) clamp(20px, 5vw, 56px) clamp(80px, 11vw, 150px);
  overflow: hidden;
}
.gallery::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(62,32,15,.05) 1px, transparent 1px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .20  0 0 0 0 .13  0 0 0 0 .06  0 0 0 .42 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 84px 100%, 260px 260px;
  opacity: .35;
  mix-blend-mode: multiply;
}
/* ─── boat fleet container — sits across the top of the gallery section ─── */
.gallery > .gallery-fleet {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28px;
  z-index: 4;
  pointer-events: none;
  perspective: 480px;             /* gives child rotateX/Y a real depth feel */
  perspective-origin: 50% 80%;    /* viewer slightly above the waves */
  overflow: hidden;
}

/* Each boat — JS sets --top, --sail-dur, --bob-dur, --bob-delay, --scale */
.gallery-boat {
  position: absolute;
  top: var(--top, 3px);
  left: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  animation: boatSail var(--sail-dur, 24s) linear forwards;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.42));
}
.gallery-boat.rtl { animation-name: boatSailRtl; }

/* horizontal traversal — start off-screen left, exit off-screen right (and vice versa) */
@keyframes boatSail {
  from { transform: translateX(-60px); }
  to   { transform: translateX(calc(100vw + 60px)); }
}
@keyframes boatSailRtl {
  from { transform: translateX(calc(100vw + 60px)) scaleX(-1); }
  to   { transform: translateX(-60px) scaleX(-1); }
}

/* SVG itself bobs and rocks in 3D — heave (translateY) + pitch (rotateX) + roll (rotateZ),
   each on its own phase so the motion feels organic rather than mechanical. */
.gallery-boat svg {
  display: block;
  overflow: visible;
  transform-origin: 50% 85%;       /* pivot near the waterline of the hull */
  animation: boatPhysics var(--bob-dur, 3.4s) ease-in-out infinite var(--bob-delay, 0s);
}

@keyframes boatPhysics {
  0% {
    transform: scale(var(--scale, 1)) translateY(0)    rotateZ(-3deg)  rotateX(2deg);
  }
  20% {
    transform: scale(var(--scale, 1)) translateY(-3px) rotateZ(-1deg) rotateX(-3deg);
  }
  40% {
    transform: scale(var(--scale, 1)) translateY(-1px) rotateZ(2.5deg) rotateX(0deg);
  }
  60% {
    transform: scale(var(--scale, 1)) translateY(2px)  rotateZ(3deg)  rotateX(2deg);
  }
  80% {
    transform: scale(var(--scale, 1)) translateY(1px)  rotateZ(0deg)  rotateX(-2deg);
  }
  100% {
    transform: scale(var(--scale, 1)) translateY(0)    rotateZ(-3deg) rotateX(2deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-boat,
  .gallery-boat svg { animation: none; }
}
/* keep gallery content above the wave bar / paper noise — but exclude the fleet
   so its absolute positioning inside the bar isn't reset to relative */
.gallery > *:not(.gallery-fleet) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .gallery-boat { animation: none; }
}
/* keep gallery content above the wave bar / paper noise — but exclude the boat
   so its absolute positioning inside the bar isn't reset to relative */
.gallery > *:not(.gallery-boat) { position: relative; z-index: 1; }

.gallery-head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.gallery-head .eyebrow { color: var(--gold-soft); }
.gallery-head h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1.1;
  margin: 12px 0 14px;
  color: var(--sumi);
}
.gallery-lede {
  color: rgba(10,9,8,.72);
  font-size: 1.02rem;
  max-width: 56ch;
  margin: 0 auto;
}

.gallery-grid {
  max-width: 1180px;
  margin: 0 auto;
  column-count: 3;
  column-gap: clamp(10px, 1.6vw, 24px);
}
@media (max-width: 900px) { .gallery-grid { column-count: 2; } }
/* keep 2 columns even on phones — only collapse to a single column on very narrow screens */
@media (max-width: 340px) { .gallery-grid { column-count: 1; } }

.gallery-item {
  position: relative;
  display: block;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 clamp(14px, 1.8vw, 24px);
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(10,9,8,.18);
  box-shadow: 0 14px 28px -16px rgba(10,9,8,.55);
  /* Photos are VISIBLE by default. The fade-in is opt-in: JavaScript adds
     .reveal-armed to the grid once it is ready to animate. If the script is
     stale, blocked or slow, guests still see the food rather than an empty
     page — the animation is a nicety, the photos are the point. */
  opacity: 1;
  transform: none;
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.gallery-grid.reveal-armed .gallery-item {
  opacity: 0;
  transform: translateY(28px);
}
.gallery-grid.reveal-armed .gallery-item.is-visible,
.gallery-item.is-visible {
  opacity: 1;
  transform: none;
}
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1.2s var(--ease);
}
.gallery-item:hover img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .gallery-item { opacity: 1; transform: none; transition: none; }
}

.gallery-item { cursor: zoom-in; }

/* ─────────── GALLERY LIGHTBOX ─────────── */
body.is-lightbox-open { overflow: hidden; }
body.is-lightbox-open::before {
  content: '';
  position: fixed; inset: 0;
  z-index: 998;
  background: rgba(10,8,6,.55);
  backdrop-filter: blur(8px) saturate(.85);
  -webkit-backdrop-filter: blur(8px) saturate(.85);
  animation: lightboxBackdropIn .35s ease-out both;
}
body.is-lightbox-leaving::before {
  animation: lightboxBackdropOut .25s ease-in both;
}
@keyframes lightboxBackdropIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes lightboxBackdropOut { from { opacity: 1; } to { opacity: 0; } }

.lightbox {
  position: fixed; inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vh, 80px) clamp(20px, 5vw, 56px);
  cursor: zoom-out;
}
.lightbox.is-open {
  display: flex;
  animation: lightboxIn .35s ease-out both;
}
.lightbox.is-leaving {
  animation: lightboxOut .25s ease-in both;
}
@keyframes lightboxIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes lightboxOut { from { opacity: 1; } to { opacity: 0; } }

.lightbox-img {
  max-width: min(96vw, 1400px);
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.85);
  cursor: default;
  display: block;
}

.lightbox-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(10,5,2,.55);
  color: #f6e7c7;
  font-family: var(--display);
  font-size: 1.6rem;
  line-height: 1;
  display: flex;
  align-items: center; justify-content: center;
  cursor: pointer;
  border: 1px solid rgba(255,214,158,.35);
  box-shadow: 0 6px 16px -4px rgba(0,0,0,.7);
  z-index: 1010;
  transition: background .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.lightbox-close:hover,
.lightbox-close:focus-visible {
  background: rgba(193,74,42,.85);
  border-color: rgba(255,224,170,.7);
  transform: scale(1.06);
  outline: none;
}

/* ─────────── PILLARS (homepage three-up) ─────────── */
.pillars {
  background: var(--sumi);
  padding: clamp(80px, 12vw, 140px) clamp(20px, 5vw, 56px);
  position: relative;
  overflow: hidden;
}
.pillars-head {
  max-width: 1180px; margin: 0 auto 64px;
  text-align: center;
}
.pillars-head h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 3rem;
  line-height: 1.1;
  margin: 16px auto 0;
  max-width: 24ch;
}
.pillars-grid {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(184,153,104,.18);
  border: 1px solid rgba(184,153,104,.18);
}
@media (max-width: 820px) { .pillars-grid { grid-template-columns: 1fr; } }

.pillar {
  background: var(--sumi);
  padding: 48px 36px;
  position: relative;
  transition: background .35s var(--ease);
}
.pillar:hover { background: var(--sumi-soft); }
.pillar .num {
  font-family: var(--display);
  font-size: .8rem;
  letter-spacing: .35em;
  color: var(--gold);
  margin-bottom: 28px;
  display: block;
}
.pillar h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.65rem;
  margin-bottom: 14px;
  color: var(--washi);
}
.pillar p {
  color: var(--washi-dim);
  font-size: .98rem;
  max-width: 32ch;
}

/* ─────────── ABOUT PAGE ─────────── */
.about-hero {
  position: relative;
  padding: calc(var(--deck-h) + 96px) clamp(20px, 5vw, 56px) 100px;
  background:
    /* warm vermillion ember, top-right */
    radial-gradient(ellipse at 72% 12%, rgba(193,74,42,.32), rgba(123,52,31,.15) 38%, transparent 62%),
    /* hinoki/cedar warmth, lower-left */
    radial-gradient(ellipse at 18% 78%, rgba(176,113,58,.22), transparent 58%),
    /* gold whisper, center */
    radial-gradient(ellipse at 50% 45%, rgba(184,153,104,.10), transparent 60%),
    /* deep undertone gradient, like the wood header */
    linear-gradient(180deg, #1f1108 0%, #14090a 50%, #0a0908 100%);
  overflow: hidden;
  text-align: center;
}
.about-hero::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='200'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.55' numOctaves='3' seed='9'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 -.2'/></filter><rect width='100%25' height='100%25' filter='url(%23b)'/></svg>");
  opacity: .07;
  mix-blend-mode: overlay;
}
.about-hero > * { position: relative; z-index: 1; }
.about-hero .eyebrow { color: var(--vermillion-2); }
.about-hero h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 5rem;
  line-height: 1;
  margin: 14px 0;
  color: #f6e7c7;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.about-hero .lede {
  max-width: 56ch; margin: 24px auto 0;
  color: var(--washi-dim);
  font-size: 1.05rem;
}

.about-body {
  position: relative;
  background:
    radial-gradient(ellipse at 80% 15%, rgba(123,52,31,.14), transparent 55%),
    radial-gradient(ellipse at 10% 70%, rgba(107,68,35,.10), transparent 55%),
    linear-gradient(180deg, #0a0908 0%, #120b07 60%, #070605 100%);
  padding: 60px clamp(20px, 5vw, 56px) 140px;
}
.about-row {
  max-width: 1180px; margin: 0 auto 88px;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
/* PHONE about page — editorial vertical layout. Image goes full-bleed
   edge-to-edge, text sits comfortably below with generous spacing. Source
   order is overridden so the image is always first regardless of how the
   row is structured in HTML. */
@media (max-width: 700px) {
  /* HERO — bigger headline, more dramatic spacing */
  .about-hero {
    padding: calc(var(--deck-h) + 68px) 24px 88px;
    text-align: center;
  }
  .about-hero .eyebrow {
    font-size: .62rem;
    letter-spacing: .42em;
    display: inline-block;
    margin-bottom: 22px;
    color: var(--vermillion-2);
  }
  .about-hero h1 {
    font-size: clamp(2.55rem, 11.5vw, 3.7rem);
    line-height: .98;
    margin: 6px 0 24px;
  }
  .about-hero .lede {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 38ch;
    margin: 22px auto 0;
    padding: 0 8px;
    color: var(--washi-dim);
  }

  /* BODY — full-bleed (no side padding); rows handle their own spacing */
  .about-body {
    padding: 38px 0 90px;
  }

  /* ROW — single column, image always first */
  .about-row {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 0 56px;
    padding: 0;
    max-width: none;
    align-items: stretch;
  }
  .about-row .about-art  { order: 1; }
  .about-row .about-text { order: 2; }

  /* Decorative gold-thread divider between rows */
  .about-row + .about-row {
    position: relative;
    margin-top: 8px;
  }
  .about-row + .about-row::before {
    content: "";
    display: block;
    width: 90px;
    height: 1px;
    margin: 0 auto 52px;
    background: linear-gradient(90deg, transparent, rgba(184,153,104,.55), transparent);
  }

  /* IMAGE — full-bleed, taller for visual weight */
  .about-art {
    aspect-ratio: 4 / 5;
    width: 100%;
    border: none;
    border-top: 1px solid rgba(184,153,104,.18);
    border-bottom: 1px solid rgba(184,153,104,.18);
    box-shadow: 0 24px 48px -20px rgba(0,0,0,.8);
  }
  .about-art--landscape { aspect-ratio: 5 / 4; }
  .about-art::after { inset: 14px; }
  .about-art .num {
    top: 18px; right: 22px;
    font-size: .68rem;
    letter-spacing: .35em;
    color: var(--gold);
  }
  .about-art .label {
    bottom: 18px; left: 22px;
    font-size: .58rem;
    letter-spacing: .35em;
    color: var(--washi);
  }

  /* TEXT — comfortable to read, with generous side padding */
  .about-text {
    padding: 36px 26px 6px;
    max-width: none;
  }
  .about-text .eyebrow {
    font-size: .62rem;
    letter-spacing: .35em;
    display: block;
    margin-bottom: 10px;
    color: var(--vermillion-2);
  }
  .about-text h2 {
    font-size: clamp(1.85rem, 7.5vw, 2.35rem);
    line-height: 1.08;
    margin: 0 0 22px;
    word-break: normal;
    overflow-wrap: normal;
  }
  .about-text h2 em {
    color: var(--vermillion-2);
    font-style: italic;
  }
  .about-text p {
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 18px;
    max-width: none;
    color: var(--washi-dim);
  }
  .about-text .pull {
    font-family: var(--display);
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.42;
    padding: 0 0 0 20px;
    margin: 26px 0 8px;
    max-width: none;
    border-left: 3px solid var(--vermillion);
    color: #e6c98a;
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
  }
}

.about-text h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 2.45rem;
  line-height: 1.1;
  margin: 14px 0 18px;
  color: var(--washi);
}
.about-text h2 em {
  color: var(--vermillion-2);
  font-style: italic;
  text-shadow: 0 0 14px rgba(193,74,42,.25);
}
.about-text .eyebrow { color: var(--vermillion-2); }
.about-text p {
  color: var(--washi-dim);
  font-size: 1rem;
  margin-bottom: 14px;
  max-width: 50ch;
}
.about-text .pull {
  font-family: var(--display);
  font-size: 1.4rem;
  font-style: italic;
  color: #e6c98a;
  border-left: 2px solid var(--vermillion);
  padding-left: 22px;
  margin: 26px 0;
  max-width: 30ch;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
}

.about-art {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--sumi-soft);
  overflow: hidden;
  border: 1px solid rgba(184,153,104,.22);
  box-shadow:
    0 18px 36px -16px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,210,150,.10);
}
.about-art::after {
  content: '';
  position: absolute; inset: 12px;
  border: 1px solid rgba(245,239,224,.10);
  pointer-events: none;
  z-index: 2;
}
/* photo fills the panel, with a soft scrim at the corners so the
   "— 0N" and label captions stay readable */
.about-art-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
}
/* per-image focal points so faces / subjects stay in frame */
.about-art-img[src$="about-counter.png"] { object-position: 50.0% 35.0%; }
.about-art-img[src$="about-chef.png"]    { object-position: 50.0%  1.0%; }
/* landscape variant for wide subjects (e.g. the tuna boat) */
.about-art--landscape { aspect-ratio: 4 / 3; }

.about-art::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0,0,0,.42) 0%,
    rgba(0,0,0,.10) 22%,
    transparent 38%,
    transparent 62%,
    rgba(0,0,0,.18) 78%,
    rgba(0,0,0,.55) 100%);
}
.about-art .label {
  position: absolute;
  bottom: 18px; left: 22px;
  font-family: var(--body);
  font-size: .68rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--washi);
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
  z-index: 3;
}
.about-art .num {
  position: absolute;
  top: 18px; right: 22px;
  font-family: var(--display);
  font-size: .8rem;
  letter-spacing: .3em;
  color: var(--gold);
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
  z-index: 3;
}
.about-art .swatch-bg {
  position: absolute; inset: 0;
}
.about-art .swatch-bg.s1 { background:
  /* The Counter — hinoki wood, warm vermillion glow */
  radial-gradient(ellipse at 30% 30%, rgba(193,74,42,.45), transparent 60%),
  repeating-linear-gradient(91deg,
    rgba(255,196,128,.06) 0 1px,
    rgba(28,14,6,.30) 1px 3px,
    rgba(98,52,24,.12) 3px 8px,
    rgba(15,7,2,.25) 8px 10px),
  linear-gradient(160deg, #6b3a1d 0%, #3a1d0d 55%, #1a0c05 100%); }
.about-art .swatch-bg.s2 { background:
  /* The Chef — gold ember, deep cedar */
  radial-gradient(ellipse at 65% 30%, rgba(184,153,104,.50), transparent 58%),
  radial-gradient(ellipse at 25% 80%, rgba(123,52,31,.45), transparent 60%),
  repeating-linear-gradient(2deg,
    rgba(0,0,0,.18) 0 2px,
    rgba(120,68,32,.06) 2px 9px,
    rgba(0,0,0,.10) 9px 11px,
    transparent 11px 22px),
  linear-gradient(140deg, #2a1a10, #0a0908); }
.about-art .swatch-bg.s3 { background:
  /* From the Sea — vermillion ember rising over warm wood floor */
  radial-gradient(ellipse at 50% 35%, rgba(211,90,58,.42), transparent 60%),
  radial-gradient(ellipse at 20% 90%, rgba(176,113,58,.30), transparent 55%),
  repeating-linear-gradient(91deg,
    rgba(255,196,128,.05) 0 1px,
    rgba(28,14,6,.22) 1px 3px,
    rgba(98,52,24,.10) 3px 8px),
  linear-gradient(135deg, #160d06, #2a1a10 60%, #6b4423); }
.about-art .swatch-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .14;
  mix-blend-mode: overlay;
}

/* ─────────── MAP PAGE ─────────── */
.map-section {
  position: relative;
  padding: calc(var(--deck-h) + 80px) clamp(20px, 5vw, 56px) 120px;
  background:
    radial-gradient(ellipse at 70% 12%, rgba(193,74,42,.22), rgba(123,52,31,.10) 40%, transparent 62%),
    radial-gradient(ellipse at 18% 78%, rgba(176,113,58,.18), transparent 58%),
    radial-gradient(ellipse at 50% 45%, rgba(184,153,104,.08), transparent 60%),
    linear-gradient(180deg, #1a0e07 0%, #120b07 60%, #070605 100%);
  overflow: hidden;
}
.map-section::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='200'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.55' numOctaves='3' seed='5'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 -.2'/></filter><rect width='100%25' height='100%25' filter='url(%23b)'/></svg>");
  opacity: .07;
  mix-blend-mode: overlay;
}
.map-section > * { position: relative; z-index: 1; }

.map-head {
  max-width: 1180px; margin: 0 auto 36px;
  text-align: center;
}
.map-head .eyebrow { color: var(--vermillion-2); }
.map-head h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 3.4rem;
  line-height: 1.05;
  margin: 14px 0 12px;
  color: #f6e7c7;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.map-head .lede {
  max-width: 60ch; margin: 18px auto 0;
  color: var(--washi-dim);
  font-size: 1.02rem;
}
.map-actions {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 12px;
  margin-top: 28px;
}

.map-frame {
  max-width: 1180px; margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(184,153,104,.30);
  box-shadow:
    0 30px 60px -22px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,210,150,.08);
}
.map-frame iframe {
  width: 100%; height: 100%; border: 0; display: block;
}
@media (max-width: 720px) {
  .map-head h1 { font-size: 2.4rem; }
  .map-frame { aspect-ratio: 4 / 5; }
}

/* ─────────── ORDER PAGE ─────────── */
.order-hero {
  position: relative;
  padding: calc(var(--deck-h) + 80px) clamp(20px, 5vw, 56px) 50px;
  text-align: center;
  background:
    radial-gradient(ellipse at 70% 12%, rgba(193,74,42,.30), rgba(123,52,31,.14) 38%, transparent 62%),
    radial-gradient(ellipse at 18% 78%, rgba(176,113,58,.20), transparent 58%),
    radial-gradient(ellipse at 50% 45%, rgba(184,153,104,.10), transparent 60%),
    linear-gradient(180deg, #1f1108 0%, #14090a 50%, #0a0908 100%);
  overflow: hidden;
}
.order-hero::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='200'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.55' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 -.2'/></filter><rect width='100%25' height='100%25' filter='url(%23b)'/></svg>");
  opacity: .07;
  mix-blend-mode: overlay;
}
.order-hero > * { position: relative; z-index: 1; }
.order-hero .eyebrow { color: var(--vermillion-2); }
.order-hero h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 4.6rem;
  line-height: 1.03;
  margin: 14px 0 12px;
  color: #f6e7c7;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.order-hero .lede {
  max-width: 56ch; margin: 18px auto 0;
  color: var(--washi-dim);
  font-size: 1.05rem;
}

.order-platforms {
  background:
    radial-gradient(ellipse at 70% 12%, rgba(193,74,42,.22), rgba(123,52,31,.10) 40%, transparent 62%),
    radial-gradient(ellipse at 18% 78%, rgba(176,113,58,.18), transparent 58%),
    radial-gradient(ellipse at 50% 45%, rgba(184,153,104,.08), transparent 60%),
    linear-gradient(180deg, #1a0e07 0%, #120b07 60%, #070605 100%);
  padding: calc(var(--deck-h) + 80px) clamp(20px, 5vw, 56px) 140px;
}
.platform-grid {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 36px);
}
.platform-grid--single {
  max-width: 460px;
  grid-template-columns: 1fr;
}
@media (max-width: 820px) {
  .platform-grid { grid-template-columns: 1fr; max-width: 460px; }
}

.platform {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 48px 28px 32px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,210,150,.06), transparent 55%),
    linear-gradient(180deg, #1a1108 0%, #0e0805 100%);
  border: 1px solid rgba(184,153,104,.22);
  border-radius: 6px;
  text-decoration: none;
  color: var(--washi);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  box-shadow:
    0 18px 36px -16px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,210,150,.10);
  overflow: hidden;
  isolation: isolate;
}
.platform::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 110%, rgba(193,74,42,.28), transparent 60%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.platform > * { position: relative; z-index: 1; }
.platform:hover,
.platform:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(193,74,42,.55);
  box-shadow:
    0 26px 48px -16px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,210,150,.16);
  outline: none;
}
.platform:hover::after,
.platform:focus-visible::after { opacity: 1; }

.platform-art {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  margin-bottom: 28px;
  padding: 18px;
}
.platform-name {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.5rem;
  color: #f6e7c7;
  margin-bottom: 8px;
}
.platform-cta {
  font-family: var(--body);
  font-size: .68rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--vermillion-2);
  transition: transform .25s var(--ease);
}
.platform:hover .platform-cta { transform: translateX(4px); }

/* Uber Eats — black plate, white "Uber" + green "Eats" */
.platform-ubereats .platform-art {
  background: #000;
  font-family: var(--body);
}
.ue-logo {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-weight: 800;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  letter-spacing: -.02em;
}
.ue-uber { color: #fff; }
.ue-eats { color: #06c167; }

/* DoorDash — white plate, red wordmark */
.platform-doordash .platform-art {
  background: #fff;
  flex-direction: column;
  gap: 8px;
}
.dd-logo { width: 64%; height: auto; max-height: 50px; }
.dd-word {
  font-family: var(--body);
  font-weight: 800;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  letter-spacing: -.01em;
  color: #eb1700;
}

/* Skip The Dishes — orange plate, white "S" mark + wordmark */
.platform-skip .platform-art {
  background: #ff8000;
  font-family: var(--body);
}
.skip-logo {
  display: inline-flex; align-items: center; gap: 12px;
}
.skip-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #fff;
  color: #ff8000;
  font-weight: 900;
  font-size: 1.7rem;
  font-style: italic;
  line-height: 1;
}
.skip-word {
  color: #fff;
  font-weight: 800;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  line-height: 1.05;
  text-align: left;
}

.order-note {
  max-width: 60ch;
  margin: 56px auto 0;
  text-align: center;
  color: var(--washi-dim);
  font-size: .92rem;
}
.order-note a {
  color: var(--vermillion-2);
  border-bottom: 1px solid rgba(193,74,42,.45);
  padding-bottom: 1px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.order-note a:hover {
  color: #ff8b6a;
  border-bottom-color: rgba(255,139,106,.7);
}

@media (max-width: 900px) {
  .order-hero h1 { font-size: 3.5rem; }
}
@media (max-width: 540px) {
  .order-hero h1 { font-size: 2.8rem; }
}

/* ─────────── CONTACT PAGE ─────────── */
.contact-section {
  position: relative;
  padding: calc(var(--deck-h) + 80px) clamp(20px, 5vw, 56px) 120px;
  background:
    radial-gradient(ellipse at 70% 12%, rgba(193,74,42,.30), rgba(123,52,31,.14) 38%, transparent 62%),
    radial-gradient(ellipse at 18% 78%, rgba(176,113,58,.22), transparent 58%),
    radial-gradient(ellipse at 50% 45%, rgba(184,153,104,.10), transparent 60%),
    linear-gradient(180deg, #1f1108 0%, #14090a 50%, #0a0908 100%);
  overflow: hidden;
}
.contact-section::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='200'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.55' numOctaves='3' seed='6'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 -.2'/></filter><rect width='100%25' height='100%25' filter='url(%23b)'/></svg>");
  opacity: .07;
  mix-blend-mode: overlay;
}
.contact-inner {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 880px) {
  .contact-inner { grid-template-columns: 1fr; gap: 40px; }
}

.contact-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(184,153,104,.30);
  box-shadow:
    0 30px 60px -22px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,210,150,.10);
  background: var(--sumi-soft);
}
.contact-portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.contact-portrait::after {
  content: '';
  position: absolute; inset: 12px;
  border: 1px solid rgba(245,239,224,.10);
  pointer-events: none;
}

.contact-copy .eyebrow { color: var(--vermillion-2); }
.contact-copy h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1.05;
  margin: 14px 0 14px;
  color: #f6e7c7;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.contact-copy .lede {
  max-width: 56ch;
  color: var(--washi-dim);
  font-size: 1.05rem;
  margin-bottom: 28px;
}

.contact-list {
  display: grid;
  gap: 14px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}
.contact-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: baseline;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(184,153,104,.18);
}
.contact-row:last-child { border-bottom: 0; }
.contact-label {
  font-family: var(--body);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.contact-value {
  font-family: var(--display);
  font-size: 1.18rem;
  color: #f6e7c7;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.contact-value:hover {
  color: #fff5dc;
  border-bottom-color: rgba(193,74,42,.55);
}
.contact-value--plain { cursor: default; }
.contact-value--plain:hover { color: #f6e7c7; border-bottom-color: transparent; }

.contact-row--hours { align-items: start; padding-top: 18px; }
.contact-hours {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 6px 18px;
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.3;
}
.contact-hours .ch-day {
  color: var(--gold-soft);
  letter-spacing: .02em;
}
.contact-hours .ch-time { color: #f6e7c7; }
.contact-hours .ch-closed {
  color: rgba(246,231,199,.45);
  font-style: italic;
}
@media (max-width: 540px) {
  .contact-hours { grid-template-columns: 88px 1fr; font-size: .94rem; }
}

.contact-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 8px;
}
@media (max-width: 540px) {
  .contact-row { grid-template-columns: 1fr; gap: 4px; }
  .contact-value { font-size: 1.05rem; }
}
.contact-grid {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: clamp(32px, 5vw, 72px);
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.info-card {
  background: var(--sumi-soft);
  border: 1px solid rgba(184,153,104,.18);
  padding: clamp(28px, 4vw, 44px);
  display: flex; flex-direction: column; gap: 28px;
}
.info-block h3 {
  font-family: var(--body);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.info-block p, .info-block a {
  font-family: var(--display);
  font-size: 1.18rem;
  color: var(--washi);
  line-height: 1.5;
}
.info-block a:hover { color: var(--vermillion-2); }

.hours-table {
  width: 100%;
  border-collapse: collapse;
}
.hours-table tr {
  border-bottom: 1px solid rgba(245,239,224,.08);
}
.hours-table tr:last-child { border-bottom: 0; }
.hours-table td {
  padding: 10px 0;
  font-size: .96rem;
  color: var(--washi-dim);
  font-family: var(--body);
}
.hours-table td:first-child {
  letter-spacing: .25em;
  text-transform: uppercase;
  font-size: .76rem;
  color: var(--gold);
  font-weight: 600;
}
.hours-table td:last-child { text-align: right; color: var(--washi); }

.map-placeholder {
  margin-top: 8px;
  height: 180px;
  background:
    repeating-linear-gradient(45deg, rgba(184,153,104,.08) 0 8px, transparent 8px 18px),
    var(--sumi);
  border: 1px solid rgba(184,153,104,.18);
  display: grid; place-items: center;
  font-size: .72rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold-soft);
  position: relative;
}
.map-placeholder::after {
  content: '◯';
  position: absolute;
  font-size: 2rem;
  color: var(--vermillion);
  opacity: .55;
}

/* form */
.form {
  background: var(--sumi-soft);
  border: 1px solid rgba(184,153,104,.18);
  padding: clamp(28px, 4vw, 44px);
  display: flex; flex-direction: column; gap: 22px;
}
.form h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.8rem;
  color: var(--washi);
  margin-bottom: 4px;
}
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 540px) { .form .row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--body);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
}
.field input,
.field select,
.field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(245,239,224,.22);
  padding: 10px 0;
  color: var(--washi);
  font-family: var(--display);
  font-size: 1.05rem;
  outline: none;
  transition: border-color .25s var(--ease);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-bottom-color: var(--vermillion);
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(217,210,193,.4); }

.form-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; flex-wrap: wrap;
  padding-top: 6px;
}
.form-foot small {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(217,210,193,.5);
}

/* ─────────── MENU BOOK (modal overlay only — hidden until activated) ─────────── */
.book-mount {
  display: none;                 /* never rendered inline; modal class shows it */
}

/* X close button — only visible in modal mode */
.book-close,
.book-edit {
  position: absolute;
  top: 14px;
  height: 44px;
  border-radius: 22px;
  background: rgba(10,5,2,.55);
  color: #f6e7c7;
  font-family: var(--body);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  line-height: 1;
  display: none;                 /* hidden inline; shown when modal */
  align-items: center; justify-content: center;
  cursor: pointer;
  border: 1px solid rgba(255,214,158,.35);
  box-shadow: 0 6px 16px -4px rgba(0,0,0,.7);
  z-index: 1010;
  transition: background .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.book-close {
  right: 14px;
  width: 44px;
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: 0;
  text-transform: none;
}
.book-edit {
  right: 70px;
  padding: 0 16px;
}
.book-close:hover,
.book-close:focus-visible,
.book-edit:hover,
.book-edit:focus-visible {
  background: rgba(193,74,42,.85);
  border-color: rgba(255,224,170,.7);
  transform: scale(1.04);
  outline: none;
}
body.is-editing .book-edit {
  background: rgba(193,74,42,.85);
  border-color: rgba(255,224,170,.7);
}

/* ─── modal mode: book promoted to centered fixed overlay, backdrop blurs the rest ─── */
body.is-menu-open { overflow: hidden; }
body.is-menu-open::before {
  content: '';
  position: fixed; inset: 0;
  z-index: 998;
  background: rgba(10,8,6,.55);
  backdrop-filter: blur(8px) saturate(.85);
  -webkit-backdrop-filter: blur(8px) saturate(.85);
  animation: menuBackdropIn .35s ease-out both;
}
@keyframes menuBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.book-mount.is-modal {
  position: fixed;
  top: 50%; left: 50%;
  width: min(96vw, 1200px);
  max-width: 1200px;
  height: auto;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  animation: bookFadeIn .35s ease-out both;
}
.book-mount.is-modal .book-close,
.book-mount.is-modal .book-edit { display: inline-flex; }
/* size each open spread to match the natural portrait of a typical menu page (≈ 1:1.4),
   so two pages side-by-side give a 1.4:1 (≈7:5) aspect, and the menu images fit
   without any letterboxing. */
.book-mount.is-modal .book-stage {
  width: min(96vw, 1120px);
  height: min(78vh, calc(96vw * 0.72));
  max-height: 760px;
  max-width: none;
  aspect-ratio: auto;
}
/* in modal mode, drop the absolute-positioned floating pill behaviour and put the
   controls in flow under the book — and trim the bar to just the prev/next arrows */
.book-mount.is-modal .book-controls,
.book-mount.is-modal .book-stage[data-state]:not([data-state="0"]) ~ .book-controls {
  position: static;
  left: auto; bottom: auto;
  transform: none;
  width: auto;
  margin-top: 18px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
  pointer-events: auto;
  flex-shrink: 0;
  gap: 18px;
}
.book-mount.is-modal .book-progress { display: none; }
@keyframes bookFadeIn {
  from { opacity: 0; transform: translate(-50%, -50%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* closing animation — applied briefly before the class is removed */
.book-mount.is-modal-leaving {
  animation: bookFadeOut .25s ease-in both;
}
@keyframes bookFadeOut {
  from { opacity: 1; transform: translate(-50%, -50%); }
  to   { opacity: 0; transform: translate(-50%, -50%); }
}
body.is-menu-leaving::before {
  animation: menuBackdropOut .28s ease-in both;
}
@keyframes menuBackdropOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.book-phone-stack { display: none !important; }    /* legacy fallback, never used */

/* phone-only composite (cover-flat, page-flip cards, menu-flat images) —
   hidden by default; the (max-width: 600px) block below shows them. */
.menu-flat,
.cover-flat,
.page-flip { display: none; }

/* phone: 3D book renders the same as desktop, but sized to fit the viewport
   and with the desktop-calibrated per-image transforms neutralised (those
   pixel-based translates were dialled in for a 760px-tall page; on a phone's
   ~270px page they push the menu artwork off-screen). */
@media (max-width: 600px) {
  .book-mount.is-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    overflow-x: hidden;
  }
  /* book sized so a full two-page spread fits inside the viewport.
     Each menu page has aspect ≈ 0.7 (taller than wide), so the open
     two-page spread is ≈ 1.4 wide:tall. We size by the smaller of:
       — width-driven: 96vw wide × 96vw / 1.4 tall
       — height-driven: (100dvh − chrome) tall × that × 1.4 wide
     so the book never overflows either dimension. The is-modal+open
     selector here is intentionally specific to override the
     desktop/tablet open-state rule (`.book-stage[data-state]:not(...)`)
     which sets width: 188vw (designed for horizontal-scroll tablets,
     not modal phones). */
  /* Book-stage sized as the largest rectangle of aspect 1.22:1 that fits in
     both 96vw and (100dvh - 130px). 1.22:1 = 2 × 0.61:1, the average aspect
     of the three menu PNGs (0.58 / 0.59 / 0.67). With object-fit: cover
     below, each menu image fills its entire page area — no letterbox, no
     visible cream gap between the book frame and the menu content, so the
     book and the menu render as a single solid object on every phone. */
  .book-mount.is-modal .book-stage,
  .book-mount.is-modal .book-stage[data-state]:not([data-state="0"]) {
    width: min(96vw, calc((100dvh - 130px) * 1.22));
    max-width: min(96vw, calc((100dvh - 130px) * 1.22));
    height: min(calc(96vw / 1.22), calc(100dvh - 130px));
    max-height: calc(100dvh - 130px);
    aspect-ratio: auto;
    flex: 0 0 auto;
  }
  /* PHONE BOOK = SOLID FLAT COMPOSITE WITH ANIMATIONS.
     The 3D book is hidden on phone; instead, the book-stage paints the
     parchment + spine and contains three layers, each positioned in % of
     the book so they all scale together as one solid object:
       1. .cover-flat   — full cover, shown at state=0
       2. menu-1        — fixed on the left page, shown at state>=1
       3. .flipcard     — right page, rotates from front (menu-2) to
                          back (menu-3) between state=1 and state=2 */
  .book-mount.is-modal .book      { visibility: hidden; }
  .book-mount.is-modal .book-spine { display: none; }

  .book-mount.is-modal .cover-flat,
  .book-mount.is-modal .page-flip,
  .book-mount.is-modal .menu-flat {
    display: block;
  }

  /* The book-stage is the painted surface — parchment + spine + perspective
     for realistic page flipping. */
  .book-mount.is-modal .book-stage {
    background: linear-gradient(180deg, #fff7e5 0%, #f3e7c9 100%);
    border-radius: 4px;
    box-shadow: 0 18px 40px -10px rgba(0,0,0,.7);
    overflow: hidden;
    position: relative;
    perspective: 1800px;
    -webkit-perspective: 1800px;
    perspective-origin: 50% 50%;
    -webkit-perspective-origin: 50% 50%;
  }
  .book-mount.is-modal .book-stage::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 6px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(80,42,17,.3) 30%, rgba(255,220,160,.2) 50%, rgba(80,42,17,.3) 70%, rgba(0,0,0,.45) 100%);
    z-index: 7;
    pointer-events: none;
  }

  /* ── COVER (state 0) ─────────────────────────────────────────────────── */
  .book-mount.is-modal .cover-flat {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--washi);
    background:
      radial-gradient(ellipse at 50% 0%, rgba(255,201,127,.13), transparent 44%),
      radial-gradient(ellipse at 30% 25%, rgba(193,74,42,.28), transparent 55%),
      radial-gradient(ellipse at 75% 80%, rgba(184,153,104,.22), transparent 55%),
      repeating-linear-gradient(96deg, rgba(255,224,166,.04) 0 1px, transparent 1px 18px),
      linear-gradient(150deg, #251207 0%, #080706 58%, #180902 100%);
    box-shadow:
      inset 0 0 0 1px rgba(184,153,104,.18),
      inset 8px 0 14px -8px rgba(0,0,0,.8);
    transform-origin: left center;
    transform: rotateY(0);
    transition: transform .9s cubic-bezier(.42, .04, .15, .97), opacity .5s ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  /* once we leave state=0, the cover flips open like a book cover and fades */
  .book-mount.is-modal .book-stage:not([data-state="0"]) .cover-flat {
    transform: rotateY(-170deg);
    opacity: 0;
    pointer-events: none;
  }

  /* ── LEFT PAGE — menu-1 (fixed at state 1, fades at state 2) ─────────── */
  .book-mount.is-modal .menu-flat {
    position: absolute;
    pointer-events: none;
  }
  .book-mount.is-modal .menu-flat[data-menu="menu-1"] {
    left:    0.38%;
    top:     0.00%;
    width:  48.59%;
    height: 102.04%;
    z-index: 4;
    opacity: 0;
    transition: opacity .55s ease;
  }
  .book-mount.is-modal .book-stage[data-state="1"] .menu-flat[data-menu="menu-1"] {
    opacity: 1;
  }

  /* ── REALISTIC PAGE FLIP ─────────────────────────────────────────────
     Each turning page is a half-width element that rotates 180° around
     the spine. backface-visibility: hidden ensures only the visible side
     shows at any rotation angle, so as the right page swings up and over
     to the left, it disappears at 90° (edge-on) and the left page that's
     been waiting at rotateY(180°) underneath simultaneously rotates into
     view — together they read as one continuous page-turn. */
  .book-mount.is-modal .page-flip {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Physics-tuned easing: slow lift, faster mid-arc, gentle settle. */
    transition: transform 1.05s cubic-bezier(.55, .04, .35, 1),
                box-shadow .55s ease;
    will-change: transform;
    /* subtle resting shadow */
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
  }
  .book-mount.is-modal .page-flip > .menu-flat {
    width: 100%;
    height: 100%;
  }

  /* RIGHT page (menu-2) — visible at state 1, flips left at state 2 */
  .book-mount.is-modal .page-flip-right {
    left: 50%;
    transform-origin: 0% 50%;     /* spine = its left edge */
    transform: rotateY(0);
    z-index: 6;
  }
  .book-mount.is-modal .book-stage[data-state="2"] .page-flip-right {
    transform: rotateY(-180deg);
    /* lifted-page shadow at the destination */
    box-shadow: 6px 4px 22px rgba(0,0,0,.32);
  }

  /* LEFT page (menu-3) — waits at rotateY(180°) on the right side
     (back-facing, invisible) until state 2, then rotates into place
     on the left. */
  .book-mount.is-modal .page-flip-left {
    left: 0;
    transform-origin: 100% 50%;   /* spine = its right edge */
    transform: rotateY(180deg);
    z-index: 5;
  }
  .book-mount.is-modal .book-stage[data-state="2"] .page-flip-left {
    transform: rotateY(0);
    box-shadow: -6px 4px 22px rgba(0,0,0,.32);
  }

  /* menu-2 inside the right-page card. Card width = 50% of book, so
     editor-spec book-percentages are doubled inside the card. */
  .book-mount.is-modal .page-flip-right .menu-flat[data-menu="menu-2"] {
    position: absolute;
    left:    0.58%;     /* (50.29 - 50) / 50 * 100 */
    top:     0.00%;
    width:  99.30%;     /* 49.65 / 50 * 100 */
    height: 104.26%;
  }

  /* menu-3 inside the left-page card. Editor placed it at book-x 51.51%
     (right side); it lands on the LEFT after the flip, mirrored. Inside
     the left-page card (which spans book 0–50%), the mirrored x is:
       book-x = 100 - 51.51 - 47.31 = 1.18
       card-x = 1.18 / 50 * 100 = 2.36
     and width is doubled: 47.31 * 2 = 94.62. */
  .book-mount.is-modal .page-flip-left .menu-flat[data-menu="menu-3"] {
    position: absolute;
    left:    2.36%;
    top:     0.77%;
    width:  94.62%;
    height:  99.36%;
  }
  /* compact controls */
  .book-mount.is-modal .book-close {
    top: 10px; right: 10px;
    width: 38px; height: 38px;
    font-size: 1.4rem;
  }
  .book-mount.is-modal .book-controls {
    margin-top: 10px;
    gap: 14px;
  }
  .book-mount.is-modal .book-controls button {
    width: 38px; height: 38px;
    font-size: .85rem;
  }
  /* hide the "click to open" cover hint on phone — modal auto-flips after 2.5s */
  .book-mount.is-modal .cover-tap { display: none !important; }
  /* nudge the cover logo down a touch so it doesn't kiss the gold border */
  .book-mount.is-modal .cover-logo { margin-top: 28px; }
  /* lift the VOL.IV / SPRING NO.02 line up so it clears the bottom gold border */
  .book-mount.is-modal .cover-meta { margin-bottom: 56px; }
}

/* ─── editor mode ─── */
body.is-editing .page-image-img { cursor: grab; }
body.is-editing .page-image-img:active { cursor: grabbing; }
body.is-editing .page-image {
  outline: 2px dashed rgba(193,74,42,.55);
  outline-offset: -6px;
}
/* in edit mode, suppress flip/swipe interactions on the book pages */
body.is-editing .book { cursor: default; }

.book-edit-panel {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 360px;
  max-width: 92vw;
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(15,9,5,.92);
  border: 1px solid rgba(255,214,158,.35);
  border-radius: 8px;
  color: #f6e7c7;
  font-family: var(--body);
  font-size: .85rem;
  z-index: 1020;
  box-shadow: 0 18px 44px -16px rgba(0,0,0,.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.is-editing .book-edit-panel { display: flex; }
.book-edit-panel .bep-help {
  font-size: .76rem;
  letter-spacing: .04em;
  color: rgba(246,231,199,.78);
  border-bottom: 1px solid rgba(255,214,158,.18);
  padding-bottom: 8px;
}
.book-edit-panel .bep-rows {
  display: flex; flex-direction: column;
  gap: 8px;
}
.book-edit-panel .bep-row {
  display: grid;
  grid-template-columns: 70px 1fr 1fr 1fr;
  gap: 8px;
  align-items: center;
  font-family: var(--body);
  font-size: .76rem;
}
.book-edit-panel .bep-row label {
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vermillion-2);
}
.book-edit-panel .bep-row .bep-field {
  display: flex; align-items: center; gap: 4px;
  color: rgba(246,231,199,.85);
}
.book-edit-panel .bep-row .bep-field .bep-key {
  font-size: .68rem;
  color: rgba(246,231,199,.55);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.book-edit-panel .bep-row input[type="number"] {
  width: 60px;
  padding: 2px 4px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,214,158,.28);
  border-radius: 3px;
  color: #f6e7c7;
  font-family: var(--body);
  font-size: .76rem;
}
.book-edit-panel .bep-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  border-top: 1px solid rgba(255,214,158,.18);
  padding-top: 10px;
  flex-wrap: wrap;
}
.book-edit-panel .bep-actions button {
  padding: 6px 14px;
  border-radius: 4px;
  border: 1px solid rgba(255,214,158,.28);
  background: rgba(0,0,0,.4);
  color: #f6e7c7;
  font-family: var(--body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.book-edit-panel .bep-actions button:hover {
  background: rgba(193,74,42,.5);
  border-color: rgba(255,224,170,.55);
}
.book-edit-panel .bep-actions .bep-done {
  background: rgba(193,74,42,.7);
  border-color: rgba(255,224,170,.55);
}
.book-edit-panel .bep-toast {
  font-size: .72rem;
  color: var(--vermillion-2);
  min-height: 16px;
}
.teaser-inner.is-book-open .book-mount {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-content: center;
}

/* closed: single-page cover sitting in the right column.
   open: doubles in width and pushes leftward, anchored to the right. */
.book-stage {
  position: relative;
  width: min(100%, 460px);
  max-width: 460px;
  aspect-ratio: 4 / 5;
  perspective: 2400px;
  perspective-origin: 50% 30%;
  transform-origin: right center;
  transition: width 1s cubic-bezier(.42, .04, .15, .97),
              height 1s cubic-bezier(.42, .04, .15, .97),
              max-width 1s cubic-bezier(.42, .04, .15, .97),
              aspect-ratio 1s cubic-bezier(.42, .04, .15, .97);
}
.book-stage[data-state]:not([data-state="0"]) {
  /* extends left into the story column area while the story copy fades */
  width: min(1040px, calc(100vw - 40px));
  height: min(740px, calc(100vh - var(--deck-h) - 64px));
  max-width: none;
  aspect-ratio: auto;
}

@media (max-width: 800px) {
  .book-mount {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-color: var(--vermillion) rgba(10,9,8,.14);
  }
  .teaser-inner.is-book-open .book-mount {
    justify-content: flex-start;
    align-items: flex-start;
  }
  .book-stage {
    width: min(88vw, 460px);
    max-width: none;
    flex: 0 0 auto;
  }
  .book-stage[data-state]:not([data-state="0"]) {
    width: min(920px, calc(188vw - 32px));
    height: auto;
    aspect-ratio: 8 / 5;          /* each half stays near full viewport width */
  }
  .book-controls {
    width: 100%;
    justify-content: center;
  }
}

.book {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  /* drop-shadow filter intentionally NOT here — applying any `filter` to a
     transform-style: preserve-3d element collapses the 3D context on iOS
     WebKit (visible as backface ghosting / page bleed-through during flips).
     The same shadow is reproduced on .book-stage instead, which sits OUTSIDE
     the 3D context. */
}
.book-stage {
  filter: drop-shadow(0 34px 46px rgba(10,9,8,.52));
}

/* spine appears once book is open */
.book-spine {
  position: absolute;
  top: -3px; bottom: -3px;
  left: 50%;
  width: 12px;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(80,42,17,.42) 30%, rgba(255,220,160,.18) 50%, rgba(80,42,17,.42) 70%, rgba(0,0,0,.66) 100%);
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s var(--ease) .3s;
}
.book-stage[data-state]:not([data-state="0"]) .book-spine { opacity: 1; }

.leaf {
  position: absolute;
  top: 0; bottom: 0;
  /* when closed (stage half-width), one leaf fills the stage; when open (stage doubles),
     leaves occupy the right half. Using percentage of the stage works for both. */
  left: 0;
  width: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(.42, .04, .15, .97),
              left 1s cubic-bezier(.42, .04, .15, .97),
              width 1s cubic-bezier(.42, .04, .15, .97);
  will-change: transform;
}
.book-stage[data-state]:not([data-state="0"]) .leaf {
  left: 50%;
  width: 50%;
}
.leaf.flipped { transform: rotateY(-180deg); }

.face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* tiny translateZ pushes each face onto its own GPU layer so iOS doesn't
     swap front/back z-order mid-rotation (cause of the mirror-text ghosting
     visible on phone). Only +0.01px of depth; no visual offset. */
  transform: translateZ(0.01px);
  -webkit-transform: translateZ(0.01px);
  will-change: transform;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255,255,255,.38), transparent 36%),
    linear-gradient(180deg, #fff7e5 0%, #f3e7c9 100%);
  color: var(--sumi);
  overflow: hidden;
  box-shadow:
    inset 8px 0 14px -10px rgba(10,9,8,.55),
    inset 0 0 0 1px rgba(10,9,8,.06);
}
.face.back {
  transform: rotateY(180deg) translateZ(0.01px);
  -webkit-transform: rotateY(180deg) translateZ(0.01px);
  box-shadow:
    inset -8px 0 14px -10px rgba(10,9,8,.55),
    inset 0 0 0 1px rgba(10,9,8,.06);
}

/* faint paper texture */
.face::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.04  0 0 0 0 0.02  0 0 0 0 .35'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .15;
  mix-blend-mode: multiply;
  z-index: 0;
}

/* ── COVER ── */
.leaf-cover .face {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,201,127,.13), transparent 44%),
    radial-gradient(ellipse at 30% 25%, rgba(193,74,42,.28), transparent 55%),
    radial-gradient(ellipse at 75% 80%, rgba(184,153,104,.22), transparent 55%),
    repeating-linear-gradient(96deg, rgba(255,224,166,.04) 0 1px, transparent 1px 18px),
    linear-gradient(150deg, #251207 0%, #080706 58%, #180902 100%);
  color: var(--washi);
  cursor: pointer;
  box-shadow:
    inset 8px 0 14px -8px rgba(0,0,0,.8),
    inset -2px 0 0 rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(184,153,104,.18);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.book-stage[data-state="0"] .leaf-cover .face.front:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 8px 0 14px -8px rgba(0,0,0,.8),
    inset -2px 0 0 rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(193,74,42,.45);
}
.leaf-cover .face.back {
  background:
    radial-gradient(ellipse at 35% 0%, rgba(255,255,255,.4), transparent 34%),
    linear-gradient(180deg, #fff7e5 0%, #f3e7c9 100%);
  color: var(--sumi);
  cursor: auto;
  box-shadow:
    inset -8px 0 14px -10px rgba(10,9,8,.55),
    inset 0 0 0 1px rgba(10,9,8,.06);
}

.cover-art {
  position: relative;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 12% 10%;
  text-align: center;
  z-index: 1;
}
.cover-art::before {
  content: '';
  position: absolute;
  inset: 5%;
  border: 1px solid rgba(214,178,111,.58);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.28),
    inset 0 0 34px rgba(193,74,42,.10);
  pointer-events: none;
}
.cover-art::after {
  content: '';
  position: absolute;
  inset: calc(5% + 6px);
  border: 1px solid rgba(184,153,104,.18);
  pointer-events: none;
}
.cover-corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 1px solid var(--gold);
  z-index: 2;
}
.cover-corner.cc-tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.cover-corner.cc-tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.cover-corner.cc-bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.cover-corner.cc-br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

.cover-logo {
  width: 50%;
  max-width: 170px;
  margin-bottom: 20px;
  filter:
    brightness(.95) sepia(.3) hue-rotate(-10deg) saturate(1.1)
    drop-shadow(0 0 18px rgba(193,74,42,.45));
  mix-blend-mode: screen;
  opacity: .88;
}
.cover-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.45rem;
  line-height: 1;
  letter-spacing: .04em;
  color: #fff4cf;
  text-shadow:
    0 1px 0 rgba(0,0,0,.95),
    0 0 18px rgba(193,74,42,.34),
    0 7px 22px rgba(0,0,0,.82);
  margin-bottom: 16px;
}
.cover-rule {
  display: block;
  width: 70px; height: 1px;
  background: linear-gradient(90deg, transparent, #e2bd77, transparent);
  margin-bottom: 18px;
}
.cover-meta {
  font-family: var(--body);
  font-size: .72rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: #cda86c;
  text-shadow: 0 1px 0 rgba(0,0,0,.8);
  margin-bottom: 28px;
}
.cover-tap {
  position: absolute;
  bottom: 7%; left: 50%;
  transform: translateX(-50%);
  font-family: var(--body);
  font-size: .68rem;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: rgba(255,244,207,.82);
  text-shadow: 0 1px 0 rgba(0,0,0,.9);
  animation: coverPulse 2.6s ease-in-out infinite;
  white-space: nowrap;
}
@keyframes coverPulse {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}
.book-stage[data-state]:not([data-state="0"]) .cover-tap { display: none; }

.back-cover {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(184,153,104,.10), transparent 60%),
    linear-gradient(150deg, #1a110a 0%, #0a0908 60%, #150b06 100%);
}

/* ── PAGE BODY ── */
.page {
  position: relative;
  width: 100%; height: 100%;
  padding: clamp(26px, 2.9vw, 42px) clamp(28px, 3vw, 46px);
  display: flex; flex-direction: column;
  z-index: 1;
  overflow: hidden;
}
/* full-bleed image page (used for the photographed menu pages) */
.page-image {
  padding: 0;
  background: transparent;        /* no parchment frame; let only the menu image show */
  overflow: hidden;
}
.page-image .page-image-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;            /* show the whole menu, no crop */
  object-position: center;
  display: block;
  transform-origin: center;
}

/* drop the rectangular page-edge frame on faces that hold a menu image so the
   visible outline hugs the menu itself, not the larger book page */
.face:has(.page-image) {
  background: transparent;
  box-shadow: none;
}
.face:has(.page-image)::after { display: none; }

/* baked-in per-image positioning (from in-modal editor — Copy CSS) */
.page-image .page-image-img[src$="menu-1.png"] { transform: translate(0.0px, -102.0px) scale(0.950); }
.page-image .page-image-img[src$="menu-2.png"] { transform: translate(0.0px,  -94.0px) scale(0.900); }
.page-image .page-image-img[src$="menu-3.png"] { transform: translate(0.0px,  -77.0px) scale(0.900); }

/* ── Mac / Safari fixes for the desktop 3D book ──────────────────────────
   `@supports (-webkit-hyphens:none)` matches Safari only. The iPhone uses the
   flat composite (not this 3D book), so in practice these target Mac desktop
   Safari (and iPad). Two WebKit-specific bugs handled:

   1. Cover-hover FLICKER. The cover's :hover rule replaced the face's base
      `transform: translateZ(0.01px)` with `translateY(-2px)`, dropping the Z
      layer. Safari then recomposited the 3D layer on every mousemove → rapid
      flicker. Here we keep the translateZ (no lift) so the layer never
      changes; the hover glow (box-shadow) still applies from the base rule.

   2. Menu images NOT PAINTING. An <img> with object-fit + a transform inside a
      transform-style: preserve-3d ancestor is a known WebKit paint bug (the
      image simply doesn't render). Isolating .page-image into its own flat
      compositing context makes Safari paint it normally; the leaf still flips
      in 3D because the rotation lives on .leaf, not on .page-image. */
@supports (-webkit-hyphens:none) {
  /* While the book is CLOSED (state 0) the cover is front-facing and never
     rotated, but its backface-visibility: hidden + will-change layer made
     Safari mis-compute the facing on each hover repaint and cull the face —
     so it blinked invisible while the cursor sat on it and flickered as the
     cursor moved. Forcing the closed cover to backface-visibility: visible
     (with no hover transition / layer promotion) removes anything for Safari
     to cull. These overrides only apply at state 0; once the book opens the
     selector stops matching and the normal hidden-backface flip resumes. */
  .book-stage[data-state="0"] .leaf-cover .face.front {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    will-change: auto;
    transition: none;
  }
  .book-stage[data-state="0"] .leaf-cover .face.front:hover {
    transform: translateZ(0.01px);
    -webkit-transform: translateZ(0.01px);
    box-shadow:
      inset 8px 0 14px -8px rgba(0,0,0,.8),
      inset -2px 0 0 rgba(0,0,0,.4),
      inset 0 0 0 1px rgba(193,74,42,.45);
  }
  .page-image {
    transform-style: flat;
    -webkit-transform-style: flat;
  }
  .page-image .page-image-img {
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}
.page-head { margin-bottom: 14px; }
.page-eyebrow {
  display: block;
  font-family: var(--body);
  font-weight: 600;
  font-size: .58rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 8px;
}
.page-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.58rem;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--sumi);
  border-bottom: 1px solid rgba(10,9,8,.18);
  padding-bottom: 12px;
}
.page-prose p {
  font-size: .94rem;
  line-height: 1.55;
  color: rgba(10,9,8,.78);
  margin-bottom: 10px;
  max-width: 38ch;
}
.page-prose em { color: var(--vermillion); font-style: italic; }
.page-quote {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--gold-soft);
  border-left: 1px solid var(--gold-soft);
  padding-left: 14px;
  margin: 14px 0;
  line-height: 1.4;
}
.page-quote span {
  display: block;
  font-style: normal;
  font-family: var(--body);
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin-top: 6px;
  color: rgba(10,9,8,.5);
}
.page-fineprint {
  font-size: .68rem !important;
  color: rgba(10,9,8,.5) !important;
  margin-top: auto !important;
  padding-top: 10px;
  border-top: 1px dotted rgba(10,9,8,.18);
  line-height: 1.5;
}

/* dishes — leader-dot layout inside the book */
.page-dishes {
  display: flex; flex-direction: column;
  gap: 10px;
  flex: 1;
  margin-top: 4px;
}
.page-dishes li {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  align-items: end;
  gap: 8px;
  font-size: .98rem;
  line-height: 1.25;
}
.page-dishes .d-name {
  font-family: var(--display);
  font-weight: 500;
  color: var(--sumi);
}
.page-dishes .d-leader {
  border-bottom: 1px dotted rgba(10,9,8,.32);
  position: relative;
  bottom: 5px;
}
.page-dishes .d-price {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1em;
  color: var(--vermillion);
  white-space: nowrap;
}
.page-dishes--lg {
  gap: 6px;
}
.page-dishes--lg li {
  grid-template-columns: 1fr max-content max-content max-content;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px dotted rgba(10,9,8,.18);
}
.page-dishes--lg li:last-child { border-bottom: 0; }
.page-dishes--lg .d-jp {
  font-family: var(--body);
  font-size: .65rem;
  letter-spacing: .12em;
  color: rgba(10,9,8,.5);
  text-transform: uppercase;
  align-self: end;
  padding-bottom: 2px;
}
.page-dishes--lg .d-desc {
  grid-column: 1 / -1;
  font-size: .72rem;
  line-height: 1.45;
  color: rgba(10,9,8,.6);
  margin-top: 4px;
  font-family: var(--body);
  max-width: 50ch;
}

.page-note {
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(10,9,8,.45);
  margin-top: 10px;
}

.page-foot {
  margin-top: auto;
  padding-top: 10px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--body);
  font-size: .56rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: rgba(10,9,8,.4);
  border-top: 1px solid rgba(10,9,8,.08);
}

.page-cta {
  position: relative;            /* ensure CTA sits above paper texture */
  z-index: 10;
  display: flex; gap: 12px; flex-wrap: wrap;
  margin: 16px 0 14px;
}
.page-cta .btn {
  padding: 12px 22px;
  font-size: .64rem;
  pointer-events: auto;          /* belt-and-suspenders for the link */
  cursor: pointer;
}

.page-closing .page-prose p { font-size: .92rem; }

/* end page (front of leaf 4) */
.page-end {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  gap: 18px;
}
.page-end .end-line {
  width: 56px; height: 1px;
  background: var(--gold-soft);
}
.page-end .end-thanks {
  font-family: var(--body);
  font-size: .7rem;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: rgba(10,9,8,.6);
}
.page-end .end-foot {
  position: absolute;
  bottom: 26px;
  font-family: var(--body);
  font-size: .58rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: rgba(10,9,8,.4);
}

/* mobile: pages need to stay readable at single-page width */
@media (max-width: 800px) {
  .page { padding: clamp(20px, 4.5vw, 30px); }
  .page-title { font-size: 1.36rem; }
  .page-dishes li { font-size: .94rem; gap: 8px; }
  .page-dishes--lg .d-desc { font-size: .78rem; }
}

@media (max-width: 900px) {
  .teaser-copy h2 { font-size: 2.6rem; }
  .pillars-head h2 { font-size: 2.45rem; }
  .about-hero h1 { font-size: 3.5rem; }
  .about-text h2 { font-size: 2.15rem; }
  .cover-title { font-size: 2.15rem; }
}

@media (max-width: 540px) {
  .teaser-copy h2 { font-size: 2.2rem; }
  .pillars-head h2 { font-size: 2.2rem; }
  .about-hero h1 { font-size: 3rem; }
  /* about-text h2 handled by the 600px-wide block above (fluid clamp) */
}

/* page edge shadow during flip */
.leaf::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 0; width: 30px;
  background: linear-gradient(90deg, rgba(0,0,0,.3), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ease);
  z-index: 5;
}

/* hint above the controls — only visible when open */
.book-controls {
  margin-top: 18px;
  display: flex; align-items: center; justify-content: center; gap: 24px;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .5s var(--ease) .2s, transform .5s var(--ease) .2s;
}
.book-stage[data-state]:not([data-state="0"]) ~ .book-controls {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 90;
  width: min(360px, calc(100% - 40px));
  margin-top: 0;
  padding: 8px 12px;
  opacity: 1;
  transform: translateX(-50%);
  pointer-events: auto;
  border: 1px solid rgba(78,35,12,.20);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,248,225,.62), rgba(206,176,124,.38)),
    rgba(241,224,184,.72);
  box-shadow:
    0 12px 26px rgba(49,22,7,.20),
    inset 0 1px 0 rgba(255,255,255,.50);
  backdrop-filter: blur(8px);
}
.book-controls button {
  width: 42px; height: 42px;
  border: 1px solid rgba(64,29,10,.34);
  border-radius: 50%;
  color: #2a1207;
  font-size: 1rem;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,248,224,.86), transparent 44%),
    rgba(255,244,207,.42);
  box-shadow: 0 8px 18px rgba(69,34,12,.16);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.book-controls button:hover {
  background: var(--vermillion);
  color: var(--washi);
  border-color: var(--vermillion);
  transform: translateY(-1px);
}
.book-controls button:disabled {
  opacity: .25;
  cursor: not-allowed;
  transform: none;
}
.book-controls button:disabled:hover { background: rgba(255,244,207,.22); color: var(--sumi); border-color: rgba(10,9,8,.25); }
.book-progress {
  font-family: var(--body);
  font-size: .62rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: #6e3b1d;
  text-shadow: 0 1px 0 rgba(255,255,255,.32);
  min-width: 11ch;
  text-align: center;
}

/* clickable book halves cursor */
.book-stage[data-state]:not([data-state="0"]) .book { cursor: ew-resize; }

@media (prefers-reduced-motion: reduce) {
  .leaf, .book-stage { transition-duration: .001ms; }
}


/* ── hero video framing — set by Karl 2026-08-25 via the tuner ──
   Was: object-position 50% 50%, scale(1.06).
   NOTE: the original scale(1.06) existed to crop off the soft edges left by
   blur(3px). At scale(1.00) those edges sit inside the frame, so if a pale
   halo shows at the video borders this is why. */
.hero-video {
  object-position: 50% 30%;
  transform: scale(1.00);
  filter: blur(3px);
}


/* ── delivery platforms: DoorDash + HungryPanda (Uber Eats removed) ── */
.platform-grid--pair{ max-width:820px; grid-template-columns:repeat(2,1fr); }
@media (max-width:820px){ .platform-grid--pair{ grid-template-columns:1fr; max-width:460px; } }

/* HungryPanda — red plate, white wordmark. Hand-built type, no logo asset. */
.platform-hungrypanda .platform-art{
  background:#ffdb03;
  font-family:var(--body);
}
.hp-word{
  font-weight:800;
  font-size:clamp(1rem,2.2vw,1.45rem);
  letter-spacing:-.01em;
  color:#fff;
}


/* real brand logos, fetched from each platform's own site */
.brand-logo{ width:auto; max-width:74%; max-height:52px; height:auto; display:block; }

.platform-doordash .brand-logo{ max-width:70%; max-height:34px; }
.platform-hungrypanda .brand-logo{ max-width:64%; max-height:56px; }


/* ── a future photo cannot break the masonry ──
   js/render-pages.js clamps the shape of anything outside the normal band as
   it renders. This is the net for when scripts do not run at all: no ordinary
   photo comes near 70vh, so only a genuinely extreme one is ever touched. */
.gallery-item img { max-height: 70vh; object-fit: cover; }


/* ── hero wordmark: the chosen face ──
   Set from the admin (Home -> Hero -> Font). data-font is written by
   js/render-pages.js on the site and by js/admin-cms.js on the preview, both
   from the same list in js/cms-store.js. Letter-spacing is tuned per face:
   a geometric sans wants air at this size, a high-contrast serif does not. */
.hero-word[data-font="mincho"],
.cms-wm-sample[data-font="mincho"]      { font-family:'Shippori Mincho B1',serif; font-weight:500; letter-spacing:.01em; }
.hero-word[data-font="mincho-bold"],
.cms-wm-sample[data-font="mincho-bold"] { font-family:'Shippori Mincho B1',serif; font-weight:700; letter-spacing:.005em; }
.hero-word[data-font="cormorant"],
.cms-wm-sample[data-font="cormorant"]   { font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; letter-spacing:.02em; }
.hero-word[data-font="playfair"],
.cms-wm-sample[data-font="playfair"]    { font-family:'Playfair Display',Georgia,serif; font-weight:500; letter-spacing:0; }
.hero-word[data-font="josefin"],
.cms-wm-sample[data-font="josefin"]     { font-family:'Josefin Sans',system-ui,sans-serif; font-weight:400; letter-spacing:.08em; }
.hero-word[data-font="manrope"],
.cms-wm-sample[data-font="manrope"]     { font-family:'Manrope',system-ui,sans-serif; font-weight:300; letter-spacing:.03em; }


/* ── the events switch ──
   The Events link is hidden until js/site-settings.js says the ticketed side
   of the site is running. Hidden by default and revealed, never the reverse:
   a link that appears and then disappears looks like a fault, and if the
   lookup never answers the site stays as the restaurant asked for it. */
.nav-events { display: none; }
.events-on .nav-events { display: inline-flex; }