/* The picture leads; each story is a small, optional annotation. */
#story { --reading-ink: #e9e7df; --reading-glass: rgba(44,57,76,.72); --reading-edge: rgba(225,229,231,.35); --reading-accent: #e4cfc3; }
#story:has(.story-slide--sea.is-active) { --reading-ink: #e6f1ef; --reading-glass: rgba(40,67,82,.77); --reading-edge: rgba(202,227,231,.4); --reading-accent: #bcdde1; }
#story:has(.story-slide--academy.is-active) { --reading-ink: #eae1ce; --reading-glass: rgba(47,54,53,.82); --reading-edge: rgba(220,205,170,.4); --reading-accent: #cebb96; }
#story:has(.story-slide--student.is-active) { --reading-ink: #e8dfcf; --reading-glass: rgba(27,43,67,.85); --reading-edge: rgba(219,199,162,.4); --reading-accent: #d5b6b8; }
#story:has(.story-slide--japan.is-active) { --reading-ink: #ece2d5; --reading-glass: rgba(48,55,76,.78); --reading-edge: rgba(221,198,182,.42); --reading-accent: #dbb3ac; }
.reading-screenreader-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.story-reading-buttons { position: absolute; z-index: 6; left: 50%; bottom: calc(3% + 65px); transform: translateX(-50%); }
.story-reading-button { display: none; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 8px 17px; border: 1px solid var(--reading-edge); border-radius: 24px; background: var(--reading-glass); color: var(--reading-ink); backdrop-filter: blur(12px); font: 12px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif; letter-spacing: .08em; white-space: nowrap; cursor: pointer; transition: background .3s, border-color .3s; }
#story:has(.story-slide--journey.is-active) [data-story-disclosure="0"],
#story:has(.story-slide--sea.is-active) [data-story-disclosure="1"],
#story:has(.story-slide--academy.is-active) [data-story-disclosure="2"],
#story:has(.story-slide--student.is-active) [data-story-disclosure="3"],
#story:has(.story-slide--japan.is-active) [data-story-disclosure="4"] { display: flex; }
.reading-mark { width: 17px; height: 17px; fill: none; stroke: var(--reading-accent); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.reading-action { padding-left: 12px; border-left: 1px solid var(--reading-edge); font-size: 11px; }
.reading-chevron { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.3; transition: transform .4s; }
.story-reading-button[aria-expanded="true"] .reading-chevron { transform: rotate(180deg); }
.story-reading-button:hover { border-color: var(--reading-accent); }
.story-reading-button:focus-visible, .story-reading-close:focus-visible { outline: 2px solid var(--reading-accent); outline-offset: 3px; }
[data-story-disclosure="2"] { border-radius: 3px 12px 12px 3px; border-left: 2px solid var(--reading-accent); }
[data-story-disclosure="3"] { border-radius: 7px; }
[data-story-disclosure="4"] { border-radius: 3px; }
#story .story-controls { color: var(--reading-ink); background: var(--reading-glass); border-color: var(--reading-edge); box-shadow: none; }
#story .story-arrow { color: inherit; }
#story .story-dot[aria-pressed="true"]::before { background: var(--reading-accent); box-shadow: 0 0 0 4px rgba(244,238,236,.1); }
body:has(#story.is-visible) #music-home-slot > .music-player { background: rgba(43,56,76,.76); border-color: rgba(220,222,224,.35); box-shadow: none; --music-ink: #e9e2d9; --music-accent: #d7b8bc; }
body:has(#story.is-visible .story-slide--sea.is-active) #music-home-slot > .music-player { background: rgba(40,67,82,.78); --music-ink: #e6f1ef; }
body:has(#story.is-visible .story-slide--academy.is-active) #music-home-slot > .music-player { background: rgba(47,54,53,.82); --music-ink: #eae1ce; }
body:has(#story.is-visible) #music-home-slot .music-track small { color: #c9c3bd; }
#story .story-content { display: grid; grid-template-rows: 0fr; padding: 0; pointer-events: none; transition: grid-template-rows .65s cubic-bezier(.22,.65,.3,1); }
#story[data-reading="open"] .story-content { grid-template-rows: 1fr; }
#story .story-reading-surface, #story .story-reading-inner, #story .story-slide, #story .story-reading-copy { pointer-events: none; }
#story[data-reading="open"] .story-reading-copy :is(.story-caption, .academy-folio, .japan-journal, .student-note, .story-reading-close) { pointer-events: auto; }
.story-reading-surface { min-height: 0; overflow: hidden; }
.story-reading-copy { transform-origin: center bottom; }
.story-reading-copy[hidden] { display: none !important; }
#story .story-reading-copy * { animation: none !important; transition: none; filter: none; opacity: 1; transform: none; clip-path: none; }
#story .story-reading-copy .story-caption--sea::after { display: none; }
#story .reading-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; color: var(--reading-accent); font: 11px/1.7 "Segoe UI", "Microsoft YaHei", sans-serif; letter-spacing: .22em; }
.reading-eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: .6; }
#story .story-slide--journey .story-caption { font-size: clamp(25px, 2.1vw, 40px); font-weight: 400; line-height: 1.95; color: #f2eee5; letter-spacing: .04em; text-shadow: 0 2px 14px rgba(29,40,60,.45); }
#story .story-slide--journey .story-line:first-child { font-size: .68em; color: #e7d9d1; margin-bottom: .55em; }
#story .story-caption--sea { font-size: clamp(22px, 1.75vw, 33px); font-weight: 400; line-height: 1.95; }
#story .sea-line { color: #e8f2ef; background: none; -webkit-text-fill-color: currentColor; text-shadow: 0 2px 12px rgba(22,41,58,.65); }
#story .sea-preface { font-size: max(16px, .72em); color: #c9e1e4; }
#story:has(.story-slide--academy.is-active) .story-content { bottom: 11%; }
#story .academy-folio { background: rgba(242,235,221,.88); border: 1px solid rgba(227,217,193,.5); border-top: 1px solid #a68d7b; border-radius: 2px; box-shadow: none; padding: clamp(20px,1.6vw,30px) clamp(24px,2vw,40px); }
#story .academy-intro { font-size: clamp(19px,1.4vw,25px); font-weight: 400; color: #353d43; }
#story .academy-copy { font-size: clamp(16px,1.02vw,19px); color: #444b4d; }
#story .academy-meta { margin-bottom: 14px; }
#story .academy-signature { display: none; }
#story .japan-journal { background: linear-gradient(110deg,rgba(233,219,198,.12),transparent),rgba(242,236,222,.9); border: 1px solid rgba(231,220,201,.6); box-shadow: none; padding: clamp(22px,1.7vw,32px); }
#story .japan-copy { font-size: clamp(16px,1.02vw,19px); line-height: 1.9; color: #43505a; }
#story .japan-intro { font-size: clamp(19px,1.4vw,25px); font-weight: 400; }
#story .japan-title { font-size: 16px; }
#story .japan-colophon { display: none; }
#story .student-note h3 { font-size: clamp(23px,1.8vw,32px); font-weight: 400; margin: 12px 0 16px; }
#story .student-line { font-size: clamp(16px,1.08vw,21px); }
#story .student-meta, #story .student-section-mark { letter-spacing: .12em; }
.story-reading-close { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin-top: 18px; padding: 4px 0; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; color: var(--reading-accent); background: transparent; font: 11px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif; letter-spacing: .14em; cursor: pointer; }
#story .story-slide--academy .story-reading-close { color: #dcc9ad; }
#story .story-slide--japan .story-reading-close { color: #e5c9be; }
#story .story-slide--student .story-reading-close { margin-top: 14px; }
#story[data-reading="closed"] .story-shade { opacity: 0; }
#story .story-shade { transition: opacity .65s; }
@media (min-width: 1201px) {
  #story:has(.story-slide--journey.is-active) .story-content { top: 44%; width: 40%; }
  #story:has(.story-slide--sea.is-active) .story-content { top: 58%; width: 39%; }
}
@media (max-width: 1200px) {
  #story:has(.story-slide.is-active) .story-content { top: auto; bottom: auto; left: auto; right: auto; width: 100%; padding: 0; }
  .story-reading-inner { padding: 30px max(6vw,calc((100% - 820px)/2)) 34px; }
  #story .story-slide--academy .story-reading-close { color: #735f50; }
  #story .story-slide--japan .story-reading-close { color: #805f58; }
  #story .academy-folio, #story .japan-journal { background: transparent; border: 0; padding: 0; }
  #story .japan-copy, #story .academy-copy, #story .student-line { font-size: 17px; }
  #story .story-slide--student .student-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; }
  #story .story-slide--student .student-note { width: auto; }
}
@media (max-width: 640px) {
  .story-reading-buttons { bottom: 65px; }
  .story-reading-button { min-height: 40px; padding: 6px 12px; gap: 9px; font-size: 11px; }
  .reading-action { padding-left: 9px; font-size: 10px; }
  .story-reading-inner { padding: 28px 7vw 30px; }
  #story .story-slide--journey .story-caption { font-size: 25px; }
  #story .story-caption--sea { font-size: 22px; }
  #story .japan-copy, #story .academy-copy, #story .student-line { font-size: 16px; line-height: 1.95; }
  #story .story-slide--student .student-notes { display: block; }
  #story .student-note--continuation { margin-top: 25px; }
  #story .japan-intro, #story .academy-intro { font-size: 19px; }
}
#story[data-motion="off"] .story-content { transition: none; }
@media (prefers-reduced-motion: reduce) {
  #story .story-content, #story .story-shade, .reading-chevron, .story-reading-button { transition: none; }
}