/* The wearer stays in place; new wardrobe layers move onto her. */
.look-story{height:390svh;background:#eeebe5;--look-boots:0;--look-shirt:0;--look-hat:0;--look-finish:0;--look-boots-base:1;--look-shirt-base:1}
.look-story .story-sticky{top:69px;height:calc(100svh - 69px);min-height:420px;background:radial-gradient(ellipse at 73% 48%,#fcfaf5 0%,#f0ede7 41%,#e7e3dc 100%)}
.look-story .story-word{top:30%;left:10%;font-size:24vw;opacity:.035;letter-spacing:-2vw;z-index:0;pointer-events:none}
.look-story .story-topline{z-index:2;top:26px;font-size:8px}
.look-story .story-messages{z-index:2;left:7.5%;width:40%;top:45%}
.look-story .story-stage h2{font-size:clamp(40px,4.7vw,76px);line-height:1.02;letter-spacing:-2.4px}
.look-story .story-stage p{font-size:12px;line-height:1.9;color:#7d7477;max-width:360px}
.look-story .story-stage .eyebrow{font-size:8px;letter-spacing:2px}
.look-story .story-stage .text-link{font-size:8px;margin-top:15px}
.look-portrait{position:absolute;inset:55px 4% 76px 48%;display:flex;align-items:center;justify-content:center;isolation:isolate}
.look-canvas{height:100%;aspect-ratio:2/3;position:relative;flex-shrink:0;z-index:1;opacity:0;transition:opacity .7s}
.model-loaded .look-canvas{opacity:1}
.look-image{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center;pointer-events:none}
.look-base-head{clip-path:inset(0 0 80% 0)}
.look-base-shirt{clip-path:inset(20% 0 40% 0)}
.look-base-jeans{clip-path:inset(60% 0 9.5% 0);opacity:var(--look-boots-base)}
.look-base-boots{clip-path:inset(90.5% 0 0 0);opacity:var(--look-boots-base)}
.look-piece{will-change:transform,opacity}
.look-settled-legs{clip-path:inset(60% 0 0 0);opacity:calc(1 - var(--look-boots-base))}
.look-boots{clip-path:inset(75% 0 0 0);transform:translate3d(calc((1 - var(--look-boots))*35px),calc((1 - var(--look-boots))*130px),0) rotate(calc((1 - var(--look-boots))*8deg));transform-origin:50% 85%;opacity:calc(var(--look-boots) * var(--look-boots-base))}
.look-shirt{clip-path:inset(20% 0 40% 0);transform:translate3d(calc((1 - var(--look-shirt))*150px),calc((1 - var(--look-shirt))*-18px),0) rotate(calc((1 - var(--look-shirt))*-9deg));transform-origin:50% 40%;opacity:var(--look-shirt)}
.look-hat{clip-path:inset(0 0 80% 0);transform:translate3d(calc((1 - var(--look-hat))*-30px),calc((1 - var(--look-hat))*-150px),0) rotate(calc((1 - var(--look-hat))*-13deg));transform-origin:50% 10%;opacity:var(--look-hat)}
.look-finished{opacity:var(--look-finish);pointer-events:none}
.look-halo{position:absolute;top:12%;left:8%;right:8%;bottom:8%;border-radius:50%;background:radial-gradient(ellipse,#ffffff90,transparent 68%);z-index:0}
.look-floor{position:absolute;bottom:0;left:25%;right:25%;height:13px;border-radius:50%;background:#7c675321;filter:blur(12px)}
.look-label{position:absolute;z-index:2;font-size:7px;letter-spacing:1.1px;color:#6f6467;display:flex;gap:9px;align-items:center;pointer-events:none}
.look-label:before{content:'';width:23px;height:1px;background:#bcb1af}
.look-label span{color:#bf2535;font-size:8px}
.look-label-boots{left:65%;bottom:15%;opacity:var(--look-boots)}
.look-label-shirt{left:68%;top:39%;opacity:var(--look-shirt)}
.look-label-hat{left:61%;top:9%;opacity:var(--look-hat)}
.look-timeline{position:absolute;left:7.5%;width:36%;bottom:75px;display:grid;grid-template-columns:repeat(4,1fr);gap:15px;z-index:3}
.look-timeline button{position:relative;text-align:left;padding:0 0 13px;border-bottom:1px solid #cac3c1;color:#9d9397;font-size:9px;transition:color .3s,border-color .3s;white-space:nowrap}
.look-timeline button>span{display:block;font-size:7px;margin-bottom:6px;letter-spacing:1px}
.look-timeline button.active{color:#b91e31;border-color:#b91e31}
.look-timeline button.done{color:#393138;border-color:#393138}
.look-timeline button.active:after{content:'';position:absolute;bottom:-2px;left:0;height:3px;width:22px;background:#bd2334}
.look-status{position:absolute;left:7.5%;bottom:35px;font-size:9px;color:#8c8287;margin:0}
.look-disclaimer{position:absolute;right:5%;bottom:19px;font-size:6px;letter-spacing:.7px;color:#a1999a;text-align:right;max-width:340px}
.look-story .story-progress{z-index:4}
.reduced-motion .look-story{height:auto}
.reduced-motion .look-story .story-sticky{position:relative;top:0;min-height:720px;height:auto;padding:80px 0 100px}
.reduced-motion .look-story .story-messages{position:relative;left:7.5%;top:auto;transform:none;padding:0;width:40%}
.reduced-motion .look-story .story-stage{position:static;opacity:1;visibility:visible;transform:none;margin-bottom:25px}
.reduced-motion .look-story .story-stage h2{font-size:30px;margin-bottom:10px}
.reduced-motion .look-story .story-stage .eyebrow{font-size:7px;margin-bottom:10px}
.reduced-motion .look-story .story-stage p{font-size:10px;margin-bottom:0}
.reduced-motion .look-piece{transform:none;opacity:0}
.reduced-motion .look-finished{opacity:1}
.reduced-motion .look-timeline{display:none}
.reduced-motion .look-label{display:none}
.reduced-motion .look-story .story-word{transform:none!important}
@media(min-width:1600px){.look-portrait{right:8%;left:48%}.look-timeline{width:32%}}
@media(max-width:1000px) and (min-width:761px){.look-label{display:none}.look-story .story-stage h2{font-size:45px}.look-timeline{width:38%;gap:10px}.look-timeline button{font-size:8px}}
@media(max-width:760px){
 .look-story{height:340svh}
 .look-story .story-sticky{top:64px;height:calc(100svh - 64px);min-height:480px}
 .look-story .story-topline{top:21px;font-size:6px;letter-spacing:1.3px}
 .look-story .story-messages{top:17%;left:7%;width:86%;text-align:center}
 .look-story .story-stage h2{font-size:34px;letter-spacing:-1.3px;margin-bottom:12px}
 .look-story .story-stage .eyebrow{font-size:6px;letter-spacing:1.5px;margin-bottom:11px;justify-content:center}
 .look-story .story-stage p{font-size:9px;line-height:1.7;margin:0 auto;max-width:290px}
 .look-story .story-stage .text-link{font-size:6px;letter-spacing:.7px;margin-top:9px}
 .look-portrait{top:32%;left:7%;right:7%;bottom:96px}
 .look-canvas{max-width:100%;height:100%}
 .look-story .story-word{top:46%;left:0;font-size:35vw;width:140%;letter-spacing:-2vw}
 .look-timeline{left:7%;right:7%;width:auto;bottom:44px;gap:13px}
 .look-timeline button{font-size:8px;padding-bottom:10px;text-align:center}
 .look-timeline button>span{font-size:6px;margin-bottom:4px}
 .look-timeline button.active:after{left:calc(50% - 11px)}
 .look-status{left:7%;right:7%;text-align:center;bottom:23px;font-size:7px}
 .look-disclaimer{display:none}
 .look-label{font-size:5px;gap:5px;letter-spacing:.5px;max-width:100px}
 .look-label:before{width:12px}
 .look-label span{font-size:6px}
 .look-label-boots{left:66%;bottom:12%}
 .look-label-shirt{left:68%;top:41%}
 .look-label-hat{left:64%;top:8%}
 .look-floor{bottom:-3px}
 .reduced-motion .look-story .story-sticky{padding:70px 0 30px;min-height:0}
 .reduced-motion .look-story .story-messages{left:7%;width:86%;padding:0 0 25px;top:auto}
 .reduced-motion .look-story .story-stage h2{font-size:26px}
 .reduced-motion .look-story .story-stage p{font-size:9px}
 .reduced-motion .look-story .look-portrait{position:relative;top:0;left:7%;right:auto;width:86%;height:410px;margin-bottom:45px}
 .reduced-motion .look-story .look-status{bottom:15px}
 .reduced-motion .look-story .story-stage{margin-bottom:25px}
}
@media(max-width:760px) and (max-height:710px){.look-story .story-stage h2{font-size:28px}.look-story .story-stage p{font-size:8px}.look-story .story-stage .eyebrow{margin-bottom:8px}.look-story .story-messages{top:17%}.look-portrait{top:35%;bottom:88px}.look-label{display:none}}
@media(prefers-reduced-motion:reduce){.look-piece,.look-canvas,.look-timeline button{transition:none!important;animation:none!important;will-change:auto}}
