:root {
	--black: #070708;
	--line: rgba(244, 240, 234, .16);
	--text: #f4f0ea;
	--muted: #b4aea6;
	--red: #a42931;
	--red-hi: #d8434c;
	--sans: "Avenir Next", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--black);
	color: var(--text);
	font: 400 1.0625rem/1.65 var(--sans);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--red-hi); outline-offset: 3px; }

/* Atmosphere: spotlight + film grain, fixed behind everything (same as cvpmedia.ca) */
body::before {
	content: "";
	position: fixed; inset: 0; z-index: -2; pointer-events: none;
	background:
		radial-gradient(60% 55% at 50% 0%, rgba(164, 41, 49, .24), transparent 70%),
		radial-gradient(90% 60% at 50% 105%, rgba(164, 41, 49, .10), transparent 70%),
		var(--black);
}
body::after {
	content: "";
	position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.hero {
	min-height: 100vh; min-height: 100svh;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: clamp(2rem, 6vh, 4rem) 1.5rem clamp(5rem, 11vh, 6.5rem);
	text-align: center; position: relative;
}
.logo { width: clamp(240px, 30vw, 400px); margin: 0 auto clamp(2rem, 6vh, 4rem); }
.eyebrow {
	margin: 0 0 1.25rem; color: var(--red-hi);
	font-size: .8rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
}
.hero h1 {
	margin: 0;
	font-weight: 800;
	font-size: clamp(1.7rem, 5.2vw, 4.2rem);
	line-height: 1.08;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-wrap: balance;
}
.rule {
	display: block; width: clamp(64px, 12vw, 140px); height: 2px; margin: clamp(1.4rem, 3.5vh, 2.2rem) auto;
	background: linear-gradient(90deg, transparent, var(--red-hi), transparent);
}
.lede { margin: 0 auto; max-width: 34rem; color: var(--muted); font-size: clamp(1rem, 2.2vw, 1.2rem); }
.parent {
	position: absolute; bottom: clamp(1.4rem, 4.5vh, 2.4rem); left: 0; right: 0; margin: 0;
	color: var(--muted); font-size: .95rem; letter-spacing: .12em;
}
.parent a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--red); padding-bottom: 2px; transition: border-color .25s, color .25s; }
.parent a:hover { color: var(--red-hi); border-color: var(--red-hi); }

/* Gentle entrance */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.logo { animation: rise 1.1s cubic-bezier(.2, .7, .2, 1) both; }
.eyebrow { animation: rise 1s .2s cubic-bezier(.2, .7, .2, 1) both; }
.hero h1 { animation: rise 1.1s .35s cubic-bezier(.2, .7, .2, 1) both; }
.rule { animation: draw 1s .8s ease-out both; }
.lede { animation: rise 1.1s 1s cubic-bezier(.2, .7, .2, 1) both; }
.parent { animation: rise 1s 1.5s both; }

@media (max-width: 600px) {
	body { font-size: 1rem; }
	.hero h1 { letter-spacing: .05em; }
	.eyebrow { letter-spacing: .24em; }
}
@media (min-width: 1800px) {
	.logo { width: 440px; }
}
@media (max-height: 560px) and (orientation: landscape) {
	.hero { min-height: auto; padding-bottom: 4.5rem; }
	.logo { width: 200px; margin-bottom: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}