/* ARETÉ · Artist profile 2026 polish
   Additive visual layer. Keeps the editorial system while making portrait/title
   composition safer, improving copy contrast and collapsing empty modules. */

html[data-artist-slug]{
  --artist-focus-x:50%;
  --artist-focus-y:34%;
  --artist-title-shift:-64px;
  --artist-title-size:clamp(5.4rem,7.4vw,8.8rem);
}

html[data-artist-slug="aisak-morris"]{
  --artist-focus-x:40%;
  --artist-focus-y:38%;
  --artist-title-shift:-38px;
  --artist-title-size:clamp(4.75rem,6.25vw,7.35rem);
}

html[data-artist-slug="k-yu"]{
  --artist-focus-x:43%;
  --artist-focus-y:34%;
  --artist-title-shift:-54px;
  --artist-title-size:clamp(5.8rem,8.1vw,9.2rem);
}

html[data-artist-slug="naya"]{
  --artist-focus-x:57%;
  --artist-focus-y:36%;
  --artist-title-shift:-46px;
  --artist-title-size:clamp(5.8rem,8vw,9.1rem);
}

html[data-artist-slug="alvaro-cabana"]{
  --artist-focus-x:50%;
  --artist-focus-y:47%;
  --artist-title-shift:-34px;
  --artist-title-size:clamp(4.65rem,6.15vw,7.25rem);
}

/* The soundtrack module should not reserve a full viewport when there is no set. */
.sound-card.is-placeholder{
  display:none!important;
}

.sound-card.is-placeholder + .dates-card::before{
  content:"02"!important;
}

@media (min-width:901px){
  .hero{
    min-height:min(900px,calc(100svh - 68px))!important;
    padding-top:30px!important;
    padding-bottom:88px!important;
  }

  .portrait{
    grid-column:1 / 8!important;
    min-height:680px!important;
    height:min(74svh,820px)!important;
    border-radius:18px!important;
  }

  .portrait::after{
    background:
      linear-gradient(90deg,rgba(2,2,2,.06) 0%,rgba(2,2,2,.03) 43%,rgba(2,2,2,.40) 72%,rgba(2,2,2,.88) 100%),
      linear-gradient(180deg,rgba(2,2,2,.06) 0%,rgba(2,2,2,.06) 54%,rgba(2,2,2,.66) 100%)!important;
  }

  .portrait img{
    object-position:var(--artist-focus-x) var(--artist-focus-y)!important;
    filter:saturate(.68) contrast(1.08) brightness(.82)!important;
  }

  .portrait:hover img{
    filter:saturate(.73) contrast(1.08) brightness(.85)!important;
  }

  .copy{
    grid-column:7 / 13!important;
    padding:50px 0 42px!important;
  }

  .copy h1{
    width:min(100%,850px)!important;
    max-width:850px!important;
    margin:20px 0 30px var(--artist-title-shift)!important;
    font-size:var(--artist-title-size)!important;
    line-height:.82!important;
    letter-spacing:-.055em!important;
    text-wrap:balance!important;
    overflow-wrap:normal!important;
    text-shadow:0 14px 38px rgba(0,0,0,.88),0 2px 8px rgba(0,0,0,.58)!important;
  }

  .copy h1::before{
    right:3%!important;
    top:-42px!important;
    width:62px!important;
    height:44px!important;
    opacity:.72!important;
  }

  .copy h1::after{
    left:2%!important;
    right:15%!important;
    bottom:-17px!important;
    opacity:.72!important;
  }

  .copy .eyebrow,
  .tags,
  .artist-intro,
  .artist-links{
    margin-left:clamp(18px,3.1vw,50px)!important;
  }

  .artist-intro{
    max-width:610px!important;
    padding-top:27px!important;
    background:linear-gradient(90deg,rgba(2,2,2,.34),rgba(2,2,2,0));
  }

  .artist-intro p{
    max-width:590px!important;
    color:#d8d1ca!important;
    font-size:1rem!important;
    line-height:1.72!important;
    text-shadow:0 2px 16px rgba(0,0,0,.45);
  }

  .artist-links{
    margin-top:25px!important;
    gap:3px!important;
  }

  .artist-links a{
    padding-inline:11px!important;
    color:#c9c1bb!important;
  }

  .hero::after{
    opacity:.68;
    color:rgba(241,236,228,.038)!important;
    font-size:clamp(7rem,11vw,11.2rem)!important;
  }

  .dates-card{
    min-height:auto!important;
    padding:78px 0 92px!important;
    grid-template-columns:minmax(250px,.62fr) minmax(0,1.38fr)!important;
    gap:clamp(52px,7vw,118px)!important;
  }

  .dates-card::before{
    top:18px!important;
    color:rgba(241,236,228,.04)!important;
    font-size:6.8rem!important;
  }

  .dates-card h2{
    max-width:360px!important;
    font-size:clamp(3.45rem,5vw,5.6rem)!important;
    line-height:.86!important;
  }

  .date-row{
    grid-template-columns:126px minmax(0,1fr) auto!important;
    padding:22px 0!important;
  }

  .date-row strong{
    font-size:1.18rem!important;
  }
}

@media (max-width:900px){
  main{
    overflow:hidden!important;
  }

  .profile-nav{
    width:min(calc(100% - 32px),680px)!important;
    padding-top:16px!important;
  }

  .hero{
    width:min(calc(100% - 32px),680px)!important;
    min-height:0!important;
    padding:18px 0 58px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
  }

  .hero::before{
    display:none!important;
  }

  .hero::after{
    top:22px!important;
    right:-8px!important;
    font-size:6.4rem!important;
    color:rgba(241,236,228,.035)!important;
  }

  .portrait{
    width:100%!important;
    min-height:0!important;
    height:clamp(390px,66svh,620px)!important;
    border-radius:16px!important;
  }

  .portrait::after{
    background:
      linear-gradient(180deg,rgba(2,2,2,.03) 0%,rgba(2,2,2,.06) 46%,rgba(2,2,2,.82) 100%),
      linear-gradient(90deg,rgba(2,2,2,.08),rgba(2,2,2,.02) 55%,rgba(2,2,2,.22))!important;
  }

  .portrait img{
    object-position:var(--artist-focus-x) var(--artist-focus-y)!important;
    filter:saturate(.7) contrast(1.06) brightness(.84)!important;
  }

  .copy{
    width:100%!important;
    margin-top:-74px!important;
    padding:0 16px 0!important;
    z-index:4!important;
  }

  .copy .eyebrow,
  .tags,
  .artist-intro,
  .artist-links{
    margin-left:0!important;
  }

  .copy h1{
    width:100%!important;
    max-width:100%!important;
    margin:0 0 27px!important;
    font-size:clamp(3.8rem,17vw,6.2rem)!important;
    line-height:.84!important;
    letter-spacing:-.055em!important;
    text-wrap:balance!important;
    text-shadow:0 10px 30px rgba(0,0,0,.92)!important;
  }

  html[data-artist-slug="aisak-morris"] .copy h1,
  html[data-artist-slug="alvaro-cabana"] .copy h1{
    font-size:clamp(3.15rem,13.8vw,5.35rem)!important;
  }

  .copy h1::before{
    width:44px!important;
    height:32px!important;
    top:-29px!important;
    right:4%!important;
  }

  .copy h1::after{
    bottom:-13px!important;
    left:0!important;
    right:18%!important;
  }

  .tags{
    margin-bottom:23px!important;
    row-gap:10px!important;
  }

  .artist-intro{
    max-width:none!important;
    padding-top:22px!important;
  }

  .artist-intro p{
    max-width:none!important;
    color:#d9d2cc!important;
    font-size:.98rem!important;
    line-height:1.68!important;
  }

  .artist-links{
    margin-top:21px!important;
    display:flex!important;
    flex-wrap:wrap!important;
    gap:4px 10px!important;
  }

  .artist-links a{
    min-height:40px!important;
    padding:0 5px!important;
  }

  .artist-content{
    padding-bottom:68px!important;
  }

  .sound-card,
  .dates-card{
    width:min(calc(100% - 32px),680px)!important;
  }

  .dates-card{
    min-height:0!important;
    padding:56px 0 62px!important;
    display:block!important;
  }

  .dates-card::before{
    top:20px!important;
    font-size:5.2rem!important;
    color:rgba(241,236,228,.035)!important;
  }

  .dates-card h2{
    max-width:330px!important;
    margin-bottom:38px!important;
    font-size:clamp(3.2rem,15vw,5.2rem)!important;
    line-height:.84!important;
  }

  .dates-card h2::after{
    width:42px!important;
    height:42px!important;
    right:-8px!important;
    bottom:-20px!important;
  }

  .date-row{
    grid-template-columns:1fr auto!important;
    gap:8px 18px!important;
    padding:20px 0!important;
  }

  .date-row time{
    grid-column:1 / -1!important;
  }

  .date-row strong{
    font-size:1.08rem!important;
  }
}

@media (max-width:480px){
  .portrait{
    height:clamp(360px,61svh,520px)!important;
  }

  .copy{
    margin-top:-62px!important;
    padding-inline:10px!important;
  }

  .copy h1{
    font-size:clamp(3.45rem,16.5vw,5rem)!important;
  }

  html[data-artist-slug="aisak-morris"] .copy h1,
  html[data-artist-slug="alvaro-cabana"] .copy h1{
    font-size:clamp(2.95rem,13.4vw,4.35rem)!important;
  }

  .date-row{
    grid-template-columns:1fr!important;
  }

  .date-row a{
    justify-self:start!important;
    margin-top:5px!important;
  }
}