@layer components {
  /* The foot of every signed-out page: the way to every other page, on the sunken ground. */
  .site-footer {
    --logo-size: var(--logo-min-wordmark);

    background-color: var(--color-surface-sunken);
  }

  .site-footer__inner {
    display: grid;
    gap: var(--space-10);
    max-inline-size: var(--max-content);
    margin-inline: auto;
    padding: var(--space-11) var(--gutter-fluid) calc(var(--safe-bottom) + var(--space-9));
  }

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

  .site-footer__home {
    display: inline-flex;
    align-items: center;
    align-self: start;
    min-block-size: var(--tap-min);
    color: inherit;
    text-decoration: none;
  }

  .site-footer__home .brand {
    margin-inline-start: calc(var(--logo-mark-scale) * 1em * (var(--logo-mark-visible) - 1) / 2);
  }

  .site-footer__call {
    font: var(--type-title-2);
    color: var(--color-ink-display);
  }

  .site-footer__groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(var(--space-0), 1fr));
    gap: var(--space-9) var(--space-8);
  }

  .site-footer__title {
    margin-block-end: var(--space-4);
    font: var(--type-overline);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--color-ink-faint);
  }

  .site-footer__links {
    display: flex;
    flex-direction: column;
    list-style: none;
  }

  .site-footer__link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-min);
    font: var(--type-body-sm);
    color: var(--color-ink-muted);
    text-decoration: none;
  }

  .site-footer__fine {
    font: var(--type-caption);
    color: var(--color-ink-faint);
  }

  @media (any-hover: hover) {
    .site-footer__link:hover {
      color: var(--color-ink);
      text-decoration: underline;
    }
  }

  @media (width >= 900px) {
    .site-footer__inner {
      grid-template-columns: minmax(var(--space-0), 1fr) minmax(var(--space-0), 2fr);
      padding-block-start: var(--space-12);
    }

    .site-footer__groups {
      grid-template-columns: repeat(auto-fit, minmax(var(--space-0), 1fr));
    }

    .site-footer__fine {
      grid-column: 1 / -1;
    }
  }

  /* A signed-out page ends at its footer, with no Dock to clear. */
  .page:has(> .site-footer) {
    padding-block-end: var(--space-0);
  }
}