:root {
  --teal: #0d4f52; --mustard: #f2b134; --rust: #c8451d; --sand: #f7e6c2; --vinyl: #15110e;
  --groove: repeating-radial-gradient(circle, #15110e 0 2px, #2c2622 2px 3px);
  --funk: 'Shrikhand', Georgia, serif; --work: 'Work Sans', system-ui, sans-serif;
  --cx-bg: #fff8e8; --cx-surface: #f7e6c2; --cx-text: #15302f; --cx-muted: #4a5a55; --cx-line: #b89f6e;
  --cx-accent: var(--rust); --cx-on-accent: #fff; --cx-radius: 8px; --cx-font: var(--work); --cx-head-font: var(--funk); --cx-head-weight: 400;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--teal); color: var(--sand); font: 400 1.0625rem/1.55 var(--work); }
a { color: inherit; }
main { display: block; outline: none; min-height: 60vh; overflow-x: clip; }
:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }
.top { display: flex; gap: 24px; align-items: baseline; padding: 16px clamp(16px, 4vw, 48px); }
.mark { margin-right: auto; font: 400 1.75rem/1 var(--funk); color: var(--mustard); text-decoration: none; }
.stage { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 24px; padding: clamp(16px, 4vw, 40px) clamp(16px, 4vw, 48px) clamp(56px, 8vw, 96px); overflow: hidden; }
.stage h1 { margin: 0; font: 400 clamp(5rem, 17vw, 16rem)/0.95 var(--funk); color: var(--mustard); text-shadow: 5px 5px 0 var(--rust); }
.stage p { margin: 24px 0; max-width: 40ch; font-size: 1.25rem; }
.needle { display: inline-block; padding: 14px 26px; background: var(--rust); color: #fff; border-radius: 999px; font-weight: 600; text-decoration: none; }
.needle:hover { background: var(--mustard); color: var(--vinyl); }
.platter { position: relative; display: grid; place-items: center; width: min(100%, 560px); aspect-ratio: 1; justify-self: center; background: var(--groove); border-radius: 50%; animation: spin 14s linear infinite; }
.platter-label { display: grid; place-items: center; width: 36%; aspect-ratio: 1; background: var(--mustard); color: var(--rust); border-radius: 50%; font: 400 clamp(3rem, 8vw, 6.5rem)/1 var(--funk); }
@keyframes spin { to { transform: rotate(360deg); } }
.crates { padding: clamp(40px, 7vw, 80px) clamp(16px, 4vw, 48px); background: var(--sand); color: var(--vinyl); scroll-margin-top: 0; }
.crates h2 { margin: 0; font: 400 clamp(2.75rem, 8vw, 6rem)/1 var(--funk); color: var(--rust); }
.genres { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 14px 0 28px; padding: 0; list-style: none; }
.genres a[aria-current] { color: #a13510; font-weight: 700; }
.sleeves { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 40px 56px; padding-right: 32px; }
.sleeve { display: flex; flex-direction: column; color: var(--vinyl); text-decoration: none; }
.deck { position: relative; display: block; aspect-ratio: 1; margin-bottom: 12px; }
.disc { position: absolute; inset: 3%; background: radial-gradient(circle, var(--mustard) 0 16%, var(--vinyl) 16.5% 18%, transparent 18.5%), var(--groove); border-radius: 50%; transform: translateX(12%); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.sleeve:nth-child(3n+2) .disc { background: radial-gradient(circle, var(--rust) 0 16%, var(--vinyl) 16.5% 18%, transparent 18.5%), var(--groove); }
.sleeve:nth-child(3n) .disc { background: radial-gradient(circle, #4fb3a9 0 16%, var(--vinyl) 16.5% 18%, transparent 18.5%), var(--groove); }
.sleeve:hover .disc, .sleeve:focus-visible .disc { transform: translateX(30%) rotate(40deg); }
.cover { position: absolute; inset: 0; display: block; background: #fff; box-shadow: 3px 3px 0 rgb(21 17 14 / .85); }
.cover img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hype { position: absolute; top: 8px; left: -6px; max-width: 80%; padding: 2px 10px; background: var(--rust); color: #fff; font-size: 0.8125rem; font-weight: 600; transform: rotate(-3deg); }
.s-name { font-weight: 600; line-height: 1.25; overflow-wrap: break-word; }
.pdp { color: var(--sand); }
.pdp h1, .bag h1 { font: 400 clamp(2.5rem, 6vw, 4.75rem)/1.02 var(--funk); color: var(--mustard); }
.pdp-photo { background: #fff; box-shadow: 8px 8px 0 var(--vinyl); }
.pdp-add { background: var(--rust); border-color: var(--rust); color: #fff; border-radius: 999px; }
.opt { border-radius: 999px; }
.opt[aria-pressed='true'] { background: var(--mustard); color: var(--vinyl); border-color: var(--mustard); }
.cx-wish { border-radius: 999px; }
.cx-extras { background: var(--sand); width: 100%; max-width: none; }
.bag { color: var(--sand); }
.bag .cx-checkout { border-radius: 999px; }
.state { color: var(--sand); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; padding: 28px clamp(16px, 4vw, 48px); background: var(--vinyl); color: var(--sand); }
.foot [data-footer-links] { width: 100%; }
.foot p { margin: 0; max-width: 60ch; }
@media (max-width: 760px) { .stage { grid-template-columns: minmax(0, 1fr); } .platter { width: 72%; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .platter { animation: none; } .disc { transition: none; } }

main > .cx:not(.cx-extras) { margin-block: clamp(16px, 4vw, 40px); padding-inline: clamp(16px, 4vw, 40px); border-radius: 12px; }