/* The story stays inside one garment. Chapters scroll over its layered lining. */
.hero-costume{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.hero-costume img{position:absolute;left:50%;width:1180px;max-width:none;height:auto;top:340px;transform:translateX(-50%);mask-image:linear-gradient(transparent,#000 13%);filter:brightness(.75)}
.hero-costume::after{content:'';position:absolute;inset:auto 0 0;height:180px;background:linear-gradient(transparent,#030303 98%)}
.portrait{z-index:1;width:1080px;height:1080px;top:calc(40svh - 540px);mask-image:linear-gradient(#000 0%,#000 53%,transparent 73%);-webkit-mask-image:linear-gradient(#000 0%,#000 53%,transparent 73%)}
.hero-copy{z-index:5}.hero-description,.gesture-instruction{text-shadow:0 2px 8px #000}
.wardrobe-story{width:min(100%,1180px);margin:auto;background:#030303;isolation:isolate}
.wardrobe-backdrop{position:sticky;top:0;height:100svh;margin-bottom:-100svh;pointer-events:none;overflow:hidden;z-index:0}
.wardrobe-stage{position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate}
.wardrobe-panel{position:absolute;width:100%;height:auto;left:50%;top:50%;transform:translate(-50%,-46%);max-width:none;will-change:transform;pointer-events:none}
.outer-panel{z-index:4;filter:brightness(.76)}
.outer-left,.lining-left{clip-path:polygon(0 0,36% 0,34% 19%,30% 37%,33% 57%,36% 76%,39% 100%,0 100%)}
.outer-right,.lining-right{clip-path:polygon(64% 0,100% 0,100% 100%,61% 100%,64% 76%,67% 57%,70% 37%,66% 19%)}
.lining-panel{z-index:3;filter:brightness(.76)}
.robe-depth{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#030303 30%,#03030380 64%,#03030300),url('assets/costume-inner.png') center / 100% auto;filter:brightness(.3)}
.wardrobe-shade{position:absolute;inset:0;z-index:8;background:linear-gradient(#030303 0%,transparent 12%,transparent 88%,#030303 100%)}
.wardrobe-content{position:relative;z-index:1}
.wardrobe-chapter{position:relative;padding:100px 0 80px;scroll-margin-top:25px;min-height:100svh}
.wardrobe-copy{position:relative;max-width:480px;width:44%;margin:auto;padding:32px 0;text-align:left;isolation:isolate}
.wardrobe-copy::before{content:'';position:absolute;inset:-25px -32px;z-index:-1;background:linear-gradient(90deg,transparent,#030303de 12%,#030303e8 24%,#030303e8 76%,#030303de 88%,transparent);mask-image:linear-gradient(transparent,#000 5%,#000 95%,transparent);pointer-events:none}
.wardrobe-copy h2{font-weight:400;font-size:clamp(36px,3.7vw,50px);line-height:1.12;letter-spacing:-.02em;word-spacing:.04em;margin:0 0 30px;text-wrap:balance}
.wardrobe-copy p{font-size:18px;line-height:1.8;color:#d3cbbf;margin:0 0 22px;text-wrap:pretty}
.wardrobe-copy .chapter-source{font:12px/1.7 Arial,sans-serif;color:#aa9b83;margin:28px 0 0}.chapter-number{margin-bottom:22px}
.wardrobe-faces{position:relative;height:430px;width:76%;margin:35px auto 0;perspective:1000px;pointer-events:none}
.wardrobe-faces .study-face{width:355px;height:355px;top:50%;left:50%;transform:translate(-50%,-50%);filter:drop-shadow(0 15px 20px #0008)}
.wardrobe-faces .study-red{transform:translate(calc(-50% - 190px),-45%) rotate(-10deg) scale(.9)}
.wardrobe-faces .study-blue{z-index:2}
.wardrobe-faces .study-gold{transform:translate(calc(-50% + 190px),-45%) rotate(10deg) scale(.9)}
.lining-window{height:80svh;min-height:480px;position:relative}
.layer-description{position:absolute;top:3%;left:50%;transform:translateX(-50%);width:42%;text-align:center;font-size:18px;line-height:1.7;color:#c8bda9;text-shadow:0 2px 12px #000}
.stored-face{position:absolute;width:340px;height:340px;left:64%;top:52%;z-index:2;transform:translate(-50%,-50%) rotate(12deg);opacity:0;filter:drop-shadow(-18px 20px 20px #000)}
.stored-face .face-surface{background-position:100% 0}
.wardrobe-stage .inside-action{position:absolute;inset:0;z-index:2;perspective:1200px;opacity:0}
.wardrobe-stage .reveal-pair{transform-origin:57% 32%}.wardrobe-stage .held-mask{opacity:1;mask-image:linear-gradient(#000 65%,transparent 98%)}.wardrobe-stage .held-ghost{opacity:.38}
.reveal-window{height:145svh;min-height:1100px;position:relative}
.reveal-controls{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);text-align:center;width:50%}
.reveal-controls>p:first-child{font-size:19px;line-height:1.6;margin:0 0 10px}.reveal-controls button{min-height:44px}.reveal-controls .wardrobe-disclosure{font:11px/1.6 Arial,sans-serif;color:#ab9a81;margin:12px 0 0}.static-held{display:none}
.wardrobe-content .performance-film{width:100%;padding:100px 0 70px;background:transparent}
.wardrobe-content .film-heading{display:block;text-align:center;width:60%;margin:0 auto 34px}.film-heading h2{font-size:46px}.film-heading p{margin-top:16px}
.wardrobe-content .video-shell{width:50%;margin:auto;max-width:620px}.wardrobe-content .film-details{width:50%;margin:auto;max-width:620px}.wardrobe-content .performance-film .back-to-mask{text-align:center}
.wardrobe-content .site-footer{width:100%;border-top:0;background:linear-gradient(transparent,#030303 65%)}
@media(max-height:820px) and (min-width:761px){.portrait{width:1020px;height:1020px;top:-260px}.hero-costume img{top:220px}.hero-copy{bottom:52px}}
@media(max-width:760px){
 .hero-costume img{width:760px;top:300px}.portrait{width:720px;height:720px;top:-8px}
 .wardrobe-panel{width:620px}.robe-depth{background-size:620px auto}
 .wardrobe-chapter{padding:65px 0 50px}.wardrobe-copy{width:calc(100% - 74px);max-width:440px;padding:20px 0}.wardrobe-copy::before{inset:-10px -25px}
 .wardrobe-copy h2{font-size:35px;margin-bottom:25px}.wardrobe-copy p{font-size:16px;line-height:1.8}.wardrobe-copy .chapter-source{font-size:10px}.chapter-number{font-size:11px;margin-bottom:18px}
 .wardrobe-faces{height:290px;width:100%;margin-top:10px;overflow:hidden}.wardrobe-faces .study-face{width:220px;height:220px}.wardrobe-faces .study-red{transform:translate(calc(-50% - 88px),-44%) rotate(-10deg) scale(.84)}.wardrobe-faces .study-gold{transform:translate(calc(-50% + 88px),-44%) rotate(10deg) scale(.84)}
 .lining-window{height:70svh;min-height:440px}.layer-description{width:76%;font-size:16px}.stored-face{width:250px;height:250px}
 .reveal-window{height:125svh;min-height:980px}.reveal-controls{width:76%;bottom:4%}.reveal-controls>p:first-child{font-size:16px}
 .wardrobe-content .performance-film{padding:70px 0 45px}.wardrobe-content .film-heading{width:76%}.film-heading h2{font-size:34px;max-width:none}.wardrobe-content .video-shell,.wardrobe-content .film-details{width:82%}.film-heading p{font-size:10px}
 .wardrobe-content .site-footer{padding:45px 32px 80px}
}
@media(prefers-reduced-motion:reduce),(scripting:none){
 .wardrobe-panel{will-change:auto}.wardrobe-stage .inside-action,.stored-face{display:none}
 .lining-window{height:320px;min-height:0;background:url('assets/lining-inner.png') center/cover}.lining-window .layer-description{position:relative;top:35%;margin:0}
 .reveal-window{height:auto;min-height:0;padding-bottom:180px}.static-held{display:block;width:min(640px,95vw);height:auto;margin:0 auto;mask-image:linear-gradient(#000 55%,transparent 95%)}.reveal-controls{bottom:25px}#replay-button{display:none}
}