/* The approved botanical diary: real text, independent portrait, tactile paper. */
.chapter-art{display:none;position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.portrait.chapter-phase #gaze-stage{visibility:hidden}
.portrait.chapter-phase .chapter-art{display:block}
.chapter-photo{position:absolute;inset:0 0 0 auto;width:62%;height:100%;object-fit:cover;object-position:54% 38%}
.chapter-paper{position:absolute;inset:0 auto 0 0;width:58%;background:url(botanical-paper.webp) left center/100% 100% no-repeat;mask-image:linear-gradient(90deg,#000 88%,transparent 100%)}
.chapter-flower{position:absolute;left:43%;bottom:4%;width:clamp(90px,14vw,200px);height:auto;aspect-ratio:1;background:url(gerbera-atlas.webp) 100% 0/200% 200%;filter:drop-shadow(0 5px 9px #29432133);transform:rotate(-14deg)}
.portrait.chapter-phase{--chapter-size:clamp(24px,3.2vw,42px);--chapter-gap:.8em;color:#283d26;background:#f5efdf}
.portrait.chapter-phase .portrait-story{display:grid;grid-template-columns:44% 56%;grid-template-rows:auto auto;align-content:safe center;gap:32px 0;padding:clamp(65px,10vh,125px) 6% clamp(55px,8vh,100px);isolation:isolate;overflow-y:auto;animation:none}
.portrait.chapter-phase .story-copy{grid-column:1;grid-row:1;align-self:center;margin:0;width:100%;max-width:650px;text-align:left;text-shadow:none;overflow:visible;max-height:none}
.portrait.chapter-phase :is(#story-title,#story-secret,#story-outro){font:400 var(--chapter-size)/1.32 var(--serif);color:inherit;letter-spacing:-.025em;white-space:normal;text-wrap:pretty}
.portrait.chapter-phase :is(#story-secret,#story-outro){margin-top:var(--chapter-gap)}
.portrait.chapter-phase #story-outro{font-style:italic}
.portrait.chapter-phase .story-next{grid-column:1;grid-row:2;justify-self:start;align-self:start;margin:0;max-width:100%;border:0;border-radius:2px;background:#7b8964;color:#fff9e8;box-shadow:0 3px 7px #30442715;padding:15px 25px;font:400 clamp(17px,1.5vw,21px)/1.3 var(--serif);clip-path:polygon(1% 5%,24% 1%,47% 4%,72% 0,98% 5%,100% 42%,98% 96%,70% 99%,40% 96%,2% 100%,0 57%);backdrop-filter:none;transition:background .18s ease,scale .18s ease}
.portrait.chapter-phase .story-next:hover{background:#536d49}
.portrait.chapter-phase .story-next:active{scale:.98}
.portrait.chapter-phase .story-next:focus-visible{clip-path:none;outline:3px solid #314f38;outline-offset:5px}
.portrait.chapter-phase :is(.her-name,#whisper){display:none}
.portrait[data-chapter=realization] .chapter-photo{left:0;right:auto;object-position:49% 38%}
.portrait[data-chapter=realization] .chapter-paper{left:auto;right:0;width:62%;transform:scaleX(-1);filter:sepia(.12)}
.portrait[data-chapter=realization] .portrait-story{grid-template-columns:56% 44%}
.portrait[data-chapter=realization] :is(.story-copy,.story-next){grid-column:2}
.portrait[data-chapter=realization] .chapter-flower{left:auto;right:43%;bottom:5%;background-position:0 0;transform:rotate(18deg)}
.portrait[data-chapter=night]{color:#293e38;background:#e7e9df}
.portrait[data-chapter=night] .chapter-paper{filter:saturate(.45) hue-rotate(20deg) brightness(.96)}
.portrait[data-chapter=night] .chapter-photo{filter:brightness(.73) saturate(.72);object-position:59% 34%}
.portrait[data-chapter=night] .chapter-flower{background-position:0 100%;left:44%;bottom:auto;top:5%;width:clamp(85px,11vw,165px);transform:rotate(12deg)}
.portrait[data-chapter=night] .story-next{background:#506a60}
.portrait[data-chapter=night] .chapter-art:after{content:"";position:absolute;right:8%;top:5%;width:5px;height:5px;border-radius:50%;background:#fff6cf;box-shadow:30px 24px 0 -1px #fff6cf,55px -12px 0 -1px #fff6cf,-15px 45px 0 -2px #fff6cf}
/* The portrait moves above the paper on phones, instead of shrinking both columns. */
@media(max-width:700px) and (orientation:portrait){
 .portrait.chapter-phase{--chapter-size:clamp(20px,5.2vw,24px);--chapter-gap:.7em}
 .portrait.chapter-phase .portrait-story{display:flex;flex-direction:column;justify-content:safe center;gap:24px;padding:calc(37svh + 28px) 30px 26px;min-height:100%}
 .portrait.chapter-phase .chapter-art{position:fixed}
 .portrait.chapter-phase .chapter-photo{left:0;right:0;top:0;width:100%;height:43%;object-position:50% 30%}
 .portrait.chapter-phase .chapter-paper{left:0;right:0;top:36%;bottom:0;width:100%;transform:none;background-size:140% 135%;background-position:left 45%;mask-image:none;clip-path:polygon(0 2%,8% 1%,20% 2%,30% 0,42% 1.3%,57% 0,70% 2%,84% .5%,100% 2%,100% 100%,0 100%)}
 .portrait.chapter-phase .story-copy{align-self:stretch;margin:0;max-width:none}
 .portrait.chapter-phase .story-next{align-self:flex-start;flex-shrink:0;font-size:17px;padding:13px 22px}
 .portrait.chapter-phase .chapter-flower{left:auto;right:12px;top:32%;bottom:auto;width:75px}
 .portrait[data-chapter=realization] .chapter-flower{left:9px;right:auto;top:31%;width:70px}
 .portrait[data-chapter=realization] .chapter-paper{background-position:30% 48%}
 .portrait[data-chapter=night] .chapter-flower{top:32%;right:10px;left:auto;width:72px}
}
@media(max-height:650px) and (min-width:701px),(max-height:650px) and (orientation:landscape){
 .portrait.chapter-phase{--chapter-size:clamp(17px,2.6vw,23px);--chapter-gap:.6em}
 .portrait.chapter-phase .portrait-story{padding:35px 5% 30px;gap:18px}
 .portrait.chapter-phase .story-next{padding:11px 18px;font-size:16px}
 .portrait.chapter-phase .chapter-flower{width:80px;bottom:1%}
}
@media(max-width:400px) and (max-height:740px) and (orientation:portrait){
 .portrait.chapter-phase .portrait-story{padding-top:calc(29svh + 25px);gap:15px;padding-bottom:20px}
 .portrait.chapter-phase .chapter-photo{height:36%}
 .portrait.chapter-phase .chapter-paper{top:28%}
 .portrait.chapter-phase .chapter-flower{top:24%;width:60px}
}
/* Transition is coordinated with the text update in botanical-chapters.js. */
@media(prefers-reduced-motion:reduce){.portrait.chapter-phase .story-next{transition:none}}