:root {
	color-scheme: dark;
	--ink: #e8e2d3;
	--muted: #aeb8b6;
	--gold: #dfbd76;
	--teal: #79aaa4;
	--panel: rgba(9, 18, 22, 0.94);
	--line: rgba(223, 189, 118, 0.42);
}

* { box-sizing: border-box; }

body {
	margin: 0;
	min-height: 100vh;
	font-family: ui-serif, Georgia, "Times New Roman", serif;
	color: var(--ink);
	background:
		radial-gradient(circle at 80% 0%, rgba(35, 83, 91, 0.34), transparent 42rem),
		linear-gradient(145deg, #05090c, #0b171c 58%, #071014);
	line-height: 1.65;
}

a { color: var(--gold); }
a:hover, a:focus-visible { color: #ffe0a1; }

.shell {
	width: min(920px, calc(100% - 32px));
	margin: 0 auto;
	padding: 48px 0 72px;
}

.masthead {
	padding-bottom: 22px;
	border-bottom: 1px solid var(--line);
}

.eyebrow {
	margin: 0 0 8px;
	color: var(--teal);
	font-family: ui-sans-serif, system-ui, sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

h1, h2 { color: var(--gold); line-height: 1.2; }
h1 { margin: 0; font-size: clamp(2rem, 7vw, 3.8rem); }
h2 { margin-top: 2rem; font-size: 1.25rem; }

.subtitle { max-width: 650px; color: var(--muted); }

.panel {
	margin-top: 28px;
	padding: clamp(20px, 5vw, 38px);
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px;
}

.card {
	display: block;
	padding: 22px;
	color: var(--ink);
	text-decoration: none;
	background: rgba(19, 35, 40, 0.82);
	border: 1px solid rgba(121, 170, 164, 0.32);
	border-radius: 12px;
}

.card strong { display: block; color: var(--gold); font-size: 1.18rem; }
.card span { color: var(--muted); }

.language-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 20px 0 0;
}

.language-nav button {
	padding: 8px 12px;
	color: var(--ink);
	background: #122229;
	border: 1px solid rgba(121, 170, 164, 0.45);
	border-radius: 999px;
	cursor: pointer;
}

.language-nav button[aria-pressed="true"] {
	color: #081014;
	background: var(--gold);
	border-color: var(--gold);
}

.localized[hidden] { display: none; }
.meta { color: var(--muted); font-size: 0.92rem; }
.notice { padding: 14px 16px; background: rgba(121, 170, 164, 0.11); border-left: 3px solid var(--teal); }

footer {
	margin-top: 30px;
	color: var(--muted);
	font-family: ui-sans-serif, system-ui, sans-serif;
	font-size: 0.82rem;
}

@media (max-width: 520px) {
	.shell { padding-top: 28px; }
	.panel { padding: 20px; }
}