/* A quiet, screen-by-screen scrapbook, using the portfolio type and paper. */
html:has(.about-story-page){scroll-snap-type:y mandatory;scroll-behavior:smooth}
.about-story-page{--about-paper:#efece4;--about-ink:#623521;background:var(--about-paper);overflow-x:clip}
.about-story-page *{box-sizing:border-box}
.about-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.about-opening,.about-chapter,.about-life{position:relative;min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always}
.about-opening{isolation:isolate;display:grid;place-items:center;padding:100px 24px 40px}
.about-opening-pattern{position:absolute;inset:0 0 auto;height:68%;z-index:-1;background:url('/assets/about/background.webp') center/cover no-repeat;border-bottom:1px solid #62352114}
/* Three independent supplied photos; the center stays above the opening wings. */
.about-photo-combo{position:relative;width:min(680px,88vw,87svh);aspect-ratio:1.34;isolation:isolate}
.about-photo{display:block;position:absolute;height:auto;object-fit:contain}
.about-photo-center{width:60%;left:20%;top:0;z-index:2}
.about-photo-left{width:43%;left:0;top:24%;z-index:1;transform-origin:85% 50%}
.about-photo-right{width:43%;right:0;top:22%;z-index:1;transform-origin:15% 50%}
/* A light fade replaces the large wing-opening movement on cold loads. */
.about-opening .about-photo{animation:about-photo-arrive .65s cubic-bezier(.2,.7,.3,1) both}
.about-opening .about-photo-left{animation-delay:.08s}
.about-opening .about-photo-right{animation-delay:.14s}
.about-image-pending{opacity:0!important}
.about-opening .about-photo.about-image-ready,.about-image-ready{animation:about-image-arrive .6s ease both}
@keyframes about-photo-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes about-image-arrive{from{opacity:0}to{opacity:1}}
.about-timeline{max-width:1120px;margin:auto;padding:0 40px}
.about-chapter{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:32px;padding:88px 0 60px}
.about-chapter::before{content:'';position:absolute;top:0;left:50%;width:1px;height:72px;background:#62352130}
body.about-story-page #about-story .about-chapter-copy,body.about-story-page #about-story .about-next-copy p{font-size:13px!important;font-weight:300!important;line-height:1.95!important;letter-spacing:.012em;color:#64615f!important;opacity:.86;margin:0;text-wrap:pretty;text-align:center}
.about-collage{display:block;width:min(500px,62svh);height:auto;max-height:58svh;object-fit:contain;order:0}
.about-chapter-copy{order:1;max-width:410px}
.about-next{gap:28px}
.about-next .about-collage{width:min(430px,49svh);max-height:44svh}
.about-next-copy{max-width:510px;text-align:center;order:1}
.about-next-copy p+p{margin-top:20px!important}
.about-life{display:flex;flex-direction:column;justify-content:center;padding:100px 0;overflow:hidden}
body.about-story-page .about-life h2{font-family:'Hepta Slab',serif!important;font-size:clamp(23px,2.4vw,30px);font-weight:400;letter-spacing:-.04em;line-height:1.4;color:var(--about-ink);text-align:center;margin:0 24px 64px}
.about-life .canvas-carousel{width:100%;max-width:1120px;margin:0 auto;padding:0 40px}
.about-photo-placeholder{width:272px;height:255px;display:grid;place-items:center;background:#e3dfd5;box-shadow:0 8px 24px #4235220b}
.about-photo-placeholder.tone-1{width:196px;background:#dce3e2}
.about-photo-placeholder.tone-2{width:332px;background:#e7dcd3}
.about-photo-placeholder svg{width:28px;height:28px;stroke:#9b9185;stroke-width:1;opacity:.55}
.about-life .about-memory{cursor:grab}
.about-story-page .portfolio-contact-footer{background:var(--about-paper);scroll-snap-align:end}
/* Photos settle first, followed by the caption. No continuous repaint loop. */
.about-motion-ready .about-chapter .about-collage{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform 1.15s cubic-bezier(.16,1,.3,1)}
.about-motion-ready .about-chapter:nth-child(even) .about-collage{transform:translateY(14px)}
.about-motion-ready .about-chapter .about-chapter-copy,.about-motion-ready .about-next-copy,.about-motion-ready .about-life>h2{opacity:0;transform:translateY(16px);transition:opacity .8s ease .16s,transform .95s cubic-bezier(.16,1,.3,1) .16s}
.about-motion-ready .about-chapter.is-visible .about-collage,.about-motion-ready .about-chapter.is-visible .about-next-copy,.about-motion-ready .about-life.is-visible>h2{opacity:1;transform:none}
body.about-motion-ready #about-story .about-chapter:not(.is-visible) .about-chapter-copy{opacity:0}
body.about-motion-ready #about-story .about-chapter.is-visible .about-chapter-copy{opacity:.86;transform:none}
.about-motion-ready .about-life .canvas-carousel{opacity:0;transform:translateY(24px);transition:opacity .9s ease .12s,transform 1.1s cubic-bezier(.16,1,.3,1) .12s}
.about-motion-ready .about-life.is-visible .canvas-carousel{opacity:1;transform:none}
@media(max-width:700px){
 .about-opening{padding:100px 0 40px}.about-opening-pattern{height:61%}.about-photo-combo{width:94vw}
 .about-timeline{padding:0 32px}.about-chapter{gap:28px;padding:76px 0 52px}
 .about-chapter::before{height:52px}
 .about-chapter .about-collage{width:100%;max-width:360px;max-height:47svh}
 .about-chapter-copy{max-width:290px}
 .about-next .about-collage{width:90%;max-height:38svh}
 .about-next-copy{max-width:310px}
 .about-life{padding:88px 0}.about-life h2{margin-bottom:48px!important}
 .about-life .canvas-carousel{padding:0 24px}.about-photo-placeholder{height:204px;width:218px}.about-photo-placeholder.tone-1{width:156px}.about-photo-placeholder.tone-2{width:265px}
}
@media(prefers-reduced-motion:reduce){
 html:has(.about-story-page){scroll-behavior:auto;scroll-snap-type:y proximity}
 .about-story-page .about-opening .about-photo,.about-motion-ready .about-chapter .about-collage,.about-motion-ready .about-chapter .about-next-copy,.about-motion-ready .about-life .canvas-carousel,.about-motion-ready .about-life>h2{opacity:1;transform:none;transition:none}
 body.about-motion-ready #about-story .about-chapter .about-chapter-copy{opacity:.86;transform:none;transition:none}
}

@media(prefers-reduced-motion:reduce){
 .about-opening .about-photo,.about-image-ready{animation:none!important}
 .about-image-pending{opacity:1!important}
}