/* InternetBeats — shared across every page */

:root{
  --void:#000;
  --ivory:#F2EFE9;
  --ash:#7E7A72;
  --dim:#5C5850;
  --gold:#C9A876;
  --gold-hi:#E7CB98;
  --line:rgba(242,239,233,.12);
  --serif:'Bodoni Moda',Didot,Georgia,serif;
  --sans:Archivo,system-ui,sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--void);color:var(--ivory);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.shell{width:min(1240px,90vw);margin:0 auto}
.eyebrow{font-size:10.5px;letter-spacing:.36em;color:var(--gold)}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;margin:0}
.page{position:relative;z-index:2}

/* ---------- spinning background mark ---------- */
.bg-logo{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.bg-logo-in{position:relative;width:min(920px,116vw);flex:none}
.bg-logo-in img{width:100%;display:block;opacity:.045}
.bg-logo-in svg.globe{position:absolute;inset:0;width:100%;height:100%;opacity:.13}
.bg-logo-in .orbit{position:absolute;inset:0;transform:scaleY(.34);pointer-events:none}
.bg-logo-in .orbit i{position:absolute;inset:0;display:block;animation:bgspin 13s linear infinite;opacity:.55}
.bg-logo-in .orbit i::after{
  content:"";position:absolute;left:-3px;top:50%;width:8px;height:8px;margin-top:-4px;
  border-radius:999px;background:#fff;
  box-shadow:0 0 9px 3px rgba(190,215,255,.7),0 0 22px 8px rgba(120,170,255,.3);
}
.bg-logo-in .orbit i:nth-child(2){animation-duration:19s;animation-delay:-7s;opacity:.35}
.bg-logo-in .orbit i:nth-child(2)::after{width:5px;height:5px;margin-top:-2.5px}
@keyframes bgspin{to{transform:rotate(360deg)}}
.bg-logo-in .stars{position:absolute;inset:-30% -10%;pointer-events:none;overflow:hidden}
.bg-logo-in .stars b{
  position:absolute;left:0;top:0;width:130px;height:2px;border-radius:2px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(190,215,255,.2),rgba(255,255,255,.8));
  animation:bgshoot 9s linear infinite;
}
.bg-logo-in .stars b::after{
  content:"";position:absolute;right:-2px;top:-2px;width:5px;height:5px;border-radius:999px;
  background:#fff;box-shadow:0 0 9px 3px rgba(200,225,255,.75),0 0 20px 7px rgba(120,170,255,.3);
}
.bg-logo-in .stars b:nth-child(1){top:14%;animation-delay:0s}
.bg-logo-in .stars b:nth-child(2){top:46%;animation-delay:3.2s;animation-duration:11s}
.bg-logo-in .stars b:nth-child(3){top:70%;animation-delay:6.1s;animation-duration:8s;transform:scale(.7)}
@keyframes bgshoot{
  0%{transform:translate(-18%,0) rotate(18deg);opacity:0}
  3%{opacity:1}
  22%{opacity:1}
  30%{transform:translate(118%,42%) rotate(18deg);opacity:0}
  100%{transform:translate(118%,42%) rotate(18deg);opacity:0}
}
@media(prefers-reduced-motion:reduce){.bg-logo-in .orbit,.bg-logo-in .stars b{animation:none!important;opacity:0!important}}

/* ---------- bag label ---------- */
.bag{font-size:10.5px;letter-spacing:.28em;color:var(--ash)}
.bag b{color:var(--gold-hi);font-weight:400}
.bag:hover{color:var(--ivory)}

/* ---------- player deck ---------- */
.deck{
  position:fixed;left:0;right:0;bottom:0;z-index:70;transform:translateY(110%);
  transition:transform .4s cubic-bezier(.3,0,.2,1);
  background:rgba(0,0,0,.93);backdrop-filter:blur(16px);border-top:1px solid var(--line);
}
.deck.up{transform:translateY(0)}
.deck-in{display:flex;align-items:center;gap:18px;padding:14px 5vw}
.dbtn{width:30px;height:30px;display:grid;place-items:center;color:var(--ash)}
.dbtn:hover{color:var(--ivory)}
.dbtn.main{width:40px;height:40px;border-radius:999px;background:var(--ivory);color:var(--void)}
.deck-t{font-family:var(--serif);font-size:16px;min-width:120px}
.deck-s{font-size:10px;letter-spacing:.2em;color:var(--dim)}
.deck-line{flex:1;min-width:80px;height:2px;background:rgba(242,239,233,.14);cursor:pointer;position:relative}
.deck-line span{position:absolute;inset:0 auto 0 0;width:0;background:var(--gold)}
.deck-c{font-size:11px;color:var(--dim);letter-spacing:.06em}
.deck-bag{font-size:10.5px;letter-spacing:.24em;color:var(--ivory)}
.deck-bag b{color:var(--gold-hi);font-weight:400}
.deck-link{font-size:10.5px;letter-spacing:.24em;color:var(--ash)}
.deck-link:hover{color:var(--ivory)}

/* ---------- bag drawer ---------- */
.veil{position:fixed;inset:0;background:rgba(0,0,0,.72);opacity:0;pointer-events:none;transition:opacity .3s;z-index:80}
.veil.on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);z-index:90;
  transform:translateX(101%);transition:transform .4s cubic-bezier(.3,0,.2,1);
  background:#050505;border-left:1px solid var(--line);display:flex;flex-direction:column;
}
.drawer.on{transform:translateX(0)}
.d-top{display:flex;align-items:center;padding:26px 28px;border-bottom:1px solid var(--line)}
.d-top h3{font-family:var(--serif);font-weight:400;font-size:21px;margin:0;flex:1}
.d-items{flex:1;overflow:auto;padding:6px 28px}
.line{display:flex;gap:14px;padding:20px 0;border-bottom:1px solid var(--line)}
.line-t{font-family:var(--serif);font-size:16px}
.line-p{margin-left:auto;font-family:var(--serif);color:var(--gold-hi);white-space:nowrap}
.line-by{font-size:11px;letter-spacing:.06em;color:var(--dim);margin-top:4px}
a.line-by{display:block;width:max-content}
a.line-by:hover{color:var(--gold-hi)}

/* producer cards: the Producers page and the homepage strip */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:44px 28px}
.pc{display:block;color:inherit}
.pc-face{aspect-ratio:1;border:1px solid var(--line);background:#070707;display:grid;place-items:center;overflow:hidden;transition:border-color .25s}
.pc-face img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.pc-face span{font-family:var(--serif);font-size:48px;color:var(--gold)}
.pc:hover .pc-face{border-color:var(--gold)}
.pc:hover .pc-face img{transform:scale(1.03)}
.pc-n{font-family:var(--serif);font-size:24px;line-height:1.15;margin-top:16px;overflow-wrap:anywhere}
.pc:hover .pc-n{color:var(--gold-hi)}
.pc-g{font-size:10px;letter-spacing:.24em;color:var(--ash);margin-top:9px}
.pc-m{font-size:12.5px;color:var(--dim);margin-top:6px}
@media(max-width:520px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 16px}.pc-n{font-size:19px}.pc-face span{font-size:34px}}
.tier-pick{
  margin-top:8px;font-size:10px;letter-spacing:.2em;color:var(--ash);font-family:inherit;
  background:transparent;border:none;border-bottom:1px solid var(--line);padding:4px 16px 4px 0;
  appearance:none;-webkit-appearance:none;border-radius:0;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ash) 50%),linear-gradient(135deg,var(--ash) 50%,transparent 50%);
  background-position:calc(100% - 5px) 60%,calc(100% - 1px) 60%;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat;
}
.tier-pick:hover{color:var(--ivory)}
.tier-pick option{background:#0B0A08;color:var(--ivory)}
.drop{display:block;margin-top:9px;font-size:10px;letter-spacing:.18em;color:var(--dim);border-bottom:1px solid var(--line);padding-bottom:2px}
.drop:hover{color:var(--ivory)}
.free-note{display:inline-block;margin-top:8px;font-size:9.5px;letter-spacing:.2em;color:var(--gold);border:1px solid rgba(201,168,118,.4);padding:2px 7px}
.line.gratis .line-p{text-decoration:line-through;color:var(--dim)}
.none{color:var(--ash);font-size:14px;line-height:1.7;padding:38px 0}
.d-foot{padding:26px 28px;border-top:1px solid var(--line)}
.saved{display:flex;justify-content:space-between;font-size:12px;color:var(--gold);margin-bottom:12px;letter-spacing:.08em}
.sum{display:flex;justify-content:space-between;font-family:var(--serif);font-size:19px;margin-bottom:18px}
.sum b{color:var(--gold-hi);font-weight:400}
.settle{width:100%;padding:17px;background:var(--ivory);color:var(--void);font-size:10.5px;letter-spacing:.26em}
.settle:hover{background:var(--gold)}
.dnote{font-size:11px;color:var(--dim);text-align:center;margin-top:14px;line-height:1.6;letter-spacing:.05em}

@media(max-width:860px){
  .deck-t,.deck-c{display:none}
}
/* Phones: play button, the beat's name, and the bag. The progress line runs along the top edge. */
@media(max-width:600px){
  .deck-in{gap:14px;padding:12px 16px}
  .deck-in .dbtn:not(.main),.deck-link,.deck-c{display:none}
  .deck-in > div:has(.deck-t){flex:1;min-width:0}
  .deck-t{display:block;min-width:0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .deck-s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.14em;margin-top:2px}
  .deck-line{position:absolute;left:0;right:0;top:-1px;min-width:0}
  .deck-bag{flex:none;padding:12px 0 12px 6px}
}

/* iPhones zoom the page in when a text box under 16px is tapped, and it stays zoomed. */
@media(max-width:760px){
  input,select,textarea{font-size:16px!important}
}

/* Touch screens: small text links and thin buttons get a bigger invisible tap area, without moving anything. */
@media(pointer:coarse){
  .bag,.all-link,.top nav a,.top nav button,.link,.t-take,.t-by,.drop,.deck-bag,.index button,
  .tier .to,.svc button,.plan button,.a-beat .add,.ask-top button,.menu-btn,footer a{position:relative}
  .bag::after,.all-link::after,.top nav a::after,.top nav button::after,.link::after,.t-take::after,.t-by::after,.drop::after,
  .deck-bag::after,.tier .to::after,.svc button::after,.plan button::after,.a-beat .add::after,.ask-top button::after,
  .menu-btn::after,footer a::after{content:"";position:absolute;inset:-12px -8px}
  .index button::after{content:"";position:absolute;inset:-20px -4px}
}

/* ---------- phone menu (menu.js adds the MENU button on small screens) ---------- */
.menu-btn{display:none;font-size:10.5px;letter-spacing:.28em;color:var(--ivory);white-space:nowrap}
@media(max-width:760px){
  .menu-btn{display:inline-block}
  /* The menu lists every page, so the header keeps only the bag, page-specific links and MENU. */
  header.top{gap:22px}
  header.top > a:first-child{margin-right:auto}
  header.top nav{gap:22px}
  header.top nav a.here{display:none}
  .bag,header.top nav a,header.top nav button{white-space:nowrap}
}
.menu{
  position:fixed;inset:0;z-index:95;background:#030303;display:flex;flex-direction:column;
  padding:22px 24px 34px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;
}
.menu.on{opacity:1;visibility:visible}
.menu-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}
.menu-top img{height:24px;width:auto;opacity:.92}
.menu-top button{font-size:28px;line-height:1;color:var(--ash);padding:6px 4px 6px 16px}
.menu nav a{display:block;font-family:var(--serif);font-size:32px;line-height:1.15;padding:11px 0;border-bottom:1px solid var(--line);color:var(--ivory)}
.menu nav a[aria-current="page"]{color:var(--gold-hi)}
.menu .menu-more{margin-top:30px;display:grid;gap:4px}
.menu .menu-more a{font-size:11px;letter-spacing:.26em;color:var(--ash);padding:10px 0}
body.menu-open{overflow:hidden}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}