/* PIXIE — bubblegum gradient, candy-pop cards, glossy hover glow
   Palette: pink #ff4fc8 / violet #a855ff / hot pink #ff2db8 / electric blue #00d1ff
   Display: rounded geometric / Cooper-style fallback. Body: humanist sans. */

.artist-pixie {
  --accent: #ff4fc8;
  --violet: #a855ff;
  --pink: #ff2db8;
  --bolt: #00d1ff;
  --cream: #fff7fb;
  --ink: #19021a;
  --paper: #fbe6f4;
  --rule: rgba(25,2,26,0.12);
  background:
    radial-gradient(1100px 700px at 0% 0%, #ffd1ec 0%, transparent 55%),
    radial-gradient(900px 600px at 100% 100%, #c9a4ff 0%, transparent 55%),
    linear-gradient(160deg, #ffe1f1 0%, #f0d6ff 50%, #d6e8ff 100%);
  color: var(--ink);
}
.artist-pixie .ar { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }

.artist-pixie h1, .artist-pixie h2, .artist-pixie h3 {
  font-family: Righteous, "Trebuchet MS", "Comic Sans MS", "Hiragino Maru Gothic ProN", sans-serif;
  letter-spacing: -0.005em; margin: 0 0 10px; color: var(--ink);
}
.artist-pixie h2 { font-size: 1.7rem; }

.artist-pixie .ar-id {
  background: linear-gradient(135deg, #ff4fc8 0%, #a855ff 100%);
  color: var(--cream); padding: 28px; border-radius: 28px;
  box-shadow: 0 28px 60px rgba(168,85,255,0.32), inset 0 1px 0 rgba(255,255,255,0.5);
  display: grid; grid-template-columns: 160px 1fr; gap: 22px; align-items: center;
}
.artist-pixie .ar-id img { border-radius: 50%; border: 5px solid #fff; box-shadow: 0 12px 28px rgba(25,2,26,0.25); }
.artist-pixie .ar-name { font-size: clamp(2.4rem, 5vw, 4rem); color: var(--cream); }
.artist-pixie .ar-genre { margin: 0; color: rgba(255,255,255,0.92); font-weight: 700; }

.artist-pixie .ar-blurb,
.artist-pixie .ar-going,
.artist-pixie .ar-sound,
.artist-pixie .ar-influences,
.artist-pixie .ar-top,
.artist-pixie .ar-off,
.artist-pixie .ar-releases,
.artist-pixie .ar-producer {
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 14px 32px rgba(168,85,255,0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.artist-pixie section:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px rgba(255,79,200,0.28);
}
.artist-pixie .ar-going { background: linear-gradient(135deg, #fff7fb, #ffe2f3); }
.artist-pixie .ar-off { background: linear-gradient(135deg, #f1e4ff, #fff7fb); }

.artist-pixie a { color: var(--pink); font-weight: 700; }
.artist-pixie a:hover { color: var(--violet); text-decoration: underline; text-decoration-thickness: 2px; }

.artist-pixie .sf-tag {
  background: linear-gradient(135deg, #ff4fc8, #a855ff);
  color: #fff; border: 0; border-radius: 999px;
  padding: 5px 12px; font-weight: 700; box-shadow: 0 4px 10px rgba(168,85,255,0.28);
}

.artist-pixie .ar-infl-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.artist-pixie .ar-infl-cols h3 { color: var(--violet); font-size: 1.05rem; }
.artist-pixie .ar-infl-cols ul { padding-left: 20px; margin: 0; }

.artist-pixie .ar-top__list { padding-left: 24px; }
.artist-pixie .ar-top__list li {
  margin-bottom: 10px; padding: 10px 14px;
  background: rgba(255,255,255,0.62);
  border-radius: 14px;
}
.artist-pixie .ar-top__title { font-weight: 800; color: var(--ink); }
.artist-pixie .ar-top__by { color: var(--pink); margin-left: 6px; font-weight: 600; }
.artist-pixie .ar-top__note { display: block; color: #4a224a; font-style: italic; }

.artist-pixie .ar-releases__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.artist-pixie .ar-rel {
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,225,241,0.85));
  border-radius: 18px; padding: 16px; border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 8px 18px rgba(168,85,255,0.18);
}
.artist-pixie .ar-rel:hover { box-shadow: 0 14px 28px rgba(255,79,200,0.32), 0 0 0 3px rgba(255,79,200,0.32); }
.artist-pixie .ar-rel h3 { color: var(--pink); }

@media (prefers-reduced-motion: reduce) {
  .artist-pixie section:hover { transform: none; }
}
@media (max-width: 720px) {
  .artist-pixie .ar-id { grid-template-columns: 1fr; text-align: center; }
  .artist-pixie .ar-id img { margin: 0 auto; }
  .artist-pixie .ar-infl-cols { grid-template-columns: 1fr; }
}