@layer layout {
  .site-footer {
    --ink-soft: var(--ink-on-dark-soft);
    --ink-muted: var(--ink-on-dark-muted);
    padding-block: var(--space-xl) var(--space-l);
    background: var(--surface-dark);
    color: var(--ink-on-dark-soft);
  }

  .site-footer a {
    transition: color var(--duration-base) ease;
  }

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

  .site-footer__masthead {
    display: grid;
    justify-items: start;
    gap: 0.5rem;
    padding-bottom: var(--space-m);
    border-bottom: 1px solid var(--line-on-dark);
  }

  .site-footer__signature {
    display: block;
    width: min(100%, 26rem);
  }

  .site-footer__signature .signature {
    width: 100%;
    fill: var(--color-stamen);
  }

  .site-footer__tagline {
    font-size: var(--text-2xs);
    font-weight: var(--weight-strong);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-l) var(--grid-gap);
    padding-block: var(--space-m);
  }

  .site-footer__summary {
    max-width: 30ch;
    margin-bottom: var(--space-m);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-display);
    line-height: 1.3;
    color: var(--ink-on-dark);
  }

  .site-footer__heading {
    margin-bottom: 0.5rem;
    font-size: var(--text-2xs);
    font-weight: var(--weight-strong);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .site-footer__list {
    display: grid;
    font-size: var(--text-ui);
  }

  .site-footer__list a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    color: var(--ink-on-dark);
  }

  .site-footer__list-aside {
    color: var(--ink-muted);
  }

  .site-footer__list .icon {
    width: 1.0625rem;
    height: 1.0625rem;
    color: var(--color-stamen);
  }

  .site-footer__list address {
    max-width: 28ch;
    padding-top: 0.375rem;
    color: var(--ink-muted);
  }

  .site-footer__contact {
    overflow-wrap: anywhere;
  }

  .site-footer__legal {
    display: grid;
    gap: 0.5rem var(--space-xl);
    padding-top: var(--space-m);
    border-top: 1px solid var(--line-on-dark);
    font-size: var(--text-xs);
    color: var(--ink-muted);
  }

  .site-footer__license {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--ink-on-dark-soft);
  }

  .site-footer__license-mark {
    height: 1.375rem;
  }

  .site-footer__credit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.875rem;
  }

  .site-footer__credit-label {
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-on-dark-muted);
  }

  .site-footer__credit-link {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
  }

  .site-footer__credit-logo {
    display: block;
    width: 4.375rem;
    height: auto;
    opacity: 0.62;
    transition: opacity var(--duration-fast) var(--ease-out-quart);
  }

  @media (hover: hover) {
    .site-footer a:not(.button):hover {
      color: var(--color-pollen);
    }

    .site-footer__credit-link:hover .site-footer__credit-logo {
      opacity: 1;
    }
  }

  .site-footer__credit-link:focus-visible .site-footer__credit-logo {
    opacity: 1;
  }

  @media not all and (min-width: 48em) {
    .site-footer {
      padding-bottom: calc(var(--space-xl) + var(--quick-bar-height) + var(--margin-plate-row) + var(--space-s) + env(safe-area-inset-bottom));
    }
  }

  @media (min-width: 40em) {
    .site-footer__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

  }

  @media (min-width: 48em) {
    .site-footer__legal {
      padding-right: calc(var(--margin-plate-width) + var(--space-m));
    }

    .site-footer__column--pages .site-footer__list {
      display: block;
      columns: 2;
      column-gap: var(--space-m);
    }

    .site-footer__column--pages .site-footer__list li {
      break-inside: avoid;
    }
  }

  @media (min-width: 64em) {
    .site-footer__legal {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
    }

    .site-footer__copyright {
      text-align: right;
    }

    .site-footer__credit {
      justify-content: flex-end;
    }

    .site-footer__grid {
      grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1.2fr);
    }

    .site-footer__list a {
      min-height: 1.875rem;
    }

  }
}