/* Transparent brand artwork chosen for the surface behind it. */
.brand-visual {
  --logo-on-light: url('/assets/images/brand-logo-on-light.webp');
  --logo-on-dark: url('/assets/images/brand-logo-on-dark.webp');
  background-image: var(--logo-on-light);
}

:root[data-theme=dark] .brand-visual {
  background-image: var(--logo-on-dark);
}

/* The homepage header sits over a darkened photograph in both themes. */
.page-home:not(.menu-open) .site-header:not(.scrolled) .brand-visual {
  background-image: var(--logo-on-dark);
}

/* Administration follows the operating system's colour scheme. */
@media (prefers-color-scheme: dark) {
  .auth-page .brand-visual,
  .admin-page .brand-visual {
    background-image: var(--logo-on-dark);
  }
}

/* Without JavaScript, the narrow homepage navigation has a solid surface. */
@media (max-width: 1000px) {
  html:not(.js) .page-home .site-header .brand-visual {
    background-image: var(--logo-on-light);
  }
}