/* ========== TOKENS ============================================== */
:root {
	/* Hues */
	--bg-hue: 283;
	--accent-hue: 250;

	/* Surfaces */
	--bg: oklch(17.04% 0.02488 var(--bg-hue));
	--bg-alt: oklch(20.774% 0.04121 var(--bg-hue));
	--panel: oklch(23.882% 0.04051 var(--bg-hue));
	--panel-hi: oklch(27.104% 0.06212 var(--accent-hue));

	/* Borders */
	--border: oklch(32.162% 0.06846 var(--bg-hue));
	--border-hi: oklch(44.281% 0.09869 var(--accent-hue));

	/* Ink */
	--ink: oklch(92.126% 0.04074 var(--accent-hue));
	--ink-dim: oklch(77.693% 0.06809 var(--accent-hue));
	--ink-faint: oklch(54.727% 0.07419 var(--accent-hue));
	--ink-ghost: oklch(37.303% 0.0743 var(--bg-hue));

	/* Accent */
	--accent: oklch(66.56% 0.18469 var(--accent-hue));
	--accent-dim: oklch(69.683% 0.16205 var(--accent-hue) / 0.14);
	--selection: oklch(69.683% 0.16205 var(--accent-hue) / 0.28);

	/* Status */
	--ok: #7dd3a0;
	--warn: #e8c468;
	--err: #ef7a7a;

	--color-1: #8b8fff;
	--color-2: #7dd3a0;
	--color-3: #e8c468;
	--color-4: #5ec4d6;
	--color-5: #e070a0;
	--color-6: #6ba8f0;
	--color-7: #e88060;

	/* Content types */
	--essay: var(--color-1);
	--devlog: var(--color-2);
	--til: var(--color-3);
	--guide: var(--color-4);
	--review: var(--color-5);
	--note: var(--color-6);
	--rant: var(--color-7);

	/* Typography */
	--font-mono:
		"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--font-sans:
		"Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;

	/* Type scale */
	--text-xs: 9px;
	--text-sm: 10px;
	--text-md: 11px;
	--text-base: 12px;
	--text-lg: 13px;
	--text-xl: 14px;
	--text-2xl: 15px;
	--text-3xl: 16px;
	--text-4xl: 17px;
	--text-5xl: 22px;
	--text-6xl: 24px;
	--text-7xl: 30px;
	--text-8xl: clamp(26px, 4vw, 38px);
	--text-hero: clamp(18px, 2.2vw, 32px);
	--text-display: 36pt;

	/* Letter spacing */
	--tracking-tight: -0.03em;
	--tracking-normal: -0.01em;
	--tracking-loose: 0.02em;
	--tracking-label: 0.08em;
	--tracking-meta: 0.12em;
	--tracking-kicker: 0.18em;

	/* Spacing */
	--space-2xs: 2px;
	--space-xs: 4px;
	--space-sm: 6px;
	--space-md: 8px;
	--space-lg: 10px;
	--space-xl: 12px;
	--space-2xl: 14px;
	--space-3xl: 16px;
	--space-4xl: 18px;
	--space-5xl: 20px;
	--space-6xl: 22px;
	--space-7xl: 24px;
	--space-8xl: 28px;
	--space-9xl: 32px;
	--space-10xl: 36px;
	--space-11xl: 48px;
	--space-12xl: 56px;
	--space-13xl: 64px;

	/* Layout */
	--body-max-width: 1280px;
	--body-padding-x: var(--space-8xl);
	--body-padding-y: var(--space-5xl);
	--content-max: 720px;
	--post-max: 980px;
	--sidebar-width: 300px;
	--toc-width: 196px;
	--hero-info-width: 320px;
	--breakpoint-sm: 820px;
	--breakpoint-md: 1040px;

	/* Radius */
	--border-radius: 2px;

	/* Component-specific */
	--title-bg: var(--bg);
	--pre-bg: var(--panel);
}

/* Light = cool blue-gray */
[data-theme="light"] {
	--bg-hue: 255;
	--accent-hue: 270;

	--bg: oklch(94.102% 0.00982 var(--bg-hue));
	--bg-alt: oklch(91.359% 0.01277 var(--bg-hue));
	--panel: oklch(96.901% 0.00634 var(--bg-hue));
	--panel-hi: oklch(93.829% 0.01098 var(--accent-hue));
	--border: oklch(84.267% 0.01897 var(--bg-hue));
	--border-hi: oklch(66.126% 0.02603 var(--accent-hue));
	--ink: oklch(24.166% 0.02982 var(--accent-hue));
	--ink-dim: oklch(43.899% 0.03309 var(--accent-hue));
	--ink-faint: oklch(60.951% 0.03224 var(--accent-hue));
	--ink-ghost: oklch(78.068% 0.02189 var(--accent-hue));
	--accent: oklch(48.207% 0.19944 var(--accent-hue));
	--accent-dim: oklch(48.207% 0.19944 var(--accent-hue) / 0.1);
	--selection: oklch(48.207% 0.19944 var(--accent-hue) / 0.22);

	--ok: #2d7a4e;
	--warn: #8a6a0a;
	--err: #a63a1a;
	--essay: #3b4acc;
	--devlog: #2d7a4e;
	--til: #8a6a0a;
	--guide: #1a6a7a;
	--review: #a03060;
	--note: #2a5a9a;
	--rant: #a04020;
}

/* Light theme via OS preference — overridden by [data-theme] once JS runs */
@media (prefers-color-scheme: light) {
	html:not([data-theme="dark"]) {
		--bg: #e7ecf2;
		--bg-alt: #dde3eb;
		--panel: #f2f5f9;
		--panel-hi: #e6ebf2;
		--border: #c4ccd8;
		--border-hi: #8a93a3;
		--ink: #1a1f2e;
		--ink-dim: #4a5265;
		--ink-faint: #7a8397;
		--ink-ghost: #b0b8c6;
		--accent: #3b4acc;
		--accent-dim: rgba(59, 74, 204, 0.1);
		--ok: #2d7a4e;
		--warn: #8a6a0a;
		--err: #a63a1a;
		--essay: #3b4acc;
		--devlog: #2d7a4e;
		--til: #8a6a0a;
		--guide: #1a6a7a;
		--review: #a03060;
		--note: #2a5a9a;
		--rant: #a04020;
		--selection: rgba(59, 74, 204, 0.22);
	}
}

/* Title chip background — controllable via Tweak */
[data-title-bg="page"] {
	--title-bg: var(--bg);
}
[data-title-bg="panel"] {
	--title-bg: var(--panel);
}
[data-title-bg="accent"] {
	--title-bg: var(--accent);

	& .box > .box-title {
		color: var(--bg);
		border-color: var(--accent);
		& .n {
			background: var(--bg);
			color: var(--accent);
		}
	}
	& .box > .box-tag {
		color: var(--bg);
		border-color: var(--accent);
	}
}

/* ========== RESET / BASE ======================================== */
* {
	box-sizing: border-box;
}

html {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: var(--text-xl);
	line-height: 1.6;
	min-height: 100%;
	font-feature-settings: "ss01", "cv01";
}

body {
	background: var(--bg);
	max-width: var(--body-max-width);
	margin: 0 auto;
}

::selection {
	background: var(--selection);
	color: var(--ink);
}

a {
	color: var(--accent);
	text-decoration: none;
	&:hover {
		text-decoration: underline;
		text-underline-offset: var(--space-xs);
	}
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 600;
	letter-spacing: var(--tracking-normal);
}

p {
	margin: 0;
}
ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}
button {
	font: inherit;
	cursor: pointer;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: var(--space-xs);
}

.skip-link {
	position: absolute;
	top: -100%;
	left: 0;
	padding: var(--space-md) var(--space-2xl);
	background: var(--accent);
	color: var(--bg);
	font-size: var(--text-lg);
	z-index: 100;
	&:focus {
		top: 0;
	}
}

/* ========== LAYOUT PRIMITIVES =================================== */
.stack {
	display: flex;
	flex-direction: column;
	gap: var(--space-6xl);
}

.cluster {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	flex-wrap: wrap;
}

.sidebar-layout,
.about-layout {
	display: grid;
	grid-template-columns: 1fr var(--sidebar-width);
	gap: var(--space-6xl);
	align-items: start;
}

.with-toc,
.post-layout {
	display: grid;
	grid-template-columns: minmax(0, var(--content-max)) var(--toc-width);
	gap: 0 var(--space-9xl);
	align-items: start;
}

.grid {
	display: grid;
	gap: var(--space-6xl);
	&.cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	&.cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	&.cols-12 {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}
}

.col-4 {
	grid-column: span 4;
}
.col-5 {
	grid-column: span 5;
}
.col-6 {
	grid-column: span 6;
}
.col-7 {
	grid-column: span 7;
}
.col-8 {
	grid-column: span 8;
}
.col-12 {
	grid-column: span 12;
}

/* ========== TILING GRID (WM-style) ============================== */
.tiling-grid {
	display: grid;
	gap: var(--space-6xl);
	margin-top: var(--space-6xl);
}

.tiling-grid.cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tiling-grid.cols-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tile {
	min-width: 0;
	margin-top: 0;
}

.tile-1 {
	grid-column: span 1;
}
.tile-2 {
	grid-column: span 2;
}
.tile-3 {
	grid-column: span 3;
}
.tile-4 {
	grid-column: span 4;
}
.tile-5 {
	grid-column: span 5;
}

@media (max-width: 1040px) {
	.tiling-grid.cols-3,
	.tiling-grid.cols-5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.tile-2,
	.tile-3,
	.tile-4,
	.tile-5 {
		grid-column: span 2;
	}
}

@media (max-width: 820px) {
	.tiling-grid.cols-3,
	.tiling-grid.cols-5 {
		grid-template-columns: 1fr;
	}
	.tile-1,
	.tile-2,
	.tile-3,
	.tile-4,
	.tile-5 {
		grid-column: span 1;
	}
}

/* ========== HEADER ============================================== */
header {
	position: sticky;
	top: 0;
	z-index: 10;
	background: color-mix(in srgb, var(--bg) 92%, transparent);
	backdrop-filter: blur(var(--space-md));
	-webkit-backdrop-filter: blur(var(--space-md));
	border: 1px solid var(--border);
	border-top: none;
	padding: var(--space-2xl) var(--space-8xl);
	display: flex;
	align-items: center;
	gap: var(--space-7xl);
	flex-wrap: wrap;
}

.topbar-combo {
	align-items: stretch;
	flex-direction: column;
	gap: 0;
	padding: 0;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: none;
}

.topbar-main {
	display: flex;
	align-items: center;
	gap: var(--space-2xl);
	padding: var(--space-sm) var(--space-8xl);
	background: color-mix(in srgb, var(--bg) 92%, transparent);
	backdrop-filter: blur(var(--space-md));
	-webkit-backdrop-filter: blur(var(--space-md));
	border: 1px solid var(--border);
	border-top: none;
	border-radius: var(--border-radius);
}

.topbar-main .tabs {
	margin-left: auto;
	margin-right: auto;
}

.topbar-main .header-ctrls {
	flex-shrink: 0;
}

.topbar-combo .tabs.tab-text .tab {
	border-bottom: none;
	padding: var(--space-xs) var(--space-lg);
	border-radius: var(--border-radius);
	transition:
		color 0.1s,
		background 0.1s;
}
.topbar-combo .tabs.tab-text .tab:hover {
	color: var(--ink);
	background: var(--panel-hi);
}
.topbar-combo .tabs.tab-text .tab[aria-current="page"] {
	color: var(--accent);
	background: transparent;
}

.prompt {
	display: flex;
	align-items: baseline;
	gap: var(--space-xs);
	font-size: var(--text-base);
	color: var(--ink-dim);
	flex-shrink: 0;
	letter-spacing: var(--tracking-loose);

	& .u {
		color: var(--accent);
	}
	& .at {
		color: var(--ink-faint);
	}
	& .host {
		color: var(--ink);
	}
}

.tabs {
	margin-left: auto;
	display: flex;
	gap: var(--space-xs);
	font-size: var(--text-base);
	flex-wrap: wrap;
}

.tab {
	display: flex;
	align-items: center;
	padding: var(--space-lg);
	min-height: 44px;
	color: var(--ink-dim);
	border-bottom: 1px solid transparent;
	transition:
		color 0.1s,
		border-color 0.1s;

	&:hover {
		color: var(--ink);
		text-decoration: none;
	}
	&[aria-current="page"] {
		color: var(--accent);
		border-bottom-color: var(--accent);
	}
}

.meta-strip {
	font-size: var(--text-md);
	color: var(--ink-faint);
	display: flex;
	gap: var(--space-lg);
	align-items: center;
	letter-spacing: 0.05em;
	flex: 1;
	min-width: 0;

	& .sep {
		color: var(--ink-faint);
	}
}

#tip {
	font-family: var(--font-mono);
	font-size: var(--text-base);
	color: var(--ink-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
	flex-shrink: 0;
	letter-spacing: var(--tracking-loose);
}

.tip-scroll-area {
	display: flex;
	align-items: center;
	flex: 1;
	overflow: hidden;
	min-width: 0;
	position: relative;
}

.tip-scroll-area::before,
.tip-scroll-area::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 16px;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.tip-scroll-area::before {
	left: 0;
	background: linear-gradient(to right, color-mix(in srgb, var(--bg) 92%, transparent), transparent);
}

.tip-scroll-area::after {
	right: 0;
	background: linear-gradient(to left, color-mix(in srgb, var(--bg) 92%, transparent), transparent);
}

.tip-scroll-area.has-left-fade::before,
.tip-scroll-area.has-right-fade::after {
	opacity: 1;
}

/* ========== HEADER CONTROLS ===================================== */
.header-ctrls {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	flex-shrink: 0;
}

.cli-sel {
	position: relative;
	font-family: var(--font-mono);
	font-size: var(--text-base);
	color: var(--ink-dim);
	cursor: pointer;
	user-select: none;
	padding: 0 var(--space-sm);
	border-radius: var(--border-radius);
	transition:
		color 0.1s,
		background 0.1s;

	&:hover {
		color: var(--ink);
		background: var(--panel-hi);
	}
	&:focus-visible {
		outline: 2px solid var(--accent);
		outline-offset: var(--space-xs);
	}
}

.cli-sel-caret {
	margin-left: var(--space-xs);
	font-size: var(--text-sm);
	color: var(--ink-faint);
}

.cli-sel-drop {
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 100%;
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--border-radius);
	padding: 0;
	display: none;
	z-index: 20;
	font-size: var(--text-base);
	line-height: 1.5;
}

.cli-sel:focus-within .cli-sel-drop,
.cli-sel:hover .cli-sel-drop {
	display: block;
}

.cli-sel-opt {
	padding: var(--space-xs) var(--space-lg);
	color: var(--ink-dim);
	white-space: nowrap;
	transition:
		color 0.05s,
		background 0.05s;

	&:hover,
	&.active {
		background: var(--accent);
		color: var(--bg);
	}
}

/* ========== INLINE BOX UTILITY ================================== */
.box.inline {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-lg);
	background: color-mix(in srgb, var(--bg) 92%, transparent);
	backdrop-filter: blur(var(--space-md));
	-webkit-backdrop-filter: blur(var(--space-md));
	overflow: hidden;
	max-width: 100%;
}

/* Tips require JS to rotate/scroll; hidden when JS is off */
#tips-container {
	display: none;
}

.box.inline > .box-title {
	position: static;
	top: auto;
	left: auto;
	transform: none;
	padding: 1px 7px;
	background: transparent;
	border: 1px solid var(--border);
	color: var(--ink-dim);
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: var(--tracking-label);
	line-height: 1.6;
	border-radius: var(--border-radius);
	flex-shrink: 0;
}

/* ========== MAIN CONTAINER ====================================== */
main {
	padding: 0 var(--body-padding-x);
}

/* ========== BOX PANEL =========================================== */
.box {
	position: relative;
	border: 1px solid var(--border);
	background: var(--panel);
	padding: var(--space-6xl) var(--space-5xl) var(--space-4xl);
	margin-top: var(--space-6xl);
	border-radius: var(--border-radius);

	font-family: var(--font-mono);

	& > .box-title {
		position: absolute;
		top: -1em;
		left: var(--space-2xl);
		padding: 0 var(--space-sm);
		background: var(--title-bg);
		border: 1px solid var(--border);
		color: var(--ink);
		font-size: var(--text-lg);
		font-weight: 500;
		letter-spacing: var(--tracking-label);
		display: inline-flex;
		align-items: center;
		gap: var(--space-md);
		border-radius: var(--border-radius);

		& .n {
			color: var(--bg);
			font-size: var(--text-md);
			padding: 0 var(--space-xs);
			background: var(--accent);
			border-radius: var(--border-radius);
		}
	}

	& > .box-tag {
		position: absolute;
		align-items: center;
		top: -0.85em;
		right: var(--space-2xl);
		padding: var(--space-2xs) var(--space-md);
		background: var(--title-bg);
		border: 1px solid var(--border);
		color: var(--ink-faint);

		font-size: var(--text-sm);
		letter-spacing: var(--tracking-label);
		border-radius: var(--border-radius);
	}

	&.accent {
		border-color: var(--border-hi);
		& > .box-title {
			border-color: var(--accent);
			color: var(--accent);
		}
	}
}

.grid > .box {
	margin-top: 0;
}
.box.flush {
	padding: 0 0 var(--space-xs);
}
.box.flush .post-row,
.box.flush .post-row.compact {
	padding-inline: var(--space-4xl) var(--space-md);
}

/* ========== HERO ================================================= */
.hero {
	padding: var(--space-10xl) 0 var(--space-3xl);
	margin-top: var(--space-6xl);
	align-content: center;

	display: grid;
	grid-template-columns: 1fr var(--hero-info-width);
	height: calc(90vh - 72px);
	border: none;
	gap: 0;
	padding: 0;
	margin-top: 0;
	overflow: visible;
	isolation: isolate;
}

.hero .kicker,
.page-head .kicker {
	font-size: var(--text-md);
	color: var(--ink-faint);
	letter-spacing: var(--tracking-kicker);
	text-transform: uppercase;

	& .dmd {
		color: var(--accent);
		margin-right: var(--space-sm);
	}
}

.hero-wide {
}

.hero-feature {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
	position: relative;
}

#black-hole {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
	image-rendering: pixelated;
}

#ascii-static {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
	margin: 0;
	padding: 0;
	font-size: var(--text-base);
	line-height: 18px;
	font-family: monospace;
	letter-spacing: calc(9px - 1ch);
	color: #e4e1ff;
	background: transparent;
	white-space: pre;
	overflow: hidden;
	pointer-events: none;
	-webkit-mask-image: radial-gradient(
		ellipse at 50% 50%,
		black 10%,
		transparent 40%
	);
	mask-image: radial-gradient(ellipse at 50% 50%, black 10%, transparent 45%);
}

.hero-info {
	padding: var(--space-5xl) var(--space-4xl);
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow-y: auto;
	background-color: #0e0e1abd;
}

.hero-name {
	font-family: var(--font-mono);
	font-size: var(--text-hero);
	font-weight: 600;
	letter-spacing: var(--tracking-normal);
	line-height: 1.2;
	margin-top: var(--space-sm);
	margin-bottom: var(--space-xs);
}

.hero-info-grid {
	display: grid;
	gap: 0;
	font-size: var(--text-base);
	font-family: var(--font-mono);
	line-height: var(--info-lh, 1.6);
}

/* ========== READOUTS ============================================ */
.readouts {
	display: grid;
	gap: var(--space-sm);

	& > div {
		display: grid;
		grid-template-columns: 90px 1fr;
		gap: var(--space-xl);
		align-items: baseline;
		font-size: var(--text-base);
	}

	& .k {
		color: var(--ink-faint);
		letter-spacing: var(--tracking-meta);
		text-transform: uppercase;
		font-size: var(--text-sm);
	}

	& .v {
		color: var(--ink);
	}
}

.readout-list {
	display: grid;
	gap: 0;
	font-size: var(--text-base);
	font-family: var(--font-mono);

	& .readout-row {
		display: flex;
		align-items: baseline;
		padding: 0;
	}

	& .readout-key {
		flex: 0 0 90px;
		color: var(--accent);
	}

	& .readout-val {
		color: var(--ink-dim);
	}
	& .readout-val.ok {
		color: var(--ok);
	}

	& .readout-divider {
		height: 1px;
		background: var(--border);
		margin: var(--space-sm) 0;
	}
}

.tag-values {
	display: flex;
	flex-wrap: wrap;
	flex: 1;
	row-gap: 3px;
	column-gap: 0.5ch;
	color: var(--ink-dim);
	font-size: var(--text-base);
	font-family: var(--font-mono);

	& span::before {
		content: "[";
		color: var(--ink-ghost);
	}

	& span::after {
		content: "]";
		color: var(--ink-ghost);
	}
}

/* ========== STATUS DOTS ========================================= */
.dot {
	display: inline-block;
	width: var(--space-sm);
	height: var(--space-sm);
	background: currentColor;
	vertical-align: middle;
	flex-shrink: 0;

	&.pulse {
		animation: pulse 1.6s ease-in-out infinite;
	}
}

@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.35;
	}
}

.ok {
	color: var(--ok);
}
.warn {
	color: var(--warn);
}
.err {
	color: var(--err);
}
.ghost {
	color: var(--ink-faint);
}

/* ========== ASCII PROGRESS BAR ================================== */
.bar {
	display: inline-grid;
	grid-template-columns: 1fr auto;
	gap: var(--space-lg);
	align-items: center;
	font-family: var(--font-mono);
	font-size: var(--text-base);
	width: 100%;

	& .track {
		position: relative;
		height: var(--space-lg);
		background: repeating-linear-gradient(
			90deg,
			var(--ink-ghost) 0,
			var(--ink-ghost) 1px,
			transparent 1px,
			transparent var(--space-xs)
		);
		border: 1px solid var(--border);
	}

	& .fill {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		background: var(--accent);
		background-image: repeating-linear-gradient(
			90deg,
			var(--accent) 0,
			var(--accent) var(--space-xs),
			color-mix(in srgb, var(--accent) 75%, black 0%) var(--space-xs),
			color-mix(in srgb, var(--accent) 75%, black 0%) var(--space-xs)
		);
	}

	& .pct {
		color: var(--ink-dim);
		font-variant-numeric: tabular-nums;
		min-width: 42px;
		text-align: right;
	}

	& .label {
		font-size: var(--text-sm);
		letter-spacing: var(--tracking-meta);
		text-transform: uppercase;
		color: var(--ink-faint);
	}
}

.metric {
	display: grid;
	gap: var(--space-xs);
	margin-bottom: var(--space-xl);

	& .row1 {
		display: flex;
		justify-content: space-between;
		font-size: var(--text-sm);
		letter-spacing: var(--tracking-meta);
		text-transform: uppercase;
		color: var(--ink-faint);

		& .num {
			color: var(--accent);
			letter-spacing: 0;
			font-variant-numeric: tabular-nums;
		}
	}
}

/* ========== TILING COMPACT ====================================== */
.proj-row.side-by-side {
	padding: var(--space-xl) var(--space-md);

	& .proj-body {
		display: grid;
		grid-template-columns: 120px 1fr;
		gap: var(--space-xl);
		margin-top: var(--space-xs);
		align-items: start;
	}
	& .proj-meta-stack {
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
		font-size: var(--text-md);
		color: var(--ink-faint);
	}
	& .blurb {
		margin-top: 0;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	& .tags {
		margin-top: var(--space-sm);
	}
}

/* ========== CODESTATS PANEL ===================================== */
.codestats-header {
	margin-bottom: var(--space-xl);
}

.codestats-name {
	font-family: var(--font-mono);
	font-size: var(--text-2xl);
	font-weight: 600;
	margin-bottom: var(--space-sm);
	display: flex;
	align-items: baseline;
	gap: var(--space-sm);
	flex-wrap: wrap;

	& .u {
		color: var(--accent);
	}
	& .dim {
		color: var(--ink-faint);
	}
}

.codestats-total-bar {
	margin-bottom: var(--space-xs);
}

.codestats-next {
	font-size: var(--text-sm);
	color: var(--ink-faint);
	text-align: right;
}

.stats-grid.numbers-only {
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-xs) var(--space-lg);
	margin-bottom: 0;
	margin-top: var(--space-lg);

	& .stat-label {
		font-size: var(--text-xs);
		text-align: center;
		margin-bottom: var(--space-xs);
		color: var(--ink-faint);
	}

	& .stat-num {
		margin-top: 0;
		font-size: var(--text-5xl);
		text-align: center;
	}
}

/* ========== LISTING ROWS ======================================== */
.listing {
	margin: 0 calc(var(--space-xs) * -1);

	& .col-hd {
		display: grid;
		gap: var(--space-xl);
		padding: var(--space-sm) var(--space-md);
		font-size: var(--text-sm);
		letter-spacing: 0.15em;
		text-transform: uppercase;
		color: var(--ink-faint);
		border-bottom: 1px solid var(--border);
	}

	& .row {
		display: grid;
		gap: var(--space-xl);
		padding: var(--space-lg) var(--space-md);
		align-items: baseline;
		border-bottom: 1px dashed var(--border);
		color: var(--ink);
		font-family: var(--font-mono);
		font-size: var(--text-lg);
		transition: background 0.1s;
	}

	& a.row {
		color: inherit;
		text-decoration: none;
		&:hover {
			background: var(--accent-dim);
			text-decoration: none;
		}
	}

	& .perm {
		color: var(--ink-faint);
		font-size: var(--text-base);
	}
	& .size {
		color: var(--ink-dim);
		text-align: right;
		font-variant-numeric: tabular-nums;
		font-size: var(--text-base);
	}
	& .name {
		color: var(--accent);
	}
	& .note {
		color: var(--ink-dim);
		font-family: var(--font-sans);
		font-size: var(--text-lg);
	}
	& .arrow {
		color: var(--ink-faint);
		text-align: right;
	}
	& .status {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		font-size: var(--text-md);
		color: var(--ink-dim);
		text-transform: uppercase;
		letter-spacing: 0.1em;
	}
}

.grid-home {
	grid-template-columns: 170px 1fr 70px 20px;
	align-items: baseline;
}

/* ========== PROJECT ROW ========================================= */
.proj-row {
	display: block;
	padding: var(--space-4xl) var(--space-md) var(--space-4xl) var(--space-10xl);
	position: relative;
	border-bottom: 1px dashed var(--border);
	text-decoration: none;
	color: inherit;
	transition: background 0.1s;

	&:hover {
		background: var(--accent-dim);
		text-decoration: none;
	}
	&:last-child {
		border-bottom: none;
	}

	& .idx {
		position: absolute;
		left: 0;
		top: var(--space-4xl);
		color: var(--ink-faint);
		font-size: var(--text-md);
		letter-spacing: 0.05em;
		font-variant-numeric: tabular-nums;
	}

	& .head {
		display: flex;
		align-items: center;
		gap: var(--space-xl);
		flex-wrap: wrap;
	}

	& .pname {
		color: var(--ink);
		font-family: var(--font-sans);
		font-size: var(--text-5xl);
		font-weight: 600;
		letter-spacing: var(--tracking-normal);
	}

	&:hover .pname {
		color: var(--accent);
	}

	& .kind {
		color: var(--ink-faint);
		font-size: var(--text-sm);
		letter-spacing: 0.15em;
		text-transform: uppercase;
		border: 1px solid var(--border);
		padding: var(--space-2xs) 7px;
		border-radius: var(--border-radius);
	}

	& .status {
		font-size: var(--text-sm);
		letter-spacing: var(--tracking-meta);
		text-transform: uppercase;
		color: var(--ink-faint);

		&.active {
			color: var(--ok);
		}
		&.wip {
			color: var(--warn);
		}
		&.archived {
			color: var(--ink-faint);
		}
	}

	& .stats {
		margin-top: var(--space-sm);
		display: flex;
		gap: var(--space-4xl);
		font-size: var(--text-md);
		color: var(--ink-faint);
		letter-spacing: 0.04em;
		font-variant-numeric: tabular-nums;

		& .sep {
			color: var(--ink-faint);
		}
	}

	& .blurb {
		margin-top: var(--space-lg);
		color: var(--ink-dim);
		font-family: var(--font-sans);
		font-size: var(--text-xl);
		line-height: 1.6;
		max-width: 70ch;
	}

	& .tags {
		margin-top: var(--space-lg);
		display: flex;
		gap: var(--space-lg);
		flex-wrap: wrap;

		& span {
			font-size: var(--text-sm);
			color: var(--ink-faint);
			letter-spacing: 0.04em;
		}
	}

	& .links {
		display: flex;
		gap: var(--space-sm);
		flex-wrap: wrap;
		margin-top: var(--space-xl);

		& a {
			display: flex;
			align-items: center;
			min-height: 44px;
			font-size: var(--text-md);
			font-family: var(--font-mono);
			letter-spacing: var(--tracking-label);
			color: var(--ink-dim);
			border: 1px solid var(--border);
			padding: var(--space-2xs) var(--space-lg);
			border-radius: var(--border-radius);
			text-decoration: none;
			transition:
				border-color 0.12s,
				color 0.12s,
				background 0.12s;

			&:hover {
				border-color: var(--border-hi);
				color: var(--ink);
				background: var(--accent-dim);
				text-decoration: none;
			}

			&.primary {
				border-color: var(--border-hi);
				color: var(--ink);
				&:hover {
					border-color: var(--accent);
					color: var(--accent);
				}
			}
		}
	}
}

/* Non-interactive project row variant */
div.proj-row {
	cursor: default;
	&:hover {
		background: none;
	}
	&:hover .pname {
		color: var(--ink);
	}
}

/* ========== POST ROW ============================================ */
.post-row {
	display: block;
	padding: var(--space-4xl) var(--space-md);
	border-bottom: 1px dashed var(--border);
	text-decoration: none;
	color: inherit;
	transition: background 0.1s;

	&:hover {
		background: var(--accent-dim);
		text-decoration: none;
	}
	&:last-child {
		border-bottom: none;
	}

	& .meta-l {
		display: flex;
		gap: var(--space-xl);
		align-items: center;
		font-size: var(--text-md);
		color: var(--ink-faint);
		letter-spacing: var(--tracking-label);
		font-variant-numeric: tabular-nums;

		& .date {
			color: var(--ink-faint);
		}
		& .read {
			color: var(--ink-faint);
			margin-left: auto;
		}

		& .kind {
			font-size: var(--text-sm);
			letter-spacing: 0.15em;
			text-transform: uppercase;
			padding: 1px var(--space-sm);
			border: 1px solid currentColor;
			border-radius: var(--border-radius);
		}
	}

	& .ptitle {
		display: block;
		margin-top: var(--space-md);
		color: var(--ink);
		font-family: var(--font-sans);
		font-size: var(--text-5xl);
		font-weight: 600;
		letter-spacing: var(--tracking-normal);
		line-height: 1.25;
	}

	&:hover .ptitle {
		color: var(--accent);
	}

	& .pblurb {
		margin-top: var(--space-md);
		color: var(--ink-dim);
		font-family: var(--font-sans);
		font-size: var(--text-xl);
		line-height: 1.6;
		max-width: 72ch;
	}

	& .ptags {
		margin-top: var(--space-lg);
		display: flex;
		gap: var(--space-xl);
		flex-wrap: wrap;
		font-size: var(--text-sm);
		color: var(--ink-faint);
		letter-spacing: 0.04em;
	}

	&.compact {
		padding: var(--space-xl) var(--space-md);
		& .ptitle {
			font-size: var(--text-xl);
			margin-top: var(--space-sm);
		}
	}
}

/* ========== SPARKLINE / HEATMAP ================================= */
.sparkline {
	height: var(--space-10xl);
	display: flex;
	align-items: flex-end;
	gap: var(--space-2xs);

	& span {
		flex: 1;
		background: var(--ink-ghost);
		transition: background 0.2s;
		&.hi {
			background: var(--accent);
		}
	}
}

.heatmap {
	display: grid;
	grid-template-columns: repeat(26, 1fr);
	gap: var(--space-2xs);

	& span {
		aspect-ratio: 1;
		background: var(--ink-ghost);
		opacity: 0.35;

		&[data-v="1"] {
			background: var(--accent);
			opacity: 0.2;
		}
		&[data-v="2"] {
			background: var(--accent);
			opacity: 0.45;
		}
		&[data-v="3"] {
			background: var(--accent);
			opacity: 0.75;
		}
		&[data-v="4"] {
			background: var(--accent);
			opacity: 1;
		}
	}
}

/* ========== CHIP / TAG ========================================== */
.chip {
	display: inline-block;
	padding: 1px 7px;
	border: 1px solid var(--border);
	color: var(--ink-dim);
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-label);
	line-height: 1.6;
	background: transparent;

	&.active {
		border-color: var(--accent);
		color: var(--accent);
		background: var(--accent-dim);
	}
}

.chip-link {
	text-decoration: none;
	&:hover {
		border-color: var(--border-hi);
		color: var(--ink);
		text-decoration: none;
	}
}

/* Content-type colors */
.box-title,
.chip,
.post-row .meta-l .kind,
.post-meta .kind {
	&.essay {
		border-color: var(--essay);
		color: var(--essay);
	}
	&.devlog {
		border-color: var(--devlog);
		color: var(--devlog);
	}
	&.til {
		border-color: var(--til);
		color: var(--til);
	}
	&.guide {
		border-color: var(--guide);
		color: var(--guide);
	}
	&.review {
		border-color: var(--review);
		color: var(--review);
	}
	&.note {
		border-color: var(--note);
		color: var(--note);
	}
	&.rant {
		border-color: var(--rant);
		color: var(--rant);
	}
}

/* Project type colors */
.chip,
.kind {
	&.infra {
		border-color: var(--guide);
		color: var(--guide);
	}
	&.backend {
		border-color: var(--devlog);
		color: var(--devlog);
	}
	&.devtool {
		border-color: var(--note);
		color: var(--note);
	}
	&.frontend {
		border-color: var(--essay);
		color: var(--essay);
	}
	&.gamedev {
		border-color: var(--review);
		color: var(--review);
	}
}

.box-title {
	&.prompt-gt {
		color: var(--accent);
		font-weight: 600;
		flex-shrink: 0;
	}
}

/* ========== FOOTER ============================================== */
.footer {
	margin-top: var(--space-11xl);
	padding-top: var(--space-3xl);
	border-top: 1px solid var(--border);
	font-size: var(--text-md);
	color: var(--ink-faint);
	display: flex;
	gap: var(--space-xl);
	align-items: center;
	flex-wrap: wrap;

	& .sep {
		color: var(--ink-faint);
	}
	& .spacer {
		flex: 1;
	}
}

/* ========== PAGE HEAD =========================================== */
.page-head {
	padding: var(--space-8xl) 0 var(--space-xs);

	& h1 {
		margin-top: var(--space-sm);
		font-size: var(--text-7xl);
		font-family: var(--font-mono);
		font-weight: 600;
		letter-spacing: var(--tracking-normal);
		color: var(--ink);
		display: flex;
		align-items: baseline;
		gap: var(--space-xl);

		& .prompt-pre {
			color: var(--accent);
		}
		& .count {
			color: var(--ink-faint);
			font-family: var(--font-mono);
			font-size: var(--text-lg);
			font-weight: 400;
		}
	}
}

/* ========== FILTER BAR ========================================== */
.filter-bar {
	margin: var(--space-3xl) 0 var(--space-5xl);
	display: flex;
	gap: var(--space-sm);
	flex-wrap: wrap;

	& .chip {
		cursor: pointer;
	}
}

/* ========== POST VIEW (article / lorem-ipsum) =================== */
.post-outer {
	max-width: var(--post-max);
	margin: 0 auto;
	padding: var(--space-9xl) 0 var(--space-13xl);
}

.post-pre {
	max-width: var(--content-max);
}

.post-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--text-base);
	font-family: var(--font-mono);
	color: var(--ink-faint);
	margin-bottom: var(--space-9xl);

	& a {
		color: var(--ink-faint);
		text-decoration: none;
		letter-spacing: 0.04em;
		&:hover {
			color: var(--accent);
			text-decoration: none;
		}
	}

	& .breadcrumb {
		display: flex;
		align-items: center;
		gap: 0;
	}
}

.post-meta {
	display: flex;
	align-items: center;
	gap: var(--space-xl);
	font-size: var(--text-md);
	font-family: var(--font-mono);
	color: var(--ink-faint);
	letter-spacing: var(--tracking-label);
	margin-bottom: var(--space-3xl);

	& .read {
		margin-left: auto;
	}
}

.post-title {
	font-family: var(--font-sans);
	font-size: var(--text-8xl);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.15;
	color: var(--ink);
	margin-bottom: var(--space-9xl);
}

.post-title-rule {
	height: 1px;
	background: var(--border);
	margin-bottom: var(--space-9xl);
}

.post-hero {
	height: 340px;
	border: 1px solid var(--border);
	background: var(--panel);
	position: relative;
	overflow: hidden;
	margin-bottom: var(--space-9xl);
	border-radius: var(--border-radius);

	& svg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	& .hero-label {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: var(--space-sm);
		font-family: var(--font-mono);
		font-size: var(--text-base);
		color: var(--ink-faint);
		letter-spacing: var(--tracking-kicker);
		text-transform: uppercase;
		pointer-events: none;

		& .sub {
			color: var(--ink-faint);
			font-size: var(--text-sm);
		}
	}
}

.floating-toc {
	position: sticky;
	top: 80px;
	padding-top: 0;
}

.ftoc-label {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-kicker);
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: var(--space-lg);
	padding-left: var(--space-lg);
}

.ftoc-list {
	display: grid;
	gap: 0;

	& li {
		list-style: none;
	}

	& a {
		display: flex;
		align-items: baseline;
		gap: var(--space-md);
		padding: 7px var(--space-lg);
		font-family: var(--font-mono);
		font-size: var(--text-md);
		line-height: 1.4;
		color: var(--ink-faint);
		text-decoration: none;
		border-left: 2px solid var(--border);
		transition:
			color 0.15s,
			border-color 0.15s,
			background 0.15s;

		&:hover {
			color: var(--ink-dim);
			background: var(--accent-dim);
			text-decoration: none;
		}
		&.active {
			color: var(--accent);
			border-left-color: var(--accent);
		}

		& .fn {
			font-size: var(--text-xs);
			color: var(--ink-faint);
			flex-shrink: 0;
			font-variant-numeric: tabular-nums;
			letter-spacing: 0.04em;
		}

		&.active .fn {
			color: var(--accent);
		}
	}
}

/* Shared prose / post-body styles */
.prose,
.post-body {
	font-family: var(--font-sans);
	color: var(--ink-dim);

	& p:last-child {
		margin-bottom: 0;
	}
	& a {
		color: var(--accent);
	}
	& a:hover {
		text-decoration: underline;
		text-underline-offset: var(--space-xs);
	}
	& strong {
		color: var(--ink);
		font-weight: 600;
	}
	& code {
		font-family: var(--font-mono);
		background: var(--bg-alt);
		border: 1px solid var(--border);
		padding: 1px 5px;
		border-radius: var(--border-radius);
		color: var(--ink);
	}
}

.prose {
	font-size: var(--text-2xl);
	line-height: 1.75;

	& p {
		margin: 0 0 1em;
	}
}

.post-body {
	font-size: var(--text-3xl);
	line-height: 1.8;

	& p {
		margin: 0 0 1.4em;
	}
	& em {
		color: var(--ink);
		font-style: italic;
	}

	& h2 {
		font-family: var(--font-mono);
		font-size: var(--text-lg);
		font-weight: 500;
		letter-spacing: var(--tracking-meta);
		text-transform: uppercase;
		color: var(--accent);
		margin: 2.4em 0 0.8em;
		display: flex;
		align-items: center;
		gap: var(--space-lg);

		&::before {
			content: "";
			flex-shrink: 0;
			width: max(20px, var(--h2-indent, 20px));
			height: 0;
			border-top: 1px dashed var(--border);
			transition: width 0.2s;
		}

		&::after {
			content: "";
			flex: 1;
			height: 0;
			border-top: 1px dashed var(--border);
		}
	}

	& blockquote {
		margin: 1.8em 0;
		padding: 0 0 0 var(--space-5xl);
		border-left: 3px solid var(--border-hi);
		color: var(--ink);
		font-size: var(--text-4xl);
		font-style: italic;
		line-height: 1.6;
	}

	& code {
		font-size: 13.5px;
	}

	& pre code {
		background: none;
		border: none;
		padding: 0;
		font-size: inherit;
	}

	& pre {
		& .c {
			color: var(--ink-faint);
		}
		& .k {
			color: var(--accent);
		}
		& .s {
			color: var(--ok);
		}
		& .n {
			color: var(--ink);
		}
		& .t {
			color: var(--essay);
		}
		& .num {
			color: var(--til);
		}
	}
}

.code-block {
	margin: 1.6em 0;
}

.code-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--pre-bg);
	border: 1px solid var(--border);
	border-left: 3px solid var(--accent);
	border-bottom: 1px dashed var(--border);
	padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-xl);
	transition: background 0.2s;
}

.code-lang {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-kicker);
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-left: auto;
}

.copy-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--ink-faint);
	border-radius: var(--border-radius);
	transition:
		color 0.15s,
		background 0.15s;
	flex-shrink: 0;

	&:hover {
		color: var(--ink);
		background: var(--accent-dim);
	}
	&.copied {
		color: var(--ok);
	}
}

.code-block pre {
	background: var(--pre-bg);
	border: 1px solid var(--border);
	border-left: 3px solid var(--accent);
	border-top: none;
	border-radius: 0 0 var(--border-radius) var(--border-radius);
	padding: var(--space-4xl) var(--space-5xl);
	margin: 0;
	overflow-x: auto;
	font-family: var(--font-mono);
	font-size: var(--text-lg);
	line-height: 1.65;
	color: var(--ink);
	transition: background 0.2s;
}

.callout {
	background: var(--panel);
	border: 1px solid var(--border);
	border-left: 3px solid var(--warn);
	border-radius: var(--border-radius);
	padding: var(--space-2xl) var(--space-4xl);
	margin: 1.6em 0;
	font-size: var(--text-xl);
	color: var(--ink-dim);

	& .label {
		font-family: var(--font-mono);
		font-size: var(--text-sm);
		letter-spacing: var(--tracking-kicker);
		text-transform: uppercase;
		color: var(--warn);
		margin-bottom: var(--space-sm);
	}
}

.post-footer {
	margin-top: var(--space-12xl);
	padding-top: var(--space-4xl);
	border-top: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--text-base);
	font-family: var(--font-mono);
	gap: var(--space-7xl);

	& a {
		color: var(--ink-faint);
		text-decoration: none;
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
		max-width: 260px;
		&:hover {
			color: var(--accent);
			text-decoration: none;
		}
	}

	& .label {
		font-size: var(--text-sm);
		letter-spacing: 0.15em;
		text-transform: uppercase;
		color: var(--ink-faint);
	}
	& .title {
		color: inherit;
		line-height: 1.4;
	}
	& .next {
		text-align: right;
	}
}

.post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin-top: var(--space-10xl);
	padding-top: var(--space-4xl);
	border-top: 1px dashed var(--border);

	& span {
		font-size: var(--text-md);
		font-family: var(--font-mono);
		color: var(--ink-faint);
		letter-spacing: 0.04em;
	}
}

/* ========== ABOUT PAGE ========================================== */
.prose-section {
	margin-bottom: var(--space-8xl);
	&:last-child {
		margin-bottom: 0;
	}

	& .s-label {
		font-family: var(--font-mono);
		font-size: var(--text-sm);
		letter-spacing: var(--tracking-kicker);
		text-transform: uppercase;
		color: var(--ink-faint);
		margin-bottom: var(--space-lg);
		display: flex;
		align-items: center;
		gap: var(--space-lg);

		&::after {
			content: "";
			flex: 1;
			height: 0;
			border-top: 1px dashed var(--border);
		}
	}
}

.sidebar-row {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: var(--space-lg);
	font-size: var(--text-base);
	font-family: var(--font-mono);
	padding: var(--space-sm) 0;
	border-bottom: 1px dashed var(--border);
	align-items: baseline;

	&:last-child {
		border-bottom: none;
	}

	& .k {
		color: var(--accent);
	}
	& .v {
		color: var(--ink-dim);
	}
	& .v.ok {
		color: var(--ok);
	}
	& .v a {
		color: var(--accent);
	}
}

.sidebar-group {
	margin-bottom: var(--space-4xl);
	&:last-child {
		margin-bottom: 0;
	}
}
.sidebar-divider {
	height: 1px;
	background: var(--border);
	margin: var(--space-2xl) 0;
}

.timeline {
	display: grid;
	gap: 0;
}

.tl-item {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: var(--space-lg);
	font-size: var(--text-base);
	padding: var(--space-lg) 0;
	border-bottom: 1px dashed var(--border);
	align-items: start;

	&:last-child {
		border-bottom: none;
	}

	& .year {
		color: var(--ink-faint);
		font-family: var(--font-mono);
		font-variant-numeric: tabular-nums;
		padding-top: var(--space-xs);
	}

	& .detail {
		font-family: var(--font-sans);
		color: var(--ink-dim);
		line-height: 1.5;

		& strong {
			color: var(--ink);
			font-weight: 600;
		}

		& .role {
			font-size: var(--text-sm);
			letter-spacing: var(--tracking-meta);
			text-transform: uppercase;
			color: var(--ink-faint);
			display: block;
			margin-top: var(--space-2xs);
		}
	}
}

/* ========== WRITING PAGE ======================================== */
.page-head-row {
	display: flex;
	align-items: flex-end;
	gap: var(--space-2xl);
}

.rss-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--text-md);
	color: var(--ink-faint);
	border: 1px solid var(--border);
	padding: var(--space-xs) var(--space-lg);
	border-radius: var(--border-radius);
	text-decoration: none;
	letter-spacing: var(--tracking-label);
	transition:
		border-color 0.1s,
		color 0.1s;
	margin-left: auto;

	&:hover {
		border-color: var(--warn);
		color: var(--warn);
		text-decoration: none;
	}
}

/* ========== STATS GRID (homepage code::stats) =================== */
.stats-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xs) var(--space-2xl);
	font-family: var(--font-mono);
	margin-bottom: var(--space-3xl);

	& .stat-label {
		font-size: var(--text-sm);
		text-transform: uppercase;
		letter-spacing: var(--tracking-meta);
		color: var(--ink-faint);
	}

	& .stat-num {
		font-size: var(--text-6xl);
		font-weight: 600;
		color: var(--accent);
		font-variant-numeric: tabular-nums;
		letter-spacing: var(--tracking-tight);
		line-height: 1.1;
	}
}

/* ========== UTILITIES =========================================== */
.page {
	display: block;
}
.hidden {
	display: none !important;
}

.cli-line::before {
	content: "› ";
	color: var(--accent);
}

/* Color utilities */
.text-accent {
	color: var(--accent);
}
.text-dim {
	color: var(--ink-dim);
}
.text-ink {
	color: var(--ink);
}
.text-err {
	color: var(--err);
}

/* Readout item (error page suggestions) */
.readout-item {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--text-base);
	color: var(--ink-dim);
	padding: var(--space-2xs) 0;
	border-bottom: 1px dashed var(--border);
}
.readout-item:last-child {
	border-bottom: none;
}

/* Anchor targets for :target routing */
.anchor-target {
	position: absolute;
	pointer-events: none;
	visibility: hidden;
}

/* Layout utilities */
.text-right {
	text-align: right;
}
.font-base {
	font-size: var(--text-base);
}

/* Spacing utilities */
.mt-xs {
	margin-top: var(--space-xs);
}
.mt-2xl {
	margin-top: var(--space-2xl);
}
.mb-0 {
	margin-bottom: 0;
}
.mb-2xl {
	margin-bottom: var(--space-2xl);
}
.mb-3xl {
	margin-bottom: var(--space-3xl);
}
.pt-2xl {
	padding-top: var(--space-2xl);
}

/* Component variants */
.readouts.loose {
	gap: var(--space-lg);
}

.ascii-rule {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	color: var(--ink-faint);
	font-size: var(--text-md);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin: var(--space-4xl) 0 var(--space-md);

	& .l,
	& .r {
		flex: 1;
		height: 0;
		border-top: 1px dashed var(--border);
	}
	& .r {
		flex: 4;
	}
}

/* ========== RESPONSIVE ========================================== */
@media (max-width: 820px) {
	.grid.cols-2,
	.grid.cols-3,
	.grid.cols-12 {
		grid-template-columns: 1fr;
	}

	[class*="col-"] {
		grid-column: span 1 !important;
	}

	.hero-wide {
		grid-template-columns: 1fr;
		height: auto;
		min-height: 60vh;
	}

	.hero-feature {
		border-bottom: none;
		min-height: 160px;
	}

	.about-layout {
		grid-template-columns: 1fr;
	}

	/* ── Mobile shell padding ─────────────────────────────────────── */
	body {
		padding: 0;
	}

	/* ── Mobile header ────────────────────────────────────────────── */

	header {
		padding-left: var(--space-sm);
		padding-right: var(--space-sm);
		width: 100%;
	}

	/* Give the main row less side padding and let it wrap */
	.topbar-main {
		flex-wrap: wrap;
		row-gap: var(--space-2xs);
		padding-bottom: var(--space-sm);
		border-top: none;
		border-left: none;
		border-right: none;
	}

	/* Push nav tabs to a full-width second row */
	.topbar-main .tabs {
		order: 10;
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		justify-content: center;
	}

	/* Push controls to the far right of the first row */
	.topbar-main .header-ctrls {
		margin-left: auto;
	}

	/* ── Inline box: revert absolute positioning so it stacks naturally ── */
	.box.inline {
		position: static;
		display: flex;
		margin: var(--space-sm) var(--space-sm) 0 var(--space-sm);
		border: 1px solid var(--border);
		padding: var(--space-md) var(--space-3xl);
		overflow: hidden;
		width: 100%;
		box-sizing: border-box;
	}



	/* ── Black hole: taller canvas, fills its column fully ──────────── */
	.hero-feature {
		min-height: 260px;
	}

	#black-hole {
		display: block;
		width: 100% !important;
		height: 100% !important;
	}
}

@media (max-width: 1040px) {
	.post-layout {
		grid-template-columns: 1fr;
	}
	.floating-toc {
		display: none !important;
	}
}