.site-footer {
  padding-block: var(--space-32);
  background: var(--color-ink);
  color: var(--color-on-ink);
}

.site-footer :focus-visible {
  outline-color: var(--color-accent-on-dark);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16) var(--space-24);
}

.site-footer__wordmark {
  flex-shrink: 0;
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-24);
}

.site-footer__made,
.site-footer__copyright {
  color: var(--color-on-ink-secondary);
}

.site-footer__copyright {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (width < 768px) {
  .site-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "wordmark"
      "meta"
      "copyright";
    row-gap: var(--space-16);
  }

  .site-footer__wordmark {
    grid-area: wordmark;
    justify-self: start;
  }

  .site-footer__meta {
    grid-area: meta;
    padding-top: var(--space-16);
    border-top: 1px solid var(--color-ink-border);
  }

  .site-footer__copyright {
    grid-area: copyright;
    text-align: start;
  }
}

@media (width < 1024px) {
  .site-footer .cursor-tag--static {
    top: calc(100% + var(--space-12));
    left: 0;
    translate: none;
  }
}