/* GREMLIN — 90s-MTV graphic boxes, halftone dots, marquee headline
   Palette: chartreuse #a3ff00 + hot pink #ff2db8 + saturated orange #ff6a00 + electric blue #00e5ff on black
   Display: Impact stack. Body: monospace forum dump.  */

.artist-gremlin {
  --accent: #a3ff00;
  --pink: #ff2db8;
  --orange: #ff6a00;
  --bolt: #00e5ff;
  --paper: #050505;
  --ink: #f4ffd9;
  --rule: #161616;
  background:
    radial-gradient(circle at 1px 1px, rgba(163,255,0,0.18) 1px, transparent 1.6px) 0 0/14px 14px,
    radial-gradient(circle at 1px 1px, rgba(255,45,184,0.10) 1px, transparent 1.6px) 7px 7px/14px 14px,
    var(--paper);
  color: var(--ink);
}
.artist-gremlin .ar { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }

.artist-gremlin h1, .artist-gremlin h2, .artist-gremlin h3 {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
  text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 8px;
}
.artist-gremlin .ar-roles, .artist-gremlin .ar-top__by,
.artist-gremlin .ar-top__note, .artist-gremlin .ar-off li,
.artist-gremlin .ar-genre {
  font-family: ui-monospace, Consolas, "Courier New", monospace;
}

/* MTV ID hero with marquee name */
.artist-gremlin .ar-id {
  position: relative; background: var(--accent); color: #050505;
  border: 6px solid #050505; padding: 0;
  display: grid; grid-template-columns: 200px 1fr; gap: 0; overflow: hidden;
}
.artist-gremlin .ar-id picture { padding: 18px; border-right: 6px solid #050505; }
.artist-gremlin .ar-id img { border: 4px solid #050505; }
.artist-gremlin .ar-id > *:not(picture) { padding: 14px 18px; }
.artist-gremlin .ar-name {
  font-size: clamp(3rem, 7vw, 5.6rem); line-height: 0.9;
  white-space: nowrap; overflow: hidden;
}
@keyframes scrollX {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.artist-gremlin .ar-name {
  display: inline-block; padding-left: 0;
  animation: scrollX 16s linear infinite;
  will-change: transform;
}
.artist-gremlin .ar-name::after {
  content: " // " attr(data-echo);
}
.artist-gremlin .ar-genre { background: #050505; color: var(--accent); display: inline-block; padding: 4px 10px; font-weight: 700; }

.artist-gremlin .ar-blurb,
.artist-gremlin .ar-going,
.artist-gremlin .ar-sound,
.artist-gremlin .ar-influences,
.artist-gremlin .ar-top,
.artist-gremlin .ar-off,
.artist-gremlin .ar-releases,
.artist-gremlin .ar-producer {
  background: #0a0a0a; border: 4px solid var(--ink);
  padding: 18px; position: relative;
}
.artist-gremlin section::before {
  content: ""; position: absolute; inset: -4px -4px auto auto;
  width: 26px; height: 26px; background: var(--pink); border: 4px solid var(--ink);
}
.artist-gremlin .ar-going { background: var(--pink); color: #18000d; border-color: #18000d; }
.artist-gremlin .ar-going h2, .artist-gremlin .ar-going p { color: #18000d; }
.artist-gremlin .ar-going::before { background: var(--accent); border-color: #18000d; }
.artist-gremlin .ar-off { background: var(--orange); color: #1a0a00; border-color: #1a0a00; }
.artist-gremlin .ar-off h2, .artist-gremlin .ar-off li { color: #1a0a00; }
.artist-gremlin .ar-off::before { background: var(--bolt); border-color: #1a0a00; }

.artist-gremlin h2 { color: var(--accent); font-size: 1.9rem; }
.artist-gremlin .sf-tag {
  background: var(--bolt); color: #001218; border: 3px solid #001218;
  padding: 3px 10px; font-weight: 800; text-transform: uppercase; border-radius: 0;
}

.artist-gremlin a { color: var(--bolt); text-decoration: underline; }
.artist-gremlin a:hover {
  color: var(--accent);
  text-shadow: 2px 0 var(--pink), -2px 0 var(--bolt);
}

.artist-gremlin .ar-infl-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.artist-gremlin .ar-infl-cols ul { padding-left: 20px; margin: 0; }
.artist-gremlin .ar-top__list { padding-left: 22px; }
.artist-gremlin .ar-top__list li { margin-bottom: 10px; border-bottom: 1px dashed var(--rule); padding-bottom: 8px; }
.artist-gremlin .ar-top__title { font-weight: 800; }
.artist-gremlin .ar-top__by { color: var(--accent); margin-left: 6px; }
.artist-gremlin .ar-top__note { display: block; color: #d2d2c4; }

.artist-gremlin .ar-releases__grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.artist-gremlin .ar-rel { background: #050505; border: 3px solid var(--accent); padding: 12px; }
.artist-gremlin .ar-rel h3 { color: var(--orange); }

@media (prefers-reduced-motion: reduce) {
  .artist-gremlin .ar-name { animation: none !important; transform: none !important; }
}
@media (max-width: 720px) {
  .artist-gremlin .ar-id { grid-template-columns: 1fr; }
  .artist-gremlin .ar-id picture { border-right: none; border-bottom: 6px solid #050505; }
  .artist-gremlin .ar-infl-cols { grid-template-columns: 1fr; }
}