/* Portrait albums share the site palette and stay scoped to this dialog. */
#artist-dialog.profile-dialog [hidden] { display: none !important; }
#artist-dialog.profile-dialog {
  width: min(1180px, 94vw);
  max-width: 94vw;
  max-height: calc(100svh - 40px);
  padding: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
#artist-dialog.profile-dialog .profile-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  padding: 8px 16px 8px 28px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
#artist-dialog.profile-dialog .profile-toolbar-name {
  font: var(--weight-medium) var(--size-control)/var(--leading-label) var(--font-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
}
#artist-dialog.profile-dialog .dialog-close {
  position: static;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 26px;
  line-height: 1;
}
#artist-dialog.profile-dialog .profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 4vw, 56px);
  padding: 28px clamp(24px, 3vw, 40px) 40px;
}
#artist-dialog.profile-dialog .profile-gallery {
  position: relative;
  top: auto;
  min-width: 0;
}
#artist-dialog.profile-dialog .profile-photo-panel {
  width: 100%;
  outline-offset: 5px;
}
#artist-dialog.profile-dialog .profile-photo-window {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 70%, var(--color-credits-halo), transparent 80%), var(--color-surface);
}
#artist-dialog.profile-dialog .profile-cut-image,
#artist-dialog.profile-dialog .profile-cut-thumbnail img {
  position: absolute;
  width: 200%;
  height: 200%;
  max-width: none;
  object-fit: fill;
  display: block;
}
#artist-dialog.profile-dialog .profile-gallery[data-mode="single"] .profile-cut-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
#artist-dialog.profile-dialog .profile-photo-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 24px;
  text-align: center;
  font: var(--weight-medium) 14px/var(--leading-body) var(--font-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-text-muted);
}
#artist-dialog.profile-dialog .profile-photo-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
}
#artist-dialog.profile-dialog .profile-photo-status {
  flex: 1;
  margin: 0;
  text-align: center;
  font: var(--weight-medium) 12px/var(--leading-label) var(--font-label);
  color: var(--color-text-muted);
  letter-spacing: .09em;
}
#artist-dialog.profile-dialog .profile-photo-arrow {
  display: grid;
  place-items: center;
  flex: 0 0 54px;
  width: 54px;
  height: 44px;
  font-size: 12px;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
#artist-dialog.profile-dialog .profile-cut-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
#artist-dialog.profile-dialog .profile-cut-tab {
  min-width: 0;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  padding: 0 0 6px;
  gap: 0;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  text-align: left;
}
#artist-dialog.profile-dialog .profile-cut-thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-surface);
  opacity: .56;
  transition: opacity 150ms ease;
}
#artist-dialog.profile-dialog .profile-cut-tab[aria-selected="true"] {
  color: var(--color-text);
  border-bottom-color: var(--color-warm);
}
#artist-dialog.profile-dialog .profile-cut-tab[aria-selected="true"] .profile-cut-thumbnail,
#artist-dialog.profile-dialog .profile-cut-tab:hover .profile-cut-thumbnail { opacity: 1; }
#artist-dialog.profile-dialog .profile-biography { min-width: 0; padding: 8px 0 0; }
#artist-dialog.profile-dialog .profile-biography > .eyebrow {
  font: var(--weight-medium) 11px/1.6 var(--font-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-warm);
  margin: 0 0 22px;
}
#artist-dialog.profile-dialog #dialog-name {
  font-size: clamp(34px, 4vw, 60px);
  line-height: var(--leading-title);
  margin: 0 0 27px;
  overflow-wrap: normal;
}
#artist-dialog.profile-dialog #dialog-description {
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: var(--weight-regular);
  line-height: 1.95;
  letter-spacing: var(--tracking-body);
  white-space: pre-line;
  color: var(--color-text-muted);
  margin: 0 0 22px;
}
#artist-dialog.profile-dialog .profile-official,
#artist-dialog.profile-dialog .dialog-return {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 44px;
  font: var(--weight-medium) 12px/var(--leading-label) var(--font-label);
  letter-spacing: .08em;
  color: var(--color-text);
  margin: 18px 0 0;
}
#artist-dialog.profile-dialog button:focus-visible,
#artist-dialog.profile-dialog a:focus-visible,
#artist-dialog.profile-dialog .profile-photo-panel:focus-visible {
  outline: 2px solid var(--color-warm);
  outline-offset: 3px;
}
@media(max-width: 820px) {
  #artist-dialog.profile-dialog { width: 94vw; max-width: 94vw; max-height: calc(100svh - 24px); }
  #artist-dialog.profile-dialog .profile-toolbar { min-height: 60px; padding: 8px 10px 8px 18px; }
  #artist-dialog.profile-dialog .profile-toolbar-name { letter-spacing: .07em; }
  #artist-dialog.profile-dialog .profile-layout { grid-template-columns: 1fr; gap: 30px; padding: 18px 18px 30px; }
  #artist-dialog.profile-dialog .profile-gallery { position: relative; top: auto; }
  #artist-dialog.profile-dialog .profile-biography { padding: 0; }
  #artist-dialog.profile-dialog #dialog-name { font-size: clamp(34px, 8vw, 48px); margin-bottom: 22px; }
  #artist-dialog.profile-dialog #dialog-description { font-size: 14px; line-height: 1.95; }
  #artist-dialog.profile-dialog .profile-cut-tabs { gap: 7px; }
  #artist-dialog.profile-dialog .profile-biography > .eyebrow { margin-bottom: 17px; }
}
@media(min-width: 821px) and (min-height: 940px) {
  #artist-dialog.profile-dialog .profile-gallery { position: sticky; top: 96px; }
}
@media(max-width: 360px) {
  #artist-dialog.profile-dialog .profile-layout { padding-left: 14px; padding-right: 14px; }
  #artist-dialog.profile-dialog .profile-cut-tabs { gap: 5px; }
}
body.motion-reduced #artist-dialog.profile-dialog .profile-cut-thumbnail { transition: none; }
@media(prefers-reduced-motion: reduce) {
  body:not(.motion-full) #artist-dialog.profile-dialog .profile-cut-thumbnail { transition: none; }
}

/* Public contact for WACCO only; independent of the contact form. */
#artist-dialog.profile-dialog .profile-contact {
  margin: 24px 0 0; padding: 18px 0 0; border-top: 1px solid var(--color-border);
}
#artist-dialog.profile-dialog .profile-contact-label {
  display: block; font: var(--weight-regular) 12px/1.6 var(--font-body);
  letter-spacing: .06em; color: var(--color-text-muted);
}
#artist-dialog.profile-dialog .profile-contact-email {
  display: flex; align-items: center; width: fit-content; max-width: 100%; min-height: 44px;
  font: var(--weight-regular) 14px/1.7 var(--font-body); letter-spacing: .01em;
  color: var(--color-text); overflow-wrap: anywhere; text-decoration: underline;
  text-decoration-color: var(--color-warm); text-underline-offset: 5px; text-decoration-thickness: 1px;
}
#artist-dialog.profile-dialog .profile-contact-email:hover { color: var(--color-warm); }

#artist-dialog.profile-dialog .profile-official.profile-tiktok.has-service-icon { display: flex; }

#artist-dialog.profile-dialog .profile-contact-operator {
  display: block; margin-top: 4px; max-width: 100%;
  font: var(--weight-regular) 12px/1.7 var(--font-body);
  letter-spacing: .01em; color: var(--color-text-muted); overflow-wrap: break-word;
}
