/* 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 0 0 auto; 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; }
}

/* Light · Dark · Auto (Includes/FamilyBar.ss, static/family/family.js). Three icons in one pill,
   the chosen one lit in the logo's amber. */
.family__theme { display: inline-flex; flex: none; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(255, 255, 255, .07); }
.family__theme[hidden] { display: none; }
.family__mode { display: grid; place-items: center; width: 28px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: #a89e88; cursor: pointer; }
.family__mode svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.family__mode .family__half { fill: currentColor; stroke: none; }
.family__mode[data-theme-choice="dark"] svg path { fill: currentColor; stroke: none; }
.family__mode:hover { color: #ffffff; }
.family__mode:focus-visible { outline: 2px solid #c8962f; outline-offset: 1px; }
.family__mode[aria-pressed="true"] { background: #c8962f; color: #15151b; }
.family__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 47.9375rem) {
    .family__link { padding: 10px 8px; }
    .family__inner { gap: 8px; }
}
@media (max-width: 420px) {
    .family__inner { justify-content: space-between; padding: 0 10px; }
    .family__link { padding: 10px 6px; font-size: 12.5px; }
    .family__mode { width: 24px; }
}
@media (max-width: 380px) {
    .family__inner { gap: 4px; padding: 0 6px; }
    .family__link { padding: 10px 4px; font-size: 12px; }
    .family__theme { gap: 0; }
    .family__mode { width: 24px; }
}

/* SIX SITES DO NOT FIT ACROSS A PHONE (code.gonglogic.com made the sixth, 2026-10-30): at 390px
   the bar was 18px wider than the screen and the whole page scrolled sideways. The padding above
   is already as tight as a tap target allows, so instead the LIST scrolls inside the bar, and
   the page never does. A seventh site needs nothing here. */
@media (max-width: 47.9375rem) {
    .family__list { min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
    .family__list::-webkit-scrollbar { display: none; }
}

/* Six sites and the theme switch have to fit a phone, or the last link is cut off under the switch. */
@media (max-width: 440px) {
    .family__list { gap: 0; min-width: 0; }
    .family__link { padding: 10px 4px; font-size: 12px; }
    .family__inner { gap: 4px; padding: 0 6px; }
    .family__mode { width: 24px; }
}