/* Footer: link columns first, then the legal line, and the wordmark set large at the very end,
   like a signature at the foot of a document. */
.site-footer {
  margin-top: clamp(96px, 10vw, 144px);
  padding: 44px var(--inset) 0;
  overflow: hidden;
  background: var(--folio);
  color: var(--ink);
}
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 32px;
}
.site-footer__heading {
  margin-bottom: 18px;
  font: 650 var(--fs-ui)/1.2 var(--sans);
  letter-spacing: -0.02em;
}
.site-footer__col li + li { margin-top: 10px; }
.site-footer__col a {
  font: 500 var(--fs-ui)/1.3 var(--sans);
  letter-spacing: -0.02em;
  text-decoration: none;
}
.site-footer__col a:hover { text-decoration: underline; text-underline-offset: 3px; }

.site-footer__base {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.site-footer__legal {
  grid-column: 1 / span 8;
  max-width: 900px;
  color: var(--ink-2);
  font: 400 var(--fs-small)/1.5 var(--sans);
  letter-spacing: -0.01em;
}
.site-footer__copy { grid-column: 10 / -1; justify-self: end; font-size: var(--fs-ui); }

.site-footer__mark {
  display: block;
  width: fit-content;
  margin: 36px 0 0 -0.045em;
  font: 300 clamp(120px, 27vw, 440px)/.8 var(--sans);
  letter-spacing: -0.065em;
  text-decoration: none;
}
/* The wordmark is signed with the Seal: the ticked sign-off inside two nested rings, set on the
   baseline like a full stop. Colours are the Carbon, Seal and Sheet tokens, fixed in the image. */
.site-footer__mark::after {
  content: "";
  display: inline-block;
  width: .15em;
  height: .15em;
  margin-left: .08em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='.6' y='.6' width='38.8' height='38.8' fill='none' stroke='%2314181d' stroke-opacity='.35' stroke-width='1.2'/%3E%3Crect x='6' y='6' width='28' height='28' fill='none' stroke='%2314181d' stroke-opacity='.7' stroke-width='1.4'/%3E%3Crect x='11' y='11' width='18' height='18' fill='%23bc4416'/%3E%3Cpath d='M15 20.2l3.4 3.4 6.6-7.2' fill='none' stroke='%23fcfdfd' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 1099px) {
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__legal { grid-column: 1 / -1; }
  .site-footer__copy { grid-column: 1 / -1; justify-self: start; margin-top: 16px; }
}

@media (max-width: 340px) {
  .site-footer__cols { grid-template-columns: 1fr; }
}