/* =========================================================
   PROLIFIQUE RECORDS — artist pages (extends styles.css)
   ========================================================= */

/* the page arrives under the curtain, artist.js lifts it */
.page-artist .curtain { clip-path: inset(0 0 0 0); }

/* ---------- Mini logo, bottom-right ---------- */
.object--mini {
  left: auto; top: auto; right: var(--gutter); bottom: var(--gutter);
  width: clamp(96px, 11vw, 160px);
}

/* ---------- Hero: portrait opens up to full-bleed ---------- */
.a-hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.a-hero__media { position: absolute; inset: 0; overflow: hidden; }
.a-hero__media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.a-hero__shade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(14,14,14,.35), rgba(14,14,14,0) 40%, rgba(14,14,14,.55));
  opacity: 0;
}
.a-hero__name {
  position: absolute; left: 0; right: 0; bottom: 64px;
  padding: 0 var(--gutter);
  z-index: 2;
  mix-blend-mode: difference;
  line-height: .8;
}
.a-hero__index { position: absolute; left: var(--gutter); top: 104px; z-index: 2; mix-blend-mode: difference; }
.a-hero__meta  { position: absolute; right: var(--gutter); top: 104px; z-index: 2; text-align: right; mix-blend-mode: difference; }
.a-hero__foot  {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--gutter); z-index: 2;
  display: flex; justify-content: space-between; mix-blend-mode: difference;
}

/* ---------- Keyword marquee ---------- */
.a-tags { padding: 96px 0 0; overflow: hidden; white-space: nowrap; }
.a-tags .release__track { font-size: clamp(52px, 9vw, 180px); }

/* ---------- Bio ---------- */
.a-bio { padding: 128px var(--gutter); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto 1fr; column-gap: 6vw; row-gap: 16px; align-content: start; }
/* computer: the artist's photo next to the bio */
.a-bio__photo { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; background: #000; }
.a-bio__photo img { width: 100%; height: 100%; object-fit: cover; }
.a-bio > .caption, .a-bio__lead { grid-column: 2; }
.a-bio__lead { font-size: clamp(24px, 3vw, 44px); line-height: 1; letter-spacing: -.035em; max-width: 24ch; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.a-bio__lead .w { opacity: .14; transition: opacity .25s; }
.a-bio__lead .w.on { opacity: 1; }
.a-bio__cols { grid-column: 2; align-self: start; display: grid; grid-template-columns: 1fr; gap: .8em; margin-top: 8px; } /* one block: paragraphs one under the other */
.a-bio__cols p { max-width: none; font-size: clamp(16px, 1.65vw, 26px); line-height: 1.5; color: #cfcfcf; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.a-bio__cols em { font-size: 1em; font-style: italic; font-weight: 800; color: var(--white); } /* same size as the text around it */

/* ---------- Facts ---------- */
.a-facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  padding: 0 var(--gutter) 128px;
}
.a-fact { border-top: 1px solid var(--faint); padding-top: 16px; display: grid; gap: 24px; }
.a-fact__v { font-size: clamp(26px, 3vw, 44px); line-height: 1; letter-spacing: -.035em; }
.a-fact__v .serif { font-style: italic; letter-spacing: 0; }

/* ---------- Section heads ---------- */
.a-head { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 0 var(--gutter); margin-bottom: 32px; }
.a-head span:last-child { text-align: right; }

/* ---------- Projects ---------- */
.a-projects { padding: 64px 0 128px; }
.a-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 0 var(--gutter); }
.card { display: grid; gap: 16px; perspective: 1000px; }
.card__cover { display: block; aspect-ratio: 1; overflow: hidden; transform-style: preserve-3d; will-change: transform; }
.card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.card:hover .card__cover img { transform: scale(1.06); }
.card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.card__title { font-size: clamp(30px, 3vw, 48px); line-height: .9; transition: transform .7s var(--ease); }
.card:hover .card__title { transform: translateX(16px); font-style: italic; }
.card__txt { color: #cfcfcf; max-width: 46ch; }

/* ---------- Gallery: horizontal pinned track ---------- */
.a-gallery { position: relative; overflow: hidden; }
.a-gallery__inner { height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.a-gallery__track { display: flex; gap: 16px; padding: 0 var(--gutter); width: max-content; will-change: transform; }
.a-gallery__track figure { margin: 0; height: 68svh; overflow: hidden; flex: none; }
.a-gallery__track figure:nth-child(even) { height: 52svh; align-self: flex-end; }
.a-gallery__track img { height: 100%; width: auto; object-fit: cover; will-change: transform; }
.a-gallery__count { font-variant-numeric: tabular-nums; }

/* ---------- Video ---------- */
.a-video { padding: 128px var(--gutter); }
.a-video__frame { max-width: 1200px; margin: 0 auto; }
.a-video__frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000;
  width: 100%; cursor: pointer; display: block;
}
.a-video__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity .6s; opacity: .8; }
.a-video__frame:hover img { transform: scale(1.04); opacity: 1; }
.a-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.a-video__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: clamp(96px, 12vw, 180px); aspect-ratio: 1; border-radius: 50%;
  background: var(--white); color: var(--onyx);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  transition: scale .6s var(--ease);
}
.a-video__frame:hover .a-video__play { scale: 1.12; }

/* ---------- Listen / follow ---------- */
.a-listen { padding: 64px 0 128px; }
.a-links li { border-top: 1px solid var(--faint); }
.a-links li:last-child { border-bottom: 1px solid var(--faint); }
.a-links a {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 2fr auto; align-items: baseline; gap: 16px;
  padding: 20px var(--gutter);
  transition: color .5s var(--ease);
}
.a-links a::before {
  content: ""; position: absolute; inset: 0; background: var(--white);
  transform: translateY(101%); transition: transform .6s var(--ease);
}
.a-links a > * { position: relative; }
.a-links a:hover { color: var(--onyx); }
.a-links a:hover::before { transform: translateY(0); }
.a-links__arrow { font-size: clamp(26px, 3vw, 44px); line-height: 1; transition: transform .6s var(--ease); }
.a-links a:hover .a-links__arrow { transform: translateX(8px); }

/* ---------- Next artist ---------- */
.a-next { position: relative; padding: 128px 0 64px; overflow: hidden; }
.a-next a { display: block; position: relative; }
.a-next__img {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: min(30vw, 400px); aspect-ratio: 4 / 5; overflow: hidden;
  clip-path: inset(50% 0 50% 0);
  transition: clip-path .9s var(--ease-io);
}
.a-next__img img { width: 100%; height: 100%; object-fit: cover; }
.a-next a:hover .a-next__img, .a-next.is-in .a-next__img { clip-path: inset(0 0 0 0); }
.a-next__name { display: block; position: relative; z-index: 1; mix-blend-mode: difference; padding: 0 var(--gutter); line-height: .86; }
.a-next__name .char { transition: transform .6s var(--ease); }
.a-next a:hover .a-next__name .char { transform: translateY(-6%); }
.a-next a:hover .a-next__name .char:nth-child(odd) { transform: translateY(6%); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .a-hero__index, .a-hero__meta { top: 84px; }
  .a-hero__name { bottom: 56px; }
  .a-bio { grid-template-columns: 1fr; }
  .a-bio__photo { display: none; } /* phones and tablets: no photo next to the bio */
  .a-bio > .caption, .a-bio__lead { grid-column: 1; }
  .a-bio__cols { grid-column: 1; grid-template-columns: 1fr; margin-top: 8px; }
  .a-bio__cols p { max-width: none; font-size: 16px; }
  .a-facts { grid-template-columns: 1fr; gap: 32px; }
  .a-cards { grid-template-columns: 1fr; gap: 64px; }
  .a-links a { grid-template-columns: 1fr auto; }
  .a-links a > .caption { display: none; }
  .a-next__img { width: 56vw; }
}

/* ---------- Listen: streaming profiles, right under the hero ---------- */
.a-stream {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  padding: 40px var(--gutter); border-bottom: 1px solid var(--faint);
}
.a-stream__label { color: var(--dim); }
.a-stream__list { display: flex; flex-wrap: wrap; gap: 10px; }
.a-stream__btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border: 1px solid rgba(254, 254, 254, .35); border-radius: 999px;
  font-weight: 700; font-size: 15px; letter-spacing: .02em;
  transition: background .3s, color .3s, border-color .3s;
}
.a-stream__btn:hover { background: var(--white); color: var(--onyx); border-color: var(--white); }
.a-stream__ico { width: 22px; height: 22px; flex: none; fill: currentColor; }
.a-stream__arrow { transition: transform .4s var(--ease); }
.a-stream__btn:hover .a-stream__arrow { transform: translateX(4px); }
/* social networks: round logos next to the streaming buttons */
.a-social { display: flex; align-items: center; gap: 10px; }
.a-social__label { color: var(--dim); margin-right: 6px; }
.a-social__btn {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(254, 254, 254, .35); transition: background .3s, color .3s, border-color .3s;
}
.a-social__btn svg { width: 22px; height: 22px; fill: currentColor; }
.a-social__btn:hover { background: var(--white); color: var(--onyx); border-color: var(--white); }
@media (max-width: 720px) {
  .a-stream { padding: 28px var(--gutter); }
  .a-social { width: 100%; }
  .a-stream__list { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .a-stream__btn { justify-content: space-between; gap: 8px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
  .a-stream__btn .roll { flex: 1; }
}

/* ---------- The two other artists, side by side ---------- */
.a-others { padding: 112px var(--gutter) 64px; }
.a-others .a-head { padding: 0; }
.a-others__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.a-other { display: grid; gap: 14px; }
.a-other__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #000; }
.a-other__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.a-other:hover .a-other__img img { transform: scale(1.04); }
.a-other__name {
  font-size: clamp(34px, 4.6vw, 84px); line-height: .9; font-weight: 800; font-style: italic;
  letter-spacing: -.03em; text-transform: uppercase; transition: transform .6s var(--ease);
}
.a-other:hover .a-other__name { transform: translateX(10px); }
.a-other__go { color: var(--dim); transition: color .4s; }
.a-other:hover .a-other__go { color: var(--white); }
@media (max-width: 720px) {
  .a-others { padding-top: 80px; }
  .a-others__grid { grid-template-columns: 1fr; gap: 36px; }
  .a-other__name { font-size: 9.4vw; }
}