.content-page{--ambient-surface:#111816;background:#111816;color:var(--paper)}
.content-stage{position:relative;isolation:isolate;background:#111816}
.content-backdrop{position:sticky;top:0;height:100svh;margin-bottom:-100svh;overflow:hidden;z-index:0;pointer-events:none}
.content-image,.content-shade,.content-dim{position:absolute;inset:0;width:100%;height:100%}
.content-image{object-fit:cover;object-position:center;transform:scale(1.02);transition:transform 400ms var(--motion-ease)}
.content-shade{background:linear-gradient(180deg,#06100c52 0%,#06100c14 25%,#06100ca6 100%),linear-gradient(90deg,#06100c45,transparent 55%,#06100c45)}
.content-dim{background:#050a08;opacity:0}
.content-width{width:min(100%,calc(var(--content) + 2 * var(--gutter)));margin-inline:auto;padding-inline:var(--gutter)}
.content-hero{position:relative;z-index:1;height:100svh;min-height:34rem}
.content-hero-viewport{position:relative;height:100svh;min-height:34rem;display:flex;align-items:flex-end}
.content-hero-content{padding-top:9rem;padding-bottom:clamp(3rem,7vh,7rem)}
.content-intro{max-width:36ch;font-size:clamp(1rem,1.35vw,1.5rem);line-height:1.6;letter-spacing:-.02em;margin:0 0 clamp(2rem,4vh,4rem)}
.content-hero h1{font-size:clamp(4rem,7.4vw,9.5rem);line-height:1.02;letter-spacing:-.065em;font-weight:750;margin:0}
.content-chapter{position:relative;z-index:1;min-height:90svh;display:flex;align-items:center;padding-block:clamp(5rem,9vh,8rem)}
.chapter-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(3rem,8vw,10rem);align-items:start}
.chapter-copy{max-width:38rem;width:100%}
.chapter-right .chapter-copy{grid-column:2;justify-self:end}
.chapter-left .chapter-copy{grid-column:1}
.content-chapter h2{font-size:clamp(3rem,5.25vw,6.75rem);line-height:1.04;font-weight:650;letter-spacing:-.06em;margin:0 0 2rem}
.chapter-body{font-size:clamp(1rem,1.2vw,1.35rem);line-height:1.75;letter-spacing:-.02em;max-width:38ch;color:#f5f4ede6}
.chapter-body p{margin:0 0 1.25rem}
.chapter-body p:last-child{margin-bottom:0}
.chapter-button{max-width:23rem;margin-top:2.5rem}
.chapter-final .chapter-copy{padding-top:.4rem}
.text-motion-ready .content-page .content-intro,.text-motion-ready .content-page :is(.chapter-body,.chapter-button){opacity:0;transform:translate3d(0,18px,0)}
.text-motion-ready .content-page :is(.content-hero,.content-chapter) .title-mask>span{transform:translate3d(0,110%,0)}
.text-motion-ready .content-page .text-entered .title-mask>span{transform:none;transition:transform 1100ms var(--motion-ease)}
.text-motion-ready .content-page .text-entered .title-mask~.title-mask>span{transition-delay:100ms}
.text-motion-ready .content-page .content-hero.text-entered .title-mask>span{transition-delay:160ms}
.text-motion-ready .content-page .content-hero.text-entered .title-mask~.title-mask>span{transition-delay:260ms}
.text-motion-ready .content-page .text-entered .content-intro{opacity:1;transform:none;transition:opacity 1100ms var(--motion-ease),transform 1100ms var(--motion-ease)}
.text-motion-ready .content-page .text-entered .chapter-body{opacity:1;transform:none;transition:opacity 1100ms var(--motion-ease) 180ms,transform 1100ms var(--motion-ease) 180ms}
.text-motion-ready .content-page .text-entered .chapter-button{opacity:1;transform:none;transition:opacity 1100ms var(--motion-ease) 380ms,transform 1100ms var(--motion-ease) 380ms}
.content-chapter:focus-within :is(.chapter-body,.chapter-button),.content-chapter:focus-within .title-mask>span{opacity:1!important;transform:none!important}
@media(max-width:760px){.content-hero h1{font-size:clamp(2.5rem,10.2vw,4.6rem)}.content-hero-content{padding-bottom:3rem}.content-intro{max-width:31ch;margin-bottom:2rem}.chapter-grid{grid-template-columns:minmax(0,1fr);gap:2rem}.chapter-right .chapter-copy,.chapter-left .chapter-copy{grid-column:1;justify-self:start}.content-chapter{padding-block:5rem}.content-chapter h2{font-size:clamp(2.65rem,10vw,4.25rem)}.chapter-body{max-width:34ch}.chapter-final h2{margin-bottom:0}}
@media(prefers-reduced-motion:reduce){.content-image{transform:none!important;transition:none}.content-page :is(.content-intro,.chapter-body,.chapter-button),.content-page .title-mask>span{opacity:1!important;transform:none!important;transition:none!important}}

/* Rectangular photographic pauses alongside the text. */
.chapter-figure{margin:0;width:100%;max-width:38rem;align-self:center}
.chapter-right .chapter-figure{grid-column:1;grid-row:1}
.chapter-right .chapter-copy{grid-row:1;align-self:center}
.chapter-left .chapter-figure{grid-column:2;grid-row:1;justify-self:end}
.chapter-left .chapter-copy{grid-row:1;align-self:center}
.chapter-image-frame{position:relative;overflow:hidden;aspect-ratio:4/5;background:#152623}
.chapter-left .chapter-image-frame{aspect-ratio:5/4}
.chapter-image-frame img{position:absolute;left:0;top:-10%;display:block;width:100%;height:120%;object-fit:cover;transform:translate3d(0,var(--chapter-image-drift,0px),0)}
.chapter-figure figcaption{margin-top:1rem;font-size:.8125rem;line-height:1.5;color:#f5f4edb3;letter-spacing:.015em}
.text-motion-ready .chapter-figure{opacity:0;clip-path:inset(6% 0 0 0);transform:translate3d(0,24px,0)}
.text-motion-ready .text-entered .chapter-figure{opacity:1;clip-path:inset(0);transform:none;transition:opacity 1200ms var(--motion-ease),clip-path 1400ms var(--motion-ease),transform 1400ms var(--motion-ease)}
.content-page .site-footer{background:#111816}
@media(max-width:760px){.chapter-right .chapter-figure,.chapter-left .chapter-figure{grid-column:1;grid-row:2;justify-self:start;max-width:32rem;margin-top:1rem}.chapter-right .chapter-copy,.chapter-left .chapter-copy{grid-column:1;grid-row:1}.chapter-image-frame{aspect-ratio:5/4}.chapter-figure figcaption{font-size:.8125rem}}
@media(prefers-reduced-motion:reduce){.chapter-figure{opacity:1!important;clip-path:none!important;transform:none!important;transition:none!important}.chapter-image-frame img{transform:none!important}}
