/* The huge footer: four link columns (label style headings, UI style links), 120 px of white, then the lockup at
   the content width in solid ink, cut at its baseline by the page edge from 768 up (crop A). The page sets the space
   above the footer (160 after the last section). */
.foot { padding-top: 0; container: foot / inline-size; }
.foot-cols { row-gap: var(--s8); }
.foot-col { grid-column: span 3; display: grid; row-gap: var(--s5); align-content: start; }
.foot-col .label { color: var(--ink-2); font-weight: 400; }
.foot-col ul { display: grid; row-gap: var(--s4); }
.foot-col li { display: flex; }
/* Footer links: no underline at rest, the underline on hover, the ring on focus; a 32 px target the layout does not
   see, as tall as the row pitch allows without overlapping the next link. */
.fl { position: relative; display: inline-block; font: 400 var(--ui)/1 var(--sans); color: var(--ink); text-decoration: none; text-box: trim-both cap alphabetic;
  text-decoration-thickness: 1px; text-underline-offset: 3px; }
button.fl { background: none; border: 0; padding: 0; cursor: pointer; }   /* a legal page not yet written (A.cta) */
.fl::before { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 26px; transform: translateY(-50%); }
.fl:hover, .fl.is-hover, [data-state="hover"] .fl { text-decoration-line: underline; }
.fl:active, .fl.is-active, [data-state="active"] .fl { text-decoration-line: underline; text-decoration-thickness: 1.5px; }
.fl:focus-visible, .fl.is-focus, [data-state="focus"] .fl { outline: 2px solid var(--ink); outline-offset: 4px; }
.foot-mark { margin-top: var(--s11); }
.foot-mark img { width: 100%; height: auto; }
.foot-crop { aspect-ratio: 935.76 / 112; overflow: hidden; }
/* The footer answers to its own width, as the nav does. */
@container foot (max-width: 767px) {
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-col { grid-column: auto; }
  .foot-mark { margin-top: var(--s10); padding-bottom: var(--s5); }
  .foot-crop { aspect-ratio: 935.76 / 146.97; }
}
/* Overscroll (footer.js): the whole lockup on the root at its own place and size, under the body's page, so only the
   part below the baseline shows, past the document's end. */
html.foot-over { background-image: var(--foot-img); background-repeat: no-repeat; background-size: var(--foot-w) auto; background-position: var(--foot-x) var(--foot-y); }