/* Yunoa / a watercolor journey. All styling belongs to this standalone page. */
:root {
  --paper: #eeeadf;
  --paper-light: #f6f2e9;
  --ink: #343f3c;
  --muted: #59634f;
  --moss: #899078;
  --line: #8b91773d;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", serif;
  --sans: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  color-scheme: light;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--serif); -webkit-font-smoothing: antialiased; }
body { overflow-x: clip; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
button, input { border-radius: 0; }
a { color: inherit; text-decoration: none; }
button { border: 0; background: none; }
img { display: block; max-width: 100%; height: auto; }
figure, h1, h2, h3, p, blockquote { margin: 0; }
button, a { touch-action: manipulation; }
:focus-visible { outline: 2px solid #606c4e; outline-offset: 7px; }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: 64px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.effect-definitions { position: absolute; pointer-events: none; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 150; padding: 15px 25px; background: var(--paper-light); }
.skip-link:focus { top: 18px; }
.eyebrow { font: 10px/1.8 var(--sans); letter-spacing: .24em; }
.film-header { position: fixed; z-index: 40; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 27px 40px; transition: background .5s, padding .5s, box-shadow .5s; }
.film-header.is-scrolled { padding-top: 16px; padding-bottom: 16px; background: #f3efe5e8; box-shadow: 0 1px var(--line); backdrop-filter: blur(12px); }
.film-brand { display: flex; gap: 10px; align-items: center; font: 16px/1.1 var(--serif); letter-spacing: .2em; }
.brand-mark { width: 35px; height: 39px; }
.brand-sub { display: block; font: 7px/1.6 var(--sans); letter-spacing: .14em; margin-top: 5px; }
.header-controls { display: flex; gap: 26px; align-items: center; }
.utility { display: flex; gap: 9px; align-items: center; min-height: 44px; padding: 0; font: 9px/1 var(--sans); letter-spacing: .12em; }
.utility b { font-weight: 500; display: inline-block; min-width: 22px; }
.motion-mark { font-size: 23px; line-height: 1; }
.sound-bars { display: flex; align-items: center; justify-content: center; height: 20px; gap: 2px; }
.sound-bars i { width: 1px; height: 4px; background: currentColor; transition: height .4s; }
[data-sound="on"] .sound-bars i:nth-child(2n) { height: 15px; }
[data-sound="on"] .sound-bars i:nth-child(3) { height: 20px; }
[data-sound="on"] .sound-bars i:first-child, [data-sound="on"] .sound-bars i:last-child { height: 9px; }
.menu-toggle { display: grid; align-content: center; width: 44px; height: 44px; gap: 7px; padding: 10px 5px; }
.menu-toggle span { height: 1px; width: 30px; background: currentColor; transition: transform .3s; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.chapter-menu { position: fixed; z-index: 35; inset: 0; overflow-y: auto; background: #eeeadff7; backdrop-filter: blur(20px); padding: 115px max(9vw, 30px) 60px; }
.chapter-menu nav { max-width: 760px; margin: 0 auto; }
.chapter-menu nav > .eyebrow { margin-bottom: 25px; }
.chapter-menu nav > a { display: flex; align-items: baseline; gap: 28px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.chapter-menu small { font: 10px var(--sans); }
.chapter-menu a > span { font-size: clamp(20px, 3vw, 32px); letter-spacing: .13em; }
.chapter-menu em { font: italic 12px var(--serif); color: var(--muted); margin-left: auto; }
.chapter-menu a.menu-gallery { font-size: 12px; margin-top: 22px; border: 0; }
.menu-gallery span { margin-left: auto; }
.chapter-rail { position: fixed; z-index: 30; right: 25px; top: 50%; transform: translateY(-50%); display: grid; justify-items: center; gap: 15px; font: 9px var(--sans); letter-spacing: .07em; mix-blend-mode: multiply; }
.chapter-rail > i { width: 1px; height: 90px; background: #67745c50; }
.atmosphere { position: fixed; z-index: 25; inset: 0; overflow: hidden; pointer-events: none; }
.is-page-hidden *, .is-page-hidden *::before, .is-page-hidden *::after { animation-play-state: paused !important; }
.dust { position: absolute; top: -4%; width: 3px; height: 3px; border-radius: 50%; background: #fff9d5; box-shadow: 0 0 8px #c9c290; opacity: 0; }
[data-motion="on"] .dust { animation: drifting var(--duration) linear var(--delay) infinite; }
@keyframes drifting { 0% { opacity: 0; transform: translate3d(0, -5vh, 0); } 15%, 70% { opacity: .65; } 100% { opacity: 0; transform: translate3d(var(--drift), 105vh, 0); } }
.hero { position: relative; background: #596760; }
.hero-stage { position: relative; }
.hero-scene { position: relative; height: 100svh; min-height: 640px; overflow: hidden; isolation: isolate; background: #596760; }
.hero-picture { position: absolute; inset: 0; z-index: -2; }
.hero-picture img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-scene::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(#13292340, transparent 30%, #13292325), radial-gradient(ellipse at 50% 49%, #14251f55, transparent 68%); }
.hero-scene--title { background: #d6d7c9; }
.hero-scene--title::after { background: linear-gradient(#efebdf35, transparent 30%, #e9e5d623 70%, #eeeadf95); }
.hero-caption { position: absolute; left: var(--caption-x); top: var(--caption-y); translate: -50% -50%; width: max-content; max-width: calc(100% - 48px); text-align: center; color: #faf5e8; text-shadow: 0 1px 6px #132821a6, 0 2px 25px #132821b3; }
.hero-scene--awakening { --caption-x: 40%; --caption-y: 37%; }
.hero-scene--solitude { --caption-x: 61%; --caption-y: 62%; }
.hero-first-line, .hero-question { font-size: clamp(26px, 3.1vw, 48px); line-height: 2.1; letter-spacing: .18em; font-weight: 500; }
.hero-copy-row { white-space: nowrap; }
.hero-question .hero-copy-row, .hero-lettering { display: block; }
.hero-glyph { display: inline-block; }
.hero-title { position: absolute; width: min(84vw, 1150px); left: 50%; top: 49%; transform: translate(-50%, -50%); }
.hero-title img { width: 100%; }
.hero-weather { display: none; pointer-events: none; }
.hero-mist { position: absolute; inset: 15% -20% -30%; pointer-events: none; background: radial-gradient(ellipse, #fffbed50 0, #fffbed15 40%, transparent 68%); transform-origin: center; }
.hero-mist--two { inset: 48% -40% -28% 0; opacity: .6; }
[data-motion="on"] .hero-mist--one { animation: mist 22s ease-in-out infinite alternate; }
[data-motion="on"] .hero-mist--two { animation: mist 17s ease-in-out -8s infinite alternate-reverse; }
.hero-light { position: absolute; width: 100%; height: 130%; top: -25%; left: 8%; opacity: .1; transform: rotate(28deg); background: linear-gradient(90deg, transparent 25%, #fffbd7 39%, transparent 44%, #fffbd7 49%, transparent 55%); filter: blur(6px); }
@keyframes mist { from { transform: translate3d(-4%, 0, 0) scale(1); } to { transform: translate3d(6%, -2%, 0) scale(1.12); } }
.hero-transition-mist { position: absolute; inset: -25% -35%; opacity: var(--hero-transition, 0); translate: var(--hero-wind, 0px) 0; background: radial-gradient(ellipse at 32% 46%, #f4f0dede 0, #f1eddda3 21%, transparent 56%), radial-gradient(ellipse at 72% 65%, #e5eddfed, #d6e0d399 28%, transparent 65%); }
.hero-transition-light { position: absolute; inset: -25%; opacity: var(--hero-transition, 0); transform: translate3d(var(--hero-wind, 0px), 0, 0) rotate(-18deg); background: linear-gradient(110deg, transparent 35%, #fff5d136 43%, #fff9e0b3 49%, #ffefc724 56%, transparent 67%); mix-blend-mode: screen; }
.hero-echo { position: absolute; left: 50%; top: 52%; width: 50vmin; height: 50vmin; translate: -50% -50%; scale: var(--hero-echo-scale, 1); opacity: var(--hero-transition, 0); }
.hero-echo i { position: absolute; inset: 0; border: 1px solid #fffbea85; border-radius: 50%; }
.hero-echo i:nth-child(2) { inset: -20%; opacity: .55; }.hero-echo i:nth-child(3) { inset: -43%; opacity: .3; }
.hero-seeds { position: absolute; inset: -12%; transform: translate3d(var(--hero-wind, 0px), 0, 0); opacity: calc(.3 + var(--hero-transition, 0) * .7); }
.hero-seed { position: absolute; left: var(--seed-x); top: var(--seed-y); width: 3px; height: 3px; border-radius: 50%; background: #fff8d6; box-shadow: 0 0 8px 2px #e4d39c60; }
.hero-seed:nth-child(4n) { width: 11px; height: 5px; border-radius: 100% 0; background: #c1ccacb3; box-shadow: none; }
[data-motion="on"] .hero-seed { animation: hero-seed-drift var(--seed-duration) ease-in-out var(--seed-delay) infinite; }
@keyframes hero-seed-drift { 0%, 100% { opacity: 0; } 20%, 75% { opacity: .85; } from { transform: translate3d(-25px, 8vh, 0) rotate(-15deg); } to { transform: translate3d(75px, -30vh, 0) rotate(110deg); } }
.hero-scroll-cue { display: none; pointer-events: none; }
.is-enhanced[data-motion="on"] .hero { height: 520svh; }
.is-enhanced[data-motion="on"] .hero-stage { position: sticky; top: 0; height: 100svh; min-height: 420px; overflow: hidden; isolation: isolate; }
.is-enhanced[data-motion="on"] .hero-scene { position: absolute; inset: 0; height: 100%; min-height: 0; }
.is-enhanced[data-motion="on"] .hero-scene--awakening { z-index: 0; }
.is-enhanced[data-motion="on"] .hero-scene--solitude { z-index: 1; opacity: var(--hero-second, 0); clip-path: ellipse(calc(20% + var(--hero-second, 0) * 90%) calc(28% + var(--hero-second, 0) * 82%) at 50% 52%); }
.is-enhanced[data-motion="on"] .hero-scene--title { z-index: 2; opacity: var(--hero-third, 0); clip-path: ellipse(calc(20% + var(--hero-third, 0) * 90%) calc(28% + var(--hero-third, 0) * 82%) at 50% 52%); }
.is-enhanced[data-motion="on"] .hero-scene--awakening .hero-picture { transform: scale(var(--hero-zoom-first, 1.02)); }
.is-enhanced[data-motion="on"] .hero-scene--solitude .hero-picture { transform: scale(var(--hero-zoom-second, 1.14)); }
.is-enhanced[data-motion="on"] .hero-scene--title .hero-picture { transform: scale(var(--hero-zoom-third, 1.04)); }
.is-enhanced[data-motion="on"] .hero-first-line { --letter-arrival: var(--hero-first-arrival, 0); opacity: var(--hero-line-first, 0); transform: translate3d(0, var(--hero-first-y, 6px), 0); }
.is-enhanced[data-motion="on"] .hero-question { --letter-arrival: var(--hero-second-arrival, 0); opacity: var(--hero-line-second, 0); transform: translate3d(0, var(--hero-second-y, 6px), 0); }
/* Overlapping, softly eased letters follow reading order; no typewriter cuts.
   The same scroll-derived progress rewinds without queued animations. */
.is-enhanced[data-motion="on"] .hero-glyph {
  --letter-progress: clamp(0, calc((var(--letter-arrival, 0) - var(--letter-delay, 0)) / .54), 1);
  --letter-presence: calc(var(--letter-progress) * var(--letter-progress) * (3 - 2 * var(--letter-progress)));
  opacity: var(--letter-presence);
  transform: translate3d(calc((1 - var(--letter-presence)) * -3px), calc((1 - var(--letter-presence)) * 9px), 0);
  filter: blur(calc((1 - var(--letter-presence)) * 5px));
}
.is-enhanced[data-motion="on"] .hero-title { opacity: var(--hero-logo, 0); translate: 0 calc((1 - var(--hero-logo, 0)) * 20px); filter: blur(calc((1 - var(--hero-logo, 0)) * 8px)); }
.is-enhanced[data-motion="on"] .hero-bottom { opacity: var(--hero-logo, 0); }
.is-enhanced[data-motion="on"] .hero-weather { display: block; position: absolute; z-index: 3; inset: 0; overflow: hidden; }
.is-enhanced[data-motion="on"] .hero-scroll-cue { position: absolute; z-index: 4; left: 50%; bottom: 32px; translate: -50% 0; display: grid; justify-items: center; gap: 15px; font: 7px var(--sans); letter-spacing: .2em; white-space: nowrap; color: #fff8e8; text-shadow: 0 1px 10px #243a31; opacity: var(--hero-cue, 0); }
.hero-scroll-cue i { width: 1px; height: 42px; background: linear-gradient(#fff8e8, transparent); animation: scroll-line 2.8s ease-in-out infinite; }
.film-header.is-cinematic:not(.is-scrolled) { color: #faf5e8; text-shadow: 0 1px 14px #183027; }
.film-header.is-cinematic.is-menu-open { color: var(--ink); text-shadow: none; }
.hero-bottom { position: absolute; bottom: 42px; left: 40px; right: 40px; display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.hero-bottom > p { font-size: 11px; line-height: 2.25; letter-spacing: .13em; }
.hero-edition { font: 7px/2 var(--sans); letter-spacing: .18em; text-align: right; }
.scroll-invitation { position: absolute; left: 50%; bottom: -12px; display: grid; gap: 14px; justify-items: center; transform: translateX(-50%); font: 8px var(--sans); letter-spacing: .2em; padding: 10px; white-space: nowrap; }
.scroll-invitation i { height: 41px; width: 1px; background: var(--ink); transform-origin: top; }
[data-motion="on"] .scroll-invitation i { animation: scroll-line 2.8s ease-in-out infinite; }
@keyframes scroll-line { 0%, 100% { transform: scaleY(.4); opacity: .3; } 50% { transform: scaleY(1); opacity: .8; } }
@keyframes emerge { from { opacity: 0; translate: 0 14px; filter: blur(4px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
.section-paper { position: relative; background: var(--paper); background-image: radial-gradient(#736d5620 .55px, transparent .7px); background-size: 5px 5px; }
.section-index { display: flex; align-items: center; gap: 13px; font: 9px var(--sans); letter-spacing: .17em; }
.section-index i { width: 55px; height: 1px; background: var(--line); }
.story { padding: 95px 10.5% 80px; }
.story-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; max-width: 1180px; margin: 70px auto 0; }
.story-heading .eyebrow { margin-bottom: 25px; color: var(--muted); font-size: 8px; }
.story-heading h2 { font-weight: 500; font-size: clamp(30px, 3.3vw, 48px); line-height: 1.9; letter-spacing: .17em; }
.story-prose { padding-top: 34px; font-size: 13px; line-height: 2.8; letter-spacing: .07em; }
.story-prose > p + p { margin-top: 27px; }
.story-prose em { font-style: normal; border-bottom: 1px solid #777e63; }
.story-prose blockquote { position: relative; font-size: clamp(16px, 1.5vw, 21px); line-height: 2.25; margin: 34px -15px; padding: 26px 15px; border-block: 1px solid var(--line); }
.story-prose blockquote > span { display: block; }
.story-footnote { text-align: center; font-size: 10px; letter-spacing: .16em; margin: 80px auto 0; line-height: 2; }
.echo-art { position: relative; width: 160px; height: 160px; margin: 35px 0 0 25px; display: grid; place-items: center; }
.echo-art i { position: absolute; inset: 15%; border: 1px solid #858c6e40; border-radius: 50%; }
.echo-art i:nth-child(2) { inset: 3%; }.echo-art i:nth-child(3) { inset: 28%; }
.echo-art span { color: #80876a; font-size: 32px; }
[data-motion="on"] .echo-art i { animation: echo-breath 5s ease-in-out infinite alternate; }
[data-motion="on"] .echo-art i:nth-child(2) { animation-delay: -1.5s; }
@keyframes echo-breath { from { opacity: .4; scale: .9; } to { opacity: 1; scale: 1.08; } }
.forest { position: relative; height: 260svh; background: #b4bc9a; }
.forest-stage { position: sticky; top: 0; height: 100svh; min-height: 520px; overflow: hidden; isolation: isolate; background: #b4bc9a; }
.forest-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; scale: 1.14; }
.forest-shade { position: absolute; inset: 0; background: #172e22; opacity: .38; }
.forest-wing { position: absolute; z-index: 2; top: -7%; width: 72%; max-width: none; height: 115%; object-fit: fill; pointer-events: none; filter: url("#forest-alpha") brightness(.85) saturate(.85); }
.forest-wing--left { left: -5%; transform-origin: bottom left; }
.forest-wing--right { right: -5%; transform-origin: bottom right; }
.forest-rays { position: absolute; z-index: 3; inset: -40% -30%; pointer-events: none; background: repeating-conic-gradient(from 6deg at 66% 0%, transparent 0deg 7deg, #fff5c52e 8deg 10deg, transparent 11deg 23deg); opacity: .3; mix-blend-mode: screen; }
.forest-words { position: absolute; z-index: 4; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #faf6e9; text-shadow: 0 2px 25px #233a26bb; }
.forest-words { isolation: isolate; }
.forest-words::before { content: ""; position: absolute; z-index: -1; inset: 10% 5%; background: radial-gradient(ellipse, #21342680, #21342638 35%, transparent 68%); pointer-events: none; }
.forest-words .eyebrow { font-size: 9px; margin-bottom: 30px; }
.forest-words h2 { font-size: clamp(34px, 4.1vw, 64px); font-weight: 500; line-height: 1.8; letter-spacing: .22em; }
.forest-words > p:last-child { margin-top: 26px; font-size: 11px; letter-spacing: .17em; }
.forest-direction { position: absolute; z-index: 4; bottom: 38px; left: 50%; translate: -50% 0; display: flex; gap: 22px; color: #fffcef; font: 8px var(--sans); letter-spacing: .15em; text-shadow: 0 1px 8px #18351e; }
.characters { padding: 100px 8% 60px; }
.section-heading { text-align: center; padding-bottom: 55px; }
.section-heading .section-index { justify-content: center; }
.section-heading h2 { font-size: clamp(31px, 3.8vw, 52px); font-weight: 500; letter-spacing: .16em; margin: 40px 0 20px; }
.section-heading > p { font-size: 12px; line-height: 2.3; letter-spacing: .13em; }
.character { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 9%; max-width: 1120px; margin: 0 auto; padding: 48px 0 68px; min-height: 720px; position: relative; border-bottom: 1px solid var(--line); }
.character:last-child { border: 0; }
.character:nth-of-type(even) { grid-template-columns: 1fr 1.1fr; }
.character:nth-of-type(even) .character-art { grid-column: 2; grid-row: 1; }
.character:nth-of-type(even) .character-copy { grid-column: 1; grid-row: 1; padding-left: 4%; }
.character-art { --character-motion: 1; position: relative; display: grid; place-items: center; }
.character-figure { position: relative; z-index: 1; width: min(100%, 445px); transform-origin: 50% 92%; }
.character-art img { position: relative; width: 100%; max-height: 670px; object-fit: contain; }
.character-shadow { position: absolute; left: 50%; bottom: 4%; translate: -50% 0; width: 40%; height: 3%; border-radius: 50%; background: radial-gradient(ellipse, #53644938, #7c886514 45%, transparent 72%); opacity: .55; pointer-events: none; }
.character-orbit { position: absolute; border: 1px solid #87907735; width: 90%; height: 63%; border-radius: 50%; rotate: -22deg; }
.character-orbit::before { content: ""; position: absolute; width: 15px; height: 6px; background: var(--moss); border-radius: 100% 0 100% 0; left: 7%; top: 11%; rotate: -30deg; }
.character-number { display: flex; gap: 20px; font: 10px var(--sans); letter-spacing: .15em; margin-bottom: 35px; color: var(--muted); }
.character-number span { font-size: 8px; }
.character-role { font-size: 12px; letter-spacing: .15em; line-height: 2; }
.character-copy h3 { font-size: clamp(52px, 5.3vw, 76px); font-weight: 500; letter-spacing: .15em; margin: 8px 0 29px; }
.character-description { font-size: 13px; line-height: 2.65; letter-spacing: .055em; }
.character-description strong { font-weight: 500; }
.character-voice { margin-top: 26px; padding-top: 21px; border-top: 1px solid var(--line); }
.character-dialogue { position: relative; padding-left: 18px; color: #455047; font-size: 14px; line-height: 2.1; letter-spacing: .075em; text-wrap: pretty; }
.character-dialogue::before { content: ""; position: absolute; top: .45em; bottom: .45em; left: 0; width: 1px; background: linear-gradient(transparent, #7881689c 18%, #7881689c 82%, transparent); }
.voice-button { position: relative; display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: center; gap: 11px; width: min(100%, 218px); min-height: 48px; margin-top: 15px; padding: 9px 13px; border: 1px solid #78816870; background: #f6f2e966; color: #485344; font: 10px/1.3 var(--sans); letter-spacing: .13em; text-align: left; transition: color .3s, background .3s, border-color .3s, box-shadow .3s; }
.voice-button:hover:not(:disabled) { border-color: #657747; background: #e6eadcb3; box-shadow: 0 5px 24px #6e7a6418; }
.voice-button[aria-pressed="true"] { border-color: #5c694f; background: #69745f; color: #fffbee; box-shadow: 0 6px 28px #4e5b4629; }
.voice-button[data-voice-state="error"] { border-color: #8b7466; color: #745c50; background: #f3e8df73; }
.voice-button small { color: currentColor; font-size: 8px; letter-spacing: .05em; opacity: .72; }
.voice-mark { display: flex; align-items: center; justify-content: center; gap: 3px; width: 31px; height: 28px; border: 1px solid currentColor; border-radius: 50%; opacity: .78; }
.voice-mark i { width: 1px; height: 10px; background: currentColor; transform-origin: center; }
.voice-mark i:first-child { height: 5px; }.voice-mark i:last-child { height: 7px; }
.is-enhanced[data-motion="on"] .voice-button[aria-pressed="true"] .voice-mark i { animation: voice-level .72s ease-in-out infinite alternate; }
.is-enhanced[data-motion="on"] .voice-button[aria-pressed="true"] .voice-mark i:nth-child(2) { animation-duration: .54s; animation-delay: -.31s; }
.is-enhanced[data-motion="on"] .voice-button[aria-pressed="true"] .voice-mark i:nth-child(3) { animation-duration: .83s; animation-delay: -.18s; }
@keyframes voice-level { from { transform: scaleY(.42); } to { transform: scaleY(1.2); } }
.character-signature { display: block; color: #5f6a57; font-size: 19px; font-style: italic; margin-top: 33px; letter-spacing: .03em; }
.character--yunoa { --figure-animation: yunoa-breathe; --figure-duration: 7.6s; }
.character--yunoa .character-figure { transform-origin: 50% 97%; }
.character--mokuri { --figure-animation: mokuri-drift; --figure-duration: 6s; --shadow-animation: spirit-shadow; }
.character--mokuri .character-figure { transform-origin: 50% 54%; }
.character--kork { --figure-animation: kork-sway; --figure-duration: 8.4s; }
.character--kork .character-figure { transform-origin: 51% 88%; }
.character--pinon { --figure-animation: pinon-bounds; --figure-duration: 5.6s; --shadow-animation: hop-shadow; }
/* The revealed art keeps its own entry transition. Only the inner painting
   moves, so the introduction text and the page layout remain still. */
.has-character-observer .character-art { --character-play-state: paused; }
.has-character-observer .character-art.is-character-active { --character-play-state: running; }
.is-enhanced[data-motion="on"] .character-figure { animation: var(--figure-animation) var(--figure-duration) ease-in-out infinite; animation-play-state: var(--character-play-state, running); }
.is-enhanced[data-motion="on"] .character-shadow { animation: var(--shadow-animation) var(--figure-duration) ease-in-out infinite; animation-play-state: var(--character-play-state, running); }
@keyframes yunoa-breathe {
  0%, 100% { transform: translate3d(calc(-3px * var(--character-motion)), 0, 0) rotate(calc(-.7deg * var(--character-motion))); }
  28% { transform: translate3d(0, calc(-3px * var(--character-motion)), 0) rotate(calc(.25deg * var(--character-motion))); }
  55% { transform: translate3d(calc(4px * var(--character-motion)), calc(-5px * var(--character-motion)), 0) rotate(calc(.9deg * var(--character-motion))); }
  78% { transform: translate3d(calc(1px * var(--character-motion)), calc(-1px * var(--character-motion)), 0) rotate(calc(-.25deg * var(--character-motion))); }
}
@keyframes mokuri-drift {
  0%, 100% { transform: translate3d(calc(-7px * var(--character-motion)), calc(10px * var(--character-motion)), 0) rotate(calc(-2deg * var(--character-motion))); }
  25% { transform: translate3d(calc(10px * var(--character-motion)), calc(-10px * var(--character-motion)), 0) rotate(calc(2.8deg * var(--character-motion))); }
  52% { transform: translate3d(calc(5px * var(--character-motion)), calc(-28px * var(--character-motion)), 0) rotate(calc(1deg * var(--character-motion))); }
  78% { transform: translate3d(calc(-12px * var(--character-motion)), calc(-8px * var(--character-motion)), 0) rotate(calc(-3deg * var(--character-motion))); }
}
@keyframes kork-sway {
  0%, 100% { transform: translate3d(calc(-3px * var(--character-motion)), 0, 0) rotate(calc(-1.2deg * var(--character-motion))); }
  30% { transform: translate3d(calc(2px * var(--character-motion)), calc(-4px * var(--character-motion)), 0) rotate(calc(.5deg * var(--character-motion))); }
  58% { transform: translate3d(calc(5px * var(--character-motion)), calc(-2px * var(--character-motion)), 0) rotate(calc(1.6deg * var(--character-motion))); }
  80% { transform: translate3d(0, calc(1px * var(--character-motion)), 0) rotate(calc(-.35deg * var(--character-motion))); }
}
@keyframes pinon-bounds {
  0%, 14%, 72%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  22% { transform: translate3d(calc(-3px * var(--character-motion)), calc(4px * var(--character-motion)), 0) rotate(calc(-1.5deg * var(--character-motion))); }
  33% { transform: translate3d(calc(-7px * var(--character-motion)), calc(-25px * var(--character-motion)), 0) rotate(calc(-3.5deg * var(--character-motion))); }
  43% { transform: translate3d(calc(-2px * var(--character-motion)), calc(2px * var(--character-motion)), 0) rotate(calc(-.5deg * var(--character-motion))); }
  54% { transform: translate3d(calc(10px * var(--character-motion)), calc(-39px * var(--character-motion)), 0) rotate(calc(4deg * var(--character-motion))); }
  65% { transform: translate3d(calc(3px * var(--character-motion)), calc(3px * var(--character-motion)), 0) rotate(calc(1deg * var(--character-motion))); }
}
@keyframes spirit-shadow { 0%, 100% { opacity: .62; scale: 1; } 52% { opacity: .3; scale: .72; } }
@keyframes hop-shadow { 0%, 22%, 43%, 65%, 100% { opacity: .6; scale: 1; } 33% { opacity: .38; scale: .82; } 54% { opacity: .25; scale: .68; } }
.lantern-glow { position: absolute; z-index: 2; top: 68.5%; left: 34.5%; translate: -50% -50%; width: 28%; height: 20%; background: radial-gradient(ellipse, #ffed9980, #e3ce6a18 50%, transparent 70%); pointer-events: none; mix-blend-mode: soft-light; }
.is-enhanced[data-motion="on"] .lantern-glow { animation: lantern 4.2s ease-in-out infinite; animation-play-state: var(--character-play-state, running); }
@keyframes lantern { 0%, 100% { opacity: .45; scale: .94; } 35% { opacity: 1; scale: 1.13; } 52% { opacity: .66; scale: 1; } 74% { opacity: .92; scale: 1.08; } }
.memories { position: relative; height: 340svh; background: #556054; }
.memories-stage { position: sticky; top: 0; height: 100svh; min-height: 580px; overflow: hidden; }
.memories-header { position: absolute; z-index: 2; top: 120px; left: 8.5%; color: #fbf6e8; text-shadow: 0 2px 20px #223725; }
.memories-header h2 { font-size: 15px; font-weight: 400; letter-spacing: .25em; margin-top: 13px; }
.memories-track { display: flex; height: 100%; }
.memory-scene { flex: 0 0 100%; position: relative; height: 100%; isolation: isolate; overflow: hidden; background: #586253; }
.memory-scene > img { position: absolute; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.memory-scene::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #20362cd9, #20362c70 42%, #20362c05 80%), linear-gradient(transparent 50%, #25382b90); }
.memory-caption { position: absolute; left: 8.5%; right: 8.5%; bottom: 17%; color: #f7f1e1; }
.memory-caption > span { font: 9px var(--sans); letter-spacing: .2em; }
.memory-caption h3 { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.7; font-weight: 500; letter-spacing: .16em; margin: 28px 0; }
.memory-caption p { font-size: 12px; line-height: 2.6; letter-spacing: .1em; }
.memory-progress { position: absolute; z-index: 3; bottom: 55px; left: 8.5%; right: 8.5%; display: flex; align-items: center; gap: 20px; color: #fcf8ee; font: 9px var(--sans); letter-spacing: .13em; }
.memory-progress > i { height: 1px; width: 170px; background: #f7f3e255; overflow: hidden; }
.memory-progress b { display: block; background: #f7f3e2; width: 100%; height: 100%; transform: scaleX(.333); transform-origin: left; }
.tower { min-height: 850px; height: 115svh; position: relative; overflow: hidden; isolation: isolate; background: #dce1d0; }
.tower-scenery { position: absolute; z-index: -2; inset: 0; }
.tower-scenery > img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.tower::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#eeeadf30, transparent 25%, #eeeadf15 65%, var(--paper)), linear-gradient(90deg, #eae4d670, transparent 65%); }
.tower-copy { position: relative; padding: 160px 14% 140px; }
.tower-copy h2 { font-size: clamp(65px, 8.7vw, 132px); font-weight: 400; letter-spacing: .14em; margin: 40px 0 35px; }
.tower-copy > p:last-of-type { font-size: 14px; letter-spacing: .19em; line-height: 2.6; }
.tower-line { display: block; width: 1px; height: 170px; background: linear-gradient(var(--moss), transparent); margin: 45px 0 0 25px; }
.closing { padding: 85px 7% 0; text-align: center; }
.closing > .eyebrow { font-size: 8px; }
.closing-logo { width: min(100%, 760px); margin: 35px auto 5px; mix-blend-mode: multiply; }
.closing-caption { font-size: 14px; letter-spacing: .21em; margin-top: 15px; }
.closing-actions { display: flex; justify-content: center; gap: 55px; margin: 60px 0 90px; }
.text-link { display: flex; align-items: center; gap: 38px; font-size: 11px; letter-spacing: .12em; border-bottom: 1px solid #6d775c80; padding: 17px 3px; }
.text-link b { font-size: 18px; font-weight: 400; transition: translate .25s; }
.text-link:hover b { translate: 3px -2px; }
.closing footer { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding: 27px 0 30px; font: 7px var(--sans); letter-spacing: .15em; gap: 20px; }
.entrance { --intro-sage: #809077; --intro-gold: #c8b781; position: fixed; z-index: 100; inset: 0; overflow-x: hidden; overflow-y: auto; background: var(--paper-light); display: grid; place-items: safe center; padding: 60px 25px; min-height: 100svh; text-align: center; isolation: isolate; }
.entrance:focus { outline: none; }
.entrance-atmosphere { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.entrance-wash { position: absolute; inset: -10%; background: radial-gradient(ellipse at 5% 90%, #a5b29965, transparent 46%), radial-gradient(ellipse at 100% 30%, #a6b5ab36, transparent 40%), radial-gradient(ellipse at 53% 20%, #decc9952, transparent 43%), radial-gradient(ellipse at 50% 45%, #fffaf0aa, transparent 60%); }
.entrance-grain { position: absolute; inset: 0; opacity: .45; background: radial-gradient(#716a5624 .65px, transparent .8px); background-size: 4px 4px; }
.entrance-light { position: absolute; inset: -45% -20% -20%; transform-origin: 70% 0; opacity: .55; background: conic-gradient(from 132deg at 70% 0%, transparent 0deg, #fffbe590 5deg, transparent 12deg, #fffce880 18deg, transparent 24deg, #f1e4b757 30deg, transparent 39deg); }
.entrance-mist { position: absolute; width: 150%; height: 54%; left: -25%; bottom: -10%; opacity: .8; background: radial-gradient(ellipse at 37% 50%, #fcf8e9d9, transparent 61%), radial-gradient(ellipse at 73% 80%, #c7cfba57, transparent 60%); }
.entrance-mist--back { bottom: 16%; left: -38%; opacity: .45; }
.entrance-branch { position: absolute; bottom: -45px; width: min(39vw, 540px); height: auto; opacity: .6; transform-origin: 15% 100%; }
.entrance-branch--left { left: -50px; }
.entrance-branch--right { right: -75px; scale: -1 1; bottom: -100px; opacity: .43; }
.branch-stem { stroke: var(--intro-sage); stroke-width: 1.1; stroke-linecap: round; }
.branch-leaves { fill: #91a17c30; stroke: #788e6c42; stroke-width: .7; }
.entrance-wind { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .6; }
.entrance-wind path { stroke: #8a9b7f6b; stroke-width: 1; stroke-dasharray: .12 .88; stroke-linecap: round; }
.entrance-wind path:nth-child(2) { stroke: #b6a7778c; stroke-width: .6; }
.entrance-wind path:nth-child(3) { stroke: #a8b79766; stroke-width: .7; }
.entrance-motes { position: absolute; inset: 0; }
.entrance-mote { position: absolute; left: var(--mote-x); top: var(--mote-y); width: var(--mote-size); height: var(--mote-size); border-radius: 50%; background: #fffbdf; box-shadow: 0 0 10px 2px #b8ac7d5e; opacity: 0; }
.entrance-mote--seed { width: 10px; height: 4px; border-radius: 100% 0 100% 0; background: #83957491; box-shadow: none; }
[data-motion="on"] .entrance-wash { animation: entrance-wash 13s ease-in-out infinite alternate; }
[data-motion="on"] .entrance-light { animation: entrance-light 9s ease-in-out infinite alternate; }
[data-motion="on"] .entrance-mist { animation: entrance-mist 12s ease-in-out infinite alternate; }
[data-motion="on"] .entrance-mist--back { animation-duration: 17s; animation-delay: -8s; animation-direction: alternate-reverse; }
[data-motion="on"] .entrance-branch { animation: branch-sway 8s ease-in-out infinite alternate; }
[data-motion="on"] .entrance-branch--right { animation-duration: 11s; animation-delay: -4s; }
[data-motion="on"] .branch-stem { stroke-dasharray: 1; animation: branch-grow 3s ease-out both; }
[data-motion="on"] .branch-leaves { animation: branch-bloom 2.5s ease-out both; }
[data-motion="on"] .entrance-wind path { animation: wind-trace 9s linear infinite; }
[data-motion="on"] .entrance-wind path:nth-child(2) { animation-delay: -4.2s; animation-duration: 12s; }
[data-motion="on"] .entrance-wind path:nth-child(3) { animation-delay: -6s; animation-duration: 16s; }
[data-motion="on"] .entrance-mote { animation: entrance-mote var(--mote-duration) ease-in-out var(--mote-delay) infinite; }
@keyframes entrance-wash { from { transform: translate3d(-2%, 1%, 0) scale(1); } to { transform: translate3d(2%, -1%, 0) scale(1.05); } }
@keyframes entrance-light { from { opacity: .3; rotate: -8deg; } to { opacity: .8; rotate: 6deg; } }
@keyframes entrance-mist { from { translate: -8% 6%; } to { translate: 12% -5%; } }
@keyframes branch-sway { from { rotate: -2deg; } to { rotate: 3deg; } }
@keyframes branch-grow { from { stroke-dashoffset: 1; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes branch-bloom { from { opacity: 0; } to { opacity: 1; } }
@keyframes wind-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: -1; } }
@keyframes entrance-mote { 0%, 100% { opacity: 0; } 20%, 70% { opacity: .8; } from { transform: translate3d(0, 8vh, 0) rotate(0deg); } to { transform: translate3d(var(--mote-drift), -32vh, 0) rotate(var(--mote-turn)); } }
.intro-scene { position: relative; width: min(100%, 480px); }
.entrance-topline { font: 8px/1.7 var(--sans); letter-spacing: .3em; margin-bottom: 36px; color: var(--muted); }
.intro-emblem { position: relative; width: 184px; height: 184px; margin: 0 auto 34px; display: grid; place-items: center; }
.intro-emblem img { position: relative; z-index: 2; border-radius: 50%; width: 100%; box-shadow: 0 0 36px 10px #f3eee3b0; }
.intro-halo { position: absolute; inset: -55%; border-radius: 50%; background: radial-gradient(circle, #efe3b466, #e0dbb636 35%, transparent 70%); }
.intro-ring { position: absolute; inset: -20px; border: 1px solid #8c97755c; border-radius: 50%; opacity: 0; }
.intro-orbit { position: absolute; inset: -28px; border: 1px dashed #929d7c35; border-radius: 50%; rotate: -20deg; }
.intro-orbit::before, .intro-orbit::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--intro-gold); box-shadow: 0 0 11px 3px #f2e1a582; left: 50%; top: -3px; }
.intro-orbit::after { top: auto; bottom: -3px; width: 3px; height: 3px; background: var(--intro-sage); }
[data-motion="on"] .intro-emblem img { animation: emblem-arrive 1.6s ease-out both, emblem-breathe 5s ease-in-out 1.6s infinite alternate; }
[data-motion="on"] .intro-halo { animation: halo-breathe 4.5s ease-in-out infinite alternate; }
[data-motion="on"] .intro-ring { animation: intro-echo 5.2s ease-out var(--echo-delay) infinite; }
[data-motion="on"] .intro-orbit { animation: orbit-turn 36s linear infinite; }
@keyframes emblem-arrive { from { opacity: 0; filter: blur(9px); scale: .9; } to { opacity: 1; filter: blur(0); scale: 1; } }
@keyframes emblem-breathe { from { translate: 0 3px; } to { translate: 0 -5px; } }
@keyframes halo-breathe { from { scale: .85; opacity: .45; } to { scale: 1.14; opacity: 1; } }
@keyframes intro-echo { from { scale: .7; opacity: 0; } 20% { opacity: .8; } to { scale: 2.15; opacity: 0; } }
@keyframes orbit-turn { to { rotate: 340deg; } }
.intro-leaf { position: absolute; z-index: 3; width: 15px; height: 7px; border-radius: 100% 0 100% 0; background: linear-gradient(25deg, #a0a888, #718867b3); box-shadow: 0 2px 5px #7f8a6312; }
.intro-leaf--one { left: -34px; top: 19px; rotate: -40deg; }
.intro-leaf--two { right: -45px; top: 60px; rotate: 30deg; width: 11px; animation-delay: -2s !important; }
.intro-leaf--three { right: 7px; bottom: -20px; rotate: -15deg; animation-delay: -4s !important; }
.intro-leaf--four { left: -57px; bottom: 5px; width: 9px; rotate: 35deg; animation-delay: -1s !important; }
.intro-leaf--five { right: 0; top: -40px; width: 8px; height: 4px; rotate: 80deg; animation-delay: -3s !important; }
[data-motion="on"] .intro-leaf { animation: leaf-drift 5s ease-in-out infinite alternate; }
@keyframes leaf-drift { from { translate: -7px 12px; transform: rotate(-12deg); } to { translate: 13px -18px; transform: rotate(30deg); } }
.intro-scene h2 { font-size: 28px; line-height: 1.6; font-weight: 400; letter-spacing: .2em; }
.intro-subline { font-size: 10px; line-height: 2; margin-top: 14px; letter-spacing: .12em; color: var(--muted); }
[data-motion="on"] .entrance-topline, [data-motion="on"] .intro-scene h2, [data-motion="on"] .intro-subline { animation: emerge 1.4s .25s both; }
[data-motion="on"] .intro-subline { animation-delay: .6s; }
.intro-sound-slot { min-height: 168px; margin-top: 32px; }
.intro-sound { position: relative; }
.intro-sound > p { font-size: 10px; line-height: 1.9; letter-spacing: .1em; }
.intro-sound::before { content: ""; position: absolute; pointer-events: none; top: -18px; left: 15%; width: 70%; height: 1px; background: linear-gradient(90deg, transparent, #bca97499, transparent); transform-origin: center; }
.sound-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.sound-choices button { font-size: 10px; line-height: 1.5; text-align: left; padding: 18px 21px; border: 1px solid #7c88645e; background: #f6f2e969; position: relative; transition: background .3s, border-color .3s, box-shadow .3s; }
.sound-choices button:hover { background: #e2e7d9b3; border-color: #657747; box-shadow: 0 3px 22px #78866b15; }
.sound-choices button > span { font: 10px var(--sans); letter-spacing: .18em; }
.sound-choices button > small { display: block; font-size: 9px; margin-top: 9px; letter-spacing: .06em; }
.sound-choices button > b { position: absolute; top: 20px; right: 18px; font-size: 16px; font-weight: 400; transition: translate .3s; }
.sound-choices button:hover > b { translate: 2px -2px; }
.intro-sound > p.sound-note { font-size: 9px; color: var(--muted); margin-top: 18px; }
[data-motion="on"] .intro-sound > p { animation: choice-emerge 1.1s both; }
[data-motion="on"] .intro-sound::before { animation: choice-light 1.7s ease-out both; }
[data-motion="on"] .sound-choices button { animation: choice-emerge 1.1s .12s both; }
[data-motion="on"] .sound-choices button:nth-child(2) { animation-delay: .26s; }
[data-motion="on"] .intro-sound > p.sound-note { animation-delay: .4s; }
@keyframes choice-emerge { from { opacity: 0; translate: 0 13px; filter: blur(5px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes choice-light { 0% { scale: 0 1; opacity: 0; } 45% { opacity: 1; } 100% { scale: 1 1; opacity: .6; } }
.entrance-bottomline { position: absolute; bottom: 26px; left: 0; right: 0; font: 7px var(--sans); letter-spacing: .24em; }
.entrance.is-leaving { pointer-events: none; animation: entrance-leave .85s both; }
@keyframes entrance-leave { to { opacity: 0; visibility: hidden; filter: blur(8px); } }
.is-enhanced[data-motion="on"] [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.is-enhanced[data-motion="on"] [data-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
html[data-motion="off"] { scroll-behavior: auto; }
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after { animation: none !important; transition-duration: 0s !important; }
[data-motion="off"] .dust { display: none; }
[data-motion="off"] .entrance-motes, [data-motion="off"] .entrance-wind, [data-motion="off"] .intro-ring { display: none; }
[data-motion="off"] .forest { height: 100svh; min-height: 570px; }
[data-motion="off"] .forest-stage { position: relative; height: 100%; }
[data-motion="off"] .forest-wing--left { transform: translateX(-65%) !important; }
[data-motion="off"] .forest-wing--right { transform: translateX(65%) !important; }
[data-motion="off"] .forest-shade { opacity: .12 !important; }
[data-motion="off"] .forest-direction { display: none; }
[data-motion="off"] .memories { height: auto; }
[data-motion="off"] .memories-stage { position: relative; height: auto; }
[data-motion="off"] .memories-track { display: block; transform: none !important; }
[data-motion="off"] .memory-scene { height: 90svh; min-height: 620px; }
[data-motion="off"] .memory-progress { display: none; }
@media (max-width: 1000px) {
  .film-header { padding: 20px 26px; }.header-controls { gap: 20px; }
  .hero-title { width: 94%; }
  .hero-bottom { left: 28px; right: 28px; }.hero-edition { display: none; }
  .story { padding-inline: 8%; }.story-layout { gap: 7%; }
  .story-heading h2 { font-size: 31px; }.story-prose { font-size: 12px; }
  .characters { padding-inline: 7%; }.character { gap: 5%; min-height: 620px; }
  .character-description { font-size: 12px; }.character-role { font-size: 11px; }
  .chapter-rail { right: 14px; }.tower-copy { padding-left: 9%; }
}
@media (max-width: 700px) {
  .dust:nth-child(n+13) { display: none; }
  .film-header { padding: 17px 17px; }.film-header.is-scrolled { padding: 10px 17px; }
  .brand-mark { width: 24px; height: 30px; }.film-brand { font-size: 13px; gap: 7px; letter-spacing: .13em; }
  .brand-sub { font-size: 5px; letter-spacing: .055em; }.header-controls { gap: 14px; }
  .utility { gap: 6px; font-size: 7px; letter-spacing: .045em; }.utility b { min-width: 16px; }
  .motion-control { gap: 4px; }.motion-mark { font-size: 17px; }.sound-bars { gap: 2px; }
  .menu-toggle { width: 32px; padding: 5px 3px; }.menu-toggle span { width: 24px; }
  .chapter-rail { display: none; }
  .chapter-menu { padding: 90px 28px 40px; }.chapter-menu nav > a { gap: 18px; padding-block: 18px; }
  .chapter-menu em { font-size: 9px; }
  .is-enhanced[data-motion="on"] .hero { height: 460svh; }
  .hero-scene { min-height: 590px; }.hero-picture img { object-position: center; }
  .hero-scene--awakening { --caption-x: 43%; --caption-y: 38%; }
  .hero-scene--solitude { --caption-x: 56%; --caption-y: 62%; }
  .hero-first-line, .hero-question { font-size: clamp(22px, 6.1vw, 31px); letter-spacing: .11em; line-height: 2.25; }
  .hero-first-line .hero-copy-row { display: block; }.hero-title { top: 48%; width: 100%; max-width: none; }
  .hero-seed:nth-child(n+15) { display: none; }
  .is-enhanced[data-motion="on"] .hero-scroll-cue { bottom: 28px; font-size: 6px; letter-spacing: .12em; }
  .hero-bottom { left: 20px; right: 20px; bottom: 33px; align-items: center; flex-direction: column; gap: 20px; }
  .hero-bottom > p { font-size: 10px; text-align: center; letter-spacing: .1em; }
  .scroll-invitation { position: relative; left: auto; bottom: auto; transform: none; gap: 11px; font-size: 6px; padding: 0; }
  .scroll-invitation i { height: 32px; }
  .story { padding: 65px 8% 55px; }.section-index { font-size: 8px; }
  .story-layout { grid-template-columns: 1fr; margin-top: 44px; gap: 20px; }
  .story-heading { position: relative; }.story-heading h2 { font-size: clamp(28px, 7.6vw, 39px); line-height: 1.85; letter-spacing: .14em; }
  .story-heading .eyebrow { font-size: 6px; }.echo-art { position: absolute; width: 90px; height: 90px; right: -4px; bottom: 3px; margin: 0; }
  .echo-art span { font-size: 21px; }.story-prose { padding: 28px 0 0; font-size: 12px; line-height: 2.7; }
  .story-prose blockquote { font-size: 17px; padding: 25px 0; margin: 28px 0; letter-spacing: .01em; }
  .story-footnote { text-align: left; font-size: 9px; line-height: 2.3; margin-top: 38px; max-width: 255px; }
  .forest { height: 200svh; }.forest-stage { min-height: 500px; }
  .forest-backdrop { object-position: 48% center; }.forest-wing { height: 112%; top: -5%; width: 115%; }.forest-wing--left { left: -27%; }.forest-wing--right { right: -27%; }
  .forest-words h2 { font-size: 33px; letter-spacing: .13em; }.forest-words .eyebrow { font-size: 7px; }.forest-words > p:last-child { font-size: 10px; letter-spacing: .07em; }
  .characters { padding: 66px 8% 20px; }.section-heading { padding-bottom: 35px; }
  .section-heading h2 { font-size: 31px; margin: 30px 0 18px; }.section-heading > p { font-size: 11px; letter-spacing: .08em; }
  .characters .section-heading h2 { font-size: clamp(24px, 7.7vw, 31px); letter-spacing: .12em; white-space: nowrap; }
  .character, .character:nth-of-type(even) { grid-template-columns: 1fr; gap: 10px; padding: 28px 0 55px; min-height: 0; }
  .character:nth-of-type(even) .character-art, .character:nth-of-type(even) .character-copy { grid-column: 1; grid-row: auto; padding-left: 0; }
  .character-art { --character-motion: .72; width: 95%; max-width: 345px; margin: auto; }.character-art img { max-height: 455px; width: 100%; }
  .character-copy { padding: 8px 3% 0; }.character-number { font-size: 9px; gap: 15px; margin-bottom: 18px; }
  .character-role { font-size: 11px; letter-spacing: .075em; }.character-copy h3 { font-size: 52px; margin: 6px 0 19px; }
  .character-description { font-size: 12px; line-height: 2.5; letter-spacing: .045em; }
  .character-voice { margin-top: 21px; padding-top: 18px; }
  .character-dialogue { padding-left: 15px; font-size: 13px; line-height: 2; letter-spacing: .045em; }
  .voice-button { width: min(100%, 215px); min-height: 48px; margin-top: 13px; }
  .character-signature { font-size: 17px; margin-top: 24px; }
  .memories { height: auto; }.memories-stage { position: relative; height: auto; min-height: 0; }
  .memories-track { display: block; transform: none !important; }.memory-scene { height: 88svh; min-height: 620px; }
  .memories-header { top: 45px; left: 8%; }.memories-header .eyebrow { font-size: 7px; }.memories-header h2 { font-size: 12px; margin-top: 11px; }
  .memory-scene > img { object-position: 62% center; }.memory-scene::after { background: linear-gradient(0deg, #20362ce8, #20362c55 65%, #20362c35); }
  .memory-caption { bottom: 12%; left: 8%; right: 8%; }.memory-caption > span { font-size: 8px; }
  .memory-caption h3 { font-size: clamp(28px, 8.2vw, 36px); margin: 20px 0; letter-spacing: .13em; }.memory-caption p { font-size: 11px; letter-spacing: .045em; }
  .memory-progress { display: none; }
  .tower { height: 100svh; min-height: 700px; }.tower-scenery > img { object-position: 62% center; }
  .tower-copy { padding: 100px 9% 65px; }.tower-copy .eyebrow { font-size: 7px; }.tower-copy h2 { font-size: clamp(44px, 13.2vw, 60px); margin: 37px 0 26px; white-space: nowrap; }
  .tower-copy > p:last-of-type { font-size: 12px; }.tower-line { height: 150px; margin-top: 35px; }
  .closing { padding: 55px 6% 0; }.closing > .eyebrow { font-size: 6px; letter-spacing: .1em; }
  .closing-logo { max-width: none; width: 108%; margin: 30px -4% 10px; }.closing-caption { font-size: 11px; letter-spacing: .14em; }
  .closing-actions { flex-direction: column; align-items: center; gap: 18px; margin: 37px 0 60px; }
  .text-link { width: min(80%, 260px); justify-content: space-between; font-size: 11px; padding: 16px 0; }
  .closing footer { font-size: 5px; letter-spacing: .04em; align-items: center; padding: 25px 0; }
  .closing footer a { font-size: 6px; padding: 10px 0; white-space: nowrap; }
  .entrance { padding: 48px 24px; }.intro-scene { max-width: 380px; }
  .entrance-branch { width: 67vw; bottom: -18px; }.entrance-branch--left { left: -80px; }.entrance-branch--right { right: -100px; bottom: -50px; }
  .entrance-mote:nth-child(n+19) { display: none; }.entrance-light { opacity: .45; }
  .intro-emblem { width: 144px; height: 144px; margin-bottom: 32px; }.entrance-topline { font-size: 7px; margin-bottom: 30px; }
  .intro-scene h2 { font-size: 24px; }.entrance-bottomline { font-size: 6px; letter-spacing: .13em; }
  .intro-sound-slot { margin-top: 28px; min-height: 168px; }.intro-sound > p { font-size: 9px; letter-spacing: .06em; }
  .sound-choices { gap: 12px; }.sound-choices button { padding: 19px 13px; }
  .sound-choices button > span { font-size: 9px; letter-spacing: .08em; }.sound-choices button > small { font-size: 8px; }
  .sound-choices button > b { right: 10px; top: 20px; font-size: 13px; }.intro-sound > p.sound-note { font-size: 8px; }
}
@media (max-height: 650px) {
  .entrance { padding-block: 30px 50px; }.entrance-topline { margin-bottom: 20px; }
  .intro-emblem { width: 108px; height: 108px; margin-bottom: 24px; }.intro-scene h2 { font-size: 23px; }
  .intro-subline { margin-top: 8px; }.intro-sound-slot { margin-top: 26px; }
  .entrance-bottomline { display: none; }
}
@media (max-width: 380px) {
  .header-controls { gap: 10px; }.film-header { padding-inline: 13px; }.film-header.is-scrolled { padding-inline: 13px; }
  .brand-sub { display: none; }.film-brand { font-size: 12px; }.hero-question { font-size: 21px; }
  .character-role { font-size: 10px; }.story-prose blockquote { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .film-header.is-scrolled, .chapter-menu { background: var(--paper-light); backdrop-filter: none; }
}