/* ARETÉ · floating artist bio
   Desktop: the biography becomes a glass editorial panel that overlaps the portrait.
   Mobile: keep the same hierarchy without overlapping the image, prioritising readability. */

@media (min-width:901px){
  .hero{overflow:visible!important}
  .copy{position:relative!important;z-index:5!important}

  .artist-intro{
    position:relative!important;
    z-index:6!important;
    width:calc(100% + 66px)!important;
    max-width:720px!important;
    margin-top:24px!important;
    margin-left:-66px!important;
    padding:30px 32px 32px!important;
    border:1px solid rgba(244,238,231,.11)!important;
    border-radius:20px!important;
    background:linear-gradient(135deg,rgba(13,10,15,.82),rgba(5,4,7,.68) 72%),rgba(5,4,7,.68)!important;
    -webkit-backdrop-filter:blur(18px) saturate(118%)!important;
    backdrop-filter:blur(18px) saturate(118%)!important;
    box-shadow:0 26px 70px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.035)!important;
  }

  .artist-intro::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    background:linear-gradient(110deg,rgba(226,164,71,.055),transparent 28%,rgba(184,91,231,.035) 100%);
  }

  .artist-intro>span,.artist-intro>p{position:relative;z-index:1}
  .artist-intro>span{margin-bottom:15px!important;font-size:.63rem!important;letter-spacing:.19em!important}
  .artist-intro p{max-width:none!important;color:#ddd5ce!important;font-size:1.02rem!important;line-height:1.82!important;text-wrap:pretty;text-shadow:0 2px 18px rgba(0,0,0,.38)!important}

  .artist-links{
    max-width:680px!important;
    margin-top:18px!important;
    margin-left:-34px!important;
    gap:6px 8px!important;
  }

  .artist-links a{
    min-height:38px!important;
    display:inline-flex!important;
    align-items:center!important;
    padding:0 12px!important;
    border-color:rgba(255,255,255,.085)!important;
    background:rgba(6,5,8,.28)!important;
    -webkit-backdrop-filter:blur(8px)!important;
    backdrop-filter:blur(8px)!important;
  }

  .artist-links a:hover{border-color:rgba(226,164,71,.32)!important;background:rgba(226,164,71,.045)!important}
}

@media (min-width:901px) and (max-width:1180px){
  .artist-intro{width:calc(100% + 46px)!important;margin-left:-46px!important;padding:27px 28px 29px!important}
  .artist-intro p{font-size:.98rem!important;line-height:1.76!important}
  .artist-links{margin-left:-20px!important}
}

@media (max-width:900px){
  .artist-intro{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    padding:23px 0 0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  .artist-intro p{font-size:.98rem!important;line-height:1.72!important}
}

@media (prefers-reduced-transparency:reduce) and (min-width:901px){
  .artist-intro{background:#09070b!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}