/* sticky-story: pinned media + scrolling chapters. Zyqor Components, MIT. */
.ss{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,5vw,80px)}
.ss-steps{position:relative;padding:20vh 0 30vh}
.ss-step{min-height:72vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .5s ease}
.ss-step.is-active{opacity:1}
.ss-media{position:sticky;top:max(84px,calc(50vh - 17vw));aspect-ratio:var(--ss-ratio,16/10);align-self:start}
.ss-stage{position:relative;width:100%;height:100%;border-radius:14px;overflow:hidden;background:var(--ink,#3B2A20)}
.ss-frame{position:absolute;inset:0;margin:0;clip-path:inset(100% 0 0 0);transition:clip-path 1s cubic-bezier(.77,0,.18,1)}
.ss-frame.is-past{clip-path:inset(0 0 0 0)}
.ss-frame.is-active{clip-path:inset(0 0 0 0);z-index:2}
.ss-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:scale(1.12);transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.ss-frame.is-active img{transform:scale(1)}
.ss-frame figcaption{position:absolute;left:14px;bottom:14px;font:400 11px/1 var(--mono,monospace);letter-spacing:.06em;text-transform:uppercase;background:var(--bg,#EFE8DA);color:var(--ink,#3B2A20);padding:7px 10px;border-radius:999px}
.ss-rail{position:absolute;right:-56px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px}
.ss-dot{font:400 11px/1 var(--mono,monospace);color:var(--ink,#3B2A20);background:transparent;border:1px solid transparent;border-radius:999px;width:40px;height:40px;cursor:pointer;opacity:.45;transition:opacity .3s,border-color .3s}
.ss-dot.is-active{opacity:1;border-color:currentColor}
.ss-line{position:absolute;left:-1px;top:20vh;bottom:30vh;width:2px;background:color-mix(in srgb,var(--ink,#3B2A20) 14%,transparent)}
.ss-fill{position:absolute;inset:0;background:var(--acc,#4F7A5A);transform-origin:top;transform:scaleY(0)}
.ss-count{position:absolute;right:14px;top:14px;z-index:3;font:400 12px/1 var(--mono,monospace);background:var(--bg,#EFE8DA);color:var(--ink,#3B2A20);padding:8px 10px;border-radius:999px}
@media (max-width:860px){
  .ss{grid-template-columns:1fr;gap:0}
  .ss-media{order:-1;position:sticky;top:64px;z-index:2}
  .ss-steps{padding:6vh 0 20vh}
  .ss-step{min-height:62vh;padding-left:18px}
  .ss-rail{display:none}
  .ss-line{top:6vh;bottom:20vh}
}
@media (prefers-reduced-motion:reduce){.ss-frame{transition:none}.ss-frame img{transition:none;transform:none}.ss-step{transition:none}}
/* demo page only */
.ss-step .mono{color:var(--acc)}
.ss-step h3{font:720 clamp(30px,4.4vw,60px)/.98 var(--display);letter-spacing:-.035em;font-stretch:88%;margin:.25em 0 .35em}
.ss-step p{color:var(--soft);max-width:44ch;margin:0;font-size:clamp(16px,1.4vw,18px)}
.ss-wrap{padding:0 calc(var(--pad) + 56px) 0 var(--pad);max-width:1400px;margin:0 auto}
@media (max-width:860px){.ss-wrap{padding:0 var(--pad)}}