:root {
  color-scheme: dark;
  --bg: #0d0d0e;
  --surface: #161618;
  --surface-2: #1c1c1f;
  --line: #26262a;
  --line-strong: #3a3a40;
  --text: #ededed;
  --muted: #9a9aa0;
  --sleeve: #e9e5dc;
  --wrap: 1360px;
  --gutter: 40px;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --aura: radial-gradient(120% 90% at 0% 0%, #f6c39e 0%, transparent 55%),
    radial-gradient(90% 90% at 100% 10%, #c9b6f2 0%, transparent 60%),
    radial-gradient(120% 120% at 70% 110%, #e98477 0%, transparent 60%),
    linear-gradient(135deg, #f2a98c, #d9a3d4);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
body:has(.player:not([hidden])) { padding-bottom: 92px; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
input, button, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.mono { font: 12px/1.4 var(--mono); letter-spacing: .02em; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.site-header { position: sticky; top: 0; z-index: 3; background: rgb(13 13 14 / .9); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.header-content { height: 56px; display: flex; align-items: center; justify-content: space-between; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 900; letter-spacing: .01em; text-transform: uppercase; }
.logo i, .player-disc { flex: none; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle, var(--text) 0 24%, #000 25%); box-shadow: 0 0 0 1px var(--line-strong); }
.header-link { font-size: 15px; font-weight: 600; color: var(--muted); }
.header-link:hover { color: var(--text); }

.hero {
  position: relative;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(#000 5%, transparent);
  pointer-events: none;
}
.hero-content { min-height: 340px; display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: clamp(24px, 7vw, 96px); padding-block: clamp(48px, 7vw, 104px); }
h1 { font-size: clamp(44px, 6vw, 84px); line-height: .98; letter-spacing: -.045em; font-weight: 750; text-wrap: balance; }
.lede { max-width: 34rem; margin-top: 20px; color: var(--muted); }
label { display: block; margin-bottom: 8px; font-size: 14px; }
.filters { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
input, select { width: 100%; min-height: 46px; padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); }
.button { min-height: 46px; padding: 10px 18px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; white-space: nowrap; font-weight: 650; }
.primary { border-color: var(--text); background: var(--text); color: var(--bg); }
.primary:hover { background: #fff; }
.status { font-size: 13px; color: var(--muted); }
#status:not(:empty) { margin-top: 14px; }
.status:empty { display: none; }

.featured { width: min(100%, 455px); justify-self: end; }
.deck { position: relative; width: 100%; padding-right: 21%; }
.sleeve { position: relative; isolation: isolate; aspect-ratio: 1; overflow: hidden; background: var(--cover, var(--aura)); color: #17141c; }
.sleeve::after { content: ""; position: absolute; inset: 0; border: 1px solid rgb(255 255 255 / .16); pointer-events: none; }
.deck .sleeve { width: 90%; box-shadow: 0 26px 50px -16px rgb(0 0 0 / .75); }
.sleeve-label { position: absolute; top: 7%; left: 7%; font: 650 clamp(9px, 1vw, 12px) var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.sleeve-title { position: absolute; left: 7%; right: 12%; bottom: 8%; font-size: clamp(16px, 2.5vw, 34px); line-height: .93; font-weight: 900; letter-spacing: -.05em; text-transform: uppercase; overflow-wrap: anywhere; }
.record { position: absolute; top: 3%; right: 4%; width: 69%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line-strong);
  background: radial-gradient(circle, #09090b 0 1.5%, #d7aedf 2% 22%, transparent 23%),
    repeating-radial-gradient(circle, #101013 0 2px, #26262a 3px, #121214 4px);
  box-shadow: 0 18px 38px rgb(0 0 0 / .55);
}
.featured-info { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 20px; }
.featured-label { margin-bottom: 4px; }
.featured-info h2 { font-size: clamp(17px, 2vw, 25px); letter-spacing: -.035em; overflow-wrap: anywhere; }
.play-button { flex: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); }
.play-button.primary { background: var(--text); border-color: var(--text); color: var(--bg); }
.play-button:hover { border-color: var(--text); }
.play-button::before { content: ""; width: 12px; height: 14px; margin-left: 2px; clip-path: polygon(0 0, 100% 50%, 0 100%); background: currentColor; }
.play-button[aria-pressed="true"]::before { width: 12px; margin-left: 0; clip-path: none; background: linear-gradient(90deg, currentColor 0 34%, transparent 34% 66%, currentColor 66%); }

.catalogue { padding-block: 52px 80px; scroll-margin-top: 56px; }
.catalogue-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.catalogue-heading h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 750; letter-spacing: -.045em; }
.filters { margin: 22px 0; max-width: 700px; }
.rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--sleeve); }
.rows li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rows li:hover, .rows li:has(button[aria-pressed="true"]) { background: var(--surface); }
.rows .sleeve { width: 46px; }
.track-title { font-size: 16px; font-weight: 650; overflow-wrap: anywhere; }
.track-meta { margin-top: 3px; color: var(--muted); font-size: 13px; text-transform: capitalize; }

.sleeve[data-genre="angel"] { --cover: radial-gradient(at 12% 8%, #f9d3e7, transparent 60%), linear-gradient(135deg, #876ea9, #e6b8c0); }
.sleeve[data-genre="phonk"] { --cover: radial-gradient(at 20% 15%, #f6c48c, transparent 58%), linear-gradient(140deg, #b34f55, #daa36e); }
.sleeve[data-genre="brazil"] { --cover: radial-gradient(at 22% 10%, #f4db9d, transparent 58%), linear-gradient(145deg, #73a585, #c7c777); }
.sleeve[data-genre="jersey"] { --cover: radial-gradient(at 18% 14%, #d8d0ff, transparent 55%), linear-gradient(135deg, #7b7ca6, #bc9fdf); }
.sleeve[data-genre="slowcore"] { --cover: radial-gradient(at 20% 12%, #f0dcc4, transparent 60%), linear-gradient(140deg, #ab7867, #c2a18b); }
.sleeve[data-genre="synthwave"] { --cover: radial-gradient(at 22% 16%, #eaa1c8, transparent 60%), linear-gradient(135deg, #6d75b0, #cb8abb); }

.player { position: fixed; z-index: 4; inset: auto 0 0; background: rgb(13 13 14 / .96); border-top: 1px solid var(--line-strong); backdrop-filter: blur(14px); }
.player-content { min-height: 76px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 1.3fr); align-items: center; gap: 24px; padding-block: 10px; }
.player-track { display: flex; align-items: center; gap: 12px; min-width: 0; }
.player-track > div { min-width: 0; }
.player-disc { width: 38px; height: 38px; background: radial-gradient(circle, #17141c 0 3%, #d7aedf 4% 24%, transparent 25%), repeating-radial-gradient(circle, #101013 0 2px, #38383b 3px, #141416 4px); }
#playing { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
audio { display: block; width: 100%; height: 38px; }

@media (max-width: 820px) {
  :root { --gutter: 18px; }
  .hero-content { grid-template-columns: 1fr; min-height: auto; padding-block: 48px 36px; }
  .featured { justify-self: start; max-width: 340px; }
  .catalogue { padding-block: 36px 56px; }
}
@media (max-width: 540px) {
  body:has(.player:not([hidden])) { padding-bottom: 108px; }
  .player-content { grid-template-columns: 1fr; gap: 5px; }
  .player-disc { width: 22px; height: 22px; }
}