/* ====== Minimal 90s style for YOUR LABEL NAME ====== */
:root{
  --bg:#0b0b12;        /* deep night */
  --panel:#101620;     /* panels */
  --edge:#5af0d9;      /* neon border */
  --ink:#00ffcc;       /* accent text */
  --txt:#e9fff9;       /* main text */
  --sub:#a7d6c7;       /* subtle text */
}

html,body{height:100%;}
body{
  margin:0;
  color:var(--txt);
  background: var(--bg) url("images/bg-tile.gif") repeat;
  font-family: "Verdana","Tahoma",system-ui,sans-serif;
  image-rendering: pixelated;
  text-shadow: 0 0 1px rgba(0,0,0,.3);
}

/* page frame */
.page-wrap{
  max-width: 900px;
  margin: 14px auto 40px;
  border: 3px double var(--edge);
  box-shadow: 0 0 0 3px #023b33, 0 0 20px rgba(0,255,204,.25);
  background: rgba(12,16,22,.92);
  padding: 8px;
}

/* header */
.header{
  text-align:center;
  padding: 18px 10px 6px;
  background: radial-gradient(ellipse at center, rgba(0,255,204,.12), transparent 60%);
}
.site-title{
  margin:0 0 6px;
  font-size: 42px;
  text-shadow: 0 0 8px #00e4c0, 2px 2px 0 #002620;
}
.tagline{
  margin:0;
  color:var(--sub);
}

/* blink (tasteful) */
.blink{ animation: blink 1.2s steps(2,start) infinite; }
@keyframes blink{ 50%{ opacity:.45; } }

/* panels */
.panel{
  margin: 12px 6px;
  padding: 12px;
  border: 2px solid var(--edge);
  background: var(--panel);
  box-shadow: 2px 2px 0 #002b24;
}
.panel h2{
  margin:0 0 10px;
  font-size: 20px;
  color: var(--ink);
  text-shadow: 0 0 6px #00e4c0;
}

/* keyboard key links */
.keys{
  display:flex; flex-wrap:wrap; gap:10px;
}
.keycap{
  display:inline-block;
  padding: 10px 14px;
  min-width: 110px;
  text-align:center;
  text-decoration:none;
  color:#111;
  background: linear-gradient(#fefefe,#e0e0e0);
  border: 2px solid #c0c0c0;
  border-top-color: #ffffff;
  border-left-color: #ffffff;
  box-shadow:
    inset 0 0 0 1px #a9a9a9,
    2px 2px 0 #00000055;
  font-weight: 700;
  letter-spacing:.5px;
  text-transform: uppercase;
  image-rendering: pixelated;
}
.keycap:hover{
  filter: brightness(1.06);
}
.keycap:active{
  transform: translate(2px,2px);
  box-shadow: inset 2px 2px 0 #9c9c9c;
}

/* upcoming list */
.upcoming{
  list-style: none;
  margin: 0; padding: 0;
}
.upcoming li{
  padding: 8px 10px;
  border: 1px solid var(--edge);
  background: #0b1416;
  margin-bottom: 8px;
}
.upcoming .when{
  display:inline-block; min-width: 120px;
  color: var(--ink); font-weight: bold;
}
.upcoming .note{
  color: var(--sub); font-size: 12px;
}

/* webring + buttons + counter */
.webring{ display:flex; gap:8px; flex-wrap:wrap; }
.smallbtn{
  display:inline-block; padding:6px 10px;
  background:#022a24; color:var(--ink);
  border:1px outset var(--edge); text-decoration:none; font-weight:700;
}
.smallbtn:active{ border-style: inset; }

.buttons88{ display:flex; flex-wrap:wrap; gap:6px; }
.buttons88 img{
  width:88px; height:31px; border:1px solid var(--edge); image-rendering: pixelated;
}

.counter{ font-family:"Courier New",monospace; font-weight:bold; }

/* footer */
.footer{ text-align:center; padding: 8px 10px 18px; }
.divider{
  height:2px; margin: 14px auto 10px;
  background: linear-gradient(90deg, transparent, var(--edge), transparent);
}

/* mobile tweaks */
@media (max-width: 760px){
  .keycap{ min-width: unset; }
  .upcoming .when{ min-width: 100px; }
}
blockquote {
  border-left: 3px solid var(--edge);
  padding-left: 8px;
  margin: 0;
  font-style: italic;
  color: green(--sub);
}

/* ===== Artist page release grid ===== */
.release-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.release-card{
  border:1px solid var(--edge);
  background:#0a1416;
  box-shadow: 2px 2px 0 #002b24;
  padding:8px;
}

.release-card img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  image-rendering: pixelated;
  border:1px solid var(--edge);
  display:block;
}

/* title + date */
.release-meta{
  margin-top:8px; display:flex; flex-direction:column; gap:2px;
}
.release-title{
  color: var(--txt); text-decoration:none; font-weight:700;
}
.release-title:hover{ text-decoration:underline; }
.release-date{ color: var(--sub); font-size:12px; }

/* Optional: hide empty sections if you leave a list blank */
.panel:has(.release-grid:empty){ display:none; }

/* Blockquote look you liked */
blockquote{
  border-left:3px solid var(--edge);
  padding-left:8px; margin:0;
  font-style:italic; color:var(--sub);
}

/* mobile tweaks */
@media (max-width:760px){
  .release-grid{ grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); }
}

/* ===== Release detail layout ===== */
.release-layout{
  display:grid; gap:14px;
  grid-template-columns: 1fr 1.2fr; /* cover : tracklist */
  align-items:start;
}
.release-cover img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border:1px solid var(--edge); image-rendering: pixelated; display:block;
}
.release-tracks h2{ margin-top:0; }
.tracks{
  margin: 6px 0 0; padding-left: 20px;
}
.tracks li{ margin: 4px 0; }

/* optional: slightly bigger title/date area on release pages */
.header .tagline{ margin-top:4px; }

/* keep your quoted info style */
.label-info{ border-left:3px solid var(--edge); padding-left:8px; color:var(--sub); }

/* mobile: stack cover above tracklist */
@media (max-width: 760px){
  .release-layout{ grid-template-columns: 1fr; }
}