/* Official artwork is displayed through two CSS viewports; the source PNG is unchanged. */
.brand-lockup {
  --brand-height: 48px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  color: var(--ink);
  text-align: left;
  line-height: 1;
  white-space: nowrap;
}
.brand-art {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--brand-height) * .18);
  flex-shrink: 0;
  mix-blend-mode: multiply;
}
.brand-art-symbol,
.brand-art-name { display: block; position: relative; overflow: hidden; flex-shrink: 0; }
.brand-art-symbol { width: calc(var(--brand-height) * 1.09); height: var(--brand-height); }
.brand-art-name { width: calc(var(--brand-height) * 1.94); height: calc(var(--brand-height) * .565); }
.brand-art img {
  position: absolute;
  display: block;
  width: calc(var(--brand-height) * 3.32917);
  height: calc(var(--brand-height) * 1.10833);
  max-width: none;
}
.brand-art-symbol img { left: calc(var(--brand-height) * -.05833); top: calc(var(--brand-height) * -.05833); }
.brand-art-name img { left: calc(var(--brand-height) * -1.30417); top: calc(var(--brand-height) * -.14583); }
.brand-separator { font-size: 22px; color: #8c9d94; font-weight: 400; }
.brand-tagline { font: 500 18px/1.35 var(--font); letter-spacing: .05em; }
/* An opaque header prevents the RGB artwork from revealing a white patch on scroll. */
.site-header { background: #fff; }
.footer-brand .brand-lockup { --brand-height: 54px; }
.system-brand { --brand-height: 40px; margin-bottom: 24px; gap: 8px; }
.system-brand .brand-tagline { font-size: 16px; }
.framework-brand { --brand-height: 30px; gap: 6px; margin-bottom: 18px; padding: 9px 12px; border-radius: 10px; background: var(--cream); color: var(--ink); }
.framework-brand .brand-tagline { font-size: 13px; }
.brand-stacked { --brand-height: 78px; flex-direction: column; gap: 24px; }
.brand-stacked .brand-separator { display: none; }
.brand-stacked .brand-tagline { font-size: 24px; }
@media (max-width: 680px) {
  .site-header .brand-lockup { --brand-height: 36px; gap: 7px; }
  .site-header .brand-tagline { font-size: 14px; letter-spacing: .015em; }
  .site-header .brand-separator { font-size: 18px; }
  .footer-brand .brand-lockup { --brand-height: 38px; gap: 8px; }
  .footer-brand .brand-tagline { font-size: 15px; }
  .system-brand { --brand-height: 34px; gap: 7px; }
  .system-brand .brand-tagline { font-size: 14px; }
  .brand-stacked { --brand-height: 64px; }
  .brand-stacked .brand-tagline { font-size: 22px; }
}
@media (max-width: 370px) {
  .site-header .brand-lockup { --brand-height: 33px; gap: 5px; }
  .site-header .brand-tagline { font-size: 13px; }
  .system-brand { --brand-height: 30px; gap: 5px; }
  .system-brand .brand-tagline { font-size: 13px; }
}