/* 七弐八製麺 — warm washi cinema. Load LAST, after group-ui.css.
 * Existing photographs, exact brush mark and seal only. JS owns phases and
 * the trace's measured rectangle; the outer completed mark never animates. */
:root {
  --indigo: #2B211B; --ink: #2B211B; --cream: #F2E9D8; --paper: #F2E9D8;
  --accent: #A63428; --ink-line: rgb(43 33 27 / 26%); --light-line: rgb(242 233 216 / 42%);
  --cinema-logo-width: clamp(240px, 19vw, 280px);
  --intro-logo-width: var(--cinema-logo-width);
}
body { color: var(--ink); background-color: var(--cream); }
.site-header .brand,
.site-header :is(.language-control, .menu-toggle, .header-replay) {
  color: var(--cream); border-color: rgb(242 233 216 / 55%);
  background: rgb(43 33 27 / 88%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.site-header .header-replay {
  display: inline-flex; flex: 0 0 48px; width: 48px; min-height: 48px;
  align-items: center; justify-content: center; border: 1px solid rgb(242 233 216 / 55%);
  padding: 0; font-family: var(--sans); font-size: 27px; line-height: 1; cursor: pointer;
}
.site-header .header-actions { align-items: center; }
.site-header .header-replay:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }

/* A continuous three-leaf screen, never three floating portrait cards. */
.hero, body[data-night="true"] .hero {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(min-content, 1fr) auto auto;
  min-height: max(860px, 100svh); align-content: start; gap: 0;
  padding: 96px var(--hero-gutter) 18px; color: var(--cream); background: var(--ink);
}
.hero .hero-overline { grid-column: 1; grid-row: 1; min-height: 24px; font-size: 12px; }
body[data-entry="map"] .hero .hero-overline { padding-top: 0; }
.hero .hero-overline > span:last-child { font-size: 11px; }
.hero .hero-composition {
  position: static; display: grid; grid-column: 1; grid-row: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto;
  align-content: start; align-items: start; min-height: 0; column-gap: 12px; row-gap: 0;
}
.hero .hero-screen { display: contents; }
.hero .screen-panel, .hero .screen-two,
html:not([data-motion="off"]) .hero .screen-panel {
  position: absolute; z-index: 0; inset: 0 auto 0 24%; display: block;
  width: 52%; height: 100%; min-height: 0; margin: 0; padding: 0; transform: none; animation: none;
}
.hero .screen-two video, .hero #hero-video { object-fit: cover; object-position: 50% 52%; filter: saturate(.92); }
.hero-side-panels { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.hero-side-panels img {
  position: absolute; top: 0; bottom: 0; display: block; width: 24%; height: 100%;
  object-fit: cover; object-position: center; filter: saturate(.88); pointer-events: none;
}
.hero-side-left { left: 0; border-right: 2px solid rgb(242 233 216 / 20%); }
.hero-side-right { right: 0; border-left: 2px solid rgb(242 233 216 / 20%); }
.hero .hero-video-shade {
  background:
    radial-gradient(ellipse 70% 78% at 50% 48%, rgb(24 17 13 / 74%) 0%, rgb(24 17 13 / 65%) 45%, rgb(24 17 13 / 20%) 83%, transparent 100%),
    linear-gradient(180deg, rgb(24 17 13 / 28%) 0%, rgb(24 17 13 / 12%) 24%, rgb(24 17 13 / 38%) 52%, rgb(24 17 13 / 75%) 82%, rgb(24 17 13 / 88%) 100%);
}
.hero .hero-steam { opacity: .35; animation: none !important; transform: none; }
.hero .hero-exposure { background: linear-gradient(105deg, transparent 28%, rgb(242 233 216 / 13%) 50%, transparent 72%); }

/* Fixed logo slot: left arithmetic survives all motion-off transform resets. */
.hero .hero-brand-stamp {
  position: absolute; top: 120px; right: auto; bottom: auto;
  left: calc(50% - var(--cinema-logo-width) / 2); width: var(--cinema-logo-width);
  height: auto; aspect-ratio: 488 / 500; margin: 0; padding: 0;
  transform: none !important; animation: none !important; transition: none !important;
}
.hero #hero-brand-stamp { grid-area: auto; justify-self: normal; align-self: normal; }
.hero .hero-brush-logo { filter: drop-shadow(0 2px 6px rgb(18 12 8 / 65%)); }
.hero .hero-stamp-seal { right: -5%; bottom: -2%; width: 23%; }
.hero .stamp-grain { opacity: .018; }
.hero .hero-copy {
  display: flex; grid-column: 1 / -1; grid-row: 1; justify-self: center;
  flex-direction: column; align-items: center; width: min(900px, 100%); max-width: 100%;
  padding: 280px 0 14px; text-align: center; opacity: 1;
}
.hero .hero-copy .eyebrow { display: none; }
.hero #hero-title,
html:is([lang="ja"], [lang="ko"], [lang="zh-Hans" i], [lang="zh-Hant" i]) .hero #hero-title {
  display: block; width: 100%; max-width: 850px; margin: 0;
  font-size: clamp(42px, 3.8vw, 54px); line-height: 1.22; letter-spacing: -.045em;
  white-space: normal; overflow-wrap: normal; text-wrap: balance;
  color: var(--cream); text-shadow: 0 2px 8px rgb(18 12 8 / 65%);
}
.hero #hero-title > span, html:not([data-motion="off"]) .hero #hero-title > span {
  display: inline; white-space: normal; margin: 0; word-break: normal;
}
html[lang="ko"] .hero #hero-title { word-break: keep-all; overflow-wrap: anywhere; }
.hero .hero-travel-note {
  width: min(650px, 100%); max-width: 100%; margin: 18px auto 0;
  font-size: 16px; line-height: 1.65; color: var(--cream); text-wrap: pretty;
  text-shadow: 0 1px 5px rgb(18 12 8 / 75%);
}
.hero .hero-cta-group, body[data-entry="map"] .hero .hero-cta-group {
  justify-content: center; align-items: stretch; max-width: 620px; margin: 22px auto 0; gap: 12px;
}
.hero .hero-cta-group :is(.button, .hero-directions) { min-height: 52px; font-size: 15px; }
.hero .hero-directions { color: var(--cream); border-color: var(--cream); background: rgb(43 33 27 / 82%); }
.hero .button-reserve { color: var(--cream); background: var(--accent); border-color: var(--accent); }
.hero .hero-copy > .text-link { justify-content: center; margin-top: 8px; font-size: 13px; }
.hero .hero-copy .circle-arrow { width: 34px; height: 34px; font-size: 17px; }
.hero .hero-screen :is(.noren-replay, .video-toggle),
body[data-entry="map"] .hero .hero-screen :is(.noren-replay, .video-toggle) {
  position: relative; grid-row: 2; align-self: stretch; inset: auto;
  width: min(230px, 100%); max-width: 100%; min-height: 44px; margin: 0 0 16px;
  padding: 8px 12px; border-color: rgb(242 233 216 / 55%);
  background: rgb(43 33 27 / 78%); font-size: 13px;
}
.hero .hero-screen .noren-replay, body[data-entry="map"] .hero .hero-screen .noren-replay { grid-column: 1; justify-self: end; }
.hero .hero-screen .video-toggle, body[data-entry="map"] .hero .hero-screen .video-toggle { grid-column: 2; justify-self: start; }
.hero .hero-shot-tabs { grid-column: 1; grid-row: 3; background: rgb(43 33 27 / 74%); border-color: var(--light-line); }
.hero .hero-shot-tabs button { justify-content: center; font-size: 14px; }
.hero .hero-baseline, body[data-entry="map"] .hero .hero-baseline { grid-column: 1; grid-row: 4; order: 3; padding: 8px 0 0; border: 0; }

/* Sparse, static material: original timber rods and barely visible reed fibre. */
:is(.menu-section, .day-night, .guide-section, .space-section, .faq-section, .access-section) { background-color: var(--cream); }
:is(.menu-section, .guide-section, .faq-section)::after {
  position: absolute; inset: 0; z-index: -1; content: ""; pointer-events: none;
  background: var(--reed-grain) center / 380px auto repeat; opacity: .023;
}
:is(.menu-section, .guide-section, .faq-section) { isolation: isolate; }
.price-paper { color: var(--ink); background-color: var(--cream); border-inline-color: rgb(43 33 27 / 12%); }
.price-paper::before { opacity: .04; }
.scroll-rod { height: 14px; background: var(--wood-grain) center / 440px auto repeat-x; }
.story-section, .navigation-dialog[open], .reservation-section, .film-dialog { color: var(--cream); background-color: var(--ink); }
.story-section .story-photo-label, .story-section .play-icon { color: var(--cream); background: rgb(43 33 27 / 92%); }
.navigation-dialog .navigation-top, .navigation-dialog .language-control { background: var(--ink); }
.navigation-brand-scene::after { background: rgb(43 33 27 / 38%); }

/* Curtains hold for 600 ms; the revealed food panes are already full-bleed. */
#curtain .curtain-panel {
  background-color: #2B211B;
  background-image: repeating-linear-gradient(90deg, transparent 0 5px, rgb(242 233 216 / 2%) 5px 6px),
    repeating-linear-gradient(90deg, rgb(14 9 6 / 16%) 0, transparent 6%, rgb(242 233 216 / 3%) 12%, rgb(14 9 6 / 18%) 18%);
}
#curtain .curtain-mark { top: 45%; opacity: 1; }
#curtain .curtain-post { width: clamp(5px, .7vw, 10px); }
#curtain .entrance-scene { animation: none !important; }
#curtain .entrance-scene::after { background: rgb(43 33 27 / 18%); }
#curtain .entrance-triptych {
  inset: 0; width: 100%; height: 100%; display: grid; grid-template-columns: 24fr 52fr 24fr;
  align-items: stretch; gap: 2px; transform: none; opacity: 1; animation: none !important;
  background: #2B211B;
}
#curtain .entrance-cut {
  width: 100%; height: 100%; max-height: none; aspect-ratio: auto; align-self: stretch;
  margin: 0; opacity: 1; transform: none; animation: none !important;
}
#curtain .entrance-cut :is(img, .entry-live-video) { width: 100%; height: 100%; object-fit: cover; }
.ink-cloud { width: min(36vw, 360px); background: radial-gradient(ellipse, rgb(17 12 8 / 75%) 0%, rgb(17 12 8 / 32%) 32%, transparent 68%); }
.ink-cloud::after, .ink-droplet, .trace-brush { display: none !important; }
#intro-caption { display: none !important; animation: none !important; }
#intro-trace { color: #fff; }
#intro-trace[hidden] { display: none !important; }
#intro-trace .logo-contour { filter: drop-shadow(0 2px 5px rgb(18 12 8 / 65%)); }
#intro-trace .logo-fill { clip-path: inset(0 100% 0 0); }

@media (max-width: 1000px) and (min-width: 760px) {
  :root { --cinema-logo-width: 240px; }
  .hero #hero-title, html:is([lang="ja"], [lang="ko"], [lang="zh-Hans" i], [lang="zh-Hant" i]) .hero #hero-title { font-size: 42px; }
}
@media (max-width: 759px) {
  :root { --cinema-logo-width: clamp(160px, 44vw, 180px); --hero-gutter: 20px; }
  .site-header, body[data-night="true"] .site-header { padding-inline: 12px; gap: 8px; }
  .site-header .header-actions { gap: 6px; max-width: calc(100vw - 24px); }
  .site-header .brand { flex-shrink: 0; padding: 4px 8px; gap: 0; }
  .site-header .brand-logo { width: 32px; height: 36px; }
  .site-header .header-seal { left: 31px; }
  .site-header .language-select { width: 102px; min-height: 44px; padding: 8px 5px; }
  .site-header .language-control { min-height: 46px; }
  .site-header .header-replay { flex-basis: 44px; width: 44px; min-height: 46px; }
  .site-header .menu-toggle { width: 44px; min-width: 44px; min-height: 46px; }
  .hero, body[data-night="true"] .hero, body[data-entry="map"] .hero {
    grid-template-rows: repeat(4, auto); min-height: max(780px, 100svh); padding: 84px var(--hero-gutter) 14px;
  }
  .hero .hero-overline, body[data-entry="map"] .hero .hero-overline { grid-row: 1; min-height: 26px; padding-top: 0; font-size: 12px; }
  .hero .screen-panel, .hero .screen-two, html:not([data-motion="off"]) .hero .screen-panel { left: 0; width: 100%; }
  .hero-side-panels { display: none; }
  .hero .hero-brand-stamp, body[data-entry="map"] .hero .hero-brand-stamp { position: absolute; top: 110px; margin: 0; }
  .hero .hero-copy, body[data-entry="map"] .hero .hero-copy { grid-row: 1; padding: 190px 0 10px; align-items: center; }
  .hero #hero-title, html:is([lang="ja"], [lang="ko"], [lang="zh-Hans" i], [lang="zh-Hant" i]) .hero #hero-title {
    font-size: clamp(28px, 8.5vw, 36px); line-height: 1.25; letter-spacing: -.04em;
  }
  html[lang="en"] .hero #hero-title { font-size: clamp(30px, 8.7vw, 36px); line-height: 1.18; }
  html[lang="ja"] .hero #hero-title > span:first-child { display: block; }
  .hero .hero-travel-note { margin: 12px auto 0; font-size: 14px; line-height: 1.6; max-width: 360px; }
  .hero .hero-cta-group, body[data-entry="map"] .hero .hero-cta-group { margin-top: 16px; gap: 8px; flex-wrap: nowrap; }
  .hero .hero-cta-group :is(.button, .hero-directions) { flex: 1 1 0; min-height: 52px; padding: 9px 10px; font-size: 14px; }
  .hero .hero-cta-group .button-reserve { padding-right: 24px; }
  .hero .button-reserve::after { right: 10px; }
  .hero .hero-copy > .text-link { margin-top: 4px; }
  .hero .hero-screen :is(.noren-replay, .video-toggle), body[data-entry="map"] .hero .hero-screen :is(.noren-replay, .video-toggle) {
    width: 100%; max-width: 100%; margin-bottom: 12px; padding: 8px 6px; gap: 5px; font-size: 12px;
  }
  .hero .hero-shot-tabs { grid-row: 3; }
  .hero .hero-shot-tabs button { font-size: 13px; }
  .hero .hero-baseline, body[data-entry="map"] .hero .hero-baseline { grid-row: 4; min-height: 68px; }
  .hero .business-status { font-size: 12px; }
  #curtain .entrance-triptych { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ink-cloud { width: 180px; }
}
@media (max-width: 359px) {
  :root { --hero-gutter: 16px; }
  html[lang="en"] .hero .hero-shot-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[lang="en"] .hero .hero-shot-tabs button:last-child { grid-column: auto; border-top: 0; border-left: 1px solid var(--light-line); flex-direction: column; min-height: 56px; gap: 3px; }
}

@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) body.intro-active #curtain { animation: washi-curtain-clear 150ms ease 1300ms both; }
  html:not([data-motion="off"]) body.intro-active #curtain .curtain-left { animation: washi-open-left 700ms cubic-bezier(.4, 0, .2, 1) 600ms both; }
  html:not([data-motion="off"]) body.intro-active #curtain .curtain-right { animation: washi-open-right 700ms cubic-bezier(.4, 0, .2, 1) 600ms both; }
  html:not([data-motion="off"]) body.intro-active .ink-cloud { animation: washi-ink-breath 300ms ease 1250ms both; }
  html:not([data-motion="off"]) body.intro-active #intro-trace .logo-contour { animation: washi-visible 80ms linear 1450ms both; }
  html:not([data-motion="off"]) body.intro-active #intro-trace .logo-outline path { animation: washi-outline 650ms ease 1450ms both; }
  html:not([data-motion="off"]) body.intro-active #intro-trace .logo-outline { animation: washi-outline-settle 300ms ease 2100ms both; }
  html:not([data-motion="off"]) body.intro-active #intro-trace .logo-fill { animation: washi-fill 900ms cubic-bezier(.2, .6, .2, 1) 1600ms both; }
  html:not([data-motion="off"]) body.intro-active .hero-copy { animation: washi-copy-reveal 600ms ease 2800ms both; }
  html:not([data-motion="off"]) body.intro-active[data-entrance="press"] .hero-brand-stamp.stamp-ready.stamp-impact .hero-brush-logo { animation: washi-logo-press 260ms cubic-bezier(.22, 1, .36, 1) both; }
  html:not([data-motion="off"]) body.intro-active[data-entrance="press"] .hero-brand-stamp.stamp-ready.stamp-impact .hero-stamp-seal { animation: washi-seal-press 220ms cubic-bezier(.22, 1, .36, 1) 100ms both; }
}
@keyframes washi-open-left { from { transform: translateX(0); } to { transform: translateX(-102%); } }
@keyframes washi-open-right { from { transform: translateX(0); } to { transform: translateX(102%); } }
@keyframes washi-curtain-clear { from { opacity: 1; } to { opacity: 0; } }
@keyframes washi-ink-breath { 0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.8); } 45% { opacity: .35; transform: translate(-50%, -50%) scale(1); } }
@keyframes washi-visible { from { opacity: 0; } to { opacity: 1; } }
@keyframes washi-outline { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes washi-outline-settle { from { opacity: 1; } to { opacity: .12; } }
@keyframes washi-fill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes washi-copy-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes washi-logo-press { 0% { transform: scale(1.035); } 55% { transform: scale(.99); } 100% { transform: scale(1); } }
@keyframes washi-seal-press { 0% { opacity: 0; transform: scale(1.08); } 65% { opacity: 1; transform: scale(.97); } 100% { opacity: 1; transform: scale(1); } }
html[data-motion="off"] .hero-copy { opacity: 1 !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { .hero-copy { opacity: 1 !important; animation: none !important; } }
@media (hover: hover) and (pointer: fine) {
  .site-header .header-replay:hover { color: var(--ink); background: var(--cream); }
  .hero .hero-directions:hover { color: var(--ink); background: var(--cream); }
}
@media print {
  .hero .hero-copy { padding-top: 0; }
  .hero .hero-screen, .hero .screen-panel, .hero-side-panels, .header-replay { display: none !important; }
}