/* A scroll-driven index: decisions and their tools meet on one focus line. */
.atelier .design-sequence { margin-block:50px 100px; border-top:1px solid var(--hairline); }
.atelier .sequence-heading .eyebrow { margin:0 0 24px; }
.atelier .sequence-heading h2 { margin:0; font-size:clamp(36px,4.1vw,60px); font-weight:400; line-height:1.08; letter-spacing:-.035em; }
.atelier .sequence-pin { padding-block:70px; }
.atelier .sequence-list { list-style:none; margin:48px 0 0; padding:0; }
.atelier .sequence-stage { display:grid; grid-template-columns:minmax(0,1fr) 88px; align-items:center; gap:16px 24px; padding-block:26px; border-top:1px solid var(--hairline); }
.atelier .sequence-label { display:flex; align-items:center; gap:18px; min-width:0; }
.atelier .sequence-stage h3 { margin:0; padding:0; font-size:clamp(30px,3.6vw,52px); line-height:1; letter-spacing:-.035em; font-weight:400; white-space:nowrap; }
.atelier .sequence-symbol * { stroke-width:1px; vector-effect:non-scaling-stroke; }
.atelier .sequence-symbol { display:block; width:88px; height:88px; fill:none; stroke:currentColor; stroke-linecap:square; overflow:visible; flex:none; }
.atelier .sequence-guide { opacity:.2; }
.atelier .sequence-signal { color:var(--signal,var(--accent)); }
.atelier .sequence-stage>p { grid-column:1/-1; margin:0; color:var(--muted); font-size:18px; line-height:1.5; }
.atelier :is(.sequence-focus,.sequence-crossbar,.sequence-foot) { display:none; }

/* Progressive enhancement: without JS, or with reduced motion, the list is linear. */
.atelier .design-sequence.is-sequence-ready { height:max(1750px,290svh); }
.atelier .is-sequence-ready .sequence-pin { position:sticky; top:0; height:100svh; min-height:620px; padding-block:128px 62px; box-sizing:border-box; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:18px; }
.atelier .is-sequence-ready .sequence-instrument { --sequence-row:104px; --sequence-column:112px; position:relative; min-height:0; align-self:center; width:100%; height:520px; max-height:100%; overflow:hidden; mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent); }
.atelier .is-sequence-ready .sequence-list { position:absolute; top:50%; left:0; right:0; margin:0; transform:translateY(calc(-.5 * var(--sequence-row) - var(--sequence-phase,0) * var(--sequence-row))); }
.atelier .is-sequence-ready .sequence-stage { grid-template-columns:52% 48%; height:var(--sequence-row); border:0; padding:0; gap:0; }
.atelier .is-sequence-ready .sequence-label { opacity:var(--stage-opacity,.18); transform:scale(var(--stage-scale,.94)); transform-origin:left center; color:var(--ink); }
.atelier .is-sequence-ready .sequence-stage.is-current .sequence-label { color:var(--accent); }
.atelier .is-sequence-ready .sequence-stage>.sequence-symbol { justify-self:center; color:var(--accent); opacity:var(--stage-opacity,.18); }
.atelier .is-sequence-ready .sequence-stage>p { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.atelier .is-sequence-ready .sequence-focus { display:block; position:absolute; z-index:1; top:calc(50% - var(--sequence-row) / 2); left:0; right:0; height:var(--sequence-row); border-block:1px solid var(--hairline); pointer-events:none; }
.atelier .sequence-focus i { position:absolute; top:-1px; bottom:-1px; width:8px; border-block:1px solid var(--accent); }
.atelier .sequence-focus i:first-child { left:0; }
.atelier .sequence-focus i:last-child { right:0; }
.atelier .is-sequence-ready .sequence-crossbar { display:block; position:absolute; width:48%; right:0; top:50%; height:88px; transform:translateY(-50%); overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.atelier .sequence-crossbar-track { display:flex; align-items:center; gap:24px; position:relative; left:50%; width:max-content; transform:translateX(calc(-44px - var(--sequence-phase,0) * var(--sequence-column))); }
.atelier .sequence-crossbar .sequence-symbol { color:var(--accent); opacity:var(--cross-opacity,0); }
.atelier .is-sequence-ready .sequence-foot { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:end; }
.atelier .sequence-caption { margin:0; font-size:20px; line-height:1.4; color:var(--muted); }
.atelier .sequence-progress { grid-column:1/-1; height:1px; background:var(--hairline); overflow:hidden; }
.atelier .sequence-progress i { display:block; width:100%; height:100%; background:var(--accent); transform-origin:left; transform:scaleX(var(--sequence-progress,0)); }

/* Each focused mechanism has its own closed motion; the rails still follow scroll. */
@media(prefers-reduced-motion:no-preference) and (min-height:601px) {
 .atelier .is-sequence-ready .sequence-symbol.is-current [data-sequence-part] { transform-box:view-box; transform-origin:32px 32px; animation-duration:6.4s; animation-timing-function:cubic-bezier(.45,0,.2,1); animation-iteration-count:infinite; animation-play-state:paused; }
 .atelier .is-sequence-looping .sequence-symbol.is-current [data-sequence-part] { animation-play-state:running; }
 .atelier .is-sequence-ready .sequence-symbol.is-current [data-sequence-part="brief-frame"] { animation-name:brief-focus-frame; animation-duration:5.8s; }
 .atelier .is-sequence-ready .sequence-symbol.is-current [data-sequence-part="brief-focus"] { animation-name:brief-find-point; animation-duration:5.8s; }
 .atelier .is-sequence-ready .sequence-symbol.is-current [data-sequence-part="strategy-route"] { animation-name:strategy-choose-route; stroke-dasharray:100; }
 .atelier .is-sequence-ready .sequence-symbol.is-current [data-sequence-part="strategy-choice"] { animation-name:strategy-confirm; }
 .atelier .is-sequence-ready .sequence-symbol.is-current [data-sequence-part="identity-a"] { animation-name:identity-align-a; }
 .atelier .is-sequence-ready .sequence-symbol.is-current [data-sequence-part="identity-b"] { animation-name:identity-align-b; }
 .atelier .is-sequence-ready .sequence-symbol.is-current [data-sequence-part="identity-c"] { animation-name:identity-align-c; }
 .atelier .is-sequence-ready .sequence-symbol.is-current [data-sequence-part="identity-d"] { animation-name:identity-align-d; }
 .atelier .is-sequence-ready .sequence-symbol.is-current [data-sequence-part="identity-core"] { animation-name:identity-lock; }
 .atelier .is-sequence-ready .sequence-symbol.is-current [data-sequence-part="experience-cursor"] { animation-name:experience-navigate; animation-duration:6.2s; }
 .atelier .is-sequence-ready .sequence-symbol.is-current [data-sequence-part="experience-target"] { animation-name:experience-respond; animation-duration:6.2s; }
 .atelier .is-sequence-ready .sequence-symbol.is-current [data-sequence-part="experience-link"] { animation-name:experience-connect; animation-duration:6.2s; stroke-dasharray:100; }
 .atelier .is-sequence-ready .sequence-symbol.is-current [data-sequence-part="delivery-back"] { animation-name:delivery-stack-back; animation-duration:6.6s; }
 .atelier .is-sequence-ready .sequence-symbol.is-current [data-sequence-part="delivery-middle"] { animation-name:delivery-stack-middle; animation-duration:6.6s; }
 .atelier .is-sequence-ready .sequence-symbol.is-current [data-sequence-part="delivery-check"] { animation-name:delivery-complete; animation-duration:6.6s; stroke-dasharray:100; }
}
@keyframes brief-focus-frame { 0%,14%,88%,100% { transform:scaleX(1); } 34%,57% { transform:scaleX(.88); } }
@keyframes brief-find-point { 0%,14%,88%,100% { transform:translate(0,0); fill:transparent; } 34%,48% { transform:translate(8px,-3px); fill:transparent; } 57%,68% { transform:translate(8px,-3px); fill:currentColor; } 76% { transform:translate(4px,2px); fill:transparent; } }
@keyframes strategy-choose-route { 0%,12% { stroke-dashoffset:100; opacity:0; } 20% { stroke-dashoffset:100; opacity:1; } 46%,72% { stroke-dashoffset:0; opacity:1; } 87% { stroke-dashoffset:0; opacity:0; } 100% { stroke-dashoffset:100; opacity:0; } }
@keyframes strategy-confirm { 0%,45%,88%,100% { opacity:0; } 56%,72% { opacity:1; } }
@keyframes identity-align-a { 0%,14%,68%,100% { transform:translate(5px,5px); } 32%,44% { transform:translate(0,0); } }
@keyframes identity-align-b { 0%,18%,74%,100% { transform:translate(-5px,5px); } 36%,48% { transform:translate(0,0); } }
@keyframes identity-align-c { 0%,22%,80%,100% { transform:translate(5px,-5px); } 40%,52% { transform:translate(0,0); } }
@keyframes identity-align-d { 0%,26%,86%,100% { transform:translate(-5px,-5px); } 44%,56% { transform:translate(0,0); } }
@keyframes identity-lock { 0%,14%,94%,100% { opacity:1; } 32%,76% { opacity:0; } }
@keyframes experience-navigate { 0%,14%,82%,100% { transform:translate(23px,7px); } 36%,50% { transform:translate(0,0); } }
@keyframes experience-respond { 0%,14%,90%,100% { opacity:1; } 32%,75% { opacity:0; } }
@keyframes experience-connect { 0%,14%,84%,100% { stroke-dashoffset:0; opacity:1; } 32% { stroke-dashoffset:0; opacity:0; } 40%,50% { stroke-dashoffset:100; opacity:0; } 56% { stroke-dashoffset:100; opacity:1; } }
@keyframes delivery-stack-back { 0%,16%,65%,100% { transform:translate(6px,6px); } 35%,46% { transform:translate(0,0); } }
@keyframes delivery-stack-middle { 0%,20%,72%,100% { transform:translate(3px,3px); } 39%,50% { transform:translate(0,0); } }
@keyframes delivery-complete { 0%,16%,88%,100% { stroke-dashoffset:0; opacity:1; } 30% { stroke-dashoffset:0; opacity:0; } 40%,67% { stroke-dashoffset:100; opacity:0; } 71% { stroke-dashoffset:100; opacity:1; } }
@media(max-width:980px) {
 .atelier .is-sequence-ready .sequence-instrument { --sequence-row:92px; }
 .atelier .is-sequence-ready .sequence-stage { grid-template-columns:58% 42%; }
 .atelier .is-sequence-ready .sequence-crossbar { width:42%; }
 .atelier .sequence-label { gap:12px; }
 .atelier .sequence-stage h3 { font-size:clamp(30px,4vw,39px); }
}
@media(max-width:640px) {
 .atelier .design-sequence { margin-block:30px 70px; }
 .atelier .sequence-pin { padding-block:48px; }
 .atelier .sequence-heading .eyebrow { margin-bottom:18px; }
 .atelier .sequence-heading h2 { max-width:300px; font-size:38px; }
 .atelier .sequence-list { margin-top:32px; }
 .atelier .sequence-stage { grid-template-columns:minmax(0,1fr) 64px; gap:16px 12px; }
 .atelier .sequence-symbol { width:64px; height:64px; }
 .atelier .sequence-label { gap:9px; }
 .atelier .sequence-stage h3 { font-size:clamp(24px,6.8vw,34px); }
 .atelier .sequence-stage>p { font-size:16px; }
 .atelier .design-sequence.is-sequence-ready { height:285svh; min-height:1600px; }
 .atelier .is-sequence-ready .sequence-pin { min-height:0; padding-block:112px 42px; gap:20px; }
 .atelier .is-sequence-ready .sequence-instrument { --sequence-row:76px; --sequence-column:82px; height:380px; }
 .atelier .is-sequence-ready .sequence-stage { grid-template-columns:65% 35%; }
 .atelier .is-sequence-ready .sequence-crossbar { width:35%; height:64px; }
 .atelier .sequence-crossbar-track { gap:18px; transform:translateX(calc(-32px - var(--sequence-phase,0) * var(--sequence-column))); }
 .atelier .sequence-caption { font-size:16px; max-width:250px; }
 .atelier .is-sequence-ready .sequence-foot { gap:20px 16px; }
}
/* Short viewports and enlarged text retain the full, readable non-pinned list. */
@media(max-height:600px), (prefers-reduced-motion:reduce) {
 .atelier .design-sequence.is-sequence-ready { height:auto; min-height:0; }
 .atelier .is-sequence-ready .sequence-pin { position:static; height:auto; min-height:0; display:block; padding-block:48px; }
 .atelier .is-sequence-ready .sequence-instrument { height:auto; max-height:none; overflow:visible; mask-image:none; }
 .atelier .is-sequence-ready .sequence-list { position:static; margin-top:32px; transform:none; }
 .atelier .is-sequence-ready .sequence-stage { grid-template-columns:minmax(0,1fr) 64px; gap:16px 12px; height:auto; padding-block:26px; border-top:1px solid var(--hairline); }
 .atelier .is-sequence-ready .sequence-label { opacity:1; transform:none; }
 .atelier .is-sequence-ready .sequence-stage>.sequence-symbol { width:64px; height:64px; opacity:1; }
 .atelier .is-sequence-ready .sequence-stage>p { position:static; width:auto; height:auto; overflow:visible; clip-path:none; white-space:normal; }
 .atelier .is-sequence-ready :is(.sequence-focus,.sequence-crossbar,.sequence-foot) { display:none; }
}