/* Base setup */
:root {
	--page-max-width: 1200px;
	--content-padding: clamp(16px, 4vw, 40px);
	--title-max-width: min(90vw, 720px);
	--title-height: clamp(64px, 12vw, 160px);
	--title-gap: clamp(12px, 2.5vw, 24px);
	--text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}

* { box-sizing: border-box; }

html, body {
	height: 100%;
}

body {
	margin: 0;
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	color: #ffffff;
	background-color: #0b0b0b;
}

/* Page layout */
.page {
	min-height: 100dvh;
	min-height: 100vh;
	background-image: image-set(
		url('assets/images/background.jpg') 1x
	);
	background-image: url('assets/images/background.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: grid;
	grid-template-rows: 1fr auto;
}

/* Hero section */
.hero {
	max-width: var(--page-max-width);
	margin: 0 auto;
	padding: calc(var(--content-padding) * 2) var(--content-padding) var(--content-padding);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--title-gap);
}

/* Site title with logo background */
.site-title {
	margin: 0;
	width: var(--title-max-width);
	height: var(--title-height);
	background-image: image-set(
		url('assets/images/logo-white.png') 1x,
		url('assets/images/logo-white.png') 2x
	);
	background-image: url('assets/images/logo-white.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	text-indent: -9999px;
	white-space: nowrap;
	overflow: hidden;
}

/* Tagline */
.tagline {
	margin: 0;
	padding: 0 12px;
	font-size: clamp(16px, 2.6vw, 24px);
	line-height: 1.4;
	text-shadow: var(--text-shadow);
}

/* Footer */
.site-footer {
	padding: var(--content-padding);
	text-align: center;
	color: rgba(255,255,255,0.9);
	text-shadow: var(--text-shadow);
}

.site-footer p {
	margin: 0;
	font-size: 14px;
}

/* Accessibility prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}