/* SOL — sundown-deck editorial, tropical house with salt and warmth
   Palette: peach #ffd2a8 / coral #ff8a78 / lilac #c69ad6 / indigo #2e2a6b /
            turquoise #4dbfb3 / sand white #fbf6ec / palm green #2f7a5a / ink #16213a
   Display: Poppins humanist sans. Pastel sunset gradient.
   Palm-frond clip-path silhouette in hero corner. Slow horizon sun-set animation. */

.artist-sol {
  --ink: #16213a; --indigo: #2e2a6b; --lilac: #c69ad6; --coral: #ff8a78;
  --peach: #ffd2a8; --turq: #4dbfb3; --palm: #2f7a5a; --sand: #fbf6ec;
  --rule: rgba(46,42,107,0.18);
  background: linear-gradient(180deg, #ffd2a8 0%, #ff8a78 22%, #f3a3c2 44%,
    #c69ad6 68%, #6e6abf 86%, #2e2a6b 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Poppins", "Avenir Next", system-ui, "Helvetica Neue", sans-serif;
  font-weight: 400; line-height: 1.75;
  position: relative; min-height: 100vh;
}

/* Slow horizon sunset glow — gated by reduced-motion */
.artist-sol::before {
  content: ""; position: fixed; left: 50%; top: 22%;
  width: 520px; height: 520px; margin-left: -260px;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(255,210,168,0.55) 0%, rgba(255,138,120,0.25) 40%, transparent 70%);
}

.artist-sol .ar {
  max-width: 720px; margin: 0 auto; padding: 64px 36px 96px;
  display: flex; flex-direction: column; gap: 72px;
  position: relative; z-index: 1;
}

.artist-sol h1, .artist-sol h2, .artist-sol h3 {
  font-family: "Poppins", "Avenir Next", system-ui, sans-serif; margin: 0 0 16px;
}
.artist-sol h2 {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--sand); padding-bottom: 12px;
  border-bottom: 1px solid rgba(251,246,236,0.4); position: relative;
}
.artist-sol h2::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 48px; height: 2px; background: var(--coral);
}
.artist-sol h3 {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--peach);
}

/* Hero with palm-frond silhouette in corner */
.artist-sol .ar-id {
  text-align: center; padding: 56px 24px 36px;
  background: rgba(251,246,236,0.94); border-radius: 24px;
  box-shadow: 0 18px 56px rgba(22,33,58,0.28);
  position: relative; overflow: hidden; backdrop-filter: blur(2px);
}
.artist-sol .ar-id::before {
  /* Palm-frond silhouette using CSS clip-path */
  content: ""; position: absolute; top: -40px; right: -50px;
  width: 240px; height: 240px; opacity: 0.18; pointer-events: none;
  background: linear-gradient(135deg, var(--palm) 0%, var(--turq) 100%);
  clip-path: polygon(50% 0%, 56% 18%, 78% 8%, 64% 30%, 92% 26%, 70% 44%,
    100% 50%, 70% 56%, 92% 74%, 64% 70%, 78% 92%, 56% 82%,
    50% 100%, 44% 82%, 22% 92%, 36% 70%, 8% 74%, 30% 56%,
    0% 50%, 30% 44%, 8% 26%, 36% 30%, 22% 8%, 44% 18%);
  transform: rotate(-18deg);
}
.artist-sol .ar-id > * { position: relative; z-index: 1; }
.artist-sol .ar-id img {
  width: 152px; height: 152px; border-radius: 50%;
  border: 4px solid var(--sand); background: var(--sand);
  box-shadow: 0 0 0 2px var(--coral), 0 12px 28px rgba(22,33,58,0.3);
}
.artist-sol .ar-name {
  font-size: clamp(2.6rem, 6vw, 3.8rem); font-weight: 700;
  letter-spacing: -0.02em; color: var(--indigo); margin: 22px 0 8px;
}
.artist-sol .ar-genre {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.36em;
  text-transform: uppercase; color: var(--coral); margin: 6px 0 0;
}
.artist-sol .ar-roles { margin: 14px 0 0; }

.artist-sol .ar-blurb, .artist-sol .ar-going, .artist-sol .ar-sound,
.artist-sol .ar-influences, .artist-sol .ar-top, .artist-sol .ar-off,
.artist-sol .ar-releases, .artist-sol .ar-producer {
  background: rgba(251,246,236,0.92); border-radius: 18px;
  padding: 28px 30px; box-shadow: 0 12px 36px rgba(22,33,58,0.18);
}
.artist-sol .ar-blurb p, .artist-sol .ar-going p { font-size: 1rem; color: var(--ink); line-height: 1.8; }

.artist-sol .sf-tag {
  display: inline-block; background: var(--peach); color: var(--indigo);
  border: none; border-radius: 999px; padding: 4px 14px; margin: 0 6px 6px 0;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
}
.artist-sol .ar-roles .sf-tag { background: var(--coral); color: var(--sand); }
.artist-sol .ar-sound .sf-tag:nth-child(3n) { background: var(--lilac); color: var(--sand); }
.artist-sol .ar-sound .sf-tag:nth-child(3n+1) { background: var(--turq); color: var(--sand); }
.artist-sol .sf-tags { list-style: none; padding: 0; margin: 0; }

.artist-sol h2 {
  /* Override: section h2 sits inside cream cards */
  color: var(--indigo);
  border-bottom-color: var(--rule);
}
.artist-sol h2::after { background: var(--coral); }
.artist-sol h3 { color: var(--palm); }

.artist-sol a {
  color: var(--palm); text-decoration: none;
  border-bottom: 1px solid var(--palm); padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.artist-sol a:hover { color: var(--coral); border-color: var(--coral); }

.artist-sol .ar-infl-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.artist-sol .ar-infl-cols ul { list-style: none; padding: 0; margin: 0; }
.artist-sol .ar-infl-cols li {
  padding: 5px 0; font-size: 0.92rem; color: var(--ink); border-bottom: 1px solid var(--rule);
}
.artist-sol .ar-infl-cols li:last-child { border-bottom: none; }

.artist-sol .ar-top__list {
  list-style: none; padding: 0; margin: 0; counter-reset: sol;
  font-family: "Poppins", system-ui, sans-serif;
}
.artist-sol .ar-top__list li {
  counter-increment: sol; padding: 14px 0 14px 56px; position: relative;
  border-bottom: 1px solid var(--rule); font-size: 0.95rem;
}
.artist-sol .ar-top__list li:last-child { border-bottom: none; }
.artist-sol .ar-top__list li::before {
  content: counter(sol); position: absolute; left: 0; top: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  font-size: 0.78rem; color: var(--sand); background: var(--coral);
  display: flex; align-items: center; justify-content: center; font-weight: 600;
}
.artist-sol .ar-top__title { font-weight: 600; color: var(--indigo); }
.artist-sol .ar-top__by { color: var(--palm); }
.artist-sol .ar-top__note { display: block; color: #2c4862; font-size: 0.85rem; margin-top: 4px; font-style: italic; }

.artist-sol .ar-off ul { list-style: none; padding: 0; margin: 0; }
.artist-sol .ar-off li {
  padding: 12px 0 12px 22px; border-bottom: 1px solid var(--rule);
  font-size: 0.95rem; color: var(--ink); position: relative;
}
.artist-sol .ar-off li::before { content: "~"; position: absolute; left: 0; top: 12px; color: var(--coral); font-weight: 600; }
.artist-sol .ar-off li:last-child { border-bottom: none; }

.artist-sol .ar-releases__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}
.artist-sol .ar-rel {
  padding: 18px; border-radius: 14px;
  background: linear-gradient(160deg, var(--peach) 0%, var(--coral) 100%);
}
.artist-sol .ar-rel h3 {
  font-size: 1.05rem; color: var(--indigo); letter-spacing: 0;
  text-transform: none; font-weight: 700;
}
.artist-sol .ar-rel .sf-tag { background: var(--sand); color: var(--indigo); }
.artist-sol .ar-rel__link { color: var(--indigo); border-bottom-color: var(--indigo); }
.artist-sol .ar-rel__link:hover { color: var(--sand); border-bottom-color: var(--sand); }

@media (prefers-reduced-motion: no-preference) {
  .artist-sol::before { animation: sol-set 60s ease-in-out infinite alternate; }
  @keyframes sol-set {
    0% { transform: translateX(-80px) translateY(0); opacity: 0.85; }
    100% { transform: translateX(80px) translateY(40px); opacity: 1; }
  }
}

@media (max-width: 720px) {
  .artist-sol .ar { padding: 32px 18px 64px; gap: 52px; }
  .artist-sol .ar-infl-cols, .artist-sol .ar-releases__grid { grid-template-columns: 1fr; gap: 22px; }
  .artist-sol .ar-blurb, .artist-sol .ar-going, .artist-sol .ar-sound,
  .artist-sol .ar-influences, .artist-sol .ar-top, .artist-sol .ar-off,
  .artist-sol .ar-releases, .artist-sol .ar-producer { padding: 22px 20px; }
  .artist-sol::before { width: 320px; height: 320px; margin-left: -160px; }
}

@media (prefers-reduced-motion: reduce) {
  .artist-sol *, .artist-sol *::before, .artist-sol *::after { animation: none !important; transition: none !important; }
}