/* One scrollable comic: illustrated dialogue, calculation inserts, then the closing. */
#personal-story { container-type: inline-size; background: #11141e; color: #ede4dc; }
.personal-story-cover { min-height: 760px; min-height: min(185cqw, 880px); position: relative; display: flex; flex-direction: column; justify-content: flex-end; text-align: center; padding: 48px 24px 46px; background: linear-gradient(transparent 24%,#11141e55 43%,#11141eef 76%,#11141e), url('assets/yuran-reference-portrait.png') center top / 100% auto no-repeat; }
.personal-story-cover h1 { font-size: clamp(32px,9cqw,47px); font-weight: 500; letter-spacing: -.055em; line-height: 1.5; margin: 14px 0 22px; white-space: pre-line; text-shadow: 0 2px 12px #111; overflow-wrap: anywhere; }
.story-work-name { font-size: 12px; letter-spacing: .2em; color: #e2c1ad; }
.story-birth-caption { font-size: 12px; line-height: 1.9; color: #c1b2b0; white-space: pre-line; }
.story-scroll-cue { margin-top: 34px; font-size: 11px; color: #c6b7be; }
.story-example-note { margin: 18px 0 0; color: #c9a486; font-size: 11px; }
.story-navigation { position: sticky; top: 60px; z-index: 8; display: flex; align-items: center; gap: 20px; background: #171720f5; padding: 10px 20px; border-block: 1px solid #d9baa319; backdrop-filter: blur(12px); }
.story-navigation label { font-size: 10px; color: #b69983; white-space: nowrap; letter-spacing: 1px; }
.story-navigation select { color: #ddc9bc; background: transparent; border: 0; width: 100%; min-width: 0; font: inherit; font-size: 12px; padding: 8px 0; }
.story-navigation option { color: #eddbce; background: #1d202c; }
.webtoon-chapter { scroll-margin-top: 117px; outline-offset: -3px; }
.story-chapter-heading { position: relative; isolation: isolate; padding: 26cqw 25px 32px; background: #11141e; overflow: hidden; text-align: center; }
.chapter-art-crop { position: absolute; top: 0; inset-inline: 0; height: 51cqw; z-index: -1; overflow: hidden; }
.chapter-art-crop > .webtoon-scene-art { position: absolute; top: -42cqw; left: 0; width: 100%; aspect-ratio: 1; }
.chapter-art-crop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#11141e70,transparent 15%,#11141e40 50%,#11141e); }
.story-chapter-number { color: #c8a181; font-size: 11px; letter-spacing: .25em; display: block; margin-bottom: 18px; }
.story-chapter-heading h2 { font-size: clamp(22px,6.3cqw,31px); font-weight: 500; line-height: 1.55; word-break: keep-all; letter-spacing: -.04em; margin: 0; }
.story-chapter-heading > p { margin: 22px 0 0; color: #bba9ac; font-size: 12px; line-height: 1.9; word-break: keep-all; }
.spoken-beat { margin: 0; padding: 0; }
.beat-caption { padding: 20px 24px 10px; margin: 0; font-size: 12px; font-weight: 500; line-height: 1.9; color: #d3bcae; text-align: center; background: #11141e; word-break: keep-all; }
.webtoon-dialogue-frame { position: relative; min-height: 100cqw; isolation: isolate; overflow: hidden; background: #11141e; padding: 4cqw 0 var(--subject-space,60cqw); }
.webtoon-scene-art { background-repeat: no-repeat; background-size: 200% 300%; }
.webtoon-dialogue-frame > .webtoon-scene-art { position: absolute; bottom: 0; left: 0; width: 100%; aspect-ratio: 1; z-index: -1; }
.webtoon-dialogue-frame > .webtoon-scene-art::before { content: ''; position: absolute; inset: 0 0 auto; height: 27%; background: linear-gradient(#11141e, #11141e77 35%, transparent); }
.webtoon-dialogue-frame::after { content: ''; position: absolute; inset: auto 0 0; height: 10%; background: linear-gradient(transparent,#11141e); pointer-events: none; }
.speech-paper { position: relative; isolation: isolate; width: var(--speech-width,81%); margin: 0 0 19px 5%; border: 22px solid transparent; padding: 1px 4px; border-image: url('assets/speech-body-v11.svg') 32 fill / 22px / 0 stretch; }
.speech-paper::after { content: ''; position: absolute; z-index: -1; right: 13%; bottom: -40px; width: 42px; height: 28px; background: url('assets/speech-tail-v11.svg') center / 100% 100% no-repeat; }
.webtoon-dialogue { position: relative; margin: 0; padding: 0; font-size: clamp(14px,3.8cqw,18px); font-weight: 500; line-height: 1.65; letter-spacing: -.03em; text-align: center; color: #302930; white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; }
.webtoon-dialogue-frame[data-speaker='left'] > .speech-paper { margin-left: auto; margin-right: 5%; }
.webtoon-dialogue-frame[data-speaker='left'] > .speech-paper::after { right: auto; left: 13%; transform: scaleX(-1); }
.webtoon-dialogue-frame[data-speaker='center'] > .speech-paper { margin-inline: auto; }
.webtoon-dialogue-frame[data-speaker='center'] > .speech-paper::after { left: calc(50% - 21px); right: auto; }
.webtoon-dialogue-frame[data-kind='detail'] { min-height: 88cqw; }
.webtoon-dialogue-frame[data-kind='detail'] > .speech-paper { margin: 0 auto; padding: 7px 8px; border: 16px solid transparent; border-image: url('assets/narration-paper-v11.svg') 24 fill / 16px / 0 stretch; }
.webtoon-dialogue-frame[data-kind='detail'] > .speech-paper::after { display: none; }
.webtoon-dialogue-frame[data-kind='detail'] .webtoon-dialogue { font-weight: 400; }
.continued-dialogue { margin-top: 12px; }
.story-manuscript { position: relative; isolation: isolate; padding: 42px 26px; min-height: 270px; display: flex; flex-direction: column; justify-content: center; background: #14151e; overflow: hidden; }
.story-manuscript::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#11141ef5,#11141e91 45%,#11141ef5), url('assets/yuran-reading-strip-v6.png') center / 100% auto; opacity: .65; }
.manuscript-caption { font-size: 13px; line-height: 1.9; text-align: center; color: #dfc9b5; margin: 0 0 32px; }
.story-pillars { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.story-pillars > div { display: flex; align-items: center; flex-direction: column; gap: 17px; padding: 16px 0; border-block: 1px solid #d8b18c55; }
.story-pillars span { font-size: 11px; color: #c9ac93; }
.story-pillars strong { writing-mode: vertical-lr; font-size: clamp(29px,8.5cqw,43px); font-family: serif; line-height: 1.5; letter-spacing: 7px; font-weight: 400; color: #f1ddbe; }
.day-master-letter { font-family: serif; font-size: 100px; text-align: center; color: #f0d6b0; text-shadow: 0 0 35px #c9915b44; margin: 10px 0 26px; }
.story-elements { display: flex; justify-content: space-between; gap: 6px; margin: 8px -10px 28px; }
.story-element { --element: #b8d8c2; display: flex; flex-direction: column; align-items: center; gap: 13px; font-size: 11px; }
.story-element.element-fire { --element: #efaeb3; }.story-element.element-earth { --element: #e1c18d; }.story-element.element-metal { --element: #ded5e8; }.story-element.element-water { --element: #acc3ea; }
.story-element .element-light { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid color-mix(in srgb,var(--element),transparent 60%); font-family: serif; font-size: 24px; color: var(--element); background: radial-gradient(color-mix(in srgb,var(--element),transparent 85%),transparent 70%); box-shadow: 0 0 24px color-mix(in srgb,var(--element),transparent 88%); }
.story-element strong { color: var(--element); font-size: 12px; font-weight: 500; }
.manuscript-small { margin: 0; font-size: 10px; text-align: center; color: #b9a9b9; }
.strength-word { margin: 0 0 28px; font-size: 34px; text-align: center; font-family: serif; color: #ecd5bc; }
.story-facts { font-size: 12px; line-height: 1.9; margin: 0; }
.story-facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #c8ae931a; }
.story-facts dt { flex: 0 0 82px; color: #c3a998; }.story-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.story-basis { padding: 18px 26px 28px; background: #11141e; font-size: 11px; color: #ab97a3; line-height: 1.9; }
.story-basis summary { cursor: pointer; padding: 8px 0; }
.story-basis dl { margin-top: 15px; }.story-basis dt { margin-top: 18px; color: #d1b7aa; }.story-basis dd { margin: 7px 0 0; white-space: pre-line; }
.story-footnote, .story-flow-date { margin: 0; padding: 22px 26px 28px; background: #11141e; color: #b6a6ad; font-size: 11px; line-height: 1.9; word-break: keep-all; }
.story-flow-date { text-align: center; color: #c2a890; }
.story-period-title { text-align: center; padding: 40px 24px 23px; background: radial-gradient(ellipse at bottom,#39263044,#11141e 70%); }
.story-period-title p { color: #c6a58c; font-size: 12px; margin: 0 0 20px; }
.story-period-title h3 { font-size: 33px; font-weight: 400; letter-spacing: -.04em; margin: 0 0 14px; color: #eed5b9; }
.story-period-title > span { color: #b9a4ac; font-size: 12px; }
.story-timeline { padding: 35px 30px 50px; background: #11141e; }
.story-timeline h3 { font-size: 16px; font-weight: 500; margin-bottom: 30px; color: #ddc3ad; }
.story-timeline p { border-left: 1px solid #ba976545; padding: 12px 0 12px 22px; margin: 0; display: grid; gap: 9px; }
.story-timeline strong { font-size: 12px; font-weight: 500; }.story-timeline span { color: #b3a0ad; font-size: 11px; }
.story-timeline [data-golden='true'] strong { color: #e0b885; }
.personal-story-closing { padding-top: 30px; }
.story-last-line { text-align: center; font-size: 18px; line-height: 2; padding: 48px 30px 0; margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.story-signature { text-align: center; font-size: 24px; color: #cbb3bc; font-style: italic; margin: 30px 0; }
.personal-story-closing > .story-footnote { text-align: center; }
@media (max-width:359px) { .story-navigation { padding-inline: 15px; }.story-element .element-light { width: 39px; height: 39px; }.story-manuscript { padding-inline: 22px; } }