/* Keep the official outlined wordmark; replace its small master symbol with the supplied pixel cut. */
.brand-lockup { --brand-size: 24px; position: relative; display: inline-block; flex: none; width: calc(var(--brand-size) * 6.7799); height: var(--brand-size); vertical-align: middle; }
.brand-lockup .brand-outlined { display: block; width: 100%; height: 100%; max-width: none; clip-path: inset(0 0 0 var(--brand-size)); }
.brand-lockup .brand-symbol { position: absolute; inset: 0 auto auto 0; width: var(--brand-size); height: var(--brand-size); }
.brand-lockup .brand-symbol img { display: block; width: 100%; height: 100%; max-width: none; }
@media (max-width: 360px) { .brand-lockup--compact { --brand-size: 16px; } }
/* Round only brand-bearing shells so a 1px split stays on the horizontal pixel grid. */
@supports (width: round(down, 100%, 2px)) {
  .site-header .header-inner, .site-footer .site-shell { width: round(down, min(100% - 48px, 1120px), 2px); }
  @media (max-width: 1150px) { .site-header .header-inner, .site-footer .site-shell { width: round(down, 90%, 2px); } }
  @media (max-width: 900px) { .site-header .header-inner, .site-footer .site-shell { width: calc(100% - 64px); } }
  @media (max-width: 600px) { .site-header .header-inner, .site-footer .site-shell { width: calc(100% - 40px); } }
}
@media (max-width: 900px) { .header-inner .wordmark { margin-top: 27px; } }
@media (max-width: 600px) { .header-inner .wordmark { margin-top: 26px; } }
@media (max-width: 360px) { .header-inner .wordmark { margin-top: 30px; } }