/* The dark footer of the home and Errands pages (class site-footer). The
   tech pages keep their own tech-footer in technicals.css: a different
   layout, with a wordmark and a line of copy. */

.site-footer {
  background: var(--color-ink);
  color: color-mix(in oklch, var(--color-on-dark) 68%, transparent);
}

.footer-inner {
  min-height: 6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  font-size: 0.85rem;
}

.footer-inner div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.4rem;
}

.footer-inner a, .footer-inner a:visited {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  color: var(--color-on-dark);
}

@media (max-width: 34rem) {
  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
    padding-block: 1.5rem;
  }
}