/* ARETÉ · artist profile hierarchy and responsive separation */

/* Back navigation belongs to the profile content, not the global header. */
.profile-nav{
  width:min(calc(100% - 42px),1380px);
  margin:0 auto;
  padding:26px 0 0
}
.profile-nav .back{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  color:#8f8792;
  font-size:.58rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:color .2s ease,transform .2s ease
}
.profile-nav .back:hover{
  color:var(--amber);
  transform:translateX(-2px)
}
.hero{
  padding-top:22px!important
}

/* Desktop: both cards remain distinct and their text cannot invade the next column. */
.artist-content{
  grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr)!important;
  gap:22px!important
}
.sound-card,
.dates-card{
  min-width:0;
  overflow:hidden
}
.sound-card{
  grid-template-columns:minmax(250px,.78fr) minmax(0,1.22fr)!important
}
.sound-copy{
  min-width:0!important;
  padding:34px 32px!important
}
.sound-copy h2,
.dates-card h2{
  max-width:100%;
  font-size:clamp(2.5rem,3.3vw,4rem)!important;
  line-height:.94!important;
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none
}
.sound-card.is-placeholder .sound-copy h2{
  font-size:clamp(2.8rem,3.55vw,4.2rem)!important
}

/* Keep the soundtrack transport visually separate from its timeline. */
.sound-copy .profile-track-progress{
  margin-top:22px!important
}
.sound-copy .profile-track-progress .arete-track-progress__meta{
  margin-top:8px!important
}

/* Medium screens: stack the cards but keep the soundtrack card horizontal. */
@media (max-width:1100px){
  .artist-content{
    grid-template-columns:1fr!important;
    gap:22px!important;
    padding-top:28px!important
  }
  .sound-card{
    grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr)!important
  }
  .sound-copy{
    padding:34px!important
  }
  .dates-card{
    min-height:300px!important;
    padding:34px!important;
    border-top-color:rgba(226,164,71,.28)
  }
}

/* Mobile: each block becomes a complete card with real vertical breathing room. */
@media (max-width:720px){
  .profile-nav{
    width:min(calc(100% - 28px),1380px);
    padding-top:18px
  }
  .profile-nav .back{
    min-height:24px;
    font-size:.52rem
  }
  .hero{
    padding-top:12px!important
  }
  .artist-content{
    display:flex!important;
    flex-direction:column!important;
    gap:24px!important;
    padding:24px 0 76px!important
  }
  .sound-card,
  .dates-card{
    width:100%;
    min-height:0!important;
    height:auto!important;
    max-height:none!important
  }
  .sound-card{
    display:flex!important;
    flex-direction:column!important
  }
  .record-visual{
    width:100%;
    min-height:clamp(300px,72vw,410px)!important;
    height:auto!important;
    flex:0 0 auto
  }
  .sound-copy{
    display:block!important;
    min-height:0!important;
    padding:28px 24px 32px!important;
    border-top:1px solid var(--line);
    background:linear-gradient(180deg,rgba(15,10,19,.98),rgba(7,5,9,.98))
  }
  .dates-card{
    position:relative;
    margin-top:0!important;
    padding:30px 24px 34px!important;
    border-top:1px solid rgba(226,164,71,.32);
    background:linear-gradient(145deg,rgba(13,9,17,.96),rgba(6,5,8,.99))
  }
  .dates-card::before{
    content:"";
    position:absolute;
    top:-1px;
    left:24px;
    width:74px;
    height:1px;
    background:var(--amber);
    box-shadow:0 0 18px rgba(226,164,71,.32)
  }
  .sound-copy h2,
  .dates-card h2,
  .sound-card.is-placeholder .sound-copy h2{
    font-size:clamp(2.3rem,10vw,3.15rem)!important;
    line-height:.98!important
  }
}

@media (max-width:420px){
  .artist-content{gap:20px!important}
  .record-visual{min-height:280px!important}
  .sound-copy{padding:24px 20px 28px!important}
  .dates-card{padding:27px 20px 31px!important}
  .dates-card::before{left:20px}
}