/* Loaded after the shared stylesheet on story pages. */
.story-heading-portrait-break {
  display: none;
}

.story-heading-line {
  white-space: nowrap;
}

.story-heading-landscape-separator {
  display: inline;
}

@media (orientation: portrait) {
  .story-page .story-full-copy > h1,
  html[lang="th"] body .story-page .story-full-copy > h1,
  html[lang="en"] body .story-page .story-full-copy > h1,
  html[lang="ja"] body .story-page .story-full-copy > h1 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: var(--story-heading-size, clamp(24px, 7vw, 44px)) !important;
    line-height: 1.28 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .story-heading-portrait-break {
    display: block;
  }

  .story-heading-landscape-separator {
    display: none;
  }

  .story-heading-line {
    display: inline-block;
    max-width: none;
  }

  html[lang="th"] .story-page .story-full-copy > h1 {
    font-size: var(--story-heading-size, clamp(27px, 7.4vw, 32px)) !important;
  }

  html[lang="en"] .story-page .story-full-copy > h1 {
    font-size: var(--story-heading-size, clamp(29px, 8vw, 34px)) !important;
  }

  html[lang="ja"] .story-page .story-full-copy > h1 {
    font-size: var(--story-heading-size, clamp(22px, 6vw, 27px)) !important;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  html,
  body:has(> .story-page),
  body > .story-page {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

/* Final phone-landscape composition: mirror the desktop 3:1 layout while
   keeping the story copy independently scrollable and the CTA always clear. */
@media (orientation: landscape) and (max-height: 560px) {
  html,
  body:has(> .story-page) {
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  body > .story-page {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    height: 100svh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .story-page .story-fullscreen {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .story-page .story-full-copy {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    width: 75% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 8px 12px 8px 20px !important;
    overflow: hidden !important;
  }

  .story-page .story-full-copy > h1,
  html[lang="th"] body .story-page .story-full-copy > h1,
  html[lang="en"] body .story-page .story-full-copy > h1,
  html[lang="ja"] body .story-page .story-full-copy > h1 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 8px !important;
    font-size: var(--story-heading-size, clamp(28px, 5vw, 44px)) !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .story-page .story-full-lead {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 3px 8px 10px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
  }

  .story-page .story-full-lead::-webkit-scrollbar {
    display: none !important;
  }

  .story-page .story-full-lead p {
    margin: 0 0 .7em !important;
    font-size: clamp(10px, 1.65vw, 14px) !important;
    line-height: 1.45 !important;
  }

  .story-page .hero-actions {
    width: 100% !important;
    max-width: none !important;
    min-height: 30px !important;
    margin: 5px 0 0 !important;
    padding: 0 !important;
    justify-self: stretch !important;
  }

  .story-page .story-full-character {
    position: absolute !important;
    z-index: 3 !important;
    right: 0 !important;
    bottom: -8px !important;
    left: auto !important;
    width: 25% !important;
    height: calc(100% - 4px) !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: right bottom !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(18px) !important;
  }

  .story-page.story-character-revealed .story-full-character {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

/* Desktop-style composition scaled for landscape phones: fixed canvas,
   independently scrolling copy, CTA below it, and a reserved mascot column. */
@media (orientation: landscape) and (max-height: 560px) {
  html,
  body:has(> .story-page) {
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  body > .story-page {
    height: 100svh !important;
    min-height: 100svh !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .story-page .story-fullscreen {
    width: calc(100% - 24px) !important;
    height: 100% !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    overflow: hidden !important;
  }

  .story-page .story-full-copy {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 4px 8px 8px !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    align-content: stretch !important;
  }

  .story-page .story-full-copy > h1,
  html[lang="th"] body .story-page .story-full-copy > h1,
  html[lang="en"] body .story-page .story-full-copy > h1,
  html[lang="ja"] body .story-page .story-full-copy > h1 {
    width: 75% !important;
    max-width: 75% !important;
    margin: 0 !important;
    justify-self: start !important;
    text-align: center !important;
    font-size: var(--story-heading-size, clamp(24px, 4.2vw, 38px)) !important;
    line-height: 1.16 !important;
  }

  .story-page .story-full-lead {
    width: calc(75% - 16px) !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 5px auto 4px 0 !important;
    padding: 4px 8px 20px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    font-size: clamp(9px, 1.45vw, 13px) !important;
    line-height: 1.42 !important;
  }

  .story-page .story-full-lead p {
    margin-bottom: 9px !important;
  }

  .story-page .hero-actions {
    width: calc(75% - 16px) !important;
    max-width: none !important;
    margin: 3px auto 0 0 !important;
    padding: 0 !important;
    justify-self: start !important;
    justify-content: center !important;
  }

  .story-page .story-full-character {
    position: absolute !important;
    inset: auto 0 clamp(-24px, -2vw, -10px) auto !important;
    width: 25% !important;
    height: auto !important;
    max-height: 72% !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: right bottom !important;
  }
}

/* Once automatic scrolling reaches its final position, remove the reading
   mask so the lines left at the top and bottom remain fully legible. */
.story-page .story-full-lead.is-scrollable.is-at-end,
.story-page .story-full-lead.is-scrollable.is-scrolled.is-at-end {
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* Final story footer composition: mirror the navy top bar and keep the
   character anchored clear of the CTA in every orientation. */
body > .story-page {
  box-sizing: border-box !important;
  border-bottom: 8px solid var(--navy) !important;
}

.story-page .story-full-character {
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  object-fit: contain !important;
  object-position: right bottom !important;
  transform: none !important;
}

@media (orientation: portrait) {
  .story-page .hero-actions {
    width: min(58%, 440px) !important;
    max-width: calc(100% - clamp(150px, 38vw, 320px)) !important;
    margin-right: auto !important;
    margin-left: 0 !important;
  }

  .story-page .story-full-character {
    width: min(46vw, 400px) !important;
    max-height: 43% !important;
  }
}

@media (orientation: landscape) {
  .story-page .story-full-character {
    right: 0 !important;
    bottom: 0 !important;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .story-page .hero-actions {
    width: min(56%, 430px) !important;
    margin: 12px 0 0 !important;
    justify-self: start !important;
  }

  .story-page .story-full-character {
    right: 0 !important;
    bottom: 0 !important;
    width: min(42vw, 390px) !important;
    max-height: 330px !important;
    transform: none !important;
    object-position: right bottom !important;
  }
}

/* Seal the story canvas to the viewport edge and lower the transparent
   character artwork until its visible feet sit close to the bottom bar. */
body:has(> .story-page) {
  min-height: 100svh !important;
  background-color: var(--navy) !important;
}

body > .story-page {
  height: 100svh !important;
  min-height: 100svh !important;
}

.story-page .story-full-character {
  bottom: clamp(-42px, -3.5vw, -12px) !important;
}

@media (orientation: landscape) and (max-height: 560px) {
  body > .story-page {
    height: auto !important;
    min-height: 100svh !important;
  }

  .story-page .story-full-character {
    bottom: clamp(-36px, -3vw, -12px) !important;
  }
}

/* Phone landscape: keep the mascot in document flow below the copy so it can
   never cover text. It remains hidden until the visitor starts scrolling. */
@media (orientation: landscape) and (max-height: 560px) {
  .story-page .story-full-copy {
    min-height: 0 !important;
    padding-bottom: 18px !important;
  }

  .story-page .story-full-character {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: min(48vw, 390px) !important;
    height: auto !important;
    max-height: 360px !important;
    margin: 8px 0 0 auto !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(28px) !important;
    transition: opacity 420ms ease, transform 520ms ease, visibility 0s linear 520ms !important;
  }

  .story-page.story-character-revealed .story-full-character {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition-delay: 0s !important;
  }
}

/* Phone landscape needs vertical clearance below the tall logo and a smaller
   headline because available height, rather than width, is the constraint. */
@media (orientation: landscape) and (max-height: 560px) {
  .story-page .story-fullscreen {
    margin-top: clamp(46px, 12vh, 60px) !important;
  }

  .story-page .story-full-copy > h1,
  html[lang="th"] body .story-page .story-full-copy > h1,
  html[lang="en"] body .story-page .story-full-copy > h1,
  html[lang="ja"] body .story-page .story-full-copy > h1 {
    font-size: var(--story-heading-size, clamp(30px, 5vw, 44px)) !important;
    line-height: 1.22 !important;
    margin-bottom: clamp(14px, 3.5vh, 22px) !important;
    white-space: nowrap !important;
    text-wrap: nowrap !important;
  }
}

/* Keep this final override last: desktop-like composition on phone landscape. */
@media (orientation: landscape) and (max-height: 560px) {
  html, body:has(> .story-page) { height: 100svh !important; min-height: 100svh !important; overflow: hidden !important; }
  .story-page .site-header .brand-mark,
  .story-page .site-header .brand-mark img { width: auto !important; height: min(60px, 16svh) !important; max-height: 60px !important; object-fit: contain !important; }
  body > .story-page { display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; height: 100svh !important; min-height: 0 !important; overflow: hidden !important; }
  .story-page .story-fullscreen { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; overflow: hidden !important; }
  .story-page .story-full-copy { position: relative !important; z-index: 2 !important; display: grid !important; grid-template-rows: auto minmax(0, 1fr) auto !important; width: 75% !important; height: 100% !important; min-height: 0 !important; padding: 8px 12px 8px 20px !important; overflow: hidden !important; }
  .story-page .story-full-copy > h1,
  html[lang="th"] body .story-page .story-full-copy > h1,
  html[lang="en"] body .story-page .story-full-copy > h1,
  html[lang="ja"] body .story-page .story-full-copy > h1 { width: 100% !important; max-width: none !important; margin: 0 0 8px !important; font-size: var(--story-heading-size, clamp(28px, 5vw, 44px)) !important; line-height: 1.15 !important; text-align: center !important; white-space: nowrap !important; }
  .story-page .story-full-lead { width: 100% !important; max-width: none !important; min-height: 0 !important; height: auto !important; padding: 3px 8px 10px !important; margin: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-width: none !important; }
  .story-page .story-full-lead::-webkit-scrollbar { display: none !important; }
  .story-page .story-full-lead p { margin: 0 0 .7em !important; font-size: clamp(10px, 1.65vw, 14px) !important; line-height: 1.45 !important; }
  .story-page .hero-actions { width: 100% !important; max-width: none !important; min-height: 30px !important; margin: 5px 0 0 !important; padding: 0 !important; justify-self: stretch !important; }
  .story-page .story-full-character { position: absolute !important; z-index: 3 !important; right: 0 !important; bottom: -8px !important; left: auto !important; width: 25% !important; height: calc(100% - 4px) !important; max-height: none !important; margin: 0 !important; object-fit: contain !important; object-position: right bottom !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(18px) !important; }
  .story-page.story-character-revealed .story-full-character { opacity: 1 !important; visibility: visible !important; transform: none !important; }
}

/* Reserve scroll-end space so the closing quote stops above the mascot. */
@media (orientation: portrait) {
  .story-page .story-full-lead {
    box-sizing: border-box !important;
    padding-bottom: clamp(190px, 34svh, 390px) !important;
  }
}

/* Keep the story navigation identical to every inner page. */
@media (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
  .mikawa-journal .site-header {
    height: 104px !important;
    min-height: 104px !important;
    overflow: visible !important;
  }

  .story-page .site-header .brand-mark,
  .story-page .site-header .brand-mark img {
    width: 142px !important;
    height: auto !important;
    max-height: none !important;
  }
}