/* Nine's website. Follows the app: SF Rounded, the slate accent, and the
   tiles' fixed colors in light and dark. No scripts, no external files. */

:root {
	color-scheme: light dark;
	--background: #f5f6f7;
	--text: #1d2226;
	--secondary: #5b666d;
	--accent: #4a5c66;
	--rule: #d9dee1;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: #121517;
		--text: #eceff1;
		--secondary: #a3adb3;
		--accent: #8499a4;
		--rule: #2c3338;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 2rem 1.25rem 3rem;
	background: var(--background);
	color: var(--text);
	font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 1.0625rem;
	line-height: 1.55;
	-webkit-text-size-adjust: 100%;
}

main,
header,
footer {
	max-width: 38rem;
	margin: 0 auto;
}

header {
	margin-bottom: 2rem;
}

header a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--text);
	font-weight: 700;
	font-size: 1.25rem;
	text-decoration: none;
}

header img {
	width: 2rem;
	height: 2rem;
}

h1 {
	margin: 0 0 0.5rem;
	font-size: 2rem;
	line-height: 1.2;
}

h2 {
	margin: 2.25rem 0 0.5rem;
	font-size: 1.25rem;
	line-height: 1.3;
}

p,
ul {
	margin: 0 0 1rem;
}

ul {
	padding-left: 1.25rem;
}

li {
	margin-bottom: 0.4rem;
}

a {
	color: var(--accent);
	text-underline-offset: 0.15em;
}

.lede {
	color: var(--secondary);
	font-size: 1.1875rem;
}

.note {
	color: var(--secondary);
	font-size: 0.9375rem;
}

/* The 3x3 grid on the landing page: white tiles, the black mandatory tile
   in the middle. Fixed colors, like the app's tiles. */
.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	width: 13.5rem;
	margin: 2rem auto;
}

.grid span {
	display: grid;
	place-items: center;
	aspect-ratio: 1.15;
	border: 1px solid color-mix(in srgb, var(--text) 25%, transparent);
	border-radius: 8px;
	background: linear-gradient(to bottom, #fff 50%, #f0f0f0 100%);
	color: #333;
	font-size: 1.75rem;
	font-weight: 700;
}

.grid .mandatory {
	background: linear-gradient(to bottom, #222 50%, #000 100%);
	color: #fff;
}

footer {
	margin-top: 3rem;
	padding-top: 1rem;
	border-top: 1px solid var(--rule);
	color: var(--secondary);
	font-size: 0.9375rem;
}

footer a {
	margin-right: 1.25rem;
}