/* Real source artwork retains its proportions; captions keep every brand identifiable. */
.sp-brand-mark { display: block; width: 108px; height: 32px; object-fit: contain; object-position: left center; flex-shrink: 0; }
.brand-strip .brand-word { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; flex-shrink: 0; max-width: none; }
.brand-strip .brand-word .sp-brand-mark { width: 104px; height: 36px; object-position: center; }
.brand-index-grid .sp-index-brand-name { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 9px; min-width: 0; }
.brand-index-grid > a:has(.sp-brand-mark) { min-height: 86px; }
.directory-grid .sp-directory-name .sp-brand-mark { width: min(160px, 100%); height: 36px; }
.sp-home-brand-strip .brand-word { flex: 0 0 auto; justify-content: center; }
.sp-home-brand-strip .brand-word .sp-brand-mark { width: 104px; height: 36px; object-position: center; }
.sp-index-brand-name, .sp-directory-name { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; min-width: 0; }
.sp-brand-art { display: flex; align-items: center; width: min(150px, 100%); height: 40px; }
.sp-brand-art .sp-brand-mark { max-width: 100%; }
.sp-home-brand-grid > a { min-height: 86px; }
.sp-home-brand-grid .sp-index-brand-name { flex: 1; }
.sp-home-brand-grid .sp-brand-mark { width: min(110px, 100%); height: 29px; }
.sp-brand-caption { display: block; font-size: 10px; font-weight: 400; letter-spacing: 0; line-height: 1.4; }
.sp-directory-terms > a { min-height: 98px; }
.sp-directory-name .sp-brand-mark { width: min(150px, 100%); height: 35px; }
.sp-directory-name .sp-brand-caption { font-size: 11px; }
.sp-archive-brand-mark { margin-bottom: 26px; }
.sp-archive-brand-mark .sp-brand-mark { width: 148px; height: 48px; }
.sp-brand-mark-light { filter: invert(1); }
.sp-brand-mark-opaque { mix-blend-mode: multiply; }
html[data-theme=dark] .sp-brand-mark-invert { filter: invert(1); }
html[data-theme=dark] .sp-brand-mark-light { filter: none; }
html[data-theme=dark] .sp-brand-mark-opaque { mix-blend-mode: screen; }
html[data-theme=dark] .sp-brand-mark-color { background: #f6f3ee; padding: 5px; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme=light]) .sp-brand-mark-invert { filter: invert(1); }
  html:not([data-theme=light]) .sp-brand-mark-light { filter: none; }
  html:not([data-theme=light]) .sp-brand-mark-opaque { mix-blend-mode: screen; }
  html:not([data-theme=light]) .sp-brand-mark-color { background: #f6f3ee; padding: 5px; }
}
@media (max-width: 640px) {
  .sp-home-brand-strip { gap: 30px; }
  .sp-home-brand-strip .brand-word .sp-brand-mark { width: 90px; height: 32px; }
  .sp-home-brand-grid > a { min-height: 86px; }
  .sp-home-brand-grid .sp-brand-mark { width: min(94px, 100%); height: 27px; }
  .sp-home-brand-grid .sp-brand-caption { font-size: 9px; }
  .sp-directory-terms > a { min-height: 92px; }
  .sp-directory-name .sp-brand-mark { width: min(124px, 100%); height: 32px; }
  .sp-directory-name .sp-brand-caption { font-size: 10px; }
}
/* The official On icon includes clear space inside its square SVG. Keep that file intact. */
.sp-brand-art .sp-brand-mark-on { width: 54px; height: 54px; }
.sp-home-brand-grid .sp-brand-art .sp-brand-mark-on { width: 54px; height: 54px; }