@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%;
}

/* Sticky top bar with hamburger toggle — mobile only (shown in the 900px
   breakpoint below). Desktop keeps the always-visible sidebar nav. */
#mobile-bar { display: none; }

#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;
}

/* Title row on every page except the homepage: heading left, Back link
   right-justified on the same line. Capped to the same 700px column as the
   figure/gallery below it, so the Back link lines up with the image's right
   edge rather than the (wider) content area's. */
.page-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	max-width: 700px;
	padding-bottom: 20px;
}
.page-heading h1 { padding-bottom: 0; }
.back-link {
	flex: 0 0 auto;
	font-size: 1.4em;
	color: #8c8c8c;
	text-decoration: none;
	white-space: nowrap;
}
.back-link:hover, .back-link:active { color: #fff; }

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; }

/* Small decorative images on text pages (e.g. about-theo-humphries' ASCII-art
   portrait) — not product photography, so no reason to stretch to the full
   column width. 125px is deliberate, not a guess: the source PNG renders its
   ASCII character rows at ~37px each (748px tall / ~20 lines, measured
   directly from the image), and paragraph text on this page has a 25.2px
   line-height (1.4em font-size * 1.8em line-height, on the 10px root em) —
   183px * (25.2/37) ≈ 125px scales the art so its "characters" read at the
   same size as the surrounding body text. */
.text-figure { max-width: 125px; }

/* Toy pages: one big photo + a thumbnail strip to flip through the rest,
   standing in for the Jetpack Carousel lightbox the original site used.
   Swiping/arrow-keying over the main photo flips between thumbs (js/gallery.js). */
.figure-gallery { max-width: 700px; margin-bottom: 20px; }

/* position:relative + overflow:hidden give js/gallery.js's sliding transition
   somewhere to happen: while animating, it locks the container's height,
   promotes both the outgoing and incoming img to .sliding (position:absolute,
   stacked on top of each other), then removes .sliding from the winner once
   the transition ends — back to a plain normal-flow image at rest. */
.figure-main { position: relative; overflow: hidden; touch-action: pan-y; }
.figure-main img { width: 100%; border-radius: 2px; }
.figure-main img.sliding { position: absolute; top: 0; left: 0; }

.figure-thumbs {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	overflow-x: auto;
	padding-bottom: 4px;
}

.thumb {
	flex: 0 0 auto;
	width: 64px;
	padding: 0;
	background: none;
	border: 2px solid transparent;
	border-radius: 2px;
	cursor: pointer;
	opacity: 0.6;
}
.thumb img { border-radius: 1px; }
.thumb:hover { opacity: 1; }
.thumb.active { border-color: #fff; opacity: 1; }

/* Homepage gallery: every photo, each linking to its toy's own page. */
.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 12px;
}
.gallery a { display: block; cursor: pointer; }
.gallery img { border-radius: 2px; transition: opacity 0.15s ease, transform 0.15s ease; }
.gallery a:hover img, .gallery a:focus-visible img { opacity: 0.85; transform: scale(1.02); }

@media (max-width: 900px) {
	/* The big in-sidebar logo is replaced by the mobile bar's mini one. */
	#mobile-bar {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		position: sticky;
		top: 0;
		z-index: 30;
		padding: 12px 20px;
		background: #000 url("/images/2022/03/dark.jpg") repeat;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	}
	.mobile-logo { grid-column: 2; justify-self: center; }
	.mobile-logo img { width: 36px; height: 36px; }
	.mobile-back {
		grid-column: 1;
		justify-self: start;
		font-size: 1em;
		color: #8c8c8c;
		text-decoration: none;
		white-space: nowrap;
	}
	.mobile-back:hover, .mobile-back:active { color: #fff; }
	#nav-toggle { grid-column: 3; justify-self: end; }
	.page-heading .back-link { display: none; }

	#nav-toggle {
		width: 30px;
		height: 22px;
		padding: 0;
		background: none;
		border: none;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	#nav-toggle span {
		display: block;
		height: 2px;
		background: #fff;
		border-radius: 1px;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}
	#nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
	#nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	#nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

	/* align-items:flex-start (set for the desktop side-by-side layout) means
	   shrink-to-fit width once flex-direction flips to column — #content
	   would size to its widest descendant (the thumbnail strip) rather than
	   the viewport, overflowing off the right edge. Stretch fills it properly. */
	#page { flex-direction: column; align-items: stretch; padding: 20px; gap: 20px; }
	#site-logo { display: none; }
	/* Collapsed by default; js/nav.js toggles .open on hamburger click.
	   Pushes page content down rather than overlaying it — no backdrop or
	   scroll-locking to manage. .no-js is the fallback if JS fails to load
	   (see the inline script in <head>): without it, #sidebar would stay
	   permanently hidden with no way to open it. */
	#sidebar { position: static; flex: none; width: 100%; display: none; }
	#sidebar.open, .no-js #sidebar { display: block; }
	#sidebar nav { display: flex; flex-direction: column; }
	#sidebar nav a { padding: 10px 8px; font-size: 1.3em; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
	h1 { font-size: 1.6em; }

	/* Fill the space between the sticky mobile bar and the thumbnail strip,
	   instead of the image's own natural aspect-ratio height. Without this,
	   every swipe swaps in a photo with a different natural height, which
	   reflows everything below it and reads as the page "scrolling up a
	   little" mid-swipe. object-fit:contain here means a fixed-size box
	   regardless of which photo is showing — portrait or landscape, they
	   all fit without cropping or distortion. 140px is the sticky bar plus
	   the title row plus #page's padding — approximate on purpose (longer
	   titles wrap to 2 lines); min-height only sets a floor, so it doesn't
	   need to be exact. */
	.figure-gallery { display: flex; flex-direction: column; min-height: calc(100vh - 140px); min-height: calc(100dvh - 140px); }
	.figure-main { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
	.figure-main img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
	.figure-main img.sliding { width: 100%; height: 100%; }
	.figure-thumbs { flex: 0 0 auto; }
}

@media (max-width: 600px) {
	#page { padding: 12px; gap: 12px; }
	#sidebar nav a { padding: 8px; font-size: 1.15em; }
	h1 { font-size: 1.4em; padding-bottom: 12px; }
	p { font-size: 1.3em; padding-bottom: 14px; }
	.gallery { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
	.thumb { width: 52px; }
	.figure-thumbs { gap: 6px; padding: 8px 0; }
}