.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.brand-lockup > img {
  display: block;
  flex: none;
}

.brand-lockup > .brand-wordmark {
  display: block;
  flex: none;
  width: auto;
  height: 1.1em;
  /* Center the lettering against the icon above the g's descender. */
  transform: translateY(.06em);
}

@media (max-width: 420px) {
  .brand-lockup > img {
    max-width: 29px;
    height: auto;
  }
}

@media (max-width: 360px) {
  .site-header nav {
    gap: 14px;
  }
}