/* The supplied lockup is one unchanged image, not separately sized pieces.
   Its wordmark center is y=276 in a 1239px-wide source canvas. Only the
   wordmark row participates in layout; the original needle overhangs it. */
:root {
  --header-brand-width: 236px;
  --footer-brand-width: 300px;
}

.brand.brand--original {
  --brand-width: var(--header-brand-width);
  position: relative;
  z-index: 2;
  display: block;
  flex: 0 0 auto;
  inline-size: var(--brand-width);
  block-size: 44px;
  gap: 0;
  overflow: visible;
}

.site-header .brand.brand--original img.brand-art,
.site-footer .brand.brand--original img.brand-art {
  position: absolute;
  inset-inline-start: 0;
  top: calc(50% - var(--brand-width) * 276 / 1239);
  inline-size: 100%;
  block-size: auto;
  max-inline-size: none;
  max-width: none;
  object-fit: contain;
  transform: none;
  filter: none;
  pointer-events: none;
}

.site-header,
.site-footer,
.footer-top {
  overflow: visible;
}

.site-footer .brand.brand--original {
  --brand-width: var(--footer-brand-width);
}

/* The tail can cross the row divider. Text starts beyond its horizontal lane. */
.site-footer .footer-bottom {
  padding-inline-start: calc(var(--footer-brand-width) * 232 / 1239);
}

.site-footer .footer-bottom nav {
  flex-wrap: wrap;
  column-gap: clamp(12px, 2vw, 25px);
  row-gap: 0;
}

@media (max-width: 600px) {
  :root {
    --header-brand-width: clamp(184px, 54.36vw, 212px);
    --footer-brand-width: 248px;
  }

  .footer-top > p {
    padding-inline-start: calc(var(--footer-brand-width) * 232 / 1239);
  }
}