/* Landing: the whole painting, centred on the site background, name in the middle */
html, body { height: 100%; }
body.landing {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}
.painting {
  position: relative;
  display: grid;
  place-items: center;
}
.painting img {
  display: block;
  /* fit the whole painting inside the padded viewport */
  max-width: calc(100vw - 3rem);
  max-height: calc(100dvh - 3rem);
  width: auto; height: auto;
  clip-path: inset(var(--crop, 0));
  user-select: none;
  -webkit-user-drag: none;
}
.painting .name {
  position: absolute;
  font-weight: 600;
  font-variation-settings: "wght" 600, var(--sans-variation);
  letter-spacing: .02em;
  color: var(--name-color);
  text-decoration: none;
  text-shadow: 0 0 14px var(--name-glow);
  transition: opacity .3s;
}
@media (hover: hover) { .painting .name:hover { opacity: .7; } }
.painting .name { -webkit-tap-highlight-color: transparent; }
.painting .name::before { content: ""; position: absolute; inset: -.625rem -.75rem; }   /* a finger-sized target (~44px) */
.painting .name:focus-visible { outline: 1px dotted currentColor; outline-offset: 3px; }

@media (min-width: 40rem) {
  .painting img { max-width: calc(100vw - 5rem); max-height: calc(100dvh - 5rem); }
}
@media (min-width: 48rem) {
  .painting img { max-width: calc(100vw - 7rem); max-height: calc(100dvh - 7rem); }
}

/* animated layer sits exactly over the painting, fades in once the first frame is drawn */
.painting canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; transition: opacity .8s ease;
  pointer-events: none;
}
.painting canvas.on { opacity: 1; }