/* .site-footer — styles for src/lib/expand.mjs's <x-footer>. Load AFTER
   tokens.css. See public/components/README.md for load order and the split
   rationale.

   Always dark, like .hero (hero.css) — a fixed ground rather than
   theme-reactive, so the page is bookended by the same dark band regardless
   of which theme the reader is in. */
.site-footer {
  margin-top: clamp(56px, 7vw, 96px);
  background-color: var(--color-ramp-page);
  color: var(--color-ramp-cream);
}

.site-footer__grid {
  max-width: var(--column-wide);
  margin: 0 auto;
  padding: clamp(32px, 4vw, 56px) var(--hero-inset);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.site-footer__brand {
  font-family: var(--font-serif);
  font-size: var(--size-500);
  font-weight: var(--weight-bold);
}

.site-footer__blurb {
  font-size: var(--size-400);
  color: var(--color-ramp-light);
  text-wrap: pretty;
}

.site-footer__label {
  font-size: var(--size-100);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ramp-light);
}

.site-footer__link {
  color: var(--color-ramp-cream);
  text-decoration: none;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  text-decoration: underline;
}

.site-footer__bar {
  border-top: var(--border-width-hairline) solid var(--color-ramp-warm);
}

.site-footer__copyright {
  max-width: var(--column-wide);
  margin: 0 auto;
  padding: var(--space-2) var(--hero-inset);
  font-size: var(--size-100);
  color: var(--color-ramp-light);
}