@layer components {
  footer {
    width: 100%;
    border-top: 1px solid var(--color-border);
    padding: var(--space-lg) 0;
    margin: var(--space-xl, 2.5em) 0 0;
    font-size: 0.9rem;
    font-weight: 300;
  }

  /* Footer children share the system's narrow content column. */
  footer > * {
    width: min(90%, var(--max-width));
    margin-inline: auto;
  }

  /* Footer columns: brand left, link/meta groups right.
     Brand gets the elastic flex-grow; groups stay at content width.
     Wraps to a single column on narrow widths.
     To add more groups later (license, office, social), drop them in as
     additional .footer__group siblings; flex distribution handles the rest. */
  .footer__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-lg) var(--space-xl, 2.5em);
  }

  .footer__brand {
    flex: 1 1 14em;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: 0;
  }

  .footer__group {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .footer__tagline {
    margin: 0;
    color: var(--color-text);
  }

  .footer__contact {
    margin: 0;
  }

  .footer__contact a {
    color: var(--color-link);
  }

  .footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .footer__links a {
    color: var(--color-link);
    text-decoration: none;
    display: inline-block;
    padding: var(--space-xs, 0.25em) 0;
    font-weight: 300;
    line-height: 1.4;
    transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .footer__links a:hover {
    text-decoration: underline;
  }

  .footer__links a:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 3px;
    border-radius: 2px;
  }

  .footer__locale {
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 0.6em;
    font-weight: 300;
    line-height: 1.4;
    color: var(--color-text-muted);
    white-space: nowrap;
  }

  .footer__locale span[aria-current="true"] {
    font-weight: 300;
    color: var(--color-text-muted);
  }

  .footer__locale a {
    color: var(--color-link);
    text-decoration: none;
  }

  .footer__locale a:hover {
    text-decoration: underline;
  }

  .footer__locale a:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 3px;
    border-radius: 2px;
  }

  .footer__copy {
    margin: var(--space-sm) 0 0;
    color: var(--color-text-muted);
    font-size: 0.85rem;
  }
  /* The flex gap on .footer__brand already accounts for tagline→email→copy
     spacing. The extra margin-top above adds a small breath to set the
     legal line apart as its own beat. */

  .footer__disclaimer {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
    max-width: 30em;
  }

  @media (prefers-reduced-motion: reduce) {
    .footer__links a {
      transition: none;
    }
  }
}