:root { color-scheme: dark; background: #000; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #000; }
main { position: relative; width: 100%; height: 100vh; height: 100svh; overflow: hidden; }
.artwork { position: absolute; inset: 0; overflow: hidden; }
.artwork--desktop img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.016); }
/* Mask the screenshot's scan control without changing the supplied artwork. */
.artwork--desktop::after { content: ""; position: absolute; bottom: 0; right: 0; width: 4.5vw; height: 4.5vw; background: #000; }
.artwork--mobile { display: none; }
.instagram-link { position: absolute; left: 0; top: 45%; width: 24%; height: 10%; }
.instagram-link:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 700px) and (orientation: portrait) {
  .artwork--desktop { display: none; }
  .artwork--mobile { display: block; }
  /* Display only y=80..1410: the phone status and browser bars stay outside the frame. */
  .mobile-frame { position: absolute; left: 50%; top: 50%; width: max(100vw, calc(100svh * 739 / 1330)); height: max(100svh, calc(100vw * 1330 / 739)); transform: translate(-50%, -50%); }
  .mobile-frame img { position: absolute; left: 0; top: -6.015038%; width: 100%; height: auto; }
  .instagram-link { inset: 0; width: 100%; height: 100%; }
}