/* The site is authored dark. Declaring that stops mobile browsers from
   force-inverting an already-dark header, logo, and overlay text. */
:root { color-scheme: dark; }

nav,
footer,
.home-intro-video,
.finale,
.manifesto,
.hero {
  color-scheme: dark;
}

/* Light surfaces keep their own colors when a browser darkens by element. */
.section.alt,
.section.light,
.quote,
.light,
.architecture,
.banner-slide.whitepaper,
.auth-dialog,
.role,
.contact-card,
.principle,
.card {
  color-scheme: light;
}

.studio-caption,
.studio-caption span {
  color: #fff;
}

.whitepaper-caption,
.whitepaper-caption span {
  color: #17191f;
  color-scheme: light;
}

picture.logo-swap {
  display: block;
  line-height: 0;
}

.brand picture.logo-swap,
.nav .brand picture.logo-swap,
.about-nav .brand picture.logo-swap {
  width: 148px;
}

.brand picture.logo-swap img,
.nav .brand picture.logo-swap img,
.about-nav .brand picture.logo-swap img {
  width: 100%;
  height: auto;
}

@media (max-width: 800px) {
  .brand picture.logo-swap,
  .nav .brand picture.logo-swap,
  .about-nav .brand picture.logo-swap,
  html body nav .brand picture.logo-swap {
    width: 132px;
  }
}

.footer-brand picture.logo-swap,
.final-mark picture.logo-swap {
  display: inline-block;
}

/* prefers-color-scheme selects the light file. Do not invert it again.
   Forced dark mode often leaves prefers-color-scheme alone; color-scheme
   above is what keeps the CSS-inverted dark file visible in that case. */
@media (prefers-color-scheme: dark) {
  picture.logo-swap img {
    filter: none !important;
  }

  .brand picture.logo-swap img,
  nav .brand picture.logo-swap img,
  .nav .brand picture.logo-swap img,
  .about-nav .brand picture.logo-swap img {
    filter: drop-shadow(0 0 20px rgba(140, 178, 255, .25)) !important;
  }
}