/* Shared header and footer. Each site supplies its existing palette. */
.family-shell-inner {
  --shell-gutter: 48px;
  box-sizing: border-box;
  inline-size: calc(100% - 2 * var(--shell-gutter));
  max-inline-size: var(--family-content-width);
  margin-inline: auto;
}

.family-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  background: var(--shell-bg);
  border-block-end: 1px solid var(--shell-line);
}
.family-header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-block-size: 88px;
  padding-block: 12px;
}
.family-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-block-size: var(--family-control-height);
  min-inline-size: 0;
  max-inline-size: 100%;
  color: var(--shell-ink);
  font-size: 1.25rem;
  font-weight: var(--family-heading-weight);
  line-height: 1.2;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
  text-decoration: none;
}
.family-brand:hover { text-decoration: none; }
.family-header-controls {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 12px;
  max-inline-size: 100%;
}
.family-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: var(--family-control-height);
  block-size: var(--family-control-height);
  padding: 0;
  border-radius: var(--family-radius-control);
}
.family-theme svg { inline-size: 18px; block-size: 18px; }

.family-section-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-inline-size: 0;
}
.family-desktop-nav {
  justify-content: flex-end;
  gap: 0 24px;
  margin-inline-start: auto;
}
.family-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: var(--family-control-height);
  color: var(--shell-muted);
  font-size: var(--family-nav-size);
  font-weight: var(--family-label-weight);
  line-height: 1.5;
  text-decoration: none;
  transition: color var(--family-motion-duration) ease;
}
.family-nav-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 4px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--shell-accent);
  transform: scaleX(0);
  transition: transform var(--family-motion-duration) ease;
}
.family-nav-link:is(:hover, [aria-current="location"]) {
  color: var(--shell-nav-active);
  text-decoration: none;
}
.family-nav-link:is(:hover, [aria-current="location"])::after { transform: scaleX(1); }
.family-nav-band { display: none; }

.family-footer {
  padding-block: var(--family-footer-padding);
  border-block-start: 1px solid var(--shell-line);
  overflow-wrap: anywhere;
}
.family-footer-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--family-footer-gap);
}
.family-footer-identity {
  flex: 1 1 14rem;
  min-inline-size: 0;
}
.family-footer-name {
  margin: 0;
  color: var(--shell-ink);
  font-size: 1rem;
  font-weight: var(--family-heading-weight);
  line-height: 1.5;
}
.family-footer-description {
  margin: 8px 0 0;
  color: var(--shell-muted);
  font-size: var(--family-nav-size);
  line-height: 1.6;
}
.family-footer-description + .family-footer-description { margin-block-start: 4px; }
.family-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 24px;
  min-inline-size: 0;
}
.family-footer a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--family-control-height);
  max-inline-size: 100%;
  color: var(--shell-muted);
  line-height: 1.5;
}
.family-footer-links a {
  font-size: var(--family-nav-size);
  font-weight: var(--family-label-weight);
  text-decoration: none;
}
.family-footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 16px;
  margin-block-start: 18px;
  padding-block-start: 8px;
  border-block-start: 1px solid var(--shell-line);
  color: var(--shell-muted);
  font-size: var(--family-footer-meta-size);
  line-height: 1.5;
}
.family-footer-credit { margin: 0; min-inline-size: 0; }
.family-footer-credit a { color: var(--shell-credit, var(--shell-muted)); }
.family-footer-top {
  margin-inline-start: auto;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.family-footer a:hover { color: var(--shell-ink); }

@media (max-width: 1100px) {
  .family-shell-inner { --shell-gutter: 28px; }
  .family-header-inner {
    flex-wrap: wrap;
    gap: 8px;
    min-block-size: 64px;
    padding-block: 8px;
  }
  .family-header-controls { gap: 8px; margin-inline-start: auto; }
  .family-desktop-nav { display: none; }
  .family-nav-band {
    display: block;
    background: var(--shell-bg);
    border-block-end: 1px solid var(--shell-line);
  }
  .family-mobile-nav {
    align-items: stretch;
    justify-content: space-between;
    gap: 8px;
    padding-block: 6px 10px;
  }
  .family-mobile-nav .family-nav-link {
    flex: 1 1 0;
    justify-content: center;
    min-inline-size: min-content;
    padding: 6px 4px;
    line-height: 1.4;
    overflow-wrap: normal;
    text-align: center;
  }
}
@media (max-width: 800px) {
  .family-shell-inner { --shell-gutter: 20px; }
  .family-footer-main { flex-direction: column; }
  .family-footer-identity { flex: 0 1 auto; }
  .family-footer-links { justify-content: flex-start; }
}
@media (max-width: 420px) {
  .family-brand { gap: 7px; font-size: 1.1875rem; }
  .family-mobile-nav { gap: 3px; }
  .family-mobile-nav .family-nav-link {
    padding-inline: 0;
    font-size: .75rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .family-nav-link, .family-nav-link::after { transition: none; }
}
@media print {
  .family-header { position: static; }
}