.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.site-footer__primary {
  background: var(--color-accent);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--layout-gap-loose);
  padding: 2.9rem 0 3.1rem;
}

.site-brand--footer {
  flex: 0 0 auto;
}

.site-brand--footer img {
  display: block;
  width: auto;
  height: var(--footer-logo-height);
  max-width: none;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem 2.25rem;
  flex: 1 1 auto;
  align-content: start;
}

.site-footer__nav-column,
.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.site-footer__nav-column {
  gap: 1rem;
  align-content: start;
}

.link-list {
  gap: var(--space-sm);
}

.site-footer__nav-link {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--font-size-footer-nav);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-footer__nav-link--active {
  color: var(--color-text-bright);
}

.site-footer__nav-link--placeholder,
.site-footer__legal-nav a[aria-disabled="true"] {
  color: var(--color-footer-disabled);
  cursor: default;
  pointer-events: none;
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  grid-column: 3;
  margin-top: var(--footer-social-offset);
}

.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-on-dark-muted);
  text-decoration: none;
  transition: color 140ms ease, transform 140ms ease;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  color: var(--color-text-bright);
  outline: none;
  transform: translateY(-1px);
}

.site-footer__social-link img {
  display: block;
  width: var(--footer-social-icon-size);
  height: auto;
}

.site-footer__legal {
  background: var(--color-accent-soft);
  color: var(--color-text-bright);
}

.site-footer__legal-inner {
  display: grid;
  gap: var(--space-panel-2xl);
  justify-items: center;
  padding: 2.5rem 0 2.8rem;
  text-align: center;
}

.site-footer__legal-meta,
.site-footer__legal-copy {
  margin: 0;
  width: 100%;
}

.site-footer__legal-meta {
  font-size: var(--font-size-footer-legal);
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.site-footer__legal-copy {
  font-size: var(--font-size-footer-legal);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.site-footer__legal-copy a,
.site-footer__legal-nav a {
  color: var(--color-text-bright);
}

.site-footer__legal-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  gap: 0.4rem var(--space-text-md);
}

.site-footer__legal-nav a {
  font-size: var(--font-size-footer-legal);
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-footer__legal-nav a + a::before {
  content: "|";
  margin-right: var(--space-text-md);
}

.page-home .site-footer {
  background: linear-gradient(180deg, var(--color-home-footer-top) 0%, var(--color-home-footer-bottom) 100%);
  border-top: 4px solid var(--color-home-footer-border);
}

.page-home .site-footer__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: 2.4rem 0 3.6rem;
}

.page-home .link-list {
  gap: 0.2rem;
  justify-self: center;
}

.page-home .link-list a {
  justify-content: flex-start;
  padding: 0.15rem 0;
  border-radius: 0;
  color: var(--color-text-soft);
  background: transparent;
}

.page-home .site-brand--footer {
  justify-self: start;
}

@media (max-width: 700px) {
  .site-footer__inner {
    align-items: flex-start;
    padding: 2.2rem 0 2.35rem;
  }

  .site-brand--footer img {
    height: var(--footer-logo-height-md);
  }

  .site-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
  }

  .site-footer__social {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .site-footer__nav-column {
    gap: 0.8rem;
  }

  .site-footer__legal-inner {
    gap: 1.2rem;
    padding: 2rem 0 2.2rem;
  }

  .site-footer__legal-copy {
    line-height: 1.18;
  }

  .site-footer__legal-nav {
    gap: 0.45rem 0.75rem;
  }

  .site-footer__legal-nav a {
    letter-spacing: 0.1em;
  }

  .site-footer__legal-nav a + a::before {
    margin-right: 0.75rem;
  }
}

@media (max-width: 520px) {
  .site-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
  }

  .page-home .site-footer__inner {
    gap: 1.5rem;
    justify-items: start;
  }

  .page-home .site-brand--footer,
  .page-home .link-list {
    justify-self: start;
  }

  .page-home .link-list {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .site-brand--footer img {
    height: var(--footer-logo-height-sm);
  }

  .site-footer__nav {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .site-footer__social {
    grid-column: 1;
  }

  .site-footer__legal-nav a {
    letter-spacing: 0.08em;
  }
}