:root {
	color-scheme: light;
	--bg: #f8f8f6;
	--paper: #fff;
	--text: #202124;
	--muted: #666b73;
	--line: #d8d9dc;
	--accent: #2459a9;
	--highlight: #dce8fa;
	--shadow: 0 8px 30px rgb(0 0 0 / 8%);
	--font-size: 19px;
	--measure: 42rem;
}

html[data-theme="sepia"] {
	color-scheme: light;
	--bg: #eee7d7;
	--paper: #f8f1df;
	--text: #3b3027;
	--muted: #706050;
	--line: #d5c7aa;
	--accent: #81552d;
	--highlight: #eadbbd;
	--shadow: 0 8px 30px rgb(75 55 20 / 10%);
}

html[data-theme="dark"] {
	color-scheme: dark;
	--bg: #111315;
	--paper: #1b1e21;
	--text: #e8e8e5;
	--muted: #aeb2b7;
	--line: #393e43;
	--accent: #8ab4f8;
	--highlight: #293d58;
	--shadow: none;
}

html[data-size="1"] { --font-size: 15px; }
html[data-size="2"] { --font-size: 17px; }
html[data-size="3"] { --font-size: 19px; }
html[data-size="4"] { --font-size: 21px; }
html[data-size="5"] { --font-size: 24px; }
html[data-width="1"] { --measure: 34rem; }
html[data-width="2"] { --measure: 42rem; }
html[data-width="3"] { --measure: 52rem; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: Georgia, "Times New Roman", serif;
	font-size: var(--font-size);
	line-height: 1.72;
	transition: background-color .2s, color .2s;
}

.skip-link, .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.skip-link:focus {
	position: fixed;
	top: .5rem;
	left: .5rem;
	z-index: 100;
	width: auto;
	height: auto;
	clip: auto;
	margin: 0;
	padding: .6rem .9rem;
	background: var(--paper);
	color: var(--text);
}

.reader-toolbar {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 3.6rem;
	padding: .5rem clamp(.75rem, 3vw, 2rem);
	border-bottom: 1px solid var(--line);
	background: var(--paper);
	background: color-mix(in srgb, var(--paper) 92%, transparent);
	backdrop-filter: blur(12px);
	font: 600 14px/1.2 system-ui, sans-serif;
}
.reader-back { color: var(--accent); text-decoration: none; }
.reader-controls, .reader-control-group { display: flex; align-items: center; gap: .25rem; }
.reader-controls { flex-wrap: wrap; justify-content: flex-end; }
.reader-control-group[hidden] { display: none; }
.reader-control-group + .reader-control-group { margin-left: .5rem; padding-left: .65rem; border-left: 1px solid var(--line); }
button {
	display: inline-grid;
	place-items: center;
	min-width: 2.4rem;
	min-height: 2.4rem;
	padding: .35rem;
	border: 1px solid transparent;
	border-radius: .4rem;
	background: transparent;
	color: var(--text);
	font: 600 14px/1 system-ui, sans-serif;
	cursor: pointer;
}
button:hover { background: var(--bg); }
button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
button[aria-pressed="true"] { border-color: var(--accent); }
.speech-toggle { display: inline-flex; gap: .4rem; padding-inline: .65rem; }
.speech-toggle[aria-pressed="true"] { background: var(--accent); color: var(--paper); }
.speech-option { display: inline-flex; align-items: center; gap: .3rem; margin-left: .25rem; color: var(--muted); font-size: 12px; }
.speech-option select {
	max-width: 10rem;
	min-height: 2.25rem;
	padding: .25rem 1.6rem .25rem .4rem;
	border: 1px solid var(--line);
	border-radius: .35rem;
	background: var(--paper);
	color: var(--text);
	font: 500 13px/1.2 system-ui, sans-serif;
}
.speech-option select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.swatch { width: 1.1rem; height: 1.1rem; border: 1px solid #777; border-radius: 50%; }
.swatch-light { background: #fff; }
.swatch-sepia { background: #f8f1df; }
.swatch-dark { background: #1b1e21; }

.reader-shell {
	width: min(calc(100% - 2rem), calc(var(--measure) + 6rem));
	margin: clamp(1rem, 5vw, 4rem) auto;
	padding: clamp(1.5rem, 5vw, 4rem);
	background: var(--paper);
	box-shadow: var(--shadow);
}
.reader-article { max-width: var(--measure); margin: 0 auto; }
.article-header { margin-bottom: 2.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.site-name, .article-meta { color: var(--muted); font: 600 .76em/1.4 system-ui, sans-serif; letter-spacing: .03em; }
.site-name { text-transform: uppercase; }
h1, h2, h3, h4 { line-height: 1.18; text-wrap: balance; }
h1 { margin: .4rem 0 1rem; font-size: clamp(2em, 6vw, 3.2em); letter-spacing: -.035em; }
h2 { margin-top: 2em; font-size: 1.65em; }
h3 { margin-top: 1.75em; font-size: 1.3em; }
p, ul, ol, blockquote, pre, table, figure { margin: 0 0 1.35em; }
a { color: var(--accent); text-underline-offset: .15em; }
img, video, iframe { max-width: 100%; height: auto; }
figure { margin-left: 0; margin-right: 0; }
.reader-content figure,
.reader-content .wp-caption {
	max-width: 100%;
}
.reader-content figure[style],
.reader-content .wp-caption[style] {
	width: auto !important;
}
.reader-content figure img,
.reader-content .wp-caption img,
.reader-content > img {
	display: block;
	max-width: 100% !important;
	height: auto !important;
	object-fit: contain;
}
.reader-content .aligncenter {
	margin-right: auto;
	margin-left: auto;
}
figcaption { margin-top: .4rem; color: var(--muted); font: .78em/1.5 system-ui, sans-serif; }
blockquote { margin-left: 0; padding-left: 1.25rem; border-left: .25rem solid var(--line); color: var(--muted); font-style: italic; }
pre { overflow-x: auto; padding: 1rem; border: 1px solid var(--line); background: var(--bg); font-size: .8em; line-height: 1.5; }
code { font-size: .84em; }
table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; font: .88em/1.5 system-ui, sans-serif; }
th, td { padding: .6rem; border: 1px solid var(--line); text-align: left; }
.reader-content .is-reading,
.reader-article > .article-header h1.is-reading {
	border-radius: .2rem;
	background: var(--highlight);
	background: color-mix(in srgb, var(--accent) 16%, transparent);
	box-shadow: 0 0 0 .25rem var(--highlight);
	box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--accent) 16%, transparent);
}

@media (max-width: 620px) {
	.reader-toolbar { align-items: flex-start; }
	.reader-back span { display: none; }
	.reader-controls { flex-wrap: wrap; justify-content: flex-end; }
	.reader-control-group + .reader-control-group { margin-left: .15rem; padding-left: .3rem; }
	.speech-controls { flex-basis: 100%; justify-content: flex-end; order: -1; }
	.speech-option span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
	.speech-option select { max-width: 7.5rem; }
	.reader-shell { width: 100%; margin: 0; box-shadow: none; }
}

@media print {
	.reader-toolbar, .skip-link { display: none; }
	body, .reader-shell { background: #fff; color: #000; }
	.reader-shell { width: 100%; margin: 0; padding: 0; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}