/* Header spacing and the supplied Halloween logo overlay. */
.hero-navigation .brand {
  position: relative;
  top: 18px;
}
#halloween .halloween-brand-mark {
  position: absolute;
  z-index: 2;
  right: 3%;
  bottom: 88px;
  width: clamp(168px, 13vw, 240px);
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .36));
}
@media (max-width: 800px) {
  .hero-navigation .brand { top: 10px; }
  #halloween {
    --halloween-art-height: 56.2799vw;
    --halloween-brand-width: clamp(144px, 28vw, 192px);
  }
  #halloween .halloween-brand-mark {
    width: var(--halloween-brand-width);
    right: 5%;
    top: calc(var(--halloween-art-height) - var(--halloween-brand-width) * 937 / 1678 - 14px);
    bottom: auto;
  }
}
@media (max-width: 520px) {
  #halloween {
    --halloween-art-height: 330px;
    --halloween-brand-width: clamp(128px, 34vw, 160px);
  }
}
@media (max-width: 350px) {
  #halloween { --halloween-art-height: 300px; }
}