.site-wordmark {
  --site-wordmark-step: 0.72em;

  display: block;
  overflow: hidden;
  padding: clamp(1rem, 2.5vw, 2rem) clamp(1rem, 3vw, 3rem)
    clamp(0.75rem, 1.5vw, 1.25rem);
  color: var(--forest);
  text-decoration: none;
}

.site-wordmark__name {
  width: min(100%, 1500px);
  min-height: calc(var(--site-wordmark-step) + 0.76em);
  position: relative;
  display: block;
  margin-inline: auto;
  font-size: clamp(2.65rem, 9.5vw, var(--content-heading-max));
  font-weight: 840;
  letter-spacing: -0.085em;
  line-height: 0.72;
  text-transform: uppercase;
}

.site-wordmark__line {
  position: absolute;
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
}

.site-wordmark__line--given {
  top: 0;
  left: 0;
}

.site-wordmark__line--surname {
  top: var(--site-wordmark-step);
  left: 2.35em;
}

.site-wordmark__lead,
.site-wordmark__trail {
  display: inline-block;
  will-change: transform;
}

.site-wordmark.is-enhanced:hover {
  color: var(--forest-light);
}

.site-wordmark:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.site-wordmark.is-playing .site-wordmark__line--given {
  animation: site-wordmark-given 2.45s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.site-wordmark.is-playing .site-wordmark__lead {
  animation: site-wordmark-lead 2.45s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.site-wordmark.is-playing .site-wordmark__trail {
  animation: site-wordmark-trail 2.45s cubic-bezier(0.65, 0, 0.35, 1) both;
}

@keyframes site-wordmark-given {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  36%,
  64% {
    transform: translate3d(0.05em, 0, 0);
  }
}

@keyframes site-wordmark-lead {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  36%,
  64% {
    transform: translate3d(-0.06em, 0, 0);
  }
}

@keyframes site-wordmark-trail {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  36%,
  64% {
    transform: translate3d(0, calc(-1 * var(--site-wordmark-step)), 0);
  }
}

@media (max-width: 520px) {
  .site-wordmark {
    padding-inline: 1rem;
  }

  .site-wordmark__name {
    font-size: clamp(2.35rem, 13vw, 3.5rem);
  }

  .site-wordmark__line--surname {
    right: auto;
    left: 29vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-wordmark__line--given,
  .site-wordmark__lead,
  .site-wordmark__trail {
    animation: none !important;
    transform: none !important;
  }
}

@media print {
  .site-wordmark__line--given,
  .site-wordmark__lead,
  .site-wordmark__trail {
    animation: none !important;
    transform: none !important;
  }
}