/* Shared desktop and mobile studio treatment. Native scroll, no scroll locking. */
.noir-home{overflow:clip;background:#101010}
.noir-home a{color:inherit}
.noir-home a.noir-button{color:#111}
.noir-home a:focus-visible,.noir-home button:focus-visible{outline:2px solid #fff;outline-offset:6px}
.noir-hero{height:clamp(740px,58vw,1040px)}
.noir-hero-photo{object-position:center 72%}
.noir-hero-copy{padding-top:clamp(48px,5vw,80px)}
.noir-grid{gap:clamp(24px,3vw,48px)}
.noir-card-art{height:clamp(340px,32vw,500px)}
.noir-intro{padding:80px 24px}

/* Opening jars replace the two existing collection images. */
.noir-card-art.jar-card{--jar-open:1;--lid-closed:25%;position:relative;isolation:isolate;display:grid;place-items:center;grid-template-columns:minmax(0,1fr);background:#111214}
.noir-card-art.jar-card-pm{--lid-closed:29%;background:#0b0c0f}
.jar-object{position:relative;width:min(94%,440px);aspect-ratio:1;z-index:1}
.noir-card-art .jar-object img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:normal;filter:none;transition:none;pointer-events:none}
.noir-card-art .jar-base{clip-path:inset(36% 0 0);transform:none!important}
.noir-card-art .jar-lid{clip-path:inset(0 0 64%);transform-origin:50% 23%;transform:translate3d(calc(var(--jar-open)*3%),calc(var(--lid-closed)*(1 - var(--jar-open)) - var(--jar-open)*3%),0) rotate(calc(var(--jar-open)*-7deg))}
.noir-card-art.jar-card-pm .jar-lid{transform:translate3d(calc(var(--jar-open)*-3%),calc(var(--lid-closed)*(1 - var(--jar-open)) - var(--jar-open)*3%),0) rotate(calc(var(--jar-open)*7deg))}
.jar-halo{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at 55% 50%,#686d765f,transparent 70%);transform:translateY(calc(var(--jar-open)*-6%)) scale(calc(.8 + var(--jar-open)*.3));opacity:calc(.5 + var(--jar-open)*.5)}
.jar-card .jar-lid{will-change:transform;backface-visibility:hidden}
@media(max-width:760px){.noir-hero{height:clamp(640px,135vw,850px)}.noir-hero-copy{padding:40px 6vw 0}.noir-hero-photo{object-position:center bottom}.noir-intro{padding:65px 7vw}.noir-card-art{height:clamp(330px,90vw,470px)}}
@media(prefers-reduced-motion:reduce){.jar-card{--jar-open:1!important}.jar-lid{will-change:auto!important}.noir-card-art .jar-lid{transform:translate(3%,-3%) rotate(-7deg)!important}.noir-card-art.jar-card-pm .jar-lid{transform:translate(-3%,-3%) rotate(7deg)!important}.jar-object{transform:none}}