*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:#050505}
body{overflow:hidden}

.desktop-page{
  position:relative;
  width:100vw;
  height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#050505;
}

.desktop-page img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

.desktop-mail,
.desktop-cta{
  position:absolute;
  z-index:5;
  display:block;
  border-radius:12px;
}

.desktop-mail{
  left:10.1%;
  top:82.5%;
  width:23.5%;
  height:7.2%;
}

.desktop-cta{
  left:31.1%;
  top:82.4%;
  width:17.2%;
  height:7.4%;
}

.mobile-page{display:none}

@media (max-width:700px){
  body{overflow:auto}

  .desktop-page{display:none}

  .mobile-page{
    display:block;
    width:100%;
    background:#050505;
  }

  .mobile-art{
    position:relative;
    width:100%;
  }

  .mobile-art img{
    display:block;
    width:100%;
    height:auto;
    user-select:none;
    -webkit-user-drag:none;
  }

  /*
    One large, reliable contact hotspot over the whole gold contact panel.
    Because it is positioned relative to the portrait IMAGE wrapper, it
    cannot drift down onto the ANRÁN line when Safari changes viewport height.
  */
  .mobile-contact{
    position:absolute;
    z-index:10;
    left:3.5%;
    top:79.4%;
    width:93%;
    height:12.3%;
    display:block;
    border-radius:18px;
  }
}