/* Kodza — External Link
   A link that leaves the site says so. On hover a line of ink runs under the words, from the
   first letter to the ↗, and when it gets there the arrow springs out towards the corner,
   its shaft stretching after it, as if the line had launched it. Screen readers hear
   "(opens in a new tab)". Pure CSS. Everything is tuned with the --kz-external-* variables. */
.kodza-external-link {
  --kz-external-text: currentColor;
  --kz-external-line: color-mix(in srgb, currentColor 26%, transparent);
  --kz-external-ink: currentColor;
  --kz-external-thickness: 0.06em;
  --kz-external-size: 0.6em;
  --kz-external-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --kz-external-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  color: var(--kz-external-text);
  text-decoration: none;
  /* Two lines under the words: a faint one, and the ink that runs over it */
  background:
    linear-gradient(var(--kz-external-ink), var(--kz-external-ink)) 0 100% / 0% var(--kz-external-thickness) no-repeat,
    linear-gradient(var(--kz-external-line), var(--kz-external-line)) 0 100% / 100% var(--kz-external-thickness) no-repeat;
  padding-bottom: 0.08em;
  transition: background-size 0.5s var(--kz-external-ease);
}

.kodza-external-link:hover,
.kodza-external-link:focus-visible {
  background-size: 100% var(--kz-external-thickness), 100% var(--kz-external-thickness);
}

.kodza-external-link__icon {
  display: inline-block;
  width: var(--kz-external-size);
  height: var(--kz-external-size);
  margin-left: 0.22em;
  vertical-align: 0.42em;
}

.kodza-external-link__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The head springs to the corner once the ink arrives; the shaft stretches after it */
.kodza-external-link__head {
  transition: transform 0.35s var(--kz-external-ease);
}

.kodza-external-link__shaft {
  transform-origin: 4.5px 11.5px;
  transition: transform 0.35s var(--kz-external-ease);
}

.kodza-external-link:hover .kodza-external-link__head,
.kodza-external-link:focus-visible .kodza-external-link__head {
  transform: translate(2.5px, -2.5px);
  transition: transform 0.55s var(--kz-external-spring) 0.32s;
}

.kodza-external-link:hover .kodza-external-link__shaft,
.kodza-external-link:focus-visible .kodza-external-link__shaft {
  transform: scale(1.38);
  transition: transform 0.55s var(--kz-external-spring) 0.32s;
}

.kodza-external-link__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.kodza-external-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .kodza-external-link,
  .kodza-external-link__head,
  .kodza-external-link__shaft {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}