/* The wordmark itself is the original imagegen PNG; these rules only place it.
   Optical viewport: x=20, y=124, width=2126, height=447 in a 2172x724 source. */
.brand { align-items: center; gap: 0; line-height: 1; min-width: 0; }
.brand-art {
  display: none; position: relative; width: 286px; max-width: 100%;
  aspect-ratio: 2126 / 447; overflow: hidden; flex: none;
}
.brand-wordmark {
  display: block; position: absolute; width: 102.1636877%; max-width: none;
  height: auto; left: -0.9407338%; top: -27.7404922%;
}
.brand-fallback { display: inline-flex; align-items: baseline; gap: 9px; white-space: nowrap; }
.brand.has-wordmark .brand-art { display: block; }
.brand.has-wordmark .brand-fallback { display: none; }
.brand-fallback .brand-main { font-size: 27px; font-weight: 700; }
.brand-fallback .brand-sub { font-size: 13px; font-weight: 700; }
.site-footer .brand-art { width: 258px; }
@media (max-width: 700px) {
  .site-header .brand-art { width: min(244px, calc(100vw - 96px)); }
  .brand-fallback { gap: 6px; }
  .brand-fallback .brand-main { font-size: 23px; }
  .brand-fallback .brand-sub { font-size: 11px; }
}
@media (max-width: 360px) {
  .brand-fallback .brand-main { font-size: 20px; }
  .brand-fallback .brand-sub { font-size: 9px; }
}
@media (forced-colors: active) {
  .brand.has-wordmark .brand-art { display: none; }
  .brand.has-wordmark .brand-fallback { display: inline-flex; }
}