/* Scroll story: sticky photo that changes as the steps scroll. Loaded only by pages that contain <section class="story">. */
/* sticky needs no scroll-container ancestor: the site sets html,body{overflow-x:clip} */
html:has(.story), html:has(.story) body { overflow-x: clip; }
html.has-story, html.has-story body { overflow-x: clip; }
.story{--story-bg:var(--navy,#050D1F);--story-frame:#0c1830;--story-text:#f5f3ee;--story-accent:var(--gold,#C4A96A);
  --story-serif:'Cormorant Garamond',Georgia,serif;--story-ease:cubic-bezier(.2,.7,.1,1);--story-nav:var(--nav-h,56px);
  background:var(--story-bg);color:var(--story-text)}
.story__container{max-width:1180px;margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2.5rem)}
.story__intro{max-width:48rem;padding-top:clamp(4rem,9vw,8rem)}
.story .story__eyebrow{margin:0 0 1rem;font-size:.7rem!important;line-height:1.5!important;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--story-accent)}
.story .story__intro h2,.story .story__step h3{font-family:var(--story-serif);font-weight:300;letter-spacing:-.015em;text-wrap:balance;color:var(--story-text)!important}
.story .story__intro h2{margin:.6rem 0 0;font-size:clamp(2.1rem,4.2vw,3.4rem)!important;line-height:1.06!important}
.story .story__intro h2 em,.story .story__step h3 em{font-style:italic;color:var(--story-accent)!important}
.story .story__lead{max-width:36em;margin:1.1rem 0 0;font-size:clamp(1rem,1.4vw,1.15rem)!important;line-height:1.7!important;font-weight:300;color:color-mix(in srgb,var(--story-text) 70%,var(--story-bg))}
.story__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:0 clamp(2rem,5vw,5rem)}
.story__media{position:sticky;top:var(--story-nav);height:calc(100vh - var(--story-nav));display:flex;align-items:center}
.story__frame{position:relative;width:100%;aspect-ratio:4/3;max-height:min(72vh,720px);overflow:hidden;border-radius:4px;background:var(--story-frame)}
.story__layer{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--story-ease)}
.story__layer.is-on{opacity:1}
.story__layer img,.story__img img{display:block;width:100%;height:100%;object-fit:cover}
.story__layer img{transform:scale(calc(1 + .07 * (1 - var(--lp,0))));will-change:transform}
.story__layer::after,.story__img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,color-mix(in srgb,var(--story-bg) 75%,transparent))}
.story__rail{position:absolute;left:1.4rem;right:1.4rem;bottom:1.2rem;z-index:2;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.5rem;margin:0;padding:0;list-style:none}
.story__rail li{position:relative;padding-top:.7rem;font-size:.7rem;line-height:1.25;color:color-mix(in srgb,var(--story-text) 68%,var(--story-bg));transition:color .5s var(--story-ease)}
.story__rail li::before,.story__rail li::after{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.story__rail li::before{background:color-mix(in srgb,var(--story-text) 25%,transparent)}
.story__rail li::after{background:var(--story-accent);transform:scaleX(var(--f,0));transform-origin:left}
.story__rail li b{display:block;font-family:var(--story-serif);font-size:1.05rem;font-weight:500;color:var(--story-text)}
.story__rail li.is-on{color:var(--story-text)}
.story__step{display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - var(--story-nav));padding:2.5rem 0}
.story .story__num{margin:0;font-family:var(--story-serif);font-size:1rem!important;line-height:1.5!important;letter-spacing:.04em;color:var(--story-accent)}
.story .story__step h3{margin:.7rem 0 1rem;font-size:clamp(1.8rem,3.2vw,2.8rem)!important;line-height:1.08!important}
.story .story__desc{max-width:32em;margin:0;font-size:.95rem!important;line-height:1.8!important;font-weight:300;color:color-mix(in srgb,var(--story-text) 72%,var(--story-bg))}
.story__links{max-width:32em;margin:1.6rem 0 0;padding:0;list-style:none;border-top:1px solid color-mix(in srgb,var(--story-text) 16%,transparent)}
.story__links a{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:50px;padding:.65rem 0;border-bottom:1px solid color-mix(in srgb,var(--story-text) 16%,transparent);color:var(--story-text);font-size:.9rem;text-decoration:none;transition:padding .45s var(--story-ease)}
.story__links a::after{content:'→';color:var(--story-accent);transition:transform .4s var(--story-ease)}
.story__links a:hover{padding-left:.5rem}
.story__links a:hover::after{transform:translateX(4px)}
.story__img{display:none;position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:4px;margin-bottom:1.6rem}
.story__outro{height:12vh}
.story.is-pinned .story__step{opacity:.28;transition:opacity .7s var(--story-ease)}
.story.is-pinned .story__step.is-on{opacity:1}
.story:not(.is-pinned) .story__grid{grid-template-columns:1fr}
.story:not(.is-pinned) .story__media{display:none}
.story:not(.is-pinned) .story__img{display:block}
.story:not(.is-pinned) .story__step{min-height:0;padding:clamp(2rem,5vw,3.5rem) 0}
.story:not(.is-pinned) .story__outro{height:0;padding-bottom:3rem}
@media (min-width:761px){
  .story:not(.is-pinned) .story__step{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,5vw,3.5rem);align-items:center}
  .story:not(.is-pinned) .story__img{grid-row:span 4;margin:0}
}
html.js .story .sr{opacity:0;transform:translate3d(0,28px,0);transition:opacity .9s var(--story-ease),transform 1.1s var(--story-ease);transition-delay:var(--d,0ms)}
html.js .story .sr.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .story .sr{transform:none;transition:opacity .15s linear;transition-delay:0ms}.story__layer img{transform:none!important}}
.story .story__intro h2 .serif-i{font-style:italic;color:var(--story-accent)!important}
[dir="rtl"] .story__rail li::after{transform-origin:right}
[dir="rtl"] .story__links a::after{content:'←'}
[dir="rtl"] .story__links a:hover{padding-left:0;padding-right:.5rem}
[dir="rtl"] .story__links a:hover::after{transform:translateX(-4px)}