/* ============================================================
   style.css — Tux & Transistors / interruptlab.com
   80vw two-column layout. Rounded white panels on dark bg.
   CSS-only hamburger on mobile. Zero JavaScript.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
	min-height: 100vh;
	padding: 40px 0 72px;
	font-family: "Palatino Linotype", Palatino, "Book Antiqua",
	             "Georgia Pro", Georgia, "Times New Roman", serif;
	color: #1a1a18;
	background-color: #0d1a0f;
	background-image: url("bg.svg");
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

/* ── 80vw fluid wrapper ── */
.layout {
	width: 80vw;
	min-width: 480px;
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ── banner card ── */
.banner {
	background: #ffffff;
	border-radius: 8px;
	overflow: hidden;
	line-height: 0;
}
.banner img { display: block; width: 100%; height: auto; }

/* ── two-column row ── */
.columns {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

/* ── main content — 2/3 ── */
.main {
	flex: 2 1 0%;
	min-width: 0;
	background: #ffffff;
	padding: 64px 5% 72px;
	border-radius: 8px;
}

/* ── sidebar — 1/3 ── */
.sidebar {
	flex: 1 1 0%;
	min-width: 0;
	background: #ffffff;
	padding: 36px 4% 40px;
	border-radius: 8px;
	position: sticky;
	top: 40px;
}

/* ── hamburger (hidden on desktop) ── */
#nav-toggle { display: none; }
.nav-toggle-label { display: none; }
.mobile-nav { display: none; }

/* ── links ── */
a       { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── sidebar internals ── */
.sidebar-section { margin-bottom: 32px; }
.sidebar-section:last-child { margin-bottom: 0; }

.sidebar-heading {
	font-size: 0.65rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #aaa49a;
	padding-bottom: 8px;
	border-bottom: 1px solid #e8e3dc;
	margin-bottom: 12px;
}
.sidebar-title { font-size: 1.1rem; font-weight: 400; color: #1a1a18; margin-bottom: 6px; }
.sidebar-desc  { font-size: 0.82rem; font-style: italic; color: #888078; line-height: 1.5; }

.nav-list { list-style: none; }
.nav-list li + li { border-top: 1px solid #f0ece6; }
.nav-list a {
	display: flex;
	align-items: baseline;
	padding: 7px 0;
	font-size: 0.88rem;
	color: #333028;
	gap: 0.55em;
}
.nav-list a:hover { color: #b87333; text-decoration: none; }
.nav-num { font-size: 0.7rem; font-style: italic; color: #bbb5ab; flex: 0 0 1.8em; }

.link-list { list-style: none; }
.link-list li + li { margin-top: 6px; }
.link-list a { font-size: 0.85rem; color: #555048; }
.link-list a:hover { color: #b87333; }

.sidebar-foot {
	margin-top: 32px;
	padding-top: 16px;
	border-top: 1px solid #e8e3dc;
	font-size: 0.7rem;
	color: #c0b8ac;
	line-height: 1.6;
}

/* ── title page ── */
.title-page { text-align: center; padding: 16px 0 52px; }
.title-page .site-name {
	font-size: 2.1rem; font-weight: 400;
	letter-spacing: -0.01em; line-height: 1.18;
}
.title-page .descriptor { margin-top: 12px; font-style: italic; font-size: 1rem; color: #666055; }
.title-page .author     { margin-top: 28px; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: #aaa49a; }

.rule { border: none; border-top: 1px solid #d8d1c5; margin: 36px 0; }
.rule.short { width: 56px; margin: 28px auto; border-color: #c8c0b4; }

/* ── table of contents ── */
.toc-heading {
	font-size: 0.68rem; letter-spacing: 0.26em;
	text-transform: uppercase; color: #aaa49a;
	text-align: center; margin-bottom: 24px;
}
.toc { list-style: none; }
.toc li + li { border-top: 1px solid #ece8e2; }
.toc a { display: flex; align-items: baseline; padding: 11px 0; color: #1a1a18; }
.toc a:hover .toc-title { color: #b87333; }
.toc-num   { flex: 0 0 2.2em; font-size: 0.78rem; color: #bbb5ab; font-style: italic; }
.toc-title { flex: 1; font-size: 0.97rem; line-height: 1.35; }
.toc-sub   { display: block; font-size: 0.8rem; font-style: italic; color: #888078; margin-top: 2px; }

/* ── chapter ── */
.chapter-meta { text-align: center; margin-bottom: 40px; }
.chapter-label { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: #aaa49a; }
.chapter-title { margin-top: 9px; font-size: 1.75rem; font-weight: 400; line-height: 1.2; }
.chapter-subtitle { margin-top: 7px; font-style: italic; font-size: 1rem; color: #666055; }

/* ── prose ── */
.prose p {
	line-height: 1.78;
	margin-bottom: 1em;
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}
.prose p + p { text-indent: 1.4em; margin-top: 0; }
.prose p:first-child { text-indent: 0; }
.prose .opening::first-letter {
	float: left;
	font-size: 3.3em;
	line-height: 0.78;
	padding-right: 0.09em;
	padding-top: 0.05em;
	color: #b87333;
}
.dinkus {
	text-align: center; letter-spacing: 0.55em;
	color: #c8c0b4; margin: 1.7em 0;
	font-size: 0.88rem; padding-left: 0.55em;
}
blockquote {
	margin: 1.3em 1.8em; padding-left: 1em;
	border-left: 2px solid #d8d1c5;
	font-style: italic; color: #555048; line-height: 1.7;
}
.back { margin-top: 48px; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: #aaa49a; }
.back a { color: #b87333; }
.back a:hover { text-decoration: underline; }

/* ── disclaimer style ── */
.disclaimer {
	margin-top: 2em;
	padding: 0.9em 1.2em;
	border-left: 3px solid #d8d1c5;
	background: #faf8f4;
	font-size: 0.82rem;
	color: #888078;
	font-style: italic;
	line-height: 1.6;
}

/* ── mobile ── */
@media (max-width: 740px) {
	body { padding: 0 0 48px; }
	.layout { width: 100%; min-width: 0; gap: 12px; }
	.columns { flex-direction: column; gap: 0; }
	.sidebar { display: none; position: static; }
	.main { padding: 0 0 44px; border-radius: 0; }
	.banner { border-radius: 0; }

	.nav-toggle-label {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		position: fixed;
		top: 16px; right: 16px;
		z-index: 200;
		width: 40px; height: 40px;
		background: #ffffff;
		border: 1px solid #d8d1c5;
		padding: 8px;
		cursor: pointer;
	}
	.nav-toggle-label span { display: block; height: 2px; background: #1a1a18; transition: transform 0.2s, opacity 0.2s; }

	.mobile-nav {
		display: block;
		position: fixed;
		top: 0; right: 0; bottom: 0;
		width: 72vw; max-width: 300px;
		background: #ffffff;
		padding: 64px 28px 40px;
		z-index: 100;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform 0.25s ease;
		border-left: 1px solid #e8e3dc;
	}
	#nav-toggle:checked ~ .mobile-nav { transform: translateX(0); }
	#nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	#nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) { opacity: 0; }
	#nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	.mobile-nav .sidebar-section { margin-bottom: 28px; }
	.mobile-nav .sidebar-heading {
		font-size: 0.65rem; letter-spacing: 0.28em;
		text-transform: uppercase; color: #aaa49a;
		padding-bottom: 8px; border-bottom: 1px solid #e8e3dc; margin-bottom: 12px;
	}
	.mobile-nav .nav-list { list-style: none; }
	.mobile-nav .nav-list li + li { border-top: 1px solid #f0ece6; }
	.mobile-nav .nav-list a { display: flex; align-items: baseline; padding: 9px 0; font-size: 1rem; color: #333028; gap: 0.55em; }
	.mobile-nav .nav-list a:hover { color: #b87333; }
	.mobile-nav .link-list { list-style: none; }
	.mobile-nav .link-list li + li { margin-top: 8px; }
	.mobile-nav .link-list a { font-size: 0.95rem; color: #555048; }
	.mobile-nav .sidebar-foot { margin-top: 28px; padding-top: 14px; border-top: 1px solid #e8e3dc; font-size: 0.7rem; color: #c0b8ac; line-height: 1.6; }

	.main .title-page, .main .prose, .main .chapter-meta,
	.main .back, .main .toc-heading, .main .toc, .main .rule,
	.main .disclaimer { padding-left: 22px; padding-right: 22px; }
	.main .title-page { padding-top: 56px; }
	.title-page .site-name { font-size: 1.65rem; }
	.chapter-title { font-size: 1.4rem; }
}