/*
	Phone layout. Loaded via media="screen and (max-width: 700px)".
	The header collapses into a hamburger that toggles a stacked nav.
*/

html {
	font-size: 15px;
}

header {
	height: 4.6rem;
	padding: 0;
}

header #logo {
	height: 3rem;
	margin: 0 0 0 4vw;
	padding: 0.45rem 0 0 3.9rem;
}

header h1 { font-size: 1rem; }
header h2 { font-size: 0.7rem; }

header nav {
	display: none;
	position: absolute;
	top: 4.6rem;
	left: 0;
	width: 100%;
	background: #0a0a0af7;
	border-top: 1px solid #ffffff14;
	padding: 0.5rem 0 1rem 0;
	box-sizing: border-box;
}

header.nav {
	height: auto;
	overflow: visible;
}

header.nav nav {
	display: block;
}

header nav a {
	display: block;
	padding: 0.95em 6vw;
	border-radius: 0;
	font-size: 1rem;
}

header > a#donate-button {
	margin: 0 0 0 auto;
	padding: 0.6em 1.1em;
	font-size: 0.85rem;
}

header > a#seven-systems {
	display: none;
}

header > a#nav {
	display: block;
	flex: 0 0 auto;
	height: 4.6rem;
	line-height: 4.6rem;
	width: 3.4rem;
	text-align: center;
	font-size: 1.5rem;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}

section {
	padding: 2.2rem 6vw;
}

section:first-of-type {
	padding-top: calc(2.2rem + 4.6rem);
}

h3 { font-size: 1.75rem; }
h4 { font-size: 1.3rem; }

p, li { font-size: 1rem; }
p.lead { font-size: 1.15rem; }

section.hero,
section.hero:first-of-type {
	padding: 4.6rem 0 0 0;   /* clear the fixed header, nothing more */
}

section.hero .overlay {
	position: static;
	padding: 1.8rem 6vw 2.2rem 6vw;
	background: #000;
}

section.hero img.shot {
	opacity: 0.65;
	max-height: 32vh;
}

section.hero h3 { font-size: 1.9rem; }
section.hero p { font-size: 1.1rem; }

.gallery {
	grid-template-columns: 1fr;
	gap: 1.1rem;
}

.videos {
	grid-template-columns: 1fr;
}

.stats div b { font-size: 1.9rem; }

.cols { gap: 0; }

.tiers { grid-template-columns: 1fr; }

.button { display: block; margin: 0.7em 0; }

.funding .amounts { font-size: 0.9rem; }
.funding .amounts b { font-size: 1.2rem; }

.donate .presets a { flex: 1 1 40%; font-size: 1.1rem; }

.keys {
	grid-template-columns: 1fr;
	gap: 0;
}

.keys td.k { padding-right: 0.9rem; }