/* Vocal reel: singing videos (shared reel player) plus audio samples,
   coloured per design through --vocal-accent. */
.theme-a { --vocal-accent: #c9a62a; --vocal-muted: rgba(70,60,55,.22); }
.theme-b { --vocal-accent: var(--terra); --vocal-muted: rgba(47,59,54,.22); }
.theme-c { --vocal-accent: var(--coral); --vocal-muted: rgba(38,49,58,.2); }
.theme-d { --vocal-accent: var(--plum); --vocal-muted: rgba(142,60,108,.22); }

.music { display: grid; gap: 22px; }
.music__sub { font-size: 13px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; opacity: .75; margin-top: 6px; }

/* Videos */
.clips { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.clips[data-count="1"] { grid-template-columns: minmax(0, 860px); justify-content: center; }
.clips[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.clip { margin: 0; min-width: 0; }
.clip__title { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; font-size: 15px; }
.clip__title span { opacity: .65; font-variant-numeric: tabular-nums; }
.clips:not([data-count="1"]) .reel { --play-size: 56px; }
.clips:not([data-count="1"]) .reel__soon { font-size: 10px; }

/* Audio */
.vocal { display: grid; gap: 14px; }
.vocal__player { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; }
.vocal__play { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--vocal-accent); color: #fff; display: grid; place-items: center; cursor: pointer; }
.vocal__play:disabled { cursor: default; opacity: .85; }
.vocal__play svg { width: 20px; fill: currentColor; }
.vocal__icon-play { translate: 2px 0; }
.vocal__icon-pause, .vocal.is-playing .vocal__icon-play { display: none; }
.vocal.is-playing .vocal__icon-pause { display: block; }
.vocal__wave { position: relative; height: 56px; cursor: pointer; }
.vocal__wave svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--vocal-muted); }
.vocal__fill { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }
.vocal__fill svg { fill: var(--vocal-accent); }
.vocal__time { font-size: 13px; letter-spacing: .06em; min-width: 3em; text-align: right; opacity: .75; }
.vocal__soon { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .65; padding-left: 66px; }
.vocal__tracks { counter-reset: t; border-top: 1px solid var(--vocal-muted); }
.vocal__tracks button { width: 100%; display: flex; justify-content: space-between; gap: 20px; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--vocal-muted); background: none; color: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.vocal__tracks button[aria-current] { color: var(--vocal-accent); font-weight: 500; }
.vocal__dur { opacity: .7; font-variant-numeric: tabular-nums; }

/* Section wrappers per design */
.a-vocal { padding: 10px 0 24px; }
.b-vocal { padding: 6px 0 40px; }
.c-vocal { padding: 34px 0 34px; }
.d-vocal { padding: 26px 0 30px; }
.a-vert { padding: 30px 0 30px; }
.b-vert { padding: 30px 0 30px; }
.c-vert { padding: 40px 0 10px; }
.d-vert { padding: 30px 0 34px; }
@media (max-width: 640px) {
  .clips[data-count="2"] { grid-template-columns: 1fr; }
  .vocal__player { gap: 12px; }
  .vocal__soon { padding-left: 0; }
}