/* ==========================================================================
   Bass Darkness — component styles
   Vanilla Lumos project: foundation (tokens + utilities) is loaded first in
   css/lumos-foundation.css; this file holds component CSS only. No resets,
   :root, body/page_wrap, or u-* utility redefinitions live here.
   ========================================================================== */

/* ==========================================================================
   Shared atoms — defined once, reused across sections (vary with .is-* combos)
   ========================================================================== */

/* Button — the one reusable button on the site. Variants would be .is-* combos. */
.button_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--_spacing---space--3) var(--_spacing---space--5);
  border-radius: var(--radius--small);
  border-style: solid;
  border-width: var(--border-width--main);
  background-color: color-mix(
    in hsl,
    var(--_theme---button-primary--background) calc(100% * var(--_trigger---on)),
    var(--_theme---button-primary--background-hover)
      calc(100% * var(--_trigger---off))
  );
  color: color-mix(
    in hsl,
    var(--_theme---button-primary--text) calc(100% * var(--_trigger---on)),
    var(--_theme---button-primary--text-hover) calc(100% * var(--_trigger---off))
  );
  border-color: color-mix(
    in hsl,
    var(--_theme---button-primary--border) calc(100% * var(--_trigger---on)),
    var(--_theme---button-primary--border-hover)
      calc(100% * var(--_trigger---off))
  );
  backdrop-filter: blur(1.25rem);
  transition: all 250ms;
}

/* Equalizer mark — the small three-bar eyebrow decorator, reused everywhere */
.eq_wrap {
  display: inline-flex;
  align-items: stretch;
  gap: 0.1875rem;
  height: 0.5625rem;
  flex: none;
}
.eq_bar {
  background-color: var(--_theme---text);
}
.eq_bar.is-1 {
  width: 0.3125rem;
}
.eq_bar.is-2 {
  width: 0.1875rem;
}
.eq_bar.is-3 {
  width: 0.125rem;
}

/* ==========================================================================
   Header (banner) — top-level component, floats over the hero
   ========================================================================== */
.header_wrap {
  position: absolute;
  top: var(--_spacing---space--4);
  left: 0;
  right: 0;
  z-index: 20;
}
.header_contain.u-container {
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
}

/* Logo — pinned to the container's left edge */
.header_logo_wrap {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  flex: none;
  padding: var(--_spacing---space--1);
  border: var(--border-width--main) solid
    color-mix(in hsl, var(--_theme---text) 8%, transparent);
  border-radius: var(--radius--main);
  background-color: color-mix(in hsl, var(--_theme---background) 30%, transparent);
  backdrop-filter: blur(0.9375rem);
}
.header_logo_img {
  width: 3rem;
  height: 2.25rem;
  object-fit: contain;
  flex: none;
}

/* Centered pill menu */
.header_nav_wrap {
  display: flex;
}
.header_nav_list {
  display: flex;
  align-items: center;
  gap: var(--_spacing---space--1);
  padding: var(--_spacing---space--1);
  border: var(--border-width--main) solid
    color-mix(in hsl, var(--_theme---text) 10%, transparent);
  border-radius: var(--radius--main);
  background-color: color-mix(in hsl, var(--_theme---background) 20%, transparent);
  backdrop-filter: blur(0.9375rem);
  /* State boundary: the menu-open state lives on .header_wrap (.is-active) and
     would otherwise cascade into every link's active indicator. Reset the
     state channel here so links read only their OWN .is-active. */
  --_state---true: 1;
  --_state---false: 0;
}
/* Active link is read from --_state (flipped by .is-active on the link itself),
   never selected via .is-active in CSS. --_state---false = 1 when active. */
.header_nav_link {
  padding: var(--_spacing---space--3) var(--_spacing---space--4);
  border-radius: var(--radius--small);
  border-style: solid;
  border-width: var(--border-width--main);
  border-color: color-mix(
    in hsl,
    color-mix(in hsl, var(--_theme---text) 10%, transparent)
      calc(100% * var(--_state---true)),
    var(--_theme---accent) calc(100% * var(--_state---false))
  );
  background-color: color-mix(
    in hsl,
    color-mix(
        in hsl,
        var(--_theme---text) calc(5% + 7% * var(--_trigger---on)),
        transparent
      )
      calc(100% * var(--_state---true)),
    var(--_theme---accent) calc(100% * var(--_state---false))
  );
  color: color-mix(
    in hsl,
    color-mix(
        in hsl,
        var(--_theme---text) calc(80% + 20% * var(--_trigger---on)),
        transparent
      )
      calc(100% * var(--_state---true)),
    var(--_theme---accent-text) calc(100% * var(--_state---false))
  );
  white-space: nowrap;
  transition: background-color 250ms, color 250ms, border-color 250ms;
}
.header_nav_sep {
  padding-inline: var(--_spacing---space--1);
  color: color-mix(in hsl, var(--_theme---text) 50%, transparent);
}

/* Hamburger (shown on mobile) */
.header_toggle_wrap {
  display: none;
  position: absolute;
  right: 0;
  flex-direction: column;
  justify-content: center;
  gap: 0.3125rem;
  width: 3rem;
  aspect-ratio: 1 / 1;
  padding: var(--_spacing---space--3);
  border: var(--border-width--main) solid
    color-mix(in hsl, var(--_theme---text) 10%, transparent);
  border-radius: var(--radius--main);
  background-color: color-mix(in hsl, var(--_theme---background) 30%, transparent);
  backdrop-filter: blur(0.9375rem);
}
.header_toggle_bar {
  width: 100%;
  height: var(--border-width--main);
  background-color: var(--_theme---text);
  transition: transform 300ms, opacity 300ms;
}
/* Bars morph to an X when open — read --_state from .header_wrap.is-active.
   Offset = bar thickness + gap (0.094rem + 0.3125rem) to meet at the centre. */
.header_toggle_bar.is-1 {
  transform: translateY(calc(0.40625rem * var(--_state---false)))
    rotate(calc(45deg * var(--_state---false)));
}
.header_toggle_bar.is-2 {
  opacity: var(--_state---true);
}
.header_toggle_bar.is-3 {
  transform: translateY(calc(-0.40625rem * var(--_state---false)))
    rotate(calc(-45deg * var(--_state---false)));
}

/* Mobile: the pill menu collapses into a toggled dropdown panel */
@container threshold-large (width < 62em) {
  .header_nav_wrap {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--_spacing---space--3);
    flex-direction: column;
    overflow: clip;
    max-height: calc(100svh * var(--_state---false));
    opacity: var(--_state---false);
    transition: max-height 300ms, opacity 300ms;
  }
  .header_nav_list {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .header_nav_sep {
    display: none;
  }
  .header_toggle_wrap {
    display: flex;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero_wrap.u-section {
  --hero-cross-x: 58%;
  --hero-cross-y: 50%;
  --hero-player-size: 2.25rem;
  position: relative;
  overflow: clip;
  min-height: 100svh;
  justify-content: flex-end;
  padding-top: var(--_spacing---section-space--page-top);
  padding-bottom: var(--_spacing---space--7);
}

/* --- Background --- */
.hero_bg {
  position: absolute;
  inset: 0;
  overflow: clip;
  background-color: var(--_theme---background-skeleton);
}
.hero_bg_img {
  position: absolute;
  inset: 0;
  height: 100%;
}
.hero_bg_scrim {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      to bottom,
      transparent 0%,
      color-mix(in hsl, var(--_theme---background) 45%, transparent) 66%,
      color-mix(in hsl, var(--_theme---background) 92%, transparent) 100%
    ),
    linear-gradient(
      color-mix(in hsl, var(--_theme---background) 35%, transparent),
      color-mix(in hsl, var(--_theme---background) 35%, transparent)
    );
}

/* --- Decorative crosshair --- */
.hero_deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero_deco_vline {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--hero-cross-x);
  display: flex;
  justify-content: center;
  width: var(--border-width--main);
  background-color: color-mix(in hsl, var(--_theme---text) 18%, transparent);
}
.hero_deco_diamond {
  position: absolute;
  top: 0;
  width: 0.625rem;
  aspect-ratio: 1 / 1;
  background-color: var(--_theme---text);
  transform: rotate(45deg) translateY(-30%);
}
.hero_deco_hline {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--hero-cross-y);
  height: var(--border-width--main);
  background-color: color-mix(in hsl, var(--_theme---text) 14%, transparent);
}

/* --- Waveform --- */
.hero_waveform {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
  overflow: clip;
  pointer-events: none;
}
.hero_waveform_track {
  display: flex;
  align-items: flex-end;
  gap: 0.0625rem;
  margin-left: var(--hero-cross-x);
  transform: translateX(-60%);
}
.hero_waveform_bar {
  width: 0.1875rem;
  height: 0.1875rem;
  flex: none;
  background-color: var(--_theme---accent);
}

/* --- Play latest --- */
.hero_player_wrap {
  position: absolute;
  left: var(--hero-cross-x);
  top: var(--hero-cross-y);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--_spacing---space--3);
  transform: translate(
    calc(var(--hero-player-size) / -2),
    var(--_spacing---space--4)
  );
}
.hero_player_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: none;
  width: var(--hero-player-size);
  aspect-ratio: 1 / 1;
  padding: var(--_spacing---space--2);
  border-radius: var(--radius--small);
  background-color: color-mix(
    in hsl,
    var(--_theme---accent-hover) calc(100% * var(--_trigger---on)),
    var(--_theme---accent) calc(100% * var(--_trigger---off))
  );
  transition: background-color 300ms;
}
.hero_player_btn_icon {
  width: 0.75rem;
  aspect-ratio: 1 / 1;
  background-color: var(--_theme---accent-text);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.hero_player_info.u-margin-trim {
  width: min(16rem, 55vw);
}
.hero_player_label.u-text-style-small {
  color: color-mix(in hsl, currentColor 50%, transparent);
  margin-bottom: var(--_spacing---space--5);
}
.hero_player_meta.u-text-style-small {
  display: flex;
  gap: var(--_spacing---space--1);
  align-items: center;
}
.hero_player_time {
  color: var(--_theme---accent);
}

/* --- Content --- */
.hero_contain.u-container {
  position: relative;
  z-index: 2;
}
.hero_layout.u-grid-above {
  --_column-count---value: 12;
  align-items: end;
  grid-column-gap: var(--_spacing---space--6);
  grid-row-gap: var(--_spacing---space--6);
}
.hero_content {
  grid-column: 1 / span 8;
  width: 100%;
}
.hero_eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--_spacing---space--3);
  padding: var(--_spacing---space--2) var(--_spacing---space--4);
  border: var(--border-width--main) solid var(--_theme---text);
  border-radius: var(--radius--small);
}
.hero_title {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---space--1);
}
.hero_title_line.u-text-style-h3,
.hero_title_line.u-text-style-h1 {
  line-height: 1;
}
.hero_title_accent {
  color: var(--_theme---accent);
}
.hero_about.u-margin-trim {
  grid-column: 9 / span 4;
  width: 100%;
}
.hero_about_label.u-text-style-small {
  color: color-mix(in hsl, currentColor 50%, transparent);
  margin-bottom: var(--_spacing---space--4);
}
.hero_about_eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.125rem;
  height: 0.75em;
  margin-inline: 0.3em;
  vertical-align: baseline;
}
.hero_about_eq_bar {
  width: 0.1875rem;
  background-color: currentColor;
}
.hero_about_eq_bar.is-1 {
  height: 40%;
}
.hero_about_eq_bar.is-2 {
  height: 100%;
}
.hero_about_eq_bar.is-3 {
  height: 70%;
}

/* Mobile (page < 62em): crosshair shifts, heading rises, about block drops. */
@container threshold-large (width < 62em) {
  .hero_wrap.u-section {
    --hero-cross-x: 30%;
    --hero-cross-y: 57%;
  }
  .hero_layout.u-grid-above {
    align-items: start;
    justify-content: space-between;
    min-height: 62svh;
  }
}

/* ==========================================================================
   About us
   ========================================================================== */
.aboutus_wrap.u-section {
  --about-cross-x: 26%;
  --about-cross-y: 62%;
  position: relative;
  overflow: clip;
}

/* --- Decorative crosshair + glow --- */
.aboutus_deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* Zero-size flex anchor at the crosshair point; the glow centres on it via
   flex on the wrapper + position:absolute on the child (no translate hack). */
.aboutus_glow_wrap {
  position: absolute;
  left: var(--about-cross-x);
  top: var(--about-cross-y);
  display: flex;
  justify-content: center;
  align-items: center;
}
.aboutus_glow {
  position: absolute;
  width: 30rem;
  height: 26rem;
  background-image: radial-gradient(
    closest-side,
    color-mix(in hsl, var(--_theme---accent) 35%, transparent),
    transparent
  );
  filter: blur(2.5rem);
}
.aboutus_vline {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--about-cross-x);
  width: var(--border-width--main);
  background-color: color-mix(in hsl, var(--_theme---text) 12%, transparent);
}
.aboutus_hline {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--about-cross-y);
  height: var(--border-width--main);
  background-color: color-mix(in hsl, var(--_theme---text) 10%, transparent);
}
.aboutus_hline_accent {
  position: absolute;
  left: var(--about-cross-x);
  top: var(--about-cross-y);
  width: 9rem;
  max-width: 30vw;
  height: var(--border-width--main);
  background-image: linear-gradient(
    to right,
    var(--_theme---accent),
    transparent
  );
}

/* --- Layout --- */
.aboutus_contain.u-container {
  position: relative;
  z-index: 1;
}
.aboutus_layout {
  display: flex;
  flex-direction: column;
  gap: clamp(6rem, 16vw, 16rem);
}
.aboutus_intro.u-grid-above,
.aboutus_values.u-grid-above {
  --_column-count---value: 12;
  grid-column-gap: var(--_spacing---space--6);
  grid-row-gap: var(--_spacing---space--6);
}
.aboutus_intro.u-grid-above {
  align-items: start;
}
.aboutus_values.u-grid-above {
  align-items: center;
}
.aboutus_intro_aside,
.aboutus_values_aside {
  grid-column: 1 / span 4;
  width: 100%;
}
.aboutus_intro_main,
.aboutus_values_main {
  grid-column: 5 / span 8;
  width: 100%;
}

/* --- Eyebrow --- */
.aboutus_eyebrow {
  display: flex;
  align-items: center;
  gap: var(--_spacing---space--2);
}
.aboutus_eyebrow_text.u-text-style-small {
  color: color-mix(in hsl, var(--_theme---text) 50%, transparent);
}

/* --- Mission statement (gradient fade + inline equalizer) --- */
.aboutus_mission.u-text-style-h3 {
  width: 100%;
  background-image: linear-gradient(
    to bottom,
    var(--_theme---text) 0%,
    color-mix(in hsl, var(--_theme---text) 18%, transparent) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.aboutus_mission_eq {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-inline: 0.45em;
  vertical-align: middle;
}
.aboutus_mission_eq_bar {
  height: 1.5rem;
  flex: none;
}
.aboutus_mission_eq_bar.is-1 {
  width: 0.8125rem;
  background-color: var(--_theme---accent);
}
.aboutus_mission_eq_bar.is-2 {
  width: 0.5rem;
  background-color: color-mix(in hsl, var(--_theme---text) 20%, transparent);
}
.aboutus_mission_eq_bar.is-3 {
  width: 0.3125rem;
  background-color: color-mix(in hsl, var(--_theme---text) 20%, transparent);
}

/* --- We stand for --- */
.aboutus_values_main {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---space--5);
}
.aboutus_values_label.u-text-style-small {
  color: color-mix(in hsl, var(--_theme---text) 50%, transparent);
}
.aboutus_values_list {
  display: flex;
  flex-direction: row;
  gap: clamp(2rem, 4vw, 4rem);
}
.aboutus_value.u-text-style-small {
  flex: 1;
}
.aboutus_value_name {
  font-weight: var(--_typography---font--primary-medium);
}
.aboutus_value_desc {
  color: color-mix(in hsl, var(--_theme---text) 60%, transparent);
}

/* Mobile: crosshair moves right; the three values stack. */
@container threshold-large (width < 62em) {
  .aboutus_wrap.u-section {
    --about-cross-x: 90%;
    --about-cross-y: 66%;
  }
  .aboutus_values.u-grid-above {
    align-items: start;
  }
}
@container threshold-medium (width < 48em) {
  .aboutus_values_list {
    flex-direction: column;
  }
}

/* ==========================================================================
   Services
   ========================================================================== */
.services_wrap.u-section {
  position: relative;
  overflow: clip;
}

/* --- Ambient glows --- */
.services_deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
}
.services_glow {
  position: absolute;
  width: 32rem;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius--round);
  background-image: radial-gradient(
    closest-side,
    color-mix(in hsl, var(--_theme---accent) 26%, transparent),
    transparent
  );
  filter: blur(4rem);
}
.services_glow.is-top {
  top: 0;
  left: 0;
  transform: translate(-45%, -40%);
}
.services_glow.is-bottom {
  bottom: 0;
  right: 0;
  transform: translate(45%, 35%);
}

/* --- Layout --- */
.services_contain.u-container {
  position: relative;
  z-index: 1;
}

/* --- Heading --- */
.services_head.u-alignment-center {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---space--5);
}
.services_eyebrow {
  display: flex;
  align-items: center;
  gap: var(--_spacing---space--2);
}
.services_eyebrow_text.u-text-style-small {
  color: color-mix(in hsl, var(--_theme---text) 50%, transparent);
}
.services_title_accent {
  color: var(--_theme---accent);
}

/* --- Cards --- */
.services_cards.u-grid-above {
  --_column-count---value: 2;
  grid-column-gap: var(--_spacing---space--5);
  grid-row-gap: var(--_spacing---space--5);
  align-items: stretch;
}
.services_card_wrap {
  position: relative;
  overflow: clip;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--_spacing---space--6);
  padding: var(--_spacing---space--6);
  text-align: center;
  border: var(--border-width--main) solid
    color-mix(in hsl, var(--_theme---text) 40%, transparent);
  border-radius: var(--radius--small);
  box-shadow: 0 0.25rem 0.25rem
    color-mix(in hsl, var(--_theme---accent) 20%, transparent);
}
.services_card_wrap.is-filled {
  background-color: color-mix(in hsl, var(--_theme---text) 5%, transparent);
}
/* Glow centered in the card via flex on the wrapper (no translate centering). */
.services_card_glow_wrap {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: clip;
  pointer-events: none;
}
.services_card_glow {
  position: absolute;
  width: 70%;
  height: 60%;
  background-image: radial-gradient(
    closest-side,
    color-mix(in hsl, var(--_theme---accent) 30%, transparent),
    transparent
  );
  filter: blur(2.5rem);
}
.services_icon_wrap {
  position: relative;
  width: 3.5rem;
  aspect-ratio: 1 / 1;
  flex: none;
  z-index: 1;
}
/* SVG parts have no intrinsic size; give each img an explicit box so it fills
   (an absolutely-positioned <img> with only insets falls back to the 300x150
   replaced-element default). Boxes match each part's aspect. */
.services_icon_band {
  position: absolute;
  top: 0;
  left: 8.79%;
  width: 82.42%;
  height: 100%;
}
.services_icon_cups {
  position: absolute;
  top: 39.55%;
  left: 14.89%;
  width: 75.34%;
  height: 56.06%;
}
.services_icon_disc {
  position: absolute;
  top: 3.44%;
  left: 3.44%;
  width: 93.12%;
  height: 93.12%;
}
.services_card_title.u-text-style-h2 {
  position: relative;
  z-index: 1;
}
.services_card_title.is-accent {
  color: var(--_theme---accent);
}
.services_card_body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---space--3);
  width: 100%;
}
.services_card_lead.u-text-style-main {
  font-weight: var(--_typography---font--primary-medium);
}
.services_card_desc.u-text-style-main {
  font-weight: var(--_typography---font--primary-medium);
  color: color-mix(in hsl, var(--_theme---text) 65%, transparent);
}

/* --- CTA --- */
.services_actions.u-button-wrapper {
  justify-content: center;
}

/* Tight display treatment shared by the section title + card titles. */
.services_title.u-text-style-h2,
.services_card_title.u-text-style-h2 {
  line-height: 1;
  letter-spacing: var(--_typography---letter-spacing--tight-3);
}

/* ==========================================================================
   Artists
   ========================================================================== */
.artists_wrap.u-section {
  position: relative;
  overflow: clip;
  padding-top: var(--_spacing---section-space--large);
  padding-bottom: var(--_spacing---section-space--large);
}

/* --- Ambient glow (vertically centered, left-anchored via flex) --- */
.artists_deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: clip;
  pointer-events: none;
}
.artists_glow {
  position: relative;
  flex: none;
  width: 26rem;
  height: 11rem;
  transform: translateX(-35%);
  border-radius: var(--radius--round);
  background-image: radial-gradient(
    closest-side,
    color-mix(in hsl, var(--_theme---accent) 28%, transparent),
    transparent
  );
  filter: blur(4rem);
}

/* --- Layout --- */
.artists_contain.u-container {
  position: relative;
  z-index: 1;
}
.artists_layout.u-grid-above {
  --_column-count---value: 12;
  align-items: center;
}
.artists_intro {
  grid-column: 1 / span 4;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---space--5);
  align-items: flex-start;
}

/* --- Eyebrow --- */
.artists_eyebrow {
  display: flex;
  align-items: center;
  gap: var(--_spacing---space--2);
}
.artists_eyebrow_text.u-text-style-small {
  color: color-mix(in hsl, var(--_theme---text) 50%, transparent);
}
.artists_title.u-text-style-h3 {
  line-height: 1.1;
  letter-spacing: var(--_typography---letter-spacing--tight-3);
}
.artists_title_accent {
  color: var(--_theme---accent);
}

/* --- Nav arrows — one shared atom; .is-prev / .is-next distinguish them --- */
.artists_nav.u-button-wrapper {
  gap: var(--_spacing---space--2);
  justify-content: flex-start;
}
.artists_arrow_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  aspect-ratio: 1 / 1;
  padding: var(--_spacing---space--3);
  border-radius: var(--radius--small);
  border: var(--border-width--main) solid
    color-mix(in hsl, var(--_theme---text) 10%, transparent);
  background-color: color-mix(
    in hsl,
    var(--_theme---text) calc(5% + 7% * var(--_trigger---on)),
    transparent
  );
  color: var(--_theme---text);
  backdrop-filter: blur(1.25rem);
  transition: background-color 250ms;
}
.artists_nav_svg {
  width: 1.5rem;
  aspect-ratio: 1 / 1;
  flex: none;
}
.artists_nav_svg.is-prev {
  transform: rotate(180deg);
}
.artists_nav_path {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--border-width--main);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Slider (Swiper) --- */
.artists_slider.swiper {
  grid-column: 6 / span 7;
  width: 100%;
  min-width: 0;
  overflow: clip;
}
.artists_track.swiper-wrapper {
  display: flex;
}
.artists_card_wrap.swiper-slide {
  width: 19.5rem;
  height: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---space--3);
}
.artists_card_visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: clip;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--_theme---background-skeleton);
}
.artists_card_img {
  position: absolute;
  inset: 0;
  height: 100%;
}
/* R2R Moe in-cover logo overlay */
.artists_card_logo {
  position: absolute;
  width: 6.3rem;
  height: 5.3rem;
  object-fit: contain;
  transform: translate(0.7rem, 4.9rem);
}
.artists_card_caption.u-text-style-small {
  position: absolute;
  bottom: var(--_spacing---space--4);
  letter-spacing: var(--_typography---letter-spacing--loose-3);
  color: color-mix(in hsl, var(--_theme---text) 60%, transparent);
}
.artists_card_meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--_spacing---space--3);
  width: 100%;
}
.artists_card_name.u-text-style-h5 {
  line-height: 1.3;
}
.artists_card_listeners.u-text-style-small {
  flex: none;
  color: color-mix(in hsl, var(--_theme---text) 60%, transparent);
}