.loupe-scene { position: relative; width: 100%; isolation: isolate; touch-action: pan-y; }
/* Remove the transparent headroom above the drawing without changing the asset. */
.hero .loupe-art { width: 100%; height: auto; aspect-ratio: 1774 / 721; max-height: none; object-fit: cover; object-position: center bottom; user-select: none; }
.loupe-scene:focus-visible { outline: 1px solid var(--blue); outline-offset: 8px; }
.loupe-carrier {
  position: absolute; left: 0; top: 0; width: clamp(96px, 22vw, 144px);
  max-width: min(calc(100vw - 16px), calc(100vh - 16px));
  aspect-ratio: 1; pointer-events: none; will-change: transform;
}
.loupe-glass {
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: var(--ivory); opacity: 0; visibility: hidden;
  transform: scale(.88); transform-origin: center; will-change: transform, opacity;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 45%, transparent),
    0 3px 10px rgb(30 30 25 / .09), 0 12px 32px rgb(30 30 25 / .07);
  transition: transform 240ms cubic-bezier(.22, 1, .36, 1),
    opacity 200ms ease-out, visibility 0s linear 240ms;
}
.loupe-scene[data-active="true"] .loupe-glass {
  opacity: 1; visibility: visible; transform: scale(1);
  transition-duration: 180ms, 120ms, 0s; transition-delay: 0s;
}
.hero .loupe-detail { position: absolute; left: 0; top: 0; width: auto; height: auto; max-width: none; max-height: none; will-change: transform; }
/* Instructions remain available to assistive technology without page chrome. */
.loupe-caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .loupe-scene { cursor: zoom-in; } }
@media (prefers-reduced-motion: reduce) {
  .loupe-glass, .loupe-scene[data-active="true"] .loupe-glass { transform: none; transition: none; }
}