/* SplitClub — /music. Loaded after pages.css; adds only what the genre
   surface needs. No padding shorthand on anything that also carries .wrap or
   .narrow — the shorthand wins on source order and silently erases the gutter. */

/* Genre grid on the hub. auto-fill rather than a fixed column count so a
   family with two genres does not stretch two cards across the full width. */
.genre-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));
  gap:14px;margin:0 0 40px;
}

.genre-card{
  display:flex;flex-direction:column;gap:5px;
  border:1px solid var(--line);border-radius:14px;
  padding-top:18px;padding-bottom:18px;padding-left:19px;padding-right:19px;
  background:rgba(255,255,255,.42);
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.genre-card:hover{border-color:var(--gold);background:rgba(255,255,255,.72);transform:translateY(-2px)}
.genre-card:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}

.genre-card .gname{font-weight:700;font-size:17.5px;letter-spacing:-.01em;line-height:1.25}
.genre-card .gbpm{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.genre-card .gsound{font-size:14.5px;line-height:1.5;color:var(--muted);margin-top:4px}
.genre-card .gstat{
  margin-top:auto;padding-top:11px;font-size:12.5px;font-weight:600;color:var(--gold-deep);
}

/* Related-format links at the foot of a genre page. */
.genre-links{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 34px}
.genre-links a{
  border:1px solid var(--line);border-radius:100px;
  padding-top:8px;padding-bottom:8px;padding-left:15px;padding-right:15px;
  font-size:14.5px;transition:border-color .18s ease,color .18s ease;
}
.genre-links a:hover{border-color:var(--gold);color:var(--gold-deep)}

/* Days that actually sailed. Deliberately a list rather than a table: it is
   evidence, not a schedule, and nobody needs to compare rows. */
.ran{list-style:none;margin:0 0 34px;padding:0}
.ran li{
  display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;
  border-top:1px solid var(--line);padding-top:11px;padding-bottom:11px;
  font-size:15.5px;
}
.ran li span{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}

/* The eyebrow on a genre page carries a link back to the hub. */
.page-head .eyebrow a{color:inherit;border-bottom:1px solid var(--line)}
.page-head .eyebrow a:hover{color:var(--gold-deep)}

@media (max-width:640px){
  .genre-grid{grid-template-columns:1fr;gap:11px}
  .genre-card{padding-top:16px;padding-bottom:16px}
}