:root { --archive-bg:#080808; --archive-muted:rgba(255,255,255,.46); --archive-border:rgba(255,255,255,.11); }
body { background:var(--archive-bg); }
.artist-page { width:min(1440px,100%); min-height:calc(100vh - 82px); margin:0 auto; padding:34px clamp(20px,4.5vw,68px) 60px; animation:archiveFadeIn .8s ease both; }
.back-link { display:inline-block; margin-bottom:24px; color:var(--archive-muted); text-decoration:none; font-size:.76rem; transition:color .2s ease; }
.back-link:hover { color:#fff; }
.artist-hero { display:flex; align-items:center; gap:clamp(20px,4vw,48px); min-height:300px; padding:clamp(22px,4vw,48px); border:1px solid var(--archive-border); border-radius:7px; background:linear-gradient(115deg,#151515,#0b0b0b 55%,#151515); }
.artist-cover { flex:0 0 clamp(130px,22vw,240px); width:clamp(130px,22vw,240px); aspect-ratio:1; display:grid; place-items:center; overflow:hidden; border-radius:5px; background:linear-gradient(145deg,#242424,#101010); color:rgba(255,255,255,.8); font-size:3rem; }
.artist-cover img { width:100%; height:100%; object-fit:cover; }
.artist-copy { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.artist-kicker { margin-left:6px; color:var(--archive-muted); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; }
.artist-title { margin-top:12px; color:#fff; font-size:clamp(2.8rem,7vw,6rem); font-weight:400; line-height:1; letter-spacing:-.075em; }
.tracks-section { margin-top:42px; }
.tracks-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; padding-bottom:17px; border-bottom:1px solid var(--archive-border); }
.tracks-head { color:rgba(255,255,255,.88); font-size:.82rem; font-weight:400; letter-spacing:.08em; }
.track-search { display:flex; align-items:center; gap:8px; width:min(240px,100%); }
.track-search-icon { flex:0 0 auto; width:14px; height:14px; color:rgba(255,255,255,.38); }
.track-search input { width:100%; padding:5px 0; color:#fff; background:transparent; border:0; border-bottom:1px solid transparent; border-radius:0; font:400 .76rem Inter,sans-serif; letter-spacing:.04em; appearance:none; }
.track-search input::placeholder { color:rgba(255,255,255,.3); }
.track-search input:focus { outline:none; border-bottom-color:rgba(255,255,255,.42); }
.track-search input::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; }
.track-row { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:12px; padding:15px 12px; border-radius:5px; transition:background .2s ease; }
.track-row:hover { background:rgba(255,255,255,.045); }
.track-number { color:var(--archive-muted); font-size:.75rem; }
.track-title { display:flex; align-items:center; gap:8px; min-width:0; color:#f5f5f5; font-size:.86rem; }
.rare-tag { flex:0 0 auto; padding:2px 7px; border:1px solid transparent; border-radius:99px; background:linear-gradient(#111,#111) padding-box, linear-gradient(120deg,#ff4d6d,#ffd166,#7bdff2,#b388ff,#ff4d6d) border-box; background-size:100% 100%, 200% 200%; color:#fff; font-size:.58rem; letter-spacing:.12em; animation:rareShift 4s linear infinite; }
.track-row.is-rare { background:linear-gradient(90deg, rgba(255,77,109,.08), rgba(123,223,242,.05) 42%, transparent); }
.track-row.is-rare.rare-run-start { border-radius:5px 5px 0 0; }
.track-row.is-rare.rare-run-middle { border-radius:0; }
.track-row.is-rare.rare-run-end { border-radius:0 0 5px 5px; }
.track-row.is-current { background:rgba(255,255,255,.06); }
.track-row.is-rare.is-current { background:linear-gradient(90deg, rgba(255,77,109,.16), rgba(123,223,242,.1) 42%, rgba(255,255,255,.05)); }
.track-row.is-current .track-number { color:rgba(255,255,255,.8); }
.track-row.is-current .play-btn { border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.14); }
.track-row.is-playing .play-btn { color:#080808; background:rgba(255,255,255,.9); border-color:transparent; }
.track-actions { display:flex; align-items:center; gap:6px; }
.track-heart { display:grid; place-items:center; width:30px; height:30px; padding:0; color:rgba(255,255,255,.3); background:transparent; border:0; border-radius:50%; cursor:pointer; transition:color .2s ease, background .2s ease, transform .2s ease; }
.track-heart:hover { color:#fff; background:rgba(255,255,255,.08); }
.track-heart:active { transform:scale(.9); }
.track-heart:disabled { opacity:.5; cursor:default; }
.track-heart svg { width:15px; height:15px; }
.track-heart.is-active { color:#ff7a92; }
.track-heart.is-active:hover { color:#ff9cad; }
.track-category { display:flex; align-items:center; gap:12px; margin:22px 12px 6px; color:rgba(255,255,255,.55); font-size:.68rem; font-weight:400; letter-spacing:.14em; text-transform:uppercase; }
.track-category::after { content:""; flex:1 1 auto; height:1px; background:var(--archive-border); }
.track-row[hidden], .track-category[hidden] { display:none; }
@keyframes rareShift { to { background-position:0 0, 200% 0; } }
.track-release { margin-top:5px; color:var(--archive-muted); font-size:.7rem; }
.artist-footer { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-top:70px; padding-top:20px; border-top:1px solid var(--archive-border); color:rgba(255,255,255,.35); font-size:.62rem; letter-spacing:.08em; }
.artist-footer .site-credits { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.artist-footer .site-credit { color:rgba(255,255,255,.28); }
.artist-footer .site-copy { margin-left:auto; white-space:nowrap; }
.empty-state { padding:20px 12px; color:var(--archive-muted); font-size:.8rem; }
@keyframes archiveFadeIn { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:520px) { .artist-page{padding:22px 14px 40px}.artist-hero{min-height:230px;gap:16px;padding:18px}.artist-cover{flex-basis:110px;width:110px}.artist-title{font-size:clamp(2.2rem,10vw,3.4rem)}.tracks-toolbar{flex-wrap:wrap;gap:10px}.artist-footer{margin-top:48px} }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after{animation:none!important;transition:none!important} .fetch-dots i{animation:fetchJump .9s ease-in-out infinite!important} .rare-tag{animation:rareShift 4s linear infinite!important} }