:root{--bg:#070707;--fg:#ece7da;--mute:#77726a;--line:rgba(236,231,218,.16);--gold:#e0b14e}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg)}
body{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:14px;line-height:1.5;position:relative;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.07;z-index:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
[hidden]{display:none!important}
a{color:inherit}
.lbl{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.mute{color:var(--mute)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sp{font-weight:700;font-size:clamp(26px,3.6vw,44px);line-height:1;letter-spacing:.14em;text-transform:uppercase;margin:0}
.btn{display:inline-block;border:1px solid var(--fg);padding:12px 18px;color:var(--fg);text-decoration:none;font:inherit;font-size:11px;letter-spacing:.2em;background:none;cursor:pointer}
.btn:hover{background:var(--fg);color:#000}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* hero */
.hero{position:relative;height:min(78vh,760px);min-height:420px;overflow:hidden;border-bottom:1px solid var(--line);background:#070707 url(/assets/img/bg/dollars.webp) center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 50% 45%,transparent 40%,rgba(7,7,7,.75) 100%);pointer-events:none;z-index:1}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;z-index:1}.hero canvas:active{cursor:grabbing}
.hero .tag{position:absolute;left:32px;bottom:26px;z-index:2}
.hero .cta{position:absolute;right:32px;bottom:26px;z-index:2;border:1px solid var(--fg);padding:10px 14px;color:var(--fg);text-decoration:none;font-size:11px;letter-spacing:.2em;background:rgba(7,7,7,.6)}
.hero .cta:hover{background:var(--fg);color:#000}
section{position:relative;z-index:2;padding:44px 32px 56px;border-bottom:1px solid var(--line);max-width:1400px;margin:0 auto}
section.center{text-align:center;padding-block:96px;display:grid;gap:22px;justify-items:center}
.h{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:24px}
.skel{background:linear-gradient(90deg,#0d0d0d,#141414,#0d0d0d);background-size:200% 100%;animation:sk 1.4s linear infinite;min-height:120px}
@keyframes sk{to{background-position:-200% 0}}
/* drops */
.drop{display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:28px;align-items:start}
.cover{position:relative;aspect-ratio:1;background:#111;overflow:hidden}.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover .new{position:absolute;top:12px;left:12px;background:var(--fg);color:#000;padding:4px 8px}
.player{border:1px solid var(--line);background:#000;display:grid}
.player iframe{display:block;width:100%;height:352px;border:0}
.pt{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}.pt b{font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.pb{padding:14px 18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}.pb a{color:var(--fg);text-decoration:none;font-size:11px;letter-spacing:.18em;border:1px solid var(--fg);padding:8px 12px}
.rels{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}
.rel{color:inherit;text-decoration:none;display:grid;gap:8px}.rel .cv{aspect-ratio:1;background:#141414;border:1px solid var(--line);overflow:hidden}.rel .cv img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3);transition:.3s}.rel:hover .cv img{filter:none;transform:scale(1.03)}
.rel .rt{font-size:12px;text-transform:uppercase;letter-spacing:.06em}.rel .rs{font-size:11px;color:var(--mute)}
/* shop */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line)}
.card{background:var(--bg);padding:16px;display:grid;gap:10px;position:relative;overflow:hidden;align-content:start}
.card.big{grid-column:span 2;grid-row:span 2}
.card .ph{aspect-ratio:1;background:#0f0f0f;display:grid;place-items:center;overflow:hidden}
.card img{width:100%;height:100%;object-fit:contain;transition:transform .5s cubic-bezier(.2,.7,.2,1)}.card:hover img{transform:scale(1.06) rotate(-1.5deg)}
.card .t{font-size:12px;line-height:1.4;text-transform:uppercase;letter-spacing:.06em}
.card .p{display:flex;justify-content:space-between;align-items:center;font-variant-numeric:tabular-nums}.card .p b{font-size:16px;letter-spacing:.04em}
.card.big .t{font-size:14px}.card.big .p b{font-size:20px}
.card .num{position:absolute;top:12px;right:14px;font-size:10px;color:var(--mute);letter-spacing:.2em}
.card .sizes{display:flex;gap:6px;flex-wrap:wrap;opacity:0;transform:translateY(6px);transition:.25s}
.card:hover .sizes,.card:focus-within .sizes,.card.open .sizes{opacity:1;transform:none}
.sizes button{font:inherit;font-size:11px;letter-spacing:.1em;background:#000;border:1px solid var(--line);color:var(--fg);padding:6px 10px;cursor:pointer}
.sizes button[aria-pressed=true]{border-color:var(--fg);background:var(--fg);color:#000}
.sizes button:disabled{opacity:.3;text-decoration:line-through;cursor:not-allowed}
.sizes .add{margin-left:auto;border-color:var(--fg)}.sizes .add:hover{background:var(--fg);color:#000}
.card .soldout{position:absolute;inset:0;display:grid;place-items:center;background:rgba(7,7,7,.7);letter-spacing:.3em;font-size:11px}
/* cart drawer */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:#000;border-left:1px solid var(--fg);z-index:30;display:grid;grid-template-rows:auto 1fr auto;box-shadow:-30px 0 80px rgba(0,0,0,.7)}
.drawer header,.drawer footer{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.drawer footer{border-bottom:0;border-top:1px solid var(--line);display:grid;gap:12px}
.drawer header b{letter-spacing:.2em;font-size:12px}.drawer header button{margin-left:auto;background:none;border:0;color:var(--fg);font-size:16px;cursor:pointer}
.items{overflow-y:auto;padding:8px 20px;display:grid;gap:12px;align-content:start}
.it{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.it img{width:64px;height:64px;object-fit:contain;background:#0f0f0f}.it .t{font-size:12px;text-transform:uppercase;letter-spacing:.04em}.it .v{font-size:11px;color:var(--mute)}
.it .q{display:flex;align-items:center;gap:8px}.it .q button{background:none;border:1px solid var(--line);color:var(--fg);width:26px;height:26px;cursor:pointer;font:inherit}
.tot{display:flex;justify-content:space-between;align-items:baseline}.tot b{font-size:18px}
.drawer .btn{text-align:center}.drawer .btn:disabled{opacity:.4;cursor:wait}
.empty{padding:40px 0;text-align:center;color:var(--mute)}
/* about / producers */
.about{display:grid;gap:24px}.about p{margin:0}
.roster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.pr{background:var(--bg);padding:18px;display:grid;gap:10px;align-content:start;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (max-width:900px){.roster{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pr .ph{aspect-ratio:4/5;background:#0f0f0f;border:1px dashed rgba(236,231,218,.25);display:grid;place-items:center;color:var(--mute);font-size:11px;letter-spacing:.2em;overflow:hidden}
.pr .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)}.pr .ph img.mk{width:45%;height:auto;object-fit:contain;opacity:.18;filter:none}.pr:hover .ph img{filter:none}
.pr .n{font-size:14px;text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:8px}.pr .n span{font-size:18px}
.pr .r{font-size:11px;color:var(--mute);letter-spacing:.06em}.pr p{font-size:12px;line-height:1.6;margin:0;color:#b9b4a6}
.pr a{font-size:11px;color:var(--mute);text-decoration:none;letter-spacing:.14em}
.soc{display:inline-flex;align-items:center;gap:10px;color:var(--fg)!important;font-size:12px;letter-spacing:.12em;text-transform:none}.soc svg{width:28px;height:28px;flex:none}.soc:hover{color:var(--gold)!important}
.foot{position:relative;z-index:2;padding:30px 32px;display:flex;align-items:center;gap:28px;font-size:12px;color:var(--mute);letter-spacing:.06em;max-width:1400px;margin:0 auto}
.foot a{color:inherit;text-decoration:none;color:var(--fg)}.foot img{height:44px;opacity:.8}.foot .soc svg{width:58px;height:58px;margin:-7px}.foot .top i{display:block;width:49px;height:44px;background:currentColor;-webkit-mask:url(/assets/img/mark.png) center/contain no-repeat;mask:url(/assets/img/mark.png) center/contain no-repeat}.foot span{margin-left:auto;white-space:nowrap}
@media (max-width:600px){.foot{flex-wrap:wrap;gap:14px 20px}.foot span{margin-left:0;flex-basis:100%}}
/* beat request chat */
.chat{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:40;width:min(380px,calc(100vw - 44px));height:min(560px,calc(100vh - 44px));height:min(560px,calc(100dvh - 44px));max-height:calc(100dvh - 44px);background:#000;border:1px solid var(--fg);display:grid;grid-template-rows:auto 1fr auto;box-shadow:0 30px 80px rgba(0,0,0,.8)}
.chat header{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.chat header img{height:26px}.chat header b{font-size:12px;letter-spacing:.18em}.chat header small{color:var(--mute);font-size:10px;letter-spacing:.14em;display:block}
.chat header button{margin-left:auto;background:none;border:0;color:var(--fg);font:inherit;font-size:16px;cursor:pointer}
.msgs{padding:16px;overflow-y:auto;display:grid;gap:10px;align-content:start;font-size:13px;line-height:1.55}
.m{max-width:85%;padding:10px 12px;border:1px solid var(--line)}
.m.bot{justify-self:start;background:#0d0d0d}.m.me{justify-self:end;background:var(--fg);color:#000;border-color:var(--fg)}.m.err{border-color:#ff3b3b;color:#ff6b6b}
.chat form{display:flex;border-top:1px solid var(--line)}
.chat input{flex:1;min-width:0;background:#000;border:0;color:var(--fg);font:inherit;font-size:16px;padding:14px 16px;outline:none}.chat input::placeholder{color:var(--mute)}
.chat form button{background:var(--fg);color:#000;border:0;font:inherit;font-size:11px;letter-spacing:.16em;padding:0 18px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.skel,.card img{animation:none;transition:none}}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.card.big{grid-row:auto}.drop{grid-template-columns:1fr}}
@media (max-height:700px){.chat{height:min(480px,calc(100dvh - 24px));bottom:12px;right:12px}}
@media (max-width:600px){
  .nav,section,.foot{padding-inline:18px}.nav{gap:18px}.nav a:not(.brand):not(.cart){font-size:11px}
  .hero{height:min(72vh,640px);background-image:url(/assets/img/bg/dollars-sm.webp)}.hero .tag{left:18px;bottom:18px}.hero .cta{right:18px;bottom:18px}
  .sp{font-size:24px}.card{padding:12px}.card .sizes{opacity:1;transform:none}
  .chat{inset:0;width:100%;height:100dvh;max-height:none;border:0}
}
/* nav: sticky; logo + HOME, the rest unfolds on hover/focus (always open on touch); BEAT REQUESTS is the primary action */
.nav{position:sticky;top:0;z-index:20;background:rgba(7,7,7,.9);display:flex;align-items:center;gap:0 22px;padding:12px 32px;border-bottom:1px solid var(--line)}
.nav a{color:inherit;text-decoration:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;position:relative;padding:6px 0;white-space:nowrap}
.nav .brand{display:flex;align-items:center;gap:12px}.nav .brand img{height:34px;display:block}
.nav .menu{display:flex;gap:22px}
.nav .beats{margin-left:auto;border:1px solid var(--fg);padding:9px 14px;background:var(--fg);color:#000}
.nav .beats:hover{background:none;color:var(--fg)}
.nav .cart{border:1px solid currentColor;padding:6px 12px}
@media (max-width:600px){.nav{padding:10px 14px;gap:0 12px;flex-wrap:wrap}.nav .menu{order:3;flex-basis:100%;justify-content:space-between;padding-top:6px}.nav .menu{gap:12px}.nav a{font-size:10px;letter-spacing:.12em}.nav .brand span{display:none}.nav .beats{padding:8px 10px}}
/* about: centered so the page doesn't feel empty */
section.centered{text-align:center;min-height:calc(100vh - 140px);display:grid;align-content:center;justify-items:center;gap:40px;padding-block:72px}
section.centered .h{justify-content:center;margin:0}
section.centered .about{margin:0 auto;justify-items:center;max-width:820px;gap:32px}
section.centered .about img{width:min(260px,60vw)}
section.centered .about p{font-size:17px;line-height:1.85;max-width:58ch}
@media (max-width:600px){section.centered{min-height:auto;gap:28px;padding-block:48px}section.centered .about p{font-size:15px}}

/* ---- motion: quiet, short, eased ---- */
/* nav: gold underline slides in on hover */
.nav .brand span{position:relative;padding:6px 0}
.nav .menu a::after,.nav .brand span::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav .menu a:hover::after,.nav .menu a[aria-current]::after,.nav .brand:hover span::after,.nav .brand[aria-current] span::after{transform:scaleX(1)}
/* the button: cream, fades to outline on hover */
.nav .beats{transition:background .2s ease,color .2s ease}
/* spotify block: static scanlines */
.player{position:relative;isolation:isolate}
.player::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.cover img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}.cover:hover img{transform:scale(1.03)}
/* shop cards: gentle zoom, no tilt */
.card:hover img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.nav .menu a::after,.nav .brand span::after,.nav .beats,.cover img{transition:none}}
/* marquee under the nav: slow, whole strip opens the beat-request chat */
.mq{display:block;overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--line);padding:9px 0;font-size:11px;letter-spacing:.2em;color:var(--mute);text-decoration:none;position:relative;z-index:2}
.mq div{display:inline-block;animation:mq 120s linear infinite}
.mq span{padding:0 18px;transition:color .2s ease}.mq i{font-style:normal;color:var(--gold)}
.mq:hover span{color:var(--fg)}.mq:hover div{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq div{animation:none}}
/* images: no drag-out, no iOS long-press "save image" (deterrent only; screenshots can't be blocked) */
img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

/* long names/handles must wrap, never widen their cell */
.pr{grid-template-columns:minmax(0,1fr)}
.pr .soc,.pr .n{min-width:0;overflow-wrap:anywhere}