/* Spawnlings site: bright, chunky, classic-brick look. No web fonts, no trackers, no scripts. */
:root {
	--sky: #5cc8ff;
	--sky-deep: #2f8fe0;
	--grass: #43c25a;
	--grass-dark: #23853a;
	--sun: #ffd23f;
	--ink: #14213d;
	--paper: #ffffff;
	--soft: #eef7ff;
	--muted: #4a5a78;
	--red: #ff4d4d;
	--radius: 18px;
	--edge: 4px solid var(--ink);
	--lift: 0 6px 0 var(--ink);
	--font: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	color: var(--ink);
	font: 17px/1.5 var(--font);
	background-color: var(--sky);
	/* brick studs */
	background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.22) 0 7px, transparent 8px);
	background-size: 36px 36px;
}

a { color: inherit; }

img, video { max-width: 100%; display: block; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* Top bar */
.top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
}
.top a.home img { height: 40px; width: auto; }
.top nav { display: flex; gap: 8px; flex-wrap: wrap; }
.top nav a {
	text-decoration: none;
	font-weight: 800;
	font-size: 15px;
	background: var(--paper);
	border: 3px solid var(--ink);
	border-radius: 999px;
	padding: 6px 14px;
}
.top nav a:hover, .top nav a:focus-visible { background: var(--sun); }

/* Hero */
.hero { text-align: center; padding: 28px 0 40px; }
.hero .logo { width: min(640px, 92%); height: auto; margin: 0 auto 18px; filter: drop-shadow(0 8px 0 rgba(20, 33, 61, 0.35)); }
.hero p.tag {
	font-size: clamp(19px, 3.4vw, 26px);
	font-weight: 800;
	margin: 0 auto 24px;
	max-width: 640px;
	color: var(--paper);
	text-shadow: 0 3px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink);
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	font-weight: 900;
	font-size: 22px;
	letter-spacing: 0.02em;
	color: var(--paper);
	background: var(--grass);
	border: var(--edge);
	border-radius: 16px;
	padding: 14px 28px;
	box-shadow: 0 7px 0 var(--grass-dark), 0 7px 0 4px var(--ink);
	text-shadow: 0 2px 0 var(--ink);
	transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn:hover, .btn:focus-visible { transform: translateY(2px); box-shadow: 0 5px 0 var(--grass-dark), 0 5px 0 4px var(--ink); }
.btn:active { transform: translateY(6px); box-shadow: 0 1px 0 var(--grass-dark), 0 1px 0 4px var(--ink); }
.btn.alt { background: var(--sun); color: var(--ink); text-shadow: none; box-shadow: 0 7px 0 #c99a00, 0 7px 0 4px var(--ink); }
.btn.small { font-size: 17px; padding: 10px 18px; }
.btn-row { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

/* Cards and sections */
section { padding: 22px 0; }
.card {
	background: var(--paper);
	border: var(--edge);
	border-radius: var(--radius);
	box-shadow: var(--lift);
	overflow: hidden;
}
h2.band {
	display: inline-block;
	margin: 0 0 16px;
	font-size: clamp(24px, 4vw, 32px);
	font-weight: 900;
	background: var(--sun);
	border: var(--edge);
	border-radius: 14px;
	padding: 4px 16px;
	box-shadow: 0 4px 0 var(--ink);
	transform: rotate(-1.5deg);
}

.video video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.step img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: var(--edge); }
.step h3 { margin: 12px 14px 4px; font-size: 21px; font-weight: 900; }
.step p { margin: 0 14px 14px; color: var(--muted); font-size: 16px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.gallery a { display: block; }
.gallery img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

.play-band { text-align: center; padding: 34px 16px; }
.play-band p { font-weight: 800; font-size: 20px; margin: 0 0 18px; }

/* Text pages */
.page { padding: 22px; }
.page h1 { margin: 0 0 6px; font-size: clamp(28px, 5vw, 40px); font-weight: 900; }
.page h2 { margin: 26px 0 8px; font-size: 22px; font-weight: 900; }
.page p, .page li { color: #22314f; }
.page ul { padding-left: 22px; }
.page .lead { font-size: 19px; }
.facts { width: 100%; border-collapse: collapse; margin: 8px 0; table-layout: fixed; }
.facts td { overflow-wrap: anywhere; }
.facts th, .facts td { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--soft); vertical-align: top; }
.facts th { width: 34%; white-space: nowrap; }
.downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 10px 0; padding: 0; list-style: none; }
.downloads li { background: var(--soft); border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; }
.downloads img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--sky); border-bottom: 3px solid var(--ink); }
.downloads a { display: block; padding: 10px 12px; font-weight: 800; text-decoration: none; }
.downloads a:hover, .downloads a:focus-visible { background: var(--sun); }
.downloads small { display: block; font-weight: 600; color: var(--muted); }
.note { background: var(--soft); border-left: 6px solid var(--sky-deep); padding: 10px 14px; border-radius: 8px; }

/* Footer */
footer { padding: 30px 0 40px; text-align: center; }
footer nav { display: flex; gap: 10px 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
footer nav a { font-weight: 800; color: var(--paper); text-shadow: 0 2px 0 var(--ink); }
footer p { margin: 6px auto; max-width: 720px; font-size: 13px; color: var(--ink); background: rgba(255, 255, 255, 0.75); border-radius: 10px; padding: 8px 12px; }

:focus-visible { outline: 4px solid var(--sun); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.btn, .btn:hover, .btn:active { transition: none; transform: none; }
}

@media (max-width: 560px) {
	body { font-size: 16px; }
	.top a.home img { height: 32px; }
	.top nav a { padding: 5px 10px; font-size: 14px; }
	.btn { font-size: 19px; padding: 12px 22px; }
	.page { padding: 16px; }
	.facts th { white-space: normal; }
}
.logo-h { margin: 0; }
.muted { color: var(--muted); font-size: 14px; }