/* AYANA — afrobeats/amapiano press spread, Lagos-to-London diaspora editorial
   Palette: gold #d6a64a / leather brown #5b3a22 / teal #1f6e74 /
            cream #f6efe1 / terracotta #c0664a / ink #1c130b
   Display: Playfair Display serif headers, Inter body.
   Sun motif radial-gradient sunburst, warm earth-textured background. */

.artist-ayana {
  --ink: #1c130b; --gold: #d6a64a; --leather: #5b3a22; --teal: #1f6e74;
  --cream: #f6efe1; --terracotta: #c0664a; --paper: #fbf6e9; --rule: #c8b48d;
  background:
    radial-gradient(ellipse at top right, rgba(214,166,74,0.18), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(91,58,34,0.12), transparent 55%),
    repeating-linear-gradient(45deg, rgba(91,58,34,0.025) 0 1px, transparent 1px 12px),
    var(--paper);
  color: var(--ink);
  font-family: "Inter", system-ui, "Helvetica Neue", sans-serif;
  font-weight: 400; line-height: 1.78;
}

.artist-ayana .ar {
  max-width: 720px; margin: 0 auto; padding: 64px 40px 96px;
  display: flex; flex-direction: column; gap: 72px;
}

.artist-ayana h1, .artist-ayana h2 {
  font-family: "Playfair Display", "Iowan Old Style", Georgia, serif;
  font-weight: 600; margin: 0 0 18px;
}
.artist-ayana h3 {
  font-family: "Inter", system-ui, sans-serif; font-weight: 600;
  font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--leather); margin: 0 0 14px;
}
.artist-ayana h2 {
  font-size: 1.5rem; letter-spacing: -0.005em; color: var(--leather);
  padding-bottom: 12px; border-bottom: 1px solid var(--rule); position: relative;
}
.artist-ayana h2::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 56px; height: 3px; background: var(--gold);
}

/* Hero with sun motif */
.artist-ayana .ar-id {
  text-align: center; padding: 60px 24px 32px;
  position: relative; overflow: hidden; border-radius: 4px;
}
.artist-ayana .ar-id::before {
  content: ""; position: absolute; top: -10%; left: 50%;
  width: 460px; height: 460px; margin-left: -230px;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle, rgba(214,166,74,0.55) 0%, rgba(214,166,74,0.25) 30%, transparent 65%),
    conic-gradient(from 0deg, rgba(214,166,74,0.2) 0deg, transparent 14deg,
      rgba(214,166,74,0.2) 30deg, transparent 44deg, rgba(214,166,74,0.2) 60deg,
      transparent 74deg, rgba(214,166,74,0.2) 90deg, transparent 104deg,
      rgba(214,166,74,0.2) 120deg, transparent 134deg, rgba(214,166,74,0.2) 150deg,
      transparent 164deg, rgba(214,166,74,0.2) 180deg, transparent 194deg,
      rgba(214,166,74,0.2) 210deg, transparent 224deg, rgba(214,166,74,0.2) 240deg,
      transparent 254deg, rgba(214,166,74,0.2) 270deg, transparent 284deg,
      rgba(214,166,74,0.2) 300deg, transparent 314deg, rgba(214,166,74,0.2) 330deg, transparent 344deg);
}
.artist-ayana .ar-id > * { position: relative; z-index: 1; }
.artist-ayana .ar-id img {
  width: 156px; height: 156px; border-radius: 50%;
  border: 3px solid var(--gold); background: var(--cream);
  box-shadow: 0 8px 24px rgba(91,58,34,0.25), inset 0 0 0 6px var(--paper);
}
.artist-ayana .ar-name {
  font-size: clamp(2.8rem, 6.5vw, 4.2rem); letter-spacing: -0.015em;
  color: var(--ink); margin: 22px 0 8px; font-style: italic; font-weight: 600;
}
.artist-ayana .ar-genre {
  font-family: "Inter", system-ui, sans-serif; font-size: 0.7rem;
  letter-spacing: 0.36em; text-transform: uppercase; color: var(--teal); margin: 6px 0 0;
}
.artist-ayana .ar-roles { margin: 14px 0 0; }

.artist-ayana .ar-blurb { position: relative; padding: 8px 0 0; }
.artist-ayana .ar-blurb p { font-size: 1.04rem; color: #2a1f14; line-height: 1.85; }
.artist-ayana .ar-blurb p::first-letter {
  font-family: "Playfair Display", Georgia, serif; font-size: 3.6rem;
  float: left; line-height: 0.9; margin: 6px 12px -4px 0; font-weight: 700;
  background: linear-gradient(180deg, var(--gold) 0%, var(--terracotta) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.artist-ayana .ar-going p {
  font-family: "Playfair Display", Georgia, serif; font-style: italic;
  font-size: 1.18rem; line-height: 1.7; color: var(--leather);
  padding-left: 22px; border-left: 3px solid var(--gold);
}

.artist-ayana .sf-tag {
  display: inline-block; background: transparent; color: var(--leather);
  border: 1px solid var(--rule); border-radius: 999px; padding: 3px 14px;
  margin: 0 6px 6px 0; font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 500;
}
.artist-ayana .ar-roles .sf-tag { background: var(--leather); color: var(--paper); border-color: var(--leather); }
.artist-ayana .sf-tags { list-style: none; padding: 0; margin: 0; }

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

.artist-ayana .ar-infl-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.artist-ayana .ar-infl-cols ul { list-style: none; padding: 0; margin: 0; }
.artist-ayana .ar-infl-cols li {
  padding: 5px 0 5px 16px; font-size: 0.92rem; position: relative; color: #2a1f14;
}
.artist-ayana .ar-infl-cols li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}

.artist-ayana .ar-top__list { list-style: none; padding: 0; margin: 0; counter-reset: aya; }
.artist-ayana .ar-top__list li {
  counter-increment: aya; padding: 16px 0 16px 52px; position: relative;
  border-bottom: 1px solid var(--rule); font-size: 0.96rem;
}
.artist-ayana .ar-top__list li:last-child { border-bottom: none; }
.artist-ayana .ar-top__list li::before {
  content: counter(aya, decimal-leading-zero);
  position: absolute; left: 0; top: 18px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.3rem; font-style: italic; color: var(--gold);
}
.artist-ayana .ar-top__title { font-weight: 600; color: var(--ink); }
.artist-ayana .ar-top__by { color: var(--leather); }
.artist-ayana .ar-top__note { display: block; font-style: italic; color: #5a4631; font-size: 0.86rem; margin-top: 4px; font-family: "Playfair Display", Georgia, serif; }

.artist-ayana .ar-off ul { list-style: none; padding: 0; margin: 0; }
.artist-ayana .ar-off li {
  padding: 14px 0 14px 22px; border-bottom: 1px solid var(--rule);
  font-size: 0.96rem; color: #2a1f14; position: relative;
}
.artist-ayana .ar-off li::before {
  content: ""; position: absolute; left: 0; top: 21px;
  width: 8px; height: 1px; background: var(--terracotta);
}
.artist-ayana .ar-off li:last-child { border-bottom: none; }

.artist-ayana .ar-releases__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
}
.artist-ayana .ar-rel { padding-top: 18px; border-top: 2px solid var(--gold); background: transparent; }
.artist-ayana .ar-rel h3 {
  font-family: "Playfair Display", Georgia, serif; font-style: italic;
  font-size: 1.15rem; letter-spacing: 0; color: var(--ink);
  text-transform: none; font-weight: 600;
}

@media (max-width: 720px) {
  .artist-ayana .ar { padding: 36px 22px 64px; gap: 56px; }
  .artist-ayana .ar-infl-cols, .artist-ayana .ar-releases__grid { grid-template-columns: 1fr; gap: 28px; }
  .artist-ayana .ar-id::before { width: 320px; height: 320px; margin-left: -160px; }
}
@media (prefers-reduced-motion: reduce) {
  .artist-ayana *, .artist-ayana *::before, .artist-ayana *::after { animation: none !important; transition: none !important; }
}