/* Transparent brand, gently adapting to the surface underneath it. */
#navigation .nav__brand { color: #fff; transition: color .4s ease; }
#navigation[data-brand-tone="dark"] .nav__brand { color: #070a0b; }
#navigation .brand-logo-stack { position: relative; display: block; width: 36px; height: 40px; flex: none; }
#navigation .brand-logo-stack .actual-brand-logo { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .4s ease; }
#navigation .brand-logo-dark { opacity: 0; }
#navigation[data-brand-tone="dark"] .brand-logo-light { opacity: 0; }
#navigation[data-brand-tone="dark"] .brand-logo-dark { opacity: 1; }
@media (max-width: 600px) {
  #navigation .brand-logo-stack { width: 29px; height: 33px; }
}
@media (prefers-reduced-motion: reduce) {
  #navigation .nav__brand, #navigation .brand-logo-stack .actual-brand-logo { transition: none; }
}