:root{--night:#0b0908;--coal:#17100d;--cream:#f2eadc;--paper:#f7f2e9;--ink:#201914;--red:#b92b1e;--ember:#f27037;--gold:#e9be81}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:#e85c32;color:#fff}
.wrap{width:min(1320px,calc(100% - 112px));margin-inline:auto}
.skip-link{position:absolute;left:12px;top:-60px;z-index:50;background:#fff;color:#111;padding:12px 18px}
.skip-link:focus{top:12px}

.site-header{position:absolute;inset:0 0 auto;z-index:10;height:76px;padding:0 clamp(24px,4vw,62px);display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid rgba(255,255,255,.22);color:#fff}
.brand{display:inline-flex;align-items:center;gap:10px;font:800 14px Georgia,serif;letter-spacing:.015em;text-decoration:none;white-space:nowrap}
.brand-mark{width:38px;height:38px;border:1px solid currentColor;display:grid;place-items:center;font-size:16px}
.site-header nav{display:flex;align-items:center;gap:clamp(20px,3.5vw,50px)}
.site-header nav a{font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;transition:color .2s}
.site-header nav a:hover{color:#ffc18f}
.site-header .nav-listen{color:#ffc497;border-bottom:1px solid #dc7c4a;padding:11px 0}

.hero{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;background:var(--night);color:#fff}
.hero-backdrop{position:absolute;z-index:-3;inset:-7%;background:url('./assets/whoop-the-devil-cover.png') center/cover no-repeat;filter:blur(36px) saturate(1.1);opacity:.32;animation:backdrop-drift 22s ease-in-out infinite alternate}
.hero:before{content:"";position:absolute;z-index:-2;inset:0;background:linear-gradient(90deg,rgba(8,8,7,.92) 0%,rgba(11,7,6,.78) 43%,rgba(12,7,5,.33) 100%),linear-gradient(0deg,#0a0908 0%,transparent 26%),radial-gradient(ellipse at 90% 83%,rgba(201,51,22,.37),transparent 43%)}
.hero:after{content:"";position:absolute;z-index:-1;left:-16%;bottom:-40%;width:65%;height:65%;border-radius:50%;background:rgba(202,49,25,.31);filter:blur(90px);animation:fire-pulse 8s ease-in-out infinite alternate}
.hero-smoke{position:absolute;z-index:-1;inset:-15%;pointer-events:none;background:radial-gradient(ellipse 25% 10% at 60% 25%,rgba(234,226,212,.13),transparent 77%),radial-gradient(ellipse 37% 13% at 78% 67%,rgba(240,182,132,.13),transparent 76%),radial-gradient(ellipse 24% 15% at 15% 80%,rgba(151,138,128,.11),transparent 75%);filter:blur(16px);animation:smoke-drift 17s ease-in-out infinite alternate}
.hero-ember{position:absolute;z-index:-1;width:5px;height:5px;border-radius:50%;background:#ee7b3a;box-shadow:0 0 15px 5px rgba(233,84,30,.4);pointer-events:none;animation:ember-rise 8s ease-in-out infinite}
.ember-one{left:14%;bottom:18%;animation-delay:-1s}.ember-two{left:46%;bottom:8%;animation-delay:-4s;transform:scale(.65)}.ember-three{right:12%;bottom:24%;animation-delay:-6s;transform:scale(.8)}
.hero-grid{position:relative;z-index:1;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);grid-template-areas:"copy art" "actions art";grid-template-rows:auto auto;align-content:center;align-items:center;column-gap:clamp(42px,7vw,120px);row-gap:28px;padding-top:116px;padding-bottom:110px}
.hero-copy{grid-area:copy;align-self:end;max-width:690px;animation:rise-in .9s ease-out both}
.eyebrow,.hero-artist-name,.hero-art figcaption,.hero-bottom,.section-label,.story-aside,.artist-image>span,.artist-quote cite,.site-footer{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.eyebrow{display:flex;align-items:center;gap:14px;color:#f3bc8d;margin:0 0 35px}
.eyebrow-rule{width:36px;height:1px;background:currentColor}
.hero-artist-name{color:#ddd0bd;margin:0 0 16px}
.hero-artist-name span{color:#e36e3d;margin:0 8px}
.hero h1{font-family:"Barlow Condensed",Impact,sans-serif;font-size:clamp(78px,8.3vw,140px);font-weight:800;line-height:.83;letter-spacing:-.035em;text-transform:uppercase;margin:0 0 25px;max-width:700px;text-wrap:balance}
.hero h1 span{display:block;color:#f7773e;text-shadow:0 2px 30px rgba(215,65,26,.24)}
.hero-intro{max-width:560px;margin:0;color:#eadfd3;font-size:clamp(17px,1.5vw,21px);line-height:1.6}
.hero-art{grid-area:art;position:relative;margin:0;width:100%;max-width:550px;justify-self:center;animation:art-arrive 1s .15s both}
.hero-art:before{content:"";position:absolute;inset:-10%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(226,87,29,.46),transparent 64%);filter:blur(33px);animation:fire-pulse 9s ease-in-out infinite alternate}
.art-frame{position:relative;padding:10px;background:linear-gradient(145deg,rgba(255,209,150,.62),rgba(151,46,23,.65) 42%,rgba(255,244,221,.15) 80%);box-shadow:0 38px 80px rgba(0,0,0,.42),0 0 0 9px rgba(255,255,255,.045);transform:rotate(1.1deg);transition:transform .45s,box-shadow .45s}
.art-frame:hover{transform:rotate(0deg) translateY(-5px);box-shadow:0 48px 85px rgba(0,0,0,.5),0 0 0 12px rgba(255,255,255,.055)}
.art-frame img{width:100%;aspect-ratio:1;object-fit:cover;background:#110b09}
.hero-art figcaption{display:flex;justify-content:center;gap:11px;margin-top:26px;color:#d3bfa9;text-align:center}
.hero-art figcaption span{color:#e46e3e}
.hero-actions{grid-area:actions;align-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:20px;animation:rise-in 1s .18s both}
.spotify-cta{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;justify-content:space-between;align-items:center;gap:30px;min-width:min(100%,390px);min-height:83px;padding:14px 16px 14px 26px;background:linear-gradient(105deg,#ffcf9a 0%,#f18b51 58%,#e24f2c 100%);color:#20100b;text-decoration:none;box-shadow:0 18px 43px rgba(0,0,0,.31),0 0 0 6px rgba(246,123,56,.14);transition:transform .25s,box-shadow .25s,filter .25s}
.spotify-cta:before{content:"";position:absolute;z-index:1;pointer-events:none;top:-70%;bottom:-70%;left:-50%;width:32%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.11),rgba(255,255,255,.83),rgba(255,255,255,.12),transparent);transform:skewX(-22deg);animation:cta-shine 5s ease-in-out infinite}
.spotify-cta:hover,.spotify-cta:focus-visible{transform:translateY(-5px);box-shadow:0 28px 50px rgba(0,0,0,.36),0 0 0 9px rgba(246,123,56,.22);filter:saturate(1.1)}
.spotify-cta:focus-visible{outline:3px solid #fff;outline-offset:6px}
.cta-text,.cta-arrow{position:relative;z-index:2}
.cta-text{display:flex;flex-direction:column;gap:5px}
.cta-text small{font-size:9px;font-weight:800;letter-spacing:.22em}
.cta-text strong{font-size:19px;font-weight:800;letter-spacing:-.03em}
.cta-arrow{width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:grid;place-items:center;background:#31140e;color:#fff;font-size:22px}
.story-link{font-size:11px;font-weight:800;letter-spacing:.08em;text-decoration:none;color:#ead7c3;border-bottom:1px solid rgba(255,255,255,.43);padding-bottom:7px}
.story-link:hover{color:#fff;border-color:#fff}
.hero-bottom{position:absolute;z-index:2;left:0;right:0;bottom:27px;display:flex;align-items:center;justify-content:space-between;color:#bda997}
.hero-bottom i{display:inline-block;width:4px;height:4px;background:#f47742;border-radius:50%;margin:0 10px 2px}
.hero-bottom a{text-decoration:none;color:#e8c0a0}

.story-section{padding:clamp(90px,12vw,165px) 0;background:var(--paper)}
.story-grid{display:grid;grid-template-columns:210px minmax(0,760px);gap:clamp(55px,8vw,130px);justify-content:center}
.story-aside{color:#925a44;line-height:1.9;padding-top:8px}
.story-aside p{margin:18px 0}
.aside-rule{display:block;border-top:1px solid #cc9b80}
.aside-flame{height:160px;width:55px;margin:65px 0 55px 20px;background:linear-gradient(180deg,transparent,#db5a2b 30%,#eaae65 58%,transparent);clip-path:polygon(50% 0,75% 27%,59% 53%,100% 73%,50% 100%,0 75%,40% 52%,25% 28%);opacity:.72;filter:blur(1px)}
.section-label{color:#a3482e;margin:0 0 21px}
.story-copy h2,.sound-section h2,.artist-copy h2,.final-listen h2{font-family:"Barlow Condensed",Impact,sans-serif;font-size:clamp(58px,5.5vw,86px);font-weight:700;line-height:.99;letter-spacing:-.025em;text-transform:uppercase;margin:0 0 32px;text-wrap:balance}
.story-copy h2 span{color:#ba3a21}
.story-copy p:not(.section-label){font-size:17px;line-height:1.82;color:#4c4039;margin:0 0 25px}
.story-copy .lead{font-size:22px!important;line-height:1.58!important;color:#251b17!important}
.story-copy strong{color:#29150e}
.artist-quote{position:relative;overflow:hidden;margin:44px 0 42px;padding:42px 45px;background:linear-gradient(120deg,#1e100d,#451d14 72%,#622818);color:#fff;border-left:5px solid #e46a3d;box-shadow:0 22px 42px rgba(52,25,17,.14)}
.artist-quote:before{content:"";position:absolute;right:-90px;top:-115px;width:310px;height:310px;border:1px solid rgba(247,185,137,.18);border-radius:50%;box-shadow:0 0 0 45px rgba(247,185,137,.045),0 0 0 90px rgba(247,185,137,.027)}
.artist-quote p{position:relative;font-family:"Barlow Condensed",Impact,sans-serif;font-size:clamp(31px,3.2vw,45px)!important;line-height:1.13!important;font-weight:600!important;color:#fff!important;margin:0 0 23px!important}
.artist-quote cite{position:relative;font-style:normal;color:#f5ae7c}
.article-link{display:inline-block;margin-top:12px;border-bottom:2px solid #b74227;padding-bottom:8px;text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.07em}
.article-link:hover{color:#b74227}

.sound-section{position:relative;isolation:isolate;overflow:hidden;background:#1c0f0c;color:#fff;padding:clamp(95px,11vw,155px) 0}
.sound-section:before{content:"";position:absolute;z-index:-2;inset:0;background:url('./assets/whoop-the-devil-cover.png') center 62%/cover no-repeat;opacity:.12;filter:blur(9px);transform:scale(1.08)}
.sound-glow{position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse 40% 65% at 80% 105%,rgba(227,72,28,.39),transparent 80%);animation:fire-pulse 8s ease-in-out infinite alternate}
.sound-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(240px,.65fr);gap:80px;align-items:end}
.sound-section .section-label{color:#efa777}
.sound-section h2{font-size:clamp(66px,6vw,100px);margin:0}
.sound-section h2 span{color:#ee7544}
.sound-grid>p{font-size:18px;line-height:1.7;color:#e0c9b8;margin:0 0 7px}
.sound-grid strong{color:#fff}

.artist-section{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);min-height:650px;background:#e9dbca}
.artist-image{position:relative;overflow:hidden;min-height:560px;background:#120b09}
.artist-image img{width:100%;height:100%;object-fit:cover;object-position:75% center;filter:saturate(.9);transition:transform 10s}
.artist-image:hover img{transform:scale(1.035)}
.artist-image:after{content:"";position:absolute;inset:65% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.artist-image>span{position:absolute;z-index:1;left:30px;bottom:25px;color:#fff;font-size:9px}
.artist-copy{padding:clamp(55px,7vw,115px);display:flex;flex-direction:column;justify-content:center}
.artist-copy h2{font-size:clamp(68px,6vw,98px);margin-bottom:23px}
.artist-copy h2 span{color:#a73d25}
.artist-copy p:not(.section-label){max-width:590px;color:#4b4037;font-size:17px;line-height:1.74;margin:0 0 22px}
.artist-copy strong{color:#28170f}
.artist-copy a{width:max-content;margin-top:18px;border-bottom:2px solid #a93b22;padding-bottom:8px;text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.06em}
.artist-copy a:hover{color:#a93b22}

.final-listen{position:relative;isolation:isolate;overflow:hidden;background:#170b09;color:#fff;padding:clamp(105px,12vw,165px) 0;text-align:center}
.final-listen:before{content:"";position:absolute;z-index:-2;inset:0;background:url('./assets/whoop-the-devil-cover.png') center/cover no-repeat;opacity:.1;filter:blur(24px);transform:scale(1.1)}
.final-listen:after{content:"";position:absolute;z-index:-1;left:20%;bottom:-55%;width:60%;height:80%;border-radius:50%;background:rgba(218,63,28,.29);filter:blur(75px)}
.final-inner{max-width:850px}
.final-listen .section-label{color:#f0ad7a}
.final-listen h2{font-size:clamp(65px,6.8vw,110px);margin-bottom:20px}
.final-listen h2 span{color:#f27c47}
.final-inner>p:not(.section-label){font-size:18px;color:#e0cabb;line-height:1.6;margin:0 auto 35px}
.final-listen .spotify-cta{text-align:left}
.site-footer{background:#080706;color:#eee3d9;padding:35px 0}
.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:25px}
.site-footer p{color:#9f9188;letter-spacing:.03em;text-transform:none}
.site-footer a:last-child{text-decoration:none;border-bottom:1px solid #9b6c56;padding-bottom:6px}

@keyframes backdrop-drift{from{transform:scale(1.08) translate(-1%,0)}to{transform:scale(1.17) translate(2%,-2%)}}
@keyframes smoke-drift{from{transform:translate(-3%,0) scale(1)}to{transform:translate(3%,-2%) scale(1.08)}}
@keyframes fire-pulse{from{opacity:.62;transform:scale(.96)}to{opacity:1;transform:scale(1.05)}}
@keyframes ember-rise{0%{opacity:0;translate:0 0}15%{opacity:.8}85%{opacity:.55}100%{opacity:0;translate:24px -260px}}
@keyframes rise-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes art-arrive{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cta-shine{0%,18%{left:-50%}43%,100%{left:145%}}

@media(max-width:1000px){.wrap{width:calc(100% - 70px)}.hero-grid{column-gap:40px}.hero h1{font-size:clamp(72px,8.5vw,104px)}.story-grid{gap:65px}.artist-copy{padding:65px}}
@media(max-width:760px){.wrap{width:calc(100% - 42px)}.site-header{height:64px;padding:0 20px}.brand{font-size:11px;gap:8px}.brand-mark{width:32px;height:32px;font-size:13px}.site-header nav a:not(.nav-listen){display:none}.site-header .nav-listen{font-size:8px;letter-spacing:.05em}.hero-grid{min-height:100svh;grid-template-columns:1fr;grid-template-areas:"copy" "art" "actions";justify-items:center;align-content:center;row-gap:16px;padding-top:86px;padding-bottom:70px}.hero-copy{text-align:center;align-self:auto}.eyebrow{justify-content:center;font-size:8px;margin-bottom:12px}.eyebrow-rule{width:20px}.hero-artist-name{font-size:8px;margin-bottom:8px}.hero h1{font-size:clamp(52px,12vw,75px);line-height:.85;margin:0 auto 11px}.hero h1 span{display:inline}.hero-intro{font-size:13px;line-height:1.45;max-width:430px;margin-inline:auto}.hero-art{width:min(62vw,290px);max-width:none}.art-frame{padding:6px;transform:none;box-shadow:0 20px 45px rgba(0,0,0,.4),0 0 0 6px rgba(255,255,255,.05)}.art-frame:hover{transform:none}.hero-art figcaption{display:none}.hero-actions{align-items:stretch;width:min(100%,390px);gap:12px}.spotify-cta{width:100%;min-width:0;min-height:67px;padding:10px 12px 10px 19px}.cta-text small{font-size:8px}.cta-text strong{font-size:17px}.cta-arrow{width:40px;height:40px;flex-basis:40px}.story-link{align-self:center;font-size:9px}.hero-bottom{bottom:15px;font-size:8px}.hero-bottom>span{display:none}.hero-bottom a{margin-left:auto}.story-section{padding:83px 0}.story-grid{display:block}.story-aside{display:none}.story-copy h2,.sound-section h2,.artist-copy h2,.final-listen h2{font-size:clamp(54px,12vw,76px)}.story-copy p:not(.section-label){font-size:16px;line-height:1.72}.story-copy .lead{font-size:19px!important}.artist-quote{padding:29px 26px;margin:35px 0}.artist-quote p{font-size:34px!important}.sound-section{padding:87px 0}.sound-grid{display:block}.sound-section h2{margin-bottom:25px}.sound-grid>p{font-size:16px}.artist-section{display:flex;flex-direction:column}.artist-image{height:350px;min-height:0}.artist-copy{padding:73px 21px 82px}.artist-copy p:not(.section-label){font-size:16px}.final-listen{padding:97px 0 110px}.final-inner>p:not(.section-label){font-size:16px}.footer-grid{flex-wrap:wrap;gap:20px}.site-footer p{display:none}.site-footer a:last-child{font-size:8px}}
@media(max-width:380px){.site-header .nav-listen{max-width:100px;line-height:1.3}.hero h1{font-size:49px}.hero-art{width:min(58vw,238px)}.hero-intro{font-size:12px}.hero-grid{row-gap:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}