@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. Like the header: a one-cell row with a quarter
     cell above and below, and a shadow hairline that adds no height. */
  .site-footer {
    padding-block: var(--space-quarter);
    background: var(--color-bg-glass);
    box-shadow: var(--shadow-hairline-above);

    font-size: var(--text-sm);

    --cluster-space: 0 var(--space-half); /* spec .foot-in gap 10px 26px; rows are a cell apart */

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

  .site-footer > .repel {
    min-block-size: var(--space-cell);
  }

  /* Logo and links share one cluster, with the tagline repelled to the far end.
     display: contents lets the lis join that cluster without losing the list. */
  .site-footer [role="list"] {
    display: contents;
  }

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

  /* Text links are a cell tall and at least a cell wide, as in the margin
     nav, so the link itself is the tap target and wrapped rows sit on the
     dot pitch. */
  .site-footer li a {
    display: inline-block;
    min-inline-size: var(--size-target);
    text-align: center;
    line-height: var(--grid-cell);
  }

  .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: var(--space-half);
    height: var(--space-half);
  }

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