/* Official artist identity: black, silver, and classical serif lettering. */
:root{--ink:#080808;--ink2:#111;--surface:#141414;--surface-raised:#1c1c1c;--paper:#eee;--gold:#c9c9c9;--teal:#eee;--muted:#aaa;--line:rgba(220,220,220,.22);--soft-line:rgba(255,255,255,.12)}
body{background:#080808;color:#eee}main{background:transparent}
.nav-wrap{background:linear-gradient(180deg,rgba(0,0,0,.94),rgba(0,0,0,.48))}
.brand b{font-family:'Cormorant Garamond',Georgia,serif;font-size:1rem;font-weight:500;letter-spacing:.2em;color:#ddd}
.hero-bg{background:radial-gradient(ellipse at 75% 40%,#282828 0, #111 38%,#050505 80%)}
.hero h1.artist-name{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;text-transform:uppercase;letter-spacing:.055em;font-size:clamp(3rem,6.7vw,7rem);line-height:1.08;color:#ddd;background:linear-gradient(165deg,#fff 5%,#aaa 38%,#e6e6e6 58%,#888 96%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.artist-name span{display:block;font-family:Inter,sans-serif;font-size:.27em;letter-spacing:.65em;font-weight:400;margin-bottom:18px;padding-left:.18em}
.artist-motto{text-transform:uppercase;font-size:.75rem;letter-spacing:.32em;line-height:2;color:#c4c4c4;margin-top:28px}
.hero h1 em,.section h2 em,.feature h3 em,.price-copy h2 em,.truth-remains h2 em{font-style:normal;color:#ddd}
.section h2,.feature h3,.modal-body h2{font-weight:500;letter-spacing:.015em}
.vinyl{border-color:#555;box-shadow:0 30px 90px #000;animation:none}.vinyl,.vinyl img{border-radius:0}
.ticker{background:#0b0b0b}.price-release,.truth-remains,.catalog,.story,.connect{background-image:none;background-color:transparent}.truth-remains::before{display:none}
.album,.platform-grid a,.full-player{background:#141414}.album:hover{background:#202020;border-color:#888}.album span,.album b,.catalog,.connect{color:#eee}.album small,.full-player small,.release-credit{color:#aaa}
.lyrics-columns .chorus{color:#eee;border-left-color:#bbb}.price-art::before{border-color:#777}.story-art img{filter:none}.story-art span{background:#c9c9c9;color:#111}
.button.primary,.connect .button.primary,.lyrics-jump{background:linear-gradient(135deg,#eee,#aaa);color:#111;border-color:#ccc}.button.primary:hover,.connect .button.primary:hover,.lyrics-jump:hover{background:#fff;border-color:#fff}
.platform-grid a:hover{background:#ddd;color:#111}footer{background:#050505}dialog{background:#141414;border-color:#777}.modal-close{background:#111}.play{background:rgba(10,10,10,.8);border-color:#bbb;color:#fff}
@media(max-width:620px){.nav-wrap nav{background:#101010}.brand{gap:8px}.brand b{font-size:.78rem;letter-spacing:.12em}.hero h1.artist-name{font-size:clamp(2.5rem,10vw,4rem)}.artist-motto{font-size:.65rem;letter-spacing:.23em}}

/* Blend the original silver lettering into the surrounding dark surface. */
.brand .brand-monogram{mix-blend-mode:screen;filter:contrast(1.15);background:transparent;border:0;border-radius:0;box-shadow:none}

/* Center the first name over the full surname, as in the artist reference. */
.hero h1.artist-name{width:fit-content;max-width:100%;text-align:center}
.hero .artist-name span{text-align:center;font-size:.32em;padding-left:.8em;margin-bottom:12px;letter-spacing:.8em}

/* Keep the artist identity centered and give the hero the editorial portrait treatment. */
.hero{grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);gap:clamp(2rem,6vw,7rem)}
.hero-copy{justify-self:center;text-align:center;max-width:720px}
.hero-copy .eyebrow,.hero-copy .artist-motto{margin-left:auto;margin-right:auto}
.hero-copy .lede{margin-left:auto;margin-right:auto}
.hero-copy .actions{justify-content:center}
.hero-portrait{width:min(38vw,570px);align-self:end;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.hero-portrait img{display:block;width:100%;height:auto;filter:contrast(1.04) saturate(.78)}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:1.5rem}.hero-copy{grid-row:1}.hero-portrait{grid-row:2;width:min(82vw,560px);margin:1rem auto 0;justify-self:center}}
@media(max-width:620px){.hero-copy .eyebrow{font-size:.6rem;letter-spacing:.18em}.hero-copy .artist-motto{letter-spacing:.22em}.hero-portrait{width:min(88vw,470px)}}

/* The wordmark is independently centered, not merely centered within its text flow. */
.hero-copy{width:100%}
.hero h1.artist-name{margin-left:auto;margin-right:auto}

/* Transparent, lassoed artist portrait: raised into the hero rather than shown as a separate square card. */
.hero{overflow:hidden}
.hero-copy{position:relative;z-index:2}
.hero-portrait{position:absolute;z-index:1;right:clamp(-5rem,-3vw,-1rem);bottom:0;width:min(46vw,680px);margin:0;filter:drop-shadow(-18px 18px 28px rgba(0,0,0,.55));box-shadow:none;overflow:visible}
.hero-portrait img{width:100%;height:auto;filter:none}
@media(max-width:900px){.hero{min-height:850px;padding-bottom:70px}.hero-portrait{grid-row:auto;top:90px;right:-24vw;bottom:auto;width:min(78vw,590px);margin:0}.hero-copy{align-self:start;padding-top:4rem}.hero-copy .lede,.hero-copy .actions{position:relative;z-index:3}}
@media(max-width:620px){.hero{min-height:780px}.hero-portrait{top:88px;right:-34vw;width:94vw}.hero-copy{padding-top:3.2rem}.hero-copy .lede{margin-top:260px;background:linear-gradient(90deg,rgba(8,8,8,.82),rgba(8,8,8,.42));padding:1rem .65rem}.hero-copy .actions{margin-top:1.4rem}}

/* Clear the headline: the portrait now sits beyond the right edge of the type. */
.hero-portrait{right:clamp(-12rem,-12vw,-4rem)}
@media(max-width:900px){.hero-portrait{right:-34vw}}
@media(max-width:620px){.hero-portrait{right:-40vw}}

/* Keep the supporting copy in a clear column beside the portrait on phones. */
@media(max-width:620px){
  .hero-copy .lede{
    width:70%;
    max-width:550px;
    margin:48px auto 0;
    padding:0;
    text-align:center;
    background:transparent;
  }

  .hero-copy .actions{
    width:70%;
    margin:1.35rem auto 0;
  }
}