@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600&family=Manrope:wght@400;500;600&display=swap');
:root{--paper:#f5f3ed;--ink:#30362e;--muted:#85887d;--line:#d8d9d0;--ease:cubic-bezier(.22,.8,.2,1)}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-size:13px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button{border:0;background:none}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #6c775d;outline-offset:6px}header{height:126px;display:flex;justify-content:space-between;align-items:center;padding:0 5.5%;position:relative;z-index:5}.nav-link{text-transform:uppercase;font-size:10px;letter-spacing:1.6px;padding:12px 0}.nav-link span{margin-left:18px}.brand{display:flex;align-items:center;flex-direction:column;gap:8px;position:absolute;left:50%;transform:translateX(-50%)}.brand svg{width:33px;height:33px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round}.brand span{font:600 13px 'Manrope',Arial;letter-spacing:3.4px;margin-left:3px}main{height:calc(100svh - 196px);min-height:660px;position:relative;overflow:hidden}.edition{position:absolute;top:27px;width:100%;text-align:center;transition:opacity .5s,transform .7s}.edition>span,.tiny{font-size:9px;letter-spacing:2px;color:var(--muted)}h1{font-family:'Manrope',Arial;font-size:30px;letter-spacing:-1.1px;font-weight:400;margin:15px 0 8px}.edition p{color:var(--muted);font-size:11px}.stage{position:absolute;top:165px;left:0;width:100%;height:400px;perspective:1400px}.rail{position:absolute;top:0;left:12%;width:76%;height:5px;border-radius:5px;background:linear-gradient(#aaaead,#fdfdfb 45%,#a9adaa 76%,#747b75);box-shadow:0 2px 4px #626b5b18;transition:opacity .6s}.rail i{position:absolute;top:-5px;width:14px;height:14px;border:1px solid #b7bab3;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff,#d6d8d1 60%,#a7ada4);left:-4px}.rail i:last-child{left:auto;right:-4px}#garments{position:absolute;inset:0;transform-style:preserve-3d}.garment{--x:0;--angle:0;--scale:1;position:absolute;left:50%;top:-17px;width:250px;height:375px;margin-left:-125px;padding:0;transform:translateX(var(--x)) scale(var(--scale));transform-origin:50% 7%;transition:transform 1.15s var(--ease),filter .8s,opacity .8s;filter:drop-shadow(5px 12px 8px #343b2912);z-index:var(--z);outline-offset:0!important}.garment img{width:100%;height:100%;object-fit:contain;pointer-events:none;transition:opacity .25s}.garment:hover{filter:drop-shadow(8px 15px 10px #343b2925)}.garment .tag{position:absolute;bottom:-23px;left:50%;transform:translateX(-50%);white-space:nowrap;opacity:0;font-size:9px;letter-spacing:1.5px;transition:opacity .4s}.garment:hover .tag{opacity:1}.floor-shadow{position:absolute;bottom:-5px;left:25%;width:50%;height:20px;border-radius:50%;background:#7f806b;opacity:.09;filter:blur(15px);transition:all .8s}.rack-caption{position:absolute;top:590px;text-align:center;width:100%;transition:opacity .4s}.rack-caption p{font:400 20px 'Manrope',Arial;margin:13px 0 16px;letter-spacing:-.5px}.hint{color:var(--muted);font-size:10px}.hint span{margin-left:10px}.arrow{position:absolute;top:45%;font-size:24px;font-weight:400;opacity:0;visibility:hidden;transition:opacity .5s;z-index:6;padding:20px;left:28%}.arrow.next{left:auto;right:28%}.piece-info{position:absolute;top:565px;left:50%;width:400px;transform:translateX(-50%);text-align:center;opacity:0;visibility:hidden;transition:opacity .5s .3s}.piece-info h2{font:400 25px 'Manrope',Arial;letter-spacing:-.8px;margin:10px 0 6px}.piece-info>p{color:var(--muted);font-size:11px;margin:0 0 16px}.back{font-size:10px;color:#747b6d;letter-spacing:.4px}.piece-info>.back{position:fixed;top:-490px;left:0;white-space:nowrap}.swatches{display:flex;justify-content:center;gap:12px;padding:4px 0 22px}.swatch{width:15px;height:15px;border-radius:50%;background:var(--color);border:1px solid #898c7d35;position:relative}.swatch[aria-pressed=true]:after{content:'';position:absolute;inset:-5px;border:1px solid #868b7e;border-radius:50%}.piece-actions{display:flex;align-items:center;justify-content:center;gap:23px}.text-button{font-size:10px;padding:10px 0}.outline-button{border:1px solid #bbc0b0;padding:13px 18px;font-size:10px;display:flex;align-items:center;justify-content:space-between;gap:22px;transition:background .25s}.outline-button:hover{background:#e6e8de}.motion-caption{font-size:8px!important;color:#969b8c!important;margin-top:16px!important;letter-spacing:.5px}.detail-panel{position:absolute;top:70px;right:12%;width:300px;opacity:0;visibility:hidden;transform:translateX(40px);transition:all .7s var(--ease)}.detail-panel>.back{display:block;margin-bottom:36px}.detail-panel h2,dialog h2{font:400 35px/1.15 'Manrope',Arial;letter-spacing:-1.4px;margin:20px 0}.detail-copy{font-size:11px;color:var(--muted);line-height:1.8}.fabric{height:200px;overflow:hidden;margin-top:27px;background:#e4e5da}.fabric img{width:100%;height:100%;object-fit:cover;object-position:100% 50%;transform:scale(1.6);transform-origin:right center}.detail-meta{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);margin:14px 0 23px}.detail-panel .outline-button{width:100%}.save-status{font-size:10px;color:#6e7864;min-height:14px}footer{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 5.5%;border-top:1px solid #d8dbcf80;font-size:8px;letter-spacing:1.3px;color:#818879}footer button{font-size:9px;letter-spacing:.8px;padding:15px}footer button span{margin-left:12px;font-size:8px}.footer-right>span{margin-left:30px}dialog{max-width:470px;border:1px solid #d0d5c5;background:var(--paper);color:var(--ink);padding:48px}dialog::backdrop{background:#27302150;backdrop-filter:blur(7px)}dialog>button{position:absolute;right:20px;top:10px;font-size:27px}dialog p{font-size:12px;line-height:1.8;color:#7c8473}dialog .disclosure{font-size:10px;margin-top:30px}main[data-view=focus] .edition,main[data-view=detail] .edition{opacity:0;transform:translateY(-12px)}main:not([data-view=rack]) .rail,main:not([data-view=rack]) .rack-caption{opacity:0;pointer-events:none}main:not([data-view=rack]) .garment:not(.selected){opacity:.17;filter:blur(5px);pointer-events:none}main[data-view=focus] .piece-info{opacity:1;visibility:visible}main[data-view=focus] .arrow{opacity:1;visibility:visible}main:not([data-view=rack]) .stage{top:65px}main:not([data-view=rack]) .garment.selected{--x:0px!important;--angle:0deg!important;--scale:1.3;z-index:5;cursor:grab}main:not([data-view=rack]) .garment.selected:hover{--scale:1.3}main:not([data-view=rack]) .garment .tag{display:none}main[data-view=detail] .garment.selected{--x:-245px!important;--scale:1.5}main[data-view=detail] .garment.selected:hover{--scale:1.5}main[data-view=detail] .detail-panel{opacity:1;visibility:visible;transform:translateX(0)}main[data-view=detail] .floor-shadow{left:18%;width:30%;bottom:-80px}.rotation-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;opacity:0;pointer-events:none;mask-image:linear-gradient(transparent,#000 6%,#000 94%,transparent)}.garment.video-playing .front-fallback,.garment.video-playing .sprite-frame{opacity:0!important}.garment.video-playing .rotation-video{opacity:1}.stage,.garment{touch-action:pan-y}
@media(min-height:950px){.stage{top:210px}.rack-caption{top:650px}main:not([data-view=rack]) .stage{top:115px}.piece-info{top:620px}}
@media(max-width:800px){header{height:104px;padding:0 7%}.brand svg{width:28px;height:28px}.brand span{font-size:10px}.nav-link{font-size:8px;letter-spacing:1px}.nav-link span{margin-left:5px}main{height:calc(100svh - 164px);min-height:640px}.edition{top:25px}h1{font-size:27px}.edition>span{font-size:7px}.edition p{font-size:10px}.stage{top:170px;height:300px}.rail{left:5%;width:90%}.garment{width:190px;height:285px;margin-left:-95px}.rack-caption{top:505px}.rack-caption .tiny{font-size:7px}.rack-caption p{font-size:19px}main:not([data-view=rack]) .stage{top:50px}main:not([data-view=rack]) .garment.selected{--scale:1.45}main:not([data-view=rack]) .garment.selected:hover{--scale:1.45}.piece-info{top:470px;width:90%}.piece-info>.back{top:-430px;left:5%}.arrow{left:5%;top:55%;padding:10px}.arrow.next{right:5%}.detail-panel{right:7%;width:43%;top:55px}.detail-panel h2{font-size:25px}.detail-panel .tiny{font-size:7px}.detail-panel>.back{margin-bottom:20px}.fabric{height:180px}.detail-copy{font-size:10px}main[data-view=detail] .garment.selected{--x:-140px!important;--scale:1.1}main[data-view=detail] .garment.selected:hover{--scale:1.1}footer{height:60px;padding:0 7%;font-size:6px}footer button{font-size:8px}.footer-right{display:none}}
@media(max-width:500px){.detail-panel{top:350px;width:86%;right:7%}.detail-panel>.back{position:absolute;top:-310px}.detail-panel h2{font-size:24px;margin:12px 0}.detail-copy{display:none}.fabric{position:absolute;right:0;top:15px;width:40%;height:150px;margin:0}.detail-meta{width:52%;flex-direction:column;gap:8px}.detail-panel .outline-button{width:52%;padding:12px}.detail-panel>.tiny{font-size:6px}main[data-view=detail] .garment.selected{--x:0px!important;--scale:.9}main[data-view=detail] .stage{top:30px}.swatches{padding-bottom:18px}.piece-info h2{font-size:23px}.piece-info{top:460px}.piece-actions{gap:18px}.outline-button{padding:12px}dialog{width:88%;padding:32px}dialog h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media(max-height:850px) and (min-width:801px){header{height:90px}main{height:calc(100svh - 150px);min-height:550px}.edition{top:13px}.edition h1{margin-top:12px}.stage{top:140px;height:300px}.garment{width:210px;height:315px;margin-left:-105px}.rack-caption{top:465px}.rack-caption p{margin:9px 0 13px}main:not([data-view=rack]) .stage{top:5px}main:not([data-view=rack]) .garment.selected{--scale:1.15}main:not([data-view=rack]) .garment.selected:hover{--scale:1.15}.piece-info{top:360px}.piece-info>.back{top:-330px}.piece-info h2{font-size:23px;margin:7px 0 5px}.swatches{padding-bottom:17px}.motion-caption{margin-top:10px!important}.detail-panel{top:20px}.detail-panel>.back{margin-bottom:18px}.detail-panel h2{font-size:30px;margin:15px 0}.fabric{height:170px;margin-top:18px}main[data-view=detail] .garment.selected{--scale:1.5}main[data-view=detail] .garment.selected:hover{--scale:1.5}footer{height:60px}}
@media(max-width:800px) and (max-height:800px){header{height:85px}main{height:calc(100svh - 140px);min-height:550px}.edition{top:10px}.stage{top:145px;height:285px}.rack-caption{top:450px}.garment{width:180px;height:270px;margin-left:-90px}main:not([data-view=rack]) .stage{top:5px}main:not([data-view=rack]) .garment.selected{--scale:1.3}main:not([data-view=rack]) .garment.selected:hover{--scale:1.3}.piece-info{top:355px}.piece-info>.back{top:-325px}.detail-panel{top:315px}main[data-view=detail] .stage{top:0}main[data-view=detail] .garment.selected{--scale:.95}main[data-view=detail] .garment.selected:hover{--scale:.95}.detail-panel>.back{top:-285px}footer{height:55px}}
/* Keep the entire information panel reachable at intermediate heights. */
@media(min-width:801px) and (min-height:851px){main{min-height:680px}main:not([data-view=rack]) .stage{top:clamp(20px,calc(100svh - 900px),115px)}.piece-info{top:clamp(455px,calc(100svh - 440px),620px)}}
@media(min-width:801px) and (min-height:851px) and (max-height:949px){main:not([data-view=rack]) .garment.selected{--scale:1.15}main:not([data-view=rack]) .garment.selected:hover{--scale:1.15}}
@media(min-width:501px) and (max-width:800px) and (max-height:800px){main[data-view=detail]{min-height:650px}.detail-panel{top:30px}.detail-panel>.back{position:static}.fabric{height:150px}main[data-view=detail] .garment.selected{--x:-140px!important;--scale:1.1}}
.fabric img{transform:scale(3)}
@media(max-width:500px){main[data-view=rack] .garment{width:140px;height:210px;margin-left:-70px;top:0}main[data-view=rack] .garment:hover{--scale:1}main[data-view=rack] .floor-shadow{bottom:45px}main[data-view=rack] .rack-caption{top:430px}}

/* Fixed input slots prevent a turning silhouette from stealing adjacent hovers. */
.garment{width:var(--hit-width,147px);margin-left:calc(var(--hit-width,147px) / -2);height:var(--piece-height,375px)}
.garment-visual{--reveal:0;--sway:0deg;position:absolute;top:0;left:50%;width:var(--piece-width,250px);height:var(--piece-height,375px);margin-left:calc(var(--piece-width,250px) / -2);pointer-events:none;isolation:isolate;transform-origin:50% 4%;transform:translateY(calc(var(--reveal) * -4px)) rotateZ(var(--sway)) scale(calc(1 + var(--reveal) * .035));}
.sprite-frame{position:absolute;inset:0;background-size:200% 200%;background-repeat:no-repeat;transform-origin:50% 4%;mix-blend-mode:plus-lighter;display:none;will-change:transform,opacity}
.turnsheet-source{display:none!important}
.front-fallback{transform:scaleX(calc(.3 + var(--reveal) * .7))}
.has-turnsheet .front-fallback{display:none}
.has-turnsheet .sprite-frame{display:block}
.garment .tag{bottom:-26px}
.garment:hover .tag,.garment:focus-visible .tag{opacity:1}
@media(max-height:850px) and (min-width:801px){.garment{--piece-width:210px;--piece-height:315px}}
@media(max-width:800px){.garment{--piece-width:190px;--piece-height:285px}}
@media(max-width:800px) and (max-height:800px){.garment{--piece-width:180px;--piece-height:270px}}
@media(max-width:500px){main[data-view=rack] .garment{--piece-width:140px;--piece-height:210px;width:var(--hit-width,72px);height:210px;margin-left:calc(var(--hit-width,72px) / -2)}}
@media(prefers-reduced-motion:reduce){.garment-visual{transform:none}.sprite-frame{will-change:auto}}
