/*! RelaxingJazz.com · artists.css (ARTISTS page builder, SPEC §8.5)
 * Everything is scoped under .page--artists (the next page's stylesheet loads a moment before a router swap)
 * and uses only rj.css tokens, so Night and Day both work. Motif: the record sleeve, with a vinyl disc that
 * slides out from behind the cover.
 */

.page--artists {
  --az-h: 3.5rem;
  /* vinyl: near-black at night, deep ink by day */
  --disc: color-mix(in srgb, var(--surface-solid) 55%, var(--bg-sunken));
  --disc-groove: color-mix(in srgb, var(--text) 14%, var(--disc));
  --disc-sheen: color-mix(in srgb, var(--text) 14%, transparent);
}
:root[data-theme="light"] .page--artists {
  --disc: var(--text);
  --disc-groove: color-mix(in srgb, var(--bg) 14%, var(--disc));
  --disc-sheen: color-mix(in srgb, var(--bg) 18%, transparent);
}

/* Monogram placeholders rendered by PHP: hue slot → the same hues RJ.ui.art uses (no inline styles). */
.page--artists .art__ph[data-h="0"] { --ph-h: 28; }
.page--artists .art__ph[data-h="1"] { --ph-h: 38; }
.page--artists .art__ph[data-h="2"] { --ph-h: 46; }
.page--artists .art__ph[data-h="3"] { --ph-h: 196; }
.page--artists .art__ph[data-h="4"] { --ph-h: 214; }
.page--artists .art__ph[data-h="5"] { --ph-h: 232; }
.page--artists .art__ph[data-h="6"] { --ph-h: 252; }
.page--artists .art__ph[data-h="7"] { --ph-h: 278; }
.page--artists .art__ph[data-h="8"] { --ph-h: 318; }
.page--artists .art__ph[data-h="9"] { --ph-h: 342; }
.page--artists .art__ph[data-h="10"] { --ph-h: 8; }
.page--artists .art__ph[data-h="11"] { --ph-h: 168; }

/* The vinyl disc (shared by cards and the detail header) */
.page--artists .artist-disc {
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--bg) 0 2.2%, var(--gold) 2.7% 15%, color-mix(in srgb, var(--gold) 50%, var(--disc)) 15.4% 16.2%, transparent 16.6%),
    conic-gradient(from 25deg, transparent 0 7%, var(--disc-sheen) 12%, transparent 18% 52%, var(--disc-sheen) 62%, transparent 68%),
    repeating-radial-gradient(circle, var(--disc) 0 2px, var(--disc-groove) 2.4px 2.9px),
    var(--disc);
  box-shadow: var(--shadow-2), inset 0 0 0 1px var(--border);
}

/* ============================================================================ directory === */

/* Shared hero rhythm (contract C2): every inner page's eyebrow and h1 land at the same height. */
.page--artists .artists-hero {
  position: relative;
  overflow: clip;
  padding-top: var(--page-hero-pad-top, clamp(3rem, 2rem + 4vw, 6rem));
  padding-bottom: var(--page-hero-pad-bottom, clamp(2rem, 1.5rem + 2vw, 3rem));
}
.page--artists .artists-hero__inner { position: relative; display: grid; gap: var(--space-6); align-items: start; }
/* Block flow (not grid), like the other pages' heroes: the inline-flex eyebrow then sits on the same line box,
   so the eyebrow and h1 land at exactly the same y as on About, Listen, News and Privacy. */
.page--artists .artists-hero__text { position: relative; z-index: 1; }
.page--artists .artists-hero__text .h-display { margin-top: var(--space-3); font-size: var(--page-hero-title, var(--step-6)); }
.page--artists .artists-hero__text .lede { margin-top: var(--space-4); }
.page--artists .artists-hero__az {
  position: absolute;
  right: -0.06em;
  top: 50%;
  z-index: 0;
  transform: translateY(-62%);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(6.5rem, 21vw, 17rem);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--gold) 26%, transparent);
  pointer-events: none;
  user-select: none;
}
@media (max-width: 959px) {
  /* no room beside the headline on smaller screens: the watermark would cross it */
  .page--artists .artists-hero__az { display: none; }
}
@media (min-width: 960px) {
  .page--artists .artists-hero__inner { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  /* the letters rise from behind the facts card, like a record from its sleeve */
  .page--artists .artists-hero__az { top: 0; right: 0.5%; transform: translateY(-46%); }
}

.page--artists .artists-facts {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  margin: 0;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius-m);
  background: var(--surface-solid);
  box-shadow: var(--shadow-2);
}
.page--artists .artists-facts__item { display: grid; gap: 2px; padding-block: var(--space-3); }
.page--artists .artists-facts__item + .artists-facts__item { border-top: 1px solid var(--border); }
.page--artists .artists-facts dt { font-size: var(--step--2); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.page--artists .artists-facts dd { margin: 0; font-family: var(--font-display); font-size: var(--step-2); line-height: 1.2; color: var(--text); font-variant-numeric: lining-nums; }
.page--artists .artists-facts dd a { text-decoration: none; }
/* skeleton rows, the height of a filled one, until artists.js has the numbers */
.page--artists .artists-facts__skel { display: block; width: 7rem; max-width: 100%; height: 1.2em; }
@media (max-width: 959px) {
  /* compact rows are baseline-aligned: an inline skeleton keeps a text baseline, so the row height matches */
  .page--artists .artists-facts__skel { display: inline-block; width: 6rem; height: 0.9em; vertical-align: -0.1em; }
}
@media (max-width: 959px) {
  /* compact on phones and tablets, so the artists start on the first screen */
  .page--artists .artists-facts { padding: var(--space-1) var(--space-4); box-shadow: none; }
  .page--artists .artists-facts__item { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-3); padding-block: var(--space-2); }
  .page--artists .artists-facts dd { font-size: var(--step-0); text-align: right; }
}
.page--artists .artists-facts dd a:hover { color: var(--gold); font-style: italic; }

/* Filter + sort */
.page--artists .artists-tools { padding-bottom: var(--space-5); }
.page--artists .artists-tools__inner { display: grid; gap: var(--space-4) var(--space-6); align-items: end; }
@media (min-width: 820px) {
  .page--artists .artists-tools__inner { grid-template-columns: minmax(0, 27rem) auto; justify-content: space-between; }
}
.page--artists .artists-filter,
.page--artists .artists-sort { display: grid; gap: var(--space-2); min-width: 0; }
.page--artists .artists-filter__label {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* A–Z jump index: sticky under the header */
.page--artists .artists-az {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  border-block: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .page--artists .artists-az { background: var(--bg); }
}
.page--artists .az {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: var(--az-h);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, var(--text) calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, var(--text) calc(100% - 28px), transparent);
}
.page--artists .az::-webkit-scrollbar { display: none; }
@media (min-width: 1080px) {
  .page--artists .az { justify-content: space-between; -webkit-mask-image: none; mask-image: none; }
}
.page--artists .az__letter {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 2.25rem;
  height: 2.5rem;
  padding: 0 0.3em;
  border-radius: var(--radius-s);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1;
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.page--artists .az__letter[href] { cursor: pointer; }
.page--artists .az__letter[href]:hover { color: var(--gold); background: var(--surface-hover); font-style: italic; }
.page--artists .az__letter:not([href]) { color: var(--text-3); opacity: 0.38; cursor: default; }
.page--artists .az__letter:focus-visible { outline-offset: -2px; color: var(--gold); }
@media (pointer: coarse) {
  .page--artists .az__letter { min-width: 44px; height: 44px; }
}

/* The list */
.page--artists .artists-list-wrap { padding-top: var(--space-5); }
.page--artists .artists-count { min-height: 1.6em; color: var(--text-3); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.page--artists .az-group { padding-top: var(--space-6); }
.page--artists .az-group__head { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-5); }
.page--artists .az-group__head::after {
  content: "";
  order: 2;
  flex: 1 1 auto;
  height: 1px;
  align-self: center;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 55%, transparent), transparent);
}
.page--artists .az-group__letter {
  min-width: 1.1ch;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--step-5);
  line-height: 0.9;
  color: var(--gold);
  scroll-margin-top: calc(var(--az-h) + var(--space-5));
}
.page--artists .az-group__letter:focus { outline: none; }
.page--artists .az-group__letter:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; border-radius: var(--radius-s); }
.page--artists .az-group__count { order: 1; color: var(--text-3); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }

.page--artists .artist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
  gap: var(--space-6) clamp(var(--space-5), 2.6vw, var(--space-6));
}
@media (max-width: 479px) {
  .page--artists .artist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-5); }
}
.page--artists .artist-grid--flat { margin-top: var(--space-5); }

/* An artist card: a record sleeve with the disc tucked behind it */
.page--artists .artist-card { position: relative; min-width: 0; }
.page--artists .artist-card__link { display: block; color: inherit; text-decoration: none; border-radius: var(--radius-s); }
.page--artists .artist-card__sleeve { position: relative; display: block; isolation: isolate; }
.page--artists .artist-card .art {
  --art-size: 100%;
  position: relative;
  z-index: 1;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-2), inset 0 0 0 1px var(--border);
  transition: box-shadow var(--dur-2) var(--ease);
}
.page--artists .artist-card__disc {
  position: absolute;
  z-index: 0;
  top: 4%;
  right: 4%;
  width: 92%;
  transition: transform var(--dur-3) var(--ease);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .page--artists .artist-card__link:hover .artist-card__disc { transform: translateX(15%) rotate(50deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .page--artists .artist-card__link:focus-visible .artist-card__disc { transform: translateX(15%) rotate(50deg); }
}
.page--artists .artist-card__link:hover .art { box-shadow: var(--shadow-3), inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); }
.page--artists .artist-card__name {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.2;
  color: var(--text);
  overflow-wrap: anywhere;
  transition: color var(--dur-1) var(--ease);
}
.page--artists .artist-card__link:hover .artist-card__name { color: var(--gold); font-style: italic; }
.page--artists .artist-card__meta {
  display: grid;
  gap: 1px;
  margin-top: var(--space-1);
  color: var(--text-3);
  font-size: var(--step--2);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.page--artists .artist-card__meta .skeleton__line { width: 72%; margin-top: 0.35em; }
.page--artists .artist-card__quiet { font-style: italic; }
.page--artists .artist-card__live { margin-top: 2px; }
.page--artists .artist-card.is-on-air .art { box-shadow: 0 0 0 2px var(--live), var(--shadow-2); }
.page--artists .artist-card__rank {
  position: absolute;
  z-index: 2;
  left: var(--space-2);
  top: var(--space-2);
  min-width: 2.1em;
  padding: 0.2em 0.55em;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg) 92%, transparent); /* ≥ 4.5:1 for --gold even over a black or white cover */
  color: var(--gold);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-0);
  line-height: 1.2;
  text-align: center;
  box-shadow: var(--shadow-1);
}

/* States */
.page--artists .artists-loading { margin-top: var(--space-6); }
.page--artists .artists-loading__msg { margin-bottom: var(--space-4); font-family: var(--font-display); font-style: italic; color: var(--text-3); }
.page--artists .artists-empty,
.page--artists [data-list-state] .error-state { margin-top: var(--space-6); }
.page--artists .artists-empty__hint { max-width: 48ch; color: var(--text-3); font-size: var(--step--1); }
.page--artists .artists-empty__actions { justify-content: center; }
.page--artists .artists-empty__actions .btn { white-space: normal; text-align: center; }

/* ================================================================================ detail === */

.page--artists .artist-back { padding-top: var(--space-4); }
.page--artists .artist-back--end { padding-top: var(--space-5); }
.page--artists .artist-back__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 44px;
  color: var(--text-2);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.page--artists .artist-back__link:hover { color: var(--gold); }
.page--artists .artist-back__link .icon { transition: transform var(--dur-1) var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .page--artists .artist-back__link:hover .icon { transform: translateX(-3px); }
}

/* Hero rhythm (contract C2): the back link takes the first ~3.5rem of the shared top padding, so the eyebrow
   and h1 land where they do on the other pages. */
.page--artists .artist-hero {
  overflow: clip;
  padding-top: max(var(--space-4), calc(var(--page-hero-pad-top, clamp(3rem, 2rem + 4vw, 6rem)) - 3.75rem));
  padding-bottom: var(--page-hero-pad-bottom, clamp(2rem, 1.5rem + 2vw, 3rem));
}
.page--artists .artist-hero__name { font-size: var(--page-hero-title, var(--step-6)); }
.page--artists .artist-hero__grid { display: grid; gap: var(--space-6) clamp(var(--space-6), 6vw, var(--space-9)); align-items: center; }
@media (min-width: 860px) {
  .page--artists .artist-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}
.page--artists .artist-hero__sleeve-wrap { width: min(100%, 27rem); padding-right: 23%; }
@media (max-width: 859px) {
  .page--artists .artist-hero__sleeve-wrap { width: min(80%, 20rem); }
}
.page--artists .artist-hero__sleeve { position: relative; isolation: isolate; }
.page--artists .artist-hero__sleeve > .art {
  --art-size: 100%;
  position: relative;
  z-index: 2;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-3), inset 0 0 0 1px var(--border);
}
.page--artists .artist-hero__disc {
  position: absolute;
  z-index: 1;
  top: 3%;
  left: 3%;
  width: 94%;
  transform: translateX(27%);
}
@media (prefers-reduced-motion: no-preference) {
  .page--artists .artist-hero__disc { animation: artists-disc-out 1.4s var(--ease) 0.2s both; }
}
@keyframes artists-disc-out {
  from { transform: translateX(0) rotate(-40deg); }
  to { transform: translateX(27%) rotate(0deg); }
}
.page--artists .artist-hero__glow {
  position: absolute;
  z-index: 0;
  inset: 4% -10% -6% 4%;
  opacity: 0.55;
  filter: blur(48px) saturate(1.4);
  pointer-events: none;
}
.page--artists .artist-hero__glow .art { --art-size: 100%; border-radius: 50%; box-shadow: none; }
.page--artists .artist-hero__glow .art__ph { font-size: 0; }
:root[data-theme="light"] .page--artists .artist-hero__glow { opacity: 0.35; }

/* Block flow with margins (not grid gap), so the eyebrow and h1 line up with the other pages' heroes. */
.page--artists .artist-hero__text { min-width: 0; }
.page--artists .artist-hero__text > * + * { margin-top: var(--space-4); }
.page--artists .artist-hero__text > .artist-hero__name { margin-top: var(--space-3); }
.page--artists .artist-hero__text > .artist-stats { margin-top: var(--space-5); }
.page--artists .artist-hero__name { overflow-wrap: anywhere; }
.page--artists .artist-hero__onair { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); color: var(--text-2); }
.page--artists .artist-hero__onair-title { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); }

.page--artists .artist-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.75rem), 1fr));
  gap: var(--space-5) var(--space-6);
  margin: var(--space-2) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.page--artists .artist-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-1); min-width: 0; }
.page--artists .artist-stat dt { font-size: var(--step--2); font-weight: 600; letter-spacing: 0.12em; line-height: 1.4; text-transform: uppercase; color: var(--text-3); }
.page--artists .artist-stat dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: lining-nums tabular-nums;
}
.page--artists .artist-stat__skel { height: 1.15em; width: 4.5rem; margin-bottom: 0.1em; }
.page--artists .artist-stat--love dd { color: var(--love); }
.page--artists .artist-stat__heart { width: 0.72em; height: 0.72em; vertical-align: 0.02em; }
.page--artists .artist-stat__live { display: inline-flex; align-items: center; gap: 0.4em; color: var(--live); font-size: var(--step-2); }
.page--artists .artist-stat__live .eq-bars { height: 0.8em; }

.page--artists .artist-hero__status:empty { display: none; }
.page--artists .artist-hero__stub {
  max-width: 46ch;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-2);
}
.page--artists .artist-hero__note { max-width: 62ch; color: var(--text-3); font-size: var(--step--1); line-height: 1.55; }
.page--artists .artist-hero__actions { --cluster-gap: var(--space-3); padding-top: var(--space-1); }

/* Tracks we've played */
.page--artists .artist-section__aside { font-family: var(--font-display); font-style: italic; color: var(--text-3); }
.page--artists .artist-section__nojs { color: var(--text-3); }
.page--artists .artist-tracks { border-top: 1px solid var(--border); }
.page--artists .artist-tracks .track__artist { display: none; }
.page--artists .artist-tracks .track__meta { font-size: var(--step--2); min-width: 0; }
@media (max-width: 599px) {
  /* Phones: "12 plays · last 3 hrs ago" is wider than the title column, and the shared .track__meta never
     wraps, so it painted under the heart and search buttons. Let it wrap (each part stays whole) and keep it
     inside its own column. */
  .page--artists .artist-tracks .track__meta { flex-wrap: wrap; column-gap: var(--space-2); row-gap: 0; max-width: 100%; overflow: hidden; white-space: normal; }
  .page--artists .artist-tracks .track__meta > * { white-space: nowrap; }
  .page--artists .artist-tracks .track__meta .track__ago::before { content: none; }
}
.page--artists .artist-row__plays { color: var(--text-2); font-weight: 500; font-size: var(--step--1); }
.page--artists .artist-row__loves {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: 34px;
  padding: 0 0.6em;
  color: var(--love);
  font-size: var(--step--2);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.page--artists .artist-row__loves .icon { width: 1.1em; height: 1.1em; }
.page--artists .artist-tracks__foot { display: flex; justify-content: center; padding-top: var(--space-5); }

/* Latest releases */
.page--artists .artist-releases,
.page--artists .artist-releases__skel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-6) var(--space-5);
}
.page--artists .release { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.page--artists .release__art .art { --art-size: 100%; border-radius: var(--radius-m); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--border); }
.page--artists .release__body { display: grid; gap: var(--space-1); min-width: 0; }
.page--artists .release__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.page--artists .release__kind { font-size: var(--step--2); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.page--artists .release__title { font-size: var(--step-2); line-height: 1.2; overflow-wrap: anywhere; }
.page--artists .release__date { color: var(--text-3); font-size: var(--step--1); }
.page--artists .release__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold); font-size: var(--step--1); font-weight: 500; text-decoration: none; justify-self: start; }
.page--artists .release__link:hover { color: var(--gold-2); text-decoration: underline; }
@media (min-width: 600px) {
  .page--artists .artist-releases--one { grid-template-columns: minmax(0, 1fr); }
  .page--artists .artist-releases--one .release { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: center; gap: var(--space-6); }
  .page--artists .artist-releases--one .release__title { font-size: var(--step-3); }
}

/* Support the artist */
.page--artists .artist-support { padding-block: var(--space-6) var(--space-4); }
.page--artists .artist-support:focus { outline: none; }
.page--artists .artist-support:focus-visible .artist-support__card { outline: 2px solid var(--focus); outline-offset: 3px; }
.page--artists .artist-support__card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--space-5) var(--space-7);
  align-items: center;
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  padding-bottom: clamp(var(--space-6), 5vw, var(--space-8));
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 60%),
    var(--surface-solid);
  box-shadow: var(--shadow-1);
}
.page--artists .artist-support__card::after {
  /* the Pitons along the bottom edge, like a sleeve's back cover */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  aspect-ratio: 1200 / 160;
  background: var(--text-3);
  opacity: 0.12;
  -webkit-mask: url("../img/pitons.svg") center bottom / 100% 100% no-repeat;
  mask: url("../img/pitons.svg") center bottom / 100% 100% no-repeat;
  pointer-events: none;
}
@media (min-width: 860px) {
  .page--artists .artist-support__card { grid-template-columns: minmax(0, 1.4fr) auto; }
}
.page--artists .artist-support__text { position: relative; z-index: 1; display: grid; gap: var(--space-3); }
.page--artists .artist-support__text p:not(.eyebrow) { max-width: 54ch; color: var(--text-2); }
.page--artists .artist-support__links { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }

/* Not in our log */
.page--artists .artist-missing { padding-top: var(--space-5); }
.page--artists .artist-missing__box { gap: var(--space-4); padding-block: clamp(var(--space-7), 7vw, var(--space-9)); }
.page--artists .artist-missing__title { max-width: 20ch; font-size: var(--step-5); overflow-wrap: anywhere; }
.page--artists .artist-missing__msg { max-width: 52ch; color: var(--text-2); }
.page--artists .artist-missing__suggest { display: grid; justify-items: center; gap: var(--space-2); }
.page--artists .artist-missing__suggest .cluster { justify-content: center; }
.page--artists .artist-missing__label { font-size: var(--step--2); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.page--artists .artist-missing__actions { justify-content: center; }
.page--artists .artist-missing__actions .btn { white-space: normal; text-align: center; }