/* Keep the avatar prominent at every header size. */
.site-header .brand {
  gap: clamp(10px, .9vw, 16px);
  min-width: 0;
}

.site-header .brand-mark {
  width: clamp(50px, 3.8vw, 80px);
  height: clamp(50px, 3.8vw, 80px);
}

/* Final slots hold the word's width while glyphs roll out of the avatar. */
.brand.brand-roll-ready {
  isolation: isolate;
  overflow: visible;
}

.brand.brand-roll-ready .brand-mark {
  position: relative;
  z-index: 2;
}

.brand-roll-word {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0;
  overflow: visible;
}

.brand-roll-letter {
  display: inline-block;
  flex: none;
  position: relative;
  z-index: 1;
  letter-spacing: .16em;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

@media (max-width: 900px) {
  .site-header .brand-mark {
    width: clamp(44px, 5.6vw, 50px);
    height: clamp(44px, 5.6vw, 50px);
  }
}

@media (max-width: 359px) {
  .site-header .brand {
    gap: 8px;
    font-size: 15px;
  }

  .site-header .brand-mark {
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-roll-letter {
    transform: none !important;
    opacity: 1 !important;
    will-change: auto;
  }
}