/* Home as one walk into a ramen restaurant. A fixed canvas (scroll-story.js) sits behind the whole
   page and every chapter reads over its own scene. All of this only applies once the script has the
   first frame (body.story-live): without JavaScript or with reduced motion the page keeps its
   normal look. */
.home-stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--night); }
.home-stage[hidden] { display: none; }
.home-stage canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-shade { /* keeps text readable over bright lanterns and flames */
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 13, .58) 0%, rgba(20, 16, 13, .3) 38%, rgba(20, 16, 13, .58) 100%);
}
.chapter-title { display: none; }

body.story-live main { position: relative; z-index: 1; }
body.story-live .site-footer { position: relative; z-index: 1; background: var(--night); }

/* Chapter 1: the hero sits over the curtains, text low and centred so the logo stays visible. */
.story-live .hero { background: transparent; }
.story-live .hero::before, .story-live .hero-photo, .story-live .hero-shade, .story-live .hero .lantern,
.story-live .hero .waves, .story-live .hero-kanji, .story-live .hero-vertical { display: none; }
.story-live .hero.has-photo .hero-inner {
  grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: end; text-align: center;
  min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h));
  padding-bottom: clamp(40px, 9vh, 96px);
}
.story-live .hero-copy { max-width: 40rem; }
.story-live .hero-copy .hero-eyebrow { justify-content: center; }
.story-live .hero-copy p { margin-inline: auto; max-width: 42ch; }
.story-live .hero-actions { justify-content: center; }

/* Chapter 2: the four reasons, in the dining room. */
.story-live .perks {
  display: flex; flex-direction: column; justify-content: center; gap: 22px; min-height: 85vh; min-height: 85svh;
  padding: 56px 20px; background: none; border: 0; color: var(--on-night);
}
.story-live .chapter-title {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; text-align: center;
  font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(1.8rem, 4.4vw, 3rem);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .85);
}
.story-live .chapter-title .icon { flex: none; width: 1.05em; height: 1.05em; color: var(--lantern); }
.story-live .perks ul { max-width: 880px; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.story-live .perks li {
  padding: 20px 22px; border: 1px solid rgba(242, 165, 59, .28) !important; border-radius: 14px;
  background: rgba(20, 16, 13, .66); backdrop-filter: blur(8px);
}
.story-live .perks .icon { color: var(--lantern); }
.story-live .perks span { color: var(--on-night-soft); }

/* Chapter 3: the kitchen. */
.story-live .craving {
  display: flex; flex-direction: column; justify-content: center; min-height: 75vh; min-height: 75svh;
  padding: 56px 20px; background: none;
}
.story-live .craving h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); margin-bottom: 22px; text-shadow: 0 2px 18px rgba(0, 0, 0, .85); }
.story-live .craving .quick a { background: rgba(20, 16, 13, .66); backdrop-filter: blur(8px); }

/* Chapter 4: the table, with the recipes. The panel fades in and out so the bowl shows around it. */
.story-live .featured-dark {
  background: linear-gradient(180deg, transparent 0, rgba(20, 16, 13, .72) 90px, rgba(20, 16, 13, .72) calc(100% - 90px), transparent 100%);
  padding: 120px 0 120px;
}
.story-live .featured-bg { display: none; }
.story-live .duo { margin-top: 24px; }

@media (max-width: 760px) {
  .story-live .hero.has-photo .hero-inner {
    padding: 36px 20px 28px;
    min-height: calc(100vh - var(--header-h) - var(--tabbar-h)); min-height: calc(100svh - var(--header-h) - var(--tabbar-h));
  }
  .story-live .perks { min-height: 75svh; padding: 40px 14px; }
  .story-live .perks ul { grid-template-columns: 1fr; gap: 12px; }
  .story-live .craving { min-height: 60svh; padding: 40px 16px; }
  .story-live .featured-dark { padding: 90px 0 90px; }
}

/* The craving panel is a column flexbox: give the pill row the full width so its own horizontal
   scroll works on phones instead of widening the page. */
.story-live .craving .quick { width: 100%; min-width: 0; }

/* Legibility over the moving picture: a soft dark halo behind the copy, brighter small text and
   stronger shadows. Cream and amber stay readable whatever frame is behind them. */
.story-live .hero-copy, .story-live .perks .chapter-title { position: relative; isolation: isolate; }
.story-live .hero-copy::before, .story-live .perks .chapter-title::before {
  content: ""; position: absolute; inset: -34px -56px; z-index: -1; pointer-events: none; filter: blur(8px);
  background: radial-gradient(closest-side, rgba(20, 16, 13, .78), rgba(20, 16, 13, .5) 60%, transparent);
}
.story-live .hero-copy .hero-eyebrow { color: var(--lantern); text-shadow: 0 1px 8px rgba(0, 0, 0, .95); }
.story-live .hero-eyebrow::after { background: linear-gradient(90deg, rgba(242, 165, 59, .8), transparent); }
.story-live .hero-copy h1 { text-shadow: 0 2px 4px rgba(0, 0, 0, .85), 0 4px 24px rgba(0, 0, 0, .9); }
.story-live .hero-copy h1 em { color: #ff6f61; }
.story-live .hero-copy p { color: #fff6e6; text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 2px 14px rgba(0, 0, 0, .9); }
.story-live .chapter-title { text-shadow: 0 2px 4px rgba(0, 0, 0, .85), 0 4px 24px rgba(0, 0, 0, .9); }
.story-live .craving h2 { text-shadow: 0 2px 4px rgba(0, 0, 0, .85), 0 4px 24px rgba(0, 0, 0, .9); }
.story-live .featured-dark {
  background: linear-gradient(180deg, transparent 0, rgba(20, 16, 13, .84) 90px, rgba(20, 16, 13, .84) calc(100% - 90px), transparent 100%);
}
.story-live .featured-dark .section-head h2 { text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.story-live .featured-dark .muted { color: #e6d6bd; }
@media (max-width: 760px) {
  .story-live .hero-copy::before, .story-live .perks .chapter-title::before { inset: -26px -18px; }
}
.story-live .perks { overflow-x: clip; } /* the halo behind the title may not widen the page */

/* Chapter 3 has a whole screen to itself: let the five pills wrap and centre so none is cut off
   at the edge of a phone (the sideways scroll of the plain page hides them without a hint). */
.story-live .craving h2 { justify-content: center; text-align: center; }
.story-live .craving .quick { flex-wrap: wrap; overflow: visible; justify-content: center; padding-bottom: 0; }
.story-live .craving .quick a { flex: none; }
@media (max-width: 760px) {
  .story-live .craving h2, .story-live .craving .quick { justify-content: center; }
  .story-live .craving .quick { gap: 8px; }
}
.story-live .hero::after { display: none; } /* the fade into solid night would cut the picture behind it */