/* MUSIC — the artwork is the layout. No photography above the
   fold at all: the page opens on a wall of her own covers. */

.mhero{
  position:relative;
  padding-block:calc(var(--nav-h) + clamp(56px,10vw,130px)) clamp(48px,7vw,104px);
  overflow:hidden;
  border-bottom:1px solid var(--ink-3);
}
.mwall{
  position:absolute; inset:0;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-auto-rows:1fr;
  gap:2px;
}
.mwall img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.15) brightness(.55);
}
.mwall::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 22% 60%, rgba(11,10,10,.97) 22%, rgba(11,10,10,.72) 52%, rgba(11,10,10,.86) 100%);
}
.mhero__copy{ position:relative; z-index:2; }
.mhero__title{
  font-variation-settings:"wdth" 62,"wght" 880;
  text-transform:uppercase;
  font-size:clamp(3.6rem,17vw,15rem);
  line-height:.78;
  letter-spacing:-.02em;
  margin:.1em 0 0;
}
.mhero__title em{ font-style:normal; color:var(--blood); }
.mhero__stats{
  display:flex; flex-wrap:wrap; gap:12px 44px;
  margin-top:clamp(24px,4vw,44px);
  padding-top:clamp(20px,3vw,32px);
  border-top:1px solid var(--ink-3);
}
.mhero__stats div strong{
  display:block;
  font-variation-settings:"wdth" 80,"wght" 800;
  font-size:clamp(1.6rem,3.6vw,2.7rem);
  line-height:1;
  color:var(--bone);
}
.mhero__stats div span{
  display:block; margin-top:7px;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ash);
}

/* ---------- featured ---------- */

.feat{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(26px,4vw,64px);
  align-items:end;
}
.feat__art{ position:relative; }
.feat__art img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.feat__art::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(239,233,227,.12);
}
.feat__title{
  font-variation-settings:"wdth" 66,"wght" 850;
  text-transform:uppercase;
  font-size:clamp(2.4rem,6.4vw,5.4rem);
  line-height:.84;
  margin:.14em 0 0;
}
.feat__tracks{
  list-style:none; margin:26px 0 0; padding:0;
  counter-reset:t;
}
.feat__tracks li{
  counter-increment:t;
  display:flex; gap:16px; align-items:baseline;
  border-top:1px solid var(--ink-3);
  padding-block:11px;
  font-size:.98rem;
  color:#C9C1BA;
}
.feat__tracks li:last-child{ border-bottom:1px solid var(--ink-3); }
.feat__tracks li::before{
  content:counter(t,decimal-leading-zero);
  font-size:.7rem; letter-spacing:.1em; color:var(--blood);
  font-variant-numeric:tabular-nums;
  min-width:2ch;
}

/* ---------- filter ---------- */

.filter{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:clamp(26px,4vw,40px);
}
.filter button{
  background:transparent;
  border:1px solid var(--ink-3);
  color:var(--ash);
  padding:.62em 1.2em;
  font-family:inherit;
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  font-variation-settings:"wdth" 100,"wght" 650;
  cursor:pointer;
  transition:color .25s ease,border-color .25s ease,background .25s ease;
}
.filter button:hover{ color:var(--bone); border-color:var(--ash-2); }
.filter button[aria-pressed="true"]{
  background:var(--bone); border-color:var(--bone); color:var(--ink);
}

/* ---------- discography ---------- */

.disc{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(22px,3.2vw,52px) clamp(16px,2.4vw,34px);
  margin-top:clamp(30px,4vw,56px);
  align-items:start;
}
.rel-card{ position:relative; }
.rel-card--ep{ grid-column:span 2; }
.disc .rel-card:nth-child(4n+3){ margin-top:clamp(0px,3vw,52px); }

.rel-card__art{
  display:block; position:relative; overflow:hidden;
  background:var(--ink-2);
}
.rel-card__art img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  transition:transform .7s cubic-bezier(.16,1,.3,1), filter .5s ease;
}
.rel-card__art::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(239,233,227,.1);
  pointer-events:none;
}
.rel-card__art:hover img,.rel-card__art:focus-visible img{ transform:scale(1.05); }

.rel-card__year{
  position:absolute; top:0; left:0;
  background:var(--ink);
  color:var(--bone);
  padding:7px 11px;
  font-size:.66rem; letter-spacing:.18em;
  font-variation-settings:"wdth" 100,"wght" 700;
  font-variant-numeric:tabular-nums;
}
.rel-card--ep .rel-card__year{ background:var(--blood); color:#fff; }

.rel-card__name{
  margin:16px 0 0;
  font-variation-settings:"wdth" 74,"wght" 780;
  text-transform:uppercase;
  font-size:clamp(1.05rem,2vw,1.7rem);
  line-height:1.02;
}
.rel-card--ep .rel-card__name{ font-size:clamp(1.5rem,3.2vw,2.8rem); }
.rel-card__name a{ text-decoration:none; }
.rel-card__name a:hover{ color:var(--ember); }
.rel-card__meta{ margin:9px 0 0; }
.rel-card__links{ margin:12px 0 0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.76rem; letter-spacing:.08em; }
.rel-card__links a{ color:var(--ash); }
.rel-card__links a:hover{ color:var(--ember); }

/* ---------- platform list ---------- */

.plat{ border-top:1px solid var(--ink-3); }
.platlist{ list-style:none; margin:0; padding:0; }
.platlist li{ border-bottom:1px solid var(--ink-3); }
.platlist a{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding-block:clamp(16px,2.2vw,24px);
  text-decoration:none;
  font-variation-settings:"wdth" 70,"wght" 800;
  text-transform:uppercase;
  font-size:clamp(1.7rem,5.6vw,4.2rem);
  line-height:1;
  transition:color .3s ease,padding-left .35s ease;
}
.platlist a:hover{ color:var(--blood); padding-left:14px; }
.platlist span{
  font-variation-settings:"wdth" 100,"wght" 500;
  font-size:.74rem; letter-spacing:.16em; color:var(--ash);
  text-transform:none; white-space:nowrap;
}

@media (max-width:1000px){
  .feat{ grid-template-columns:1fr; align-items:start; }
  .feat__art{ max-width:520px; }
  .disc{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rel-card--ep{ grid-column:span 2; }
  .disc .rel-card:nth-child(4n+3){ margin-top:0; }
  .mwall{ grid-template-columns:repeat(5,1fr); }
}
@media (max-width:620px){
  .disc{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 14px; }
  .rel-card--ep{ grid-column:span 2; }
  .mwall{ grid-template-columns:repeat(4,1fr); }
  .platlist a{ flex-direction:column; gap:6px; }
}