/* Both images share a grid cell to keep the header stable when the logo changes. */
.site-header .spi-header-logo { display: inline-grid; }
.spi-header-logo .logo-img {
  grid-area: 1 / 1;
  align-self: center;
  max-width: 240px;
  object-fit: contain;
  object-position: left center;
  transition: opacity .25s ease;
}
.site-header .spi-logo-scrolled { opacity: 0; visibility: hidden; }
.site-header.is-scrolled .spi-logo-primary { opacity: 0; visibility: hidden; }
.site-header.is-scrolled .spi-logo-scrolled { opacity: 1; visibility: visible; }
@media (max-width: 430px) {
  .spi-header-logo .logo-img { max-width: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .spi-header-logo .logo-img { transition: none; }
}