.music-page{
  min-height:100svh;
  background:#070707;
  color:#f5f5f5;
  overflow-x:hidden;
}
.music-page::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:clamp(2.5rem,5vw,5.5rem) clamp(2.5rem,5vw,5.5rem);
  mask-image:linear-gradient(to bottom,black,transparent 82%);
}
.music-noise{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:4;background-image:url('../assets/el/star-a.png');background-size:42rem auto;background-repeat:no-repeat;background-position:92% 4%;filter:invert(1)}
.music-nav{position:relative;z-index:5;display:flex;align-items:center;gap:1.2rem;padding:1.2rem var(--gutter);border-bottom:1px solid rgba(255,255,255,.16)}
.music-mark{font-family:var(--f-vcr);font-size:1.4rem;letter-spacing:.08em}
.music-mark span{color:#fff}
.music-nav__label{margin:0;opacity:.45;font-family:var(--f-vcr);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.music-back{margin-left:auto;font-family:var(--f-vcr);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;opacity:.72}
.music-back span{display:inline-block;margin-left:.35rem;color:#fff;transition:transform .3s var(--ease)}
.music-back:hover span{transform:translate(3px,-3px)}
.music-hero,.music-player,.music-list{position:relative;z-index:2;width:min(1280px,calc(100% - 2 * var(--gutter)));margin-inline:auto}
.music-hero{min-height:min(650px,72svh);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2rem,8vw,8rem);padding:clamp(4rem,10vh,8rem) 0}
.music-hero__ipod-wrap{display:flex;flex-direction:column;align-items:center}
.ipod--hero{width:min(100%,17rem);transform:rotate(-5deg)}
.ipod--hero .ipod__screen{height:11.5rem}
.ipod__hero-track{padding:.42rem .55rem;border-bottom:1px solid rgba(62,73,61,.28);font-family:var(--f-vcr);font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ipod__hero-track:first-of-type{background:#3e493d;color:#e4ebdc}
.music-kicker{display:flex;align-items:center;gap:.6rem;margin:0 0 1.8rem;font-family:var(--f-vcr);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;opacity:.62}
.music-kicker span{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 14px rgba(255,255,255,.7)}
.music-hero h1{max-width:8ch;margin:0;font-size:clamp(4rem,9vw,8.4rem);font-weight:400;line-height:.82;letter-spacing:-.04em}
.music-hero h1 em{color:#fff;font-style:italic}
.music-intro{max-width:30rem;margin:2rem 0 0;font-size:1rem;line-height:1.6;color:rgba(255,255,255,.64)}
.music-hero__art{position:relative;display:grid;place-items:center;min-height:26rem}
.music-hero__art::before{content:'';position:absolute;width:74%;aspect-ratio:1;border:1px solid rgba(255,255,255,.2);transform:rotate(12deg)}
.music-hero__art::after{content:'FAVOURITES / 001';position:absolute;right:1%;bottom:5%;font-family:var(--f-vcr);font-size:.62rem;letter-spacing:.09em;color:rgba(255,255,255,.42);transform:rotate(-90deg);transform-origin:right bottom}
.vinyl--hero{width:min(100%,25rem);transform:rotate(-7deg);animation:music-drift 8s ease-in-out infinite alternate}
.vinyl--hero .vinyl__disc{animation-play-state:running}
.vinyl--hero .vinyl__cover{background-image:url('../assets/audio/covers/Janice STFU.webp')}
.music-hero__code{position:absolute;top:11%;left:5%;font-family:var(--f-vcr);font-size:.62rem;letter-spacing:.1em;color:rgba(255,255,255,.4)}
@keyframes music-drift{to{transform:rotate(-7deg) translateY(-12px)}}
.music-player{padding:2rem 2.2rem 2.2rem;position:relative}
.music-player__top,.music-player__body{display:flex;align-items:center}
.music-player__top{justify-content:space-between}
.music-player__top .music-kicker{margin:0}
.music-player__count{margin:0;font-family:var(--f-vcr);font-size:.7rem;opacity:.5}
.music-player__body{display:grid;grid-template-columns:20rem 15rem minmax(24rem,1fr);column-gap:clamp(2rem,5vw,5rem);margin-top:2.4rem;min-height:31rem;align-items:center}
.ipod{width:min(100%,18rem);padding:1.1rem 1rem 1.5rem;border:1px solid #b7b7b7;border-radius:1.1rem;background:linear-gradient(145deg,#f4f4f4,#a8a8a8 55%,#6f6f6f);box-shadow:inset 0 0 0 2px rgba(255,255,255,.42),12px 16px 25px rgba(0,0,0,.35);color:#151515;transform:rotate(-2deg);justify-self:start}
.ipod__screen{height:10.4rem;overflow:hidden;border:4px solid #242424;border-radius:.25rem;background:#b9c0b1;box-shadow:inset 0 0 0 2px #687064;font-family:var(--f-vcr);font-size:.62rem}
.ipod__bar{display:flex;justify-content:space-between;padding:.45rem .55rem;border-bottom:2px solid #4b5149;background:#d9ded2;font-weight:700;text-transform:uppercase}
.ipod__batt{width:1.1rem;height:.5rem;margin-top:.1rem;border:1px solid #343a33;border-radius:1px;position:relative}
.ipod__batt::after{content:'';position:absolute;inset:1px 2px 1px 1px;background:#343a33}
.ipod__list{list-style:none;margin:0;padding:.35rem 0;max-height:8.5rem;overflow:auto;scrollbar-width:none}
.ipod__list::-webkit-scrollbar{display:none}
.ipod__item{padding:.3rem .55rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.ipod__item::before{content:'›';display:inline-block;width:.7rem;visibility:hidden}
.ipod__item.is-current{background:#3e493d;color:#e4ebdc}
.ipod__item.is-current::before{visibility:visible}
.ipod__wheel{position:relative;left:50%;display:block;width:10.5rem;aspect-ratio:1;margin:1.6rem 0 0;transform:translateX(-50%);border:0;border-radius:50%;background:#d8d8d8;box-shadow:inset 0 2px 4px rgba(0,0,0,.3),0 2px 3px rgba(255,255,255,.35);color:#545454;cursor:pointer}
.ipod__center{position:absolute;inset:34%;border-radius:50%;background:#aaa;box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
.ipod__btn{position:absolute;z-index:1;font-family:var(--f-vcr);font-size:.48rem;text-transform:uppercase;line-height:1}
.ipod__btn--top{top:13%;left:50%;transform:translateX(-50%)}
.ipod__btn--right{right:11%;top:50%;transform:translateY(-50%)}
.ipod__btn--bottom{bottom:12%;left:50%;transform:translateX(-50%)}
.ipod__btn--left{left:10%;top:50%;transform:translateY(-50%)}
.vinyl{position:relative;display:grid;place-items:center;width:100%;max-width:29rem;min-width:0;aspect-ratio:1;justify-self:end;grid-column:3}
.vinyl__disc{position:relative;width:88%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#060606;border:7px solid #1a1a1a;box-shadow:0 1.2rem 2rem rgba(0,0,0,.45);cursor:pointer;animation:vinyl-spin 4s linear infinite;animation-play-state:paused}
.is-playing .vinyl__disc{animation-play-state:running}
.vinyl__cover{position:absolute;inset:0;background:center/cover no-repeat;opacity:.86}
.vinyl__grooves{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,transparent 20%,rgba(0,0,0,.5) 21%,transparent 22%,transparent 35%,rgba(0,0,0,.55) 36%,transparent 37%,transparent 50%,rgba(0,0,0,.38) 51%,transparent 52%,transparent 65%,rgba(0,0,0,.55) 66%,transparent 67%,transparent 80%,rgba(0,0,0,.4) 81%,transparent 82%)}
.vinyl__glare{position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 40%,transparent 65%,rgba(255,255,255,.16))}
.vinyl__label{position:absolute;inset:35%;display:grid;place-items:center;border-radius:50%;background:#191919;border:1px solid #555;box-shadow:inset 0 0 0 3px #090909}
.vinyl__hole{width:20%;aspect-ratio:1;border-radius:50%;background:#d0d0d0;box-shadow:inset 0 0 0 2px #111}
.vinyl__tonearm{position:absolute;right:0;top:1%;width:46%;height:16%;transform-origin:92% 15%;transform:rotate(12deg);transition:transform .5s var(--ease);pointer-events:none}
.vinyl__tonearm.is-playing{transform:rotate(-19deg)}
.vinyl__tonearm-base{position:absolute;right:0;top:0;width:2.3rem;aspect-ratio:1;border-radius:50%;background:#999;border:4px solid #ddd;box-shadow:0 2px 4px #000}
.vinyl__tonearm-stick{position:absolute;right:1.3rem;top:.75rem;width:84%;height:.45rem;border-radius:1rem;background:#aaa;transform:rotate(-12deg);transform-origin:right center}
.vinyl__tonearm-needle{width:.75rem;aspect-ratio:1;border-radius:50%;background:#222;transform:translateX(-50%)}
@keyframes vinyl-spin{to{transform:rotate(360deg)}}
.vinyl-now{align-self:center;min-width:0;grid-column:2;grid-row:1}
.music-play{flex:0 0 auto;min-width:4.8rem;padding:.75rem 1rem;border:1px solid rgba(255,255,255,.48);background:#f5f5f5;color:#080808;font:inherit;font-family:var(--f-vcr);font-size:.7rem;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s,transform .3s var(--ease)}
.music-play:hover{background:#fff;transform:translateY(-2px)}
.music-current{min-width:11rem}
.music-current__cover{width:3.2rem;height:3.2rem;object-fit:cover;border:1px solid rgba(255,255,255,.35);filter:none;flex:0 0 auto}
.music-current p{margin:0}
.music-current__title{font-size:1.15rem}
.music-current__meta{margin-top:.2rem!important;font-family:var(--f-vcr);font-size:.62rem;letter-spacing:.06em;opacity:.45;text-transform:uppercase}
.music-player__controls{display:grid;grid-template-columns:20rem 15rem minmax(24rem,1fr);column-gap:clamp(2rem,5vw,5rem);align-items:center;margin-top:.8rem}
.music-wave{grid-column:1 / -1;display:flex;align-items:center;justify-self:center;gap:3px;height:2rem;opacity:.65}
.music-wave i{display:block;width:2px;height:20%;background:#fff;transition:height .25s}
.music-wave i:nth-child(2n){height:55%}.music-wave i:nth-child(3n){height:82%}.music-wave i:nth-child(5n){height:36%}
.is-playing .music-wave i{animation:music-wave .8s ease-in-out infinite alternate}.is-playing .music-wave i:nth-child(2n){animation-delay:.1s}.is-playing .music-wave i:nth-child(3n){animation-delay:.2s}
@keyframes music-wave{to{height:100%}}
.music-progress{grid-column:1 / -1;display:block;width:100%;height:2px;margin-top:1rem;accent-color:#fff;cursor:pointer}
.music-list{display:grid;grid-template-columns:minmax(12rem,.6fr) 1.4fr;gap:clamp(2rem,7vw,7rem);padding:clamp(5rem,12vh,10rem) 0 7rem}
.music-list__header h2{margin:0;font-size:clamp(2rem,4vw,3.6rem);font-weight:400;line-height:1}
.music-list__header>p:last-child{max-width:14rem;margin-top:1.2rem;color:rgba(255,255,255,.45);font-size:.85rem;line-height:1.5}
.track-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.2)}
.track-row{display:grid;grid-template-columns:3rem 3.2rem 1fr auto 3rem;align-items:center;gap:.85rem;width:100%;padding:1.1rem 0;border:0;border-bottom:1px solid rgba(255,255,255,.16);background:none;color:inherit;text-align:left;cursor:pointer;font:inherit}
.track-row__cover{width:3.2rem;height:3.2rem;object-fit:cover;filter:none;border:1px solid rgba(255,255,255,.2)}
.track-row:hover .track-row__name,.track-row:focus-visible .track-row__name{color:#fff;text-decoration:underline;text-underline-offset:.25em}
.track-row__number,.track-row__meta,.track-row__action{font-family:var(--f-vcr);font-size:.66rem;letter-spacing:.05em;opacity:.46}
.track-row__name{font-size:1rem;transition:color .25s}
.track-row__action{text-align:right;opacity:.7;text-transform:uppercase}
.track-row.is-current .track-row__number,.track-row.is-current .track-row__action{color:#fff;opacity:1}
@media (max-width:1100px) and (min-width:701px){
  .music-player{padding-inline:1.4rem}
  .music-player__body,.music-player__controls{grid-template-columns:15rem 9rem minmax(18rem,1fr);column-gap:1.5rem}
  .ipod{width:min(100%,14rem)}
  .ipod__wheel{width:8.5rem}
  .vinyl{width:100%;max-width:23rem}
}
@media (max-width:700px){
  .music-nav__label{display:none}
  .music-hero{grid-template-columns:1fr;min-height:0;padding:5rem 0 4rem;gap:3rem}
  .music-hero h1{font-size:clamp(4rem,18vw,7rem)}
  .music-hero__art{min-height:19rem;order:-1}
  .vinyl--hero{width:min(85vw,22rem)}
  .music-hero__ipod-wrap{order:1}
  .music-player{padding:1.4rem 1rem 1.6rem}
  .music-player__body{grid-template-columns:1fr;gap:2.5rem;min-height:0;justify-items:center}
  .ipod{order:1}
  .vinyl{order:2;width:min(85vw,22rem);grid-column:auto}
  .vinyl-now{order:3;align-self:auto;padding:0;text-align:center;grid-column:auto;grid-row:auto}
  .music-player__controls{grid-template-columns:1fr;row-gap:.5rem;margin-top:1rem}
  .music-wave{width:100%;margin:0}
  .music-progress{grid-column:1;width:100%;margin-top:.5rem}
  .music-list{grid-template-columns:1fr;gap:2.4rem;padding-top:5rem}
  .track-row{grid-template-columns:2.2rem 2.8rem 1fr 3rem;gap:.65rem}
  .track-row__cover{width:2.8rem;height:2.8rem}
  .track-row__meta{display:none}
}