@layer blocks {
  /* The footer is no longer a coloured slab. It sits on the same paper as the
     rest of the sheet, separated by a rule, so the dot grid runs unbroken to
     the bottom of the page. */
  .site-footer {
    padding-block: 1.875rem; /* spec .foot-in 30px */
    background: color-mix(in srgb, var(--color-bg) 70%, transparent);
    border-top: 1px var(--border-style) var(--color-border);

    font-size: 0.88rem;
    color: var(--color-text-faint);

    --cluster-space: 0.625rem 1.625rem; /* spec .foot-in gap 10px 26px */

    --color-link: var(--color-text-faint);
    --color-link-hover: var(--color-text);
    --link-decoration: none;
  }

  /* Spec .foot-in is one flex: logo, each link, then .made. display: contents
     lets the lis participate in that cluster without losing the list. */
  .site-footer [role="list"] {
    display: contents;
  }

  .site-footer li {
    margin-inline-start: 0;
    list-style: none;
  }

  .site-footer .made {
    margin-inline-start: auto;
  }

  .site-footer .brand {
    --color-link: var(--color-text);
    opacity: 0.85;
  }

  .site-footer .brand:hover {
    opacity: 1;
  }

  /* Spec .foot-logo svg is 22px. .brand inherits the wordmark size, and the
     global classless svg rule sizes to 1lh of that (~32px). */
  .site-footer .brand svg {
    width: 1.375rem;
    height: 1.375rem;
  }

  .site-footer .heart {
    color: var(--color-accent-strong);
    font-size: 1.8em;
    line-height: 1;
    font-variant-emoji: text;
    vertical-align: -0.1em;
  }
}