.wordmark {
  display: flex;
  align-items: center;
  min-height: var(--size-tap-target);
  font-size: var(--font-size-wordmark);
}

.wordmark svg {
  width: auto;
  height: calc(1em * 16 / 21);
}

.wordmark {
  --selection-color: var(--color-accent-on-dark);
  --selection-handle-fill: var(--color-ink);
  position: relative;
}

.wordmark > .selection {
  inset: auto calc(-1 * var(--space-8));
  top: 50%;
  height: calc(1em + 2 * var(--space-4));
  translate: 0 -50%;
}

.wordmark:has(> .selection):focus-visible {
  outline-color: transparent;
}