/* ============================================================
   CAESAR'S ANGELS — PROJECTS PAGE v5
   Natural portrait images · Split artist layout
   ============================================================ */

/* ── Hero ── */
.proj-hero { position: relative; height: 80vh; min-height: 460px; display: flex; align-items: flex-end; overflow: hidden; }
.proj-hero__bg { position: absolute; inset: 0; }
.proj-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.proj-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(42,51,36,0.95) 0%, rgba(42,51,36,0.35) 55%, rgba(42,51,36,0.08) 100%); }
.proj-hero__content { position: relative; z-index: 3; padding: 0 var(--gutter) clamp(3rem,6vw,5rem); width: 100%; max-width: var(--max-w); margin: 0 auto; }
.proj-hero__h1 { font-family: var(--font-disp); font-size: clamp(3.5rem,9vw,9rem); font-weight: 400; line-height: 0.88; letter-spacing: 0.02em; text-transform: uppercase; color: #F0EDE4; max-width: 700px; }

/* ── Filter bar ── */
.proj-filter { background: var(--deep); position: sticky; top: var(--nav-h); z-index: 100; }
.proj-filter__inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; }
.filter-tabs { display: flex; }
.filter-tab { padding: 1rem 1.4rem; font-size: 0.62rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: #4B463F; border-right: none; cursor: none; transition: color 250ms; background: transparent; }
.filter-tab:hover { color: var(--text-1); }
.filter-tab.active { color: var(--gold); }
.proj-count { font-size: 0.6rem; letter-spacing: 0.18em; color: var(--text-1); }

/* ── Standard project entries ── */
.project-entry { display: grid; grid-template-columns: 1fr 1fr; border-bottom: none; background: var(--void); }
.project-entry.hidden { display: none; }
.project-entry:nth-child(even) { direction: rtl; }
.project-entry:nth-child(even) > * { direction: ltr; }
.project-entry__visual { position: relative; min-height: clamp(340px, 45vw, 600px); overflow: hidden; background: var(--surface); }
.project-entry__visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 900ms var(--ease-out); }
.project-entry:hover .project-entry__visual img { transform: scale(1.04); }
.project-entry__content { padding: clamp(2.5rem,5vw,5rem) clamp(2rem,4vw,4rem); display: flex; flex-direction: column; justify-content: center; background: var(--base); }
.proj-entry__num { font-size: 0.58rem; letter-spacing: 0.2em; color: var(--gold); font-weight: 400; margin-bottom: 1.5rem; display: block; }
.proj-entry__cat { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.75rem; }
.proj-entry__title { font-family: var(--font-disp); font-size: clamp(1.8rem,3vw,3rem); font-weight: 400; color: var(--text-1); line-height: 1.0; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.02em; }
.proj-entry__sub { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--text-2); margin-bottom: 1.5rem; }
.proj-entry__divider { display: none; }
.proj-entry__desc { font-size: 0.85rem; font-weight: 300; color: var(--text-2); line-height: 1.9; margin-bottom: 2rem; max-width: 420px; }
.proj-entry__actions { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; align-items: center; }

/* ── Streaming icons — brand marks, NO boxes ── */
.streaming-icons { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.stream-icon { display: flex; align-items: center; justify-content: center; color: var(--text-2); transition: color 280ms, transform 200ms; cursor: none; text-decoration: none; }
.stream-icon:hover { transform: scale(1.18); }
.stream-icon svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.stream-icon--spotify:hover  { color: #1DB954; }
.stream-icon--apple:hover    { color: #FA243C; }
.stream-icon--audiomack:hover { color: #FFA200; }
.stream-icon--boomplay:hover  { color: #00A0E9; }


/* ════════════════════════════════════════════════
   SHARED ARTIST SPLIT — compact banner strip
   ════════════════════════════════════════════════ */
.artist-split {
  display: grid;
  grid-template-columns: 1fr clamp(280px, 38vw, 480px);
  overflow: hidden;
  border-bottom: none;
}

/* ── Bio panel (left) ── */

/* ── Slider (right) ── */
.artist-split__slider {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  height: clamp(380px, 48vw, 560px); /* tall enough to show full portrait */
}

/* Each slide stacks absolutely, crossfades in/out */
.artist-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1000ms cubic-bezier(0.4,0,0.2,1);
}
.artist-slide.active { opacity: 1; }
.artist-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;   /* always keep faces visible */
  display: block;
  transition:

transform 10s ease,

filter .6s ease;
}

/* Slide dots */
.artist-slide-dots {
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 5;
}
.artist-slide-dot {
  width: 18px; height: 1px; background: rgba(43,42,39,0.20);
  transition: background 350ms, width 350ms; cursor: none;
  border: none; padding: 5px 0; position: relative;
}
.artist-slide-dot::after { content: ''; position: absolute; left:0; right:0; top:-6px; bottom:-6px; }
.artist-slide-dot.active { background: var(--gold); width: 30px; }

/* Bio panel */
.artist-split__bio {
  background: var(--base);
  padding: 1.75rem clamp(1.5rem, 3vw, 2.5rem);
  display: flex; flex-direction: column; justify-content: center;

}
.artist-split__name {
  font-family: var(--font-disp);
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  font-weight: 400; line-height: 0.9;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #F0EDE4; margin-bottom: 0.2rem;
}
.artist-split__aka  { font-size: 0.6rem; letter-spacing: 0.15em; color: var(--text-2); font-style: italic; margin-bottom: 0.3rem; }
.artist-split__genre { font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.1rem; }
.artist-split__role {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: 0.85rem;
}
.artist-split__desc { display: none; } /* not needed in compact strip */
.artist-split__actions { display: flex; gap: 1rem; margin-top: 0.5rem; }


/* ════════════════════════════════════════════════
   CAESFIRE — RELEASES (compact card)
   ════════════════════════════════════════════════ */
.caesfire-showcase { border-bottom: none; background: var(--void); }
.caesfire-showcase.hidden { display: none; }
.caesfire-releases {
  background: var(--base);

  padding: 2rem var(--gutter);
}
/* MOSES EP wrapper padding */
.moses-showcase > .moses-ep { padding: 0; }
.moses-ep-wrap { padding: 0 var(--gutter) 2rem; background: var(--base); border-top: none; }

/* Compact horizontal card */
.caesfire-single {
  display: flex;
  align-items: stretch;
  max-width: 820px;
  margin: 0 auto;
  border: 1px solid var(--border-1);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
}
.caesfire-single__media {
  display: flex;
  flex-direction: column;
  width: 200px;
  flex-shrink: 0;
}
.caesfire-single__cover {
  flex: 1;
  overflow: hidden;
  min-height: 160px;
}
.caesfire-single__cover img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 900ms var(--ease-out); }
.caesfire-single:hover .caesfire-single__cover img { transform: scale(1.04); }
.caesfire-single__video-wrap { overflow: hidden; background: #000; flex: 1; min-height: 0; }
.caesfire-single__video-wrap .video-feature { aspect-ratio: unset; width: 100%; height: 100%; margin-bottom: 0; border-radius: 0; }
.caesfire-single__info {
  flex: 1;
  padding: 1.5rem 1.75rem;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--surface);
}

.caesfire-single__tags-line { font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.2rem; }
.release-eyebrow { font-size: 0.55rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(240,237,228,0.70); display: block; margin-bottom: 0.5rem; }
.caesfire-single__label { font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.4rem; display: block; }
.caesfire-single__title { font-family: var(--font-disp); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; color: #F0EDE4; line-height: 0.94; margin-bottom: 0.5rem; }
.caesfire-single__desc { font-size: 0.8rem; font-weight: 300; color: var(--text-2); line-height: 1.75; margin-bottom: 1rem; max-width: 380px; }
.caesfire-single__actions { margin: 0 0 1rem; }
.caesfire-audio { margin-bottom: 1rem; }
.caesfire-audio__bar { display: flex; align-items: center; gap: 0.85rem; }
.caesfire-audio__pp { font-size: 0.9rem; color: var(--gold); cursor: none; width: 24px; flex-shrink: 0; transition: color 200ms; }
.caesfire-audio__pp:hover { color: var(--gold-hi); }
.caesfire-audio__seek { flex: 1; height: 2px; background: var(--border-2); cursor: none; position: relative; border-radius: 1px; }
.caesfire-audio__fill { height: 100%; background: var(--forest-1); width: 0%; transition: width 200ms linear; border-radius: 1px; }
.caesfire-audio__time { font-size: 0.62rem; color: var(--text-2); flex-shrink: 0; width: 30px; text-align: right; }
.caesfire-single__stream { }
.caesfire-single__stream-label { font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-2); display: block; margin-bottom: 0.75rem; }
.caesfire-more { padding: 0.85rem clamp(1rem,2vw,1.75rem); display: flex; align-items: center; background: var(--surface); ; max-width: 820px; margin: 0.75rem auto 0; border: none; border-radius: 4px; }
.caesfire-more__label { font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(240,237,228,0.65); font-style: italic; }

/* ════════════════════════════════════════════════
   MOSES. — EP SECTION (compact card)
   ════════════════════════════════════════════════ */
.moses-showcase { border-bottom: none; background: var(--void); }
.moses-showcase.hidden { display: none; }
.moses-ep {
  display: grid;
  grid-template-columns: 200px 1fr;
  max-width: 820px;
  margin: 2rem auto;
  border: 1px solid var(--border-1);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
}
.moses-ep__sidebar {
  background: var(--raised);
  padding: 1.25rem 1.1rem;
  display: flex; flex-direction: column; gap: 0.6rem;
  border-right: 1px solid var(--border-1);
}
.moses-ep__cover-img { width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 3px; }
.moses-ep__cover-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease-out); }
.moses-ep__sidebar:hover .moses-ep__cover-img img { transform: scale(1.04); }
.moses-ep__title { font-family: var(--font-disp); font-size: clamp(1.1rem, 2.5vw, 1.55rem); font-weight: 400; letter-spacing: 0.03em; text-transform: uppercase; color: #F0EDE4; line-height: 0.96; }
.moses-ep__details { font-size: 0.52rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); }
.moses-ep__tagline { font-family: var(--font-body); font-style: normal; font-weight: 300; font-size: 0.72rem; color: var(--text-1); line-height: 1.8; max-width: 520px; }
.moses-ep__actions { margin-top: 0.25rem; }
.moses-ep__main { display: flex; flex-direction: column; background: var(--base); overflow: hidden; }
.moses-ep__streaming {
  padding: 0.65rem 1rem;

  display: flex; align-items: center; gap: 0.85rem;
  background: var(--surface);
  max-width: 820px; margin: 0 auto;
}
.moses-ep__streaming-label { font-size: 0.52rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-2); }

/* Tracklist */
.ep-player { border-bottom: none; flex: 1; }
.ep-player__header { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1rem; border-bottom: none; }
.ep-player__label { font-size: 0.55rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(240,237,228,0.70); }
.ep-player__explicit { font-size: 0.48rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); border: 1px solid var(--border-2); padding: 0.1em 0.4em; }
.ep-track { display: flex; align-items: center; gap: 0.65rem; padding: 0.6rem 1rem; ; cursor: pointer; transition: background 200ms; }
.ep-track:last-child { border-bottom: none; }
.ep-track:hover:not(.ep-track--placeholder) { background: var(--surface); }
.ep-track.is-playing { background: var(--raised); }
.ep-track__play { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: none; border: none; color: #4B463F; cursor: pointer; padding: 0; transition: color 200ms, transform 200ms; }
.ep-track__play svg { width: 12px; height: 12px; fill: currentColor; }
.ep-track:hover .ep-track__play, .ep-track.is-playing .ep-track__play { color: var(--gold); transform: scale(1.15); }
.ep-track__play-ph { width: 20px; height: 20px; flex-shrink: 0; }
.ep-track__num { font-size: 0.58rem; color: var(--text-2); width: 16px; flex-shrink: 0; text-align: right; }
.ep-track__name { font-size: 0.78rem; font-weight: 300; color: var(--text-1); flex: 1; letter-spacing: 0.03em; }
.ep-track--placeholder .ep-track__name { color: var(--text-3); }
.ep-track__soon { font-size: 0.48rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-2); margin-left: 0.5rem; }
.ep-track__dur { font-size: 0.6rem; color: var(--text-2); flex-shrink: 0; }
.ep-track.is-playing .ep-track__name { color: var(--gold); }
.ep-player__bar { background: var(--raised); border-top: none; padding: 0.6rem 1rem; }
.ep-player__now-row { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.4rem; }
.ep-player__skip { font-size: 0.85rem; color: #4B463F; cursor: none; transition: color 200ms; flex-shrink: 0; background: none; border: none; padding: 0; }
.ep-player__skip:hover { color: var(--text-1); }
.ep-player__now { font-size: 0.65rem; font-weight: 300; color: var(--text-1); letter-spacing: 0.05em; flex: 1; }
.ep-player__controls { display: flex; align-items: center; gap: 0.65rem; }
.ep-player__pp { font-size: 0.85rem; color: var(--gold); cursor: none; width: 20px; flex-shrink: 0; transition: color 200ms; background: none; border: none; padding: 0; }
.ep-player__pp:hover { color: var(--gold-hi); }
.ep-player__seek { flex: 1; height: 2px; background: var(--border-2); cursor: none; position: relative; }
.ep-player__fill { height: 100%; background: var(--forest-1); width: 0%; transition: width 200ms linear; }
.ep-player__time { font-size: 0.58rem; color: var(--text-2); flex-shrink: 0; width: 28px; text-align: right; }

/* Videos panel (inside compact card) */
.moses-videos { padding: 0.85rem 1rem; flex: 1; display: flex; flex-direction: column; gap: 0.75rem; }
.moses-videos__header { display: flex; align-items: center; justify-content: space-between; }
.moses-videos__label { font-size: 0.55rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); font-weight: 400; }

/* ── Video Experience: Featured Visual + Thumbnail Gallery ── */
.video-feature {
  position: relative; width: 100%; aspect-ratio: 16/9;
  background: #000; overflow: hidden; border-radius: 3px;
  margin-bottom: 0.85rem;
}
.caesfire-single__video-wrap .video-feature { aspect-ratio: unset; width: 100%; height: 100%; margin-bottom: 0; border-radius: 0; }
.video-feature__player { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }

/* ── YouTube-backed feature (poster + lazy-loaded iframe on click) ── */
.video-feature__poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-feature__frame { position: absolute; inset: 0; display: none; z-index: 1; }
.video-feature__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-feature--yt.is-playing .video-feature__poster { display: none; }
.video-feature--yt.is-playing .video-feature__frame { display: block; }
.video-feature--yt.is-playing::before { opacity: 0; pointer-events: none; }
.video-feature__ext {
  position: absolute; top: 0.85rem; right: 0.95rem; z-index: 3;
  font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.08em;
  color: var(--text-1); text-decoration: none;
  background: rgba(10,14,8,0.55); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 0.4rem 0.7rem; border-radius: 999px;
  opacity: 0.85; transition: opacity 200ms, background 200ms;
}
.video-feature__ext:hover { opacity: 1; background: var(--gold); color: var(--void); border-color: var(--gold); }
.video-feature--yt.is-playing .video-feature__ext { opacity: 0.55; }
.video-feature__error {
  position: absolute; inset: 0; z-index: 2;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem;
  background: rgba(10,14,8,0.9); text-align: center; padding: 1.5rem;
}
.video-feature__error.is-visible { display: flex; }
.video-feature__error p { font-size: 0.75rem; color: var(--text-2); max-width: 26em; }
.video-feature__error a {
  font-family: var(--font-disp); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--void); background: var(--gold); text-decoration: none;
  padding: 0.6rem 1.2rem; border-radius: 4px;
}

.video-feature::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.6) 100%);
  transition: opacity 0.4s ease;
}
.video-feature.is-playing::before { opacity: 0; }
.video-feature__play {
  position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; z-index: 2;
  border-radius: 50%; background: rgba(10,14,8,0.55); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.35); color: var(--text-1);
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  transition: transform 0.35s ease, background 0.35s ease, opacity 0.35s ease;
}
.video-feature__play svg { width: 24px; height: 24px; fill: currentColor; margin-left: 3px; }
.video-feature__play:hover { transform: translate(-50%,-50%) scale(1.08); background: var(--gold); color: #15190f; }
.video-feature__play:hover { transform: scale(1.08); }
.video-feature.is-playing .video-feature__play,
.video-feature.is-playing .video-feature__title { opacity: 0; pointer-events: none; }
.video-feature__title {
  position: absolute; left: 1.1rem; bottom: 0.85rem; z-index: 2;
  font-family: var(--font-disp); letter-spacing: 0.05em; text-transform: uppercase;
  font-size: 0.8rem; color: var(--text-1); text-shadow: 0 2px 12px rgba(0,0,0,0.7);
  transition: opacity 0.3s ease;
}

.video-thumbs { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.6rem; }
.video-thumb {
  position: relative; aspect-ratio: 1/1; overflow: hidden; border-radius: 2px;
  border: 1px solid transparent; background: var(--surface); cursor: pointer; padding: 0;
  transition: border-color 0.3s ease;
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.65); transition: transform 0.5s ease, filter 0.4s ease; }
.video-thumb:hover img, .video-thumb.is-active img { filter: brightness(1); transform: scale(1.06); }
.video-thumb.is-active { border-color: var(--gold); }
.video-thumb__play {
  position: absolute; inset: 0; margin: auto; width: 30px; height: 30px;
  border-radius: 50%; background: rgba(10,14,8,0.6); color: var(--text-1);
  display: flex; align-items: center; justify-content: center; opacity: 0;
  transition: opacity 0.3s ease;
}
.video-thumb__play svg { width: 12px; height: 12px; fill: currentColor; margin-left: 1px; }
.video-thumb:hover .video-thumb__play, .video-thumb.is-active .video-thumb__play { opacity: 1; }
.video-thumb__title {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0.35rem 0.45rem;
  font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-1);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.8)); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}


/* ═══════════════════════════════════════════
   RESPONSIVE — compact card system
   ═══════════════════════════════════════════ */

/* ── 1100px: artist split cols flip ── */
@media (max-width: 1100px) {
  .artist-split { grid-template-columns: 1fr clamp(240px, 34vw, 380px); }
  .moses-ep     { grid-template-columns: 180px 1fr; max-width: 680px; }
  .caesfire-single { max-width: 680px; }
  .caesfire-more   { max-width: 680px; }
}

/* ── 860px: filter bar scrolls, project entries stack ── */
@media (max-width: 860px) {
  .project-entry { grid-template-columns: 1fr; }
  .project-entry:nth-child(even) { direction: ltr; }
  .project-entry__visual { min-height: 240px; }
  .filter-tabs { overflow-x: auto; scrollbar-width: none; }
  .filter-tab  { padding: 0.9rem 1rem; white-space: nowrap; }

  /* Compact cards: artist split stacks */
  .artist-split { grid-template-columns: 1fr; }
  .artist-split__slider { height: clamp(280px, 65vw, 380px); }
  .artist-split__bio { border-right: none; border-bottom: none; order: -1; }

  /* Compact CaesFire single stacks */
  .caesfire-single {
    flex-direction: column;
    max-width: 480px;
  }
  .caesfire-single__media { width: 100%; flex-direction: row; height: 160px; }
  .caesfire-single__cover  { flex: 1; min-height: 0; }
  .caesfire-single__video-wrap { flex: 1; min-height: 0; }
  .caesfire-more { max-width: 480px; }

  /* Compact MOSES EP stacks */
  .moses-ep {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 1.25rem auto;
  }
  .moses-ep__sidebar {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    border-right: none;
    border-bottom: none;
  }
  .moses-ep__cover-img { width: 80px; flex-shrink: 0; }
  .moses-videos { padding: 1rem; }
  .video-thumbs { grid-template-columns: repeat(4,1fr); }
}

/* ── 600px: single-column everything ── */
@media (max-width: 600px) {
  .artist-split__name { font-size: clamp(1.8rem, 10vw, 3rem); }
  .artist-split__slider { height: clamp(240px, 70vw, 320px); }

  .caesfire-single { max-width: 100%; }
  .caesfire-single__media { flex-direction: column; height: auto; }
  .caesfire-single__cover { aspect-ratio: 1; }
  .caesfire-single__video-wrap { aspect-ratio: 16/9; }
  .caesfire-more { max-width: 100%; }

  .moses-ep { max-width: 100%; margin: 1rem 0; }
  .moses-ep__sidebar { flex-direction: column; }
  .moses-ep__cover-img { width: 100%; max-width: 200px; }

  .video-thumbs { grid-template-columns: repeat(2,1fr); }
  .video-feature { aspect-ratio: 4/3; }

  .ep-track { padding: 0.7rem 0.85rem; }
  .ep-track__name { font-size: 0.78rem; }
}

/* ── Filter sub-section visibility ── */
/* When video is hidden from caesfire-single, cover takes full width */
.caesfire-single__video-wrap[style*="display: none"] + .caesfire-single__cover,
.caesfire-single__cover:only-child { width: 100%; }

/* When ep-player is hidden, videos expand naturally */
.moses-ep__main .ep-player[style*="display: none"] ~ .moses-videos {
  border-top: none;
}

/* When videos hidden, EP player takes full height */
.moses-videos[style*="display: none"] {
  /* collapsed — padding/margin reset */
  padding: 0; margin: 0;
}

/* Smooth transition on show/hide */
[data-show] {
  transition: opacity 300ms ease;
}

/* ════════════════════════════════════════
   ARTISTS PANEL — floating editorial cards
   ════════════════════════════════════════ */
.artists-panel {
  background: var(--void);

  padding: clamp(4rem,10vw,9rem) var(--gutter) clamp(5rem,10vw,10rem);
}
.artists-panel.hidden { display: none; }

.artist-card-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(2rem,5vw,5rem);
  flex-wrap: wrap;
}

/* ── Float keyframes — two offset phases so they move independently ── */
@keyframes float-a {
  0%,100% { transform: translateY(0px) rotate(-0.5deg); }
  50%      { transform: translateY(-16px) rotate(0.4deg); }
}
@keyframes float-b {
  0%,100% { transform: translateY(-10px) rotate(0.5deg); }
  50%      { transform: translateY(6px) rotate(-0.3deg); }
}

.artist-card {
  width: clamp(220px, 26vw, 290px);
  flex-shrink: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  overflow: visible;          /* allow glow to bleed outside border-radius */
  position: relative;
  cursor: pointer;
  will-change: transform;
  /* card A floats on phase-A */
  animation: float-a 7s ease-in-out infinite;
  transition: box-shadow .45s ease;
}
.artist-card:nth-child(2) {
  /* card B starts offset so they're never in sync */
  animation: float-b 8.5s ease-in-out infinite;
}

/* Pause float, lift and tilt on hover */
.artist-card:hover {
  animation-play-state: paused;
}
/* The inner shell (slider + body) gets the hover transform */
.artist-card__inner {
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--base);
  border: 1px solid var(--border-1);
  transform: perspective(800px) rotateY(0deg) scale(1);
  transition:
    transform .5s cubic-bezier(0.23,1,0.32,1),
    box-shadow .5s ease,
    border-color .45s ease;
}
.artist-card:hover .artist-card__inner {
  transform: perspective(800px) rotateY(-3deg) scale(1.03) translateY(-6px);
  box-shadow:
    0 40px 90px rgba(0,0,0,.55),
    0 0 0 1px rgba(201,162,39,.5),
    0 0 40px rgba(201,162,39,.08);
  border-color: rgba(201,162,39,.5);
}

/* ── Slider: tall portrait, fills the card width ── */
.artist-card__slider {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  isolation: isolate;
  width: 100%;
  flex-shrink: 0;
  aspect-ratio: 3 / 4;
}
.artist-card__slider::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 40%,
    rgba(15,19,10,0.72) 100%
  );
  z-index: 2;
}
.artist-card__slider .artist-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1000ms cubic-bezier(0.4,0,0.2,1);
}
.artist-card__slider .artist-slide.active {
  opacity: 1;
  animation: artistKenBurns 10s ease forwards;
}
.artist-card__slider .artist-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.artist-card__slider .artist-slide-dots {
  position: absolute; bottom: 0.75rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px; z-index: 5;
}
.artist-card__slider .artist-slide-dot {
  width: 14px; height: 1px; background: rgba(43,42,39,0.20);
  transition: background 350ms, width 350ms; cursor: none; border: none;
  padding: 5px 0; position: relative;
}
.artist-card__slider .artist-slide-dot::after {
  content:""; position:absolute; left:0; right:0; top:-6px; bottom:-6px;
}
.artist-card__slider .artist-slide-dot.active { background: var(--gold); width: 22px; }

/* ── Name overlay on image bottom ── */
.artist-card__name-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  padding: 1rem 1.1rem 0.85rem;
}
.artist-card__name {
  font-family: var(--font-disp);
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  font-weight: 400; line-height: 0.9;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: #F0EDE4;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
  transition: letter-spacing .4s ease;
}
.artist-card:hover .artist-card__name { letter-spacing: 0.11em; }

/* ── Compact body below image ── */
.artist-card__body {
  padding: 1rem 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  background: var(--base);
  position: relative;
  z-index: 2;
}
.artist-card__label {
  font-size: 0.52rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); display: block;
}
.artist-card__aka  {
  font-size: 0.58rem; letter-spacing: 0.12em; color: var(--text-2);
  font-style: italic;
}
.artist-card__genre {
  font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-2);
}
.artist-card__genre--sub { color: var(--text-2); }
.artist-card__bio  { display: none; }  /* bio lives on the showcase section, not the card */

.artist-card__footer {
  margin-top: 0.35rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(var(--border-1-rgb, 67,76,55), 0.4);
  display: flex;
  justify-content: flex-start;
}
.artist-card__explore {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: none; border: none;
  color: var(--gold); font-size: 0.58rem;
  font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; padding: 0;
  transition: gap .35s ease, color .3s ease;
}
.artist-card__explore:hover { color: var(--gold-hi); }
.artist-card__arrow { transition: transform .35s ease; }
.artist-card:hover .artist-card__arrow { transform: translateX(5px); }

/* ── "Tap to explore" hint label centered below both cards ── */
.artist-card-row__hint {
  width: 100%;
  text-align: center;
  margin-top: 2.5rem;
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-2);
  opacity: 0.6;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .artist-card-row { gap: 1.75rem; }
  .artist-card { width: clamp(200px, 42vw, 270px); }
}
@media (max-width: 600px) {
  /* Stack vertically on small phones, no float animation */
  .artist-card {
    width: min(340px, 85vw);
    animation: none !important;
  }
  .artist-card:nth-child(2) { animation: none !important; }
  .artist-card__inner {
    transform: none !important;
  }
  .artist-card__slider { aspect-ratio: 3/4; }
}
@media (prefers-reduced-motion: reduce) {
  .artist-card { animation: none !important; }
}

/* =========================================================
   FEATURED WORK INTRO
========================================================= */

.artist-work-intro{

  padding:7rem 0 5rem;
  
  text-align:center;
  
  }
  
  .artist-work-intro__label{
  
  display:inline-block;
  
  margin-bottom:1rem;
  
  font-size:.8rem;
  
  letter-spacing:.35em;
  
  text-transform:uppercase;
  
  color:var(--gold);
  
  opacity:.8;
  
  }
  
  .artist-work-intro__title{
  
  margin-bottom:1.25rem;
  
  font-family:var(--font-display);
  
  font-size:clamp(2rem,4vw,3.6rem);
  
  letter-spacing:.05em;
  
  text-transform:uppercase;
  
  }
  
  .artist-work-intro__text{
  
  max-width:650px;
  
  margin:0 auto;
  
  line-height:1.9;
  
  opacity:.8;
  
  font-size:1.02rem;
  
  }
  
/* end of projects.css */
/* ══════════════════════════════════════════════════
   TEXT COLOR FIXES — grey → readable on sage bg
   ══════════════════════════════════════════════════ */
.cf-gold,
.caesfire-single__tags-line { color: var(--gold) !important; }
.release-eyebrow            { color: var(--text-2) !important; }
.artist-split__role         { color: var(--text-1) !important; font-weight: 400 !important; }
.artist-split__aka          { color: var(--text-2) !important; }
.artist-split__genre        { color: var(--gold)   !important; }
.ep-track__num,
.ep-track__dur              { color: var(--text-2) !important; }
.moses-ep__details          { color: var(--gold) !important; }

/* ══════════════════════════════════════════════════
   CAESFIRE SINGLES TRACKLIST
   ══════════════════════════════════════════════════ */
.cf-singles-wrap {
  padding: 0 var(--gutter) 2rem;
  background: var(--base);
  border-top: none;
}
.cf-singles {
  max-width: 820px; margin: 0 auto;
  border: 1px solid var(--border-1); border-radius: 6px;
  overflow: hidden; background: var(--surface);
}
.cf-singles__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.65rem 1rem
  background: var(--raised);
}
.cf-singles__label { font-size: 0.55rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-1); }
.cf-singles__count { font-size: 0.52rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-2); }

/* Track row */
.cf-track {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.65rem 1rem
  cursor: pointer; transition: background 200ms;
}
.cf-track:last-of-type { border-bottom: none; }
.cf-track:hover { background: var(--raised); }
.cf-track.is-playing { background: var(--raised); }
.cf-track__play {
  width: 20px; height: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: #4B463F;
  cursor: pointer; padding: 0; transition: color 200ms, transform 200ms;
}
.cf-track__play svg { width: 12px; height: 12px; fill: currentColor; }
.cf-track:hover .cf-track__play,
.cf-track.is-playing .cf-track__play { color: var(--gold); transform: scale(1.15); }
.cf-track__num { font-size: 0.58rem; color: var(--text-2); width: 16px; flex-shrink: 0; text-align: right; }
.cf-track__name { font-size: 0.8rem; font-weight: 300; color: var(--text-1); flex: 1; letter-spacing: 0.02em; }
.cf-track__name em { font-style: normal; font-size: 0.72rem; color: var(--text-2); margin-left: 0.35rem; }
.cf-track.is-playing .cf-track__name { color: var(--gold); }
.cf-track__dur { font-size: 0.6rem; color: var(--text-2); flex-shrink: 0; min-width: 28px; text-align: right; }

/* Persistent player bar */
.cf-singles__bar {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.65rem 1rem; background: var(--void);
  border-top: none;
}
.cf-singles__pp {
  font-size: 0.85rem; color: var(--gold); background: none; border: none;
  cursor: pointer; padding: 0; flex-shrink: 0; transition: color 200ms; width: 20px;
}
.cf-singles__pp:hover { color: var(--gold-hi); }
.cf-singles__skip {
  font-size: 0.85rem; color: rgba(240,237,228,0.33); background: none; border: none;
  cursor: pointer; padding: 0; flex-shrink: 0; transition: color 200ms;
}
.cf-singles__skip:hover { color: var(--text-1); }
.cf-singles__now { font-size: 0.65rem; color: var(--text-1); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-singles__seek { flex: 2; height: 2px; background: var(--border-2); cursor: pointer; position: relative; }
.cf-singles__fill { height: 100%; background: var(--gold); width: 0%; transition: width 200ms linear; }
.cf-singles__time { font-size: 0.58rem; color: var(--text-2); flex-shrink: 0; width: 28px; text-align: right; }

@media (max-width: 600px) {
  .cf-singles-wrap { padding: 0 0 1.25rem; }
  .cf-singles { border-radius: 0; border-left: none; border-right: none; max-width: 100%; }
  .cf-track { padding: 0.6rem 0.85rem; }
  .cf-track__name { font-size: 0.75rem; }
  .cf-singles__now { display: none; }
}

/* ── CaesFire visual-only section (replaces big standalone card) ── */
.caesfire-visual {
  background: var(--base);

  padding: 2rem var(--gutter);
}
.caesfire-visual__inner {
  max-width: 820px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 0.85rem;
}
.caesfire-visual__inner .release-eyebrow { margin-bottom: 0.25rem; }

/* ════════════════════════════════════════════════════════════════
   REDESIGN — DEPTH & RHYTHM SYSTEM (line-free separation)
   With every border/divider removed, sections now separate through
   three tools instead: (1) background-tint alternation between
   chapters, (2) soft directional box-shadows that "lift" cards and
   banners off the page rather than fencing them with rules, and
   (3) a consistent chapter-numbering motif that gives the page an
   editorial table-of-contents feel as you scroll.
   ════════════════════════════════════════════════════════════════ */

:root {
  --shadow-card: 0 30px 70px -24px rgba(20,24,14,0.35), 0 4px 16px rgba(20,24,14,0.10);
  --shadow-soft: 0 20px 48px -20px rgba(20,24,14,0.28);
  --radius-card: 12px;
}

/* ── Filter bar → floating pill, overlapping the hero ── */
.proj-filter {
  background: transparent;
  position: sticky;
  top: calc(var(--nav-h) + 0.85rem);
  z-index: 60;
  margin-top: clamp(-3.2rem, -5vw, -2.4rem);
  padding: 0 var(--gutter);
  pointer-events: none;
}
.proj-filter__inner {
  pointer-events: auto;
  background: rgba(138,150,117,0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 999px;
  padding: 0.4rem 1.4rem 0.4rem 0.4rem;
  box-shadow: var(--shadow-soft), 0 0 0 1px rgba(240,237,228,0.06);
}
.filter-tabs { gap: 0.15rem; overflow-x: auto; scrollbar-width: none; }
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab {
  border-radius: 999px;
  padding: 0.65rem 1.15rem;
}
.filter-tab.active { color: var(--void); background: var(--gold); }
.filter-tab:hover:not(.active) { color: var(--text-1); background: rgba(43,42,39,0.07); }
.proj-count { padding-right: 0.4rem; }

/* ── Chapter background alternation ── */
.artists-panel      { background: var(--void); }
.caesfire-showcase   { background: var(--base); padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.moses-showcase      { background: var(--void); padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
#ca-campaigns        { background: var(--base); }
#ca-events           { background: var(--void); }

/* ── Artist identity banner — lifted with shadow instead of a border ── */
.artist-split {
  box-shadow: var(--shadow-soft);
  position: relative;
  z-index: 2;
}

/* ── Compact modules — elevated cards, no border, generous radius ── */
.cf-singles-wrap,
.moses-ep-wrap,
.caesfire-visual {
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.cf-singles,
.moses-ep {
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.caesfire-visual__inner .video-feature {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.moses-videos .video-feature {
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

/* ── Standard project entries — lifted as editorial cards, inset from the edge ── */
.project-entry {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--gutter);
  gap: clamp(1rem, 2.5vw, 2rem);
  background: transparent;
}
.project-entry__visual,
.project-entry__content {
  box-shadow: var(--shadow-soft);
}
.project-entry__content { background: var(--surface); }
.project-entry__visual { border-radius: var(--radius-card) 0 0 var(--radius-card); }
.project-entry__content { border-radius: 0 var(--radius-card) var(--radius-card) 0; }
.project-entry:nth-child(even) .project-entry__visual { border-radius: 0 var(--radius-card) var(--radius-card) 0; }
.project-entry:nth-child(even) .project-entry__content { border-radius: var(--radius-card) 0 0 var(--radius-card); }
.proj-entry__num {
  font-family: var(--font-disp);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .proj-filter { margin-top: clamp(-2.2rem, -4vw, -1.6rem); padding: 0 1rem; }
  .proj-filter__inner { border-radius: 20px; padding: 0.4rem 0.85rem 0.4rem 0.35rem; }
  .filter-tab { padding: 0.6rem 0.85rem; }
  .project-entry__visual,
  .project-entry:nth-child(even) .project-entry__visual { border-radius: var(--radius-card) var(--radius-card) 0 0; }
  .project-entry__content,
  .project-entry:nth-child(even) .project-entry__content { border-radius: 0 0 var(--radius-card) var(--radius-card); }
}
@media (max-width: 600px) {
  .cf-singles, .moses-ep { border-radius: 8px; }
  .cf-singles-wrap { padding-left: 0; padding-right: 0; }
}
@media (max-width: 600px) {
  .cf-singles { border-radius: 0; }
}

/* ════════════════════════════════════════════════════════════════
   MUSIC PLAYER REDESIGN — bigger, richer, alive
   Both the CaesFire singles list and the MOSES EP tracklist were
   reading as a cramped list of text rows. This gives both real
   presence: a proper header with artwork, taller and more spacious
   track rows separated by tone (not lines), a small animated
   "now playing" equalizer instead of a static number, circular
   play controls, and a much bigger transport bar underneath.
   ════════════════════════════════════════════════════════════════ */

/* ── Shared equalizer indicator (swaps in for the track number) ── */
.cf-track__eq, .ep-track__eq {
  display: none;
  align-items: flex-end;
  gap: 2.5px;
  width: 16px; height: 14px;
  flex-shrink: 0;
}
.cf-track__eq span, .ep-track__eq span {
  width: 3px; border-radius: 1px;
  background: var(--gold);
  animation: eqBounce 900ms ease-in-out infinite;
}
.cf-track__eq span:nth-child(1), .ep-track__eq span:nth-child(1) { animation-delay: 0ms; }
.cf-track__eq span:nth-child(2), .ep-track__eq span:nth-child(2) { animation-delay: 180ms; }
.cf-track__eq span:nth-child(3), .ep-track__eq span:nth-child(3) { animation-delay: 360ms; }
@keyframes eqBounce { 0%,100% { height: 3px; } 50% { height: 14px; } }
.cf-track.is-playing .cf-track__num,
.ep-track.is-playing .ep-track__num { display: none; }
.cf-track.is-playing .cf-track__eq,
.ep-track.is-playing .ep-track__eq { display: flex; }

/* ── CaesFire card: bigger, illustrated header ── */
.cf-singles { max-width: 780px; }
.cf-singles__header {
  display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem;
  padding: 0.75rem 1.1rem;
  background: var(--raised);
}
.cf-singles__header-art {
  width: 38px; height: 38px; border-radius: 6px; overflow: hidden; flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(20,24,14,0.28);
}
.cf-singles__header-art img { width: 100%; height: 100%; object-fit: cover; }
.cf-singles__header-text { display: flex; flex-direction: column; gap: 0.2rem; }
.cf-singles__label { font-size: 0.6rem; }
.cf-singles__count { font-size: 0.54rem; }

/* ── Track rows — comfortable, alternating tone, circular play button ── */
.cf-track, .ep-track {
  padding: 0.68rem 1.1rem;
  gap: 0.75rem;
}
.cf-track:nth-child(even), .ep-track:nth-child(even) { background: rgba(20,24,14,0.035); }
.cf-track:hover, .ep-track:hover:not(.ep-track--placeholder) { background: var(--raised); }
.cf-track.is-playing, .ep-track.is-playing { background: var(--raised); }

.cf-track__play, .ep-track__play {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--gold);
  transition: background 220ms, color 220ms, transform 220ms;
}
.cf-track:hover .cf-track__play, .cf-track.is-playing .cf-track__play,
.ep-track:hover .ep-track__play, .ep-track.is-playing .ep-track__play {
  background: var(--gold); color: var(--void); transform: scale(1.08);
}
.cf-track__play svg, .ep-track__play svg { width: 11px; height: 11px; }

.cf-track__num, .ep-track__num { font-size: 0.65rem; width: 16px; }
.cf-track__name { font-size: 0.8rem; letter-spacing: 0.02em; }
.cf-track__name em { font-size: 0.7rem; }
.cf-track__dur, .ep-track__dur { font-size: 0.62rem; min-width: 30px; }

.ep-track__name { font-size: 0.78rem; }
.ep-player__header { padding: 0.7rem 1.1rem; }
.ep-player__label { font-size: 0.56rem; }

/* ── Transport bars — real controls, sensibly sized ── */
.cf-singles__bar, .ep-player__bar {
  padding: 0.7rem 1.1rem;
  gap: 0.75rem;
}
.cf-singles__pp, .ep-player__pp {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--gold); color: var(--void);
  font-size: 0.82rem;
  transition: background 220ms, transform 220ms;
}
.cf-singles__pp:hover, .ep-player__pp:hover { background: var(--gold-hi); transform: scale(1.06); }
.cf-singles__skip, .ep-player__skip {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 0.78rem;
  transition: background 220ms, color 220ms;
}
.cf-singles__skip:hover, .ep-player__skip:hover { background: rgba(240,237,228,0.12); color: var(--text-1); }
.cf-singles__now, .ep-player__now { font-size: 0.68rem; font-weight: 400; }

.cf-singles__seek, .ep-player__seek {
  height: 4px; border-radius: 2px;
}
.cf-singles__fill, .ep-player__fill {
  border-radius: 2px;
  background: var(--gold);
  position: relative;
}
.cf-singles__fill::after, .ep-player__fill::after {
  content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(240,237,228,0.18), 0 2px 8px rgba(20,24,14,0.4);
  opacity: 0; transition: opacity 200ms;
}
.cf-singles__seek:hover .cf-singles__fill::after,
.ep-player__seek:hover .ep-player__fill::after { opacity: 1; }

.ep-player__now-row { margin-bottom: 0.45rem; }
.ep-player__controls { gap: 0.75rem; }

/* ── Mobile ── */
@media (max-width: 600px) {
  .cf-singles__header { padding: 0.65rem 0.9rem; gap: 0.6rem; }
  .cf-singles__header-art { width: 32px; height: 32px; }
  .cf-track, .ep-track { padding: 0.6rem 0.9rem; gap: 0.6rem; }
  .cf-track__play, .ep-track__play { width: 24px; height: 24px; }
  .cf-track__name { font-size: 0.75rem; }
  .cf-singles__bar, .ep-player__bar { padding: 0.65rem 0.9rem; }
  .cf-singles__pp, .ep-player__pp { width: 30px; height: 30px; }
}