:root{--genre-glow:rgba(243,199,79,.14)}
.genre-index-page,.genre-hub-page{padding:64px 0 84px}
.genre-index-hero,.genre-hub-hero{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:30px;background:linear-gradient(135deg,rgba(243,199,79,.09),rgba(255,255,255,.015) 48%,rgba(255,255,255,.03));box-shadow:var(--shadow)}
.genre-index-hero{padding:58px;max-width:1180px;margin:0 auto 44px}
.genre-index-hero:after,.genre-hub-hero:after{content:"";position:absolute;inset:auto -12% -45% 34%;height:70%;background:radial-gradient(circle,var(--genre-glow),transparent 68%);pointer-events:none}
.genre-index-hero h1,.genre-hub-copy h1{max-width:900px;font-size:clamp(3rem,7vw,6.6rem);line-height:.94;letter-spacing:-.045em}
.genre-index-hero .hero-copy{max-width:760px}
.genre-index-stats{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.genre-stat{min-width:145px;padding:15px 18px;border:1px solid var(--white-line);border-radius:16px;background:rgba(0,0,0,.24)}
.genre-stat strong{display:block;color:var(--text);font-size:1.35rem}
.genre-stat span{display:block;margin-top:3px;color:var(--muted);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.genre-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.genre-hub-card{display:flex;flex-direction:column;height:100%;overflow:hidden;border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,#0b0b0b,#080808);color:var(--text);box-shadow:var(--shadow);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.genre-hub-card:hover{transform:translateY(-4px);border-color:rgba(243,199,79,.52);box-shadow:0 24px 58px rgba(0,0,0,.42)}
.genre-hub-card-media{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;overflow:hidden;background:#070707;border-bottom:1px solid rgba(255,255,255,.07)}
.genre-hub-card-media:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),inset 0 -22px 38px rgba(0,0,0,.08)}
.genre-hub-card-media img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#070707;transition:transform .3s ease}
.genre-hub-card:hover .genre-hub-card-media img{transform:scale(1.012)}
.genre-hub-card-copy{display:flex;flex:1;flex-direction:column;padding:22px 24px 24px}
.genre-hub-card-copy .genre-card-count{display:inline-flex;align-self:flex-start;margin-bottom:13px;padding:6px 9px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.025);color:var(--text);font-size:.72rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.genre-hub-card h2{min-height:2.1em;margin:0 0 10px;font-size:clamp(1.7rem,3vw,2.35rem);line-height:1.05}
.genre-hub-card p{flex:1;margin:0;color:#d7d7d7;line-height:1.55}
.genre-index-note{margin:24px 0 0;color:var(--muted);font-size:.92rem}
.genre-back{display:inline-flex;margin-bottom:20px;color:var(--muted);font-weight:800}
.genre-back:hover{color:var(--gold)}
.genre-hub-hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(440px,1.08fr);min-height:540px;margin-bottom:50px}
.genre-hub-copy{position:relative;z-index:2;padding:54px;align-self:center}
.genre-hub-copy .hero-copy{max-width:650px}
.genre-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.genre-hero-media{position:relative;z-index:1;align-self:center;justify-self:stretch;aspect-ratio:16/9;min-height:0;margin:32px 32px 32px 0;overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:22px;background:#070707;box-shadow:0 28px 74px rgba(0,0,0,.52),0 0 0 1px rgba(243,199,79,.035)}
.genre-hero-media:before{content:"";position:absolute;inset:-35%;z-index:-1;background:radial-gradient(circle at center,rgba(243,199,79,.12),transparent 58%);pointer-events:none}
.genre-hero-media:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),inset 0 -34px 54px rgba(0,0,0,.08)}
.genre-hero-media img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#070707}
.genre-hub-section{padding:28px 0 18px}
.genre-hub-section .section-heading{max-width:830px;margin-bottom:24px}
.genre-release-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}
.genre-release-card{overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--panel);box-shadow:0 16px 42px rgba(0,0,0,.22);transition:transform .2s ease,border-color .2s ease}
.genre-release-card:hover{transform:translateY(-3px);border-color:rgba(243,199,79,.45)}
.genre-release-art{aspect-ratio:16/10;background:#101010;overflow:hidden}
.genre-release-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.genre-release-card:hover .genre-release-art img{transform:scale(1.03)}
.genre-release-body{padding:17px}
.genre-release-body .tag{margin-bottom:10px}
.genre-release-body h3{margin:0 0 7px;font-size:1.1rem;line-height:1.25}
.genre-release-body p{margin:0;color:var(--muted);font-size:.9rem}
.genre-release-date{display:block;margin-top:11px;color:var(--muted);font-size:.76rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.genre-artist-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}
.genre-artist-card{position:relative;min-height:320px;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:var(--panel);color:var(--text);box-shadow:0 16px 42px rgba(0,0,0,.22)}
.genre-artist-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--artist-position,50% 38%)}
.genre-artist-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04) 28%,rgba(0,0,0,.9) 84%,#050505)}
.genre-artist-copy{position:absolute;z-index:1;inset:auto 18px 18px}
.genre-artist-copy span{display:block;margin-bottom:6px;color:var(--gold);font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.genre-artist-copy h3{margin:0 0 5px;font-size:1.35rem}
.genre-artist-copy p{margin:0;color:#d1d1d1;font-size:.87rem;line-height:1.45}
.genre-artist-card.no-image{min-height:auto;padding:22px}
.genre-artist-card.no-image:after{display:none}
.genre-artist-card.no-image .genre-artist-copy{position:relative;inset:auto}
.genre-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.genre-related-card{padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--panel);color:var(--text)}
.genre-related-card span{display:block;color:var(--gold);font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.genre-related-card strong{display:block;margin-top:7px;font-size:1.08rem}
.genre-loading{grid-column:1/-1;padding:28px;border:1px dashed var(--line);border-radius:18px;color:var(--muted);text-align:center}
@media(max-width:1000px){.genre-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.genre-hub-card h2{min-height:0}.genre-hub-hero{grid-template-columns:1fr;min-height:0}.genre-hero-media{order:-1;align-self:auto;justify-self:auto;aspect-ratio:16/9;margin:24px 24px 0}.genre-hub-copy{padding:38px}.genre-release-grid,.genre-artist-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.genre-index-page,.genre-hub-page{padding-top:40px}.genre-index-hero{padding:34px 24px;border-radius:24px}.genre-index-stats{display:grid;grid-template-columns:1fr 1fr}.genre-stat{min-width:0}.genre-hub-grid,.genre-related-grid{grid-template-columns:1fr}.genre-hub-card-copy{padding:20px}.genre-hub-card h2{min-height:0}.genre-hub-copy{padding:28px 22px}.genre-hub-copy h1{font-size:clamp(2.8rem,14vw,4.6rem)}.genre-hero-media{aspect-ratio:16/9;margin:14px 14px 0;border-radius:16px}.genre-release-grid,.genre-artist-grid{grid-template-columns:1fr}.genre-artist-card{min-height:390px}.genre-hero-actions .button{width:100%;text-align:center}}