*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#032d25}
body{font-family:Arial,sans-serif}
.app{min-height:100vh}
.page{
  display:none;
  min-height:100vh;
  align-items:center;
  justify-content:center;
  padding:0;
  opacity:0;
}
.page.active{
  display:flex;
  animation:fadeIn .5s ease forwards;
}

/* Compact welcome page: fills the phone better and does not scroll */
#welcomePage{
  height:100svh;
  min-height:100svh;
  overflow:hidden;
}
#welcomePage .artwork{
  position:relative;
  height:100svh;
  width:auto;
  max-width:100vw;
  aspect-ratio:428/998;
  line-height:0;
  margin:auto;
  box-shadow:0 18px 55px rgba(0,0,0,.24);
}
#welcomePage .artwork img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Second invitation page remains unchanged */
#invitationPage{
  min-height:100vh;
  overflow:visible;
}
#invitationPage .artwork{
  position:relative;
  width:min(100vw,654px);
  line-height:0;
  margin:auto;
  box-shadow:0 18px 55px rgba(0,0,0,.24);
}
#invitationPage .artwork img{
  display:block;
  width:100%;
  height:auto;
}

.hotspot{
  position:absolute;
  display:block;
  border:0;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.enter-hotspot{
  left:14.5%;
  top:76.2%;
  width:72%;
  height:9.7%;
  border-radius:20px;
}
.maps-hotspot{
  left:25.5%;
  top:80.2%;
  width:50%;
  height:4.7%;
  border-radius:18px;
}
.hotspot:focus-visible{
  outline:3px solid rgba(255,255,255,.95);
  outline-offset:3px;
}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

@media(min-width:900px){
  body{background:#e9ddca}
  .page{padding:22px}
  #welcomePage .artwork{
    height:calc(100svh - 44px);
    max-width:calc(100vw - 44px);
  }
  #invitationPage .artwork{
    max-height:calc(100vh - 44px);
    width:auto;
  }
  #invitationPage .artwork img{
    max-height:calc(100vh - 44px);
    width:auto;
    max-width:100%;
  }
}
@supports not (height:100svh){
  #welcomePage{height:100vh;min-height:100vh}
  #welcomePage .artwork{height:100vh}
}
@media(prefers-reduced-motion:reduce){
  .page.active{animation:none;opacity:1}
}