.wordmark {
  --wordmark-line: 20px;
  --wordmark-drop: calc((var(--nav-block) - var(--wordmark-line)) / 2);

  position: fixed;
  z-index: 2;
  left: var(--chrome-inset);
  top: calc(var(--nav-top) + var(--wordmark-drop));
  color: var(--content-primary);
  text-decoration: none;
  font-family: var(--family-primary);
  font-weight: var(--font-weight-medium);
  font-size: 30px;
  letter-spacing: -1px;
  line-height: var(--wordmark-line);
  font-feature-settings: var(--wordmark-features);
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

.wordmark-swap {
  position: relative;
  display: inline-block;
  width: var(--tail-rest, auto);
  transition: width 420ms cubic-bezier(0.65, 0, 0.35, 1);
}

.wordmark.is-open .wordmark-swap { width: var(--tail-hover, auto); }

.wordmark-instant,
.wordmark-instant * { transition: none !important; }
.wordmark-tail { display: inline-flex; }
.wordmark-tail-hover { position: absolute; left: 0; top: 0; width: max-content; }

.wordmark-tail span {
  display: inline-block;
  white-space: pre;
  transition:
    opacity 240ms ease var(--d),
    transform 420ms cubic-bezier(0.33, 1.2, 0.6, 1) var(--d),
    filter 240ms ease var(--d);
}

.wordmark-tail-rest span { --d: calc(110ms + var(--i) * 28ms); }

.wordmark-tail-hover span {
  --d: calc(var(--i) * 28ms);
  opacity: 0;
  transform: translateY(0.62em);
  filter: blur(6px);
}

.wordmark.is-open .wordmark-tail-rest span {
  --d: calc(var(--i) * 28ms);
  opacity: 0;
  transform: translateY(-0.62em);
  filter: blur(6px);
}

.wordmark.is-open .wordmark-tail-hover span {
  --d: calc(90ms + var(--i) * 28ms);
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}

@media (max-width: 768px) {
  .wordmark {
    left: var(--padding-edge);
    right: auto;
    top: calc(var(--spacing-xlarge) + var(--wordmark-drop));
    translate: none;
  }

  .wordmark-swap,
  .wordmark.is-open .wordmark-swap {
    width: 0;
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark-swap { transition-duration: 1ms; }
  .wordmark-tail span,
  .wordmark.is-open .wordmark-tail-rest span,
  .wordmark.is-open .wordmark-tail-hover span {
    transform: none;
    filter: none;
    transition: opacity 200ms linear var(--d);
  }
}