/* ------------------------------------------------------------------
   Track 02 — album cards and the B-sides tracklist.
   ------------------------------------------------------------------ */

.albums{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:26px}
@media(max-width:900px){.albums{grid-template-columns:1fr}}
.album{
  position:relative; border:1px solid var(--border); border-radius:var(--r-xl);
  background:var(--surface); padding:28px; overflow:hidden;
  transition:transform .5s var(--ease), border-color .5s var(--ease);
  display:flex; flex-direction:column;
}
.album::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .5s var(--ease);
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),var(--accent-soft),transparent 65%);
  pointer-events:none;
}
.album:hover{transform:translateY(-6px); border-color:var(--border-2)}
.album:hover::before{opacity:1}
.album-top{display:flex; align-items:flex-start; gap:16px; margin-bottom:16px}
.cover{width:58px; height:58px; flex:none; border-radius:14px; overflow:hidden; border:1px solid var(--border); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:#fff}
.cover img{width:100%; height:100%; object-fit:cover}
.album h3{font-size:1.28rem; font-weight:700}
.album .meta{font-family:var(--font-mono); font-size:.72rem; color:var(--text-3); letter-spacing:.03em; margin-top:5px}
.stars{display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--text-2); margin-top:7px}
.stars b{color:var(--text)}
.stars .s{color:#F6C445; letter-spacing:2px}
.album p{color:var(--text-2); font-size:.95rem; margin:0 0 18px; flex:1}
.shots{display:flex; gap:10px; overflow-x:auto; padding-bottom:10px; margin-bottom:18px; scrollbar-width:thin; scrollbar-color:var(--border-2) transparent}
.shots::-webkit-scrollbar{height:6px}
.shots::-webkit-scrollbar-thumb{background:var(--border-2); border-radius:99px}
.shot{flex:none; height:190px; border-radius:12px; border:1px solid var(--border); overflow:hidden; transition:transform .4s var(--ease)}
.shot:hover{transform:translateY(-4px) scale(1.03)}
.shot img{height:100%; width:auto; display:block}
.tags{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px}
.tag{font-size:.74rem; font-weight:500; padding:5px 11px; border-radius:999px; background:var(--chip); border:1px solid var(--border); color:var(--text-2)}
.pills{display:flex; flex-wrap:wrap; gap:10px; margin-top:auto}
.pill{
  display:inline-flex; align-items:center; gap:7px; font-size:.84rem; font-weight:600;
  padding:9px 16px; border-radius:999px; border:1px solid var(--border-2);
  transition:all .3s var(--ease);
}
.pill:hover{background:var(--accent); color:#17131A; border-color:var(--accent)}
html[data-theme="light"] .pill:hover{color:#fff}
.pill svg{width:14px; height:14px}

/* B-sides tracklist */
.bsides-label{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--text-3); margin:34px 0 14px}
.tracklist{border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden}
.trow{
  display:grid; grid-template-columns:56px 1.1fr 1.6fr auto; gap:16px; align-items:center;
  padding:18px 22px; border-bottom:1px solid var(--border); background:var(--surface);
  transition:background .3s var(--ease);
}
.trow:last-child{border-bottom:none}
.trow:hover{background:var(--surface-2)}
.trow .idx{font-family:var(--font-mono); font-size:.85rem; color:var(--text-3); position:relative; width:26px; text-align:center}
.trow .idx .eqi{display:none; gap:2px; align-items:flex-end; height:14px; justify-content:center}
.trow:hover .idx .num{display:none}
.trow:hover .idx .eqi{display:flex}
.eqi i{width:3px; background:var(--accent); border-radius:2px; animation:eqb 0.9s ease-in-out infinite}
.eqi i:nth-child(1){height:60%} .eqi i:nth-child(2){height:100%; animation-delay:.15s} .eqi i:nth-child(3){height:40%; animation-delay:.3s}
@keyframes eqb{50%{transform:scaleY(.4)}}
.trow h4{font-size:1rem; font-weight:700}
.trow .tmeta2{font-family:var(--font-mono); font-size:.7rem; color:var(--text-3); margin-top:3px}
.trow p{margin:0; font-size:.9rem; color:var(--text-2)}
.trow .pills{margin:0}
@media(max-width:860px){
  .trow{grid-template-columns:40px 1fr; grid-template-rows:auto auto auto; padding:16px}
  .trow p{grid-column:2} .trow .pills{grid-column:2}
}