/* Permanent genre hubs and cross-site genre navigation. */
.genre-hero{padding:34px 0 16px}.breadcrumbs{display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:var(--muted);font-size:.88rem;margin:0 0 18px}.breadcrumbs a{color:#d9f5ff;font-weight:750}.breadcrumbs a:hover{text-decoration:underline}.genre-hero-panel{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:30px;padding:clamp(34px,6vw,72px);background:radial-gradient(circle at 88% 10%,rgba(79,195,247,.18),transparent 27%),linear-gradient(135deg,rgba(8,22,37,.99),rgba(4,9,15,.99));box-shadow:var(--shadow)}.genre-hero-panel:after{content:"";position:absolute;right:-90px;bottom:-120px;width:320px;height:320px;border-radius:50%;background:rgba(139,124,255,.13);filter:blur(60px);pointer-events:none}.genre-hero-panel>*{position:relative;z-index:1}.genre-hero-panel h1{font-size:clamp(2.8rem,6vw,5.8rem);line-height:.95;margin:0 0 22px;max-width:980px}.genre-hero-panel p{max-width:860px;color:var(--muted);font-size:1.03rem}.genre-hero-panel .genre-intro{font-size:clamp(1.1rem,2vw,1.35rem);color:var(--text);font-weight:650}.genre-count{display:inline-flex;margin-top:16px;padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.045);font-weight:800}.genre-featured-card{align-items:center}.genre-featured-card .latest-media{display:block;min-height:0;aspect-ratio:16/9;align-self:center;overflow:hidden}.genre-featured-card .latest-media img{display:block;width:100%;height:100%;object-fit:cover}.genre-related-panel{border:1px solid var(--border);border-radius:26px;padding:28px;background:linear-gradient(135deg,rgba(12,30,45,.94),rgba(7,14,23,.96))}.genre-related-panel h2{margin:3px 0 8px;font-size:clamp(1.8rem,3vw,2.7rem)}.genre-related-panel p{color:var(--muted);max-width:720px}.genre-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0}.genre-related-card{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--border);border-radius:16px;padding:16px;background:rgba(255,255,255,.035);transition:.2s}.genre-related-card:hover{transform:translateY(-2px);background:rgba(255,255,255,.07)}.genre-related-card span{font-weight:850}.genre-related-card strong{font-size:.78rem;color:#71d7ff;text-transform:uppercase;white-space:nowrap}.sound-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.sound-link{color:inherit;text-decoration:none;transition:transform .2s,border-color .2s,background .2s}.sound-link:hover{transform:translateY(-3px);border-color:rgba(113,215,255,.48);background:linear-gradient(160deg,rgba(18,62,91,.46),rgba(255,255,255,.045))}.sound-cta{position:relative;z-index:1;display:inline-block;margin-top:14px;color:#71d7ff;text-transform:uppercase;font-size:.78rem;font-weight:850;letter-spacing:.04em}.genre-browse{margin:0 0 28px;padding:26px;border:1px solid var(--border);border-radius:24px;background:linear-gradient(135deg,rgba(12,30,45,.80),rgba(8,16,26,.86))}.genre-browse-copy h2{margin:3px 0 8px;font-size:clamp(1.8rem,3vw,2.6rem)}.genre-browse-copy p{color:var(--muted);max-width:780px}.genre-pill-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}.genre-pill{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 16px;border-radius:15px;border:1px solid var(--border);background:rgba(255,255,255,.035);transition:.2s}.genre-pill:hover{transform:translateY(-2px);background:rgba(255,255,255,.07)}.genre-pill strong{font-size:.95rem}.genre-pill span{color:var(--muted);font-size:.8rem;white-space:nowrap}.mix-genre-links{margin:0 0 14px;padding:13px 14px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.035)}.mix-genre-links>span{display:block;margin-bottom:8px;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.mix-genre-links>div{display:flex;gap:8px;flex-wrap:wrap}.mix-genre-links a{display:inline-flex;padding:7px 10px;border-radius:999px;border:1px solid var(--border);font-size:.78rem;font-weight:800;color:#dff6ff}.mix-genre-links a:hover{background:rgba(255,255,255,.08)}
@media(max-width:900px){.sound-grid,.genre-pill-grid,.genre-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.sound-grid,.genre-pill-grid,.genre-related-grid{grid-template-columns:1fr}.genre-hero-panel{padding:34px 24px}.genre-related-card{align-items:flex-start;flex-direction:column;gap:5px}.genre-pill{align-items:flex-start}.genre-browse{padding:20px}}