/* =========================================================================
   Wordmark: HAAVN BLACK
   The SVG is used as a mask, so the fill is set here rather than taken from
   the artwork. Vector, so it stays sharp at any size.
   ========================================================================= */

.wordmark {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: clamp(9.5rem, 19.5vw, 19.25rem);
}

/* Extend the tap area without changing the visual size */
.wordmark::before {
  content: "";
  position: absolute;
  inset: -12px -8px;
}

.wordmark__mark {
  display: block;
  width: 100%;
  aspect-ratio: 2854.35 / 232.43;   /* the artwork's own viewBox */
  background: #f6fbfe;
  -webkit-mask: url("/assets/brand/hvn-black-wordmark.svg") left center / contain no-repeat;
  mask: url("/assets/brand/hvn-black-wordmark.svg") left center / contain no-repeat;
}