/* MSS conceptual material study; native scrolling, with an optional pinned sequence. */
.style-study{background:#e9e4dc;color:#292724;position:relative;isolation:isolate}
.style-stage{padding:90px 0 40px;overflow:hidden}
.style-intro{text-align:center;padding:0 6%;margin:0 auto 54px;max-width:1500px}
.style-intro .eyebrow{font-size:13px;letter-spacing:.16em}
.style-intro h2{font-size:clamp(44px,6.5vw,108px);line-height:1.05;letter-spacing:-.055em;font-weight:500;margin:24px 0}
.style-intro h2 span{display:block;color:#776c5f}
.style-intro p{font-size:clamp(18px,1.5vw,22px);max-width:620px;margin:24px auto 0;line-height:1.55;color:#5c554c}
.style-window{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding:0 6%;outline-offset:-4px}
.style-track{display:flex;gap:24px;width:max-content}
.style-track::after{content:'';flex:0 0 max(0px,calc(88vw - min(66vw,390px)))}
.style-frame{width:min(66vw,390px);flex-shrink:0;margin:0;scroll-snap-align:center}
.style-photo{aspect-ratio:3/4;overflow:hidden;background:#c8beb0;border-radius:3px}
.style-photo img{width:100%;height:100%;object-fit:cover;display:block}
.style-frame figcaption{padding-top:16px;display:flex;justify-content:space-between;gap:16px;font-size:16px;line-height:1.4}
.style-frame figcaption span{color:#766b5f;font-size:13px}
.style-bottom{margin:32px 6% 0;display:flex;justify-content:space-between;gap:24px;align-items:center}
.style-bottom p{font-size:13px;color:#665d52;line-height:1.5;max-width:460px}
.style-controls{display:flex;align-items:center;gap:10px}
.style-controls button{color:inherit;background:transparent;border:1px solid #8a7d6b;border-radius:50%;width:44px;height:44px;font-size:24px;cursor:pointer}
.style-controls button:disabled{opacity:.3;cursor:default}
.style-controls output{font-size:14px;min-width:62px;text-align:center;font-variant-numeric:tabular-nums}
.style-motion{background:transparent;color:#4d453b;border:0;border-bottom:1px solid #887b68;padding:10px 0;font-size:13px;cursor:pointer}
.style-study :focus-visible{outline:2px solid #713b30;outline-offset:5px}
.style-study.is-pinned{height:620svh}
.style-study.is-pinned .style-stage{position:sticky;top:0;height:100svh;padding:0}
.is-pinned .style-intro{position:absolute;z-index:2;top:0;left:0;width:100%;max-width:none;margin:0;will-change:transform;transform-origin:50% 0;pointer-events:none}
.is-pinned .style-intro h2{font-size:clamp(60px,7vw,120px)}
.is-pinned .style-intro p{display:none}
.is-pinned .style-window{position:absolute;top:21svh;left:0;width:100%;padding:0;overflow:visible;will-change:transform}
.is-pinned .style-track{gap:3vw;padding-left:calc(50vw - var(--style-card-width)/2);will-change:transform}
.is-pinned .style-track::after{display:none}
.is-pinned .style-frame{width:var(--style-card-width)}
.is-pinned .style-photo{height:60svh;aspect-ratio:3/4}
.is-pinned .style-photo img{will-change:transform}
.is-pinned .style-frame figcaption{font-size:16px;padding-top:12px}
.is-pinned .style-bottom{position:absolute;bottom:22px;left:0;right:0;margin:0 4%;z-index:3;align-items:end}
.is-pinned .style-bottom p{max-width:250px}
.is-pinned .style-controls{margin-left:auto;margin-right:24px}
@media(max-width:899px){.style-stage{padding-top:64px}.style-intro{text-align:left;margin-bottom:36px}.style-intro h2{font-size:clamp(40px,7.2vw,64px)}.style-intro p{margin-left:0}.style-bottom{flex-wrap:wrap;gap:18px}.style-bottom p{flex-basis:100%}.style-motion{margin-left:auto}.style-frame{width:78vw}.style-track{gap:16px}.style-frame figcaption{font-size:17px}.style-frame figcaption span{font-size:13px}}
@media(max-width:899px){.style-track::after{flex-basis:10vw}}