/* ETERNAL CLIQUE · the plain pages (About, Discography, releases, Members). Same colours as the desktop. */
:root{--bg:#0a0710;--pan:#17111f;--hi:#6a5a8c;--g:#39ff6a;--r:#b0334a;--p:#7a4fb0;--tx:#d0c9dd;--mut:#a79fbb;--line:#2e2440}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--tx);font:15px/1.6 Tahoma,Verdana,"Segoe UI",sans-serif;
 background:radial-gradient(ellipse at 25% 15%,#2b1239,transparent 55%) fixed,radial-gradient(ellipse at 85% 95%,#3a0d1a,transparent 50%) fixed,var(--bg)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9;background:repeating-linear-gradient(0deg,#0000 0 2px,#00000024 2px 3px)}
a{color:var(--g);text-underline-offset:3px}
a:hover{text-shadow:0 0 8px #39ff6a88}
:focus-visible{outline:1px dotted var(--g);outline-offset:2px}
img{max-width:100%;height:auto}

/* top bar */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:8px 16px;
 background:linear-gradient(#4a3470,#241838 50%,#33224f);border-bottom:2px solid #000;box-shadow:0 2px 0 #6a5a8c55}
.top .home{display:flex;align-items:center;gap:10px;margin-right:auto;color:#fff;text-decoration:none;font:11px/1.4 "Press Start 2P",monospace}
.top .home img{width:30px;height:30px}
.top nav{display:flex;flex-wrap:wrap;gap:4px}
.top nav a{padding:5px 10px;border:2px solid transparent;color:#e6e0f2;text-decoration:none;font:700 13px Tahoma,Verdana,sans-serif}
.top nav a:hover{color:var(--g)}
.top nav a[aria-current]{border-color:#8672ab #07040b #07040b #8672ab;background:#2a2038;color:var(--g)}

/* buttons, like the desktop's */
.btn{display:inline-block;padding:7px 14px;font:700 13px Tahoma,Verdana,sans-serif;color:#e6e0f2;text-decoration:none;background:#2a2038;
 border:2px solid;border-color:#8672ab #07040b #07040b #8672ab}
.btn:hover{color:var(--g);box-shadow:0 0 8px #39ff6a66;text-shadow:none}
.btn:active{border-color:#07040b #8672ab #8672ab #07040b}
.btn.go{color:#fff;background:linear-gradient(#5fd35f,#2d9c2d 50%,#1d7a1d);border-color:#b9f0b9 #0b3d0b #0b3d0b #b9f0b9;text-shadow:0 1px 1px #0006}
.btn.go:hover{color:#fff;box-shadow:0 0 10px #39ff6a88}
.top .btn.go{padding:5px 12px;font-size:12px}

/* the window */
main{max-width:940px;margin:28px auto 34px;padding:0 14px}
.win{background:var(--pan);border:2px solid;border-color:var(--hi) #000 #000 var(--hi);box-shadow:5px 7px 0 #0009,0 0 22px #7a4fb022}
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 4px 4px 10px;font:700 13px Tahoma,Verdana,sans-serif;color:#d8d0ea;
 background:linear-gradient(#4a3470,#241838 50%,#33224f)}
.bar .ctl{flex:none}
.bar .ctl b{display:inline-grid;place-items:center;width:20px;height:17px;margin-left:3px;font:700 11px/1 Tahoma,sans-serif;color:#e6e0f2;background:#2a2038;
 border:2px solid;border-color:#8672ab #07040b #07040b #8672ab}
.body{padding:20px 24px 26px}
.prompt{margin:0 0 12px;font:21px/1.2 VT323,monospace;color:var(--g);word-break:break-word}
h1{margin:0 0 4px;font:17px/1.5 "Press Start 2P",monospace;color:#fff;text-shadow:2px 0 var(--r),-2px 0 #39ff6a66;overflow-wrap:anywhere}
.sub{margin:0 0 12px;font:20px/1.2 VT323,monospace;color:var(--mut)}
h2{margin:30px 0 12px;font:12px/1.5 "Press Start 2P",monospace;color:#fff}
.lead{margin:12px 0 20px;font-size:16px;color:#ece6f6;max-width:62ch}
p{max-width:68ch}
table.facts{border-collapse:collapse;margin:6px 0 16px;font-size:14px}
table.facts td{padding:5px 18px 5px 0;border-bottom:1px dotted #3a2f4f;vertical-align:top}
table.facts td:first-child{color:var(--mut);font:19px/1.1 VT323,monospace;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
table.facts .on{color:var(--g)}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}

/* discography */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.card{display:block;padding:10px;color:var(--tx);text-decoration:none;background:#120d19;border:1px solid var(--line)}
.card:hover{border-color:var(--g);text-shadow:none}
.card img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.card h3{margin:10px 0 3px;font:11px/1.5 "Press Start 2P",monospace;color:#fff}
.card p{margin:0;font-size:13px;color:var(--mut)}

/* one release */
.rel{display:grid;grid-template-columns:260px 1fr;gap:26px;align-items:start}
.rel .cover{display:block;width:100%;border:2px solid;border-color:var(--hi) #000 #000 var(--hi);aspect-ratio:1;object-fit:cover}
ul.more{list-style:none;margin:0;padding:0;columns:2 240px;column-gap:24px}
ul.more li{padding:4px 0;break-inside:avoid}
ul.more span{color:var(--mut);font-size:13px}

/* members */
.crew{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.mem{padding:12px 8px 14px;text-align:center;background:#120d19;border:1px solid var(--line)}
.mem img{display:block;width:120px;height:120px;margin:0 auto;image-rendering:pixelated}
.mem h3{margin:8px 0 4px;font:10px/1.5 "Press Start 2P",monospace;color:#fff;overflow-wrap:anywhere}
.badge{display:inline-block;margin:0 0 6px;padding:0 6px;font:17px/1.2 VT323,monospace;color:#120d19;background:#f5a03a}
.mem a{display:block;font-size:13px;overflow-wrap:anywhere}

footer{max-width:940px;margin:0 auto;padding:0 14px 40px;color:var(--mut);font-size:13px;text-align:center}
footer .socs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-bottom:10px}
footer p{margin:0 auto}

@media (max-width:640px){
 .top{padding:8px 12px}
 .top .btn.go{display:none}
 main{margin-top:18px}
 .body{padding:16px 16px 22px}
 h1{font-size:14px}
 .rel{grid-template-columns:1fr}
 .rel .cover{max-width:320px}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .crew{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* tracklists (releases and members) */
.tl{overflow-x:auto;margin:6px 0 4px}
table.tracks{width:100%;border-collapse:collapse;font-size:14px}
table.tracks th{padding:4px 12px 6px 0;text-align:left;font:18px/1.1 VT323,monospace;color:var(--mut);letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--line);white-space:nowrap}
table.tracks td{padding:7px 12px 7px 0;border-bottom:1px dotted #3a2f4f;vertical-align:top}
table.tracks td.n,table.tracks td.len{font:18px/1.15 VT323,monospace;color:var(--mut);white-space:nowrap}
table.tracks .len{text-align:right;padding-right:0}
table.tracks td.t{color:#fff;font-weight:700}
table.tracks td.who a{white-space:nowrap}

/* member pages and cards */
.rel .px{image-rendering:pixelated;background:#120d19}
.mem .pic{display:block}
.mem h3 a{display:inline;color:#fff;text-decoration:none;font-size:inherit}
.mem h3 a:hover{color:var(--g)}
.mem .cnt{margin:0 0 4px;font:17px/1.1 VT323,monospace;color:var(--mut)}
.guests{display:flex;flex-wrap:wrap;gap:6px 22px;margin:8px 0 0;padding:0;list-style:none}
.guests span{color:var(--mut);font-size:13px}

@media (max-width:640px){
 table.tracks.by-member .len{display:none}
 table.tracks td.who a{white-space:normal}
}

/* SoundCloud profile pictures (the pixel character comes back if a picture fails to load) */
.mem img.photo{image-rendering:auto;object-fit:cover;box-sizing:border-box;border:2px solid;border-color:var(--hi) #000 #000 var(--hi);background:#120d19}
.mem img.photo.px{image-rendering:pixelated;border:0}