/* =========================================================================
   Component — site footer
   -------------------------------------------------------------------------
   THE PAGE ENDS HERE, AND IT USED TO FADE (DESIGN_TOKENS.md §9.7)
   -------------------------------------------------------------------------
   This was `--nav-bg` — THE SAME TOKEN AS THE PORTAL SIDEBAR — so a portal
   page was one plane between two identical dark bands, and the owner's word
   for it was the accurate one: the navigation *flowed into* the footer. Two
   large areas in one saturated colour are not a frame, they are a repeat, and
   a reader cannot tell which of them is the chrome.

   It carries no fill at all now. The page ends the way the status report ends
   it: a rule across the column, then the type drops a weight and a size. That
   is the whole device, and it is what "the page has to end, not fade" means —
   an ending is a boundary, not a second colour.

   THE NAVIGATION AND THE FOOTER SHARE NO BACKGROUND TOKEN. The header and the
   sidebar are `--doc-panel`; this is the page ground it sits on, named by
   nothing because it declares nothing. That is checkable by grep, which is why
   it is written as an absence rather than as a third value.

   The ink is themed, so `.on-brand` is gone from every mount point — its whole
   job was to pin light-theme values on a surface that stayed dark, and this
   surface does not exist any more. Measured on `--doc-bg`: the quiet ink
   `--doc-ink-soft` reads 5.61:1 in light and 7.45:1 in dark, and a link in
   `--sd-secondary` 4.89:1 and 7.95:1. All four clear AA for body text.
   ========================================================================= */

.site-footer {
  border-top: 1px solid var(--doc-line);
  color: var(--doc-ink-soft);
}

/* THERE IS NO `.site-footer a { color: … }` RULE, and there was one for a
   minute. It named `--sd-secondary`, which is exactly what `base.css` already
   gives every anchor — an inert declaration that looks like a decision, which
   is audit rule `D-10` and [`L-FE-49`]. The hover IS load-bearing: base.css
   underlines on hover and changes no colour, and the footer is the one place a
   reader meets twenty links at once.
   Measured on `--doc-bg`: 9.80:1 in light, 10.08:1 in dark. */
.site-footer a:hover {
  color: var(--sd-secondary-hover);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 32px 24px;
  padding: 40px 0 28px;
}

.footer-brand img {
  height: 32px;
  width: auto;
}

.footer-brand p {
  margin: 14px 0 0;
  max-width: 34ch;
  font-size: 13.5px;
  color: var(--doc-ink-soft);
}

/* The quiet label of §9.6's third weight, at the report's own size. It was
   12 px at weight 700: a column heading in the same voice as the page's own
   headings, four times over, above the links it labels. */
.footer-col h2 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--doc-ink-soft);
}

.footer-col a {
  display: block;
  padding: 5px 0;
  font-size: 14px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 0 28px;
  /* `--doc-line`, and the quieter `--sd-divider` is what §9.2's grammar asks
     for here — this separates two parts of one footer, where the rule above
     separates the footer from the page.
   *
   * THE PAIR IS STATED AGAINST `--doc-panel`, AND THIS RULE IS NOT ON ONE.
   * §9.2's figures (1.35:1 and 1.21:1 in light) are measured against the
   * surface. The footer carries no fill, so both of its rules land on
   * `--doc-bg`, and there they measure **1.12:1** and **1.01:1**. The quieter
   * one is not faint on the page ground; it is not there. Written as
   * `--sd-divider` first, and the screenshot showed nothing at all between the
   * link columns and the copyright line.
   *
   * So on the page ground there is one usable hairline, and both rules use it.
   * That is the ground's property, not a fault in the pair. */
  border-top: 1px solid var(--doc-line);
  font-size: 12.5px;
  color: var(--doc-ink-soft);
}

@media (max-width: 760px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 420px) {
  .footer-top {
    grid-template-columns: 1fr;
  }
}