/* SpaceWise store website. Self-hosted fonts, no third-party requests. */
/* Headings: Atkinson Hyperlegible. Body: Andika, whose zero has no slash (children
   read a slashed zero as a mistake; round 1 review). */
@font-face {
	font-family: "Andika";
	src: url("fonts/Andika-Regular.ttf") format("truetype");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Andika";
	src: url("fonts/Andika-Bold.ttf") format("truetype");
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("fonts/AtkinsonHyperlegible-Bold.ttf") format("truetype");
	font-weight: 700;
	font-display: swap;
}

:root {
	--bg: #05070c;
	--panel: #0e1320;
	--text: #e9eef6;
	--muted: #aab7c8;
	--accent: #9ed4ff;
	--rule: #243048;
	--owner: #ffd166;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
	margin: 0;
	background: radial-gradient(1200px 600px at 50% -200px, #122038 0%, var(--bg) 70%) no-repeat, var(--bg);
	color: var(--text);
	font-family: "Andika", system-ui, sans-serif;
	font-size: 1.125rem;
	line-height: 1.6;
}

header {
	position: sticky;
	top: 0;
	background: rgba(5, 7, 12, 0.92);
	border-bottom: 1px solid var(--rule);
	z-index: 1;
}

nav {
	max-width: 60rem;
	margin: 0 auto;
	padding: 0.75rem 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
}

nav a { color: var(--muted); text-decoration: none; font-weight: 700; }
nav a[aria-current="page"], nav a:hover { color: var(--text); }

main {
	max-width: 46rem;
	margin: 0 auto;
	padding: 2rem 1rem 3rem;
}

h1, h2, nav { font-family: "Atkinson Hyperlegible", "Andika", system-ui, sans-serif; }
h1 { font-size: 2.2rem; line-height: 1.2; letter-spacing: 0.01em; margin: 0.5rem 0 1rem; }
h2 { font-size: 1.4rem; margin: 2.2rem 0 0.6rem; color: var(--accent); }

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

.lede { font-size: 1.3rem; color: var(--text); }
a.store { display: inline-block; padding: 0.6rem 1.1rem; border-radius: 10px; background: var(--accent); color: var(--bg); font-weight: 700; text-decoration: none; }

img { max-width: 100%; height: auto; border-radius: 10px; display: block; }
img.hero { margin: 1.5rem 0; }

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0.75rem;
	margin: 1.5rem 0;
}

table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: 1rem; }
th, td { border: 1px solid var(--rule); padding: 0.5rem 0.7rem; text-align: left; vertical-align: top; }
th { background: var(--panel); }

mark.owner { background: transparent; color: var(--owner); outline: 1px dashed var(--owner); padding: 0 0.2em; }

footer {
	border-top: 1px solid var(--rule);
	color: var(--muted);
	font-size: 0.9rem;
	text-align: center;
	padding: 1.5rem 1rem 2.5rem;
}

@media (max-width: 30rem) {
	body { font-size: 1.05rem; }
	h1 { font-size: 1.8rem; }
}

/* Round 9: worksheets print without the menu and the footer. */
@media print {
	nav, footer { display: none; }
}