@charset "UTF-8";

/* Reset — same baseline as theohumphries.com's mystyles.css */
html, body, div, span, h1, h2, h3, p, a, img, ul, li, figure, figcaption, nav {
	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

body {
	background: #000 url("/images/2022/03/dark.jpg") repeat;
	color: #fff;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 62.5%;
}

#page {
	display: flex;
	align-items: flex-start;
	max-width: 1400px;
	margin: 0 auto;
	padding: 40px 25px;
	gap: 40px;
}

#sidebar {
	flex: 0 0 240px;
	position: sticky;
	top: 40px;
}

#site-logo img {
	width: 160px; height: 160px;
	margin: 0 auto 20px;
}

#sidebar nav a {
	display: block;
	padding: 10px 12px;
	font-size: 1.4em;
	color: #8c8c8c;
	text-decoration: none;
	line-height: 1.4em;
}
#sidebar nav a:hover, #sidebar nav a:active, #sidebar nav a.active { color: #fff; }

#content { flex: 1 1 auto; min-width: 0; text-align: left; padding-bottom: 60px; }

h1 {
	font-size: 2em;
	color: #fff;
	padding-bottom: 20px;
	line-height: 1.3em;
	letter-spacing: 0.02em;
}

p {
	font-size: 1.4em;
	color: #fff;
	line-height: 1.8em;
	padding-bottom: 20px;
	max-width: 70ch;
}

em { font-style: italic; }
strong { font-weight: bold; }
a:link, a:visited { color: #8c8c8c; }
a:hover, a:active { color: #fff; }

figure { margin: 0 0 20px; max-width: 700px; }
figure img { width: 100%; border-radius: 2px; }

/* Homepage gallery: dense grid of every figure, each linking nowhere on its
   own (this mirrors the original — the gallery is a scroll-through, and
   each toy's own page is reached via the nav). */
.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 12px;
}
.gallery img { border-radius: 2px; }

@media (max-width: 900px) {
	#page { flex-direction: column; padding: 20px; gap: 20px; }
	#sidebar { position: static; flex: none; width: 100%; }
	#sidebar nav { display: flex; flex-wrap: wrap; }
	#sidebar nav a { padding: 8px; font-size: 1.2em; }
	h1 { font-size: 1.6em; }
}