/* 01 · Velvet Atlas — touring band. Ink violet, acid, Syne set huge. A film hero, a two-column
   tour/listen body, a dragged photo wall, a store. */
.v-va { --bg: #0b0a12; --fg: #efecff; --mut: #8b85ad; --acc: #c8f04b; --edge: #2a2444; background: var(--bg); color: var(--fg); --btn-r: 10px; }
.v-va .va-hero { min-height: 100svh; display: grid; align-content: end; background: var(--bg); }
.v-va .va-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.75; }
.v-va .va-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(11 10 18 / 0.15), rgb(11 10 18 / 0.55) 55%, var(--bg) 100%); pointer-events: none; }
.v-va .va-hero__in { position: relative; z-index: 2; padding-block: clamp(60px, 8vw, 110px) clamp(48px, 6vw, 80px); }
.v-va .va-hero .eyebrow { color: var(--acc); }
.v-va h2 { font: 800 clamp(42px, 10.5vw, 168px)/0.86 var(--display); text-transform: uppercase; letter-spacing: -0.045em; max-width: 11ch; }
.v-va h2 em { font-style: normal; color: var(--acc); }
.v-va .btn { background: var(--acc); color: #101010; }
.v-va .va-body { padding-block: clamp(56px, 7vw, 100px); }
.v-va .va-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.v-va .va-h3 { font: 800 clamp(26px, 3vw, 40px)/1 var(--display); letter-spacing: -0.03em; text-transform: uppercase; margin-bottom: 18px; }
.v-va .va-sync { font: 600 10px/1 var(--sans); letter-spacing: 0.2em; color: var(--mut); margin-left: 12px; text-transform: uppercase; }
.v-va .event, .v-va .track { border-color: var(--edge); }
.v-va .badge.on { background: var(--acc); color: #101010; }
.v-va .badge.out { border: 1px solid var(--mut); color: var(--mut); }
.v-va .va-count { margin-top: 22px; display: inline-flex; gap: 12px; align-items: center; padding: 11px 16px; border: 1px solid var(--edge); border-radius: 10px; font: 600 12px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.v-va .va-count b { color: var(--acc); font-size: 15px; }
.v-va .player { margin-top: 26px; background: rgb(255 255 255 / 0.06); border: 1px solid var(--edge); }
.v-va .player .art { background: conic-gradient(from 40deg, #c8f04b, #5b4bc4, #0b0a12 70%); }
.v-va .va-small { display: block; font-size: 12.5px; color: var(--mut); margin-top: 14px; }
.v-va .track .va-small { margin-top: 2px; }
.v-va .va-gallery { margin-top: clamp(56px, 7vw, 96px); --fx-drag-height: clamp(220px, 34vw, 420px); }
.v-va .va-gallery figcaption { font: 700 11px/1.3 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); }
.v-va .va-gallery img { border-radius: 10px; }
.v-va .va-merch { margin-top: clamp(56px, 7vw, 96px); }
.v-va .va-shop { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.v-va .va-product { border: 1px solid var(--edge); border-radius: 14px; overflow: clip; background: rgb(255 255 255 / 0.04); display: flex; flex-direction: column; }
.v-va .va-product .ph { aspect-ratio: 4 / 3; background: #1b1631; }
.v-va .va-pbody { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.v-va .va-pbody b { font-size: 15px; }
.v-va .va-prow { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.v-va .va-price { font: 700 15px var(--display); color: var(--acc); }
.v-va .va-add { font: 700 11px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; min-height: 44px; padding: 0 14px; border-radius: 8px; border: 1.5px solid var(--acc); color: var(--acc); }
.v-va .va-add:hover, .v-va .va-add:focus-visible { background: var(--acc); color: #101010; }
.v-va .va-cart { position: sticky; bottom: 18px; margin: 26px 0 0 auto; width: fit-content; display: flex; gap: 12px; align-items: center; padding: 13px 20px; border-radius: 999px; background: var(--acc); color: #101010; font: 700 13px/1 var(--display); box-shadow: 0 16px 40px rgb(0 0 0 / 0.45); }
.v-va .fxlist { color: var(--mut); }
@media (max-width: 900px) { .v-va .va-cols { grid-template-columns: 1fr; } }