/* One full-screen product carousel. Everything below it scrolls normally. */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.collection-story-scroll{position:relative;height:100svh;min-height:680px;background:#17131a;--slide-progress:0}
.collection-sticky{position:relative;height:100%;overflow:hidden;touch-action:pan-y}
.collection-stage{position:relative;height:100%}
.collection-slide,.product-page,.art-experience{--room-clip:0%;--room-blur:0px;--room-opacity:1;--room-y:0%;--product-y:0px;--copy-y:0px;--product-rotate:0deg;--meta-y:0px;--meta-opacity:1;--line-1-y:0%;--line-2-y:0%;--line-3-y:0%;--float-distance:58px;--float-x:8px;--float-rotate:1.2deg;--float-pitch:1.6deg;--float-yaw:3deg;--float-depth:8px;color:#fff;background:#17131a}
.collection-slide{position:absolute;inset:0;visibility:hidden;pointer-events:none;background:transparent}
.collection-slide.is-visible,.collection-slide:first-child{visibility:visible}
[data-scroll-ready=true] .collection-slide:first-child:not(.is-visible){visibility:hidden}
.collection-slide.is-active{pointer-events:auto}
/* Keep both products above both backgrounds during a transition. Giving the
   articles a z-index cuts the outgoing canvas in half at the centre seam. */
.collection-slide.is-active,.collection-slide.is-outgoing{z-index:auto}
.collection-slide .scene-media{z-index:0}.collection-slide.is-active .scene-media{z-index:1}
.collection-slide .scene-product{z-index:3}.collection-slide.is-active .scene-product{z-index:4}
.collection-slide .scene-copy{z-index:5}
.collection-slide .scene-copy{transform:translateY(calc(-50% + var(--copy-y)));will-change:transform}
.collection-slide .scene-product{left:49%;width:min(22vw,calc(70svh * 2 / 3),460px)}
.collection-slide .scene-headline{font-weight:400;font-size:clamp(40px,4.6vw,88px)}
[data-animating=true] .scene-actions{pointer-events:none}
.scene-media{position:absolute;inset:0 auto 0 0;width:50%;height:100%;overflow:hidden;background:#d4cfc7;opacity:var(--room-opacity);clip-path:inset(var(--room-clip) 0 0 0)}
.room-live{position:absolute;inset:-4%;display:block;width:108%;height:108%;opacity:0;filter:blur(var(--room-blur));transform:translateY(var(--room-y));pointer-events:none}
.has-room-video .room-film.is-ready{opacity:1!important}.has-room-video .scene-poster,.has-room-video .room-live{opacity:0!important}
.has-live-room .room-live{opacity:1}.has-live-room .scene-poster,.has-live-room .room-film{opacity:0!important}
.scene-poster,.room-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0;transform:scale(1.04);filter:blur(var(--room-blur))}
.room-film{opacity:0;transition:opacity .55s}.has-film .room-film.is-ready{opacity:1}
.scene-media:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 65%,#17131a14)}
.scene-product{position:absolute;left:48%;top:50%;width:min(25vw,calc(73svh * 2 / 3),500px);aspect-ratio:2/3;z-index:3;perspective:1400px;transform:translate(-50%,calc(-50% + var(--product-y))) rotate(var(--product-rotate));will-change:transform}
.canvas-float{width:100%;height:100%;animation:canvas-drift 3.6s cubic-bezier(.37,0,.63,1) infinite alternate;will-change:transform}
.framed-canvas{position:relative;display:block;width:100%;height:100%;padding:clamp(5px,.42vw,9px);border:0;background:linear-gradient(120deg,#464646,#111112,#313132);line-height:0;box-shadow:18px 30px 48px #0005,3px 2px 0 #171b1770,inset 0 0 0 1px #ffffff26;transform:rotateY(-4deg);cursor:zoom-in}
.framed-canvas[data-frame=oak]{background:linear-gradient(115deg,#d9b988,#b48e5b,#dac093)}
.framed-canvas[data-frame=white]{background:linear-gradient(115deg,#fff,#e8e7e0,#fff);box-shadow:18px 30px 48px #0005,2px 1px 0 #b8b8b0}
.framed-canvas[data-frame=walnut]{background:linear-gradient(115deg,#976b4d,#563b28,#8a6044)}
.framed-canvas img{display:block;width:100%;height:100%;object-fit:cover}
.framed-canvas:after{content:"";position:absolute;inset:clamp(5px,.42vw,9px);background:url('/assets/canvas-weave.webp') repeat;background-size:16.6667% 11.1111%;mix-blend-mode:soft-light;opacity:.5;pointer-events:none}
.scene-copy{position:absolute;left:64%;right:5.4vw;top:50%;z-index:4;transform:translateY(-50%);max-width:620px}
.scene-copy>.eyebrow{display:block;font-size:12px;letter-spacing:1.5px;line-height:1.5;color:#bcb0ff;margin-bottom:9px}
.scene-art-name{display:block;color:#b8b0be;font-size:14px;line-height:1.5;letter-spacing:.2px;margin-bottom:25px}.scene-art-name:hover{color:#fff}
.scene-headline{font-size:clamp(40px,5vw,102px);line-height:1;letter-spacing:-.045em;font-weight:600;margin:0 0 30px}
.scene-headline>span,.scene-headline>em{display:block;overflow:hidden;padding-block:.08em;margin-block:-.08em;color:#fff}
.scene-headline>em{color:#9a87ff;font-size:.8em;font-style:italic;font-weight:500;line-height:1.1;letter-spacing:-.035em;margin:2px 0 4px 7%}
.scene-headline>span>span,.scene-headline>em>span{display:block;color:inherit;transform:translateY(var(--line-1-y));will-change:transform}
.scene-headline>:nth-child(2)>span{transform:translateY(var(--line-2-y))}.scene-headline>:nth-child(3)>span{transform:translateY(var(--line-3-y))}
.scene-copy>p{font-size:clamp(16px,1.1vw,20px);line-height:1.7;color:#c7c0cd;max-width:500px;margin:0}
.scene-spec{display:flex;align-items:center;gap:16px;margin-top:24px;font-size:13px;line-height:1.5;color:#c7c0cd}
.scene-spec>span{display:flex;align-items:center;gap:9px}.scene-spec>span:first-child{font-size:11px;letter-spacing:1px;border-right:1px solid #ffffff28;padding-right:16px}.scene-spec i{display:block;width:11px;height:11px;border-radius:50%;border:1px solid #ffffff55;flex-shrink:0}
.scene-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:32px}
.scene-cta,.scene-secondary{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:52px;padding:16px 23px;border:0;border-radius:30px;background:#9a87ff;color:#17131a;font-size:12px;letter-spacing:.5px;line-height:1.4;white-space:nowrap;transition:background .25s,color .25s}
.scene-cta>span,.scene-secondary>span{font-size:22px;line-height:1}.scene-cta:hover,.scene-secondary:hover{background:#fff;color:#17131a}
.collection-slide .scene-copy>.eyebrow,.collection-slide .scene-art-name,.collection-slide .scene-copy>p,.collection-slide .scene-spec,.collection-slide .scene-actions{opacity:var(--meta-opacity);transform:translateY(var(--meta-y));will-change:transform,opacity}
.collection-controls{position:absolute;z-index:8;left:30px;right:4vw;bottom:82px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.collection-dots{display:flex;gap:4px;padding:5px 8px;background:#17131aeb;backdrop-filter:blur(10px);border-radius:30px}
.collection-dots button{position:relative;border:0;background:none;color:#b8b0c0;min-width:31px;min-height:36px;font-size:12px;padding:8px 5px}.collection-dots button.active{color:#c0b3ff}.collection-dots button.active:after{content:"";position:absolute;bottom:3px;left:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:#b29fff}
.collection-arrows,.detail-view-arrows{display:flex;align-items:center;gap:12px}
.collection-down{color:#c6badc;font-size:12px;line-height:1.4;letter-spacing:1px;padding:12px 2px;border-bottom:1px solid #ffffff30}
.collection-arrows>button,.detail-view-arrows>button{display:grid;place-items:center;width:45px;height:45px;border:1px solid #ffffff38;border-radius:50%;background:#17131a;color:#fff;font-size:22px;transition:background .25s,color .25s}
.collection-arrows>button:hover,.detail-view-arrows>button:hover{color:#17131a;background:#9a87ff;border-color:#9a87ff}
.collection-arrows>[data-collection-play]{font-size:18px}.collection-arrows>span,.detail-view-arrows>span{font-size:12px;letter-spacing:1px;white-space:nowrap;color:#b8b0be}.collection-arrows b{font-weight:500;color:#fff}
.collection-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#ffffff0d;z-index:5}.collection-progress i{display:block;height:100%;background:#9a87ff;transform:scaleX(var(--slide-progress));transform-origin:left}
.product-page{position:relative;height:100svh;min-height:680px;overflow:hidden}
.scene-gallery{position:absolute;z-index:6;left:25px;bottom:24px;display:flex;gap:9px;padding:7px;background:#17131ad9;border-radius:8px;backdrop-filter:blur(12px)}
.scene-gallery button{display:block;width:64px;height:74px;padding:3px;background:none;border:1px solid transparent;border-radius:3px}.scene-gallery button[aria-pressed=true]{border-color:#ad9aff;background:#ffffff14}.scene-gallery button:hover{border-color:#d2c8ff}
.scene-gallery button img{display:block;width:100%;height:100%;object-fit:cover}.scene-gallery button:last-child img{object-fit:contain}
.scene-media.is-art-view{background:#eeeae5}.scene-media.is-art-view .scene-poster{object-fit:contain;padding:7vh 4vw;transform:none;filter:none}.scene-media.is-art-view:after{display:none}
.product-page:has(.is-art-view) .scene-product,.art-experience:has(.is-art-view) .scene-product{opacity:0;pointer-events:none}
.product-story .eyebrow{display:block;margin-bottom:45px}.product-story .editorial-grid h2{font-size:clamp(32px,4vw,60px)}
body.art-dialog-open{overflow:hidden}
dialog.art-experience{position:fixed;inset:0;margin:0;padding:0;border:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;overflow:hidden;color:#fff;background:#17131a}
dialog.art-experience[open]{display:block}.art-experience::backdrop{background:#17131a}.art-experience .framed-canvas{cursor:default}
.art-experience #close-dialog{position:absolute;right:30px;top:25px;z-index:10;display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff40;border-radius:50%;background:#17131a;color:#fff;font-size:17px}.art-experience #close-dialog:hover{background:#9a87ff;color:#17131a}
.detail-view-arrows{position:absolute;right:4vw;bottom:82px;z-index:6}
.has-live-motion .framed-canvas{transform:translateX(var(--live-x,0px)) rotateY(calc(-4deg + var(--live-tilt,0deg)))}
.use-script-drift .canvas-float{animation:none!important;transform:translate3d(var(--live-driftX,0px),var(--live-y,0px),var(--live-depth,0px)) rotateX(var(--live-pitch,0deg)) rotateY(var(--live-yaw,0deg)) rotateZ(var(--live-rotate,0deg))}
[data-motion=paused] .canvas-float{animation-play-state:paused}
[data-gentle-motion=true]{--float-distance:38px}
.has-live-motion .scene-poster,.has-live-motion .room-film{transform:translate3d(var(--live-roomX,0px),calc(var(--room-y,0%) + var(--live-roomY,0px)),0) scale(var(--live-scale,1.06))}
.has-live-motion .scene-media.is-art-view .scene-poster{transform:none}
.collection-slide.is-visible .scene-poster,.collection-slide.is-visible .room-film{will-change:transform,filter}
body:has([data-collection]) .site-header,body:has([data-product-page]) .site-header{background:transparent}
body:has([data-collection]) #menu-button,body:has([data-product-page]) #menu-button{color:#fff}
body:has([data-collection]) .header-center,body:has([data-product-page]) .header-center{color:#fff;text-shadow:0 1px 6px #0008}
body:has([data-collection]) .wordmark,body:has([data-product-page]) .wordmark{padding:10px 12px;margin-left:-12px;border-radius:4px;background:#ffffffde;backdrop-filter:blur(8px)}
body.menu-open:has([data-collection]) #menu-button,body.menu-open:has([data-product-page]) #menu-button,body.menu-open .header-center{color:#01052e;text-shadow:none}
.collection-page-body>.video-section-heading{margin-top:10px;border:0;padding-top:0}
.finish-intro{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:5vw;padding:35px 0 55px;min-height:520px}.finish-heading>.eyebrow{display:block;margin-bottom:38px}.finish-heading h2{font-size:clamp(38px,4.4vw,80px);line-height:1.1}
.finish-visual{margin:0;line-height:0}.finish-visual img{display:block;width:100%;height:auto;filter:drop-shadow(0 22px 24px #01052e09)}
.atelier-brand{justify-self:start!important;width:100%}.atelier-logo{display:block;width:clamp(190px,21vw,320px);margin:35px 0 0 -14px}.atelier-logo img{display:block;width:100%;height:auto;mix-blend-mode:normal}
@keyframes canvas-drift{from{transform:translate3d(calc(-1 * var(--float-x)),calc(-1 * var(--float-distance)),var(--float-depth)) rotateX(var(--float-pitch)) rotateY(calc(-1 * var(--float-yaw))) rotateZ(calc(-1 * var(--float-rotate)))}to{transform:translate3d(var(--float-x),var(--float-distance),calc(-1 * var(--float-depth))) rotateX(calc(-1 * var(--float-pitch))) rotateY(var(--float-yaw)) rotateZ(var(--float-rotate))}}
@media(max-width:1200px){.scene-copy{left:64%;right:4vw}.scene-headline{font-size:clamp(38px,4.8vw,64px)}.scene-spec>span:first-child{display:none}.scene-art-name{margin-bottom:20px}.scene-actions{margin-top:25px;gap:12px}.scene-cta,.scene-secondary{font-size:12px;min-height:48px;padding:14px 19px;gap:15px}.collection-dots{gap:1px}.collection-dots button{min-width:28px}.collection-arrows{gap:10px}}
@media(max-height:800px) and (min-width:701px){.scene-headline{font-size:clamp(35px,4.5vw,67px);margin-bottom:22px}.scene-art-name{margin-bottom:15px}.scene-copy>.eyebrow{margin-bottom:6px}.scene-copy>p{font-size:16px;line-height:1.6}.scene-spec{margin-top:17px}.scene-actions{margin-top:24px}.scene-cta,.scene-secondary{min-height:46px;padding:13px 18px;font-size:12px}.scene-product{width:min(25vw,calc(72svh * 2 / 3))}}
@media(max-width:850px) and (min-width:701px){.scene-copy{left:63%;right:4vw}.scene-headline{font-size:39px}.scene-copy>p{font-size:15px}.scene-actions{display:block}.scene-secondary{margin-top:11px}.collection-dots{display:none}.collection-controls{justify-content:flex-end}.scene-product{left:47%;width:27vw}}
@media(max-width:700px){
 .collection-slide,.product-page,.art-experience{--float-distance:35px;--float-x:5px;--float-rotate:.72deg;--float-pitch:.96deg;--float-yaw:1.8deg;--float-depth:5px}
 .collection-story-scroll,.product-page{height:100svh;min-height:820px}.scene-media{width:100%;height:47%}.scene-media:after{background:linear-gradient(transparent 85%,#17131a45)}
 .scene-product{left:50%;top:26%;width:min(43vw,calc(39svh * 2 / 3));transform:translate(-50%,calc(-50% + var(--product-y))) rotate(var(--product-rotate))}
 .collection-slide .scene-product{left:50%;width:min(43vw,calc(39svh * 2 / 3))}.collection-slide .scene-copy{transform:translateY(var(--copy-y))}.collection-slide .scene-headline{font-size:clamp(28px,7.5vw,42px)}.collection-down{font-size:11px;letter-spacing:.5px}
 .scene-copy{left:7vw;right:7vw;top:auto;bottom:148px;transform:none;max-width:none}.scene-copy>.eyebrow{font-size:11px;letter-spacing:.9px;margin-bottom:5px}.scene-art-name{font-size:13px;margin-bottom:12px}
 .scene-headline{font-size:clamp(28px,7.5vw,42px);line-height:1.04;margin:0 0 17px}.scene-headline>span,.scene-headline>em{display:inline-block;vertical-align:bottom}.scene-headline>em{font-size:.94em;line-height:1.1;padding-inline:.13em;margin:0}
 .scene-copy>p{font-size:14px;line-height:1.6;max-width:500px}.scene-spec{font-size:12px;gap:12px;margin-top:13px}.scene-spec>span:first-child{display:none}.scene-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}.scene-cta,.scene-secondary{font-size:11px;min-height:44px;padding:12px 16px;gap:13px;margin-top:0}.scene-cta>span,.scene-secondary>span{font-size:20px}
 .collection-controls{left:7vw;right:7vw;bottom:82px;justify-content:flex-end}.collection-dots{display:none}.collection-arrows>button,.detail-view-arrows>button{width:40px;height:40px;font-size:20px}.collection-arrows>span,.detail-view-arrows>span{font-size:11px}
 .scene-gallery{left:18px;top:calc(47% - 67px);bottom:auto;padding:5px;gap:7px}.scene-gallery button{width:47px;height:51px}.detail-view-arrows{right:7vw;bottom:82px}.art-experience #close-dialog{right:18px;top:18px;width:38px;height:38px}
 .scene-media.is-art-view .scene-poster{padding:35px 8vw}.product-story .editorial-grid{gap:25px}.finish-intro{grid-template-columns:1fr;gap:22px;padding-top:30px;min-height:0}.finish-heading>.eyebrow{margin-bottom:25px}.finish-heading h2{font-size:clamp(36px,8vw,60px)}.finish-visual{width:min(100%,520px);justify-self:center}.atelier-logo{width:240px;margin-top:25px}
}
@media(prefers-reduced-motion:reduce){.collection-slide,.product-page,.art-experience{--float-distance:38px;--float-x:5px;--float-rotate:.78deg;--float-pitch:1.04deg;--float-yaw:1.95deg;--float-depth:5px}.collection-story-scroll *,.product-page *,.art-experience *{transition-duration:.01ms!important}.has-live-motion .framed-canvas{transform:rotateY(-4deg)}}

/* The frame strip and atelier share one divider, with no empty spacer. */
.collection-page-body .finish-strip{margin-bottom:0;padding-bottom:24px}
.collection-page-body>.collection-story{margin-top:0;border-top:0;padding-top:36px}
.scene-product:after{content:"";position:absolute;left:12%;right:12%;bottom:-62px;height:24px;border-radius:50%;background:radial-gradient(ellipse,#0008,transparent 70%);filter:blur(8px);transform:scaleX(var(--live-shadowScale,1));opacity:var(--live-shadowOpacity,.17);pointer-events:none;z-index:-1}
@media(max-width:700px){.scene-product:after{bottom:-38px;height:15px}.collection-page-body>.collection-story{padding-top:28px}}
@media(prefers-reduced-motion:reduce) and (max-width:700px){.collection-slide,.product-page,.art-experience{--float-distance:23px;--float-x:3px;--float-rotate:.47deg;--float-pitch:.62deg;--float-yaw:1.17deg;--float-depth:3px}}

/* Mobile copy participates in layout. Even the longest language/slide cannot
   cover the canvas or push its links outside a fixed 820px panel. */
@media(max-width:700px){
 .collection-story-scroll,.product-page,.art-experience{--scene-room-height:clamp(330px,48svh,500px)}
 .collection-story-scroll{height:auto;min-height:100svh}
 .collection-sticky,.collection-stage{height:auto;min-height:100svh}
 .collection-stage{display:grid}
 .collection-slide{position:relative;inset:auto;grid-area:1/1;display:grid;grid-template-rows:var(--scene-room-height) minmax(min-content,1fr);min-width:0;min-height:100svh}
 .scene-media{height:var(--scene-room-height);width:100%}
 .scene-product,.collection-slide .scene-product{left:50%;top:calc(var(--scene-room-height)*.52);width:min(43vw,calc((var(--scene-room-height) - 120px)*2/3))}
 .scene-copy{position:relative;left:auto;right:auto;top:auto;bottom:auto;grid-row:2;align-self:start;max-width:none;min-width:0;padding:28px var(--pad) 38px;transform:none}
 .collection-slide .scene-copy{transform:translateY(var(--copy-y));padding-bottom:148px}
 .scene-copy>.eyebrow{font-size:12px;line-height:1.5;letter-spacing:.7px}.scene-art-name{font-size:14px;line-height:1.5}
 .scene-headline,.collection-slide .scene-headline{font-size:clamp(30px,8vw,47px);line-height:1.08;overflow-wrap:normal}
 .scene-copy>p{font-size:16px;line-height:1.65}.scene-spec{font-size:13px;flex-wrap:wrap;line-height:1.5}
 .scene-actions{margin-top:21px;gap:10px}.scene-cta,.scene-secondary{font-size:12px;min-height:48px;padding:13px 17px;gap:12px;max-width:100%;white-space:normal;text-align:center}
 .collection-controls{left:var(--pad);right:var(--pad);bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px));display:grid;grid-template-columns:1fr auto;gap:12px}
 .collection-dots{display:flex;grid-column:1/-1;justify-self:center;padding:0 7px;gap:0}.collection-dots button{min-width:44px;min-height:44px;font-size:12px}
 .collection-down{grid-column:1;grid-row:2;justify-self:start;font-size:12px;min-height:44px;display:flex;align-items:center;padding:8px 0}
 .collection-arrows{grid-column:2;grid-row:2;gap:8px}.collection-arrows>button,.detail-view-arrows>button{width:44px;height:44px;font-size:22px}.collection-arrows>span,.detail-view-arrows>span{font-size:12px;letter-spacing:.5px}
 .product-page{display:grid;height:auto;min-height:100svh;grid-template-rows:var(--scene-room-height) auto auto}
 .product-page .scene-copy,.art-experience .scene-copy{grid-row:3}
 .scene-gallery{position:relative;left:auto;top:auto;bottom:auto;grid-row:2;justify-self:center;align-self:start;max-width:calc(100% - var(--pad)*2);margin:14px auto 0;gap:7px;padding:6px;overflow-x:auto}
 .scene-gallery button{width:51px;height:57px;flex-shrink:0}
 dialog.art-experience[open]{display:grid;grid-template-rows:var(--scene-room-height) auto auto auto;align-content:start;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
 .art-experience .scene-copy{padding-bottom:24px}
 .art-experience #close-dialog{position:fixed;right:max(16px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));width:44px;height:44px}
 .detail-view-arrows{position:relative;right:auto;bottom:auto;grid-row:4;justify-self:end;margin:0 var(--pad) max(24px,env(safe-area-inset-bottom))}
}