/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ── Theme tokens — same palette as the old site ── */
:root {
	--clr-bg:      #ffffff;
	--clr-text:    #222222;
	--clr-heading: #222222;
	--clr-muted:   #5f6368;

	--font-sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--sp-lg: 2rem;
	--page-padding: clamp(1rem, 4vw, 2rem);
}

@media (prefers-color-scheme: dark) {
	:root {
		--clr-bg:      #141414;
		--clr-text:    #c9c5be;
		--clr-heading: rgba(255, 255, 255, 0.92);
		--clr-muted:   #9ba1a9;
	}

	/* Dark-mode SVG tinting */
	.site-logo { filter: invert(0.88); }
}

html {
	font-family: var(--font-sans);
	font-size: 100%;
	color: var(--clr-text);
}

body {
	min-height: 100svh;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	background-color: var(--clr-bg);
}

/* ── Page — everything centred, vertically and horizontally ── */
.page {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-lg);
	min-height: 100svh;
	padding: var(--page-padding);
	text-align: center;
}

.site-logo {
	aspect-ratio: 1;
	width: clamp(8rem, 30vw, 14rem);
	height: auto;
	transition: filter 0.2s ease;
}

.page-link {
	font-size: 0.9rem;
	font-weight: 300;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--clr-muted);
	transition: color 0.15s ease;
}

.page-link:hover { color: var(--clr-heading); }