/* Escon Tycoon promo strip. The only addition to the Framer export. */

.escon-banner {
  position: relative;
  text-decoration: none;  /* it is a link wrapping images, not text */
  z-index: 3;             /* the hero section below sets z-index:2 */
  display: block;
  width: 100%;
  line-height: 0;         /* no inline-image gap under the strip */
}

.escon-banner__art {
  display: block;
  width: 100%;
  height: auto;
}

/* The character hangs inside the strip, from its top edge. Its height comes
   from the strip rather than a pixel value, so it scales with it instead of
   hanging out the bottom of a shorter one at narrower widths. */
.escon-banner__npc {
  position: absolute;
  top: 0;
  right: 4.2%;
  height: 100%;
  width: auto;
  pointer-events: none;
}

@media (max-width: 1099px) {
  .escon-banner__npc { display: none; }
}

/* Below 810px Framer pins the nav to the viewport top
   (.framer-arqgqk-container goes position:fixed, z-index:5), which paints
   straight over a strip sitting in normal flow. So at those widths the strip
   is pinned too, just above the nav, and the nav is pushed down by its height.

   The strip's height is its own aspect ratio against the viewport:
   3840x246 -> 100vw * 246/3840. */
@media (max-width: 809.98px) {
  .escon-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 6;           /* the pinned nav sits at 5 */
  }

  .framer-YQoxX .framer-arqgqk-container {
    top: calc(100vw * 246 / 3840);
  }

  #main {
    padding-top: calc(100vw * 246 / 3840);
  }
}