.design-story{position:relative;background:#101010;border-top:1px solid #292929;border-bottom:1px solid #292929;isolation:isolate}
.story-pin{padding:64px 0 36px}
.story-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;margin-bottom:30px}
.story-heading h2{font-family:Poppins,sans-serif;font-size:clamp(32px,4.6vw,66px);font-weight:900;line-height:1.04;letter-spacing:-.055em;text-transform:uppercase;margin:12px 0 0}
.story-heading h2 em{font-style:normal;color:#c6f22e}
.story-heading>p{max-width:290px;font-size:14px;line-height:1.8;color:#aaa;margin:0}
.story-stage{overflow:clip;padding:0 max(24px,calc((100vw - 1240px)/2));}
.story-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-color:#c6f22e #282828;scrollbar-width:thin;padding-bottom:14px;overscroll-behavior-x:contain;outline-offset:-3px}
.story-track:focus-visible{outline:2px solid #c6f22e}
.story-card{position:relative;isolation:isolate;flex:0 0 min(76vw,1010px);height:clamp(360px,calc(100svh - 340px),620px);overflow:hidden;scroll-snap-align:start;border:1px solid #444;background:#171717}
.story-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:grayscale(1);transition:filter .6s ease}
.story-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),transparent 24%,rgba(0,0,0,.85));z-index:-1}
.story-card--craft>img{object-position:50% 45%}
.story-card--work>img{object-position:50% 0;filter:none}
.story-card--work::after{background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.1) 26%,rgba(0,0,0,.93))}
.story-top{position:absolute;top:28px;left:30px;right:30px;display:flex;justify-content:space-between;gap:16px;align-items:center;font:11px 'IBM Plex Mono',monospace;letter-spacing:.09em;color:#fff;text-shadow:0 1px 8px #000}
.story-top>span:first-child{display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff80;border-radius:50%;font-size:13px}
.story-copy{position:absolute;left:36px;right:36px;bottom:34px;max-width:680px}
.story-copy h3{font:900 clamp(30px,4.9vw,68px)/1.02 Poppins,sans-serif;letter-spacing:-.05em;text-transform:uppercase;color:white;margin:0 0 16px}
.story-copy h3 em{color:#c6f22e;font-style:normal}
.story-copy p{color:#dedede;max-width:450px;font-size:15px;line-height:1.8;margin:0}
.story-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px}
.story-meta p{font:10px 'IBM Plex Mono',monospace;line-height:1.8;letter-spacing:.04em;color:#aaa;margin:0}
.story-controls{display:flex;align-items:center;gap:10px;flex-shrink:0}
.story-controls button{width:48px;height:48px;display:grid;place-items:center;border:1px solid #555;background:transparent;color:white;cursor:pointer;transition:background .2s,border-color .2s}
.story-controls button:hover,.story-controls button:focus-visible{background:#c6f22e;color:#0b0b0b;border-color:#c6f22e}
.story-controls button:disabled{opacity:.35;cursor:default}
.story-controls svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7}
.story-position{font:11px 'IBM Plex Mono',monospace;min-width:64px;text-align:center;color:#c6f22e}
.story-scroll-hint{display:none;font:11px 'IBM Plex Mono',monospace;color:#c6f22e;letter-spacing:.1em}
.design-story.is-pinned .story-pin{position:sticky;top:88px;height:calc(100svh - 88px);padding:28px 0 24px}
.design-story.is-pinned .story-track{width:max-content;overflow:visible;scroll-snap-type:none;will-change:transform;padding-bottom:0}
.design-story.is-pinned .story-controls{display:none}
.design-story.is-pinned .story-scroll-hint{display:block}
@media(max-width:960px){.story-pin{padding:48px 0 36px}.story-heading{align-items:start;flex-direction:column;gap:18px}.story-heading>p{max-width:480px}.story-stage{padding:0 24px}.story-card{flex-basis:calc(100vw - 96px);height:480px}.story-copy{left:28px;right:28px;bottom:28px}.story-copy h3{font-size:44px}.story-meta{align-items:flex-start}}
@media(max-width:520px){.story-heading{margin-bottom:24px}.story-heading h2{font-size:10.2vw}.story-stage{padding:0 22px}.story-track{gap:16px}.story-card{flex-basis:calc(100vw - 66px);height:440px}.story-copy{left:22px;right:22px;bottom:26px}.story-copy h3{font-size:clamp(28px,8.5vw,38px)}.story-copy p{font-size:14px;line-height:1.7}.story-top{top:20px;left:22px;right:22px;font-size:9px}.story-top>span:first-child{width:36px;height:36px;font-size:11px}.story-meta{flex-wrap:wrap;gap:14px}.story-meta>p{max-width:100%;font-size:9px}.story-controls{width:100%;justify-content:flex-end}.story-position{margin-right:auto;text-align:left}.story-controls button{width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){.story-card>img,.story-controls button{transition:none}.story-track{scroll-behavior:auto}}