:root { --artist-bg: 240 7% 5%; --artist-text: 240 11% 89%; --artist-muted: 240 8% 65%; --artist-border: 240 7% 15%; }
/* Static documents (and the pre-hydration homepage) have no Tailwind preflight, so drop the UA body margin and paint the page dark. */
body { margin: 0; background: hsl(var(--artist-bg)); color: hsl(var(--artist-text)); }
.artist-summary { background: hsl(var(--artist-bg)); color: hsl(var(--artist-text)); padding: 1rem; font-family: Arial, sans-serif; }
.artist-inner { max-width: 72rem; margin: 0 auto; }
.artist-summary h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 .75rem; letter-spacing: 0; font-weight: 700; }
.artist-summary p { max-width: 50rem; line-height: 1.7; color: hsl(var(--artist-muted)); margin: 0 0 1rem; }
.artist-summary nav, .artist-more { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.artist-summary a { color: hsl(var(--artist-text)); text-underline-offset: .25em; text-decoration: underline; }
.artist-summary a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.artist-more { margin-top: 1rem; font-size: .875rem; }
.artist-static { margin: 0; background: hsl(var(--artist-bg)); color: hsl(var(--artist-text)); font-family: Arial, sans-serif; }
.artist-static main { max-width: 72rem; margin: 0 auto; padding: 2rem 1rem; }
.artist-static header { padding: 1rem; border-bottom: 1px solid hsl(var(--artist-border)); }
.artist-static a { color: inherit; text-underline-offset: .25em; }
.artist-static p { line-height: 1.7; max-width: 50rem; color: hsl(var(--artist-muted)); }
.artist-static h1 { font-size: 2rem; letter-spacing: 0; }
.artist-static h2 { font-size: 1.25rem; margin-top: 2rem; }
.artist-static img { max-width: 18rem; width: 100%; height: auto; }
.artist-static li { margin-bottom: .75rem; }
.artist-fallback-hero { position: relative; height: 70vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: hsl(var(--artist-bg)); }
.artist-fallback-hero .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; object-fit: cover; filter: brightness(.3); }
.artist-fallback-hero img:not(.hero-bg) { position: relative; width: 24rem; max-width: 85vw; height: auto; }
.artist-static header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; max-width: 72rem; margin: auto; }
.artist-about section { border-bottom: 1px solid hsl(var(--artist-border)); padding: 1.5rem 0; }
.artist-about h1 { font-size: 2.5rem; margin: .5rem 0 1.5rem; }
.artist-about h2 { margin-top: 0; font-size: 1.5rem; }
.artist-about h3 { font-size: 1.1rem; }
.artist-about .about-lead { font-size: 1.125rem; color: hsl(var(--artist-text)); }
.about-catalog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.about-catalog section { border: 0; padding: 0; }
.artist-about nav { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-bottom: 2rem; }
.artist-about a { overflow-wrap: anywhere; }
@media (max-width: 767px) { .about-catalog { grid-template-columns: 1fr; gap: 1rem; } .artist-about h1 { font-size: 2rem; } }
/* DJ mix hub and detail pages */
.mix-header { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.mix-main h1 { margin: 0 0 .75rem; line-height: 1.2; }
.mix-grid { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.mix-card { display: flex; flex-direction: column; gap: .25rem; border: 1px solid hsl(var(--artist-border)); border-radius: .5rem; padding: .5rem; }
.mix-card[hidden] { display: none; }
.artist-static .mix-card img { width: 100%; max-width: none; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: .375rem; display: block; margin-bottom: .5rem; }
.mix-card a { text-decoration: none; }
.mix-card a:hover .mix-card-title { text-decoration: underline; }
.mix-card-title { font-weight: 700; font-size: .875rem; line-height: 1.3; display: block; }
.mix-card-meta { font-size: .75rem; color: hsl(var(--artist-muted)); }
.mix-filter { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: end; }
.mix-filter label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; color: hsl(var(--artist-muted)); }
.mix-filter input, .mix-filter select { background: hsl(var(--artist-bg)); color: hsl(var(--artist-text)); border: 1px solid hsl(var(--artist-border)); border-radius: .375rem; padding: .5rem; font: inherit; min-width: 12rem; }
.mix-filter-status { margin: 0; font-size: .8rem; }
.mix-crumbs { font-size: .8rem; color: hsl(var(--artist-muted)); margin-bottom: 1rem; }
.mix-top { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .mix-top { grid-template-columns: 18rem 1fr; align-items: start; } }
.mix-facts { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; font-size: .9rem; }
.mix-facts dt { color: hsl(var(--artist-muted)); }
.mix-facts dd { margin: 0; }
.mix-source { display: inline-block; border: 1px solid #ff5500; border-radius: .375rem; padding: .5rem 1rem; text-decoration: none; }
.mix-player { border: 0; margin: 1.5rem 0 0; display: block; }
.mix-tracklist { padding-left: 1.5rem; line-height: 1.7; }
.mix-time { font-variant-numeric: tabular-nums; color: hsl(var(--artist-muted)); margin-right: .5rem; }
.mix-note { font-size: .85rem; }
.mix-grid-small { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }