.wordmark {
  gap: 12px;
  letter-spacing: -0.035em;
}

.wordmark > span:last-child {
  position: relative;
}

.wordmark > span:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms ease;
}

.wordmark:hover > span:last-child::after {
  transform: scaleX(1);
}

.mark {
  position: relative;
  isolation: isolate;
  width: 41px;
  height: 41px;
  overflow: hidden;
  border-radius: 50% 44% 50% 42%;
  transform: rotate(-6deg);
  box-shadow: inset 0 0 0 1px rgba(245, 241, 232, 0.22);
  transition: transform 300ms ease;
}

.mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 25px;
  height: 25px;
  right: -8px;
  top: -7px;
  background: var(--yellow);
  border-radius: 50%;
}

.mark::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 12px;
  height: 12px;
  left: 3px;
  bottom: 2px;
  background: var(--coral);
  border: 2px solid var(--ink);
  border-radius: 50%;
}

.wordmark:hover .mark {
  transform: rotate(0deg) scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .mark,
  .wordmark > span:last-child::after {
    transition: none;
  }
}