.playlist-cover{position:relative;aspect-ratio:1;width:100%;overflow:hidden;border-radius:9px;background:var(--cover-color);isolation:isolate}
.playlist-cover::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#0003,transparent 30%,#07071144 50%,#070711e8 100%)}
.cover-photo{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.cover-logo{position:absolute;left:9%;top:8%;width:25%;height:auto;z-index:2;filter:drop-shadow(0 1px 4px #0006)}
.cover-title{position:absolute;left:9%;right:8%;bottom:16%;color:white;font-size:clamp(19px,1.8vw,30px);line-height:1.03;font-weight:750;letter-spacing:-.8px;z-index:2;text-wrap:balance}
.cover-credit{position:absolute;bottom:7%;left:9%;right:7%;z-index:2;color:#d6d6e0;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero>.playlist-cover .cover-title{font-size:27px}
.hero>.playlist-cover .cover-photo{width:100%;height:100%}
.hero>.playlist-cover .cover-title{font-size:23px}
.cover-title{font-size:23px}
.cover-credit{font-size:9px}
.hero>.playlist-cover .cover-title{font-size:16px;letter-spacing:-.3px}
.hero>.playlist-cover .cover-credit{font-size:6px}
.playlist-cover .cover-title{left:9%;right:9%;bottom:18%;font-size:clamp(22px,2vw,32px);letter-spacing:-1px;line-height:1.04;max-width:85%}
.playlist-cover .cover-logo{width:26%;top:9%}
.playlist-cover .cover-credit{bottom:8%;font-size:10px;letter-spacing:.1px}
.playlist-cover .cover-title{font-size:24px;letter-spacing:-.6px}
.playlist-cover .cover-credit{font-size:9px}

/* Larger catalog, quieter cover typography, and video discovery. */
.playlist-cover .cover-title{left:9%;right:9%;bottom:16%;font-size:clamp(15px,1.15vw,20px);font-weight:600;letter-spacing:-.35px;line-height:1.16;max-width:82%;text-wrap:balance}

.hero>.playlist-cover .cover-title{font-size:19px}

.playlist-cover::after{background:linear-gradient(180deg,#0002,transparent 38%,#07071125 62%,#070711cc 100%)}

.playlist-cover .cover-logo{width:23%}

.playlist-cover .cover-credit{font-size:9px}
.playlist-cover .cover-title{font-size:16px}
.playlist-cover .cover-title{font-size:clamp(13px,1vw,17px);white-space:normal}
.playlist-cover .cover-credit{font-size:8px}


/* Retain the full portrait on playlist covers, with a soft artwork backdrop. */
.playlist-cover .cover-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(18px) brightness(.45);transform:scale(1.12);z-index:0}

.playlist-cover .cover-photo,.hero>.playlist-cover .cover-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center top;z-index:1}

.playlist-cover::after{z-index:2;background:linear-gradient(180deg,#0002,transparent 20%,transparent 62%,#08090d88 78%,#08090dea 100%)}

.playlist-cover .cover-logo{z-index:3;top:6%;left:7%;width:21%}

.playlist-cover .cover-title{z-index:3;bottom:12%;left:7%;right:7%;max-width:86%;font-size:clamp(12px,.95vw,16px);line-height:1.16}

.playlist-cover .cover-credit{z-index:3;bottom:5%;left:7%;font-size:8px}

html body .cover-editorial{--editorial-ink:#fff;--editorial-accent:#b8d4ff;border-radius:5px}
html body .cover-editorial .cover-photo{object-fit:cover;object-position:center 24%;filter:none}
html body .cover-editorial::after{background:linear-gradient(180deg,#00000015,transparent 38%,#00000010 58%,#00000080 100%)}
html body .cover-editorial .cover-logo{top:6%;left:6%;width:22%;filter:drop-shadow(0 1px 2px #0005)}
html body .cover-editorial .cover-title{left:6%;right:6%;bottom:6%;max-width:88%;font-family:Arial,Helvetica,sans-serif;font-size:clamp(20px,16cqw,58px);line-height:.91;font-weight:900;letter-spacing:-.055em;color:var(--editorial-ink);text-wrap:balance;text-shadow:none}
html body .cover-warm{--editorial-ink:#ffdf69}
html body .cover-warm .cover-title{max-width:84%;font-size:clamp(22px,17cqw,62px);letter-spacing:-.065em}
html body .cover-serene .cover-title{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(23px,17cqw,62px);line-height:.94;letter-spacing:-.055em;color:#fff3df;max-width:84%}
html body .cover-serene::after{background:linear-gradient(180deg,transparent 45%,#16110a15 65%,#16110aa0)}
html body .cover-paper{background:#e9e1cc}
html body .cover-paper::after{inset:auto 0 0;height:38%;background:#e9e1cc}
html body .cover-paper .cover-title{bottom:5%;color:#192b29;font-size:clamp(22px,16cqw,58px);max-width:88%;line-height:.91}
html body .cover-paper .cover-photo{object-position:center 12%}
html body .cover-frame{background:#b9d5e6}
html body .cover-frame::after{inset:0;background:none;border:5px solid #b9d5e6;border-top-width:32cqw}
html body .cover-frame .cover-title{top:5%;bottom:auto;left:29%;right:5%;max-width:66%;font-size:clamp(19px,12cqw,44px);line-height:.9;color:#111e2b;letter-spacing:-.055em}
html body .cover-frame .cover-logo{filter:none}
html body .cover-frame .cover-photo{inset:25% 0 0;height:75%;object-position:center 35%;filter:grayscale(1)}
html body .cover-impact{--editorial-ink:#b7efff}
html body .cover-impact .cover-title{font-size:clamp(23px,18cqw,66px);text-transform:uppercase;line-height:.85;letter-spacing:-.065em;max-width:88%}
html body .cover-energy .cover-title{bottom:5%;left:0;right:0;max-width:100%;padding:3% 6%;background:#ddff43;color:#101010;font-size:clamp(21px,14cqw,52px);font-weight:900;font-style:italic;line-height:.9;letter-spacing:-.06em;text-transform:uppercase}
html body .cover-energy::after{background:linear-gradient(0deg,#0008,transparent 45%)}
html body .cover-night .cover-title{color:#d0bcff;font-size:clamp(23px,17cqw,62px);font-weight:900;line-height:.9;letter-spacing:-.06em}
html body .cover-night::after{background:linear-gradient(180deg,#06102610,transparent 40%,#160c3520 58%,#160c35c9 100%)}
html body .cover-banner{background:#ff784f}
html body .cover-banner::after{inset:0;background:none;border:5px solid #ff784f;border-top-width:32cqw}
html body .cover-banner .cover-title{top:5%;bottom:auto;left:29%;right:5%;max-width:66%;font-size:clamp(20px,13cqw,48px);line-height:.86;color:#111;letter-spacing:-.06em}
html body .cover-banner .cover-photo{inset:25% 0 0;height:75%;object-position:center 25%}
html body .cover-banner .cover-logo{filter:none}

html body .cover-editorial{container-type:inline-size;isolation:isolate;width:100%;aspect-ratio:1;overflow:hidden;position:relative}
html body .cover-editorial .cover-photo{object-position:var(--photo-x,50%) var(--photo-y,24%)}
html body .cover-editorial .cover-title{overflow-wrap:anywhere}
html body .cover-editorial .cover-backdrop,html body .cover-editorial .cover-credit{display:none}