/* The animated pieces and the final mark share one source image, so the
   arriving Link joins the exact same letterforms at the end of the flight. */
.site-header {
  --lockup-width: 190px;
  justify-content: space-between;
  gap: 12px;
}

.brand-dock {
  position: relative;
  z-index: 1;
  display: block;
  flex: 0 0 var(--lockup-width);
  width: var(--lockup-width);
  height: 44px;
  pointer-events: auto;
  color: var(--gold-on-dark);
}

.brand-dock:focus-visible {
  outline: 2px solid var(--gold-on-dark);
  outline-offset: 3px;
  border-radius: 6px;
}

.brand-final {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  transform: translateY(-50%);
}

.brand-globe,
.brand-worlds,
.brand-two {
  display: none;
  position: absolute;
  top: 50%;
  left: 0;
  pointer-events: none;
}

.brand-globe {
  width: 36px;
  height: 36px;
  transform-origin: center;
}

.brand-worlds,
.brand-two {
  height: calc(var(--lockup-width) * 341 / 2070);
  overflow: hidden;
  transform: translateY(-50%);
}

.brand-worlds {
  width: calc(var(--lockup-width) * 1165 / 2070);
}

.brand-two {
  width: calc(var(--lockup-width) * 195 / 2070);
  left: calc(var(--lockup-width) * 710 / 2070);
}

.brand-worlds img,
.brand-two img {
  display: block;
  position: absolute;
  width: var(--lockup-width);
  height: auto;
  max-width: none;
}

.brand-worlds img {
  left: calc(var(--lockup-width) * -905 / 2070);
}

.brand-two img {
  left: calc(var(--lockup-width) * -710 / 2070);
}

.brand-flight {
  display: none;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  transform-origin: left top;
  will-change: transform, opacity;
}

.brand-flight img {
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
}

.has-brand-motion .brand-globe,
.has-brand-motion .brand-worlds,
.has-brand-motion .brand-two,
.has-brand-motion .brand-flight {
  display: block;
}

@media (max-width: 600px) {
  .site-header {
    --lockup-width: clamp(96px, 30vw, 180px);
    padding-inline: 14px;
    gap: 8px;
  }

  .brand-globe {
    width: 28px;
    height: 28px;
  }

  .site-header__menu {
    gap: 6px;
  }

  .site-header__menu-link {
    padding-inline: 0;
    margin-inline: 0;
    font-size: 11px;
  }
}