/* Native artwork from the Sinaya Welcome Booklet, arranged for the top bar. */
.site-header .brand-lockup {
  display: flex;
  align-items: center;
  flex: none;
  gap: 14px;
  min-height: 50px;
  color: inherit;
  line-height: 1;
}

.brand-emblem,
.brand-lettering {
  display: block;
  flex: none;
  background: currentColor;
  -webkit-mask-image: url("assets/brand/sinaya-original-1750.png");
  mask-image: url("assets/brand/sinaya-original-1750.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Window: x 436, y 0, width 861, height 801 in the 1750 × 1417 original. */
.brand-emblem {
  width: 54px;
  aspect-ratio: 861 / 801;
  -webkit-mask-size: 203.252033% auto;
  mask-size: 203.252033% auto;
  -webkit-mask-position: 49.0438695% top;
  mask-position: 49.0438695% top;
}

/* The two original lettering lines occupy the bottom 419 pixels. */
.brand-lettering {
  width: 198px;
  aspect-ratio: 1750 / 419;
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
  -webkit-mask-position: left bottom;
  mask-position: left bottom;
}

.site-header .brand-lockup:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 7px;
}

@media (max-width: 1100px) {
  .site-header .brand-lockup { gap: 12px; min-height: 44px; }
  .brand-emblem { width: 46px; }
  .brand-lettering { width: 180px; }
}

@media (max-width: 620px) {
  .brand-emblem { width: 44px; }
  .brand-lettering { width: 164px; }
}