/* ============================================================
   PERFORMERS — list (main-stage / garden-stage grids) + profile
   (reused for performer OR speaker/delegate)
   ============================================================ */
.stage-note {
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .03em;
  margin-top: var(--space-sm);
  max-width: 52ch;
}

.stage-switch { display: flex; gap: .5rem; margin-top: var(--space-md); }
.stage-switch__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: .6rem 1.1rem;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  opacity: .7;
}
.stage-switch__link.is-active { opacity: 1; background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.on-dark .stage-switch__link.is-active { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-paper); }

/* -- Profile page -- */
.profile-header {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
@media (min-width: 768px) {
  .profile-header { grid-template-columns: 260px 1fr; }
  .profile-header--compact { grid-template-columns: 150px 1fr; }
}

.profile-photo {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 320px;
  display: flex;
  align-items: flex-end;
  padding: var(--space-md);
  background: var(--tone, var(--color-flame));
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.6rem;
  color: var(--color-paper);
  text-shadow: 0 1px 8px rgba(0,0,0,.3);
}
/* Real photo (<img>) doesn't need the placeholder's padding/tint -
   same reasoning as img.person-card__photo in components/cards.css. */
img.profile-photo {
  padding: 0;
  background: none;
}
/* No bio yet (common for speakers/delegates until their write-up is
   ready) - a full-size portrait block next to three lines of text
   reads as broken, not minimal. Shrink it so the card looks like a
   deliberately compact name-card instead of an unfinished profile. */
.profile-header--compact .profile-photo { max-width: 150px; }

/* Poster-style info chip — short structured facts (stage/genre/origin)
   get a solid blue block, same technique as the key visual's lineup box,
   instead of just an outlined label. */
.profile-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: var(--space-sm) 0 var(--space-md); }
.profile-tags .tag {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .35rem .65rem;
  background: var(--color-sky-deep);
  color: #fff;
}

.profile-bio { font-size: 1.05rem; line-height: 1.78; }
.profile-bio p + p { margin-top: var(--space-sm); }

.profile-socials { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.profile-socials a {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  padding: .6rem 1rem;
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid rgba(23,16,13,.25);
}
.profile-socials a:hover { border-color: var(--color-flame); color: var(--color-flame); }