:root {
  --logo-lockup: url("../logo/lockup-on-light.svg");
  --logo-lockup-ratio: 230.1 / 56;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --logo-lockup: url("../logo/lockup-on-dark.svg"); }
}
:root[data-theme="dark"], .on-dusk { --logo-lockup: url("../logo/lockup-on-dark.svg"); }

.logo {
  display: block;
  height: 32px; 
  aspect-ratio: var(--logo-lockup-ratio);
  background: var(--logo-lockup) left center / contain no-repeat;
  print-color-adjust: exact;
}