@charset "UTF-8";

html { scrollbar-gutter: stable; --navigation-opacity: 1; }
html.js { scroll-behavior: auto; }
.is-navigating { overflow-anchor: none; }
.site-header nav a[aria-current="location"] { color: var(--paper); }
/* Passing a chapter during a menu jump is not a request to replay its scene. */
.is-navigating .chapter.is-current { animation: none; }
.chapter.is-current.skip-navigation-entry { animation: none; }
.is-navigating .reveal-ready { opacity: 1; translate: none; transition: none; }
/* One scalar fades content, never its layout or the navigation siblings. */
.navigation-fade .hero > *,
.navigation-fade .story-backdrop,
.navigation-fade .story-topline,
.navigation-fade .story-media,
.navigation-fade .story-copy,
.navigation-fade .exploration,
.navigation-fade main > section:not(.hero):not(.story) > *,
.navigation-fade .end-note > div { opacity: var(--navigation-opacity, 1) !important; }
.navigation-notice { position: fixed; z-index: 30; left: var(--gutter); bottom: 12px; max-width: min(420px, 85vw); padding: 10px 14px; background: #151719f5; border: 1px solid var(--line); color: var(--paper); font-size: 12px; line-height: 1.6; }
.navigation-notice[hidden] { display: none; }
.story-media { position: absolute; inset: 0; z-index: 1; }
.detail-frame, .cabin-frame { clip-path: none; }
.visual-frame { will-change: auto; }
.chapter.is-current { animation: chapter-enter .42s ease-out both; }
@keyframes chapter-enter {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}
.finish-choice, .detail-point, .detail-toggle, .detail-pagination button,
.motion-toggle, .close-notes, .close-detail {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.close-notes:hover, .close-detail:hover { background: #c0d7d713; }
.finish-choice:active, .detail-point:active { border-color: #fff; }
dialog { margin: auto; overflow: auto; overscroll-behavior: contain; }
.detail-pagination { flex-wrap: wrap; }
.detail-pagination button { padding: 0 3px; }
.reveal-ready { opacity: 0; translate: 0 14px; transition: opacity .6s ease, translate .6s ease; }
.reveal-ready.is-revealed { opacity: 1; translate: 0 0; }
.end-actions a, .text-link { overflow-wrap: anywhere; }

/* A short viewport or enlarged text uses an ordinary, scrollable reading layout.
   The same chapter links and exterior controls operate without a fixed-height trap. */
.reading-layout .site-header {
  position: relative; height: auto; min-height: 0; display: flex;
  flex-wrap: wrap; gap: 12px 24px; padding: 14px var(--gutter);
}
.reading-layout .site-header nav { flex-wrap: wrap; gap: 0 18px; justify-content: flex-start; }
.reading-layout .hero { min-height: 0; height: auto; max-height: none; padding-bottom: 28px; }
.reading-layout .hero-copy { padding-top: 32px; margin-right: var(--gutter); max-width: calc(100% - 2 * var(--gutter)); }
.reading-layout .hero h1 { overflow-wrap: anywhere; }
.reading-layout .hero-car-wrap { position: relative; inset: auto; width: 96%; margin: 8px 2%; }
.reading-layout .hero-car { transform: none; }
.reading-layout .hero-footer { position: relative; inset: auto; margin: 0 var(--gutter); gap: 15px; flex-wrap: wrap; }
.reading-layout .hero-footer p { flex-wrap: wrap; }
.reading-layout .story { height: auto; }
.reading-layout .story-backdrop { overflow: hidden; }
html:not(.js) .story-backdrop { overflow: hidden; }
.reading-layout .story-stage {
  position: relative; height: auto; min-height: 0; overflow: visible;
  padding: 30px var(--gutter); display: flex; flex-direction: column; gap: 28px;
}
.reading-layout .story-topline { position: relative; inset: auto; order: 0; gap: 20px; flex-wrap: wrap; }
.reading-layout .story-copy { position: relative; inset: auto; width: 100%; max-width: none; order: 1; }
.reading-layout .chapter { position: relative; inset: auto; width: 100%; transform: none !important; }
.reading-layout .chapter:not(.is-current) { display: none; }
.reading-layout .chapter-description { max-width: 42em; }
.reading-layout .chapter h2 { overflow-wrap: anywhere; }
.reading-layout .story-media { position: relative; inset: auto; height: clamp(250px,65vw,430px); order: 2; }
.reading-layout .story-visual, .reading-layout .hotspot-layer { inset: 0; }
.reading-layout .story-car { width: min(96%,645px); left: 50%; right: auto; bottom: 0; translate: -50% 0; transform-origin: 50% 50%; }
.reading-layout .story-shadow { left: 22%; width: 56%; }
.reading-layout .detail-frame, .reading-layout .cabin-frame { inset: 0; mask-image: none; -webkit-mask-image: none; }
.reading-layout .image-shade { background: linear-gradient(0deg,#12171980,transparent 35%); }
.reading-layout .image-coordinate { bottom: 5px; right: 0; max-width: 100%; }
.reading-layout .coordinate-text { overflow-wrap: anywhere; }
.reading-layout .exploration { position: relative; inset: auto; width: 100%; order: 3; }
.reading-layout .story-bottomline { position: relative; inset: auto; order: 4; display: block; }
.reading-layout .chapter-nav { flex-wrap: wrap; justify-content: space-between; gap: 10px 18px; }
.reading-layout .story-progress { display: none; }
.reading-layout .story-visual { mask-image: none; -webkit-mask-image: none; }
.reading-layout .story-topline .visual-label { max-width: 100%; }
.reading-layout .point-caption { display: none; }
.reading-layout .detail-image { height: min(180px,30svh); }
.reading-layout dialog { max-height: calc(100svh - 24px); max-width: calc(100% - 24px); padding: 18px; overflow-wrap: anywhere; }
.reading-layout dialog h2 { overflow-wrap: anywhere; }
.reading-layout .close-notes, .reading-layout .close-detail { flex: 0 0 44px; }
.reading-layout .finish-heading, .reading-layout .finish-actions { flex-wrap: wrap; }

@media (max-width:600px) and (min-height:580px) and (max-height:740px) {
  .hero-copy { padding-top: 140px; }
  .hero h1 { font-size: 45px; margin-top: 18px; }
  .hero-description { margin-top: 14px; line-height: 1.6; }
  .explore { margin-top: 14px; }
}

@media (prefers-reduced-motion:reduce) {
  .chapter.is-current { animation: none; }
  .reveal-ready { opacity: 1; translate: none; transition: none; }
  .finish-choice, .detail-point, .detail-toggle, .detail-pagination button,
  .motion-toggle, .close-notes, .close-detail { transition: none; }
}
html.reduced-motion .chapter.is-current { animation: none; }
html.reduced-motion .reveal-ready { opacity: 1; translate: none; transition: none; }
html.reduced-motion .finish-choice, html.reduced-motion .detail-point,
html.reduced-motion .detail-toggle, html.reduced-motion .detail-pagination button,
html.reduced-motion .motion-toggle, html.reduced-motion .close-notes,
html.reduced-motion .close-detail { transition: none; }