/* Gustave Le Bon — multi-book reading library
   Warm neutral "paper" palette for long-form reading. */
:root {
	--paper: #f4f1e9;
	--paper-raised: #efeadf;
	--paper-card: #faf7f0;
	--ink: #2b2822;
	--ink-soft: #5f594e;
	--ink-faint: #8a8272;
	--rule: #ddd6c6;
	--accent: #7c5a3a;
	--accent-soft: rgba(124, 90, 58, 0.12);
	--sidebar-w: 330px;
	--measure: 40rem;
	--serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
	:root {
		--paper: #1c1a17;
		--paper-raised: #232019;
		--paper-card: #252119;
		--ink: #e6e0d3;
		--ink-soft: #b3ab9a;
		--ink-faint: #857d6c;
		--rule: #35312a;
		--accent: #c79a68;
		--accent-soft: rgba(199, 154, 104, 0.16);
	}
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--serif);
	font-size: 19px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.layout { display: flex; }
a { color: inherit; }

/* ---------- Sidebar / library nav ---------- */
#sidebar {
	width: var(--sidebar-w);
	flex: 0 0 var(--sidebar-w);
	height: 100vh;
	position: sticky;
	top: 0;
	overflow-y: auto;
	background: var(--paper-raised);
	border-right: 1px solid var(--rule);
	font-family: var(--sans);
	scrollbar-width: thin;
}
.nav-inner { padding: 1.75rem 1rem 4rem; }

/* Language switch */
.lang-switch {
	display: flex;
	gap: 0.25rem;
	margin: 0 0.35rem 1.4rem;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 8px;
	padding: 0.2rem;
}
.lang-opt {
	flex: 1;
	text-align: center;
	font-family: var(--sans);
	font-size: 0.76rem;
	padding: 0.32rem 0.2rem;
	border-radius: 6px;
	text-decoration: none;
	color: var(--ink-soft);
	transition: background 0.12s, color 0.12s;
}
.lang-opt:hover { color: var(--ink); background: var(--accent-soft); }
.lang-opt.current { background: var(--accent); color: #fff; font-weight: 600; }
@media (prefers-color-scheme: dark) { .lang-opt.current { color: #1c1a17; } }
.badge-todo { background: transparent; border: 1px solid var(--rule); color: var(--ink-faint); }
.site-title {
	display: block;
	font-family: var(--serif);
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.15;
	text-decoration: none;
	color: var(--ink);
	margin: 0 0.35rem 1.4rem;
}
.site-title span {
	display: block;
	font-family: var(--sans);
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.03em;
	color: var(--ink-faint);
	margin-top: 0.25rem;
}

.nav-book { border-top: 1px solid var(--rule); }
.nav-book:last-child { border-bottom: 1px solid var(--rule); }
.nav-book > summary {
	list-style: none;
	cursor: pointer;
	padding: 0.6rem 0.5rem 0.6rem 0.6rem;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	transition: background 0.12s;
}
.nav-book > summary::-webkit-details-marker { display: none; }
.nav-book > summary::before {
	content: "›";
	color: var(--ink-faint);
	font-size: 0.9rem;
	transition: transform 0.15s;
	margin-right: 0.15rem;
}
.nav-book[open] > summary::before { transform: rotate(90deg); }
.nav-book > summary:hover { background: var(--accent-soft); }
.nav-book-title {
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.25;
	flex: 1;
	color: var(--ink);
}
.nav-book.current > summary .nav-book-title { color: var(--accent); }
.nav-year { font-size: 0.72rem; color: var(--ink-faint); flex: 0 0 auto; }

.nav-chapters { padding: 0.15rem 0 0.5rem 0.55rem; }
.nav-group {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0.6rem 0 0.2rem 0.35rem;
}
.nav-chapter {
	display: block;
	padding: 0.28rem 0.5rem 0.28rem 0.5rem;
	margin: 0.05rem 0;
	border-left: 2px solid transparent;
	border-radius: 0 4px 4px 0;
	text-decoration: none;
	color: var(--ink-soft);
	font-size: 0.8rem;
	line-height: 1.3;
}
.nav-chapter.lvl3 { padding-left: 1.35rem; font-size: 0.76rem; color: var(--ink-faint); }
.nav-chapter:hover { background: var(--accent-soft); color: var(--ink); }
.nav-chapter.active {
	background: var(--accent-soft);
	color: var(--ink);
	border-left-color: var(--accent);
	font-weight: 600;
}

/* ---------- Main ---------- */
main { flex: 1 1 auto; min-width: 0; }
main.reader, main.home {
	padding: 4rem clamp(1.25rem, 5vw, 4rem) 6rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}
main.reader > *, main.home > * { width: 100%; max-width: var(--measure); }

/* ---------- Home / library ---------- */
.home-hero { text-align: center; margin-bottom: 3.5rem; }
.hero-portrait { margin: 0 0 1.4rem; }
.hero-portrait img {
	height: 200px;
	width: auto;
	border-radius: 7px;
	border: 1px solid var(--rule);
	box-shadow: 0 3px 14px rgba(0, 0, 0, 0.2);
	filter: sepia(0.12);
}
.hero-portrait figcaption {
	margin-top: 0.6rem;
	font-family: var(--sans);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--ink-faint);
}
.home-hero h1 {
	font-size: clamp(2.2rem, 6vw, 3.2rem);
	margin: 0 0 0.6rem;
	letter-spacing: -0.01em;
}
.hero-sub { color: var(--ink-soft); font-size: 1.05rem; margin: 0 auto; max-width: 34rem; }

.section-label {
	font-family: var(--sans);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-faint);
	border-bottom: 1px solid var(--rule);
	padding-bottom: 0.6rem;
	margin: 0 0 1.5rem;
}
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0.9rem;
}
.card {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.1rem 1.15rem 1.2rem;
	background: var(--paper-card);
	border: 1px solid var(--rule);
	border-radius: 9px;
	text-decoration: none;
	color: var(--ink);
	transition: transform 0.14s, box-shadow 0.14s, border-color 0.14s;
}
.card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
	border-color: var(--accent);
}
.card-year { font-family: var(--sans); font-size: 0.72rem; color: var(--accent); letter-spacing: 0.05em; }
.card-title { font-size: 1.12rem; font-weight: 700; line-height: 1.2; }
.card-meta {
	font-family: var(--sans);
	font-size: 0.74rem;
	color: var(--ink-faint);
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.badge {
	font-size: 0.62rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--accent-soft);
	color: var(--accent);
	padding: 0.1rem 0.4rem;
	border-radius: 4px;
}

/* ---------- Reading page ---------- */
.book-head { text-align: center; margin-bottom: 2.5rem; }
.book-kicker {
	font-family: var(--sans);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin: 0 0 0.6rem;
}
.book-head h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); line-height: 1.1; margin: 0 0 0.4rem; }
.book-author { font-style: italic; color: var(--ink-soft); margin: 0; }
.ocr-note {
	font-family: var(--sans);
	font-size: 0.78rem;
	color: var(--ink-faint);
	background: var(--accent-soft);
	border-radius: 7px;
	padding: 0.6rem 0.9rem;
	margin: 1.2rem auto 0;
	max-width: 32rem;
}
.part-divider {
	text-align: center;
	font-family: var(--sans);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 4rem 0 1rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--rule);
}
.chapter { scroll-margin-top: 1.5rem; }
.chapter-title {
	margin: 3rem 0 1.5rem;
	font-size: 1.35rem;
	line-height: 1.25;
	font-weight: 700;
	color: var(--ink);
}
h3.chapter-title { font-size: 1.12rem; color: var(--ink-soft); }
.chapter-body p { margin: 0 0 1.1rem; text-wrap: pretty; }
.aphorism { margin: 0; }
.aphorism-sep { text-align: center; color: var(--ink-faint); font-size: 0.85rem; margin: 1.15rem 0; user-select: none; }

.book-footer, .site-footer {
	margin-top: 4rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--rule);
	font-family: var(--sans);
	font-size: 0.8rem;
	color: var(--ink-faint);
	text-align: center;
}
.book-footer a { color: var(--accent); text-decoration: none; }

/* ---------- Ad rail (subtle, right side, wide screens only) ---------- */
.ad-rail {
	flex: 0 0 200px;
	width: 200px;
	padding: 2rem 1rem;
}
.ad-sticky { position: sticky; top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.ad-label {
	font-family: var(--sans);
	font-size: 0.6rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-faint);
	opacity: 0.7;
}
@media (max-width: 1200px) {
	.ad-rail { display: none; }
}

/* ---------- Mobile ---------- */
#nav-toggle {
	display: none;
	position: fixed;
	top: 0.85rem;
	left: 0.85rem;
	z-index: 30;
	font-family: var(--sans);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ink);
	background: var(--paper-raised);
	border: 1px solid var(--rule);
	border-radius: 7px;
	padding: 0.45rem 0.8rem;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
#nav-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 18; border: 0; }
@media (max-width: 860px) {
	#nav-toggle { display: block; }
	#sidebar {
		position: fixed; top: 0; left: 0; z-index: 20; height: 100vh;
		transform: translateX(-100%); transition: transform 0.22s ease;
		box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
	}
	body.nav-open #sidebar { transform: translateX(0); }
	.nav-inner { padding-top: 3.5rem; }
	main.reader, main.home { padding-top: 4rem; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	#sidebar { transition: none; }
}