.materials{background:linear-gradient(180deg,#151418,#111113 50%,#151418);overflow:hidden}
.materials h2{font-size:clamp(44px,5.4vw,80px);position:relative;z-index:4;pointer-events:none}
.material-carousel{position:relative;display:grid;grid-template-columns:44% 56%;align-items:center;min-height:540px;margin-top:-35px;outline-offset:8px;touch-action:pan-y}
.material-copy{position:relative;z-index:4;padding:58px 0 32px 5%;pointer-events:none}
.material-count{font-size:14px;letter-spacing:3px;color:var(--muted);margin-bottom:14px}
.material-name{font-size:clamp(54px,7.5vw,110px);line-height:1.12;letter-spacing:-2px;margin:0 0 12px}
.material-tagline{font-size:clamp(21px,2vw,29px);line-height:1.45;color:var(--pink);max-width:430px;margin-bottom:22px}
.material-use{font-size:clamp(16px,1.5vw,21px);line-height:1.65;max-width:390px;color:var(--paper);margin:0}
.material-stage{height:570px;position:relative;margin-right:-12%;isolation:isolate}
.material-stage:after{content:'';position:absolute;bottom:2%;left:9%;width:75%;height:10%;border-radius:50%;background:#ff005c13;filter:blur(24px);z-index:-1}
.material-spool{position:absolute;inset:0;margin:0;display:grid;place-items:center;transform-origin:50% 75%;will-change:transform,opacity;pointer-events:none}
.material-spool img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 18px #0008)}
.material-spool[data-depth="0"]{transform:translateX(-8%);z-index:3}
.material-spool[data-depth="1"]{transform:translateX(20%) scale(.81);z-index:2;filter:brightness(.53)}
.material-spool[data-depth="2"]{transform:translateX(39%) scale(.65);z-index:1;filter:brightness(.32)}
.material-arrow{position:absolute;top:50%;z-index:6;display:grid;place-items:center;width:48px;height:48px;border:1px solid #ffffff80;border-radius:50%;background:#151418b3;color:white;font-family:Arial,sans-serif;font-size:36px;cursor:pointer;line-height:1;padding:0 0 4px}
.material-arrow:hover{background:var(--pink);border-color:var(--pink)}
.material-prev{left:-4%}.material-next{right:-4%}
.material-selector{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #ffffff30;padding-top:24px;position:relative;z-index:5}
.material-selector button{background:none;border:0;color:var(--muted);font-size:16px;padding:10px 0 15px;cursor:pointer;position:relative;white-space:nowrap}
.material-selector button[aria-pressed="true"]{color:var(--pink)}
.material-selector button[aria-pressed="true"]:after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--pink)}
@media(max-width:1000px){nav{gap:18px}.material-carousel{min-height:470px}.material-stage{height:490px}.material-copy{padding-left:5%}.material-name{font-size:64px;letter-spacing:-1px}.material-use{max-width:300px}.material-tagline{font-size:22px}.material-prev{left:-4.5%}.material-next{right:-4.5%}}
@media(max-width:700px){.material-carousel{grid-template-columns:1fr;margin-top:12px;min-height:0}.material-copy{grid-row:2;padding:10px 8% 28px;min-height:255px}.material-stage{grid-row:1;height:clamp(270px,77vw,470px);margin:0 -2% 0 -9%}.material-spool[data-depth="0"]{transform:translateX(-5%)}.material-spool[data-depth="1"]{transform:translateX(21%) scale(.81)}.material-spool[data-depth="2"]{transform:translateX(38%) scale(.65)}.material-name{font-size:clamp(48px,12vw,72px)}.material-tagline{font-size:21px;margin-bottom:12px}.material-use{max-width:100%;font-size:16px}.material-count{font-size:13px;margin-bottom:10px}.material-arrow{top:calc(clamp(270px,77vw,470px) / 2 - 22px);width:44px;height:44px}.material-prev{left:-3%}.material-next{right:-3%}.material-selector{justify-content:flex-start;flex-wrap:wrap;gap:8px 23px;padding-top:15px}.material-selector button{font-size:14px;padding-bottom:12px}.materials h2{font-size:48px}}
@media(prefers-reduced-motion:reduce){.material-spool{will-change:auto}}

/* Image and printed markings share one coordinate system, including on mobile. */
.material-spool-artwork{position:relative;width:min(100%,570px);aspect-ratio:1}
.material-spool-artwork img{display:block}
.material-spool-label{position:absolute;inset:0;width:100%;height:100%;overflow:visible;mix-blend-mode:multiply;pointer-events:none}
@media(max-width:1000px){.material-spool-artwork{max-width:490px;max-height:490px}}
@media(max-width:700px){.material-spool-artwork{width:clamp(270px,77vw,470px);height:clamp(270px,77vw,470px)}}