/* A · Sumi 2 — C's structure (B's legends, Love Omakase, warm legends) in A's continuous darkness. Titles in B's
   Fraunces (준 09-28: the light serif read too narrow), set at 600 — bold type glows heavier on black. */
@font-face { font-family: "Fraunces"; src: url("/shared/fonts/fraunces-600-700.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/shared/fonts/instrument-sans-400-600.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
:root {
  color-scheme: dark;
  --bg: #0B0A09; --fg: #EFE9DF; --muted: rgba(239, 233, 223, .74); --label: rgba(239, 233, 223, .62);
  --bar: rgba(11, 10, 9, .9); --btn-bg: #BFA06A; --btn-fg: #0B0A09; --focus: #BFA06A; --radius: 2px; --accent-spicy: #E08A6E;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --word-font: 500 .8rem/1 var(--sans);
  --title-font: 600 clamp(1.8rem, 2.3vw, 2.4rem)/1.1 var(--serif);
  --title-track: -.012em;
  --h1: clamp(2.1rem, 2.9vw, 3rem);
  --enter-transition: filter 2.2s ease-out;
  --enter-filter: brightness(.3);
}
@media (min-width: 1024px) {
  #hero .copy { left: 5.5%; top: calc(.37 * 56.25vw); } /* same place as before the taller hero */
  #omakase .copy { left: 50%; transform: translateX(-50%); top: 63%; text-align: center; max-width: 44%; }
  #omakase .actions { justify-content: center; }
  #omakase .line { margin-inline: auto; }
  #legends .copy { left: 63%; top: 39%; }
  #namesake .copy { left: 50%; transform: translateX(-50%); top: 70%; text-align: center; max-width: 50%; }
  #namesake .line { margin-inline: auto; max-width: 60ch; }
  #kitchen .copy { left: 5.5%; top: 43%; }
  #visit .copy { left: 5.5%; top: 36%; }
  #closing .copy { left: 50%; transform: translateX(-50%); top: 12%; text-align: center; max-width: 50%; }
  #closing .actions { justify-content: center; }
}
.title { font-optical-sizing: auto; }
/* 준 09-28: the omakase board sits 60px lower (at 1440) than before, whole from end to end. The hero plate is taller
   than 16:9 (1536×928, the board's top end completed) — that moves the food 38px — and the stage adds 1.5vw of page
   colour above it for the remaining 22px. The plate is colour-matched to that colour, so no seam shows. */
.scene-hero { --drop: 1.5vw; }
@media (min-width: 1024px) {
  .scene-hero .stage { aspect-ratio: auto; padding-top: var(--drop); }
  .scene-hero .plate { position: relative; inset: auto; height: auto; aspect-ratio: 1536 / 928; }
  /* melt only the top edge into the added strip (the board's top end starts below 3%); the bottom stays whole */
  .flow .scene-nofade.scene-hero .plate img { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 3%); mask-image: linear-gradient(to bottom, transparent 0, #000 3%); }
}
@media (max-width: 1023px) { .scene-hero .stage { padding-top: 60px; } }