/* The no-JS/reduced-motion version remains an ordinary three-part photo essay. */
.workshop-story{background:var(--canvas);position:relative}
.story-stage{position:relative;background:var(--canvas)}
.story-frame{height:420px;width:100%;object-fit:cover;display:block}
.story-frame:nth-of-type(1){object-position:50% 45%}
.story-frame:nth-of-type(2){object-position:50% 52%}
.story-copy{padding-block:54px}.story-copy h2{font-size:clamp(42px,5.4vw,78px);max-width:880px}
.story-copy p{font-size:18px;max-width:40ch;color:var(--ivory);margin-top:28px}
.story-shade,.story-track{display:none}
.story-follow{padding:20px clamp(24px,5vw,80px);background:var(--canvas);font-size:13px;display:flex;justify-content:space-between;gap:24px}
.story-follow>span{color:var(--reading-ink)}
.workshop-story.is-motion{height:240svh}
.is-motion .story-stage{position:sticky;top:0;height:100svh;min-height:480px;overflow:hidden;isolation:isolate}
.is-motion .story-frame{position:absolute;inset:0;width:100%;height:100%;opacity:0;max-width:none;will-change:transform,opacity}
.is-motion .story-frame:first-of-type{opacity:1}
.is-motion .story-shade{display:block;position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,12,.82),rgba(11,11,12,.08) 95%),linear-gradient(0deg,rgba(11,11,12,.8),transparent 60%);z-index:1}
.is-motion .story-copy{position:absolute;left:0;right:0;top:50%;translate:0 -50%;z-index:2;opacity:0;padding-block:0;pointer-events:none}
.is-motion .story-copy:first-of-type{opacity:1}
.is-motion .story-track{position:absolute;display:flex;left:clamp(24px,5vw,80px);right:clamp(24px,5vw,80px);bottom:45px;z-index:2;gap:24px}
.story-marker{flex:1;position:relative;padding-top:16px;color:#c8c3b9;font-size:13px;border-top:1px solid #f2efe84d}
.story-marker:before{content:'';position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--gold);transform:scaleX(var(--fill,0));transform-origin:left}
.story-marker.active{color:var(--ivory)}
.is-motion+.story-follow{position:relative}
.has-scroll-motion .hero-media,.has-scroll-motion .hero-film{transform:translateY(var(--hero-drift,0px)) scale(var(--hero-scale,1));transform-origin:center}
@media(max-width:767px){
 .workshop-story.is-motion{height:210svh}
 .is-motion .story-frame{object-position:58% 50%}
 .is-motion .story-copy{top:auto;bottom:140px;translate:none}
 .story-copy h2{font-size:clamp(38px,10.5vw,54px)}.story-copy p{font-size:16px;max-width:30ch;margin-top:22px}
 .is-motion .story-shade{background:linear-gradient(0deg,rgba(11,11,12,.96),rgba(11,11,12,.45) 65%,rgba(11,11,12,.18))}
 .is-motion .story-track{bottom:35px;gap:14px}.story-marker{font-size:11px;line-height:1.4}
 .story-follow{flex-direction:column;gap:5px;font-size:12px}
 .story-frame{height:330px}
}
@media(prefers-reduced-motion:reduce){.has-scroll-motion .hero-media,.has-scroll-motion .hero-film{transform:none!important}.workshop-story.is-motion{height:auto}.is-motion .story-stage{position:relative;height:auto}.is-motion .story-frame{position:relative;height:330px;opacity:1!important;transform:none!important}.is-motion .story-copy{position:relative;top:auto;bottom:auto;opacity:1!important;transform:none!important;translate:none;padding-block:40px}.is-motion .story-shade,.is-motion .story-track{display:none}}