/* ARETÉ · Visual Evolution · Artist profiles
   Conservative visual layer for artista.html.
   Keeps the original profile composition, CMS data and player behaviour intact. */

html:has([data-artist-name]){
  --profile-bg:#040305;
  --profile-surface:rgba(10,7,12,.9);
  --profile-surface-raised:rgba(14,9,17,.94);
  --profile-ink:#f1ece5;
  --profile-muted:#a79da8;
  --profile-muted-2:#776f7a;
  --profile-amber:#d4a04e;
  --profile-amber-bright:#edbd6b;
  --profile-violet:#a84fc8;
  --profile-violet-soft:rgba(168,79,200,.2);
  --profile-line:rgba(241,232,219,.085);
  --profile-line-warm:rgba(212,160,78,.28);
  --profile-shadow:0 26px 76px rgba(0,0,0,.42);
  --profile-shadow-soft:0 17px 46px rgba(0,0,0,.3);
  --profile-radius-shell:22px;
  --profile-radius-card:18px;
  --profile-radius-control:11px;
}

html:has([data-artist-name]) body{
  color:var(--profile-ink);
  background:
    radial-gradient(circle at 77% 13%,rgba(116,36,143,.2),transparent 31rem),
    radial-gradient(circle at 7% 52%,rgba(99,29,122,.075),transparent 28rem),
    linear-gradient(180deg,#040305 0%,#08050a 56%,#030304 100%);
}

html:has([data-artist-name]) body::before{
  opacity:.04;
  mix-blend-mode:soft-light;
}

/* Header and navigation */
html:has([data-artist-name]) .top{
  height:72px;
  border-bottom-color:rgba(241,232,219,.065);
  background:rgba(4,3,5,.84);
  backdrop-filter:blur(22px) saturate(.92);
}

html:has([data-artist-name]) .top-inner{
  width:min(calc(100% - 42px),1380px);
}

html:has([data-artist-name]) .logo{
  width:136px;
  filter:brightness(.95) sepia(.03);
}

html:has([data-artist-name]) .public-page-lang{
  border-color:rgba(241,232,219,.1)!important;
  background:rgba(255,255,255,.018);
  color:#8f8792!important;
}

html:has([data-artist-name]) .public-page-lang button.active{
  color:var(--profile-amber-bright)!important;
}

html:has([data-artist-name]) main{
  padding-top:72px;
}

html:has([data-artist-name]) .profile-nav{
  padding-top:24px;
}

html:has([data-artist-name]) .profile-nav .back{
  min-height:34px;
  padding:0 12px;
  border:1px solid rgba(241,232,219,.08);
  border-radius:999px;
  background:rgba(255,255,255,.016);
  color:#958d98;
  transition:transform .2s ease,border-color .2s ease,color .2s ease,background .2s ease;
}

html:has([data-artist-name]) .profile-nav .back:hover{
  transform:translateX(-3px);
  border-color:var(--profile-line-warm);
  background:rgba(212,160,78,.035);
  color:var(--profile-amber-bright);
}

/* Hero: same two-column structure, stronger editorial finish. */
html:has([data-artist-name]) .hero{
  position:relative;
  min-height:80vh;
  gap:clamp(42px,5vw,72px);
  padding:28px 0 58px!important;
}

html:has([data-artist-name]) .hero::before{
  content:"";
  position:absolute;
  left:clamp(-24px,-2vw,-8px);
  top:clamp(52px,8vw,112px);
  z-index:2;
  width:clamp(90px,10vw,150px);
  aspect-ratio:1.55;
  background:url('assets/brand-symbols/orbit.svg') center/contain no-repeat;
  opacity:.15;
  transform:rotate(-11deg);
  pointer-events:none;
}

html:has([data-artist-name]) .portrait{
  min-height:650px;
  isolation:isolate;
  border:1px solid rgba(241,232,219,.09);
  border-radius:var(--profile-radius-shell)!important;
  background:#070609;
  box-shadow:var(--profile-shadow);
}

html:has([data-artist-name]) .portrait::before{
  inset:-7%;
  filter:blur(30px) saturate(.72) brightness(.39);
  opacity:.78;
}

html:has([data-artist-name]) .portrait::after{
  z-index:2;
  background:
    linear-gradient(180deg,rgba(4,3,5,.025) 36%,rgba(4,3,5,.18) 64%,rgba(4,3,5,.8)),
    radial-gradient(circle at 78% 18%,rgba(169,74,201,.16),transparent 20rem),
    linear-gradient(90deg,rgba(4,3,5,.08),transparent 38%,rgba(4,3,5,.12));
}

html:has([data-artist-name]) .portrait img{
  z-index:1;
  filter:saturate(.82) contrast(1.055) brightness(.96);
  transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .45s ease;
}

html:has([data-artist-name]) .portrait:hover img{
  transform:scale(1.012);
  filter:saturate(.9) contrast(1.045) brightness(.98);
}

html:has([data-artist-name]) .copy{
  position:relative;
  z-index:3;
}

html:has([data-artist-name]) .copy::after{
  content:"";
  position:absolute;
  right:clamp(2px,2vw,30px);
  top:clamp(6px,2vw,24px);
  width:clamp(48px,5vw,72px);
  height:clamp(34px,3.7vw,52px);
  background:url('assets/brand-symbols/crown.svg') center/contain no-repeat;
  opacity:.5;
  transform:rotate(5deg);
  pointer-events:none;
}

html:has([data-artist-name]) .eyebrow{
  color:#ce75de;
  text-shadow:0 0 18px rgba(166,70,196,.13);
}

html:has([data-artist-name]) .copy h1{
  position:relative;
  width:fit-content;
  max-width:100%;
  margin:18px 0 20px;
  color:var(--profile-ink);
  text-wrap:balance;
  text-shadow:0 18px 52px rgba(0,0,0,.34);
}

html:has([data-artist-name]) .copy h1::after{
  content:"";
  position:absolute;
  left:1%;
  right:7%;
  bottom:-10px;
  height:8px;
  border-bottom:2px solid rgba(212,160,78,.47);
  border-radius:50%;
  transform:rotate(-.8deg);
  pointer-events:none;
}

html:has([data-artist-name]) .tags{
  gap:7px;
  margin:0 0 31px;
}

html:has([data-artist-name]) .tags span{
  padding:8px 11px;
  border-color:rgba(241,232,219,.095);
  border-radius:999px!important;
  background:rgba(255,255,255,.017);
  color:#9f96a2;
}

html:has([data-artist-name]) .tags span:first-child{
  border-color:rgba(168,79,200,.29);
  background:rgba(107,31,131,.13);
  color:#d393df;
}

html:has([data-artist-name]) .artist-intro{
  max-width:680px;
  padding-top:27px;
  border-top-color:rgba(212,160,78,.22);
}

html:has([data-artist-name]) .artist-intro>span{
  color:var(--profile-amber-bright);
}

html:has([data-artist-name]) .artist-intro p{
  max-width:650px;
  color:#beb5c0;
  line-height:1.75;
}

html:has([data-artist-name]) .artist-links{
  gap:9px;
  margin-top:27px;
}

html:has([data-artist-name]) .artist-links a{
  min-height:42px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  border-color:rgba(212,160,78,.25);
  border-radius:var(--profile-radius-control)!important;
  background:linear-gradient(180deg,rgba(16,11,18,.7),rgba(7,5,9,.88));
  color:#c8c0ca;
  box-shadow:0 10px 27px rgba(0,0,0,.2);
  transition:transform .2s ease,border-color .2s ease,color .2s ease,background .2s ease;
}

html:has([data-artist-name]) .artist-links a:hover{
  transform:translateY(-2px);
  border-color:rgba(212,160,78,.52);
  background:rgba(212,160,78,.055);
  color:var(--profile-amber-bright);
}

/* Soundtrack and dates */
html:has([data-artist-name]) .artist-content{
  gap:16px!important;
  padding:42px 0 112px;
}

html:has([data-artist-name]) .sound-card,
html:has([data-artist-name]) .dates-card{
  position:relative;
  border-color:var(--profile-line)!important;
  border-radius:var(--profile-radius-card)!important;
  background:linear-gradient(145deg,var(--profile-surface-raised),rgba(6,5,8,.985));
  box-shadow:var(--profile-shadow-soft);
}

html:has([data-artist-name]) .sound-card{
  isolation:isolate;
}

html:has([data-artist-name]) .record-visual{
  background:
    radial-gradient(circle at 48% 48%,rgba(118,36,144,.21),transparent 18rem),
    radial-gradient(circle at 15% 15%,rgba(212,160,78,.045),transparent 12rem),
    #070609;
}

html:has([data-artist-name]) .record-visual::after{
  content:"";
  position:absolute;
  left:4%;
  top:4%;
  width:47%;
  height:34%;
  background:url('assets/brand-symbols/orbit.svg') center/contain no-repeat;
  opacity:.11;
  transform:rotate(-12deg);
  pointer-events:none;
}

html:has([data-artist-name]) .record-visual::before{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),
    0 28px 68px rgba(0,0,0,.55),
    inset 0 0 28px rgba(255,255,255,.012);
}

html:has([data-artist-name]) .record-visual span{
  border-color:rgba(212,160,78,.58);
  box-shadow:0 0 0 9px rgba(0,0,0,.38),0 0 25px rgba(212,160,78,.1);
}

html:has([data-artist-name]) .sound-copy{
  position:relative;
  background:
    radial-gradient(circle at 100% 0,rgba(115,36,140,.13),transparent 18rem),
    linear-gradient(145deg,rgba(13,9,16,.7),rgba(6,5,8,.94));
}

html:has([data-artist-name]) .sound-copy::after{
  content:"";
  position:absolute;
  right:22px;
  top:20px;
  width:27px;
  height:46px;
  background:url('assets/brand-symbols/bolt.svg') center/contain no-repeat;
  opacity:.46;
  transform:rotate(7deg);
  pointer-events:none;
}

html:has([data-artist-name]) .sound-copy h2,
html:has([data-artist-name]) .dates-card h2{
  color:var(--profile-ink);
  text-wrap:balance;
}

html:has([data-artist-name]) .sound-copy>p:not(.eyebrow),
html:has([data-artist-name]) .empty-copy{
  color:var(--profile-muted);
}

html:has([data-artist-name]) .btn{
  border-radius:var(--profile-radius-control)!important;
  transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
}

html:has([data-artist-name]) .btn.primary{
  border-color:rgba(237,189,107,.58);
  background:linear-gradient(105deg,#ad7a31,#d5a24e 52%,#bc8638);
  box-shadow:0 13px 31px rgba(159,107,36,.15),inset 0 1px rgba(255,255,255,.23);
}

html:has([data-artist-name]) .btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.04);
}

html:has([data-artist-name]) .profile-track-progress .arete-track-progress__rail{
  background:rgba(241,232,219,.09)!important;
}

html:has([data-artist-name]) .dates-card{
  overflow:hidden;
  background:
    radial-gradient(circle at 100% 0,rgba(110,34,135,.12),transparent 17rem),
    linear-gradient(145deg,rgba(13,9,16,.9),rgba(6,5,8,.985));
}

html:has([data-artist-name]) .dates-card::after{
  content:"";
  position:absolute;
  right:20px;
  bottom:17px;
  width:56px;
  height:51px;
  background:url('assets/brand-symbols/temple.svg') center/contain no-repeat;
  opacity:.1;
  pointer-events:none;
}

html:has([data-artist-name]) .dates-list{
  gap:0;
}

html:has([data-artist-name]) .date-row{
  position:relative;
  padding:18px 0;
  border-top-color:rgba(241,232,219,.075);
}

html:has([data-artist-name]) .date-row:first-child{
  border-top-color:rgba(212,160,78,.22);
}

html:has([data-artist-name]) .date-row time{
  color:var(--profile-amber-bright);
}

html:has([data-artist-name]) .date-row strong{
  color:var(--profile-ink);
}

html:has([data-artist-name]) .date-row small{
  color:#8f8793;
}

html:has([data-artist-name]) .date-row a{
  min-height:36px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(241,232,219,.08);
  border-radius:9px;
  color:#c9c1cb;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}

html:has([data-artist-name]) .date-row a:hover{
  border-color:var(--profile-line-warm);
  background:rgba(212,160,78,.04);
  color:var(--profile-amber-bright);
}

/* Footer */
html:has([data-artist-name]) .footer{
  position:relative;
  border-top-color:rgba(241,232,219,.065);
  background:linear-gradient(180deg,rgba(4,3,5,.12),#020203);
}

html:has([data-artist-name]) .footer::after{
  content:"";
  position:absolute;
  right:clamp(22px,5vw,72px);
  top:22px;
  width:38px;
  height:35px;
  background:url('assets/brand-symbols/temple.svg') center/contain no-repeat;
  opacity:.13;
  pointer-events:none;
}

html:has([data-artist-name]) .footer-inner{
  color:var(--profile-muted-2);
}

html:has([data-artist-name]) :is(a,button):focus-visible{
  outline:none!important;
  box-shadow:0 0 0 3px rgba(212,160,78,.17),0 0 0 1px rgba(237,189,107,.78)!important;
}

@media(max-width:1100px){
  html:has([data-artist-name]) .hero{
    gap:38px;
  }

  html:has([data-artist-name]) .copy::after{
    right:4px;
  }
}

@media(max-width:950px){
  html:has([data-artist-name]) .hero{
    min-height:0;
    padding-top:22px!important;
  }

  html:has([data-artist-name]) .hero::before{
    left:auto;
    right:13px;
    top:48px;
    width:104px;
  }

  html:has([data-artist-name]) .portrait{
    min-height:58svh;
  }

  html:has([data-artist-name]) .copy{
    margin-top:-76px;
    padding:0 18px 4px;
    background:linear-gradient(180deg,transparent,#040305 25%);
  }
}

@media(max-width:720px){
  /* mobile-production-fixes adds bottom room for the landing's fixed nav.
     Artist profiles have no bottom nav, so neutralise it here. */
  html:has([data-artist-name]) body{
    padding-bottom:0!important;
  }

  html:has([data-artist-name]) .top{
    height:62px;
  }

  html:has([data-artist-name]) main{
    padding-top:62px;
  }

  html:has([data-artist-name]) .top-inner,
  html:has([data-artist-name]) .hero,
  html:has([data-artist-name]) .artist-content,
  html:has([data-artist-name]) .profile-nav,
  html:has([data-artist-name]) .footer-inner{
    width:min(calc(100% - 28px),1380px);
  }

  html:has([data-artist-name]) .logo{
    width:111px;
  }

  html:has([data-artist-name]) .profile-nav{
    padding-top:16px;
  }

  html:has([data-artist-name]) .profile-nav .back{
    min-height:31px;
    padding:0 10px;
    font-size:.5rem;
  }

  html:has([data-artist-name]) .hero{
    gap:0;
    padding-top:12px!important;
    padding-bottom:25px!important;
  }

  html:has([data-artist-name]) .hero::before{
    top:28px;
    right:7px;
    width:78px;
    opacity:.11;
  }

  html:has([data-artist-name]) .portrait{
    min-height:clamp(405px,108vw,475px)!important;
    border-radius:18px!important;
  }

  html:has([data-artist-name]) .copy{
    margin-top:-69px!important;
    padding:0 16px 5px!important;
  }

  html:has([data-artist-name]) .copy::after{
    top:9px;
    right:3px;
    width:42px;
    height:30px;
    opacity:.38;
  }

  html:has([data-artist-name]) .copy h1{
    max-width:calc(100% - 30px);
    margin:12px 0 16px!important;
    font-size:clamp(3.15rem,15vw,4.15rem)!important;
  }

  html:has([data-artist-name]) .copy h1::after{
    bottom:-7px;
  }

  html:has([data-artist-name]) .tags{
    gap:6px!important;
    margin-bottom:21px!important;
  }

  html:has([data-artist-name]) .tags span{
    padding:7px 9px!important;
    font-size:.5rem!important;
  }

  html:has([data-artist-name]) .artist-intro{
    padding-top:19px!important;
  }

  html:has([data-artist-name]) .artist-intro p{
    font-size:.84rem!important;
    line-height:1.58!important;
  }

  html:has([data-artist-name]) .artist-links{
    margin-top:19px!important;
  }

  html:has([data-artist-name]) .artist-links a{
    min-height:39px;
    padding:0 12px;
    font-size:.55rem;
  }

  html:has([data-artist-name]) .artist-content{
    gap:18px!important;
    padding:22px 0 72px!important;
  }

  html:has([data-artist-name]) .sound-card,
  html:has([data-artist-name]) .dates-card{
    border-radius:17px!important;
  }

  html:has([data-artist-name]) .record-visual{
    min-height:clamp(250px,67vw,305px)!important;
  }

  html:has([data-artist-name]) .sound-card .record-visual::before{
    width:min(82%,325px)!important;
  }

  html:has([data-artist-name]) .sound-card .record-visual>span:first-of-type{
    width:min(26%,98px)!important;
  }

  html:has([data-artist-name]) .sound-copy{
    padding:24px 21px 28px!important;
  }

  html:has([data-artist-name]) .sound-copy::after{
    right:14px;
    top:15px;
    width:22px;
    height:38px;
    opacity:.38;
  }

  html:has([data-artist-name]) .sound-copy h2,
  html:has([data-artist-name]) .dates-card h2,
  html:has([data-artist-name]) .sound-card.is-placeholder .sound-copy h2{
    font-size:clamp(2.25rem,10.5vw,3rem)!important;
  }

  html:has([data-artist-name]) [data-listen]{
    min-height:47px!important;
    margin-top:18px!important;
    margin-bottom:13px!important;
  }

  html:has([data-artist-name]) .dates-card{
    padding:28px 21px 32px!important;
  }

  html:has([data-artist-name]) .date-row{
    grid-template-columns:1fr;
    gap:8px;
    padding:17px 0;
  }

  html:has([data-artist-name]) .date-row a{
    justify-self:start;
  }

  html:has([data-artist-name]) .footer{
    padding-bottom:34px;
  }
}

@media(max-width:420px){
  html:has([data-artist-name]) .portrait{
    min-height:395px!important;
  }

  html:has([data-artist-name]) .copy h1{
    font-size:3.35rem!important;
  }

  html:has([data-artist-name]) .record-visual{
    min-height:238px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html:has([data-artist-name]) .portrait img,
  html:has([data-artist-name]) .profile-nav .back,
  html:has([data-artist-name]) .artist-links a,
  html:has([data-artist-name]) .btn{
    transition:none!important;
  }
}