/* Complete compositions: keep the exported aspect ratio so faces and ears stay in frame. */
.website-hero{position:relative;isolation:isolate;container-type:inline-size;aspect-ratio:12/5;background:#0b0a13;overflow:hidden;border-bottom:1px solid var(--line)}
.website-hero-slides,.website-hero-slide,.website-hero-slide picture{position:absolute;inset:0}
.website-hero-slide{opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.website-hero-slide.is-active{opacity:1}
.website-hero-slide img{width:100%;height:100%;object-fit:contain}
/* Compose desktop originals in the browser: the extended exports had banded feathering. */
@media(min-width:701px){.website-hero-slide.native-background{background:#000}.website-hero-slide.native-background img{position:absolute;right:0;top:0;width:74.652778%;height:100%;mask-image:linear-gradient(90deg,transparent,#000 16%)}.website-hero:has(.native-background.is-active) .website-hero-shade{background:none}}
.website-hero-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#08091155,transparent 60%)}
.website-hero-content{position:absolute;left:6%;top:50%;transform:translateY(-50%);width:38%;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(8px,1.1cqw,22px)}
.website-hero-wordmark{width:clamp(140px,19cqw,340px);height:auto}
.website-hero-content .eyebrow{font-size:clamp(7px,.65cqw,11px);color:var(--accent);letter-spacing:.16em}
.website-hero-content h1{font-size:clamp(27px,4cqw,76px);line-height:1.06;letter-spacing:-.045em}
.website-hero-content>p:not(.eyebrow){font-size:clamp(11px,1cqw,17px);line-height:1.6;max-width:400px;color:#d5cede}
.website-hero-content .button-row{gap:clamp(8px,1cqw,20px);margin-top:2px}
.website-hero-content .button{min-height:44px;padding:clamp(10px,1cqw,16px) clamp(12px,1.5cqw,26px);font-size:clamp(10px,.8cqw,13px);gap:clamp(12px,1.8cqw,32px)}
.website-hero-controls{position:absolute;left:6%;bottom:3%;display:flex;align-items:center;gap:8px}
.website-hero-controls button{display:grid;place-items:center;width:44px;min-height:44px;padding:0;background:#08091170;border:1px solid #c9a7ff45;color:var(--text);font-size:17px}
.website-hero-controls button:hover{background:#9656ff35}
.website-hero-controls button:disabled{opacity:.5;cursor:default}
.website-hero-indicators{display:flex;align-items:center;gap:0}
.website-hero-indicators button{border:0;background:transparent;width:32px}
.website-hero-indicators button:after{content:'';width:15px;height:2px;background:#f2eeff55;transition:background .2s}
.website-hero-indicators button[aria-pressed=true]:after{background:var(--accent)}
.artist-materials{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.artist-materials h2{font-size:clamp(30px,3vw,48px);margin-bottom:24px}
.artist-materials .button-row{margin-top:28px}
.artist-materials p{max-width:600px;font-size:15px}
.artist-materials-list{display:grid;align-content:start;gap:0;border-top:1px solid var(--line)}
.artist-materials-list a{display:flex;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid var(--line);font-size:13px}
.artist-materials-list a span{color:var(--accent)}
@media(min-width:701px) and (max-width:1000px){.website-hero-content{gap:8px}.website-hero-content .eyebrow{display:none}.website-hero-content .button{padding:10px 12px;gap:10px}.website-hero-controls{bottom:1%;gap:5px}.website-hero-controls button{min-height:36px}}
@media(max-width:700px){
 .website-hero{aspect-ratio:3/4}
 .website-hero-shade{background:linear-gradient(180deg,#08091133,transparent 43%)}
 .website-hero-content{left:7%;top:4%;transform:none;width:86%;gap:8px}
 .website-hero-wordmark{width:38cqw}
 .website-hero-content .eyebrow{display:none}
 .website-hero-content h1{font-size:clamp(18px,5.8cqw,40px);line-height:1.08}
 .website-hero-content>p:not(.eyebrow){font-size:clamp(9px,2.65cqw,14px);line-height:1.4;max-width:80%}
 .website-hero-content .button-row{gap:10px;margin-top:0}
 .website-hero-content .button{min-height:44px;padding:8px 12px;font-size:clamp(9px,2.5cqw,13px);gap:12px}
 .website-hero-content .button>span{font-size:16px}
 .website-hero-controls{left:7%;bottom:3%;gap:6px}
 .artist-materials{grid-template-columns:1fr;gap:35px}
}
@media(prefers-reduced-motion:reduce){.website-hero-slide,.website-hero-indicators button:after{transition:none}}