/* Version 3: warm neutral foundation with a confident electric-blue accent. */
:root{
  --bg:#14171e;
  --fg:#f6f6f3;
  --muted:#b6bfcb;
  --accent:#79a7ff;
  --line:#343d4e;
}
body{background:var(--bg)}
.navlinks a:hover,.foot a:hover{color:var(--accent)}
.navlinks .outline{border-color:#647b9f}
.hero{
  position:relative;
  isolation:isolate;
}
.hero:before{
  content:"";
  position:absolute;
  z-index:-1;
  right:-130px;
  top:65px;
  width:590px;
  height:590px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,#4b70d633 0,#5d7fe11c 38%,transparent 70%);
}
.hero h1 span{color:#8cb6ff}
.button{border-color:#68778d}
.button.filled{background:#82abff;border-color:#82abff;color:#111a2a}
.button.filled:hover{background:#aac8ff}
.record{
  border-color:#6687c0;
  background:repeating-radial-gradient(circle at 49% 51%,#1a2337 0 20px,#34518d 21px 22px,#1c2a48 23px 43px);
  box-shadow:0 0 100px #648efb25,inset 0 0 75px #03060dcc;
}
.neck{
  border-left-color:#7b8cae;
  border-right-color:#131b2b;
  background:repeating-linear-gradient(0deg,transparent 0 43px,#b8c7e6 44px 46px),repeating-linear-gradient(90deg,#273448 0 13px,#d4e0ef80 14px 15px,#263248 16px 18px);
}
.hero-photo{height:540px;overflow:hidden;border-radius:16px;background:#151a23}
.hero-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:52% 40%}
.hero.hero-wide{display:block;position:relative;width:100%;max-width:none;min-height:650px;background:#000;isolation:isolate;overflow:hidden}
.hero.hero-wide:before{display:none}
.hero-backdrop{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center;z-index:-1}
.hero-content{position:relative;min-height:650px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-top:52px;padding-bottom:58px}
.hero-content p{max-width:470px;color:#d1d4d7;text-shadow:0 1px 7px #0009}
.hero-content h1{text-shadow:0 2px 14px #0006}
.album{
  background:#222b3a;
  border-color:#445372;
  box-shadow:0 18px 60px #0000002b;
}
.album-note a,.copy a{color:#a9c7ff}
.performance{background:#f2f1ed;color:#171c25}
.performance .eyebrow,.performance .small{color:#3f68ae}
.performance .heading p{color:#636b77}
.showcase{background:#e4e8ef;box-shadow:0 15px 45px #0f203112}
.video{
  background:radial-gradient(circle at 42% 50%,#405b8b,#192840 55%,#111b2e);
  color:#e5edff;
}
.video:before{
  border-color:#779bd1;
  box-shadow:0 0 0 50px #7da5ff12,0 0 0 100px #7da5ff0b;
}
.video strong{border-color:#a4c0f8;color:#9fc0ff}
.showcopy p{color:#526071}
.detail{border-color:#bac5d7}
.detail span:first-child,.pending{color:#65758a}
.abouttext{color:#c7ced9}
.chips span{border-color:#566884;color:#d6e1f2}
.contact{background:#87adf3;color:#101a2c}
.contact .eyebrow{color:#2d4673}
.contactrow p{color:#273d5c}
.email{border-color:#294570;color:#14233e}
.email.instagram{background:#16243e;border-color:#16243e;color:#fff}
.email:hover{background:#a9c8ff}
.email.instagram:hover{background:#2b436d}
.foot{color:#9daabd}
.foot b{color:#f4f4f1}
@media(max-width:850px){
  .hero:before{width:360px;height:360px;top:10px;right:-100px}
  .hero-photo{height:min(78vw,390px)}
  .hero-photo img{object-position:50% 38%}
  .hero.hero-wide{padding:0;min-height:610px}
  .hero-backdrop{object-position:65% center;opacity:.72}
  .hero.hero-wide:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#000e 0%,#0009 45%,#0002 100%)}
  .hero-content{min-height:610px;justify-content:flex-end;padding-top:70px;padding-bottom:62px}
  .hero-content h1{font-size:clamp(68px,14vw,100px)}
}

/* Version 6: charcoal, blue-violet, periwinkle and off-white brand palette. */
:root{--bg:#15141f;--fg:#f4f2f8;--muted:#c1bfd1;--accent:#aaa4ed;--line:#444159}
body{background:var(--bg)}
.logo span{color:#aaa4ed}
.navlinks .outline{border-color:#7771b6}
.navlinks a:hover,.foot a:hover{color:#aaa4ed}
.hero h1 span{color:#aaa4ed}
.button{border-color:#77718c}
.button.filled{background:#7b76d5;border-color:#7b76d5;color:#fff}
.button.filled:hover{background:#aaa4ed;color:#171520}
.album{background:#232130;border-color:#4b4868}
.album-note a,.copy a{color:#b7b1ff}
.performance{background:#f3f1f7;color:#1b1a27}
.performance .eyebrow,.performance .small{color:#6660b6}
.performance .heading p{color:#686476}
.showcase{background:#e8e4f5;box-shadow:0 15px 45px #18122d17}
.video{background:radial-gradient(circle at 42% 50%,#51488a,#29243e 55%,#191723);color:#eeeafe}
.video:before{border-color:#817bb7;box-shadow:0 0 0 50px #928bf014,0 0 0 100px #928bf00a}
.video strong{border-color:#a9a3dc;color:#c5bfff}
.showcopy p{color:#59536d}
.detail{border-color:#c5bfd8}
.detail span:first-child,.pending{color:#736c85}
.abouttext{color:#d0cede}
.chips span{border-color:#625d89;color:#e1def6}
.contact{background:#7b76d5;color:#fff}
.contact .eyebrow{color:#f0edff}
.contactrow p{color:#eeecff}
.email{border-color:#f0edff;color:#fff}
.email.instagram{background:#242238;border-color:#242238;color:#fff}
.email:hover{background:#a9a3ec;color:#181623}
.email.instagram:hover{background:#3d3964;color:#fff}
.foot{color:#b8b5ce}
.gallery-section{background:#191824;border-top:1px solid #3c394e}
.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.gallery-item{display:block;position:relative;height:360px;overflow:hidden;border-radius:14px;background:#272438;border:1px solid #4b4564}
.gallery-item img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform .35s ease,filter .35s ease;filter:saturate(.72) contrast(1.04)}
.gallery-item:hover img,.gallery-item:focus-visible img{transform:scale(1.045);filter:saturate(.92) contrast(1.02)}
.gallery-item span{position:absolute;left:0;right:0;bottom:0;padding:38px 18px 17px;background:linear-gradient(transparent,#0a0917d9);font-size:13px;font-weight:700;letter-spacing:.01em;color:#fff}
.gallery-item:nth-child(2) img{object-position:center 25%}
.gallery-item:nth-child(3) img{object-position:66% 34%;transform:scale(1.12)}
.gallery-item:nth-child(3):hover img{transform:scale(1.17)}
.gallery-item:focus-visible{outline:3px solid #aaa4ed;outline-offset:3px}
@media(max-width:850px){.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.gallery-item{height:275px}}
@media(max-width:560px){.gallery-grid{grid-template-columns:1fr;gap:12px}.gallery-item{height:330px}.gallery-item span{font-size:12px;padding:28px 14px 14px}}
@media(prefers-reduced-motion:reduce){.gallery-item img{transition:none}}

/* Version 8: official cover artwork for all three Spotify releases. */
.releases-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;align-items:start}
.release-card{min-width:0}
.release-art{display:block;aspect-ratio:1;overflow:hidden;border-radius:12px;background:#232130;border:1px solid #4b4868;box-shadow:0 18px 40px #07051044}
.release-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.release-art:hover img,.release-art:focus-visible img{transform:scale(1.035)}
.release-art:focus-visible,.release-info a:focus-visible{outline:3px solid #aaa4ed;outline-offset:4px}
.release-info{padding:21px 4px 0}
.release-type{color:#aaa4ed;font-size:11px;text-transform:uppercase;letter-spacing:.16em;font-weight:700}
.release-info h3{font:800 clamp(20px,2.1vw,27px)/1.25 Manrope,sans-serif;letter-spacing:-.035em;margin:9px 0 16px;min-height:2.5em}
.release-info a{display:inline-block;color:#b7b1ff;font-weight:700;font-size:13px}
.release-info a:hover{text-decoration:underline}
@media(max-width:700px){.releases-grid{gap:16px}.release-info h3{font-size:18px}}
@media(max-width:560px){.releases-grid{grid-template-columns:1fr;gap:38px}.release-info h3{min-height:0;font-size:24px}.release-art{max-width:470px}}
@media(prefers-reduced-motion:reduce){.release-art img{transition:none}}

/* Version 9: balanced five-image gallery and playable full performance. */
.gallery-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:17px}
.gallery-item{flex:0 1 calc((100% - 34px)/3);height:360px}
.gallery-item:nth-child(3) img{object-position:50% 33%;transform:none}
.gallery-item:nth-child(3):hover img{transform:scale(1.045)}
.gallery-item:nth-child(4) img{object-position:66% 34%;transform:scale(1.12)}
.gallery-item:nth-child(4):hover img{transform:scale(1.17)}
.gallery-item:nth-child(5) img{object-position:center 25%;filter:saturate(.5) contrast(1.05)}
.gallery-item:nth-child(5):hover img{filter:saturate(.7) contrast(1.04)}
.gallery-item:nth-child(2) img,.gallery-item:nth-child(4) img{filter:saturate(.5) contrast(1.05)}
.gallery-item:nth-child(2):hover img,.gallery-item:nth-child(4):hover img{filter:saturate(.7) contrast(1.04)}
.video{display:block;min-height:0;aspect-ratio:16/9;background:#191723}
.video:before{display:none}
.video video{display:block;width:100%;height:100%;object-fit:contain;background:#111;cursor:pointer}
.showcase{align-items:stretch}
.showcopy{align-self:center}
.heading p{max-width:450px}
@media(max-width:850px){.gallery-grid{gap:12px}.gallery-item{flex-basis:calc((100% - 12px)/2);height:315px}}
@media(max-width:560px){.gallery-item{flex-basis:100%;height:360px}.showcase{display:block}.video{width:100%}.showcopy{padding:28px}}

/* Version 10: constrain video within its column at all widths. */
.showcase{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.video{position:relative;min-width:0;width:100%;overflow:hidden;aspect-ratio:16/9}
.video video{position:absolute;inset:0;display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
.showcopy{min-width:0}
.gallery-item:nth-child(2) img{object-position:center 30%;filter:saturate(.72) contrast(1.04)}
.gallery-item:nth-child(3) img{object-position:center 25%;transform:none;filter:saturate(.5) contrast(1.05)}
.gallery-item:nth-child(3):hover img{transform:scale(1.045);filter:saturate(.7) contrast(1.04)}
@media(max-width:560px){.showcase{display:block}}