/* The Slate wordmark. Drawn as an SVG and used as a mask, so it takes the current ink colour
   in light and dark. The link text stays in the DOM for screen readers. */
.brand {
  display: inline-block;
  flex: none;
  width: 101px;
  height: 24px;
  font-size: 0;
  line-height: 0;
  color: var(--ink);
  background-color: currentColor;
  -webkit-mask: url("/img/slate-wordmark.svg") left center / contain no-repeat;
  mask: url("/img/slate-wordmark.svg") left center / contain no-repeat;
  overflow: hidden;
  text-indent: -9999px;
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}
.brand:hover { opacity: .72; }
.brand:active { transform: scale(.97); }
.brand:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .brand { transition: none; } }