
/* The genre pages (tools/build_genre_pages.py): the hub's top (hero words
   beside the live booth, from the songbook sheet) and the song guides' voice
   groups (the shared sheet's .district). The booth's sign frame is the page's
   one hero in motion; everything here is still. */
.gk{font:500 12px/1.5 var(--body); letter-spacing:.28em; text-transform:uppercase; color:var(--accent-400);
  text-shadow:0 0 8px rgba(145,132,217,.6); margin:0 0 10px}
.genre .hubhero h1 .big{font-size:clamp(38px,9vw,64px)}
.genre .hubhero .dek b{font-weight:500; color:var(--text)}
.gjump{display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0; padding:0; list-style:none}
.gjump a{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px;
  border:1px solid var(--chip-line); border-radius:999px; color:var(--soft); text-decoration:none;
  font-size:14px; background:rgba(18,15,30,.6)}
.gjump a:hover{border-color:var(--accent-400); color:var(--text)}
.gjump a:focus-visible{outline:2px solid var(--accent-400); outline-offset:2px}
.gjump .ico{width:20px; height:20px; color:var(--tube-b)}
.genre .sw{scroll-margin-top:72px}
.genre .hubhero .crumb{line-height:1.5}
.district[id]{scroll-margin-top:72px}
.district .eyebrow .ico{width:18px; height:18px; vertical-align:-4px; margin-right:6px}
.pick .yr{color:var(--ghost)}
.ask{margin:22px 0 0}
.ask a{display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 18px;
  border:1.5px solid var(--accent); border-radius:999px; color:var(--blurple-fill); text-decoration:none;
  font-size:15px; box-shadow:0 0 12px rgba(145,132,217,.35), inset 0 0 8px rgba(145,132,217,.12)}
.ask a:hover{box-shadow:0 0 18px rgba(145,132,217,.55), inset 0 0 10px rgba(145,132,217,.2)}
.ask a:active{background:rgba(145,132,217,.12)}
.ask a:focus-visible{outline:2px solid var(--accent-400); outline-offset:3px}
.ask .ico{width:20px; height:20px}
.essay .body b{font-weight:500; color:var(--text)}
.near .here{border-color:var(--accent-600)}
.genre .faq a, .intro a, .essay a{color:var(--accent-400)}
@media (min-width:980px){
  .genre .hubhero h1 .big{font-size:58px}
}
