@font-face {
	font-family: 'Montserrat';
	src: url('/fonts/Montserrat-Italic.ttf') format('truetype');
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
}

:root {
	--navy: #193057;
	--navy-deep: #122a4b;
	--ink: #111111;
	--paper: #f4f4f3;
	--muted: #5f5f5f;
	--line: #d9d9d6;
	--bg: var(--paper);
	--fg: var(--ink);
	--card: #ffffff;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0e1a2e;
		--fg: #ecebe7;
		--muted: #a8adb6;
		--line: #2a3a55;
		--card: #13233d;
	}
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.6;
}

a { color: inherit; text-underline-offset: 3px; }

.bar {
	background: var(--navy);
	color: #fff;
}

.wrap {
	max-width: 46rem;
	margin: 0 auto;
	padding: 0 1rem;
}

header .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.brand {
	font-family: 'Montserrat', system-ui, sans-serif;
	font-style: italic;
	font-weight: 800;
	font-size: 1.35rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: #fff;
}

.lang { font-size: 0.95rem; }
.lang a { color: #fff; }

.hero {
	background: var(--navy);
	color: #fff;
	padding: 3rem 0 3.5rem;
}

.hero h1 {
	font-family: 'Montserrat', system-ui, sans-serif;
	font-style: italic;
	font-weight: 800;
	font-size: clamp(2rem, 7vw, 3.2rem);
	line-height: 1.1;
	margin: 0 0 0.75rem;
}

.hero p { margin: 0; font-size: 1.15rem; color: #dfe4ec; }



h2 {
	font-family: 'Montserrat', system-ui, sans-serif;
	font-style: italic;
	font-weight: 700;
	font-size: 1.35rem;
	margin: 2.25rem 0 0.5rem;
}

h3 { font-size: 1.05rem; margin: 1.5rem 0 0.25rem; }

.card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin: 1rem 0;
}

ul { padding-left: 1.25rem; }
li { margin: 0.25rem 0; }

.note { color: var(--muted); font-size: 0.95rem; }

footer {
	border-top: 1px solid var(--line);
	padding: 1.5rem 0 2.5rem;
	font-size: 0.95rem;
	color: var(--muted);
}

footer nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }

.content { padding: 2.5rem 1rem 3rem; }
main > .hero + .content { padding-top: 2.5rem; }