/* catalog module styles: home sections, browse pages, charts, release, label, search.
   Built on the tokens and components in app.css. Buttons stay square; cards keep the 4px corner. */

/* ---------------- shared bits ---------------- */
.cat-h-sub { color: var(--text-3); font-size: .62em; margin-left: 8px; letter-spacing: 0; }
.rail.cat-rail-7 { --cols: 7; }
.rail.cat-rail-4 { --cols: 4; }
@container stage (max-width: 1400px) { .rail.cat-rail-7 { --cols: 6; } }
@container stage (max-width: 1100px) { .rail.cat-rail-7 { --cols: 5; } .rail.cat-rail-4 { --cols: 3; } }
@container stage (max-width: 820px) { .rail.cat-rail-7 { --cols: 4; } .rail.cat-rail-4 { --cols: 2; } }
@container stage (max-width: 560px) { .rail.cat-rail-7 { --cols: 3.2; } .rail.cat-rail-4 { --cols: 1.3; } }
.cover.cat-wide { aspect-ratio: 16 / 9; }
.section.cat-after-table { margin-top: 38px; }
.cat-tab-n { margin-left: 4px; color: var(--text-3); font-weight: 400; font-size: 12px; }
.tabs .is-active .cat-tab-n { color: var(--text-2); }

/* segmented control (square) */
.cat-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--raised); border-radius: var(--r-btn); flex: none; }
.cat-seg a, .cat-seg button { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; color: var(--text-3); font-size: 12.5px; font-weight: 500; border-radius: var(--r-btn); white-space: nowrap; }
.cat-seg a:hover, .cat-seg button:hover { color: var(--text); }
.cat-seg .is-active, .cat-seg .is-active:hover { background: #fff; color: #000; }
.cat-seg-lg a, .cat-seg-lg button { height: 32px; padding: 0 14px; font-size: 13px; }

/* ---------------- compact lists (Top 10, top downloads) ---------------- */
.cat-cl .ci { min-height: 52px; }
.cat-ci-text { min-width: 0; }
.cat-ci-text .t { display: block; font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-ci-text .t .v { color: var(--text-3); font-weight: 400; }
.cat-ci-text .t:hover { text-decoration: underline; text-underline-offset: 2px; }
.cat-ci-text .s { color: var(--text-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.cat-ci-text .s a:hover { color: var(--text); }
.cat-ci-end { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.cat-ci-end .key { flex: none; }
.cat-cl .buy { min-width: 74px; justify-content: center; }
.cat-cl .ci.is-current { background: var(--sel); }
.cat-cl .ci.is-current .c-art .play-over { opacity: 1; }
.cat-ci-bpm { width: 34px; text-align: center; color: var(--text-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cat-cl.cat-dl .ci { grid-template-columns: 22px 40px minmax(0, 1fr) auto; gap: 11px; padding: 5px 8px; min-height: 50px; }
.cat-cl.cat-dl .ci .c-art { width: 40px; height: 40px; }
.cat-cl.cat-dl .ci .n { font-size: 15px; }
.cat-cl .cat-ci-head { min-height: 30px; padding-top: 0; padding-bottom: 0; color: var(--text-3); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--line); border-radius: 0; margin-bottom: 4px; }
.cat-cl .cat-ci-head:hover { background: transparent; }
.cat-cl .cat-ci-head .n { font: inherit; }
.cat-ci-head .cat-ci-bpm { color: inherit; font-size: inherit; }
.cat-ci-keyh { width: 34px; text-align: center; }
.cat-ci-buyh { width: 74px; }

/* ---------------- home: hero (Top 10 beside a mosaic of slides) ---------------- */
.cat-hero { display: grid; grid-template-columns: 410px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.cat-hero.cat-no-tiles { grid-template-columns: minmax(0, 1fr); }
.cat-hero .cat-top10 { order: -1; }
.cat-top10 { display: flex; flex-direction: column; min-width: 0; padding: 12px 8px 8px; border-radius: var(--r); background: var(--frame); }
.cat-top10-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 6px 10px; }
.cat-top10-head h3 { font: 300 20px/1.2 var(--sans); }
.cat-top10-head h3 span { color: var(--text-3); font-size: 13px; margin-left: 4px; }
.cat-top10 .ci { grid-template-columns: 22px 40px minmax(0, 1fr) auto; gap: 11px; padding: 5px 6px; min-height: 50px; }
.cat-top10 .ci .c-art { width: 40px; height: 40px; }
.cat-top10 .ci .n { font-size: 16px; }
.cat-top10 .empty { padding: 40px 10px; }

.cat-mosaic { display: grid; gap: 12px; min-width: 0; min-height: 440px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1.5fr) minmax(0, 1fr); }
.cat-mosaic .cat-mo-big { grid-column: 1 / -1; position: relative; min-height: 0; border-radius: var(--r); overflow: hidden; }
.cat-mosaic.cat-n1 { grid-template-rows: minmax(0, 1fr); }
.cat-mosaic.cat-n2 { grid-template-columns: minmax(0, 1fr); }
.cat-mo { position: relative; min-height: 0; min-width: 0; overflow: hidden; border-radius: var(--r); background: var(--raised); isolation: isolate; }
.cat-mo-big > .cat-mo { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; }
.cat-mo-big > .cat-mo.is-active { opacity: 1; visibility: visible; }
.cat-mo-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.cat-mo-ph { background: linear-gradient(135deg, var(--c1, #333), #0d0d0d); }
.cat-mo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .45) 42%, rgba(0, 0, 0, 0) 72%), linear-gradient(to right, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 60%); }
.cat-mo:hover .cat-mo-img { transform: scale(1.035); }
.cat-mo-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; justify-items: start; gap: 5px; padding: 22px 24px; pointer-events: none; }
.cat-mo-kicker { color: rgba(255, 255, 255, .78); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.cat-mo-title { color: #fff; font: 300 clamp(24px, 2.6vw, 38px)/1.08 var(--sans); letter-spacing: -.015em; text-wrap: balance; }
.cat-mo-sub { color: rgba(255, 255, 255, .8); font-size: 13.5px; max-width: 56ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-mo-btn { margin-top: 10px; }
.cat-mo-side .cat-mo-text { padding: 16px 18px; gap: 3px; }
.cat-mo-side .cat-mo-title { font-size: 19px; line-height: 1.15; }
.cat-mo-side .cat-mo-sub { font-size: 12.5px; -webkit-line-clamp: 1; }
.cat-mo-hit { position: absolute; inset: 0; z-index: 2; }
.cat-mo-hit:focus-visible { outline-offset: -3px; }
.cat-mo-play { position: absolute; right: 18px; bottom: 18px; z-index: 3; }
.cat-mo-dots { position: absolute; right: 18px; top: 18px; z-index: 4; display: flex; gap: 6px; }
.cat-mo-dots button { width: 22px; height: 3px; background: rgba(255, 255, 255, .38); border-radius: var(--r-btn); }
.cat-mo-dots button::before { content: ""; display: block; margin: -8px 0; height: 19px; }
.cat-mo-dots button.is-active { background: #fff; }
/* featured releases instead of slides: blurred cover behind, the sharp cover inside */
.cat-mo-release .cat-mo-img { filter: blur(26px) saturate(1.2) brightness(.7); transform: scale(1.25); }
.cat-mo-release:hover .cat-mo-img { transform: scale(1.28); }
.cat-mo-release .cat-mo-cover { position: absolute; z-index: 0; right: 24px; top: 50%; transform: translateY(-50%); height: 72%; aspect-ratio: 1; width: auto; border-radius: var(--r); box-shadow: 0 16px 40px rgba(0, 0, 0, .55); object-fit: cover; }
.cat-mo-release .cat-mo-text { right: 45%; }
.cat-mo-side.cat-mo-release .cat-mo-cover { height: 58%; right: 16px; }
.cat-mo-release .cat-mo-play { right: auto; left: 24px; top: 20px; bottom: auto; }

@container stage (min-width: 1500px) {
  .cat-mosaic.cat-n3 { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .cat-mosaic.cat-n3 .cat-mo-big { grid-column: 1; grid-row: 1 / span 2; }
}
@container stage (max-width: 1060px) {
  .cat-hero { grid-template-columns: minmax(0, 1fr); }
  .cat-hero .cat-top10 { order: 0; }
  .cat-mosaic { min-height: 0; grid-template-rows: auto auto; }
  .cat-mosaic .cat-mo-big { aspect-ratio: 16 / 7; }
  .cat-mosaic .cat-mo-side { aspect-ratio: 16 / 9; }
  .cat-mosaic.cat-n2 .cat-mo-side { aspect-ratio: 16 / 6; }
}
@container stage (max-width: 560px) {
  .cat-mosaic { gap: 8px; }
  .cat-mosaic .cat-mo-big { aspect-ratio: 4 / 3; }
  .cat-mosaic .cat-mo-side { aspect-ratio: 1; }
  .cat-mo-text { padding: 16px; }
  .cat-mo-title { font-size: 25px; }
  .cat-mo-side .cat-mo-text { padding: 10px 12px; }
  .cat-mo-side .cat-mo-title { font-size: 15px; }
  .cat-mo-side .cat-mo-sub, .cat-mo-side .cat-mo-kicker { display: none; }
  .cat-mo-release .cat-mo-cover { display: none; }
  .cat-mo-release .cat-mo-text { right: 0; }
  .cat-mo-dots { right: 12px; top: 12px; }
  .cat-top10 .ci { padding: 5px 2px; gap: 9px; }
  .cat-top10 .ci .key { display: none; }
}

/* ---------------- home: top downloads (two boxes side by side) ---------------- */
.cat-td { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.cat-td-box { min-width: 0; padding: 12px 8px 8px; border-radius: var(--r); background: var(--frame); }
.cat-td-head { display: flex; align-items: center; gap: 6px 14px; height: 38px; padding: 0 6px 6px; }
.cat-td-box { display: flex; flex-direction: column; }
.cat-td-box > [data-panel]:not([hidden]) { display: flex; flex-direction: column; flex: 1; }
.cat-td-foot { margin-top: auto; }
.cat-td-head h3 { flex: none; }
.cat-td-head h3 { font: 300 18px/1.2 var(--sans); }
.cat-td-head .muted { font-size: 12.5px; }
.cat-td-tabs { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); padding-right: 24px; }
.cat-td-tabs::-webkit-scrollbar { display: none; }
.cat-td-tabs button { flex: none; height: 28px; padding: 0 11px; border-radius: var(--r-btn); background: var(--raised); color: var(--text-2); font-size: 12px; font-weight: 500; }
.cat-td-tabs button:hover { background: var(--sel); color: var(--text); }
.cat-td-tabs button.is-active { background: #fff; color: #000; }
.cat-td-more { display: inline-flex; align-items: center; gap: 4px; margin: 8px 8px 4px; color: var(--text-2); font-size: 12.5px; font-weight: 500; }
.cat-td-more:hover { color: var(--text); }
@container stage (max-width: 1000px) { .cat-td { grid-template-columns: minmax(0, 1fr); } }
@container stage (max-width: 560px) {
  .cat-cl.cat-dl .ci { gap: 8px; padding: 5px 2px; }
  .cat-cl.cat-dl .cat-ci-bpm, .cat-cl.cat-dl .cat-ci-end .key, .cat-cl.cat-dl .cat-ci-keyh { display: none; }
}

/* ---------------- Boxi style rows with big waveforms ---------------- */
.cat-jw-list { display: grid; }
.cat-jw { display: grid; grid-template-columns: 64px minmax(170px, 250px) minmax(0, 1fr) auto auto; grid-template-areas: "art info wave meta act"; align-items: center; gap: 18px; padding: 10px; border-radius: var(--r); transition: background .12s; }
.cat-jw + .cat-jw { box-shadow: 0 -1px 0 var(--line); }
.cat-jw:hover, .cat-jw.is-current { background: var(--raised); box-shadow: none; }
.cat-jw:hover + .cat-jw, .cat-jw.is-current + .cat-jw { box-shadow: none; }
.cat-jw-art { grid-area: art; position: relative; width: 64px; height: 64px; border-radius: var(--r); overflow: hidden; background: var(--sel); }
.cat-jw-art img { width: 100%; height: 100%; object-fit: cover; }
.cat-jw-art .play-over { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .5); color: #fff; opacity: 0; transition: opacity .12s; }
.cat-jw-art .play-over svg.i { width: 22px; height: 22px; }
.cat-jw:hover .cat-jw-art .play-over, .cat-jw.is-current .cat-jw-art .play-over, .cat-jw-art:focus-visible .play-over { opacity: 1; }
.cat-jw-info { grid-area: info; min-width: 0; }
.cat-jw-info .t { display: block; font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-jw-info .t .v { color: var(--text-3); font-weight: 400; }
.cat-jw-info .t:hover { text-decoration: underline; text-underline-offset: 2px; }
.cat-jw-info .s, .cat-jw-info .cat-s2 { color: var(--text-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.cat-jw-info .s { color: var(--text-2); }
.cat-jw-info .cat-s2 { display: flex; gap: 6px; }
.cat-jw-info a:hover { color: var(--text); }
.cat-jw-wave { grid-area: wave; position: relative; height: 58px; min-width: 0; cursor: pointer; }
.cat-jw-wave svg { display: block; width: 100%; height: 100%; }
.cat-jw-wave rect { fill: var(--wave); transition: fill .15s; }
.cat-jw:hover .cat-jw-wave rect { fill: var(--wave-hi); }
.cat-jw-wave .nowave { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--line-2); }
.cat-jw-time { position: absolute; right: 0; bottom: -2px; padding: 0 0 0 6px; color: var(--text-3); font-size: 10.5px; font-variant-numeric: tabular-nums; background: linear-gradient(to right, transparent, var(--surface) 6px); }
.cat-jw:hover .cat-jw-time, .cat-jw.is-current .cat-jw-time { background: linear-gradient(to right, transparent, var(--raised) 6px); }
.cat-jw-meta { grid-area: meta; display: flex; align-items: center; gap: 6px; }
.cat-jw-com { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 6px; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.cat-jw-com:hover { color: var(--text); }
.cat-jw-act { grid-area: act; display: flex; align-items: center; gap: 4px; }
@container stage (max-width: 1180px) {
  .cat-jw { grid-template-columns: 64px minmax(150px, 210px) minmax(0, 1fr) auto; grid-template-areas: "art info wave act"; }
  .cat-jw-meta { display: none; }
}
@container stage (max-width: 760px) {
  .cat-jw { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "art info act" "wave wave wave"; gap: 8px 12px; padding: 10px 4px; }
  .cat-jw-art { width: 56px; height: 56px; }
  .cat-jw-wave { height: 44px; }
  .cat-jw-act .icon-btn { display: none; }
}

/* ---------------- cards: DJ charts, labels, TV, blog ---------------- */
.cat-cc-badge { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; border-radius: 2px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 11px; font-weight: 500; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cat-cc-badge svg.i { width: 13px; height: 13px; }
.cat-cc-date { font-size: 11.5px; }
.cat-label-card .cover.cat-logo, .cat-ent-label .cover.cat-logo { display: grid; place-items: center; background: #0b0b0b; box-shadow: inset 0 0 0 1px var(--line); }
.cover.cat-logo img { width: 72%; height: 72%; object-fit: contain; transition: transform .2s; }
.cat-label-card:hover .cover.cat-logo img { transform: scale(1.04); }
.cat-lc-initials { font: 300 44px/1 var(--sans); color: var(--text-2); }
.cat-tv-card { display: block; }
.cat-tv-card .cover { background: #0b0b0b; }
.cat-tv-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; background: rgba(255, 255, 255, .92); color: #000; opacity: 0; transform: scale(.94); transition: opacity .15s, transform .15s; }
.cat-tv-card:hover .cat-tv-play { opacity: 1; transform: none; }
.cat-tv-dur { position: absolute; right: 8px; bottom: 8px; padding: 1px 6px; border-radius: 2px; background: rgba(0, 0, 0, .75); color: #fff; font-size: 11px; font-variant-numeric: tabular-nums; }
.cat-tv-card:hover .t { text-decoration: underline; text-underline-offset: 2px; }
.cat-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cat-post-card { display: grid; gap: 4px; align-content: start; min-width: 0; }
.cat-post-card .cover { margin-bottom: 8px; }
.cat-post-card .cover img { transition: transform .4s; }
.cat-post-card:hover .cover img { transform: scale(1.03); }
.cat-post-date { color: var(--text-3); font-size: 12px; }
.cat-post-title { font: 400 16px/1.35 var(--sans); }
.cat-post-card:hover .cat-post-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cat-post-ex { color: var(--text-2); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@container stage (max-width: 820px) { .cat-posts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cat-posts > :nth-child(3) { display: none; } }
@container stage (max-width: 560px) { .cat-posts { grid-template-columns: minmax(0, 1fr); } .cat-posts > :nth-child(3) { display: grid; } }

/* ---------------- home: sign up banner (visitors) ---------------- */
.cat-cta-band { position: relative; overflow: hidden; isolation: isolate; display: grid; align-items: center; min-height: 300px; padding: 44px 48px; border-radius: var(--r); background: #0b0b0b; }
.cat-cta-band::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--cta-img, none) center / cover no-repeat; opacity: .5; }
.cat-cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 140% at 0% 100%, color-mix(in srgb, var(--accent) 55%, transparent) 0%, transparent 55%), linear-gradient(90deg, rgba(8, 8, 8, .97) 0%, rgba(8, 8, 8, .9) 42%, rgba(8, 8, 8, .35) 100%); }
.cat-cta-body { position: relative; z-index: 1; max-width: 560px; display: grid; justify-items: start; gap: 12px; }
.cat-cta-body .kicker { color: var(--accent); margin: 0; }
.cat-cta-body h2 { font: 300 clamp(28px, 3.6vw, 46px)/1.08 var(--sans); letter-spacing: -.02em; text-wrap: balance; }
.cat-cta-body p { margin: 0; color: var(--text-2); font-size: 15px; max-width: 48ch; }
.cat-cta-points { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 6px; padding: 0; list-style: none; color: var(--text); font-size: 13px; }
.cat-cta-points li { display: inline-flex; align-items: center; gap: 7px; }
.cat-cta-points svg.i { color: var(--accent); }
.cat-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cat-cta-art { position: absolute; right: -40px; top: 50%; z-index: 0; display: grid; grid-template-columns: repeat(3, 150px); gap: 12px; transform: translateY(-50%) rotate(-8deg); opacity: .9; pointer-events: none; }
.cat-cta-art img { width: 150px; height: 150px; object-fit: cover; border-radius: var(--r); box-shadow: 0 14px 34px rgba(0, 0, 0, .6); }
.cat-cta-art img:nth-child(3n + 2) { transform: translateY(26px); }
@container stage (max-width: 1100px) { .cat-cta-art { right: -120px; opacity: .45; } }
@container stage (max-width: 760px) {
  .cat-cta-band { padding: 30px 22px; min-height: 0; }
  .cat-cta-art { display: none; }
  .cat-cta-band::after { background: radial-gradient(120% 120% at 0% 100%, color-mix(in srgb, var(--accent) 50%, transparent) 0%, transparent 60%), linear-gradient(180deg, rgba(8, 8, 8, .8), rgba(8, 8, 8, .95)); }
  .cat-cta-actions .btn { flex: 1; }
}

/* ---------------- the filter bar ---------------- */
.cat-fbar { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 10px; border-radius: var(--r); background: var(--frame); }
.cat-fb-toggle { display: none; }
.cat-fb-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 600; }
.cat-fb-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.cat-fb { display: inline-flex; align-items: center; min-width: 0; }
.cat-fb select, .cat-fb input { height: 34px; min-width: 0; padding: 0 10px; border: 0; border-radius: var(--r); background-color: var(--raised); color: var(--text); font-size: 13px; }
.cat-fb select { appearance: none; -webkit-appearance: none; max-width: 172px; padding-right: 30px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b5b5b5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.cat-fb select:has(option:checked:not([value=""])):not(.cat-fb-sort):not([name=sort]) { background-color: #333; }
.cat-fb-sort { background-color: transparent !important; }
.cat-fb select option { background: var(--raised); color: var(--text); }
.cat-fb select:focus, .cat-fb input:focus { outline: none; background-color: var(--sel); }
.cat-fb-bpm, .cat-fb-dates { gap: 6px; height: 34px; padding: 0 4px 0 10px; border: 0; border-radius: var(--r); background: var(--raised); }
.cat-fb-bpm input, .cat-fb-dates input { height: 30px; border: 0; background: transparent; padding: 0 4px; }
.cat-fb-bpm input { width: 50px; text-align: center; font-variant-numeric: tabular-nums; }
.cat-fb-bpm input::placeholder { color: var(--text-3); }
.cat-fb-bpm:focus-within, .cat-fb-dates:focus-within { background: var(--sel); }
.cat-fb .cat-fb-bpm input:focus, .cat-fb .cat-fb-dates input:focus, .cat-fb-bpm input:focus, .cat-fb-dates input:focus { background: transparent; }
.cat-fb-dates input { width: 132px; color-scheme: dark; }
.cat-fb-lbl { color: var(--text-3); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; }
.cat-fb-to { color: var(--text-3); font-size: 12px; }
.cat-fb-check { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px; color: var(--text-2); font-size: 13px; cursor: pointer; white-space: nowrap; }
.cat-fb-check:hover { color: var(--text); }
.cat-fb-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.cat-fb-check:has(input:disabled) { opacity: .4; cursor: default; }
.cat-fb-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; padding-left: 4px; }
.cat-fb-clear { color: var(--text-2); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cat-fb-clear:hover { color: var(--text); }
@container stage (max-width: 760px) {
  .cat-fbar { flex-wrap: wrap; padding: 8px; }
  .cat-fb-toggle { display: inline-flex; }
  .cat-fb-body { display: none; }
  .cat-fbar.is-open .cat-fb-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); flex: 0 0 100%; width: 100%; padding-top: 4px; }
  .cat-fb, .cat-fb select, .cat-fb input { width: 100%; max-width: none; }
  .cat-fb-bpm, .cat-fb-dates { grid-column: 1 / -1; }
  .cat-fb-bpm input, .cat-fb-dates input { flex: 1; width: auto; min-width: 0; }
  .cat-fb-actions { grid-column: 1 / -1; margin: 0; padding: 0; }
  .cat-fb-actions .btn { flex: 1; }
  .cat-fb-check { padding: 0 2px; }
}

/* ---------------- charts ---------------- */
.cat-gchips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 16px; padding: 0 28px 2px 0; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.cat-gchips::-webkit-scrollbar { display: none; }
.cat-gchips a { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: var(--r-btn); background: var(--raised); color: var(--text-2); font-size: 12.5px; font-weight: 500; }
.cat-gchips a[style]::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--g); flex: none; }
.cat-gchips a:hover { background: var(--sel); color: var(--text); }
.cat-gchips a.is-active { background: #fff; color: #000; }

/* ranked release rows */
.cat-rl { display: grid; }
.cat-rl-row { display: grid; grid-template-columns: 30px 52px minmax(180px, 2fr) minmax(110px, 1fr) minmax(90px, .8fr) 92px 100px; align-items: center; column-gap: 14px; padding: 7px 10px; border-radius: var(--r); transition: background .12s; }
.cat-rl-row + .cat-rl-row { box-shadow: 0 -1px 0 var(--line); }
.cat-rl-row:not(.cat-rl-head):hover { background: var(--raised); box-shadow: none; }
.cat-rl-row:hover + .cat-rl-row { box-shadow: none; }
.cat-rl-head { min-height: 34px; padding-top: 0; padding-bottom: 0; color: var(--text-3); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--line); border-radius: 0; }
.cat-rl-head + .cat-rl-row { box-shadow: none; }
.cat-rl-n { color: var(--text-3); font: 300 18px/1 var(--sans); text-align: center; font-variant-numeric: tabular-nums; }
.cat-rl-head .cat-rl-n { font: inherit; }
.cat-rl-art { width: 52px; height: 52px; border-radius: 3px; }
.cat-rl-art .play-sq { left: 50%; top: 50%; bottom: auto; margin: -15px 0 0 -15px; transform: none; }
.cat-rl-row:hover .cat-rl-art .play-sq, .cat-rl-art .play-sq.is-playing { opacity: 1; }
.cat-rl-main { min-width: 0; }
.cat-rl-main .t { display: block; font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-rl-main .t:hover { text-decoration: underline; text-underline-offset: 2px; }
.cat-rl-main .s { color: var(--text-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-rl-m { display: none; }
.cat-rl-label, .cat-rl-genre { min-width: 0; color: var(--text-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-rl-genre { color: var(--text-3); }
.cat-rl-label a:hover, .cat-rl-genre a:hover, .cat-rl-m a:hover { color: var(--text); }
.cat-rl-date { color: var(--text-3); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cat-rl-buy { display: flex; justify-content: flex-end; }
.cat-rl-buy .buy { min-width: 84px; justify-content: center; }
.cat-rl-row:hover .buy { background: var(--sel); }
@container stage (max-width: 1100px) {
  .cat-rl-row { grid-template-columns: 30px 52px minmax(160px, 2fr) minmax(110px, 1fr) 100px; }
  .cat-rl-genre, .cat-rl-date { display: none; }
}
@container stage (max-width: 700px) {
  .cat-rl-row { grid-template-columns: 22px 52px minmax(0, 1fr) auto; column-gap: 10px; padding: 7px 2px; }
  .cat-rl-label { display: none; }
  .cat-rl-m { display: block; }
  .cat-rl-head { display: none; }
  .cat-rl-n { font-size: 15px; }
}

/* ---------------- entity headers (crate, DJ chart, label) ---------------- */
.cat-ent { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 30px; align-items: end; margin: 14px 0 30px; }
.cat-ent-art .cover { width: 100%; box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
.cat-collage { display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 100%; }
.cat-collage img { width: 100%; height: 100%; object-fit: cover; }
.cat-ent-body { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 10px; }
.cat-ent-body .kicker { margin: 0; }
.cat-ent-body h1 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.cat-ent-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: var(--text-2); font-size: 13.5px; }
.cat-ent-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.cat-ent-by { color: var(--text); font-weight: 500; }
.cat-ent-link { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); }
.cat-ent-link:hover { color: var(--text); }
.cat-ent-chips { margin-top: 2px; }
.cat-ent-desc { margin: 2px 0 0; max-width: 72ch; color: var(--text-2); font-size: 14px; line-height: 1.6; }
.cat-ent-actions, .cat-rel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.cat-clamped { position: relative; max-height: 4.9em; overflow: hidden; }
.cat-clamped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2em; background: linear-gradient(to bottom, transparent, var(--surface)); }
.cat-clamp-more { color: var(--text); font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@container stage (max-width: 700px) {
  .cat-ent { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 6px; }
  .cat-ent-art { width: min(220px, 62%); }
  .cat-ent-label .cat-ent-art { width: 150px; }
}

/* genre band */
.cat-band { position: relative; overflow: hidden; isolation: isolate; margin: 10px 0 34px; padding: 44px 36px 36px; border-radius: var(--r); background: radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--g, #555) 45%, transparent) 0%, transparent 60%), linear-gradient(115deg, color-mix(in srgb, var(--g, #555) 62%, #0b0b0b) 0%, color-mix(in srgb, var(--g, #555) 18%, #111) 55%, #121212 100%); }
.cat-band-img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .28; mix-blend-mode: luminosity; }
.cat-band-body { display: grid; justify-items: start; gap: 10px; max-width: 760px; }
.cat-band .kicker { color: rgba(255, 255, 255, .72); margin: 0; }
.cat-band h1 { font-size: clamp(34px, 5vw, 60px); line-height: 1.02; letter-spacing: -.025em; }
.cat-band p { margin: 0; color: rgba(255, 255, 255, .8); font-size: 14.5px; }
.cat-band-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.cat-band .btn-line { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.cat-band .btn-ghost { color: rgba(255, 255, 255, .8); }
.cat-band-art { position: absolute; right: 44px; top: 50%; z-index: 0; display: flex; transform: translateY(-50%); pointer-events: none; }
.cat-band-art img { width: 176px; height: 176px; object-fit: cover; border-radius: var(--r); box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.cat-band-art img + img { margin-left: -96px; }
.cat-band-art img:nth-child(1) { transform: rotate(-7deg) translateY(8px); }
.cat-band-art img:nth-child(2) { transform: translateY(-6px); position: relative; z-index: 1; }
.cat-band-art img:nth-child(3) { transform: rotate(7deg) translateY(10px); position: relative; z-index: 2; }
.cat-band-body { position: relative; z-index: 1; }
@container stage (max-width: 1000px) { .cat-band-art { display: none; } }
@container stage (max-width: 560px) { .cat-band { padding: 30px 20px 24px; } .cat-band-actions .btn { flex: 1 1 auto; } .cat-band-actions .btn-primary { flex-basis: 100%; } }

/* genres index */
.cat-genre-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.cat-gtile { display: grid; place-items: end start; align-content: end; padding: 16px 18px; height: 128px; text-align: left; }
.cat-gtile .cat-gt-name { font: 400 18px/1.2 var(--sans); }
.cat-gtile .cat-gt-count { color: rgba(255, 255, 255, .7); font-size: 12px; font-weight: 400; margin-top: 2px; }
@container stage (max-width: 560px) { .cat-genre-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .cat-gtile { height: 96px; padding: 12px; } .cat-gtile .cat-gt-name { font-size: 15px; } }

/* featured DJ charts */
.cat-feat-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 36px; }
.cat-fc { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 4 / 3; border-radius: var(--r); background: var(--raised); }
.cat-fc img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.cat-fc::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0) 62%); }
.cat-fc:hover img { transform: scale(1.04); }
.cat-fc-text { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 3px; padding: 18px; }
.cat-fc-title { font: 300 22px/1.15 var(--sans); color: #fff; }
.cat-fc-sub { color: rgba(255, 255, 255, .78); font-size: 13px; }
@container stage (max-width: 820px) { .cat-feat-charts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cat-feat-charts > :nth-child(3) { display: none; } }
@container stage (max-width: 560px) { .cat-feat-charts { grid-template-columns: minmax(0, 1fr); } .cat-feat-charts > :nth-child(n + 2) { display: none; } .cat-fc { aspect-ratio: 16 / 10; } }

/* labels directory */
.cat-lsearch { position: relative; width: min(280px, 100%); }
@container stage (max-width: 560px) { .cat-lsearch { width: 100%; } }
.cat-lsearch svg.i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.cat-lsearch input { width: 100%; height: 36px; padding: 0 12px 0 34px; border: 0; border-radius: var(--r); background: var(--raised); color: var(--text); }
.cat-lsearch input:focus { outline: none; background: var(--sel); }
.cat-letters { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 22px; }
.cat-letters a { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: var(--r-btn); color: var(--text-3); font-size: 12.5px; font-weight: 500; }
.cat-letters a:hover { background: var(--raised); color: var(--text); }
.cat-letters a.is-active { background: #fff; color: #000; }
.cat-labels-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@container stage (max-width: 560px) { .cat-letters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .cat-letters::-webkit-scrollbar { display: none; } .cat-labels-grid, .cat-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } }

/* artist page */
.cat-artist-id { display: flex; align-items: center; gap: 18px; min-width: 0; }
.cat-artist-av { width: 84px; height: 84px; font: 300 32px/1 var(--sans); background: var(--raised); }
.cat-artist-head p a { color: var(--text-2); text-decoration: none; }
.cat-artist-head p a:hover { color: var(--text); }
@container stage (max-width: 560px) { .cat-artist-av { width: 60px; height: 60px; font-size: 24px; } }

/* ---------------- release page ---------------- */
.cat-rel { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 34px; align-items: start; margin: 14px 0 34px; }
.cat-rel-art .cover { box-shadow: 0 22px 54px rgba(0, 0, 0, .55); }
.cat-rel-body { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 8px; padding-top: 6px; }
.cat-rel-body .kicker { margin: 0; }
.cat-rel-body h1 { font-size: clamp(30px, 3.8vw, 50px); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.cat-rel-artists { color: var(--text); font-size: 16px; }
.cat-rel-artists a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cat-rel-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px 26px; width: 100%; max-width: 760px; margin: 12px 0 4px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cat-rel-meta div { min-width: 0; }
.cat-rel-meta dt { color: var(--text-3); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px; }
.cat-rel-meta dd { margin: 0; color: var(--text); font-size: 13.5px; overflow-wrap: anywhere; }
.cat-rel-meta dd a:hover { text-decoration: underline; text-underline-offset: 2px; }
.cat-rel-keys { display: flex; flex-wrap: wrap; gap: 4px; }
.cat-rel-actions .btn-accent { height: 46px; padding: 0 22px; font-size: 14.5px; }
.cat-rel-actions .btn-accent.in-cart { filter: brightness(.9); }
.cat-rel-desc { max-width: 72ch; margin-top: 8px; color: var(--text-2); font-size: 14px; line-height: 1.65; }
@container stage (max-width: 900px) { .cat-rel { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; } }
@container stage (max-width: 640px) {
  .cat-rel { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 6px; }
  .cat-rel-art { width: min(300px, 78%); }
  .cat-rel-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-rel-actions .btn-accent { flex: 1; }
}

/* ---------------- search ---------------- */
.cat-search-empty { max-width: 720px; margin: 40px auto 46px; text-align: center; display: grid; justify-items: center; gap: 10px; }
.cat-search-empty .kicker { margin: 0; }
.cat-search-empty h1 { font-size: clamp(28px, 3.6vw, 42px); }
.cat-search-empty p { margin: 0; color: var(--text-2); max-width: 60ch; }
.cat-search-empty p b, .cat-understood b { color: var(--text); font-weight: 500; }
.cat-big-search { position: relative; display: flex; gap: 8px; width: 100%; margin-top: 12px; }
.cat-big-search > svg.i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.cat-big-search input { flex: 1; min-width: 0; height: 48px; padding: 0 14px 0 44px; border: 0; border-radius: var(--r); background: var(--raised); color: var(--text); font-size: 15px; }
.cat-big-search input:focus { outline: none; background: var(--sel); }
.cat-big-search .btn { height: 48px; }
.cat-search-tries { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; }
.page-head h1 .cat-q { color: var(--text-2); }
.cat-understood { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cat-artist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.cat-artist-card { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; border-radius: var(--r); background: var(--frame); transition: background .12s; }
.cat-artist-card:hover { background: var(--raised); }
.cat-artist-card .avatar { width: 46px; height: 46px; font-size: 16px; }
.cat-ac-text { min-width: 0; display: grid; }
.cat-ac-text .t { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-ac-text .s { color: var(--text-3); font-size: 12.5px; }
@container stage (max-width: 560px) { .cat-big-search .btn { display: none; } }

/* ---------------- phones: page heads ---------------- */
@container stage (max-width: 560px) {
  .page-head .cat-seg { width: 100%; }
  .page-head .cat-seg a { flex: 1; justify-content: center; }
  .cat-home .section { margin-bottom: 32px; }
}
@container stage (max-width: 560px) {
  .cat-home-tiles { grid-auto-flow: column; grid-template-columns: none; grid-template-rows: repeat(2, 58px); grid-auto-columns: 40%; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .cat-home-tiles::-webkit-scrollbar { display: none; }
  .cat-home-tiles .tile { height: auto; scroll-snap-align: start; font-size: 12.5px; }
  .cat-cl .cat-ci-head { display: none; }
}

/* ranked tables (charts, a genre's Top 10, DJ charts) keep their numbers on tablets and phones */
@container stage (max-width: 860px) {
  .tl.cat-ranked, .tl.no-wave.cat-ranked { --cols: 22px 44px minmax(0, 1fr) 50px 48px 96px; --areas: "n art title bpm key act"; }
  .tl.cat-ranked .c-n { display: block; }
}
@container stage (max-width: 560px) {
  .tl.cat-ranked, .tl.no-wave.cat-ranked { --cols: 20px 44px minmax(0, 1fr) auto; --areas: "n art title act"; }
  .tl.cat-ranked .tr { column-gap: 10px; }
}

/* ---------- Artists: round pictures, the directory, the artist page ---------- */
.cat-art-pic { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: linear-gradient(140deg, hsl(var(--h, 260) 72% 56%), hsl(calc(var(--h, 260) + 55) 70% 30%));
  box-shadow: 0 12px 28px rgba(0, 0, 0, .38); transition: transform .2s ease; }
.cat-art-pic img { width: 100%; height: 100%; object-fit: cover; }
.cat-art-pic > span { font: 300 clamp(24px, 3.2vw, 40px)/1 var(--sans); color: rgba(255, 255, 255, .94); letter-spacing: .02em; text-shadow: 0 2px 12px rgba(0, 0, 0, .25); }
.cat-art-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cat-art-card .cat-art-pic { width: 100%; }
.cat-art-card:hover .cat-art-pic { transform: scale(1.03); }
.cat-art-card .meta { width: 100%; }
.cat-art-card .cat-follow { margin-top: 10px; }
.cat-art-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px 18px; }
.cat-follow.is-on { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); }
.cat-follow.is-on:hover { color: var(--text); }
.cat-follow svg.i { width: 14px; height: 14px; }
.cat-art-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -8px 0 14px; }
.cat-art-bar .cat-fb select { height: 34px; }
.cat-fb-artist { height: 28px; padding: 0 6px 0 10px; background: #fff; color: #0b0b0b; }
.cat-fb-artist svg.i { width: 13px; height: 13px; }
.cat-ent-artist .cat-art-big { width: 100%; }
.cat-ent-artist .cat-art-big > span { font-size: clamp(44px, 6vw, 76px); }
.cat-art-links { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.cat-art-roles { margin-top: -4px; }
.fl-new { color: var(--text); font-weight: 600; }
@container stage (max-width: 560px) {
  .cat-art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .cat-ent-artist .cat-ent-art { width: 170px; }
  .cat-art-bar .cat-fb { flex: 1 1 140px; }
  .cat-art-bar .cat-fb select { width: 100%; }
}
.cat-art-roles .n { margin-left: 6px; color: var(--text-3); font-weight: 400; font-variant-numeric: tabular-nums; }