*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#000000}
body{min-height:100dvh}
.page{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000000;
}
.poster-wrap{
  position:relative;
  width:min(100vw,941px);
  margin:0 auto;
  line-height:0;
}
.poster{
  display:block;
  width:100%;
  height:auto;
}
.hotspot{
  position:absolute;
  display:block;
  z-index:2;
  cursor:pointer;
  background:transparent;
  border:0;
}

/* Existing CHAOSENGINES graphic/button */
.hotspot.chaos{
  left:11.5%;
  top:74.7%;
  width:25%;
  height:10.5%;
}

/* Existing LINKEDIN graphic/button */
.hotspot.linkedin{
  left:37.5%;
  top:74.7%;
  width:25%;
  height:10.5%;
}

/* Invisible normally; accessible keyboard focus only */
.hotspot:focus-visible{
  outline:2px solid #00bfff;
  outline-offset:3px;
  border-radius:12px;
}

@media (min-aspect-ratio:1/1){
  .page{padding:18px}
  .poster-wrap{
    width:auto;
    max-width:min(92vw,941px);
  }
  .poster{
    max-height:92dvh;
    width:auto;
    max-width:100%;
  }
}