:root { --fill: #c2b398; }            /* sky tone: load-state fill + any letterbox bars */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fill); }
body { overflow: hidden; }            /* single-screen teaser, never scrolls */

.hero {
	position: fixed; inset: 0;
	width: 100vw;
	height: 100svh;                     /* small viewport unit - no jump as mobile chrome shows/hides */
	overflow: hidden;
	background: var(--fill);
}
@supports (height: 100dvh) { .hero { height: 100dvh; } }

.hero__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	/* The dragon's head sits ~50% down the master (measured against the real asset).
	   Centring keeps the full head and lower jaw framed at every tested viewport - the
	   non-negotiable requirement. Mobile portrait is so close to the image's own aspect
	   ratio (~0.44) that the whole scene, mountain included, shows with almost no crop. */
	object-position: 50% 50%;
}