/* Artist page, in the manner of Apple Music's artist screen: a full-bleed portrait fills the top, the whole page is tinted by the
   image's dominant colour (--artwork-* come from the picture), the name sits on the photo, and everything scrolls under a glass bar. */

/* ---------------------------------------------------------------- the whole page takes the dominant colour */
body.is-artist {
  color-scheme: dark;
  --deep: color-mix(in srgb, var(--artwork-bg) 78%, #000);
  --bg: var(--deep); --surface: rgb(255 255 255 / .075); --surface-2: rgb(255 255 255 / .12); --surface-3: rgb(255 255 255 / .18);
  --material: color-mix(in srgb, var(--artwork-bg) 82%, transparent);
  --text: #fff; --text-2: rgb(255 255 255 / .76); --text-3: rgb(255 255 255 / .62);
  --sep: rgb(255 255 255 / .14); --fill: rgb(255 255 255 / .1); --fill-hover: rgb(255 255 255 / .17);
  --accent: var(--artwork-fill, #5b3df5); --accent-text: var(--artwork-accent, #b3a8ff); --on-accent: #fff;
  --lime: color-mix(in srgb, var(--artwork-glow) 55%, #fff);
  background: var(--deep); color: #fff;
  transition: background-color .6s var(--ease);
}
body.is-artist .site-footer { border-top-color: var(--sep); }
body.is-artist .site-nav a.is-active { background: rgb(255 255 255 / .16); }
body.is-artist .brand, body.is-artist .site-nav a, body.is-artist .search-pill, body.is-artist .btn--quiet, body.is-artist .round-btn { color: #fff; }
body.is-artist .site-nav a { opacity: .86; }
body.is-artist .search-pill, body.is-artist .round-btn { background: rgb(255 255 255 / .16); }
body.is-artist .btn--ink { background: #fff; color: #111; }
body.is-artist .tabbar { background: color-mix(in srgb, var(--artwork-bg) 84%, transparent); }

.ap { --p: 0; --y: 0; --pull: 0; --hero-h: clamp(480px, min(160vw, 86svh), 780px); --tint: color-mix(in srgb, var(--artwork-primary) 42%, var(--deep)); position: relative; isolation: isolate; }
@media (min-width: 820px) { .ap { --hero-h: clamp(560px, 82vh, 860px); } }

/* ---------------------------------------------------------------- hero */
.ap-hero { position: relative; height: var(--hero-h); overflow: clip; color: #fff; background: linear-gradient(160deg, var(--artwork-primary), var(--artwork-bg) 75%); }
.ap-media { position: absolute; inset: 0; overflow: hidden; }
.ap-img { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + 140px); object-fit: cover; object-position: 50% 18%; opacity: 0; transform-origin: 50% 0;
  transform: translate3d(0, calc(var(--y) * .42px), 0) scale(calc(1.06 + var(--p) * .08 + var(--pull) * 1.2)); filter: blur(calc(var(--p) * 18px + var(--pull) * 60px)); transition: opacity 700ms var(--ease); will-change: transform, filter; }
.ap-hero.is-loaded .ap-img { opacity: 1; }
.ap-mono { position: absolute; right: -6vw; bottom: -10vw; font: 800 78vw/1 var(--font-display); letter-spacing: -.07em; color: var(--artwork-primary); filter: brightness(1.55); opacity: .5; pointer-events: none; user-select: none; }
.ap-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgb(0 0 0 / .5) 0, rgb(0 0 0 / 0) 26%), linear-gradient(to top, var(--tint) 0%, color-mix(in srgb, var(--tint) 99%, transparent) 6%, color-mix(in srgb, var(--tint) 96%, transparent) 12%, color-mix(in srgb, var(--tint) 90%, transparent) 18%, color-mix(in srgb, var(--tint) 80%, transparent) 25%, color-mix(in srgb, var(--tint) 66%, transparent) 32%, color-mix(in srgb, var(--tint) 50%, transparent) 40%, color-mix(in srgb, var(--tint) 34%, transparent) 48%, color-mix(in srgb, var(--tint) 20%, transparent) 56%, color-mix(in srgb, var(--tint) 9%, transparent) 64%, color-mix(in srgb, var(--tint) 3%, transparent) 72%, transparent 82%);
}
.ap-shade::after { content: ""; position: absolute; inset: 0; background: var(--tint); opacity: calc(var(--p) * .72); }
.ap-body { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: var(--s3); padding-bottom: var(--s6); transform-origin: 0 100%;
  opacity: calc(1 - var(--p) * 1.6); transform: translate3d(0, calc(var(--p) * -34px), 0) scale(calc(1 - var(--p) * .05)); will-change: transform, opacity; }
.ap-name { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font: 800 calc(clamp(52px, 15vw, 112px) * var(--t-fit, 1))/.9 var(--font-display); letter-spacing: -.06em; overflow-wrap: anywhere; text-shadow: 0 2px 40px rgb(0 0 0 / .35); }
.ap-name--long { font-size: calc(clamp(40px, 11vw, 84px) * var(--t-fit, 1)); }
.ap-name .verified { flex: none; font-size: .46em; line-height: 1; filter: drop-shadow(0 2px 10px rgb(0 0 0 / .35)); }
.ap-name .verified .icon { width: 1em; height: 1em; font-size: 1em; color: #fff; }
.ap-logo { max-height: clamp(70px, 18vw, 150px); max-width: min(100%, 520px); width: auto; object-fit: contain; filter: drop-shadow(0 2px 24px rgb(0 0 0 / .4)); }
.ap-sub { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 16px; font-weight: 550; color: rgb(255 255 255 / .82); }
.ap-sub b { color: #fff; font-weight: 700; }
.ap-sub i { font-style: normal; opacity: .6; }
.ap-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.ap-play, .ap-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; font-size: 16px; font-weight: 650; letter-spacing: -.01em; transition: transform var(--t-fast) var(--ease), background var(--t-fast); }
.ap-play { background: #fff; color: #111; padding: 0 28px 0 22px; }
.ap-play .icon { width: 22px; height: 22px; font-size: 22px; }
.ap-pill { background: rgb(255 255 255 / .2); color: #fff; -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); }
.ap-pill--solid { background: #fff; color: #111; }
.ap-pill--sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.ap-pill .icon { width: 20px; height: 20px; font-size: 20px; }
.ap-pill[aria-pressed="true"] { background: var(--artwork-accent, #fff); color: #0d0d10; }
.ap-play:active, .ap-pill:active { transform: scale(.96); }
@media (hover: hover) { .ap-pill:hover { background: rgb(255 255 255 / .3); } .ap-pill--solid:hover { background: #fff; } .ap-pill[aria-pressed="true"]:hover { filter: brightness(1.06); } .ap-play:hover { background: #f0f0f0; } }

/* entrance: photo settles, name rises, buttons follow */
@media (prefers-reduced-motion: no-preference) {
  .ap-name, .ap-sub, .ap-actions { animation: ap-rise 700ms var(--ease-out) both; }
  .ap-sub { animation-delay: 70ms; } .ap-actions { animation-delay: 140ms; }
  .ap-hero.is-loaded .ap-img { animation: ap-settle 1100ms var(--ease-out) both; }
  @keyframes ap-rise { from { opacity: 0; transform: translate3d(0, 26px, 0); } }
  @keyframes ap-settle { from { filter: saturate(.7) brightness(.85); } }
}

/* wide screens: portraits sit on the right and dissolve into the colour; wide photos fill the width */
@media (min-width: 820px) {
  .ap-body { padding-bottom: var(--s10); }
  .ap-img { object-position: 50% 22%; }
  .ap-hero[data-shape="portrait"] .ap-media { left: auto; width: min(68%, 920px); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 42%); mask-image: linear-gradient(to right, transparent 0, #000 42%); }
  .ap-hero[data-shape="portrait"] .ap-shade { background: linear-gradient(to bottom, rgb(0 0 0 / .45) 0, transparent 22%), linear-gradient(to top, var(--tint) 0%, color-mix(in srgb, var(--tint) 99%, transparent) 6%, color-mix(in srgb, var(--tint) 96%, transparent) 12%, color-mix(in srgb, var(--tint) 90%, transparent) 18%, color-mix(in srgb, var(--tint) 80%, transparent) 25%, color-mix(in srgb, var(--tint) 66%, transparent) 32%, color-mix(in srgb, var(--tint) 50%, transparent) 40%, color-mix(in srgb, var(--tint) 34%, transparent) 48%, color-mix(in srgb, var(--tint) 20%, transparent) 56%, color-mix(in srgb, var(--tint) 9%, transparent) 64%, color-mix(in srgb, var(--tint) 3%, transparent) 72%, transparent 82%), linear-gradient(to right, color-mix(in srgb, var(--artwork-bg) 60%, transparent), transparent 55%); }
}

/* ---------------------------------------------------------------- page wash: the dominant colour bleeds down the page */
.ap-wash { position: absolute; left: 0; right: 0; top: var(--hero-h); height: 1000px; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, var(--tint) 0, var(--deep) 100%); }
.ap-content { position: relative; padding-top: var(--s2); padding-bottom: var(--s6); }

/* ---------------------------------------------------------------- bar title (appears once the hero has scrolled away) */
.ap-bartitle { display: block; font: 750 17px var(--font-display); letter-spacing: -.02em; color: #fff; opacity: var(--bar-t, 0); transform: translateY(calc((1 - var(--bar-t, 0)) * 6px)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }

/* ---------------------------------------------------------------- content blocks */
.ap-block { margin-top: var(--s8); }
.ap-block > h2, .ap-content .section-head h2 { font: 800 clamp(24px, 3vw, 30px)/1.05 var(--font-display); letter-spacing: -.045em; }
.ap-block > h2 { margin-bottom: var(--s4); }
.ap-content .section { margin-top: var(--s10); }
.ap-latest-card { display: flex; align-items: center; gap: var(--s5); padding: var(--s3); border-radius: 28px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--sep); transition: background var(--t-fast), transform var(--t-base) var(--ease-out); }
.ap-latest-card:hover { background: var(--surface-2); transform: translateY(-2px); }
.ap-latest-art { flex: none; width: 120px; height: 120px; border-radius: 20px; overflow: hidden; box-shadow: 0 14px 34px rgb(0 0 0 / .35); }
.ap-latest-art .art, .ap-latest-art .rel-ph, .ap-latest-art .rel-art { width: 100%; height: 100%; aspect-ratio: 1; }
.ap-latest-text { display: grid; gap: 4px; min-width: 0; }
.ap-latest-text small { font: 700 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.ap-latest-text strong { font: 800 clamp(22px, 3vw, 32px)/1.05 var(--font-display); letter-spacing: -.04em; overflow-wrap: anywhere; }
.ap-latest-text .meta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ap-latest-cta { display: inline-flex; align-items: center; gap: 2px; margin-top: 6px; font-weight: 650; color: var(--accent-text); }
.ap-latest-cta .icon { width: 20px; height: 20px; font-size: 20px; }
@media (min-width: 820px) { .ap-latest-art { width: 180px; height: 180px; border-radius: 24px; } .ap-latest-card { padding: var(--s4); gap: var(--s8); } }

/* tinted lists / cards read as translucent glass on the colour */
.ap .row:hover { background: rgb(255 255 255 / .08); }
.ap .rel-media, .ap .feed-item .feed-media { box-shadow: 0 10px 28px rgb(0 0 0 / .32); }
.ap .rel-media { background: rgb(255 255 255 / .06); }
.ap .spotlight { border-radius: 28px; }
.ap .group, .ap .about-card { background: var(--surface); }
.ap .releases-empty { padding: var(--s6); border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--sep); }
.ap .announce { margin-top: var(--s5); }

/* ---------------------------------------------------------------- about */
.ap-about { display: grid; gap: var(--s6); }
.ap-about-art { overflow: hidden; border-radius: 30px; box-shadow: 0 20px 50px rgb(0 0 0 / .35); aspect-ratio: 4 / 3; background: var(--surface-2); }
.ap-about-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.ap-about-body { display: grid; gap: var(--s5); align-content: start; min-width: 0; }
.ap-about-body .desc-text { font-size: 18px; line-height: 1.6; color: rgb(255 255 255 / .9); max-width: 62ch; }
.ap-facts { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s8); margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--text-3); }
.ap-facts li { display: grid; gap: 2px; }
.ap-facts b { font: 800 22px/1 var(--font-display); letter-spacing: -.03em; color: #fff; }
.ap-links { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; border-radius: 22px; overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--sep); }
.ap-links li + li { box-shadow: 0 -1px 0 var(--sep); }
.ap-links a { display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: 0 var(--s5); font-weight: 650; transition: background var(--t-fast); }
.ap-links a:hover { background: var(--surface-2); }
.ap-links small { margin-left: auto; color: var(--text-3); font-weight: 500; font-size: 13px; }
.ap-links .icon { color: var(--text-3); width: 18px; height: 18px; font-size: 18px; }
.ap-more-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: 15px; }
.ap-more-links a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); font-weight: 600; }
.ap-more-links .icon { width: 18px; height: 18px; font-size: 18px; }
@media (min-width: 820px) { .ap-about { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: var(--s12); align-items: start; } .ap-about-art { aspect-ratio: 1; } }

.rail--people { display: flex; gap: var(--s4); overflow-x: auto; scrollbar-width: none; padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); }
.person { flex: none; width: 128px; display: grid; gap: 4px; justify-items: start; }
.person .avatar { --size: 128px !important; width: 128px; height: 128px; border-radius: 50%; box-shadow: 0 10px 28px rgb(0 0 0 / .32); }
.person strong { font: 700 15px/1.2 var(--font-display); letter-spacing: -.02em; }

/* ---------------------------------------------------------------- scroll reveal (only when JS has started it) */
.ap-anim .ap-content > *, .ap-anim .ap-content .catalog > * { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.ap-anim .ap-content > .is-in, .ap-anim .ap-content .catalog > .is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ap-anim .ap-content > *, .ap-anim .ap-content .catalog > * { opacity: 1; transform: none; transition: none; } .ap-img, .ap-body { transform: none !important; } }

/* ---------------------------------------------------------------- the photo melts into the page: dissolve + progressive blur */
.ap-media { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 60%, transparent 99%); mask-image: linear-gradient(to bottom, #000 0, #000 60%, transparent 99%); }
@media (min-width: 820px) {
  .ap-hero[data-shape="portrait"] .ap-media {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 42%), linear-gradient(to bottom, #000 0, #000 60%, transparent 99%);
    mask-image: linear-gradient(to right, transparent 0, #000 42%), linear-gradient(to bottom, #000 0, #000 60%, transparent 99%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
}
/* Progressive blur: six stacked backdrop-filter layers, each masked to a band, blur doubling toward the bottom edge. */
.ap-blur { position: absolute; left: 0; right: 0; bottom: 0; height: 54%; pointer-events: none; z-index: 1; }
.ap-blur i { position: absolute; inset: 0; }
.ap-blur i:nth-child(1) { -webkit-backdrop-filter: blur(.5px); backdrop-filter: blur(.5px); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 32%, transparent 48%); mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 32%, transparent 48%); }
.ap-blur i:nth-child(2) { -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); -webkit-mask-image: linear-gradient(to bottom, transparent 12%, #000 28%, #000 44%, transparent 60%); mask-image: linear-gradient(to bottom, transparent 12%, #000 28%, #000 44%, transparent 60%); }
.ap-blur i:nth-child(3) { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); -webkit-mask-image: linear-gradient(to bottom, transparent 28%, #000 44%, #000 58%, transparent 74%); mask-image: linear-gradient(to bottom, transparent 28%, #000 44%, #000 58%, transparent 74%); }
.ap-blur i:nth-child(4) { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(to bottom, transparent 44%, #000 60%, #000 72%, transparent 86%); mask-image: linear-gradient(to bottom, transparent 44%, #000 60%, #000 72%, transparent 86%); }
.ap-blur i:nth-child(5) { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); -webkit-mask-image: linear-gradient(to bottom, transparent 60%, #000 76%, #000 86%, transparent 96%); mask-image: linear-gradient(to bottom, transparent 60%, #000 76%, #000 86%, transparent 96%); }
.ap-blur i:nth-child(6) { -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); -webkit-mask-image: linear-gradient(to bottom, transparent 74%, #000 90%); mask-image: linear-gradient(to bottom, transparent 74%, #000 90%); }
.ap-shade { z-index: 2; }
.ap-body { z-index: 3; }

/* One photo does both jobs. Tall portraits (3:4, 2:3) keep their head and shoulders at the top of the screen. */
.ap-hero[data-shape="portrait"] .ap-img { object-position: 50% 0%; }
.ap-hero[data-shape="landscape"] .ap-img { object-position: 50% 22%; }
@media (min-width: 820px) {
  .ap-hero[data-shape="portrait"] .ap-img { object-position: 50% 4%; }
  .ap-hero[data-shape="portrait"] .ap-media { width: min(46%, 760px); right: clamp(0px, 4vw, 80px); }
}

/* Phones: a portrait photo is shown exactly as in the editor preview: a 3:4 frame, cropped from the top. */
@media (max-width: 819px) {
 /* .ap[data-shape="portrait"] { --hero-h: calc(100vw * 4 / 3); }*/
  .ap[data-shape="portrait"] .ap-img { height: 100%; object-position: 50% 0%; }
}

/* The photo is shown at its natural size at rest. Scrolling down eases it larger (anchored at the top, so no gap opens) while it blurs
   and dims; pulling down past the top (iOS rubber-band) stretches it too. Everything follows --p / --pull set by creator.js. */
.ap-img { height: 100%; transform-origin: 50% 0; transform: scale(calc(1 + var(--p) * .14 + var(--pull) * 1.2)); will-change: transform, filter; }
.ap-hero.is-loaded .ap-img { animation: none; }
@media (prefers-reduced-motion: reduce) { .ap-img { transform: none; filter: none; } }

/* ---------------------------------------------------------------- logo: always white; phones centre the whole intro */
.ap-logo { filter: brightness(0) invert(1) drop-shadow(0 2px 24px rgb(0 0 0 / .4)) !important; }
@media (max-width: 819px) {
  .ap-body { justify-items: center; text-align: center; }
  .ap-name { justify-content: center; }
  .ap-logo { margin-inline: auto; object-position: center; }
  .ap-sub { justify-content: center; }
  .ap-actions { justify-content: center; }
}

/* ---------------------------------------------------------------- desktop: the photo fills the right side edge to edge and melts into the colour on its left and bottom */
@media (min-width: 820px) {
  .ap { --hero-h: clamp(820px, 74vh, 740px); }
  .ap-hero[data-shape="portrait"] .ap-media, .ap-hero[data-shape="landscape"] .ap-media {
    left: auto; right: 0; width: min(62%, 980px);
    -webkit-mask-image: linear-gradient(to right, transparent 0, rgb(0 0 0 / .55) 14%, #000 38%), linear-gradient(to bottom, #000 0, #000 62%, transparent 99%);
    mask-image: linear-gradient(to right, transparent 0, rgb(0 0 0 / .55) 14%, #000 38%), linear-gradient(to bottom, #000 0, #000 62%, transparent 99%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .ap-hero .ap-img { object-position: 50% 0%; }
  .ap-hero[data-shape="landscape"] .ap-media { width: 100%; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 99%); mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 99%); }
  .ap-body { padding-bottom: var(--s12); max-width: calc(var(--content-max) + var(--gutter) * 2); }
  .ap-name { font-size: clamp(64px, 8vw, 124px); }
  .ap-shade { background: linear-gradient(to bottom, rgb(0 0 0 / .45) 0, transparent 20%), linear-gradient(to right, color-mix(in srgb, var(--tint) 90%, transparent) 0, color-mix(in srgb, var(--tint) 55%, transparent) 30%, transparent 58%), linear-gradient(to top, var(--tint) 0, color-mix(in srgb, var(--tint) 80%, transparent) 14%, transparent 50%); }
}

/* website (not installed): solid dominant colour bar on phones */
@media (max-width: 819px) and (not (display-mode: standalone)) and (not (display-mode: fullscreen)) and (not (display-mode: minimal-ui)) {
  body.is-artist .tabbar { background: var(--deep); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media all { .ap-name .verified { display: none; } }