@layer styles {
  .site-footer {
    margin-top: var(--space--extra-large);
    padding: var(--space--medium) var(--page-side-padding);
    border-top: 1px solid var(--color-rule);
  }

  /* Mobile first: one centred column. The footer is short enough that stacking
     reads better than squeezing columns onto a narrow screen. */
  .site-footer__inner {
    display: grid;
    justify-items: center;
    gap: var(--space);
    text-align: center;
  }

  .site-footer__brand {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
  }

  .site-footer__logotype {
    display: block;
    width: clamp(11rem, 40vw, 15rem);
    height: auto;
  }

  .site-footer__tagline {
    color: var(--color-wine);
  }

  .site-footer__columns {
    display: grid;
    gap: var(--space);
  }

  .site-footer__heading {
    margin-bottom: 0.25rem;
    font-family: var(--font--heading);
    font-size: var(--font-size--small);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .social-link {
    display: inline-flex;
    padding: 0.5rem;
    margin: -0.5rem;
    border-radius: var(--radius);
    color: var(--color-wine);
    text-decoration: none;
  }

  .social-link:hover {
    color: var(--color-wine-deep);
  }

  .social-link:focus-visible {
    outline: 2px solid var(--color-wine);
    outline-offset: 2px;
  }

  .social-link__icon {
    display: block;
  }

  .site-footer__legal {
    font-size: var(--font-size--small);
    opacity: var(--muted-opacity);
  }

  .site-footer__credit {
    margin-bottom: 0.25rem;
  }

  @media (min-width: 48em) {
    /* Brand on the left, details on the right, legal line beneath both. */
    .site-footer__inner {
      grid-template-columns: auto 1fr;
      align-items: start;
      justify-items: start;
      gap: var(--space--medium);
      text-align: left;
    }

    /* The tagline stays centred under the mark even when the column does not. */
    .site-footer__brand {
      justify-items: center;
    }

    .site-footer__columns {
      grid-auto-flow: column;
      gap: var(--space--large);
      justify-self: end;
    }

    /* The one full-width row, so it reads as a baseline under the two columns
       rather than as a third thing in the left one. */
    .site-footer__legal {
      grid-column: 1 / -1;
      padding-top: var(--space--small);
      border-top: 1px solid var(--color-rule);
      width: 100%;
      text-align: center;
    }
  }
}