/* Footer */

.site-footer {
  background: var(--color-charcoal);
  color: var(--color-cream);
  padding-block: var(--space-xl) var(--space-lg);
}

.site-footer a {
  color: var(--color-cream);
}

.footer-top {
  display: grid;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(254, 251, 243, 0.16);
}

@media (min-width: 760px) {
  .footer-top {
    grid-template-columns: 1.3fr 1fr 1fr;
  }
}

.footer-brand .logo {
  color: var(--color-cream);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 2.9rem);
}

.footer-brand p {
  margin-top: var(--space-sm);
  color: rgba(254, 251, 243, 0.72);
  max-width: 34ch;
}

.footer-heading {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-blush);
  margin-bottom: var(--space-sm);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-links a {
  color: rgba(254, 251, 243, 0.85);
  font-size: var(--fs-sm);
}

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

.footer-social {
  display: flex;
  gap: 0.75rem;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(254, 251, 243, 0.25);
}

.footer-social a:hover {
  background: rgba(254, 251, 243, 0.1);
}

.footer-social svg {
  width: 1.1rem;
  height: 1.1rem;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: space-between;
  padding-top: var(--space-md);
  font-size: var(--fs-xs);
  color: rgba(254, 251, 243, 0.6);
}

.footer-bottom a:hover {
  color: var(--color-blush);
}