/* A few directed scenes. Prose remains visible at every reading position. */
.story-beat{min-width:0;position:relative}
.story-beat+.story-beat{margin-top:34px}
#app .story-beat>p{font-size:1.1rem;line-height:2;color:#d0d5c8;margin:0 0 20px;overflow-wrap:break-word}
#app .story-beat>p:last-child{margin-bottom:0}
.story-beat--recognition,.story-beat--reflection{padding-block:24px 8px;border-top:1px solid #bca47445}
#app .story-beat--recognition>.rescue-thought{max-width:none;margin:28px 0 10px;padding:14px 0;border:0;background:none}
#app .story-beat--recognition>.rescue-thought p{font-family:var(--font-heading,serif);font-size:clamp(25px,3.2vw,36px);line-height:1.65;color:var(--story-thought-ink);letter-spacing:.025em}
.story-beat--interruption{padding-top:20px;border-top:1px solid #bca47445}
#app .story-beat--interruption>.chronicle-speech:first-child{padding:22px 20px;margin:0 0 26px;background:linear-gradient(100deg,#bca4741b,transparent);border-color:#d0b783}
#app .story-beat--interruption>.chronicle-speech:first-child>.chronicle-portrait{width:70px;height:70px;flex-basis:70px}
#app .story-beat--interruption>.chronicle-speech:first-child p{font-size:1.15rem;color:#f0e4cd}
.story-beat--reply{padding-top:12px}
.story-beat--comparison .coda-dates{margin:26px 0 0}
.story-beat--realisation{padding-top:16px}
.story-beat--realisation>.rescue-thought{margin-bottom:0}
.story-photo-prelude .coda-photo-back{margin:34px auto 30px;width:208px;min-height:236px;transform:rotate(-3deg);border-color:#b9aa8a;box-shadow:6px 12px 28px #0005}
.story-photo-prelude .coda-photo-back small{font-size:12px}
.story-photo-prelude .story-beat:last-child{max-width:36rem;margin-inline:auto}
.story-photo-sequence .story-beat--body{margin-top:38px}
.story-photo-sequence .story-beat--interruption{margin-top:44px}
.chronicle-preface[data-story-stage]{align-items:start;gap:40px}
.chronicle-preface[data-story-stage] .chronicle-preface-scene{position:sticky;top:24px;align-self:start;margin-top:16px}
.story-awakening-frame{overflow:hidden;border:1px solid #ba9d6152;background:#0b1715;box-shadow:0 15px 38px #0006;aspect-ratio:3/2}
.story-awakening-frame>img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:30% 45%}
#app .chronicle-preface-text .story-beat>p{font-size:1rem;line-height:1.9;margin-bottom:18px}
#app .chronicle-preface-text .story-beat--touch>p:first-child{font-family:var(--font-heading,serif);font-size:1.3rem;color:#f0e4cb;line-height:1.8;margin:4px 0 23px}
#app .chronicle-preface-text .story-beat--reflection>p{color:#e8ddc7}
#app .chronicle-preface-text .story-beat--voice>.chronicle-speech{margin:20px 0}
@media(min-width:981px) and (prefers-reduced-motion:no-preference){
 .story-awakening-frame>img{transition:transform 1.2s ease}
 [data-story-focus="voice"] .story-awakening-frame>img{transform:scale(1.045)}
 [data-story-focus="reflection"] .story-awakening-frame>img{transform:scale(1.085)}
}
@media(prefers-reduced-motion:no-preference){
 .story-beat--interruption>.chronicle-speech{transition:background-color .4s ease,border-color .4s ease}
 [data-story-focus="interruption"] .story-beat--interruption>.chronicle-speech:first-child{background-color:#bca4740d;border-color:#edce90}
}
@media(max-width:980px){
 .chronicle-preface[data-story-stage]{gap:24px}
 .chronicle-preface[data-story-stage] .chronicle-preface-scene{position:static;margin-top:0}
}
@media(max-width:600px){
 #app .story-beat>p{font-size:1rem;line-height:1.9;margin-bottom:18px}
 .story-beat+.story-beat{margin-top:28px}
 .story-beat--recognition,.story-beat--reflection{padding-top:22px}
 .story-photo-sequence .story-beat--interruption{margin-top:34px}
 #app .story-beat--interruption>.chronicle-speech:first-child{padding:18px 12px;gap:12px}
 #app .story-beat--interruption>.chronicle-speech:first-child>.chronicle-portrait{width:56px;height:56px;flex-basis:56px}
 #app .story-beat--interruption>.chronicle-speech:first-child p{font-size:1.0625rem}
 .story-photo-prelude .coda-photo-back{width:180px;min-height:205px;margin:28px auto}
 .story-awakening-frame{border-inline:0}
 #app .story-beat .coda-dates section{min-width:0}
 #app .story-beat .coda-dates strong{font-size:clamp(21px,6vw,30px);overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){
 .story-awakening-frame>img,.story-beat--interruption>.chronicle-speech{transition:none;transform:none}
}
body[data-motion="reduced"] .story-awakening-frame>img,
body[data-motion="reduced"] .story-beat--interruption>.chronicle-speech{transition:none;transform:none}