/* ============================================================
   CONTENT GRID - article column + a reserved, empty margin
   track on the right. Sidenotes float out of the article and
   land in that reserved space via negative margin (classic
   Tufte-style margin notes), staying roughly level with the
   paragraph that references them.
   ============================================================ */
.content-grid {
	display: grid;
	grid-template-columns: minmax(0, var(--article-w)) var(--notes-w);
	column-gap: var(--content-gap);
	max-width: calc(var(--article-w) + var(--content-gap) + var(--notes-w));
	margin: 0 auto;
	padding: var(--space-6) var(--space-6) var(--space-4);
}

.prose {
	grid-column: 1;
	counter-reset: sidenote;
}

.prose h2 {
	margin-top: var(--space-7);
	margin-bottom: var(--space-3);
	font-size: var(--fs-xl);
	font-weight: 600;
	line-height: var(--lh-tight);
	color: var(--color-text);
}

.prose h2:first-child { margin-top: 0; }

.prose h3 {
	margin-top: var(--space-6);
	margin-bottom: var(--space-2);
	font-size: var(--fs-lg);
	font-weight: 600;
	color: var(--color-text);
}

.prose p {
	margin-bottom: var(--space-4);
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: var(--color-text-muted);
}

.prose ul,
.prose ol {
	margin: 0 0 var(--space-4);
	padding-left: var(--space-5);
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose li {
	margin-bottom: var(--space-2);
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: var(--color-text-muted);
}

.prose strong { color: var(--color-text); font-weight: 600; }

.prose a:not(.sidenote-ref) {
	color: var(--color-accent);
	text-decoration: underline;
	text-decoration-color: var(--color-border-strong);
	text-underline-offset: 0.15em;
}

.prose a:not(.sidenote-ref):hover {
	text-decoration-color: currentColor;
}

.prose code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	background: var(--color-bg-alt);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 0.1em 0.35em;
}

/* callout / pull-quote card */
.prose blockquote {
	margin: var(--space-6) 0;
	padding: var(--space-5) var(--space-6);
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-left: var(--border-width-strong) solid var(--color-accent);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.prose blockquote p {
	margin: 0;
	color: var(--color-text);
	font-size: var(--fs-md);
	line-height: var(--lh-snug);
}

.prose blockquote p + p { margin-top: var(--space-3); }

.prose blockquote strong { color: var(--color-accent); }

/* ============================================================
   SIDENOTES - Tufte-style margin notes. The ref marker sits
   inline in the running text; the note itself floats out of the
   article column into the reserved gutter (see .content-grid).
   Numbers are auto-generated by a shared CSS counter so authors
   never have to keep two numbers in sync by hand.
   ============================================================ */
.sidenote-ref {
	counter-increment: sidenote;
	margin-left: 0.1em;
	color: var(--color-accent);
	font-size: 0.7em;
	font-weight: 600;
	cursor: default;
}

.sidenote-ref::after {
	content: counter(sidenote);
}

.sidenote {
	float: right;
	clear: right;
	width: var(--notes-w);
	margin-top: 0.15rem;
	margin-right: calc(-1 * (var(--notes-w) + var(--content-gap)));
	margin-bottom: var(--space-3);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
	color: var(--color-text-faint);
}

.sidenote-num {
	color: var(--color-accent);
	font-weight: 600;
	margin-right: 0.35em;
}

.sidenote-num::after {
	content: counter(sidenote);
}

/* ============================================================
   MOBILE FALLBACK - no room for a margin column, so the note
   drops inline as a small card right where it's referenced.
   ============================================================ */
@media (max-width: 48rem) {
	.content-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sidenote {
		float: none;
		clear: none;
		display: block;
		width: 100%;
		margin: var(--space-3) 0;
		padding: var(--space-3) var(--space-4);
		background: var(--color-bg-alt);
		border-left: var(--border-width-strong) solid var(--color-accent);
		border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	}
}