/* Native continuous scroll; only anchor navigation uses smooth scrolling. */
html { scroll-snap-type: none; scroll-behavior: smooth; }
.home-scene, .story-scene { scroll-snap-align: none; scroll-snap-stop: normal; }
.home-scene { position: relative; isolation: isolate; overflow: clip; }
.home-scene .wallpaper, .home-scene .wash, .home-scene .petals { position: absolute; }
.home-scene .page { position: relative; }
.story-cue { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--rose); font-size: 9px; letter-spacing: 2px; padding: 6px 14px; border-radius: 30px; }
.story-cue svg { width: 17px; height: 17px; transition: transform .3s ease; }
.story-cue:hover svg { transform: translateY(3px); }
.story-scene { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 100svh; overflow: clip; background: #8791a4; color: #fff5ee; padding: 100px max(7.8vw, 32px); }
.story-landscape, .story-shade { position: absolute; inset: 0; pointer-events: none; }
.story-landscape { z-index: -2; overflow: hidden; background: #8791a4; }
.story-frame { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.1s ease, visibility 0s 1.1s; }
.story-frame.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.story-frame::before { content: ""; position: absolute; inset: -40px; background: var(--story-image) center / cover; filter: blur(28px); opacity: .45; }
.story-art { position: relative; display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; object-position: center; transform: none; }
.story-shade { z-index: -1; background: linear-gradient(90deg, rgba(32,40,57,.47), rgba(44,48,65,.24) 40%, rgba(39,45,60,.02) 71%), linear-gradient(0deg, rgba(30,35,49,.33), transparent 36%), linear-gradient(180deg, rgba(243,231,234,.30), transparent 23%); }
/* Both scenes share one viewport canvas: no horizontal edge between chapters. */
.story-animated .home-scene, .story-animated .story-scene { isolation: auto; overflow: visible; }
.story-animated .story-scene { background: transparent; }
.story-animated .home-scene .wallpaper, .story-animated .home-scene .wash, .story-animated .home-scene .petals { position: fixed; opacity: calc(1 - var(--story-blend, 0)); }
.story-animated .story-landscape, .story-animated .story-shade { position: fixed; opacity: var(--story-blend, 0); }
.story-back { position: absolute; top: clamp(24px, 4.5svh, 64px); left: max(5vw, 22px); display: flex; align-items: center; gap: 10px; color: #fff5ef; font-size: 11px; letter-spacing: 3px; padding: 12px 15px; border: 1px solid rgba(255,245,239,.36); border-radius: 40px; background: rgba(76,83,102,.16); backdrop-filter: blur(10px); transition: background .25s; }
.story-back:hover { background: rgba(76,83,102,.35); }
.story-back svg { width: 15px; height: 15px; }
.story-content { position: relative; width: min(52%, 950px); padding-block: 24px; margin-top: -3svh; text-shadow: 0 2px 18px rgba(31,38,54,.22); }
.story-heading { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(24px, 5svh, 65px); }
.story-heading h2 { color: #f5e4e4; font-size: clamp(15px, 1.35vw, 30px); font-weight: 400; letter-spacing: .38em; line-height: 1.8; margin: 0; }
.story-rule { width: clamp(24px, 3vw, 64px); height: 1px; background: rgba(255,239,234,.6); }
.story-spark { color: #f1d3d8; font-family: Georgia, serif; font-size: clamp(25px, 2.3vw, 46px); font-weight: 400; }
.story-caption { margin: 0; font-family: "Songti SC", "Noto Serif CJK SC", "SimSun", serif; font-size: clamp(28px, 3.1vw, 66px); line-height: 1.85; font-weight: 400; letter-spacing: .10em; color: #fff7f0; }
.story-line { display: block; }
.story-scene { touch-action: pan-y pinch-zoom; }
.story-slides { display: grid; }
.story-slide { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-18px); transition: opacity .65s ease, transform .85s cubic-bezier(.22,1,.36,1), visibility 0s .65s; }
.story-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); transition-delay: 0s; }
.story-caption--sea { position: relative; font-size: clamp(23px, 2.25vw, 48px); line-height: 1.95; letter-spacing: .065em; }
.sea-preface { font-size: .57em; letter-spacing: .20em; margin-bottom: 14px; }
.sea-line { width: fit-content; max-width: 100%; color: #f3fbff; background: linear-gradient(105deg, #fff7ef 12%, #c0e3eb 36%, #fffef9 52%, #b5dfea 68%, #fff7ef 88%); background-size: 240% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 2px 22px rgba(189,224,238,.18); }
.story-animated .is-visible .story-slide.is-active .sea-line { animation: tide-reveal 2.7s cubic-bezier(.18,.65,.25,1) both, sea-glimmer 4s ease-out both; }
.story-animated .is-visible .story-slide.is-active .sea-line:nth-child(2) { animation-delay: .24s; }
.story-animated .is-visible .story-slide.is-active .sea-line:nth-child(3) { animation-delay: .5s; }
.story-caption--sea::after { content: ""; position: absolute; left: 0; bottom: -27px; width: min(74%, 350px); height: 8px; border-bottom: 1px solid rgba(222,247,250,.5); border-radius: 50%; opacity: 0; pointer-events: none; }
.story-animated .is-visible .story-slide.is-active .story-caption--sea::after { animation: sea-ripple 3.2s .45s ease-out both; }
.story-controls { position: absolute; z-index: 1; bottom: clamp(26px, 4.8svh, 54px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 15px; padding: 5px 9px; border: 1px solid rgba(243,245,250,.3); border-radius: 40px; background: rgba(72,83,105,.17); backdrop-filter: blur(14px); box-shadow: 0 8px 32px rgba(32,41,60,.07); }
.story-arrow, .story-dot { display: grid; place-items: center; position: relative; width: 44px; height: 44px; padding: 0; border-radius: 50%; color: #fff6ef; }
.story-arrow { transition: background .25s ease, color .25s ease; }
.story-arrow:hover { background: rgba(236,245,251,.14); color: #fff; }
.story-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.story-dots { display: flex; align-items: center; gap: 0; }
.story-dot { width: 34px; }
.story-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(238,241,247,.43); transition: background .35s ease, box-shadow .35s ease; }
.story-dot[aria-pressed="true"]::before { background: #fff3e9; box-shadow: 0 0 0 5px rgba(244,238,236,.11), 0 0 18px rgba(220,241,255,.42); }
.story-arrow:focus-visible, .story-dot:focus-visible { outline: 1px solid #edf8ff; outline-offset: 1px; }
.story-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes tide-reveal {
  0% { opacity: 0; filter: blur(7px); transform: translateY(16px); clip-path: polygon(0 115%,12% 107%,25% 115%,38% 107%,50% 115%,63% 107%,75% 115%,88% 107%,100% 115%,100% 130%,0 130%); }
  32% { opacity: .7; filter: blur(2px); clip-path: polygon(0 59%,12% 48%,25% 58%,38% 45%,50% 54%,63% 43%,75% 55%,88% 45%,100% 54%,100% 130%,0 130%); }
  72% { opacity: 1; filter: blur(.4px); clip-path: polygon(0 8%,12% -4%,25% 5%,38% -8%,50% 4%,63% -8%,75% 4%,88% -7%,100% 3%,100% 130%,0 130%); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); clip-path: polygon(0 -20%,12% -28%,25% -20%,38% -28%,50% -20%,63% -28%,75% -20%,88% -28%,100% -20%,100% 130%,0 130%); }
}
@keyframes sea-glimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes sea-ripple { 0% { opacity: 0; transform: translateY(-7px) scaleX(.35); } 38% { opacity: .65; } 100% { opacity: .22; transform: translateY(0) scaleX(1); } }
.story-corner { position: absolute; width: clamp(30px, 5vw, 80px); height: clamp(30px, 5vw, 80px); pointer-events: none; opacity: .45; }
.story-corner-top { top: 5%; right: 4%; border-top: 1px solid #f9ece6; border-right: 1px solid #f9ece6; }
.story-corner-bottom { bottom: 6%; left: 4%; border-bottom: 1px solid #f9ece6; border-left: 1px solid #f9ece6; }
.story-animated .story-heading, .story-animated .story-line { opacity: 0; transform: translateY(22px); filter: blur(5px); transition: opacity 1.1s ease, transform 1.3s cubic-bezier(.22,1,.36,1), filter 1.1s ease; }
.story-animated .is-visible .story-heading, .story-animated .is-visible .story-slide.is-active .story-line { opacity: 1; transform: translateY(0); filter: blur(0); }
.story-animated .is-visible .story-slide.is-active .story-line:first-child { transition-delay: .17s; }
.story-animated .is-visible .story-slide.is-active .story-line:last-child { transition-delay: .40s; }
@media (max-width: 760px) {
  .story-cue { position: static; transform: none; align-self: center; margin: 0 0 18px; padding: 7px 18px; font-size: 9px; }
  .story-scene { align-items: flex-start; padding: max(18svh, 110px) 8vw 90px; }
  .story-content { width: 100%; margin: 0; padding: 0; }
  .story-heading { margin-bottom: 22px; gap: 12px; }
  .story-heading h2 { font-size: 16px; }
  .story-caption { font-size: clamp(22px, 6vw, 35px); letter-spacing: .06em; line-height: 1.9; }
  .story-caption--sea { font-size: clamp(19px, 5.15vw, 31px); letter-spacing: .035em; }
  .sea-preface { font-size: .64em; margin-bottom: 9px; }
  .story-frame--sea .story-art { object-position: center 60%; }
  .story-controls { gap: 10px; bottom: 27px; }
  .story-shade { background: linear-gradient(180deg, rgba(34,43,63,.30), rgba(38,44,61,.10) 35%, transparent 55%, rgba(30,35,49,.22)), linear-gradient(90deg, rgba(36,43,60,.20), transparent 85%); }
  .story-back { top: 24px; font-size: 10px; }
}
@media (min-width: 761px) and (max-height: 600px) {
  .story-scene { padding-block: 80px 60px; }
  .story-content { margin-top: 0; }
  .story-heading { margin-bottom: 14px; }
  .story-caption { font-size: clamp(26px, 4.8svh, 42px); }
  .story-caption--sea { font-size: clamp(22px, 4.2svh, 34px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  .story-animated .story-heading, .story-animated .story-line { opacity: 1; transform: none; filter: none; transition: none; }
  .story-art { transform: none; }
  .story-frame, .story-slide { transition: none; }
  .story-animated .is-visible .story-slide.is-active .sea-line, .story-animated .is-visible .story-slide.is-active .story-caption--sea::after { animation: none; clip-path: none; }
}

/* Academy chapter: ivory paper, collegiate ink and a quiet ribbon bookmark. */
.story-slide--academy:not(.is-active) { height: 0; min-height: 0; overflow: hidden; }
.story-scene:has(.story-slide--academy.is-active) .story-content { width: min(44%, 660px); margin-left: auto; text-shadow: none; }
.story-scene:has(.story-slide--academy.is-active) .story-heading { margin-bottom: 18px; }
.academy-folio { position: relative; padding: clamp(24px, 2.3vw, 42px); color: #363a46; border: 1px solid rgba(255,248,229,.82); border-radius: 2px 12px 12px 2px; background: linear-gradient(90deg, rgba(139,116,87,.10), transparent 18px), repeating-linear-gradient(0deg, transparent 0 31px, rgba(95,108,121,.055) 31px 32px), rgba(248,242,229,.94); box-shadow: 0 24px 80px rgba(25,30,43,.18), 5px 5px 0 -1px rgba(242,234,217,.45); transform-origin: left center; }
.academy-folio::before { content: ""; position: absolute; top: -1px; right: 28px; width: 19px; height: 43px; background: #6f354b; clip-path: polygon(0 0,100% 0,100% 100%,50% 80%,0 100%); }
.academy-meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 27px 22px 0; color: #77746a; font-size: 9px; letter-spacing: .18em; }
.academy-meta span:first-child { color: #6f354b; font-size: 11px; letter-spacing: .25em; }
.academy-copy { font-family: "Songti SC", "Noto Serif CJK SC", "SimSun", serif; font-size: clamp(14px, 1.03vw, 19px); line-height: 1.95; letter-spacing: .055em; }
.academy-line { margin: 0 0 .45em; }
.academy-intro { margin-bottom: .55em; color: #363548; font-size: clamp(21px, 1.65vw, 30px); line-height: 1.65; }
.academy-line:last-child { margin: .75em 0 0; padding-top: .8em; border-top: 1px solid rgba(111,53,75,.18); color: #6f354b; }
.academy-signature { display: flex; align-items: center; gap: 12px; margin-top: 22px; color: #6f354b; font-family: "SimSun", serif; font-size: 15px; }
.academy-signature i { width: 38px; height: 1px; background: rgba(111,53,75,.35); }
.academy-signature span:last-child { font-size: 19px; }
.academy-mobile-art { display: none; }
.story-animated .is-visible .story-slide--academy.is-active .academy-folio { animation: folio-open 1.2s cubic-bezier(.22,1,.36,1) both; }
.story-animated .is-visible .story-slide--academy.is-active .academy-line { animation: ink-reveal 1.5s cubic-bezier(.22,.65,.3,1) both; animation-delay: calc(.2s + var(--ink-order) * .16s); }
@keyframes folio-open { from { opacity: 0; transform: perspective(1100px) rotateY(-7deg) translateY(14px); filter: blur(2px); } to { opacity: 1; transform: perspective(1100px) rotateY(0) translateY(0); filter: blur(0); } }
@keyframes ink-reveal { from { opacity: 0; clip-path: inset(0 100% 0 0); filter: blur(2px); transform: translateY(4px); } to { opacity: 1; clip-path: inset(0 0 0 0); filter: blur(0); transform: translateY(0); } }
@media (max-width: 760px) {
  .story-scene:has(.story-slide--academy.is-active) { display: block; padding: 90px 7vw 112px; }
  .story-scene:has(.story-slide--academy.is-active) .story-content { width: 100%; margin: 0; }
  .story-scene:has(.story-slide--academy.is-active) .story-heading { margin-bottom: 16px; }
  .academy-folio { padding: 22px 20px; }
  .academy-meta { margin-bottom: 15px; font-size: 8px; }
  .academy-folio::before { right: 20px; width: 15px; height: 35px; }
  .academy-copy { font-size: 13px; line-height: 1.85; letter-spacing: .035em; }
  .academy-intro { font-size: 20px; }
  .academy-signature { margin-top: 15px; }
  .academy-mobile-art { display: block; width: 100%; height: auto; margin-top: 20px; border: 1px solid rgba(248,242,229,.45); border-radius: 3px; }
  .story-frame--academy .story-art { display: none; }
}
@media (min-width: 761px) and (max-height: 650px) {
  .story-scene:has(.story-slide--academy.is-active) { padding-top: 65px; padding-bottom: 110px; }
  .story-scene:has(.story-slide--academy.is-active) .story-content { margin-top: 0; padding-block: 0; }
  .story-scene:has(.story-slide--academy.is-active) .story-heading { margin-bottom: 10px; }
  .academy-folio { padding: 20px 26px; }
  .academy-meta { margin-bottom: 12px; }
  .academy-copy { font-size: 13px; line-height: 1.8; }
  .academy-intro { font-size: 21px; }
  .academy-signature { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-animated .is-visible .story-slide--academy.is-active .academy-folio,
  .story-animated .is-visible .story-slide--academy.is-active .academy-line { animation: none; opacity: 1; clip-path: none; filter: none; transform: none; }
}

/* Japan chapter: a quiet travel letter, vertical title and vermilion seal. */
.story-slide--japan:not(.is-active) { height: 0; min-height: 0; overflow: hidden; }
.story-scene:has(.story-slide--japan.is-active) .story-content { width: min(47%, 710px); text-shadow: none; }
.story-scene:has(.story-slide--japan.is-active) .story-heading { margin-bottom: 18px; }
.japan-journal { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: clamp(18px, 1.6vw, 30px); padding: clamp(24px, 2.1vw, 40px); color: #394350; border: 1px solid rgba(244,237,220,.65); border-radius: 1px; background: radial-gradient(ellipse at 0 0, rgba(241,226,201,.5), transparent 65%), repeating-linear-gradient(93deg, transparent 0 5px, rgba(132,112,90,.018) 5px 6px), rgba(243,239,226,.93); box-shadow: 0 20px 80px rgba(18,27,46,.2); }
.japan-journal::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(121,109,92,.13); pointer-events: none; }
.japan-rail { display: flex; flex-direction: column; align-items: center; gap: 17px; padding-right: 12px; border-right: 1px solid rgba(152,69,58,.2); }
.japan-sun { width: 13px; height: 13px; margin-top: 1px; border-radius: 50%; background: #a75147; opacity: .8; }
.japan-title { writing-mode: vertical-rl; font-family: "Yu Mincho", "Hiragino Mincho ProN", "SimSun", serif; font-size: 19px; letter-spacing: .3em; color: #704f4a; }
.japan-number { margin-top: auto; color: #a18c79; font-family: "SimSun", serif; font-size: 12px; }
.japan-entry { min-width: 0; }
.japan-meta { display: flex; justify-content: space-between; margin-bottom: 18px; color: #8b7e6e; font-family: "Yu Mincho", "SimSun", serif; font-size: 10px; letter-spacing: .25em; }
.japan-copy { font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif CJK SC", "SimSun", serif; font-size: clamp(14px, 1.02vw, 19px); line-height: 1.95; letter-spacing: .045em; }
.japan-line { margin: 0 0 .6em; }
.japan-intro { font-size: clamp(20px, 1.55vw, 29px); color: #334253; line-height: 1.75; margin-bottom: .4em; }
.japan-line:nth-child(2) { color: #96594e; }
.japan-line:last-child { margin-bottom: 0; }
.japan-colophon { display: flex; align-items: center; gap: 13px; margin-top: 17px; color: #887a6b; font-family: "SimSun", serif; font-size: 13px; }
.japan-colophon i { height: 1px; flex: 1; background: linear-gradient(90deg, rgba(145,112,96,.28), transparent); }
.japan-seal { display: grid; place-items: center; width: 28px; height: 30px; border: 1px solid #a75a4e; outline: 1px solid rgba(167,90,78,.24); outline-offset: -4px; color: #a75a4e; font-size: 15px; transform: rotate(-5deg); }
.japan-mobile-art { display: none; }
.story-animated .is-visible .story-slide--japan.is-active .japan-journal { animation: washi-unfold 1.35s cubic-bezier(.2,.7,.3,1) both; }
.story-animated .is-visible .story-slide--japan.is-active .japan-line { animation: sumi-bloom 1.8s cubic-bezier(.18,.6,.25,1) both; animation-delay: calc(.25s + var(--sumi-order) * .17s); }
.story-animated .is-visible .story-slide--japan.is-active .japan-seal { animation: seal-impression 1s 1.45s ease-out both; }
@keyframes washi-unfold { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(-8px); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); } }
@keyframes sumi-bloom {
  0% { opacity: 0; filter: blur(6px); transform: translateY(5px); clip-path: polygon(0 0,0 0,0 36%,0 76%,0 100%,0 100%); }
  45% { opacity: .8; filter: blur(1.5px); clip-path: polygon(0 0,74% 0,63% 36%,78% 76%,67% 100%,0 100%); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); clip-path: polygon(0 0,100% 0,100% 36%,100% 76%,100% 100%,0 100%); }
}
@keyframes seal-impression { from { opacity: 0; transform: rotate(-9deg) scale(1.16); filter: blur(2px); } to { opacity: 1; transform: rotate(-5deg) scale(1); filter: blur(0); } }
@media (max-width: 760px) {
  .story-scene:has(.story-slide--japan.is-active) { display: block; padding: 90px 7vw 112px; }
  .story-scene:has(.story-slide--japan.is-active) .story-content { width: 100%; margin: 0; }
  .story-scene:has(.story-slide--japan.is-active) .story-heading { margin-bottom: 16px; }
  .japan-journal { grid-template-columns: 22px minmax(0, 1fr); gap: 14px; padding: 22px 18px; }
  .japan-rail { padding-right: 8px; gap: 13px; }
  .japan-title { font-size: 16px; }
  .japan-sun { width: 10px; height: 10px; }
  .japan-meta { margin-bottom: 13px; font-size: 9px; }
  .japan-copy { font-size: 13px; line-height: 1.85; letter-spacing: .02em; }
  .japan-intro { font-size: 18px; }
  .japan-colophon { margin-top: 13px; }
  .japan-mobile-art { display: block; width: 100%; height: auto; margin-top: 20px; border: 1px solid rgba(244,237,220,.4); }
  .story-frame--japan .story-art { display: none; }
}
@media (min-width: 761px) and (max-height: 650px) {
  .story-scene:has(.story-slide--japan.is-active) { padding-top: 65px; padding-bottom: 110px; }
  .story-scene:has(.story-slide--japan.is-active) .story-content { margin-top: 0; padding-block: 0; }
  .story-scene:has(.story-slide--japan.is-active) .story-heading { margin-bottom: 10px; }
  .japan-journal { padding: 20px 24px; }
  .japan-meta { margin-bottom: 10px; }
  .japan-copy { font-size: 13px; line-height: 1.8; }
  .japan-intro { font-size: 20px; }
  .japan-colophon { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-animated .is-visible .story-slide--japan.is-active .japan-journal,
  .story-animated .is-visible .story-slide--japan.is-active .japan-line,
  .story-animated .is-visible .story-slide--japan.is-active .japan-seal { animation: none; opacity: 1; clip-path: none; filter: none; transform: none; }
}


/* Original-ratio canvas: the artwork determines height, never a viewport filler. */
.story-scene,
.story-animated .story-scene,
.story-scene:has(.story-slide--academy.is-active),
.story-scene:has(.story-slide--japan.is-active) {
  display: block; min-height: 0; padding: 0; isolation: isolate; overflow: visible;
}
.story-stage { position: relative; width: 100%; aspect-ratio: 1216 / 832; overflow: hidden; isolation: isolate; }
.story-stage .story-landscape,
.story-animated .story-stage .story-landscape { position: absolute; inset: 0; z-index: 0; opacity: 1; background: transparent; }
.story-stage .story-shade,
.story-animated .story-stage .story-shade { position: absolute; inset: 0; z-index: 3; opacity: 1; }
.story-stage .story-frame { opacity: 0; visibility: hidden; transition: none; animation: none; }
.story-stage .story-frame::before { content: none; }
.story-stage .story-art { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; transform: none; }
.story-stage .story-frame.is-previous { z-index: 1; opacity: 1; visibility: visible; animation: none; }
.story-stage .story-frame.is-active { z-index: 2; opacity: 1; visibility: visible; }
.story-scene .story-content { position: absolute; z-index: 4; top: 50%; left: 7.8%; width: min(52%, 950px); margin: 0; padding: 0; transform: translateY(-50%); }
.story-scene:has(.story-slide--academy.is-active) .story-content { left: auto; right: 7.8%; width: min(44%, 660px); margin: 0; }
.story-scene:has(.story-slide--japan.is-active) .story-content { left: 7.8%; right: auto; width: min(47%, 710px); margin: 0; }
.story-slide:not(.is-active) { height: 0; min-height: 0; overflow: hidden; }
.story-scene .story-status { margin: 0; bottom: 0; left: 0; }
.story-stage .story-back { z-index: 5; top: 4%; }
.story-stage .story-controls { z-index: 5; bottom: 3%; }
.story-scene { --page-hinge: left center; --page-angle: -78deg; --ink-origin: 22%; }
.story-scene[data-story-direction="previous"] { --page-hinge: right center; --page-angle: 78deg; --ink-origin: 78%; }
.story-animated .is-visible .story-stage .story-frame--journey.is-active { animation: journey-arrival 1.6s cubic-bezier(.2,.65,.25,1) both; }
.story-animated .is-visible .story-stage .story-frame--sea.is-active { animation: shore-arrival 1.8s cubic-bezier(.2,.65,.3,1) both; }
.story-animated .is-visible .story-stage .story-frame--academy.is-active { transform-origin: var(--page-hinge); animation: academy-arrival 1.45s cubic-bezier(.2,.7,.25,1) both; }
.story-animated .is-visible .story-stage .story-frame--japan.is-active { animation: japan-arrival 1.8s cubic-bezier(.2,.65,.25,1) both; }
@keyframes journey-arrival {
  0% { opacity: 0; filter: blur(16px) brightness(1.18); }
  45% { opacity: .8; filter: blur(4px) brightness(1.06); }
  100% { opacity: 1; filter: blur(0) brightness(1); }
}
@keyframes shore-arrival {
  0% { clip-path: polygon(0 108%,12% 103%,25% 109%,38% 102%,50% 108%,63% 103%,75% 109%,88% 102%,100% 108%,100% 115%,0 115%); filter: brightness(1.16); }
  45% { clip-path: polygon(0 48%,12% 42%,25% 49%,38% 42%,50% 48%,63% 43%,75% 49%,88% 42%,100% 48%,100% 115%,0 115%); filter: brightness(1.05); }
  100% { clip-path: polygon(0 -12%,12% -18%,25% -11%,38% -18%,50% -12%,63% -17%,75% -11%,88% -18%,100% -12%,100% 115%,0 115%); filter: brightness(1); }
}
@keyframes academy-arrival {
  0% { transform: perspective(2200px) rotateY(var(--page-angle)); filter: brightness(1.3); opacity: .15; }
  55% { filter: brightness(1.06); opacity: 1; }
  100% { transform: perspective(2200px) rotateY(0deg); filter: brightness(1); opacity: 1; }
}
@keyframes japan-arrival {
  0% { clip-path: circle(0% at var(--ink-origin) 48%); filter: blur(12px) saturate(.55); }
  45% { clip-path: circle(48% at var(--ink-origin) 48%); filter: blur(3px) saturate(.8); }
  100% { clip-path: circle(145% at var(--ink-origin) 48%); filter: blur(0) saturate(1); }
}
@media (max-width: 1000px) {
  .story-scene .story-content,
  .story-scene:has(.story-slide--academy.is-active) .story-content,
  .story-scene:has(.story-slide--japan.is-active) .story-content {
    position: relative; top: auto; left: auto; right: auto; width: 100%; margin: 0;
    padding: 25px 7vw 34px; transform: none; background: #343e52;
  }
  .story-scene:has(.story-slide--sea.is-active) .story-content { background: #384a60; }
  .story-scene:has(.story-slide--academy.is-active) .story-content { background: #f2ecdf; }
  .story-scene:has(.story-slide--japan.is-active) .story-content { background: #e9e5d9; }
  .story-scene:has(.story-slide--academy.is-active) .story-heading h2,
  .story-scene:has(.story-slide--japan.is-active) .story-heading h2 { color: #704f4a; }
  .story-scene:has(.story-slide--academy.is-active) .story-rule,
  .story-scene:has(.story-slide--japan.is-active) .story-rule { background: #b89e8c; }
  .story-scene:has(.story-slide--academy.is-active) .story-spark,
  .story-scene:has(.story-slide--japan.is-active) .story-spark { color: #a75147; }
  .story-stage .story-shade { background: linear-gradient(0deg, rgba(30,35,49,.2), transparent 26%); }
  .story-stage .story-back { top: 12px; left: 14px; padding: 8px 11px; font-size: 9px; letter-spacing: 2px; }
  .story-stage .story-controls { bottom: 12px; padding: 0 6px; gap: 6px; }
  .story-stage .story-arrow { width: 36px; }
  .story-stage .story-dot { width: 30px; }
  .story-heading { margin-bottom: 17px; }
  .story-caption--sea::after { bottom: -15px; }
  .academy-folio, .japan-journal { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .story-animated .is-visible .story-stage .story-frame.is-active { animation: none; opacity: 1; clip-path: none; filter: none; transform: none; }
}


/* Story typography v1.14: quiet margins, readable ink, one locally served serif. */
@font-face {
  font-family: "Shang Story Serif";
  src: url("./assets/fonts/shang-story-serif.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}
.story-scene {
  --story-serif: "Shang Story Serif", "Noto Serif SC", "Songti SC", "SimSun", serif;
  --story-body-size: clamp(16px, 1.08vw, 21px);
  --story-label: #f4dcd6;
}
.story-scene .story-heading { gap: 14px; margin-bottom: clamp(20px, 2.1vw, 38px); text-shadow: 0 1px 10px rgba(21,32,48,.4); }
.story-scene .story-heading h2 { font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: clamp(13px, .9vw, 18px); line-height: 1.7; font-weight: 500; letter-spacing: .25em; color: var(--story-label); }
.story-scene .story-rule { width: clamp(26px, 2.7vw, 52px); background: var(--story-label); opacity: .55; }
.story-scene .story-spark { font-size: clamp(22px, 1.8vw, 32px); color: var(--story-label); }
.story-scene .story-caption,
.story-scene .academy-copy,
.story-scene .japan-copy,
.story-scene .japan-title { font-family: var(--story-serif); }
.story-scene .story-caption { font-weight: 500; line-height: 1.8; letter-spacing: .035em; text-shadow: 0 2px 18px rgba(13,27,46,.45); }
.story-scene:has(.story-slide--journey.is-active) .story-content { top: 43%; left: 6%; right: auto; width: min(42%, 900px); }
.story-slide--journey .story-caption { font-size: clamp(30px, 2.7vw, 62px); color: #fff9ef; }
.story-slide--journey .story-line:first-child { margin-bottom: .6em; font-size: .58em; line-height: 1.6; letter-spacing: .14em; color: #f2dcd4; }
.story-scene:has(.story-slide--journey.is-active) .story-shade { background: linear-gradient(90deg, rgba(26,39,59,.48), rgba(31,43,62,.18) 40%, transparent 65%); }
.story-scene:has(.story-slide--sea.is-active) .story-content { top: 56%; left: 6%; right: auto; width: min(42%, 850px); }
.story-scene:has(.story-slide--sea.is-active) { --story-label: #dfedf0; }
.story-scene .story-caption--sea { font-size: clamp(24px, 2.05vw, 47px); line-height: 1.85; letter-spacing: .025em; }
.story-scene .sea-line { background-image: linear-gradient(105deg, #fffaf0 12%, #d0edf2 36%, #fffdf6 52%, #c7e6ed 68%, #fffaf0 88%); text-shadow: 0 2px 15px rgba(10,29,47,.28); }
.story-scene .sea-preface { font-size: .62em; letter-spacing: .16em; margin-bottom: 12px; }
.story-scene:has(.story-slide--sea.is-active) .story-shade { background: radial-gradient(ellipse at 18% 55%, rgba(19,39,58,.52), rgba(24,43,63,.20) 38%, transparent 65%); }
.story-scene:has(.story-slide--academy.is-active) .story-content { top: 50%; left: auto; right: 5%; width: min(37%, 700px); }
.story-scene:has(.story-slide--academy.is-active) .story-heading,
.story-scene:has(.story-slide--japan.is-active) .story-heading { margin-bottom: 18px; }
.story-scene:has(.story-slide--academy.is-active) { --story-label: #fff1da; }
.story-scene:has(.story-slide--academy.is-active) .story-shade { background: linear-gradient(270deg, rgba(27,35,42,.26), transparent 60%); }
.story-scene .academy-folio {
  padding: clamp(24px, 2vw, 38px); color: #283448; border-color: rgba(255,250,237,.76);
  background: linear-gradient(90deg, rgba(123,92,64,.07), transparent 16px), rgba(250,245,232,.96);
  box-shadow: 0 14px 52px rgba(23,29,42,.16), 4px 4px 0 -1px rgba(245,236,216,.38);
}
.story-scene .academy-copy { font-size: var(--story-body-size); line-height: 1.9; font-weight: 400; letter-spacing: .015em; }
.story-scene .academy-line { margin: 0 0 .62em; }
.story-scene .academy-intro { font-size: clamp(22px, 1.65vw, 31px); line-height: 1.7; font-weight: 600; color: #2d354a; margin-bottom: .55em; }
.story-scene .academy-line:last-child { margin: .9em 0 0; padding-top: .9em; color: #754256; border-top-color: rgba(117,66,86,.19); }
.story-scene .academy-meta { margin-bottom: 18px; font-size: 10px; letter-spacing: .12em; color: #6b675f; }
.story-scene .academy-meta span:first-child { font-size: 11px; color: #754256; }
.story-scene .academy-folio::before { background: #754256; }
.story-scene .academy-signature { margin-top: 18px; color: #754256; }
.story-scene:has(.story-slide--japan.is-active) .story-content { top: 51%; left: 5.5%; right: auto; width: min(38.5%, 720px); }
.story-scene:has(.story-slide--japan.is-active) { --story-label: #f7e4d5; }
.story-scene:has(.story-slide--japan.is-active) .story-shade { background: linear-gradient(90deg, rgba(23,36,56,.22), transparent 58%); }
.story-scene .japan-journal {
  grid-template-columns: 24px minmax(0, 1fr); gap: clamp(16px, 1.3vw, 26px); padding: clamp(24px, 1.9vw, 36px);
  color: #354554; border-color: rgba(250,242,221,.72);
  background: radial-gradient(ellipse at 0 0, rgba(238,221,190,.45), transparent 65%), repeating-linear-gradient(93deg, transparent 0 5px, rgba(118,98,78,.018) 5px 6px), rgba(248,244,231,.96);
  box-shadow: 0 14px 54px rgba(17,29,45,.17);
}
.story-scene .japan-rail { gap: 17px; padding-right: 10px; border-right-color: rgba(142,71,60,.22); }
.story-scene .japan-title { font-size: clamp(17px, 1.1vw, 21px); color: #75554b; letter-spacing: .23em; }
.story-scene .japan-copy { font-size: var(--story-body-size); line-height: 1.95; font-weight: 400; letter-spacing: .015em; }
.story-scene .japan-line { margin-bottom: .7em; }
.story-scene .japan-intro { font-size: clamp(21px, 1.6vw, 29px); line-height: 1.7; font-weight: 500; color: #2f4051; }
.story-scene .japan-line:nth-child(2) { color: #8e473c; }
.story-scene .japan-meta { margin-bottom: 16px; font-size: 11px; color: #7c7061; }
.story-scene .japan-colophon { margin-top: 18px; color: #796b5e; }
.story-scene .story-back { font-size: 12px; letter-spacing: .15em; }
@media (max-width: 1200px) {
  .story-scene { --story-body-size: 17px; }
  .story-scene .story-content,
  .story-scene:has(.story-slide--journey.is-active) .story-content,
  .story-scene:has(.story-slide--sea.is-active) .story-content,
  .story-scene:has(.story-slide--academy.is-active) .story-content,
  .story-scene:has(.story-slide--japan.is-active) .story-content {
    position: relative; top: auto; left: auto; right: auto; width: 100%; max-width: none; margin: 0;
    padding: clamp(28px, 5vw, 48px) max(6vw, calc((100% - 760px) / 2)); transform: none; background: #303e54;
  }
  .story-scene:has(.story-slide--sea.is-active) .story-content { background: #30495b; }
  .story-scene:has(.story-slide--academy.is-active) .story-content { background: #f2ecdf; }
  .story-scene:has(.story-slide--japan.is-active) .story-content { background: #ece7d9; }
  .story-scene:has(.story-slide--academy.is-active) { --story-label: #754256; }
  .story-scene:has(.story-slide--japan.is-active) { --story-label: #80564a; }
  .story-scene .story-heading { margin-bottom: 22px; text-shadow: none; }
  .story-scene:has(.story-slide--academy.is-active) .story-heading,
  .story-scene:has(.story-slide--japan.is-active) .story-heading { margin-bottom: 20px; }
  .story-scene .story-heading h2 { color: var(--story-label); font-size: 14px; }
  .story-scene .story-rule { background: var(--story-label); }
  .story-scene .story-spark { color: var(--story-label); }
  .story-slide--journey .story-caption { font-size: clamp(28px, 4vw, 42px); }
  .story-scene .story-caption--sea { font-size: clamp(24px, 3.2vw, 34px); }
  .story-scene .academy-folio, .story-scene .japan-journal { box-shadow: none; }
  .story-scene:has(.story-slide.is-active) .story-stage .story-shade { background: linear-gradient(0deg, rgba(21,35,49,.20), transparent 24%); }
}
@media (max-width: 600px) {
  .story-scene { --story-body-size: 16px; }
  .story-scene .story-content,
  .story-scene:has(.story-slide--journey.is-active) .story-content,
  .story-scene:has(.story-slide--sea.is-active) .story-content,
  .story-scene:has(.story-slide--academy.is-active) .story-content,
  .story-scene:has(.story-slide--japan.is-active) .story-content { padding: 28px 6vw 34px; }
  .story-slide--journey .story-caption { font-size: clamp(25px, 6.5vw, 34px); }
  .story-scene .story-caption--sea { font-size: clamp(21px, 5.4vw, 28px); line-height: 1.85; }
  .story-scene .story-heading { gap: 12px; }
  .story-scene .academy-folio { padding: 24px 20px; }
  .story-scene .japan-journal { grid-template-columns: 20px minmax(0, 1fr); gap: 13px; padding: 24px 18px; }
  .story-scene .japan-rail { padding-right: 8px; }
  .story-scene .academy-intro { font-size: 22px; }
  .story-scene .japan-intro { font-size: 21px; }
  .story-scene .academy-meta { margin-right: 18px; gap: 8px; font-size: 9px; }
  .story-scene .japan-meta { font-size: 10px; }
  .story-scene .story-back { font-size: 10px; }
}


/* Academy marginalia v1.16: keep the original title clear; notes sit at the foot. */
.story-scene:has(.story-slide--academy.is-active) .story-content {
  top: auto; bottom: 10%; left: 5%; right: 5%; width: 90%; max-width: none;
  margin: 0; padding: 0; transform: none; text-shadow: none;
}
.story-scene:has(.story-slide--academy.is-active) .story-heading { display: none; }
.story-scene:has(.story-slide--academy.is-active) .story-stage .story-shade { background: none; }
.story-scene .academy-folio {
  padding: clamp(23px, 1.8vw, 38px) clamp(28px, 2.3vw, 50px);
  border: 1px solid rgba(255,250,237,.72); border-top: 2px solid #8b6574;
  border-radius: 3px; background: rgba(249,245,234,.95);
  box-shadow: 0 12px 38px rgba(26,30,39,.16); transform-origin: center bottom;
}
.story-scene .academy-folio::before { content: none; }
.story-scene .academy-meta { margin: 0 0 16px; font-size: 10px; letter-spacing: .18em; color: #797369; }
.story-scene .academy-meta span:first-child { color: #805466; font-size: 11px; letter-spacing: .28em; }
.story-scene .academy-copy {
  display: grid; grid-template-columns: .95fr 1fr 1.1fr;
  grid-template-rows: auto auto; column-gap: clamp(25px, 3vw, 60px); row-gap: 8px;
  font-size: clamp(16px, 1.05vw, 20px); line-height: 1.85; letter-spacing: .015em;
}
.story-scene .academy-line { margin: 0; }
.story-scene .academy-line:nth-child(1) { grid-column: 1; grid-row: 1; }
.story-scene .academy-line:nth-child(2) { grid-column: 1; grid-row: 2; color: #805466; }
.story-scene .academy-line:nth-child(3) { grid-column: 2; grid-row: 1; }
.story-scene .academy-line:nth-child(4) { grid-column: 2; grid-row: 2; }
.story-scene .academy-line:nth-child(5) { grid-column: 3; grid-row: 1; }
.story-scene .academy-line:nth-child(6) { grid-column: 3; grid-row: 2; }
.story-scene .academy-intro { margin: 0; font-size: clamp(23px, 1.7vw, 34px); line-height: 1.55; font-weight: 500; color: #30394b; }
.story-scene .academy-line:last-child { margin: 0; padding: 0; border: 0; color: #805466; }
.story-scene .academy-signature { margin: 15px 0 0; font-size: 13px; color: #805466; }
.story-scene .academy-signature i { width: 32px; background: #b8a5a6; }
.story-scene .academy-signature span:last-child { font-size: 16px; }
.story-animated .is-visible .story-stage .story-frame--academy.is-active { animation: academy-dissolve 1.1s ease both; }
.story-animated .is-visible .story-slide--academy.is-active .academy-folio { animation: academy-note-rise .9s cubic-bezier(.2,.7,.25,1) both; }
.story-animated .is-visible .story-slide--academy.is-active .academy-line { animation: academy-ink-settle .75s ease both; animation-delay: calc(.12s + var(--ink-order) * .085s); }
@keyframes academy-dissolve { from { opacity: 0; filter: brightness(1.04); } to { opacity: 1; filter: brightness(1); } }
@keyframes academy-note-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes academy-ink-settle { from { opacity: 0; filter: blur(2px); transform: translateY(4px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@media (max-width: 1200px) {
  .story-scene:has(.story-slide--academy.is-active) .story-content {
    position: relative; top: auto; bottom: auto; left: auto; right: auto; width: 100%;
    padding: 30px 5vw 36px; background: #ede7db;
  }
  .story-scene .academy-folio { box-shadow: none; }
}
@media (max-width: 800px) {
  .story-scene .academy-copy { display: block; font-size: 16px; line-height: 1.95; }
  .story-scene .academy-line { margin-bottom: .8em; }
  .story-scene .academy-intro { font-size: 23px; line-height: 1.7; }
  .story-scene .academy-line:last-child { margin-top: 1em; padding-top: 1em; border-top: 1px solid #d9cbd0; }
  .story-scene .academy-folio { padding: 24px; }
  .story-scene .academy-meta { font-size: 9px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-animated .is-visible .story-stage .story-frame--academy.is-active,
  .story-animated .is-visible .story-slide--academy.is-active .academy-folio,
  .story-animated .is-visible .story-slide--academy.is-active .academy-line { animation: none; opacity: 1; filter: none; transform: none; clip-path: none; }
}