@layer components {
  .site-footer {
    background: var(--ink);
    color: var(--pledge-ink);
    padding: var(--space-3xl) max(var(--gutter), (100% - var(--measure)) / 2) var(--space-xl);
  }

  .site-footer-main {
    display: grid;
    font-size: var(--text-s);
    gap: var(--space-2xl) var(--space-inline-2xl);
  }

  @media (min-width: 52rem) {
    .site-footer-main { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  }

  .site-footer-brand p {
    color: var(--pledge-ink);
    margin-block: var(--space-s) 0;
    max-inline-size: 44ch;
  }

  .site-footer-home { text-decoration: none; }
  .wordmark-footer { font-size: var(--text-xl); }
  .site-footer .wordmark-footer .loud { color: var(--paper); }

  .site-footer-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
    gap: var(--space-l) var(--space-inline-l);
  }

  .site-footer-columns h2 {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sky);
    margin-block: 0 var(--space-s);
  }

  .site-footer-columns ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2xs);
  }

  .site-footer-columns a { color: var(--paper); text-decoration: none; }
  .site-footer-columns a:hover { color: var(--blip); }

  .site-footer-contact a { color: var(--paper); }
  .site-footer .button--primary { background: var(--blip); border-color: var(--blip); color: var(--ink); }
  .site-footer .button--primary:hover { background: var(--paper); border-color: var(--paper); }

  .site-footer-contact,
  .site-footer-legal {
    text-align: center;
    font-size: var(--text-s);
    margin-block: var(--space-2xl) 0;
    color: var(--pledge-ink);
  }

  .site-footer-legal {
    margin-block-start: var(--space-s);
    font-size: var(--text-xs);
    color: var(--sky);
  }
}