/* ==========================================================================
   footer.css — site footer, on the ink ground
   ========================================================================== */

.site-footer {
  padding-block: var(--space-12) var(--space-8);

  background-color: var(--ink);
  color: var(--text-muted-on-ink);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 48rem) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (min-width: 64rem) {
  .site-footer__grid {
    gap: var(--space-12);
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

/* The footer uses the reversed (white) logo asset — see header.css. */

.site-footer__blurb {
  max-width: 26ch;
  margin-block-start: var(--space-5);

  color: var(--text-muted-on-ink);
  font-size: var(--fs-xs);
}

.site-footer__heading {
  margin-block-end: var(--space-4);

  color: var(--text-on-ink);
  /* These are <h2> elements, so they inherit the display face from base.css.
     They are labels, not headings-as-typography — restate the grotesque. */
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);

  margin: 0;
  padding: 0;
  list-style: none;
}

/* inline-block + vertical padding takes these from 20px to 28px tall, so they
   clear the WCAG 2.2 AA 24x24 minimum target size (2.5.8) instead of relying
   on the spacing exception. Verified by measurement, not by eye. */
.site-footer__list a {
  display: inline-block;
  padding-block: var(--space-1);

  color: var(--text-muted-on-ink);
  font-size: var(--fs-xs);
  text-decoration: none;

  border-block-end: var(--border-w) solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.site-footer__list a:hover {
  color: var(--text-on-ink);
  border-color: var(--text-muted-on-ink);
}

.site-footer__list a:focus-visible { outline-color: var(--focus-on-ink); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  justify-content: space-between;

  margin-block-start: var(--space-12);
  padding-block-start: var(--space-6);

  border-block-start: var(--border-w) solid var(--border-on-ink); /* the one hairline
      that reads on --ink. Neither --border nor --rule works on a dark
      ground, and a fourth global border token would be used exactly once. */
}

.site-footer__bottom p {
  margin: 0;
  color: var(--text-muted-on-ink);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-button);
}