/* ── FONTS ────────────────────────────────────────────────────────────────── */
@font-face {
	font-family: 'chakrapetch-regular';
	src: url('fonts/Chakra_Petch/ChakraPetch-Regular.ttf') format('truetype');
}

/* ── DESIGN TOKENS ────────────────────────────────────────────────────────── */
:root {
	--paper: #080C0E;
	--bg: #080C0E;
	--surface: #0D1418;
	--surfaceEl: #111C22;
	--surfaceHover: #162028;
	--ink: #DCE8EC;
	--charcoal: #DCE8EC;
	--bodyText: #B0C4CC;
	--body: #B0C4CC;
	--muted: #7A9AAA;
	--faint: #3A5060;
	--amber: #C89A14;
	--amberLight: #E8A020;
	--phosphor: #00D68A;
	--mgreen: #00D68A;
	--cyan: #00B8D4;
	--navy: #00B8D4;
	--rust: #E05A3A;
	--border: #1E2E38;
	--borderMuted: #152028;
	--callout: rgba(0,214,138,0.06);
	--calloutBorder: #00D68A;
	--amberCallout: rgba(200,154,20,0.06);
	--amberCalloutBorder: #C89A14;
	--fontDisplay: 'chakrapetch-regular';
	--fontBody: 'chakrapetch-regular';
	--fontMono: 'chakrapetch-regular';
}

/* ── RESET ────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

::selection {
	background: rgba(0,214,138,0.2);
	color: var(--ink);
}

/* ── BASE ─────────────────────────────────────────────────────────────────── */
body {
	font-family: 'chakrapetch-regular';
	background-color: var(--paper);
	color: var(--bodyText);
	transition: background-color 0.3s ease, color 0.3s ease;
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.6;
	min-height: 100vh;
	background-image: radial-gradient(circle, #1E2E38 1px, transparent 1px);
	background-size: 28px 28px;
}

h1, h2, h3, h4 {
	font-family: 'chakrapetch-regular';
	color: var(--charcoal);
	transition: color 0.3s ease;
	text-shadow: 0 0 40px rgba(0,214,138,0.12);
}

/* ── FONT UTILITIES ───────────────────────────────────────────────────────── */
.font-display { font-family: var(--fontDisplay); }
.font-body    { font-family: var(--fontBody); }
.font-mono    { font-family: var(--fontMono); }

/*.text-xs {
	font-size: 0.95rem !important;
	line-height: 1rem;
}*/
/*.text-sm {
	font-size: 0.95rem !important;
	line-height: 1.25rem;
}*/
/* ── PROGRESS BARS ────────────────────────────────────────────────────────── */
#progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 0%;
	height: 2px;
	background: linear-gradient(90deg, var(--phosphor), var(--amber));
	z-index: 9999;
	transition: width 0.1s linear;
}

#progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 0%;
	height: 2px;
	background: linear-gradient(90deg, var(--phosphor), var(--amber));
	z-index: 1001;
	transition: width 0.1s linear;
}

/* ── HEADER ───────────────────────────────────────────────────────────────── */


#header {
	position: fixed;
	top: 2px;
	left: 0;
	right: 0;
	z-index: 1000;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border);
	transition: background-color 0.3s ease;
}

.header-bg-dark {
	background: rgba(8,12,14,0.92);
}

.light-mode .header-bg-dark {
	background: rgba(250,250,247,0.92);
}

.header-gradient {
	height: 1px;
	background: linear-gradient(90deg,transparent,var(--phosphor),var(--amber),transparent)
}

#header-gradient-hp03 {
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--phosphor), var(--amber), transparent);
}



.site-header {
	position: fixed;
	top: 2px;
	left: 0;
	right: 0;
	z-index: 100;
	background: rgba(8,12,14,0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border);
	transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

	.site-header::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 2px;
		background: linear-gradient(90deg, transparent 0%, var(--phosphor) 30%, var(--amber) 70%, transparent 100%);
	}

	.site-header.scrolled {
		box-shadow: 0 1px 12px rgba(0,0,0,0.5);
	}

/* ── NAVIGATION ───────────────────────────────────────────────────────────── */
.nav-link {
	position: relative;
	color: var(--muted);
	text-decoration: none;
	transition: color 0.2s ease;
	padding-bottom: 2px;
}

	.nav-link:hover,
	.nav-link.active {
		color: var(--phosphor);
	}

		.nav-link.active::after {
			content: '';
			position: absolute;
			bottom: -2px;
			left: 0;
			right: 0;
			height: 2px;
			background-color: var(--phosphor);
			border-radius: 1px;
		}

.nav-item {
	display: block;
	padding: 0.5rem 0.75rem;
	border-left: 2px solid var(--border);
	font-size: 0.78rem;
	color: var(--muted);
	text-decoration: none;
	transition: all 0.2s ease;
	cursor: pointer;
}

	.nav-item:hover {
		color: var(--phosphor);
		border-left-color: var(--phosphor);
	}

	.nav-item.active {
		color: var(--ink);
		border-left-color: var(--amber);
	}

/* ── TYPOGRAPHY ───────────────────────────────────────────────────────────── */
.article-title {
	font-family: var(--fontDisplay);
	font-weight: 700;
	font-size: 2.8rem;
	color: var(--ink);
	line-height: 1.2;
}

/* Section entrance */
.article-section {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s ease,transform .7s ease
}

	.article-section.visible {
		opacity: 1;
		transform: translateY(0)
	}

.section-h2 {
	font-family: var(--fontDisplay);
	font-weight: 700;
	font-size: 1.6rem;
	color: var(--ink);
	margin-top: 3rem;
	margin-bottom: 1.25rem;
}

.section-h3 {
	font-family: var(--fontDisplay);
	font-weight: 700;
	font-style: italic;
	font-size: 1.2rem;
	color: var(--amber);
	margin-top: 2rem;
	margin-bottom: 1rem;
}

.body-text {
	font-family: var(--fontBody);
	font-weight: 400;
	font-size: 1.05rem;
	line-height: 1.85;
	color: var(--body);
	max-width: 680px;
	margin-bottom: 1.5rem;
}

.mono-label {
	font-family: var(--fontMono);
	font-weight: 400;
	font-size: 0.75rem;
	color: var(--phosphor);
	letter-spacing: 0.08em;
}

.section-label {
	font-size: 0.75rem;
	color: var(--phosphor);
	letter-spacing: 0.08em;
	margin-bottom: 0.75rem;
}

.footnote-text {
	font-family: var(--fontMono);
	font-size: 0.72rem;
	color: var(--muted);
}

.pull-quote {
	font-family: var(--fontDisplay);
	font-style: italic;
	font-size: 1.3rem;
	color: var(--ink);
	border-left: 4px solid var(--phosphor);
	padding-left: 1.5rem;
	margin: 2.5rem 0;
	max-width: 680px;
	line-height: 1.6;
}
	.pull-quote.visible {
		opacity: 1;
		transform: translateX(0)
	}

.pull-quote-border {
	position: relative;
	border-left: none;
	padding-left: calc(1.5rem + 4px);
}

	.pull-quote-border::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 4px;
		height: 0%;
		background: var(--phosphor);
		transition: height 0.6s ease;
	}

	.pull-quote-border.visible::before {
		height: 100%;
	}

.stat-num {
	font-weight: 700;
	font-size: 2rem;
	color: var(--phosphor);
	line-height: 1.2;
}


.exp-card {
	background: var(--surface);
	border: 1px solid var(--border);
	transition: transform 0.25s,box-shadow 0.25s,border-color 0.25s;
}

	.exp-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 8px 24px rgba(0,214,138,0.08);
	}

.cap-card {
	background: var(--surfaceEl);
	border: 1px solid var(--border);
	padding: 1.5rem;
	transition: transform 0.25s,box-shadow 0.25s;
}

	.cap-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 8px 24px rgba(0,214,138,0.08);
	}


/* ── BUTTONS ──────────────────────────────────────────────────────────────── */
.btn-primary {
	background-color: var(--phosphor);
	color: #080C0E;
	padding: 0.75rem 1.75rem;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.95rem;
	border: none;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.15s ease;
	display: inline-block;
	text-decoration: none;
}

	.btn-primary:hover {
		background-color: #00F09A;
		transform: translateY(-1px);
	}

.btn-ghost {
	color: var(--muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-size: 0.95rem;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0.75rem 0;
	transition: color 0.2s ease;
}

	.btn-ghost:hover {
		color: var(--phosphor);
	}

/* ── CARDS ────────────────────────────────────────────────────────────────── */
.card-surface {
	background-color: var(--surface);
	border: 1px solid var(--border);
	/*border-radius: 10px;*/
	box-shadow: 0 2px 16px rgba(0,0,0,0.4);
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.3s ease, border-color 0.3s ease;
}

	.card-surface:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 32px rgba(0,214,138,0.08);
	}

.card-hover {
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

	.card-hover:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 24px rgba(0,214,138,0.08);
	}

.exp-card {
	background: var(--surfaceEl);
	border: 1px solid var(--border);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	position: relative;
}

	.exp-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 8px 24px rgba(0,214,138,0.08);
	}

.note-card {
	background: var(--surface);
	border: 1px solid var(--border);
	padding: 1.25rem;
	transition: transform .25s,box-shadow .25s;
	cursor: pointer
}

	.note-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 0 16px rgba(0,214,138,0.06)
	}

.more-card {
	background: var(--surface);
	border: 1px solid var(--border);
	padding: 1.25rem;
	transition: border-color 0.3s ease;
}

	.more-card:hover {
		border-color: var(--phosphor);
	}
.comparison-row {
	padding: 2rem 0;
	border-bottom: 1px solid var(--border);
}

	.comparison-row:last-child {
		border-bottom: none;
	}
/* ── CALLOUTS ─────────────────────────────────────────────────────────────── */
.callout {
	background: var(--callout);
	border-left: 3px solid var(--calloutBorder);
	padding: 1.25rem 1.5rem;
}

.callout-large {
	background: var(--callout);
	border-left: 3px solid var(--calloutBorder);
	padding: 1.75rem 2rem;
}

.callout-amber {
	background: rgba(200,154,20,0.08);
	border-left: 3px solid var(--amber);
	padding: 1.25rem 1.5rem;
}

.callout-box {
	background-color: var(--callout);
	border-left: 3px solid var(--phosphor);
	padding: 1rem 1.25rem;
	border-radius: 0 8px 8px 0;
	font-size: 0.95rem;
	color: var(--muted);
	transition: background-color 0.3s ease, color 0.3s ease;
}


.score-cell {
	background: var(--surfaceEl);
	border: 1px solid var(--border);
	padding: 1.25rem;
	text-align: center;
}

.score-cell-title {
	font-size: 0.78rem;
	color: var(--phosphor);
	font-weight: 700;
}

.score-cell-desc {
	font-size: 0.82rem;
	color: var(--muted);
	margin-top: 0.35rem;
}


/* ── DOMAIN PILLS ─────────────────────────────────────────────────────────── */
.domain-pill {
	font-size: 0.65rem;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	letter-spacing: 0.06em;
	font-weight: 400;
	display: inline-block;
}

.domain-cyber        { background-color: rgba(0,184,212,0.15);  color: #00B8D4; }
.domain-space        { background-color: rgba(200,154,20,0.15); color: #C89A14; }
.domain-intelligence { background-color: rgba(0,214,138,0.15);  color: #00D68A; }
.domain-meta         { background-color: var(--surfaceEl); color: var(--muted); border: 1px solid var(--border); }

/* ── UTILITY PILLS ────────────────────────────────────────────────────────── */
.control-pill,
.lang-pill,
.format-pill {
	display: inline-block;
	font-size: 0.72rem;
	padding: 0.15rem 0.5rem;
	margin: 0.15rem;
}

.control-pill { color: var(--phosphor); background: rgba(0,214,138,0.08);  border: 1px solid rgba(0,214,138,0.2); }
.lang-pill    { color: var(--phosphor);     background: rgba(0,214,138,0.08);  border: 1px solid rgba(0,184,212,0.2); }
.format-pill {
	color: var(--phosphor);
	background: rgba(0,214,138,0.08);
	border: 1px solid rgba(0,214,138,0.08);
}

/* ── FLIP CARD ────────────────────────────────────────────────────────────── */
.flip-card {
	perspective: 1000px;
	min-height: 380px;
	cursor: pointer;
}

.flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 380px;
	transition: transform 0.5s ease;
	transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
	transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border-radius: 10px;
	overflow: hidden;
}

.flip-card-back {
	transform: rotateY(180deg);
}

/* ── TOC ──────────────────────────────────────────────────────────────────── */
.toc-item {
	font-family: var(--fontMono);
	font-size: 0.78rem;
	color: var(--muted);
	padding: 0.4rem 0 0.4rem 0.75rem;
	border-left: 2px solid var(--border);
	cursor: pointer;
	transition: color 0.2s, border-left-color 0.2s;
	display: block;
	text-decoration: none;
}

	.toc-item:hover {
		color: var(--phosphor);
		border-left-color: var(--phosphor);
	}

	.toc-item.active {
		color: var(--ink);
		border-left-color: var(--amber);
		font-weight: 500;
	}

/* ── ANIMATIONS ───────────────────────────────────────────────────────────── */
@keyframes pulse-dot {
	0%, 100% { transform: scale(1);   opacity: 1;   }
	50%       { transform: scale(1.4); opacity: 0.4; }
}

@keyframes spin-slow {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.pulse-dot {
	display: inline-block;
	animation: pulse-dot 2s ease-in-out infinite;
	color: var(--phosphor);
}

.spin-slow {
	display: inline-block;
	animation: spin-slow 3s linear infinite;
}

.reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

	.reveal.visible {
		opacity: 1;
		transform: translateY(0);
	}

.section-animate {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

	.section-animate.visible {
		opacity: 1;
		transform: translateY(0);
	}

.fade-in {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

	.fade-in.visible {
		opacity: 1;
		transform: translateY(0);
	}

.fade-in-h2 {
	opacity: 0;
	transform: translateX(-8px) translateY(8px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

	.fade-in-h2.visible {
		opacity: 1;
		transform: translateX(0) translateY(0);
	}

/* ── MISC COMPONENTS ──────────────────────────────────────────────────────── */
.squiggle-sep {
	display: flex;
	justify-content: center;
	padding: 2rem 0;
	opacity: 0.3;
}

.pin-dot {
	width: 14px;
	height: 14px;
	background: var(--phosphor);
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0,214,138,0.3);
	position: absolute;
	top: -7px;
	left: 50%;
	transform: translateX(-50%);
}

.provocation-card {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	opacity: 0;
	transition: opacity 0.4s ease;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1.5rem;
}

	.provocation-card.active { opacity: 1; }

.worth-badge {
	position: relative;
	cursor: help;
}

	.worth-badge .tooltip-text {
		visibility: hidden;
		opacity: 0;
		position: absolute;
		bottom: 130%;
		left: 50%;
		transform: translateX(-50%);
		background: var(--surfaceEl);
		color: var(--ink);
		font-size: 0.65rem;
		padding: 0.35rem 0.65rem;
		border-radius: 4px;
		white-space: nowrap;
		transition: opacity 0.2s ease, visibility 0.2s ease;
		z-index: 20;
		border: 1px solid var(--border);
	}

		.worth-badge .tooltip-text::after {
			content: '';
			position: absolute;
			top: 100%;
			left: 50%;
			transform: translateX(-50%);
			border-width: 4px;
			border-style: solid;
			border-color: var(--surfaceEl) transparent transparent transparent;
		}

	.worth-badge:hover .tooltip-text { visibility: visible; opacity: 1; }

.mobile-menu {
	display: none;
	position: fixed;
	inset: 0;
	background-color: var(--paper);
	z-index: 100;
	flex-direction: column;
	padding: 1.5rem;
	transition: background-color 0.3s ease;
}

	.mobile-menu.open { display: flex; }

#mobile-menu {
	transform: translateX(100%);
	transition: transform 0.3s ease;
}

	#mobile-menu.open { transform: translateX(0); }

#mobile-sidebar {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

	#mobile-sidebar.open { max-height: 600px; }

.dashboard-feature {
	border-left: 2px solid var(--phosphor);
	padding-left: 1rem;
	margin-bottom: 1.25rem;
}

	.dashboard-feature h4 {
		font-weight: 500;
		color: var(--ink);
		font-size: 1rem;
		margin-bottom: 0.25rem;
	}

	.dashboard-feature p {
		font-size: 0.9rem;
		color: var(--body);
	}

.numbered-item {
	padding: 1rem 0;
	border-bottom: 1px solid var(--border);
}

	.numbered-item:last-child { border-bottom: none; }

.science-grid-bg {
	background-image: radial-gradient(circle, #1A2A34 1px, transparent 1px);
	background-size: 20px 20px;
}

.no-dots { background-image: none; }

/* ── TOOLTIPS ─────────────────────────────────────────────────────────────── */
.cite-tooltip {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: var(--surfaceEl);
	border: 1px solid var(--border);
	padding: 1rem;
	font-family: var(--fontMono);
	font-size: 0.72rem;
	color: var(--body);
	white-space: nowrap;
	z-index: 100;
	display: none;
	margin-bottom: 8px;
}

	.cite-tooltip.show { display: block; }

.fn-ref {
	font-family: var(--fontMono);
	font-size: 0.65rem;
	color: var(--phosphor);
	cursor: pointer;
	text-decoration: none;
	vertical-align: super;
	position: relative;
}

	.fn-ref:hover { text-decoration: underline; }

.fn-tooltip {
	position: absolute;
	bottom: 130%;
	left: 50%;
	transform: translateX(-50%);
	background: var(--surfaceEl);
	border: 1px solid var(--border);
	padding: 10px 14px;
	font-size: .82rem;
	color: var(--body);
	width: 320px;
	max-width: 90vw;
	z-index: 200;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s;
	line-height: 1.6
}

.design-list-item {
	display: flex;
	gap: 1rem;
	margin-bottom: 1.4rem
}

.design-list-num {
	color: var(--phosphor);
	font-size: .85rem;
	flex-shrink: 0;
	padding-top: 2px;
	min-width: 26px
}

.oq-item {
	border-left: 2px solid var(--phosphor);
	padding: 1rem 0 1rem 1.25rem;
	margin-bottom: 1.5rem
}

	.oq-item p {
		font-style: italic;
		font-size: 1.05rem;
		color: var(--ink);
		margin-bottom: .5rem;
		line-height: 1.65
	}

	.oq-item .oq-status {
		font-size: .78rem;
		color: var(--muted);
		line-height: 1.6
	}

.ref-item {
	font-size: .78rem;
	color: var(--muted);
	line-height: 1.7;
	margin-bottom: .6rem
}

.ref-num {
	color: var(--phosphor);
	margin-right: .5rem
}

.ris-card {
	background: var(--surfaceEl);
	border: 1px solid var(--border);
	padding: 1.5rem;
	margin-bottom: 1.25rem;
	transition: transform 0.25s, box-shadow 0.25s;
}

	.ris-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 20px rgba(0,214,138,0.08);
	}


.sensor-item {
	border-left: 2px solid var(--phosphor);
	padding-left: 1rem;
	margin-bottom: 1.25rem;
}

.sensor-title {
	font-weight: 500;
	color: var(--ink);
	font-size: 1rem;
}

.sensor-desc {
	font-size: 0.9rem;
	color: var(--body);
}

.callout-phosphor {
	background: var(--callout);
	border-left: 3px solid var(--calloutBorder);
	border-radius: 0;
	padding: 1.25rem 1.5rem;
}

.callout-amber {
	background: var(--amberCallout);
	border-left: 3px solid var(--amberCalloutBorder);
	border-radius: 0;
	padding: 1.25rem 1.5rem;
}

.callout-rust {
	background: rgba(224,90,58,0.08);
	border-left: 3px solid var(--rust);
	border-radius: 0;
	padding: 1.25rem 1.5rem;
}

.pull-quote-amber {
	font-style: italic;
	font-size: 1.3rem;
	color: var(--muted);
	border-left: 4px solid var(--amber);
	padding-left: 1.5rem;
	margin: 2rem 0;
}
/* ── MOBILE TOC ───────────────────────────────────────────────────────────── */
#mobile-toc { display: none; }

#mobile-toc {
	display: none
}

	#mobile-toc.open {
		display: block
	}

/* ── SCROLLBAR ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 3px; }
	::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── RESPONSIVE UTILITIES ────────────────────────────────────────────────── */
.md-show-inline { display: none; }

@media (min-width: 768px) {
	.md-show-inline { display: inline; }
}

/* ── MEDIA QUERIES ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.article-title { font-size: 2rem; }
}

@media (max-width: 767px) {
	.flip-card, .flip-card-inner { min-height: 380px; }
}

@media (max-width: 640px) {
	.cite-tooltip { white-space: normal; width: 280px; left: 0; transform: none; }
}

@media (max-width: 899px) {
	#mobile-toc { display: block; }
	#desktop-toc { display: none !important; }
	.article-layout { flex-direction: column !important; }
	.article-layout > aside { display: none !important; }
	.article-layout > article { max-width: 100% !important; }
}

@media (min-width: 900px) {
	#mobile-toc { display: none !important; }
}

@media (max-width: 999px) {
	.desktop-sidebar { display: none !important; }
	.main-content { max-width: 100% !important; }
}

@media (min-width: 1000px) {
	#mobile-sidebar-toggle,
	#mobile-sidebar { display: none !important; }
}
@media (min-width: 768px) {
	.md\:pt-28 {
		padding-top: 4rem !important;
	}
}
.pt-20 {
	padding-top: 4rem !important;
}
/* ── PRINT ────────────────────────────────────────────────────────────────── */
@media print {
	#header, #progress-bar, #desktop-toc, #mobile-toc { display: none !important; }
	body { background: white; color: #1a1a1a; background-image: none; }
}
@media (min-width: 768px) {
	.md\:min-h-\[100px\] {
		min-height: 100px !important;
	}
}
.min-h-\[100px\] {
	min-height: 100px !important;
}
img {
	border: 1px solid var(--border);
}