.genres-page .page{max-width:1200px;margin:0 auto;padding:110px 20px 120px;min-height:100vh}.genres-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;max-width:1200px;margin:0 auto;padding:48px 0 0}.genre-card{position:relative;display:flex;flex-direction:column;background:#12121266;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg, 12px);padding:28px 24px;text-decoration:none;color:inherit;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease,background .3s ease;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow:hidden}.genre-card:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--gc-red, #d10f1a);opacity:0;transition:opacity .3s ease}.genre-card:hover{transform:translateY(-4px);background:#12121299;border-color:#d10f1a59;box-shadow:0 12px 32px #00000080,0 0 0 1px #d10f1a26}.genre-card:hover:before{opacity:1}.genre-card h2{font-family:var(--font-display, var(--font-spectral));font-size:clamp(22px,3vw,28px);font-weight:700;letter-spacing:.04em;margin:0 0 12px;color:#fff;transition:color .3s ease}.genre-card:hover h2{color:var(--gc-red, #d10f1a)}.genre-card p{color:#ffffffa6;font-size:var(--text-base, .9375rem);line-height:1.7;margin:0}.genre-card .genre-card-era{display:inline-block;margin-top:16px;padding:4px 10px;font-size:var(--text-xs, .75rem);text-transform:uppercase;letter-spacing:.15em;font-weight:700;border-radius:var(--radius-sm, 4px);background:#d10f1a33;border:1px solid rgba(209,15,26,.35);color:#ffc8c8f2}.genre-detail-header{margin-bottom:48px;display:flex;flex-direction:column;align-items:center;text-align:center}.genre-detail-eyebrow{display:flex;align-items:center;gap:8px;font-size:var(--text-xs, .75rem);text-transform:uppercase;letter-spacing:.2em;color:#ffffff8c;margin-bottom:16px;font-weight:700}.genre-detail-eyebrow a{color:var(--gc-red2, #e8333d);text-decoration:none;transition:color .2s ease}.genre-detail-eyebrow a:hover{color:var(--gc-red, #d10f1a);text-decoration:underline;text-underline-offset:3px}.genre-detail-eyebrow span{color:#ffffff59}.genre-detail-title{font-family:var(--font-display);font-size:clamp(64px,12vw,160px);line-height:.9;letter-spacing:2px;color:var(--gc-red, #d10f1a);margin:0 0 16px;text-shadow:0 12px 40px rgba(0,0,0,.9),0 2px 0 rgba(0,0,0,.35)}.genre-detail-tagline{font-size:var(--text-lg, 1.125rem);color:#ffffffa6;max-width:600px;line-height:1.6;margin:0}.genre-detail-content{max-width:860px;margin:0 auto}.genre-block{margin-bottom:48px;padding:24px 0;border-top:1px solid rgba(255,255,255,.1)}.genre-block:first-of-type{border-top:none;padding-top:0}.genre-block-h2{font-size:28px;font-weight:700;color:#fff;margin:0 0 20px;letter-spacing:.05em}.genre-block p{font-size:var(--text-lg, 1.125rem);line-height:1.7;color:#ffffffd9;margin:0 0 16px}.genre-block ul{margin:0 0 24px;padding-left:24px}.genre-block li{font-size:var(--text-lg, 1.125rem);line-height:1.7;color:#ffffffd9;margin-bottom:12px}.genre-block li strong{color:#fff;font-weight:600}.genre-key-artists{margin:24px 0;padding:20px 24px;background:#d10f1a1f;border:1px solid rgba(209,15,26,.25);border-left:4px solid var(--gc-red, #d10f1a);border-radius:var(--radius-lg, 12px);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 8px 24px #0006}.genre-key-artists h3{font-size:var(--text-sm, .875rem);text-transform:uppercase;letter-spacing:.15em;color:#ffc8c8e6;font-weight:700;margin:0 0 12px}.genre-key-artists p{color:#ffffffd9;font-size:var(--text-base, 1rem);line-height:1.7;margin:0}@media(max-width:768px){.genres-page .page{padding:80px 16px 100px}.genres-grid{grid-template-columns:1fr;padding:32px 0 0}.genre-detail-title{font-size:clamp(48px,15vw,120px)}.genre-block-h2{font-size:var(--text-3xl, 1.875rem)}.genre-block p,.genre-block li{font-size:var(--text-base, 1rem)}.genre-key-artists{padding:14px 16px}}@media(prefers-reduced-motion:reduce){.genre-card{transition:none}.genre-card:before{transition:none}}