/* A single visual surface; its only action opens the visitor's mail app. */
:root { color-scheme: dark; background: #101113; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
body { background: #101113; }
.contact-canvas {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: #f3f2ee;
  background: #101113;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.artwork {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100vh;
  height: 100svh;
  pointer-events: none;
}
.artwork img {
  display: block;
  width: min(110vw, 106svh, 1320px);
  height: min(110vw, 106svh, 1320px);
  object-fit: contain;
  mix-blend-mode: lighten;
  animation: settle 1.2s ease-out both;
}
.contact-glyph {
  position: absolute;
  bottom: max(32px, calc(env(safe-area-inset-bottom) + 24px));
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 1px solid rgba(243, 242, 238, .35);
  border-radius: 50%;
  background: rgba(16, 17, 19, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background .25s, border-color .25s, color .25s;
}
.contact-canvas:hover .contact-glyph,
.contact-canvas:focus-visible .contact-glyph {
  background: #ee744a;
  border-color: #ee744a;
  color: #101113;
}
.contact-canvas:focus-visible {
  outline: 2px solid #ee744a;
  outline-offset: -6px;
}
@keyframes settle {
  from { opacity: 0; transform: scale(1.035); }
  to { opacity: 1; transform: scale(1); }
}
@media (max-width: 700px) {
  .artwork img { width: min(128vw, 92svh); height: min(128vw, 92svh); }
  .contact-glyph { width: 58px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .artwork img { animation: none; }
  .contact-glyph { transition: none; }
}