.motion-word{display:inline-block;white-space:nowrap}
.motion-letter{display:inline-block;transition:color .25s ease}
.work-switch{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(50px,7vw,110px);align-items:start;padding-top:100px;padding-bottom:110px}
.work-sticky{position:sticky;top:40px;min-width:0;align-self:start}
.work-sticky>h2{font-family:var(--script);font-weight:400;font-size:clamp(32px,3.1vw,45px);line-height:1.2;letter-spacing:0;color:#fff;margin-bottom:48px}
.work-copy{min-height:250px}
.work-copy h3{font-size:clamp(38px,3.6vw,54px);line-height:1.03;letter-spacing:-.025em;text-wrap:balance}
.work-copy h3 .script{color:var(--accent);display:inline-block;padding-top:4px}
.work-copy>p{max-width:34ch;color:#d2d6d3;margin-top:22px;font-size:17px;line-height:1.6}
.work-steps:not([hidden]){display:flex;align-items:center;gap:5px;margin-top:20px}
.work-steps a{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.work-steps a::after{content:'';width:22px;height:3px;background:#737a74;transition:background .2s,transform .2s}
.work-steps a[aria-current]::after{background:var(--accent);transform:scaleX(1.35)}
.work-steps a:hover::after{background:var(--paper)}
.work-disclosure{font-size:12px;line-height:1.6;color:var(--muted);margin-top:22px;max-width:39ch}
.work-sticky>.text-link{margin-top:18px;color:var(--paper);font-size:15px}
.work-gallery{min-width:0;display:grid;gap:90px}
.work-frame{min-width:0;scroll-margin-top:45px}
.work-frame img{width:100%;height:clamp(380px,61vh,690px);object-position:50% 50%}
.work-frame.work-portrait img{height:clamp(440px,70vh,780px);object-position:50% 38%}
.work-frame figcaption{padding-top:18px;max-width:50ch}
.work-frame figcaption strong{font:600 25px/1.2 var(--display);display:block}
.work-frame figcaption>span{font-size:14px;line-height:1.6;color:var(--muted);display:block;margin-top:7px}
.work-frame figcaption>span::after{content:'Foto ilustrasi · Pexels';display:block;font-size:12px;margin-top:9px}
.work-frame.is-active figcaption strong{color:var(--accent)}
@media(min-width:821px) and (max-height:760px){.work-sticky{top:24px}.work-sticky>h2{font-size:30px;margin-bottom:25px}.work-copy{min-height:205px}.work-copy h3{font-size:37px}.work-copy>p{font-size:15px;margin-top:14px}.work-disclosure{margin-top:10px}.work-steps:not([hidden]){margin-top:8px}.work-sticky>.text-link{margin-top:8px}}
@media(max-width:820px){.work-switch{display:block;padding-top:55px;padding-bottom:65px}.work-sticky{position:relative;top:auto}.work-sticky>h2{font-size:39px;margin-bottom:25px}.work-copy{min-height:0}.work-copy h3{font-size:33px}.work-copy>p{font-size:15px;max-width:52ch;margin-top:12px}.work-gallery{gap:55px;margin-top:34px}.work-frame img,.work-frame.work-portrait img{height:clamp(330px,60vh,520px)}.work-frame.work-portrait img{object-position:50% 35%}.work-frame figcaption strong{font-size:24px}.work-frame{scroll-margin-top:200px}.work-switch.work-ready .work-sticky{position:sticky;top:0;z-index:4;background:var(--ink);padding:16px 0 8px;margin-top:-16px}.work-ready .work-sticky>h2{font-size:25px;margin-bottom:12px}.work-ready .work-sticky>h2 br{display:none}.work-ready .work-sticky>h2 .script{margin-left:5px}.work-ready .work-copy{min-height:84px}.work-ready .work-copy h3{font-size:30px;line-height:1.05}.work-ready .work-copy>p,.work-ready .work-disclosure,.work-ready .work-sticky>.text-link{display:none}.work-ready .work-steps:not([hidden]){margin-top:3px}.work-ready .work-steps a{min-height:36px;min-width:44px}.work-ready .work-gallery{margin-top:16px}.work-ready .work-frame{scroll-margin-top:205px}}
@media(max-width:360px){.work-ready .work-sticky>h2{font-size:22px}.work-ready .work-copy h3{font-size:27px}.work-ready .work-copy{min-height:78px}.work-steps:not([hidden]){gap:0}.work-frame img,.work-frame.work-portrait img{height:350px}}
@media(prefers-reduced-motion:reduce){.motion-letter{filter:none!important;opacity:1!important;transform:none!important}.work-steps a::after{transition:none}}