/* The deep teal foot under the cyan contact: the logo, then the small
   print. */
.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  padding: 22px var(--gutter);
  background: var(--deep);
  color: var(--on-dark-soft);
}

/* The bar's size: a sign-off, not a second masthead. */
.footer .wordmark {
  height: 22px;
  color: var(--on-dark);
}

.footer__meta {
  display: flex;
  gap: clamp(28px, 3.4vw, 56px);
}

.footer__meta a {
  text-decoration: none;
  transition: color var(--quick) var(--ease);
}

.footer__meta a:hover {
  color: var(--on-dark);
}