/* Supplied gold emblem and midnight-blue suede, without redrawing the artwork. */
:root {
  --bee-logo-width: 102px;
  --bee-logo-height: 64px;
}

.brand-mark,
.brand-bee .brand-mark,
.intro .intro-mark,
.closing .closing-bee,
.navigation-bee,
.footer-emblem {
  background: transparent url('brand-emblem.svg') center / contain no-repeat;
  -webkit-mask: none;
  mask: none;
  filter: none;
}
.brand-bee,
.closing .closing-bee,
.navigation-bee,
.footer-emblem {
  width: var(--bee-logo-width);
  height: var(--bee-logo-height);
  flex-shrink: 0;
}
.intro .intro-mark { width: 112px; height: 70px; }
.footer-emblem { display: block; }
.footer-emblem:focus-visible { outline: 1px solid var(--gold-text); outline-offset: 8px; }

header { background: #020a17f5; border-bottom-color: #e4bd662b; }
.hero { background: #041126; }
.hero-sticky {
  background-color: #041126;
  background-image:
    linear-gradient(180deg, #02071212 0%, #01050d00 45%, #0207109c 100%),
    url('hero-suede.jpg');
  background-size: cover;
  background-position: center, center 43%;
  background-repeat: no-repeat;
}
.hero-top .eyebrow { color: #ffe3a0; }
.hero-top .edition,
.hero .orbit-label,
.hero .hero-bottom,
.hero .swarm-description,
.hero .scene-actions span { color: #c4cdda; }
.hero-copy h1.legacy-headline { color: #fffaf0; text-shadow: 0 2px 28px #0006; }
.hero-copy h1.legacy-headline em { color: #ffe098; }
.hero .scene-actions button { color: #e0e5eb; border-color: #c4cdda66; }
.hero-bottom { border-color: #d0b37b59; }
.swarm-trigger {
  background: #030b18e8;
  border-color: #eac571a8;
  box-shadow: inset 0 -1px #f5d484;
  color: #fff7e3;
}
.swarm-trigger:hover:not(:disabled) {
  background: #101927;
  border-color: #ffe3a0;
  box-shadow: inset 0 -1px #ffe3a0, 0 12px 35px #0005;
}

/* The same composited emblem is used if WebGL is unavailable. */
.bee-fallback { mix-blend-mode: normal; }
.bee-fallback img {
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  padding: 8%;
  transform: none;
}

@media (max-width: 640px) {
  :root { --bee-logo-width: 80px; --bee-logo-height: 50px; }
  .hero-sticky { background-position: center, 48% center; }
}