/* Content/visual order refinements requested for the home page. */
#story>.section-heading{text-align:center}
#story>.section-heading>div{margin-inline:auto}
#story>.section-heading .eyebrow{justify-content:center}
#letter{grid-template-columns:7fr 5fr}
#letter>.letter-copy{grid-column:1;grid-row:1}
#letter>.letter-profile{grid-column:2;grid-row:1}
/* The wrapper provides the sticky range; the story remains in document flow. */
.home-transition{--site-header-height:86px;position:relative;isolation:isolate}
#story{padding-inline:var(--content-gutter);position:relative;background:transparent;z-index:1}
.home-transition #home>.hero-copy{transform:translate3d(0,var(--hero-copy-y,0px),0);opacity:var(--hero-opacity,1)}
.home-transition #home .hero-official-background{transform:translate(-50%,-37%);will-change:auto}
@media(prefers-reduced-motion:no-preference){
 .home-transition.transition-active>#home{position:sticky;top:var(--hero-pin-top,var(--site-header-height));z-index:0}
 .home-transition.transition-active>#home>.hero-copy{will-change:transform,opacity}
 .home-transition.transition-active>#story{transform:translate3d(0,var(--story-y,56px),0);will-change:transform}
 .home-transition.transition-active>#story>*{opacity:var(--story-opacity,0);will-change:opacity}
 .home-transition.transition-active>#story:before{opacity:var(--story-bg-opacity,0)}
}
@media(max-width:800px){#letter{grid-template-columns:1fr}#letter>.letter-copy,#letter>.letter-profile{grid-column:auto;grid-row:auto}#letter>.letter-profile{justify-self:center;width:min(100%,500px)}}
@media(prefers-reduced-motion:reduce){.home-transition #home>.hero-copy,.home-transition #story{transform:none;opacity:1;will-change:auto}}

.home-transition #home .hero-anniversary-label{opacity:var(--hero-caption-opacity,1)}

/* Separate the incoming content from its later appearing paper background. */
#story:before{content:'';position:absolute;inset:0;z-index:-1;background:#f0ede7;pointer-events:none}
.home-transition.transition-active #home>.hero-scene{opacity:var(--hero-opacity,1);will-change:opacity}
#home>.hero-copy>.hero-anniversary-label{position:static;inset:auto;transform:none;width:auto;margin:0 auto 6px;padding:0;background:none;opacity:1;line-height:1.5}
@media(prefers-reduced-motion:reduce){.home-transition #home>.hero-scene,.home-transition #story>*,.home-transition #story:before{opacity:1;will-change:auto}}

.home-transition.transition-active #home>.anniversary-badge{opacity:var(--hero-badge-opacity,1)}

/* The visual and copy share exactly the same scroll-driven opacity. */
.home-transition #home>.hero-copy,.home-transition.transition-active #home>.hero-scene{opacity:var(--hero-opacity,1)}
.home-transition.transition-active>#story{margin-top:var(--story-entry-gap,0px)}

/* Let the title settle gently before the cinema content, without moving the section box. */
@media(prefers-reduced-motion:no-preference){
 .home-transition.transition-active>#story{transform:none;will-change:auto}
 .home-transition.transition-active>#story>.section-heading{opacity:var(--story-title-opacity,0);transform:translate3d(0,var(--story-title-y,24px),0);will-change:transform,opacity}
 .home-transition.transition-active>#story>.story-grid{opacity:var(--story-opacity,0);transform:translate3d(0,var(--story-content-y,16px),0);will-change:transform,opacity}
}
@media(prefers-reduced-motion:reduce){
 .home-transition #story>.section-heading,.home-transition #story>.story-grid{opacity:1;transform:none;will-change:auto}
}