/* ARETÉ · Artist profile editorial system v2
   Structural visual redesign only. No data, player or navigation logic. */

:root{
  --profile-bg:#020202;
  --profile-panel:#070607;
  --profile-panel-soft:#0b090b;
  --profile-ink:#f1ece4;
  --profile-muted:#aaa19c;
  --profile-muted-2:#766f6c;
  --profile-gold:#c89542;
  --profile-gold-bright:#e4b45f;
  --profile-violet:#8a4b96;
  --profile-line:rgba(241,236,228,.1);
  --profile-line-warm:rgba(200,149,66,.34);
}

html{
  background:var(--profile-bg);
}

body{
  background:
    radial-gradient(circle at 86% 8%,rgba(200,149,66,.045),transparent 28rem),
    radial-gradient(circle at 8% 88%,rgba(138,75,150,.025),transparent 30rem),
    linear-gradient(180deg,#020202 0%,#050405 54%,#020202 100%)!important;
}

body::before{
  opacity:.024!important;
  mix-blend-mode:soft-light!important;
}

.top{
  height:68px!important;
  border-bottom-color:rgba(241,236,228,.055)!important;
  background:rgba(2,2,2,.9)!important;
  backdrop-filter:blur(20px) saturate(.78)!important;
}

.top-inner{
  width:min(calc(100% - 54px),1520px)!important;
}

.logo{
  width:128px!important;
}

main{
  padding-top:68px!important;
  overflow:hidden;
}

.profile-nav{
  width:min(calc(100% - 54px),1520px)!important;
  margin:0 auto!important;
  padding:25px 0 0!important;
}

.profile-nav .back{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  color:#8f8783!important;
  font-size:.56rem!important;
  letter-spacing:.18em!important;
}

.profile-nav .back::after{
  content:"";
  width:34px;
  height:1px;
  margin-left:13px;
  background:rgba(200,149,66,.5);
  transition:width .2s ease,background .2s ease;
}

.profile-nav .back:hover::after{
  width:50px;
  background:var(--profile-gold-bright);
}

.hero{
  position:relative;
  width:min(calc(100% - 54px),1520px)!important;
  min-height:calc(100svh - 68px);
  margin:0 auto!important;
  padding:26px 0 112px!important;
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  align-items:center!important;
  gap:0!important;
}

.hero::before{
  content:"ARETÉ / ARTIST ARCHIVE / MADRID"!important;
  position:absolute;
  left:-38px;
  top:18%;
  z-index:4;
  display:block!important;
  color:rgba(241,236,228,.26);
  font-size:.5rem;
  font-weight:700;
  letter-spacing:.24em;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
}

.hero::after{
  content:"01";
  position:absolute;
  right:0;
  top:1.5rem;
  color:rgba(241,236,228,.055);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(8rem,14vw,14rem);
  line-height:.8;
  pointer-events:none;
}

.portrait{
  grid-column:1 / 9!important;
  grid-row:1!important;
  z-index:1;
  min-height:760px!important;
  height:min(78svh,880px);
  overflow:hidden;
  border:0!important;
  border-radius:0!important;
  background:#050505!important;
  box-shadow:0 38px 120px rgba(0,0,0,.62)!important;
}

.portrait::before{
  inset:-3%!important;
  filter:blur(46px) saturate(.42) brightness(.23)!important;
  opacity:.58!important;
}

.portrait::after{
  content:""!important;
  display:block!important;
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(90deg,rgba(2,2,2,.06) 0%,transparent 42%,rgba(2,2,2,.26) 100%),
    linear-gradient(180deg,rgba(2,2,2,.015) 34%,rgba(2,2,2,.12) 68%,rgba(2,2,2,.76) 100%)!important;
  pointer-events:none;
}

.portrait img{
  object-fit:cover!important;
  object-position:center 32%!important;
  filter:saturate(.72) contrast(1.08) brightness(.92)!important;
  transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .7s ease!important;
}

.portrait:hover img{
  transform:scale(1.012)!important;
  filter:saturate(.78) contrast(1.08) brightness(.95)!important;
}

.copy{
  grid-column:7 / 13!important;
  grid-row:1!important;
  z-index:3;
  align-self:center!important;
  padding:74px 0 54px!important;
  position:relative;
}

.copy::before,
.copy::after,
.sound-copy::after,
.dates-card::after{
  content:none!important;
  display:none!important;
}

.copy .eyebrow{
  margin-left:clamp(0px,4vw,62px)!important;
  color:var(--profile-gold-bright)!important;
  text-shadow:none!important;
}

.copy h1{
  position:relative;
  z-index:4;
  width:calc(100% + clamp(220px,25vw,430px));
  max-width:none!important;
  margin:24px 0 30px clamp(-430px,-25vw,-220px)!important;
  color:var(--profile-ink)!important;
  font-size:clamp(6.8rem,11.2vw,12.8rem)!important;
  line-height:.72!important;
  letter-spacing:-.065em!important;
  text-wrap:balance;
  text-shadow:0 24px 70px rgba(0,0,0,.7)!important;
}

.copy h1::before{
  content:"";
  position:absolute;
  right:7%;
  top:-48px;
  width:78px;
  height:52px;
  background:url("assets/brand-symbols/crown.svg") center/contain no-repeat;
  opacity:.82;
  transform:rotate(-7deg);
  pointer-events:none;
}

.copy h1::after{
  content:""!important;
  position:absolute!important;
  left:6%!important;
  right:8%!important;
  bottom:-20px!important;
  height:9px!important;
  border:0!important;
  border-radius:0!important;
  background:
    linear-gradient(178deg,transparent 37%,rgba(200,149,66,.84) 40%,rgba(200,149,66,.84) 50%,transparent 54%)!important;
  transform:rotate(-.7deg)!important;
  opacity:.88;
}

.tags{
  margin:0 0 34px clamp(0px,4vw,62px)!important;
  gap:0!important;
}

.tags span{
  position:relative;
  padding:0 17px 0 0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  color:#9c9490!important;
  font-size:.56rem!important;
  letter-spacing:.16em!important;
}

.tags span+span::before{
  content:"·";
  margin-right:17px;
  color:rgba(200,149,66,.7);
}

.artist-intro{
  max-width:560px!important;
  margin-left:clamp(0px,4vw,62px);
  padding:30px 0 0!important;
  border-top:1px solid var(--profile-line-warm)!important;
}

.artist-intro>span{
  color:var(--profile-gold)!important;
}

.artist-intro p{
  max-width:540px!important;
  color:#c8c0ba!important;
  font-size:1.02rem!important;
  line-height:1.82!important;
}

.artist-links{
  margin:30px 0 0 clamp(0px,4vw,62px)!important;
}

.artist-links a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  padding:0 14px!important;
  border:0!important;
  border-bottom:1px solid rgba(200,149,66,.38)!important;
  border-radius:0!important;
  background:none!important;
  color:#bdb5af!important;
  box-shadow:none!important;
}

.artist-links a:hover{
  color:var(--profile-gold-bright)!important;
  border-bottom-color:var(--profile-gold-bright)!important;
}

.artist-content{
  width:100%!important;
  margin:0!important;
  padding:0 0 124px!important;
  display:block!important;
  background:#030303;
}

.sound-card,
.dates-card{
  width:min(calc(100% - 54px),1520px)!important;
  margin:0 auto!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

.sound-card{
  position:relative;
  min-height:620px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)!important;
  align-items:stretch!important;
  border-top:1px solid var(--profile-line)!important;
  background:transparent!important;
}

.sound-card::before{
  content:"02";
  position:absolute;
  left:calc(50% + 24px);
  top:24px;
  z-index:3;
  color:rgba(241,236,228,.06);
  font-family:Georgia,"Times New Roman",serif;
  font-size:8rem;
  line-height:1;
  pointer-events:none;
}

.record-visual{
  min-height:620px!important;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 48%,rgba(200,149,66,.055),transparent 19rem),
    linear-gradient(145deg,#080708 0%,#020202 100%)!important;
}

.record-visual::before{
  width:min(68%,390px)!important;
  box-shadow:
    0 0 0 1px rgba(241,236,228,.05),
    0 38px 86px rgba(0,0,0,.72),
    inset 0 0 34px rgba(255,255,255,.008)!important;
}

.record-visual span{
  border-color:rgba(200,149,66,.72)!important;
  box-shadow:0 0 0 11px rgba(0,0,0,.5),0 0 24px rgba(200,149,66,.1)!important;
}

.sound-copy{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(54px,6vw,96px)!important;
  border-left:1px solid var(--profile-line)!important;
  background:
    linear-gradient(145deg,rgba(12,9,12,.92),rgba(4,4,4,.99))!important;
}

.sound-copy .eyebrow{
  color:var(--profile-gold-bright)!important;
}

.sound-copy h2{
  position:relative;
  max-width:620px;
  margin:16px 0 24px!important;
  color:var(--profile-ink)!important;
  font-size:clamp(4rem,6.3vw,7rem)!important;
  line-height:.82!important;
  letter-spacing:-.045em!important;
}

.sound-copy h2::after{
  content:"";
  position:absolute;
  right:-34px;
  top:-44px;
  width:48px;
  height:72px;
  background:url("assets/brand-symbols/bolt.svg") center/contain no-repeat;
  opacity:.78;
  transform:rotate(6deg);
  pointer-events:none;
}

.sound-copy>p:not(.eyebrow){
  max-width:560px!important;
  color:#aaa19c!important;
  line-height:1.78!important;
}

.btn{
  min-height:52px!important;
  border-radius:0!important;
}

.btn.primary{
  align-self:flex-start;
  border-color:rgba(228,180,95,.7)!important;
  background:linear-gradient(105deg,#b37c2d,#dda94f 55%,#b77f32)!important;
  color:#080707!important;
  box-shadow:0 16px 36px rgba(154,101,30,.14)!important;
}

.dates-card{
  position:relative;
  min-height:520px!important;
  padding:104px 0 118px!important;
  display:grid!important;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr)!important;
  gap:clamp(60px,8vw,150px)!important;
  border-top:1px solid var(--profile-line)!important;
  background:transparent!important;
}

.dates-card::before{
  content:"03";
  position:absolute;
  right:0;
  top:38px;
  color:rgba(241,236,228,.055);
  font-family:Georgia,"Times New Roman",serif;
  font-size:8rem;
  line-height:1;
  pointer-events:none;
}

.dates-card>div:first-child{
  align-self:start;
  padding-top:8px;
}

.dates-card .eyebrow{
  color:var(--profile-gold-bright)!important;
}

.dates-card h2{
  position:relative;
  max-width:430px;
  margin:18px 0 0!important;
  color:var(--profile-ink)!important;
  font-size:clamp(4rem,6vw,6.8rem)!important;
  line-height:.82!important;
  letter-spacing:-.045em!important;
}

.dates-card h2::after{
  content:"";
  position:absolute;
  right:-42px;
  bottom:-28px;
  width:54px;
  height:54px;
  background:url("assets/brand-symbols/spark.svg") center/contain no-repeat;
  opacity:.68;
  transform:rotate(9deg);
  pointer-events:none;
}

.dates-list{
  margin-top:0!important;
  align-self:start;
}

.date-row{
  grid-template-columns:140px minmax(0,1fr) auto!important;
  gap:22px!important;
  padding:25px 0!important;
  border-top:1px solid var(--profile-line)!important;
}

.date-row:first-child{
  border-top-color:var(--profile-line-warm)!important;
}

.date-row time{
  color:var(--profile-gold)!important;
}

.date-row strong{
  color:var(--profile-ink)!important;
  font-size:1.35rem!important;
}

.date-row a{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  border-bottom:1px solid rgba(200,149,66,.34);
}

.empty-copy{
  padding:26px 0;
  border-top:1px solid var(--profile-line-warm);
  color:var(--profile-muted)!important;
}

.footer{
  padding:32px 0 44px!important;
  border-top-color:var(--profile-line)!important;
  background:#020202!important;
}

.footer-inner{
  width:min(calc(100% - 54px),1520px)!important;
}

@media(max-width:1180px){
  .hero{
    min-height:auto;
  }

  .portrait{
    grid-column:1 / 9!important;
    min-height:680px!important;
    height:72svh;
  }

  .copy{
    grid-column:7 / 13!important;
  }

  .copy h1{
    margin-left:clamp(-340px,-24vw,-190px)!important;
    width:calc(100% + clamp(190px,24vw,340px));
    font-size:clamp(6rem,10.5vw,10rem)!important;
  }
}

@media(max-width:950px){
  .top-inner,
  .profile-nav,
  .hero,
  .sound-card,
  .dates-card,
  .footer-inner{
    width:min(calc(100% - 34px),1520px)!important;
  }

  .hero{
    display:block!important;
    min-height:auto;
    padding:18px 0 82px!important;
  }

  .hero::before{
    left:-27px;
    top:10%;
  }

  .hero::after{
    top:26px;
    font-size:8rem;
  }

  .portrait{
    min-height:68svh!important;
    height:auto;
  }

  .portrait img{
    object-position:center 24%!important;
  }

  .copy{
    margin-top:-150px!important;
    padding:84px 18px 0!important;
    background:linear-gradient(180deg,transparent 0%,#020202 34%,#020202 100%)!important;
  }

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

  .copy h1{
    width:100%;
    margin:18px 0 28px!important;
    font-size:clamp(5.2rem,18vw,8.6rem)!important;
    line-height:.76!important;
  }

  .copy h1::before{
    right:2%;
    top:-42px;
    width:66px;
  }

  .artist-intro{
    max-width:680px!important;
  }

  .sound-card{
    grid-template-columns:1fr!important;
  }

  .sound-card::before{
    left:auto;
    right:16px;
    top:18px;
    font-size:6rem;
  }

  .record-visual{
    min-height:460px!important;
  }

  .sound-copy{
    min-height:430px;
    padding:54px 38px!important;
    border-left:0!important;
    border-top:1px solid var(--profile-line)!important;
  }

  .dates-card{
    grid-template-columns:1fr!important;
    gap:54px!important;
    padding:82px 0 100px!important;
  }

  .dates-card::before{
    font-size:6rem;
  }
}

@media(max-width:640px){
  .top{
    height:62px!important;
  }

  main{
    padding-top:62px!important;
  }

  .top-inner,
  .profile-nav,
  .hero,
  .sound-card,
  .dates-card,
  .footer-inner{
    width:min(calc(100% - 24px),1520px)!important;
  }

  .logo{
    width:112px!important;
  }

  .profile-nav{
    padding-top:14px!important;
  }

  .profile-nav .back{
    min-height:38px;
    font-size:.5rem!important;
  }

  .hero{
    padding-top:10px!important;
  }

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

  .hero::after{
    right:4px;
    top:14px;
    font-size:5.5rem;
  }

  .portrait{
    min-height:560px!important;
  }

  .copy{
    margin-top:-120px!important;
    padding:66px 8px 0!important;
  }

  .copy h1{
    font-size:clamp(4.4rem,21vw,6.2rem)!important;
    letter-spacing:-.055em!important;
  }

  .copy h1::before{
    right:0;
    top:-34px;
    width:56px;
    height:40px;
  }

  .copy h1::after{
    bottom:-13px!important;
  }

  .tags span{
    font-size:.5rem!important;
  }

  .artist-intro p{
    font-size:.92rem!important;
    line-height:1.72!important;
  }

  .record-visual{
    min-height:350px!important;
  }

  .sound-copy{
    min-height:auto;
    padding:42px 22px 50px!important;
  }

  .sound-copy h2,
  .dates-card h2{
    font-size:3.35rem!important;
  }

  .sound-copy h2::after{
    right:-10px;
    top:-42px;
    width:38px;
    height:58px;
  }

  .btn.primary{
    width:100%;
  }

  .dates-card{
    gap:38px!important;
    padding:66px 0 80px!important;
  }

  .dates-card::before{
    right:4px;
    top:28px;
    font-size:5rem;
  }

  .dates-card h2::after{
    right:0;
    bottom:-42px;
    width:44px;
    height:44px;
  }

  .date-row{
    grid-template-columns:1fr!important;
    gap:9px!important;
    padding:22px 0!important;
  }

  .date-row a{
    justify-self:start;
  }
}

@media(prefers-reduced-motion:reduce){
  .portrait img,
  .profile-nav .back::after{
    transition:none!important;
  }
}