/* The family bar (Includes/FamilyBar.ss): the strip across the top of every Gong Logic
   site that says which one this is and links to the others.

   A static file on purpose. The main and music sites are built from the theme's
   stylesheet and the studio is not, and the bar has to be identical on all three —
   so it brings its own styles and depends on nobody's. The colours are the brand's:
   ink (#15151b) and the amber gold of the logo (#c8962f). */
.family { background: #15151b; color: #d3c8ac; font: 500 13px/1 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.family__inner { max-width: 1280px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; }
.family__name { letter-spacing: .08em; text-transform: uppercase; font-size: 11px; font-weight: 600; color: #a89e88; white-space: nowrap; }
.family__list { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.family__link { display: block; padding: 10px 12px; color: #e6dcc6; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.family__link:hover, .family__link:focus-visible { color: #ffffff; }
.family__link:focus-visible { outline: 2px solid #c8962f; outline-offset: -2px; }
.family__link[aria-current] { color: #ffffff; border-bottom-color: #c8962f; }
@media (max-width: 420px) {
    .family__name { display: none; }
    .family__inner { justify-content: center; }
}

/* Phones: the main site narrows its gutter to 1.25rem, so the bar does too. */
@media (max-width: 47.9375rem) {
    .family__inner { padding: 0 1.25rem; }
}