/* An editorial chapter with a layered photographic composition. */
.story{padding-block:110px 130px}
.story .section-top{margin-bottom:38px}
.story-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;margin-bottom:58px}
.story-heading h2{font-size:clamp(50px,5.7vw,84px);letter-spacing:-4px;line-height:1.12;margin:0}
.story-heading h2 em{display:inline-block;position:relative;isolation:isolate;color:var(--ink)}
.story-heading h2 em:after{content:'';position:absolute;height:15%;background:var(--lime);bottom:7%;left:0;right:0;z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform 1.2s .3s cubic-bezier(.22,1,.36,1)}
.story-heading.visible h2 em:after,html:not(.js) .story-heading h2 em:after{transform:scaleX(1)}
.story-heading>p{margin:0 0 6px;font-size:15px;line-height:1.7;color:var(--muted)}
.story-layout{grid-template-columns:1fr 1fr;gap:8%;align-items:start}
.story-stage{position:sticky;top:130px;padding:0 32px 110px 0;isolation:isolate;min-width:0}
.story .story-portrait{min-height:0;height:560px;border-radius:160px 12px 12px 12px;background:var(--ink);box-shadow:0 22px 50px #173e3515}
.story .story-portrait>img{height:100%;min-height:0;object-position:63% center;transform:scale(1.09);transition:transform 1.9s cubic-bezier(.22,1,.36,1);filter:saturate(.8)}
.story-stage.visible .story-portrait>img{transform:scale(1)}
.story .story-caption{left:30px;bottom:32px;right:25px}
.story .story-caption span{font-size:11px;letter-spacing:.3px}
.story .story-caption h3{font-size:42px;line-height:1.1;font-weight:500}
.story-year{position:absolute;top:35px;right:4px;z-index:3;background:var(--lime);width:150px;padding:22px 12px;text-align:center;transform:rotate(6deg);box-shadow:0 8px 25px #183d3515;transition:transform .6s}
.story-stage:hover .story-year{transform:rotate(0) translateY(-5px)}
.story-year strong{display:block;font:500 49px/1.3 var(--display);letter-spacing:-2px}
.story-year span{display:block;font-size:10px;letter-spacing:.6px}
.story-memory{position:absolute;bottom:5px;right:-8px;width:51%;margin:0;background:var(--paper);padding:8px;border-radius:7px;transform:rotate(-7deg);box-shadow:0 15px 40px #173e3526;z-index:4}
.story-memory img{aspect-ratio:1.72;object-fit:cover;border-radius:3px;width:100%}
.story-memory figcaption{font-size:10px;padding:11px 2px 3px;text-align:center}
.story-stage.visible .story-memory{animation:story-drift 8s 1s ease-in-out infinite}
.story-orbit{position:absolute;bottom:0;left:30px;width:155px;height:155px;border:1px solid #b5c29e;border-radius:50%;z-index:-1}
.story-orbit:after{content:'';position:absolute;inset:18px;border:1px solid #b5c29e;border-radius:50%}
.story-quote{margin:0 0 30px;font:500 clamp(22px,2.1vw,31px)/1.5 var(--display);letter-spacing:-1px;padding:0 0 28px;border-bottom:1px solid var(--line)}
.story-quote em{color:#6b8060}
.story .story-accordions{position:relative;margin:0 0 32px}
.story .story-accordions:before{content:'';position:absolute;left:21px;top:32px;bottom:30px;width:1px;background:var(--line)}
.story .story-chapter{position:relative;border:0!important;border-bottom:1px solid var(--line)!important;box-sizing:content-box}
.story .story-chapter summary{gap:18px;padding:21px 0;font-size:18px;min-height:85px}
.story .story-chapter summary:after{display:none}
.story .story-num{width:43px;height:43px;flex:0 0 43px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--paper);font-size:12px;color:var(--muted);position:relative;transition:background .4s,border-color .4s,color .4s}
.story .story-chapter[data-expanded=true] .story-num{background:var(--ink);border-color:var(--ink);color:var(--lime)}
.chapter-toggle{width:28px;height:28px;position:relative;display:block;margin-left:auto;flex-shrink:0}
.chapter-toggle:before,.chapter-toggle:after{content:'';position:absolute;width:12px;height:1px;left:8px;top:14px;background:var(--ink);transition:transform .4s}
.chapter-toggle:after{transform:rotate(90deg)}
.story-chapter[data-expanded=true] .chapter-toggle:after{transform:rotate(0)}
.chapter-body{padding:0 0 9px 61px}
.story .story-accordions .chapter-body p{padding:0;font-size:15px;line-height:1.85;margin:0 0 19px}
.story-cta{gap:40px}
@keyframes story-drift{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-9px) rotate(-5deg)}}
@media(min-width:1500px){.story .story-portrait{height:640px}}
@media(max-width:1100px){.story-heading h2{font-size:64px;letter-spacing:-3px}.story-layout{gap:5%}.story .story-portrait{height:540px}.story-stage{padding-right:20px}.story-year{width:130px;right:-3px}.story-year strong{font-size:42px}.story-quote{font-size:25px}.story .story-caption h3{font-size:37px}.story .story-caption span{font-size:10px}.story-heading>p{font-size:13px}}
@media(max-width:800px){.story{padding-block:75px}.story-heading{display:block;margin-bottom:40px}.story-heading>p{margin-top:22px;font-size:15px}.story-layout{grid-template-columns:1fr;gap:45px}.story-stage{position:relative;top:auto;max-width:580px;width:100%;margin-inline:auto;padding-right:28px}.story .story-portrait{height:510px;border-top-left-radius:130px}.story-year{width:150px;right:0}.story-year strong{font-size:49px}.story-memory{width:46%;right:0}.story-content{max-width:640px;margin-inline:auto;width:100%}.story-quote{font-size:28px;letter-spacing:-.8px}.story .story-accordions .chapter-body p{font-size:16px}}
@media(max-width:450px){.story-heading h2{font-size:51px;letter-spacing:-2.5px}.story-heading h2 em{display:table}.story .section-top{margin-bottom:28px}.story-stage{padding-right:17px;padding-bottom:65px}.story .story-portrait{height:400px;border-top-left-radius:100px}.story-year{top:22px;right:-2px;width:117px;padding:15px 8px}.story-year strong{font-size:40px}.story-year span{font-size:9px;letter-spacing:.2px}.story .story-caption{left:23px;bottom:31px}.story .story-caption h3{font-size:34px}.story .story-caption span{font-size:9px}.story-memory{width:54%;right:0;bottom:5px;padding:6px}.story-memory figcaption{font-size:8px;padding-top:7px}.story-orbit{width:130px;height:130px;left:13px}.story-quote{font-size:24px}.story .story-chapter summary{font-size:17px;gap:14px}.chapter-body{padding-left:0}.story .story-accordions:before{display:none}.story .story-accordions .chapter-body p{font-size:15px}}
@media(max-width:450px){.story-stage{padding-bottom:130px}.story-memory{bottom:-5px}}
@media(prefers-reduced-motion:reduce){.story-stage .story-memory{animation:none!important}.story-heading h2 em:after{transform:scaleX(1)}.story .story-portrait>img{transform:none}}