:root { color-scheme: dark; background: #07121f; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
body { background: #07121f; font-family: Arial, sans-serif; }
/* Width-first sizing: the entire artwork is always visible horizontally.
   Its height follows its intrinsic aspect ratio. */
.landing { min-height: 100vh; min-height: 100svh; width: 100%; background: #07121f; display: flex; align-items: center; }
.hero { width: 100%; margin: auto 0; }
.hero__art { display: block; width: 100%; height: auto; max-width: none; object-fit: contain; }
@media (prefers-reduced-motion: no-preference) {
  .hero__art { animation: reveal .6s ease-out both; }
  @keyframes reveal { from { opacity: 0; } to { opacity: 1; } }
}