@font-face {
  font-family: "Manrope";
  src: url("./vendor/fonts/manrope-variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

.wordmark > span,
.brand > span {
  position: relative;
  display: inline-block;
  padding-bottom: .4em;
  font-family: "Manrope", Arial, Helvetica, sans-serif;
  font-size: 1.08em;
  font-weight: 800;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: .075em;
  white-space: nowrap;
}

.wordmark > span::after,
.brand > span::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: .34em;
  background: currentColor;
  opacity: .85;
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14'%3E%3Cpath d='M0 7C16 1 32 1 48 7S80 13 96 7S128 1 144 7S176 13 192 7S224 1 240 7' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask: var(--wave) center / 100% 100% no-repeat;
  mask: var(--wave) center / 100% 100% no-repeat;
  pointer-events: none;
}