@layer components {
  .footer { padding-block: 1.75rem; border-top: var(--xf-border); background: var(--xf-paper); color: var(--xf-ink-soft); font-family: var(--xf-font-body); font-size: var(--text-sm); }
  .footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-md) var(--space-xl); }
  .footer__brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-md); }
  .footer__logo { width: auto; height: 1.25rem; }
  .footer__links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
  .footer__link { font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
  .footer__link:hover { color: var(--xf-ink); text-decoration-line: underline; }
  .footer__link:focus-visible { outline: var(--xf-focus-ring); outline-offset: var(--xf-focus-offset); }
}