/*
 * lumikettu.org: the night sky and the northern lights of the logo at the
 * top and bottom, snow between. No web fonts and nothing from anywhere
 * else; the one script, site.js, gives the Discord links their address.
 */

:root
{
	--night: #09132a;
	--sky: #122b5c;
	--ice: #8fdcff;
	--ice-strong: #4aa8ff;
	--aurora: #5ee2c4;
	--snow: #f4f8fe;
	--card: #ffffff;
	--ink: #14213d;
	--ink-soft: #4b5b78;
	--line: #d9e3f2;
	--link: #1d6bd0;
	--on-night: #eaf3ff;
	--on-night-soft: #a9bddc;
	--mono: "Cascadia Mono", Consolas, "Fira Mono", monospace;
}

*,
*::before,
*::after
{
	box-sizing: border-box;
}

body
{
	margin: 0;
	background: var(--snow);
	color: var(--ink);
	font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	line-height: 1.6;
}

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

img
{
	max-width: 100%;
	height: auto;
}

figure
{
	margin: 0;
}

kbd
{
	display: inline-block;
	min-width: 1.7em;
	padding: 0 6px;
	border: 1px solid #c3d1e6;
	border-bottom-width: 2px;
	border-radius: 5px;
	background: #f7faff;
	color: var(--ink);
	font-family: var(--mono);
	font-size: 0.82em;
	line-height: 1.6;
	text-align: center;
}

code
{
	padding: 1px 5px;
	border-radius: 4px;
	background: #e6eefa;
	font-family: var(--mono);
	font-size: 0.88em;
}

.wrap
{
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 20px;
}

/* The sky, with the northern lights low in it. */

.sky
{
	background:
		radial-gradient(ellipse 60% 55% at 12% 0%, rgba(94, 226, 196, 0.26), rgba(94, 226, 196, 0)),
		radial-gradient(ellipse 55% 65% at 88% 8%, rgba(74, 140, 255, 0.34), rgba(74, 140, 255, 0)),
		linear-gradient(180deg, var(--night) 0%, var(--sky) 100%);
	color: var(--on-night);
}

/* The header: the logo and the download button. */

.hero
{
	padding-bottom: 150px;
	text-align: center;
}

.top
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	padding: 18px 0;
	text-align: left;
}

.brand
{
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--on-night);
	font-size: 1.1rem;
	font-weight: 600;
	text-decoration: none;
}

.top ul
{
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.top ul a
{
	color: var(--on-night-soft);
	text-decoration: none;
}

.top ul a:hover
{
	color: var(--on-night);
}

.intro
{
	max-width: 700px;
	margin: 0 auto;
	padding-top: 36px;
}

.intro .logo
{
	display: block;
	width: 176px;
	margin: 0 auto;
}

h1
{
	margin: 16px 0 0;
	font-size: clamp(2.6rem, 7vw, 4rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.tagline
{
	margin: 8px 0 18px;
	color: var(--ice);
	font-size: clamp(1.15rem, 3vw, 1.45rem);
}

.lede
{
	max-width: 620px;
	margin: 0 auto 30px;
	color: var(--on-night-soft);
}

.button
{
	display: inline-block;
	padding: 14px 32px;
	border-radius: 999px;
	background: linear-gradient(180deg, #a3e3ff 0%, var(--ice-strong) 100%);
	box-shadow: 0 8px 28px rgba(74, 168, 255, 0.35);
	color: #04163a;
	font-size: 1.1rem;
	font-weight: 700;
	text-decoration: none;
}

.button:hover
{
	background: linear-gradient(180deg, #bdebff 0%, #66b8ff 100%);
}

.button:focus-visible
{
	outline: 3px solid var(--aurora);
	outline-offset: 3px;
}

.actions
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 16px;
	margin: 0 0 18px;
}

/* Discord's blurple, with its symbol in white, as its brand guidelines have
   them: the symbol as it comes, and the name beside it. */
.button.discord
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #5865f2;
	box-shadow: 0 8px 28px rgba(88, 101, 242, 0.35);
	color: #ffffff;
}

.button.discord:hover
{
	background: #4752c4;
}

.button.discord img
{
	width: 24px;
	height: 18px;
}

.fineprint
{
	margin: 14px 0 0;
	color: var(--on-night-soft);
	font-size: 0.92rem;
}

.fineprint a
{
	color: var(--on-night);
}

/* The screenshot, half in the sky. */

.shot
{
	max-width: 1000px;
	margin: -110px auto 0;
	padding: 0 20px;
}

.shot img
{
	display: block;
	width: 100%;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #ffffff;
	box-shadow: 0 24px 60px rgba(9, 19, 42, 0.28);
}

.shot figcaption
{
	margin-top: 12px;
	color: var(--ink-soft);
	font-size: 0.92rem;
	text-align: center;
}

/* The sections. */

section
{
	padding-top: 72px;
}

h2
{
	margin: 0 0 8px;
	font-size: clamp(1.6rem, 4vw, 2rem);
	line-height: 1.25;
}

.section-lede
{
	max-width: 640px;
	margin: 0 0 28px;
	color: var(--ink-soft);
}

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

.card
{
	padding: 22px 24px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--card);
}

.card h3
{
	margin: 0 0 6px;
	font-size: 1.12rem;
}

.card p,
.card li
{
	color: var(--ink-soft);
}

.card p
{
	margin: 0;
}

.card ul,
.card ol
{
	margin: 0;
	padding-left: 1.3em;
}

.card li + li
{
	margin-top: 8px;
}

.card .after
{
	margin-top: 16px;
}

.get
{
	margin: 0 0 28px;
}

/* The keyboard and the mouse. */

.keys
{
	width: 100%;
	border-collapse: collapse;
}

.keys caption
{
	padding-bottom: 8px;
	font-size: 1.12rem;
	font-weight: 700;
	text-align: left;
}

.keys th,
.keys td
{
	padding: 9px 0;
	border-top: 1px solid var(--line);
	vertical-align: top;
}

.keys th
{
	font-weight: normal;
	text-align: left;
}

.keys td
{
	padding-left: 16px;
	color: var(--ink-soft);
	text-align: right;
}

.combo
{
	white-space: nowrap;
}

/* What is not there yet. */

.not-yet
{
	margin: 0;
	padding-left: 1.3em;
	columns: 2 300px;
	column-gap: 48px;
}

.not-yet li
{
	margin-bottom: 8px;
	break-inside: avoid;
}

.honest
{
	margin: 20px 0 0;
	color: var(--ink-soft);
}

/* The footer: the sky again. */

footer
{
	margin-top: 88px;
	padding: 32px 0 40px;
	background: var(--night);
	color: var(--on-night-soft);
	font-size: 0.92rem;
}

footer p
{
	margin: 4px 0;
}

footer a
{
	color: var(--on-night);
}

/* The page a missing address shows. */

.lost
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 40px 20px;
	text-align: center;
}

.lost .logo
{
	width: 128px;
}

.lost h1
{
	font-size: clamp(2rem, 6vw, 2.8rem);
}

.lost p
{
	color: var(--on-night-soft);
}

.lost a
{
	color: var(--on-night);
}

@media (max-width: 600px)
{
	body
	{
		font-size: 16px;
	}

	.hero
	{
		padding-bottom: 96px;
	}

	.shot
	{
		margin-top: -64px;
	}

	section
	{
		padding-top: 56px;
	}

	.top ul
	{
		gap: 18px;
	}
}