:root {
	--bg-color: #1a1a1a;
	--text-color: #eeeeee;
	--muted-text: #999999;
	--link-hover-color: #FFD300;
	--heading-font: "Sora", sans-serif;
	--body-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--font-size-body: clamp(16px, 1.1vw, 18px);
	--font-size-small: 13px;
	--line-height-body: 1.65;
}

* {
	box-sizing: border-box;
}

html,
body {
	min-height: 100vh;
}

body {
	background-color: var(--bg-color);
	color: var(--text-color);
	font-family: var(--body-font);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	margin: 0;
	padding: 0;
	width: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	width: 100%;
}

main {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1.5rem;
}

.hero {
	text-align: center;
	max-width: 36rem;
}

.site-title {
	font-family: var(--body-font);
	font-size: clamp(3rem, 12vw, 5.5rem);
	font-weight: 800;
	color: var(--text-color);
	margin: 0;
	line-height: 1;
	letter-spacing: -0.04em;
}

.tagline {
	font-family: var(--heading-font);
	font-size: clamp(0.95rem, 2.5vw, 1.125rem);
	font-weight: 400;
	line-height: 1.5;
	margin: 1.25rem 0 0;
	color: var(--muted-text);
	letter-spacing: 0.01em;
}

footer {
	padding: 1.5rem;
	text-align: center;
}

footer a {
	font-size: var(--font-size-small);
	color: var(--muted-text);
	text-decoration: none;
	transition: color 0.2s;
}

footer a:hover {
	color: var(--link-hover-color);
}

footer a:focus-visible {
	outline: 2px solid var(--link-hover-color);
	outline-offset: 3px;
	border-radius: 2px;
}

@media (max-width: 600px) {
	.site-title {
		font-size: clamp(2.5rem, 14vw, 3.5rem);
	}

	.tagline {
		margin-top: 1rem;
	}
}