:root{
  --bone:#EDE6DA; --moss:#3F4F32; --moss-lt:#7C8F62; --mag:#FF2D95; --black:#08090A;
  --panel:#101210; --line:#242821;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--black);color:var(--bone);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
body{padding-bottom:110px}
a{color:var(--bone)}
h1,h2{font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;letter-spacing:-.02em;text-transform:uppercase;margin:0}

/* hero */
.hero{position:relative;min-height:62vh;display:flex;align-items:flex-end;overflow:hidden}
.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  filter:saturate(.95) contrast(1.05);opacity:.85}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,10,.15) 0%,rgba(8,9,10,.55) 55%,var(--black) 100%)}
.hero-inner{position:relative;z-index:2;padding:clamp(20px,5vw,64px);width:100%}
.hero h1{font-size:clamp(48px,11vw,150px);line-height:.9;color:var(--bone)}
.hero .tag{margin:14px 0 0;color:var(--moss-lt);letter-spacing:.28em;text-transform:uppercase;font-size:clamp(9px,1.1vw,12px)}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.badges span{border:1px solid var(--line);color:var(--bone);padding:6px 12px;border-radius:999px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;background:rgba(16,18,16,.55)}

/* sections */
main{padding:clamp(20px,5vw,64px);max-width:1400px;margin:0 auto}
section{margin-bottom:56px}
section h2{font-size:clamp(20px,3vw,34px);color:var(--moss-lt);margin-bottom:20px}

/* album grid */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.card{position:relative;border:1px solid var(--line);background:var(--panel);border-radius:6px;overflow:hidden;
  cursor:pointer;transition:transform .15s ease,border-color .15s ease}
.card:hover{transform:translateY(-3px);border-color:var(--moss-lt)}
.card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.card .cap{padding:10px 12px}
.card .cap b{display:block;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.card .cap i{font-style:normal;color:var(--moss-lt);font-size:11px;letter-spacing:.12em}
.card.active{border-color:var(--mag);box-shadow:0 0 0 1px var(--mag) inset}

/* tracklist */
.tracklist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.track{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;
  padding:12px 8px;border-bottom:1px solid var(--line);cursor:pointer}
.track:hover{background:#0e100e}
.track .n{color:var(--moss-lt);font-variant-numeric:tabular-nums;font-size:12px}
.track b{font-weight:600;font-size:15px}
.track i{display:block;font-style:normal;color:var(--moss-lt);font-size:11px;letter-spacing:.1em;margin-top:2px}
.track .pl{color:var(--moss-lt);font-size:12px}
.track.active{background:#12140f}
.track.active b{color:var(--mag)}

/* player */
.player-bar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:rgba(10,11,10,.96);
  border-top:1px solid var(--line);backdrop-filter:blur(8px);
  display:grid;grid-template-columns:minmax(160px,1.2fr) auto minmax(120px,1fr) auto;gap:14px;
  align-items:center;padding:12px clamp(12px,3vw,28px)}
.player-bar .np b{display:block;font-size:13px}
.player-bar .np span{color:var(--moss-lt);font-size:11px}
.ctrls{display:flex;gap:6px}
.ctrls button{background:#141614;color:var(--bone);border:1px solid var(--line);border-radius:4px;
  padding:8px 12px;font-size:13px;cursor:pointer}
.ctrls button:hover{border-color:var(--moss-lt)}
.ctrls #play{min-width:56px}
.seek input{width:100%}
input[type=range]{-webkit-appearance:none;height:3px;background:var(--moss);border-radius:2px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:var(--mag);cursor:pointer}
.time{color:var(--moss-lt);font-size:11px;font-variant-numeric:tabular-nums}
footer{padding:0 clamp(20px,5vw,64px) 40px;color:#5c6553;font-size:11px;letter-spacing:.08em}
@media(max-width:720px){
  .player-bar{grid-template-columns:1fr auto;grid-template-areas:"np ctrls" "seek seek" "time time";gap:8px}
  .player-bar .np{grid-area:np}.ctrls{grid-area:ctrls}.seek{grid-area:seek}.time{grid-area:time}
}