/* Artists: the roster index, then one full-screen chapter per artist with a
   Skalpel-style flat-lay of physical media that comes apart as you scroll. */

/* ================= ROSTER INDEX ================= */
.roster {
  position: relative;
  min-height: 100svh;
  padding: 140px var(--gutter) 90px;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 80% 10%, rgba(255, 200, 130, .7), rgba(255, 200, 130, 0) 70%),
    linear-gradient(180deg, var(--lacquer) 0%, #ffeedd 100%);
  transition: background-color .6s;
}
.roster__panels { position: absolute; inset: 0; perspective: 1000px; pointer-events: none; }
.roster__panels i {
  position: absolute;
  top: -10%;
  height: 120%;
  width: 11vw;
  right: calc(4vw + var(--k) * 9vw);
  transform: rotateY(-48deg) translateZ(calc(var(--k) * -60px));
  transform-origin: right center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 20%), linear-gradient(90deg, rgba(255, 108, 18, .85), rgba(255, 160, 70, .5) 45%, rgba(255, 120, 30, .8));
  box-shadow: inset 2px 0 0 rgba(255, 255, 255, .85), 0 40px 80px -30px rgba(255, 110, 20, .6);
  opacity: calc(1 - var(--k) * .18);
}
.roster__panels i:nth-child(1) { --k: 0; } .roster__panels i:nth-child(2) { --k: 1; } .roster__panels i:nth-child(3) { --k: 2; } .roster__panels i:nth-child(4) { --k: 3; }
.roster__inner { position: relative; max-width: 1180px; margin: 0 auto; }
.roster__title {
  margin: 16px 0 56px;
  font-size: min(19vw, 300px);
  line-height: .78;
  text-transform: uppercase;
  font-variation-settings: "wdth" var(--w, 62);
  color: var(--sun-5);
  background: linear-gradient(180deg, #f06a2e, #c8352a 55%, #8f1f15);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.roster__title .char { display: inline-block; background: inherit; -webkit-background-clip: text; background-clip: text; }
.rindex { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.rindex__row {
  position: relative;
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 22px 8px;
  border-bottom: 2px solid var(--ink);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
}
.rindex__row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 60%, #fff));
  clip-path: inset(0 100% 0 0);
  transition: clip-path .7s var(--ease);
}
.rindex__row:hover::before, .rindex__row:focus-visible::before { clip-path: inset(0 0 0 0); }
.rindex__num { font-size: 13px; font-weight: 700; letter-spacing: .2em; font-variation-settings: "wdth" 125; color: var(--acrylic-deep); transition: color .4s; }
.rindex__name {
  font-size: clamp(40px, 7vw, 104px);
  font-weight: 900;
  line-height: .9;
  text-transform: uppercase;
  font-variation-settings: "wdth" 64;
  transition: font-variation-settings .8s var(--ease), color .4s, letter-spacing .8s var(--ease);
}
.rindex__meta { font-size: 11.5px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; font-variation-settings: "wdth" 118; color: var(--muted); text-align: right; transition: color .4s; }
.rindex__row:hover .rindex__name, .rindex__row:focus-visible .rindex__name { font-variation-settings: "wdth" 112; color: #fff; }
.rindex__row:hover .rindex__num, .rindex__row:hover .rindex__meta { color: #fff; }
.rfloat {
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 260px;
  aspect-ratio: 1;
  pointer-events: none;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 40%, rgba(40, 12, 4, .92), rgba(20, 6, 2, .96));
  box-shadow: 0 30px 60px -20px rgba(80, 20, 0, .7), inset 0 0 0 1px rgba(255, 200, 140, .3);
  opacity: 0;
  display: grid;
  place-items: center;
}
.rfloat img { width: 82%; }
@media (max-width: 700px) {
  .rindex__row { grid-template-columns: 40px 1fr; }
  .rindex__meta { grid-column: 2; text-align: left; }
  .rfloat { display: none; }
}

/* ================= ARTIST CHAPTER ================= */
.artist { position: relative; background: var(--dark); color: #fff; }
.artist__pin { position: relative; min-height: 100svh; overflow: clip; isolation: isolate; }
.artist__bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; opacity: .55; filter: saturate(1.15); }
.artist__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--dark) 92%, transparent) 0%, color-mix(in srgb, var(--dark) 70%, transparent) 45%, color-mix(in srgb, var(--dark) 20%, transparent) 100%),
    radial-gradient(50% 60% at 78% 50%, color-mix(in srgb, var(--hot) 45%, transparent), transparent 70%);
}
/* DORFic light strip along the top and bottom edges of every chapter */
.artist__pin::before, .artist__pin::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, var(--light), #fff, var(--light), transparent);
  box-shadow: 0 0 24px 4px color-mix(in srgb, var(--hot) 70%, transparent);
}
.artist__pin::before { top: 0; }
.artist__pin::after { bottom: 0; }
.artist__ghost {
  position: absolute;
  z-index: -1;
  bottom: 4%;
  left: 0;
  white-space: nowrap;
  font-size: min(18vw, 260px);
  font-weight: 900;
  line-height: .8;
  text-transform: uppercase;
  font-variation-settings: "wdth" 62;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--light) 40%, transparent);
  pointer-events: none;
}
.artist__grid {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  min-height: 100svh;
  padding: 120px var(--gutter) 80px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 40px 56px;
  align-items: start;
}
.artist__info { max-width: 520px; }
.artist__info .label { color: var(--light); }
.artist__info .label b { color: #fff; }
.artist__name { margin: 14px 0 6px; }
.artist__mark { width: min(360px, 100%); height: auto; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .55)) drop-shadow(0 0 30px color-mix(in srgb, var(--hot) 45%, transparent)); }
.artist--sealed .artist__mark { width: min(300px, 80%); }
.artist__formerly { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-variation-settings: "wdth" 118; color: color-mix(in srgb, var(--light) 80%, #fff); margin-bottom: 14px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 24px; padding: 0; list-style: none; }
.pills li { padding: 6px 12px; border: 1.5px solid color-mix(in srgb, var(--light) 70%, transparent); border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-variation-settings: "wdth" 120; }
.pills__origin { background: color-mix(in srgb, var(--hot) 35%, transparent); }
.artist__bio { display: grid; gap: 14px; font-size: 16.5px; color: #fff3e6; }
.releases { width: 100%; margin: 28px 0 22px; border-collapse: collapse; font-size: 14px; }
.releases caption { text-align: left; margin-bottom: 8px; color: var(--light); }
.releases tr { border-top: 1px solid color-mix(in srgb, var(--light) 35%, transparent); }
.releases tr:last-child { border-bottom: 1px solid color-mix(in srgb, var(--light) 35%, transparent); }
.releases th, .releases td { padding: 10px 8px 10px 0; text-align: left; vertical-align: baseline; }
.releases th { font-weight: 800; text-transform: uppercase; font-variation-settings: "wdth" 80; font-size: 16px; }
.releases__cat, .releases__date { font-size: 11px; letter-spacing: .16em; font-variation-settings: "wdth" 120; color: color-mix(in srgb, var(--light) 85%, #fff); white-space: nowrap; }
.artist__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.gel--static { cursor: default; }
.gel--static:hover { transform: none; }
.artist__embed { margin-top: 16px; border-radius: 14px; overflow: hidden; }
.artist__embed iframe { display: block; width: 100%; border: 0; }
.artist__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 20px 0 0; padding: 0; list-style: none; }
.artist__links a { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-variation-settings: "wdth" 112; text-decoration: none; color: var(--light); border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; }
.artist__links a:hover { color: #fff; border-color: #fff; }
.artist__news { display: grid; gap: 8px; margin-top: 26px; }
.artist__news .label { color: var(--light); }
.artist__news a { color: #fff; text-decoration: none; font-weight: 650; font-size: 15px; line-height: 1.3; }
.artist__news a span { display: inline-block; min-width: 96px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-variation-settings: "wdth" 118; color: var(--light); }
.artist__news a:hover { text-decoration: underline; text-decoration-color: var(--hot); text-underline-offset: 4px; }

/* ---------- the flat-lay ---------- */
.media { position: sticky; top: max(96px, calc(50svh - 300px)); aspect-ratio: 1; width: 100%; max-width: 600px; justify-self: center; perspective: 1400px; }
.media__stage { position: absolute; inset: 0; transform-style: preserve-3d; }
.media__stage > * { position: absolute; }
.media__sleeve {
  left: 4%; top: 6%; width: 62%; aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 40px 70px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08);
}
.media__sleeve img, .media__sleeve canvas { width: 100%; height: 100%; object-fit: cover; }
.media__sleeve-mark { position: absolute; inset: 18%; width: 64% !important; height: auto !important; object-fit: contain !important; }
.media__sleeve-print { position: absolute; right: 10px; bottom: 8px; font-size: 10px; letter-spacing: .2em; font-variation-settings: "wdth" 125; color: rgba(255, 255, 255, .8); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.media__vinyl { left: 12%; top: 8%; width: 58%; aspect-ratio: 1; }
.vinyl {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  background:
    conic-gradient(from 30deg, rgba(255, 200, 150, .0) 0deg, rgba(255, 210, 170, .22) 30deg, rgba(255, 200, 150, 0) 70deg, rgba(255, 200, 150, 0) 180deg, rgba(255, 210, 170, .18) 210deg, rgba(255, 200, 150, 0) 250deg),
    repeating-radial-gradient(circle, #120806 0 1.5px, #1d0f0b 1.5px 3px);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9), inset 0 0 0 2px rgba(255, 255, 255, .06);
  display: grid;
  place-items: center;
}
.vinyl img, .vinyl canvas { width: 36%; height: 36%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(0, 0, 0, .5); }
.vinyl::after { content: ""; position: absolute; width: 2.4%; aspect-ratio: 1; border-radius: 50%; background: var(--dark); }
.media__case {
  right: 2%; bottom: 8%; width: 46%; aspect-ratio: 1.12;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .05) 40%, rgba(255, 255, 255, .18));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45), inset 12px 0 0 rgba(255, 255, 255, .18), 0 30px 60px -20px rgba(0, 0, 0, .85);
  padding: 7% 6% 7% 13%;
  backdrop-filter: blur(2px);
}
.media__case-art { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 2px; }
.media__case-art canvas { width: 100%; height: 100%; }
.media__case-art span { position: absolute; left: 10px; bottom: 8px; font-size: 13px; font-weight: 900; text-transform: uppercase; font-variation-settings: "wdth" 70; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }

/* the cassette, in CSS */
.ctape {
  left: 30%; bottom: 3%; width: 54%; aspect-ratio: 100 / 64;
  border-radius: 14px / 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 22%),
    linear-gradient(135deg, color-mix(in srgb, var(--c) 92%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 70%, #000));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4), inset 0 -8px 16px rgba(0, 0, 0, .25), 0 30px 50px -18px rgba(0, 0, 0, .85), 0 0 50px -10px color-mix(in srgb, var(--c) 80%, transparent);
  padding: 6% 5% 0;
  display: grid;
  grid-template-rows: 1fr auto;
  transform: rotate(-8deg);
}
.ctape__label { position: relative; background: #fbf6ee; border-radius: 6px; padding: 21% 6% 0; color: var(--ink); overflow: hidden; height: 74%; }
.ctape__label canvas { position: absolute; left: 0; right: 0; top: 0; height: 28%; width: 100%; }
.ctape__label b { display: block; font-size: clamp(10px, 1.15vw, 16px); line-height: 1; text-transform: uppercase; font-variation-settings: "wdth" 64; font-weight: 900; }
.ctape__label small { font-size: 8px; letter-spacing: .18em; font-variation-settings: "wdth" 120; color: var(--acrylic-deep); }
.ctape__window {
  position: absolute; left: 22%; right: 22%; top: 55%; height: 18%;
  border-radius: 999px;
  background: rgba(30, 12, 6, .55);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6);
  display: flex; justify-content: space-between; align-items: center; padding: 0 6%;
}
.ctape__window i { width: 26%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, transparent 34%, #fbf6ee 36% 60%, #3b2419 62%); animation: reel 3.5s linear infinite paused; }
.ctape:hover .ctape__window i, .artist.is-active .ctape__window i { animation-play-state: running; }
@keyframes reel { to { transform: rotate(-360deg); } }
.ctape__foot { height: 16%; margin: 0 14%; background: color-mix(in srgb, var(--c) 70%, #000); clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); opacity: .8; }
.ctape__wrap {
  position: absolute; inset: -3%;
  border-radius: 18px / 26px;
  background: linear-gradient(115deg, rgba(255, 255, 255, .0) 30%, rgba(255, 255, 255, .35) 40%, rgba(180, 220, 255, .18) 48%, rgba(255, 200, 240, .2) 54%, rgba(255, 255, 255, 0) 64%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
}
.ctape__wrap span { position: absolute; right: 8%; top: 10%; padding: 6px 10px; border-radius: 999px; background: var(--acrylic); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; rotate: 8deg; }

@media (max-width: 900px) {
  .artist__grid { grid-template-columns: 1fr; padding-top: 110px; }
  .media { position: relative; top: 0; max-width: 480px; order: -1; }
}

/* ================= OUTRO ================= */
.roster-outro { padding: clamp(100px, 14vw, 180px) var(--gutter); text-align: center; background: radial-gradient(60% 80% at 50% 100%, #ffb066, var(--lacquer) 70%); }
.roster-outro h2 { margin: 14px 0 34px; font-size: clamp(56px, 10vw, 160px); text-transform: uppercase; font-variation-settings: "wdth" 64; color: var(--sun-5); }
.roster-outro h2 em { font-family: var(--f-script); font-style: normal; font-weight: 400; text-transform: none; color: var(--acrylic-deep); font-size: .7em; }
.roster-outro__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }