/* Lowpass: deep violet, wide type, a tracklist that chooses the product. */
body { --bg: #1c0a5c; --fg: #f3eefe; --display: Unbounded, sans-serif; --display-w: 700; --body: Archivo, system-ui, sans-serif; --strip-bg: #120540; --strip-fg: #c2b6ee; --why-bg: #ff7a5c; --why-fg: #1c0a5c; }
.buy { background: #ff7a5c; border: 0; color: #1c0a5c; font-weight: 800; padding: 0.65rem 1.2rem; }
.ctl { background: none; border: 2px solid #c2b6ee; border-radius: 999px; color: inherit; padding: 0.5rem 1rem; }
.a-hero { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; height: calc(100svh - 1.8rem); min-height: 40rem; overflow: clip; padding: 0.5rem var(--gutter) 0.75rem; }
.a-top { display: flex; justify-content: space-between; }
.shopname { font-family: Unbounded, sans-serif; font-size: 1.1rem; font-weight: 800; }
.cartline { font-size: 0.85rem; }
.a-hero h1 { font-family: Unbounded, sans-serif; font-size: clamp(1.5rem, 3.6vw, 3.9rem); font-weight: 700; line-height: 1; margin: 0.25rem 0 1rem; max-width: 26ch; }
.a-deck { display: grid; gap: var(--gutter); grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 1fr); min-height: 0; }
.a-screen { display: grid; grid-template-rows: minmax(0, 1fr) 3.5rem; min-height: 0; position: relative; }
.a-bars { align-items: end; display: flex; gap: 2px; height: 3.5rem; padding-block-start: 0.4rem; }
.a-bars i { background: #ff7a5c; flex: 1; height: 20%; transition: height 280ms; }
.a-tracks { align-content: start; display: grid; list-style: none; margin: 0; overflow: auto; padding: 0; }
.a-tracks li { border-block-end: 1px solid #4a3a93; }
.a-tracks button { align-items: baseline; background: none; border: 0; color: inherit; cursor: pointer; display: grid; font: inherit; gap: 0.75rem; grid-template-columns: 1.6rem minmax(0, 1fr) auto; padding: 0.6rem 0.3rem; text-align: start; width: 100%; }
.a-tracks button[aria-current="true"] { background: #ff7a5c; color: #1c0a5c; font-weight: 700; }
@media (hover: hover) { .a-tracks button:hover:not([aria-current="true"]) { background: #2d1a7e; } }
.a-n { font-family: Unbounded, sans-serif; font-size: 0.85rem; }
.a-tracks b { font-weight: 500; font-variant-numeric: tabular-nums; }
.a-play { align-items: center; display: flex; flex-wrap: wrap; gap: 0.4rem; padding-block-start: 0.75rem; }
.a-wave { overflow: clip; padding: clamp(3rem, 6vw, 5rem) 0; }
.a-wave h2 { font-family: Unbounded, sans-serif; font-size: clamp(2.2rem, 7vw, 7rem); line-height: 1; margin: 0 0 0.5rem; padding-inline: var(--gutter); }
.a-stage { padding-block: 5rem; position: relative; }
@media (max-width: 820px) { .a-hero { height: auto; } .a-deck { grid-template-columns: minmax(0, 1fr); } .a-screen { height: 56vh; } }
@media (prefers-reduced-motion: reduce) { .a-bars i { transition: none; } }
.a-hero { height: auto; min-height: calc(100svh - 1.8rem); }
.a-deck { grid-template-columns: auto minmax(16rem, 1fr); }
.a-screen { --sq: min(100svh - 19rem, 56vw); grid-template-rows: var(--sq) 3.5rem; width: var(--sq); }
.a-wave .pd .buy { background: #ff7a5c; }
@media (max-width: 820px) { .a-deck { grid-template-columns: minmax(0, 1fr); } .a-screen { --sq: 100%; grid-template-rows: auto 3.5rem; height: auto; width: 100%; } .a-screen .gs { aspect-ratio: 1; } }