.spj{position:relative;overflow:visible;--spj-ease: cubic-bezier(.44, 0, .56, 1);--spj-duration: .9s;--spj-stagger: 70ms;--spj-col-left: 16rem;--spj-col-right: 43rem;--spj-gap-left: 12rem;--spj-gap-left-r:5rem;--spj-gap-right: 7.5rem;--spj-radius: var(--spj-radius-main);--spj-hero-max-height: calc(100vh - 16rem) ;--spj-thumb-active: 16rem;--spj-thumb-idle: 10rem}.spj_heading{margin:0 0 3.2rem;color:var(--color-heading);font-size:clamp(2.6rem,2.4vw,4.2rem);font-weight:700;letter-spacing:.01em;line-height:1.1}.spj_stage{position:relative;overflow:visible;display:none}.spj_layout{position:relative}.spj_widget{display:grid;grid-template-columns:var(--spj-col-left) var(--spj-gap-left) minmax(0,1fr) var(--spj-gap-right) var(--spj-col-right);align-items:center}.spj_widget.spj_widget--thumbs_right{grid-template-columns:minmax(0,1fr) var(--spj-gap-left-r) var(--spj-col-left) var(--spj-gap-right) var(--spj-col-right)}.spj_widget--thumbs_right .spj_media{grid-column:1;grid-row:1}.spj_widget--thumbs_right .spj_thumbs{grid-column:3;grid-row:1}.spj_widget--thumbs_right .spj_copy{grid-column:5;grid-row:1}.spj_thumbs{grid-column:1;align-self:start;display:flex;flex-direction:column;gap:.3rem;margin:0;padding:0;list-style:none}.spj_thumbs.spj_thumbs-center{align-self:center}.spj_thumbs.spj_thumbs-end{align-self:end}.spj_thumb_item{margin:0}.spj_thumb{box-sizing:border-box;display:block;width:100%;height:var(--spj-thumb-idle);padding:0;border:1px solid transparent;border-radius:var(--spj-radius);background:none;cursor:pointer;overflow:hidden;flex:0 0 auto;transition:height .5s var(--spj-ease)}.spj_thumb_frame{position:relative;display:block;width:100%;height:100%;border-radius:calc(var(--spj-radius) / 2);overflow:hidden;transition:opacity .3s var(--spj-ease),box-shadow .4s var(--spj-ease)}.spj_thumb img,.spj_thumb .spj_placeholder{position:absolute;top:50%;left:0;width:100%;height:var(--spj-thumb-active);transform:translateY(-50%);display:block;object-fit:cover}.spj_thumb:not(.is-active):hover .spj_thumb_frame,.spj_thumb:focus-visible .spj_thumb_frame{opacity:.8}.spj_thumb.is-active{height:var(--spj-thumb-active)}.spj_thumb.is-active .spj_thumb_frame{box-shadow:inset 0 0 0 4px var(--color-background)}.spj_thumb:focus-visible{outline:2px solid var(--color-heading);outline-offset:3px}.spj_media{grid-column:3;justify-self:stretch;position:relative;width:100%;aspect-ratio:845 / 805;max-height:var(--spj-hero-max-height);border-radius:var(--spj-radius);overflow:hidden}.spj_layer{position:absolute;top:0;right:0;bottom:0;left:0;transform:translate3d(100%,100%,0);transition:transform var(--spj-duration) var(--spj-ease);will-change:transform;backface-visibility:hidden}.spj_layer[data-state=active]{transform:translateZ(0)}.spj_layer[data-state=prev]{transform:translate3d(-100%,-100%,0)}.spj_layer[data-state=next]{transform:translate3d(100%,100%,0)}.spj_layer--instant{transition:none}.spj_layer img,.spj_layer .spj_placeholder{width:100%;height:100%;display:block;object-fit:cover}.spj_copy{grid-column:5;display:grid;align-items:center}.spj_panel{grid-area:1 / 1;align-self:center;display:flex;flex-direction:column;align-items:flex-start;gap:2.4rem;pointer-events:none}.spj_panel[data-state=active]{pointer-events:auto}.spj_mask{width:100%;overflow:hidden;padding-block:.25em;margin-block:-.25em;--spj-roll-in: 110%}.spj_mask--button{width:auto;max-width:100%;overflow:visible;padding:0;margin:0;--spj-roll-in: 2rem}.spj_mask>[data-spj-roll]{transform:translate3d(0,var(--spj-roll-in),0);opacity:0;will-change:transform,opacity;transition:transform var(--spj-duration) var(--spj-ease),opacity calc(var(--spj-duration) * .66) var(--spj-ease);transition-delay:0ms}.spj_panel[data-state=prev] .spj_mask>[data-spj-roll]{transform:translate3d(0,calc(var(--spj-roll-in) * -1),0);opacity:0}.spj_panel[data-state=active] .spj_mask>[data-spj-roll]{transform:translateZ(0);opacity:1;transition-delay:calc(var(--i, 0) * var(--spj-stagger))}.spj_date{margin:0;color:var(--color-text);font-size:1.8rem;font-weight:600;text-transform:uppercase;letter-spacing:0;font-family:var(--font-heading-family)}.spj_title{margin:0;color:var(--color-heading);font-size:clamp(2rem,1.7vw,2.8rem);font-weight:700;line-height:1.32;letter-spacing:.01em}.spj_desc{color:var(--color-secondary-text, var(--color-text));font-size:1.6rem;line-height:1.72;max-height:22rem;overflow:hidden}.spj_desc p,.spj_desc li{font-size:15px;line-height:1.5}.spj_desc>p{margin:0 0 1.6rem}.spj_desc>p:last-child{margin-bottom:0}.spj_button{display:inline-flex;align-items:center;justify-content:center;width:fit-content;padding:1.4rem 3.2rem}.spj_button:focus-visible{outline:2px solid var(--color-heading);outline-offset:3px}.spj_empty_state{padding:4rem 0;text-align:center}.spj_placeholder{background:color-mix(in srgb,var(--color-background),#000000 8%)}.spj_placeholder path{fill:var(--color-heading)}.spj_desc a:focus-visible{outline:none;border-bottom:1px solid var(--color-text)}@media screen and (min-width:1100px)and (max-width:1439px){.spj{--spj-col-left: 12rem;--spj-col-right: 32rem;--spj-gap-left: 5rem;--spj-gap-right: 4rem;--spj-thumb-active: 12rem;--spj-thumb-idle: 7.5rem}}@media screen and (min-width:1100px){.spj_stage{display:block;height:calc(var(--spj-steps, 1) * var(--spj-step, 140) * 1vh + 100vh)}.spj_layout{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding-block:4rem}}.spj_mobile{display:block}@media screen and (min-width:1100px){.spj_mobile{display:none}@media(prefers-reduced-motion:reduce){.spj_stage{display:none}.spj_mobile{display:block}}}@media screen and (max-width:1024px){.spj_heading{text-align:center}}.spj_heading--mobile{margin-bottom:2.4rem}.spj_mobile_track{--spj-edge: 3rem;display:flex;gap:1.6rem;margin:0;padding:0 var(--spj-edge) 1rem;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--spj-edge);-webkit-overflow-scrolling:touch;scrollbar-width:none}@media screen and (max-width:640px){.spj_mobile_track{--spj-edge: 1.5rem}}.spj_mobile_track::-webkit-scrollbar{display:none}.spj_mobile_track:focus-visible{outline:2px solid var(--color-heading);outline-offset:4px}.spj_mobile_slide{flex:0 0 88%;scroll-snap-align:start;margin:0}.spj_mobile_card{position:relative;height:100%;min-height:46rem;aspect-ratio:3 / 4;border-radius:var(--spj-radius);overflow:hidden;background:var(--color-secondary-background)}.spj_mobile_card img,.spj_mobile_card .spj_placeholder{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;object-fit:cover}.spj_mobile_scrim{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,#000000d1,#00000080 38%,#0000 72%)}.spj_mobile_content{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem;padding:2.4rem;color:#fff}.spj_mobile_content .spj_date,.spj_mobile_content .spj_title,.spj_mobile_content .spj_desc,.spj_mobile_content .spj_desc p,.spj_mobile_content .spj_desc li{color:var(--mobil_text_color)}.spj_title--mobile{font-size:clamp(1.8rem,5vw,2.2rem);line-height:1.3}.spj_desc--mobile{font-size:1.4rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.spj_button--mobile{margin-top:.6rem;border-color:#ffffffb3;color:#fff;padding:1.2rem 2.6rem}.spj_button--mobile:hover{background:#fff;border-color:#fff;color:#111}.spj_button--mobile:focus-visible{outline-color:#fff}@media(prefers-reduced-motion:reduce){.spj_thumb,.spj_thumb_frame,.spj_button,.spj_layer,.spj_mask>[data-spj-roll]{transition:none}.spj_mobile_track{scroll-behavior:auto}}@media screen and (max-width:1024px){.spj_date{font-size:1.6rem}.spj_desc--mobile p{font-size:1.2rem}.spj_title--mobile{font-size:1.7rem}}@media screen and (min-width:1100px){.spj--scroll_opposite .spj_layer[data-state=prev]{transform:translate3d(100%,-100%,0)}.spj--scroll_opposite .spj_layer[data-state=next]{transform:translate3d(-100%,100%,0)}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/scroll-projects.css.map */