.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 14px 16px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ink);
	text-decoration: none;
	font: 650 1.05rem/1.2 var(--font-display);
}

.brand-logo { width: 36px; height: 36px; flex: none; }

.theme-toggle {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--surface);
	cursor: pointer;
}

.theme-toggle:hover { border-color: var(--ink-3); }

.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.icon-moon { fill: currentColor; stroke: none; }

/* Show the moon in light mode (click for dark) and the sun in dark mode. */
.icon-sun { display: none; }
:root[data-theme="dark"] .icon-sun { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .icon-sun { display: block; }
	:root:not([data-theme="light"]) .icon-moon { display: none; }
}

main { max-width: 1240px; margin: 0 auto; padding: 0 16px; }

.intro { max-width: 760px; padding: 12px 0 22px; }
@media (min-width: 901px) {
	.intro { max-width: none; padding-bottom: 14px; }
	.intro h1 { max-width: none; font-size: 2.1rem; margin-bottom: 8px; }
	/* Desktop dek: the whole story sentence, no ellipsis; how-to lines are left to the controls. */
	.lede { max-width: 1000px; }
	.lede .lede-more { display: none; }
	.lede-toggle { display: inline-block; margin-top: 2px; padding: 4px 0; background: none; border: 0; color: var(--accent, #e8833a); font: inherit; font-weight: 600; cursor: pointer; }
}

.eyebrow {
	margin: 0 0 8px;
	color: var(--warm);
	font: 500 0.78rem/1.3 var(--font-mono);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.intro h1 { margin: 0 0 12px; font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem); line-height: 1.1; }

.lede { margin: 0; color: var(--ink-2); font-size: 1.05rem; }

.about {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	padding: 36px 0 12px;
	color: var(--ink-2);
}

.about h2 { margin: 0 0 8px; color: var(--ink); font-size: 1.3rem; }

.about p { margin: 0 0 12px; }

.site-footer {
	max-width: 1240px;
	margin: 0 auto;
	padding: 18px 16px 32px;
	color: var(--ink-3);
	font-size: 0.875rem;
	border-top: 1px solid var(--line);
}
.site-footer .credit { display: block; margin-bottom: 4px; color: var(--ink-2); }

@media (max-width: 760px) {
	.about { grid-template-columns: 1fr; gap: 8px; }
	.brand-text { font-size: 1rem; }
}

.header-actions { display: flex; align-items: center; gap: 8px; }

.sound { position: relative; display: flex; align-items: center; }

.sound-toggle {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--surface);
	cursor: pointer;
}

.sound-toggle:hover { border-color: var(--ink-3); }

.sound-toggle[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }

.sound-pop {
	position: absolute;
	top: 48px;
	right: 0;
	z-index: 20;
	display: grid;
	gap: 4px;
	width: 170px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
	box-shadow: var(--shadow);
	font-size: 0.75rem;
	color: var(--ink-3);
}

.sound-pop input { width: 100%; accent-color: var(--accent); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Phones: clamp the intro so the map and timeline are visible without scrolling past a wall of text. */
.lede-toggle { display: none; }
@media (max-width: 560px) {
	.lede:not(.expanded) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
	.lede-toggle { display: inline-block; margin-top: 2px; min-height: 44px; padding: 0 4px; background: none; border: 0; color: var(--accent, #e8833a); font: inherit; font-weight: 600; cursor: pointer; }
}