:root {
  color-scheme: dark;
  background: #000;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

body { min-height: 100svh; }

.contact-experience {
  position: relative;
  display: grid;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  height: 100dvh;
  min-height: 100dvh;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #000;
}

.contact-frame {
  position: absolute;
  top: 85%;
  left: 64%;
  width: max(100vw, calc(100svh * 1672 / 941));
  width: max(100vw, calc(100dvh * 1672 / 941));
  aspect-ratio: 1672 / 941;
  transform: translate(-64%, -85%);
}

.contact-canvas,
.contact-photograph,
.contact-photograph img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.contact-canvas { container-type: size; }

.contact-photograph { pointer-events: none; }

.contact-photograph img {
  object-fit: cover;
  user-select: none;
}

.contact-hotspot {
  position: absolute;
  z-index: 1;
  display: block;
  min-height: 44px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform-origin: left center;
}

.contact-hotspot:focus { outline: none; }

.contact-hotspot::after {
  position: absolute;
  inset: -18% -7%;
  content: "";
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(92, 244, 220, .24), rgba(92, 244, 220, .08) 38%, transparent 74%);
  filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 190ms ease;
  mix-blend-mode: screen;
}

.contact-hotspot--phone {
  /* Expand small touch targets away from the neighbouring contact line. */
  top: calc(57.8% - max(0px, calc(44px - 6.6cqh)));
  left: 37.4%;
  width: 21.8%;
  height: 6.6%;
  transform: rotate(-11deg);
  transform-origin: left calc(100% - 3.3cqh);
}

.contact-hotspot--email {
  top: 66.2%;
  left: 40.4%;
  width: 19.2%;
  height: 6.6%;
  transform: rotate(-14deg);
  transform-origin: left 3.3cqh;
}

.contact-back {
  top: 76.5%;
  left: 70%;
  z-index: 2;
  display: flex;
  width: 13.2%;
  height: 7.5%;
  align-items: center;
  justify-content: center;
  color: rgba(53, 43, 76, .9);
  font: 400 clamp(14px, 4.1cqh, 54px)/1 "Noteworthy", "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  letter-spacing: -.025em;
  text-decoration: none;
  text-shadow: 0 0 .35px rgba(53, 43, 76, .55);
  transform: rotate(-11deg);
}

.contact-back::after {
  z-index: -1;
  inset: -22% -8%;
}

.contact-back::before {
  position: absolute;
  z-index: 1;
  top: -6cqh;
  left: -4cqw;
  width: 16cqw;
  height: 10cqh;
  content: "";
  background: transparent;
}

@media (hover: hover) {
  .contact-hotspot:hover::after { opacity: .65; }
}

.contact-hotspot:focus-visible::after,
.contact-hotspot:active::after { opacity: .82; }

/* The panoramic artwork extends the same desk for very wide viewports. */
@media (min-aspect-ratio: 13 / 5) {
  .contact-frame {
    top: 95%;
    left: 50%;
    width: max(100vw, calc(100svh * 3));
    width: max(100vw, calc(100dvh * 3));
    aspect-ratio: 3 / 1;
    transform: translate(-50%, -95%);
  }

  .contact-hotspot--phone {
    top: calc(66.8% - max(0px, calc(44px - 5cqh)));
    left: 42.7%;
    width: 14%;
    height: 5%;
    transform-origin: left calc(100% - 2.5cqh);
  }

  .contact-hotspot--email {
    top: 73.2%;
    left: 44.3%;
    width: 13.5%;
    height: 5%;
    transform-origin: left 2.5cqh;
  }

  .contact-back {
    top: 81.5%;
    left: 64.3%;
    width: 7.7%;
  }

  .contact-back::before {
    top: -7cqh;
    left: -3cqw;
    width: 10cqw;
  }
}

/* The portrait artwork extends the room and desk as one continuous photograph. */
@media (max-aspect-ratio: 4 / 3) {
  .contact-frame {
    top: calc(50% + (env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 2);
    left: calc(50% + (env(safe-area-inset-left) - env(safe-area-inset-right)) / 2);
    width: max(100vw, calc(100svh / 2), min(calc((100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px) / .60), calc((100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px) / .52)));
    width: max(100vw, calc(100dvh / 2), min(calc((100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px) / .60), calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px) / .52)));
    aspect-ratio: 1 / 2;
    transform: translate(-55%, -50%);
  }

  .contact-hotspot--phone {
    top: calc(45.9% - max(0px, calc(44px - 1.8cqh)));
    left: 37.5%;
    width: 23%;
    height: 1.8%;
    transform-origin: left calc(100% - .9cqh);
  }

  .contact-hotspot--email {
    top: 48.4%;
    left: 41.4%;
    width: 20.2%;
    height: 1.8%;
    transform-origin: left .9cqh;
  }

  .contact-back {
    top: 51%;
    left: 73%;
    width: 11%;
    height: 3.1%;
    font-size: clamp(14px, 1.15cqh, 42px);
  }

  .contact-back::before {
    top: -2cqh;
    left: -7cqw;
    width: 17cqw;
    height: 4cqh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-hotspot::after { transition: none; }
}