/* ============================================================
   THE SITE FOOTER
   One footer for every public page: quick links on the left,
   copyright on the right. Markup lives in _site-footer.html and
   is injected by scripts/build-footer.mjs — edit these two, never
   the copies inside the pages.

   Colour and type come from tokens.css, so the footer cannot drift
   from the rest of the product the way two hand-written copies did.
   A page owns the outer wrapper (the landing centers it in .wrap,
   the essay insets it to the article's edge); everything inside
   .foot-row is owned here.
   ============================================================ */

footer .foot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
}

footer .foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}

footer .foot-links a {
  color: var(--color-ink-2);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

footer .foot-links a:hover {
  color: var(--color-ink);
}

footer .foot-copy {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}

@media (max-width: 480px) {
  footer .foot-row {
    flex-direction: column;
    align-items: flex-start;
  }
}