@font-face { font-family: Fredoka; font-weight: 600; font-display: swap; src: url(fredoka-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Fredoka; font-weight: 700; font-display: swap; src: url(fredoka-latin-700-normal.woff2) format('woff2'); }

:root {
	--ink: #1b0d3a;
	--sky-in: #a6ecff;
	--sky-mid: #2f94ff;
	--sky-out: #1a2a8f;
	--card: #ffffff;
	--text: #2a2340;
	--muted: #5f5876;
	--accent: #ff5fa8;
	--link: #1d63dc;
}

* { box-sizing: border-box; }

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

body {
	margin: 0;
	min-height: 100vh;
	color: var(--text);
	font: 17px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background:
		radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.35), transparent 60%),
		repeating-conic-gradient(from 0deg at 50% 18%, rgba(255, 255, 255, 0.07) 0deg 10deg, transparent 10deg 20deg),
		radial-gradient(140% 100% at 50% 18%, var(--sky-in) 0%, var(--sky-mid) 38%, var(--sky-out) 100%);
	background-color: var(--sky-out);
	background-attachment: fixed;
}

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

.wrap { max-width: 860px; margin: 0 auto; padding: 24px 16px 56px; }

header.top { display: flex; align-items: center; gap: 14px; margin: 4px 0 22px; }
header.top a { display: flex; align-items: center; gap: 14px; text-decoration: none; }
header.top img { width: 56px; height: 56px; border-radius: 13px; box-shadow: 0 6px 18px rgba(10, 20, 80, 0.35); }
.wordmark {
	font: 700 30px/1 Fredoka, sans-serif;
	letter-spacing: 0.01em;
	color: #fff;
	-webkit-text-stroke: 6px var(--ink);
	paint-order: stroke fill;
	text-shadow: 0 4px 0 var(--ink);
}

.hero {
	position: relative;
	border-radius: 22px;
	overflow: hidden;
	border: 4px solid var(--ink);
	box-shadow: 0 18px 50px rgba(8, 14, 70, 0.45);
	background: #1a2a8f;
}
.hero img { display: block; width: 100%; height: auto; }

h1, h2, h3 { font-family: Fredoka, sans-serif; font-weight: 700; color: var(--ink); line-height: 1.15; }

.tagline {
	margin: 26px 0 8px;
	text-align: center;
	font: 700 clamp(28px, 6vw, 44px)/1.1 Fredoka, sans-serif;
	color: #fff;
	-webkit-text-stroke: 8px var(--ink);
	paint-order: stroke fill;
	text-shadow: 0 5px 0 var(--ink);
}
.sub { text-align: center; color: #eaf6ff; font-size: 18px; margin: 0 0 24px; text-shadow: 0 1px 2px rgba(10, 20, 80, 0.6); }

.badge {
	display: inline-block;
	margin: 0 auto 28px;
	padding: 12px 22px;
	border-radius: 999px;
	background: #fff;
	border: 3px solid var(--ink);
	font: 600 17px/1 Fredoka, sans-serif;
	color: var(--ink);
	box-shadow: 0 5px 0 var(--ink);
}
.center { text-align: center; }

.card {
	background: var(--card);
	border: 3px solid var(--ink);
	border-radius: 20px;
	padding: 22px 22px 18px;
	margin: 0 0 18px;
	box-shadow: 0 6px 0 var(--ink);
}
.card h2 { margin: 0 0 10px; font-size: 26px; }
.card h3 { margin: 18px 0 4px; font-size: 19px; }
.card p { margin: 0 0 12px; }

ul.features { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 10px; }
ul.features li { padding-left: 34px; position: relative; }
ul.features li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff 0 18%, #9fe3ff 19% 55%, #2f8dff 56%);
	border: 2px solid var(--ink);
}

.prose h1 { font-size: clamp(30px, 6vw, 40px); margin: 0 0 4px; }
.prose h2 { font-size: 22px; margin: 26px 0 6px; }
.date { color: var(--muted); margin: 0 0 18px; }

footer { margin-top: 28px; text-align: center; color: #eaf6ff; font-size: 15px; text-shadow: 0 1px 2px rgba(10, 20, 80, 0.6); }
footer a { color: #fff; }

@media (max-width: 520px) {
	body { font-size: 16px; }
	.wordmark { font-size: 25px; -webkit-text-stroke-width: 5px; }
	.card { padding: 18px 16px 14px; }
}