@layer components {
  .site-footer { padding-block: var(--space-7) calc(var(--space-7) + env(safe-area-inset-bottom)); background: var(--color-dark-bg); color: var(--color-dark-muted); }
  .site-footer__inner { display: grid; gap: var(--space-4); }
  .site-footer__brand { font: 400 var(--step-0) / 1 var(--font-display); letter-spacing: var(--tracking-brand); color: var(--color-dark-text); }
  .site-footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-5); }
  .site-footer__nav a { min-height: var(--tap); display: inline-flex; align-items: center; text-decoration: none; }
  .site-footer__nav a:hover { text-decoration: underline; }
  .site-footer__legal { font-size: var(--font-size-small); color: var(--color-dark-faint); max-width: var(--measure); }
}