/* VEX — brutalist 4-col pixel grid, MLG / Roblox lobby scrapbook
   Palette: lime #39ff14 / hot orange #ff6a00 / pixel blue #2a8cff /
            neon pink #ff2db8 / electric blue #00e5ff on near-black
   Display: condensed loud sans (Bangers/Impact stack). Body: clean grotesque. */

.artist-vex {
  --accent: #39ff14;
  --accent-2: #ff6a00;
  --pixel-blue: #2a8cff;
  --neon-pink: #ff2db8;
  --bolt: #00e5ff;
  --paper: #0a0a0c;
  --ink: #f6fff0;
  --rule: #1a1a20;
  background:
    repeating-linear-gradient(0deg, rgba(57,255,20,0.04) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255,45,184,0.04) 0 1px, transparent 1px 4px),
    radial-gradient(900px 480px at 8% -10%, rgba(255,106,0,0.18), transparent 60%),
    radial-gradient(700px 360px at 100% 0%, rgba(42,140,255,0.20), transparent 60%),
    var(--paper);
  color: var(--ink);
}
.artist-vex .ar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.artist-vex .ar > * { grid-column: span 4; }
@media (min-width: 800px) {
  .artist-vex .ar-id       { grid-column: span 4; }
  .artist-vex .ar-blurb    { grid-column: span 3; }
  .artist-vex .ar-going    { grid-column: span 1; }
  .artist-vex .ar-sound    { grid-column: span 2; }
  .artist-vex .ar-off      { grid-column: span 2; }
  .artist-vex .ar-influences { grid-column: span 4; }
  .artist-vex .ar-top      { grid-column: span 2; }
  .artist-vex .ar-releases { grid-column: span 2; }
  .artist-vex .ar-producer { grid-column: span 4; }
}

.artist-vex h1, .artist-vex h2, .artist-vex h3 {
  font-family: Bangers, Impact, Haettenschweiler, "Arial Black", sans-serif;
  letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 8px;
}
.artist-vex .ar-id {
  background: var(--accent); color: #050505;
  padding: 22px; border: 4px solid #050505;
  box-shadow: 10px 10px 0 var(--accent-2), 10px 10px 0 4px #050505;
  display: grid; grid-template-columns: 160px 1fr; gap: 22px; align-items: center;
}
.artist-vex .ar-id img { border: 4px solid #050505; image-rendering: pixelated; background: #fff; }
.artist-vex .ar-name { font-size: clamp(2.6rem, 6vw, 4.8rem); line-height: 0.95; }
.artist-vex .ar-genre { margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; }

.artist-vex .ar-blurb, .artist-vex .ar-going, .artist-vex .ar-sound,
.artist-vex .ar-off, .artist-vex .ar-influences, .artist-vex .ar-top,
.artist-vex .ar-releases, .artist-vex .ar-producer {
  background: #111114; border: 3px solid var(--ink); padding: 18px;
  box-shadow: 6px 6px 0 var(--pixel-blue);
  transition: transform 0.15s ease;
}
.artist-vex .ar-going    { background: #111114; box-shadow: 6px 6px 0 var(--neon-pink); }
.artist-vex .ar-influences { background: #0c0c10; box-shadow: 6px 6px 0 var(--accent-2); }
.artist-vex .ar-top      { box-shadow: 6px 6px 0 var(--bolt); }
.artist-vex .ar-off      { box-shadow: 6px 6px 0 var(--accent); background: #0c0c10; }
.artist-vex .ar-releases { box-shadow: 6px 6px 0 var(--neon-pink); }

.artist-vex section h2 { font-size: 1.6rem; color: var(--accent); }
.artist-vex .ar-going h2 { color: var(--neon-pink); }
.artist-vex .ar-top h2 { color: var(--bolt); }
.artist-vex .ar-releases h2 { color: var(--accent-2); }

.artist-vex .sf-tag {
  background: var(--accent-2); color: #050505; font-weight: 800;
  border: 2px solid #050505; border-radius: 0;
  padding: 4px 10px; text-transform: uppercase; letter-spacing: 0.06em;
}
.artist-vex a { color: var(--bolt); text-decoration: underline; text-decoration-thickness: 2px; }
.artist-vex a:hover { color: var(--neon-pink); }

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

.artist-vex .ar-releases__grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.artist-vex .ar-rel { background: var(--paper); border: 3px solid var(--accent); padding: 12px; }
.artist-vex .ar-rel h3 { color: var(--accent-2); }

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-1.2deg); }
  75% { transform: rotate(1.2deg); }
}
.artist-vex .ar-rel:hover,
.artist-vex .ar-blurb:hover,
.artist-vex .ar-top li:hover {
  animation: wiggle 0.35s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .artist-vex *, .artist-vex *::before, .artist-vex *::after { animation: none !important; }
}
@media (max-width: 720px) {
  .artist-vex .ar-id { grid-template-columns: 1fr; text-align: center; }
  .artist-vex .ar-id img { margin: 0 auto; }
  .artist-vex .ar-infl-cols { grid-template-columns: 1fr; }
  .artist-vex .ar-releases__grid { grid-template-columns: 1fr; }
}