/* Hallmark · macrostructure: inherited site canvas · tone: dark professional technical · anchor hue: ViriHub teal
 * Live scope: global layout density + progressive media only
 * Pre-emit critique: P5 H5 E5 S5 R5 V4
 */

:root {
  --vh-canvas-max: 1536px;
  --vh-media-soft-opacity: 0.72;
  --vh-media-scale: 1.018;
  --vh-media-duration: 520ms;
  --vh-media-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html,
body {
  overflow-x: clip;
}

main img.vh-progressive-image {
  opacity: var(--vh-media-soft-opacity);
  transform: scale(var(--vh-media-scale));
  transition:
    opacity var(--vh-media-duration) var(--vh-media-ease-out),
    transform var(--vh-media-duration) var(--vh-media-ease-out);
}

main img.vh-progressive-image.is-sharp {
  opacity: 1;
  transform: scale(1);
}

@media (min-width: 64rem) {
  html {
    font-size: 90%;
  }

  body .max-w-7xl {
    max-width: min(94vw, var(--vh-canvas-max));
  }
}

@media (min-width: 120rem) {
  body .max-w-7xl {
    max-width: min(92vw, var(--vh-canvas-max));
  }
}

@media (prefers-reduced-motion: reduce) {
  main img.vh-progressive-image {
    opacity: 1;
    transform: none;
    transition-duration: 50ms;
  }
}