/* ==========================================================================
   Picobloc — single stylesheet.
   Same identity as before (black ground, light Lato), rebuilt on flex/grid
   so it holds up on a phone, with a real type scale instead of <br> stacks.
   ========================================================================== */

:root {
	--bg: #000;
	--fg: #f2f2f2;
	--fg-dim: #cfcfcf;
	--muted: #8c8c8c;
	--rule: #262626;
	--panel: #0d0d0d;

	--font-ui: "Lato", system-ui, sans-serif;
	--font-prose: "Work Sans", system-ui, sans-serif;

	/* Type scale — 1.25 ratio, fluid between phone and desktop. */
	--step--1: 0.8125rem;
	--step-0: clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);
	--step-1: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
	--step-2: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
	--step-3: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);

	/* Spacing rhythm — every gap is a multiple of one unit. */
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.75rem;
	--space-4: 3rem;
	--space-5: 5rem;

	--measure: 68ch;
	--max: 1120px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-ui);
	font-weight: 300;
	font-size: var(--step-0);
	line-height: 1.6;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

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

h1, h2, h3, h4 {
	font-weight: 300;
	line-height: 1.2;
	margin: 0;
	letter-spacing: 0.02em;
}

h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }

p { margin: 0; }

a {
	color: var(--fg);
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease;
}

a:hover { color: #fff; }

:focus-visible {
	outline: 2px solid var(--fg);
	outline-offset: 3px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	padding: var(--space-1) var(--space-2);
	background: var(--fg);
	color: var(--bg);
	z-index: 100;
}

.skip-link:focus { left: 0; }

/* --------------------------------------------------------------- header --- */

.site-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--rule);
}

.wordmark {
	font-size: var(--step-1);
	letter-spacing: 0.28em;
	text-indent: 0.28em; /* balances the trailing letter-spacing */
}

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav li { position: relative; }

.site-nav a {
	display: block;
	padding: var(--space-1) var(--space-2);
	font-size: var(--step--1);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fg-dim);
	border-bottom: 1px solid transparent;
}

.site-nav a:hover { color: #fff; border-bottom-color: var(--fg); }

.site-nav a[aria-current="page"] {
	color: #fff;
	border-bottom-color: var(--fg);
}

/* Submenus are shortcuts to pages that are also listed on the parent page,
   so they are simply omitted on touch/narrow screens rather than stacked. */
.site-nav .submenu { display: none; }

@media (hover: hover) and (min-width: 40rem) {
	.site-nav .submenu {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: max-content;
		padding: var(--space-1) 0;
		background: var(--panel);
		border: 1px solid var(--rule);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.15s ease;
		z-index: 20;
	}

	.site-nav li:hover > .submenu,
	.site-nav li:focus-within > .submenu {
		opacity: 1;
		visibility: visible;
	}

	.site-nav .submenu a {
		text-transform: none;
		letter-spacing: 0.04em;
		white-space: nowrap;
		border-bottom: none;
	}

	.site-nav .submenu a:hover { background: #1a1a1a; }
}

/* ----------------------------------------------------------------- main --- */

main {
	flex: 1;
	width: 100%;
	max-width: var(--max);
	margin: 0 auto;
	padding: var(--space-4) var(--space-3);
}

.page-title {
	font-size: var(--step-2);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: var(--space-4);
}

.lede {
	max-width: var(--measure);
	margin: 0 auto var(--space-4);
	font-size: var(--step-1);
	color: var(--fg-dim);
}

.hero {
	width: 100%;
	margin-bottom: var(--space-4);
}

/* Equal-width feature columns — collapse to one column on a phone. */
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--space-4) var(--space-3);
}

.grid h2,
.grid h3 {
	margin-bottom: var(--space-2);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-size: var(--step-1);
}

/* Bulleted feature lists. */
.ticks {
	max-width: var(--measure);
	margin: 0 auto;
	padding-left: 1.1em;
	list-style: disc;
	color: var(--fg-dim);
}

.ticks li { margin-bottom: var(--space-1); }

.grid .ticks { margin: 0; }

/* Alternating image/text rows (the add-in feature tour). */
.feature {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: var(--space-3);
	align-items: center;
	padding: var(--space-4) 0;
	border-top: 1px solid var(--rule);
}

.feature:first-of-type { border-top: none; }

.feature h3 {
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: var(--space-2);
}

.feature p { color: var(--fg-dim); max-width: 46ch; }

/* Every row is authored heading-then-image so the reading order makes sense;
   `reverse` only moves the image to the left visually, on wide screens. */
@media (min-width: 40rem) {
	.feature.reverse > img { order: -1; }
}

/* Project cards. */
.project {
	padding: var(--space-4) 0;
	border-top: 1px solid var(--rule);
}

.project:first-of-type { border-top: none; }

.project h3 {
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.project .meta {
	color: var(--muted);
	font-size: var(--step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: var(--space-1) 0 var(--space-2);
}

.project p { color: var(--fg-dim); max-width: var(--measure); }

.project img { margin-top: var(--space-3); }

/* Standalone illustration below a block of copy. */
.showcase {
	margin-top: var(--space-4);
}

.showcase img { margin: 0 auto; }

/* Horizontal filmstrip of page screenshots. */
.filmstrip {
	display: flex;
	gap: var(--space-2);
	overflow-x: auto;
	padding-bottom: var(--space-2);
	scroll-snap-type: x mandatory;
}

/* The screenshots share a portrait aspect, so pinning the height keeps the
   strip even and gives lazy images a stable box to load into. */
.filmstrip img {
	flex: 0 0 auto;
	height: min(38rem, 75vh);
	width: auto;
	max-width: none;
	scroll-snap-align: start;
	border: 1px solid var(--rule);
	background: var(--panel);
}

/* Index lists (blog posts, primers). */
.index-list {
	max-width: var(--measure);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.index-list li { border-top: 1px solid var(--rule); }

.index-list li:last-child { border-bottom: 1px solid var(--rule); }

.index-list a {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-2);
	align-items: baseline;
	justify-content: space-between;
	padding: var(--space-2) var(--space-1);
}

.index-list a:hover { background: var(--panel); }

.index-list .num {
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	margin-right: var(--space-2);
}

.index-list .date {
	color: var(--muted);
	font-size: var(--step--1);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ---------------------------------------------------------------- prose --- */

.article {
	max-width: var(--measure);
	margin: 0 auto;
	font-family: var(--font-prose);
	color: var(--fg-dim);
	text-align: left;
}

.article-header {
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--rule);
}

.article-header h1 {
	font-family: var(--font-ui);
	font-size: var(--step-2);
	margin-bottom: var(--space-1);
}

.byline {
	color: var(--muted);
	font-family: var(--font-ui);
	font-size: var(--step--1);
	letter-spacing: 0.06em;
}

.article h3 {
	font-family: var(--font-ui);
	color: var(--fg);
	margin: var(--space-4) 0 var(--space-2);
}

.article h4 {
	font-family: var(--font-ui);
	color: var(--fg);
	margin: var(--space-3) 0 var(--space-1);
}

.article p { margin-bottom: var(--space-2); }

.article ol,
.article ul {
	margin: 0 0 var(--space-2);
	padding-left: 1.4em;
}

.article li { margin-bottom: var(--space-1); }

.article a {
	color: var(--fg);
	border-bottom: 1px solid var(--muted);
}

.article a:hover { border-bottom-color: var(--fg); }

.article img {
	margin: var(--space-3) auto var(--space-1);
	max-width: min(100%, 34rem);
}

.article blockquote {
	margin: var(--space-3) 0;
	padding-left: var(--space-2);
	border-left: 2px solid var(--rule);
	color: var(--muted);
	font-style: italic;
}

.article sup { font-size: 0.7em; }

.caption {
	color: var(--muted);
	font-size: var(--step--1);
	text-align: center;
	margin-bottom: var(--space-3);
}

/* --------------------------------------------------------------- footer --- */

.site-footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	justify-content: space-between;
	max-width: var(--max);
	width: 100%;
	margin: var(--space-5) auto 0;
	padding: var(--space-2) var(--space-3);
	border-top: 1px solid var(--rule);
	color: var(--muted);
	font-size: var(--step--1);
	letter-spacing: 0.08em;
}

.site-footer a { color: var(--muted); }

.site-footer a:hover { color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}