/* Giant Entity: the footer (look-v3 section 13). Porcelain on every page: a hairline across the
   content, the one line with the seated body, four link groups, the small print, then the
   wordmark at full bleed in carbon, the width of its I clear on every side. */

.site-footer { margin-top: var(--sp-l); background: var(--porcelain); color: var(--carbon); }
.site-footer__meta {
  /* the hairline spans the content, not the margins */
  background: linear-gradient(var(--line), var(--line)) top center / calc(100% - 2 * var(--margin)) 1px no-repeat;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-l);
  padding-block: var(--sp-xl) var(--sp-l);
  font-size: var(--fs-small);
  line-height: 1.45;
}
.site-footer__about { grid-column: 1 / span 4; display: grid; gap: var(--sp-m); align-content: start; }
.site-footer__about > p { max-width: 36ch; font-size: var(--fs-body); line-height: 1.5; color: var(--fg); }
/* the seated body: every piece in its material, 160 px tall */
.site-footer__body { height: 10rem; width: auto; max-width: 100%; }

.site-footer__nav { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-m) var(--gutter); align-content: start; }
.site-footer__nav > * { min-width: 0; }
.site-footer__nav li { overflow-wrap: anywhere; }
/* a heading that is a link and one that is not take the same 24 px row, so the four columns align */
.site-footer__heading { display: flex; align-items: center; min-height: 1.5rem; font-weight: 500; margin-bottom: var(--sp-3xs); color: var(--fg); }
.site-footer__nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
/* the links are padded to a 24 px target at every width (WCAG 2.2 target size) */
.site-footer__nav li { min-height: 1.5rem; display: flex; align-items: center; color: var(--fg-muted); }
.site-footer__nav a,
.site-footer__small a {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  color: var(--fg);
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--dur-link) var(--ease-out);
}
.site-footer__nav a:hover,
.site-footer__small a:hover,
.site-footer a[aria-current="page"] { text-decoration-color: currentColor; }
.site-footer__heading a { min-height: 1.5rem; }
.site-footer__small { grid-column: 5 / -1; color: var(--fg-muted); font-variant-numeric: tabular-nums; }

/* The wordmark at full bleed, the one place it runs past the grid. Padding in percent resolves
   against the width, so the clear space is the I's width (229 of 7931 units) on every side. */
.site-footer__mark { padding: calc(100% * 229 / 8389); color: var(--carbon); }
.site-footer__mark > svg { width: 100%; height: auto; }
.site-footer__mark svg [fill]:not([fill="none"]) { fill: currentColor; }

@media (max-width: 1099px) {
  .site-footer__about { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .site-footer__nav { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__small { grid-column: 1 / -1; }
}
@media (max-width: 719px) {
  .site-footer__about { grid-template-columns: 1fr; }
  .site-footer__body { height: 7.5rem; }
  .site-footer__nav li,
  .site-footer__nav a,
  .site-footer__heading,
  .site-footer__heading a { min-height: 2.25rem; }
}
@media (forced-colors: active) {
  .site-footer__mark svg [fill]:not([fill="none"]) { fill: CanvasText; }
}