/* Footer variants preserve contact content and the compact baseline. */
:root {
  --footer-logo-ratio: 560 / 174;
  --footer-logo-visible: .84;
}
:is([data-footer="wide"], [data-footer="cropped"]) footer {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: var(--gap-xl);
}
:is([data-footer="wide"], [data-footer="cropped"]) footer > span {
  display: block;
  grid-row: 1;
  grid-column: 1;
}
:is([data-footer="wide"], [data-footer="cropped"]) footer > a:last-child {
  grid-row: 1;
  grid-column: 2;
}
:is([data-footer="wide"], [data-footer="cropped"]) footer .brand {
  grid-row: 2;
  grid-column: 1 / -1;
  width: 100%;
}
[data-footer="cropped"] .contact {
  padding-bottom: var(--frame-bottom);
}
[data-footer="cropped"] footer .brand {
  width: calc(100% + var(--gutter) * 2);
  margin-inline: calc(var(--gutter) * -1);
  aspect-ratio: calc(var(--footer-logo-ratio) / var(--footer-logo-visible));
  overflow: hidden;
}
[data-footer="cropped"] footer .brand img {
  width: 100%;
  height: auto;
}
/* On wide screens the full-bleed wordmark follows the contact section gutter. */
@media (min-width: 1700px) {
  [data-footer="cropped"] .contact {
    --gutter: max(4.6vw, calc((100vw - 1560px) / 2));
  }
}