.scroll-story{width:100%;display:grid;grid-template-columns:1fr 1fr;position:relative;padding-top:80px;background:var(--brand-purple);color:var(--brand-cream)}.scroll-story__content{min-width:0;padding-left:10%;padding-right:10%}.scroll-story__item{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:100px 0;border-top:1px solid rgba(255,255,255,.12)}.scroll-story__item:first-child{border-top:0}.scroll-story__number{margin-bottom:22px;font-size:calc(.72rem * var(--type-scale, 1));font-weight:700;letter-spacing:.2em;opacity:1;color:var(--brand-yellow)}.scroll-story__title{max-width:650px;margin:0;font-size:calc(clamp(3.5rem,6vw,7rem) * var(--type-scale, 1));font-family:var(--brand-heading-font);line-height:1;letter-spacing:-.06em;text-transform:none}.scroll-story__text{max-width:480px;margin:32px 0 0;font-size:calc(1.05rem * var(--type-scale, 1));line-height:1.7;opacity:.9}.scroll-story__button{width:fit-content;display:inline-flex;align-items:center;gap:14px;margin-top:38px;padding:15px 24px;border:1px solid rgba(255,255,255,.35);border-radius:999px;color:inherit;text-decoration:none;font-size:calc(.8rem * var(--type-scale, 1));font-weight:700;letter-spacing:.08em;text-transform:uppercase;transition:background .25s ease,color .25s ease,transform .25s ease}.scroll-story__button:hover{background:var(--brand-cream);color:var(--brand-ink);transform:translateY(-2px)}.scroll-story__media{min-width:0;position:relative}.scroll-story__media-sticky{container-type:size;position:sticky;top:76px;height:calc(100vh - 76px);display:flex;align-items:center;justify-content:center;overflow:hidden}.scroll-story__media-stack{position:relative;width:calc(var(--story-frame-width, 82) * 1%);height:calc(var(--story-frame-height, 78) * 1%);background:var(--brand-mint);overflow:hidden;border-radius:44% 44% 28px 28px;border:8px solid var(--brand-mint)}.scroll-story__media-item{transition:opacity .4s ease,visibility .4s ease;display:grid;place-items:center;position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;visibility:hidden}.scroll-story__media-item.is-active{opacity:1;visibility:visible}.scroll-story__image{transform:translate(var(--story-x, 0%),var(--story-y, 0%)) scale(var(--story-scale, 1));display:block;width:var(--story-image-width, 100%);height:var(--story-image-height, 100%);object-fit:var(--story-image-fit, cover)}.scroll-story__video-controls{position:absolute;bottom:12%;left:50%;transform:translate(-50%);display:flex;gap:8px;z-index:2}.scroll-story__video-controls button{min-height:44px;padding:8px 14px;border:1px solid var(--brand-mint);border-radius:999px;background:var(--brand-cream);color:var(--brand-ink);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}.scroll-story__video-controls button:focus-visible{outline:3px solid var(--brand-purple);outline-offset:2px}@media(prefers-reduced-motion:reduce){.scroll-story__media-item{transition:none}}@media(max-width:800px){.scroll-story__item>.scroll-story__media-item{position:relative;inset:auto;visibility:visible;opacity:1;width:calc(var(--story-frame-width-mobile, 100) * 1%);height:calc(var(--story-frame-height-mobile, 100) * 3.5px);margin:24px auto 0;border-radius:24px;overflow:hidden;background:var(--brand-mint)}.scroll-story__media:has(.scroll-story__media-stack:empty){display:none}.scroll-story[data-media-shape=circle] .scroll-story__item>.scroll-story__media-item{height:auto;aspect-ratio:1;border-radius:50%}.scroll-story[data-media-shape=square] .scroll-story__item>.scroll-story__media-item{height:auto;aspect-ratio:1;border-radius:0}.scroll-story[data-media-shape=oval] .scroll-story__item>.scroll-story__media-item{border-radius:50%}.scroll-story[data-media-shape=organic] .scroll-story__item>.scroll-story__media-item{border-radius:38% 62% 55% 45%/46% 36% 64% 54%}}@media(max-width:800px){.scroll-story{grid-template-columns:1fr}.scroll-story__content{padding:0 24px}.scroll-story__item{min-height:80vh;padding:100px 0}.scroll-story__title{font-size:calc(clamp(3rem,14vw,5.5rem) * var(--type-scale, 1))}.scroll-story__media{grid-row:1}.scroll-story__media-sticky{position:relative;top:auto;height:65vh;padding:100px 24px 30px}.scroll-story__media-stack{width:calc(var(--story-frame-width-mobile, 100) * 1%);height:calc(var(--story-frame-height-mobile, 100) * 1%);border-radius:20px}.scroll-story__image{transform:translate(var(--story-x-mobile, 0%),var(--story-y-mobile, 0%)) scale(var(--story-scale-mobile, 1));width:var(--story-image-width-mobile, 100%);height:var(--story-image-height-mobile, 100%)}}.scroll-story[data-media-shape=oval] .scroll-story__media-stack{border-radius:50%}.scroll-story[data-media-shape=rounded] .scroll-story__media-stack{border-radius:28px}.scroll-story[data-media-shape=organic] .scroll-story__media-stack{border-radius:38% 62% 55% 45%/46% 36% 64% 54%}.scroll-story:is([data-media-shape=circle],[data-media-shape=square]) .scroll-story__media-stack{width:min(calc(var(--story-frame-width, 82) * 1cqw),calc(var(--story-frame-height, 78) * 1cqh));height:auto;aspect-ratio:1;border-radius:0}.scroll-story[data-media-shape=circle] .scroll-story__media-stack{border-radius:50%}@media(max-width:800px){.scroll-story:is([data-media-shape=circle],[data-media-shape=square]) .scroll-story__media-stack{width:min(calc(var(--story-frame-width-mobile, 100) * 1cqw),calc(var(--story-frame-height-mobile, 100) * 1cqh))}}.scroll-story:before{content:"";position:absolute;inset:-1px 0 auto;height:80px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff7eb' d='M0 0H1440V25C1080 125 504 10 0 55Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;pointer-events:none}.shopify-section:has(>.featured-collection)+.shopify-section>.scroll-story:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23a5dfce' d='M0 0H1440V25C1080 125 504 10 0 55Z'/%3E%3C/svg%3E")}.scroll-story__button{background:var(--brand-mint);color:var(--brand-ink);border:2px solid var(--brand-mint)}.scroll-story__button:focus-visible{outline:3px solid var(--brand-yellow);outline-offset:5px}@media(max-width:800px){.scroll-story__title{font-size:calc(clamp(2.6rem,11vw,4.5rem) * var(--type-scale, 1))}}
/*# sourceMappingURL=/cdn/shop/t/16/assets/scroll-story.css.map */