/* Catppuccin Mocha palette */
:root {
	--ctp-base: #1e1e2e;
	--ctp-mantle: #181825;
	--ctp-crust: #11111b;
	--ctp-surface0: #313244;
	--ctp-surface1: #45475a;
	--ctp-surface2: #585b70;
	--ctp-overlay0: #6c7086;
	--ctp-overlay1: #7f849c;
	--ctp-overlay2: #9399b2;
	--ctp-subtext0: #a6adc8;
	--ctp-subtext1: #bac2de;
	--ctp-text: #cdd6f4;
	--ctp-lavender: #b4befe;
	--ctp-blue: #89b4fa;
	--ctp-sapphire: #74c7ec;
	--ctp-sky: #89dceb;
	--ctp-teal: #94e2d5;
	--ctp-green: #a6e3a1;
	--ctp-yellow: #f9e2af;
	--ctp-peach: #fab387;
	--ctp-maroon: #eba0ac;
	--ctp-red: #f38ba8;
	--ctp-mauve: #cba6f7;
	--ctp-pink: #f5c2e7;
	--ctp-flamingo: #f2cdcd;
	--ctp-rosewater: #f5e0dc;

	--bg: var(--ctp-base);
	--surface: var(--ctp-mantle);
	--surface-highlight: var(--ctp-crust);
	--border: var(--ctp-surface0);
	--border-strong: var(--ctp-surface2);
	--text: var(--ctp-text);
	--muted: var(--ctp-subtext0);
	--accent: var(--ctp-green);
	--accent-dim: var(--ctp-teal);
	--accent-hover: var(--ctp-teal);
	--link: var(--ctp-blue);
	--link-hover: var(--ctp-sapphire);
	--title: var(--ctp-lavender);
	--prompt: var(--ctp-yellow);
	--selection: var(--ctp-surface1);
}

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

* {
	box-sizing: border-box;
}

html {
	font-size: 16px;
}

body {
	font-family: "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
	line-height: 1.6;
	color: var(--text);
	background-color: var(--bg);
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

a {
	color: var(--link);
	text-decoration: none;
}

a:hover {
	color: var(--link-hover);
	text-decoration: underline;
}

/* Window chrome */
.site-header,
.site-main,
.site-footer {
	max-width: 840px;
	width: 100%;
	margin: 0 auto;
}

.site-header {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-top: 2px solid var(--accent);
	margin-top: 1.5rem;
	padding: 0.75rem 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: baseline;
	justify-content: space-between;
}

.site-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--title);
}

.site-title:hover {
	color: var(--accent);
}

.site-nav {
	display: flex;
	gap: 1rem;
}

.site-nav a::before {
	content: "[ ";
	color: var(--border-strong);
}

.site-nav a::after {
	content: " ]";
	color: var(--border-strong);
}

.site-main {
	flex: 1;
	border: 1px solid var(--border);
	border-top: none;
	border-bottom: none;
	background-color: var(--surface-highlight);
	padding: 1.5rem;
}

.site-footer {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-bottom: 2px solid var(--accent);
	margin-bottom: 1.5rem;
	padding: 0.75rem 1rem;
	text-align: center;
	color: var(--muted);
	font-size: 0.875rem;
}

/* Panels / boxes */
.panel {
	border: 1px solid var(--border);
	background-color: var(--surface);
}

.panel__header {
	background-color: var(--surface-highlight);
	border-bottom: 1px dashed var(--border);
	padding: 0.5rem 0.75rem;
	color: var(--accent);
	font-weight: 700;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.panel__body {
	padding: 1rem;
}

/* Intro */
.intro {
	margin-bottom: 1.5rem;
}

.intro h1 {
	margin: 0 0 0.25rem;
	color: var(--title);
	font-size: 1.5rem;
}

.intro h1::before {
	content: "$ ";
	color: var(--prompt);
}

.intro p {
	margin: 0;
	color: var(--muted);
}

/* Category filter */
.category-filter {
	margin-bottom: 1.5rem;
}

.category-filter__heading {
	color: var(--accent-dim);
	font-size: 0.9rem;
	margin: 0 0 0.5rem;
}

.category-filter__heading::before {
	content: "# ";
	color: var(--prompt);
}

.category-filter__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.category-filter__button {
	background-color: var(--surface-highlight);
	border: 1px solid var(--border);
	padding: 0.375rem 0.75rem;
	font: inherit;
	font-size: 0.8125rem;
	color: var(--muted);
	cursor: pointer;
}

.category-filter__button:hover {
	border-color: var(--border-strong);
	color: var(--text);
}

.category-filter__button--active {
	background-color: var(--accent);
	border-color: var(--accent);
	color: var(--ctp-crust);
	font-weight: 700;
}

.category-filter__button--active:hover {
	background-color: var(--accent-hover);
	border-color: var(--accent-hover);
	color: var(--ctp-crust);
}

/* Post list */
.post-list {
	display: grid;
	gap: 0.75rem;
}

.post-card {
	border: 1px solid var(--border);
	background-color: var(--surface);
	padding: 1rem;
}

.post-card::before {
	content: "-rw-r--r-- ";
	color: var(--border-strong);
	font-size: 0.75rem;
}

.post-card__title {
	margin: 0 0 0.25rem;
	font-size: 1rem;
	font-weight: 700;
	display: inline;
}

.post-card__title a {
	color: var(--text);
}

.post-card__title a:hover {
	color: var(--accent);
	text-decoration: underline;
}

.post-card__meta {
	margin: 0.5rem 0;
	font-size: 0.8125rem;
	color: var(--muted);
}

.post-card__meta::before {
	content: "→ ";
	color: var(--prompt);
}

.post-card__categories,
.post__categories {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.post-card__categories::before,
.post__categories::before {
	content: "├── ";
	color: var(--border-strong);
}

.category-link {
	border: 1px solid var(--border);
	padding: 0.0625rem 0.5rem;
	font-size: 0.75rem;
	color: var(--muted);
}

.category-link:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.category-link--active {
	background-color: var(--accent);
	border-color: var(--accent);
	color: var(--ctp-crust);
}

.category-link--active:hover {
	background-color: var(--accent-hover);
	border-color: var(--accent-hover);
	color: var(--ctp-crust);
}

/* Categories index */
.category-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 0.75rem;
}

.category-list__item {
	border: 1px solid var(--border);
	background-color: var(--surface);
}

.category-list__link {
	display: block;
	padding: 0.75rem;
	font-size: 0.9375rem;
	color: var(--text);
}

.category-list__link::before {
	content: "> ";
	color: var(--prompt);
}

.category-list__link:hover {
	background-color: var(--surface-highlight);
	color: var(--accent);
}

/* Single post */
.post__header {
	border: 1px solid var(--border);
	background-color: var(--surface);
	padding: 1rem;
	margin-bottom: 1.5rem;
}

.post__title {
	font-size: 1.35rem;
	line-height: 1.3;
	margin: 0 0 0.5rem;
	color: var(--title);
}

.post__meta {
	font-size: 0.875rem;
	color: var(--muted);
	margin: 0 0 0.75rem;
}

.post__content {
	border: 1px solid var(--border);
	background-color: var(--surface);
	padding: 1.25rem;
}

.post__content h2,
.post__content h3 {
	color: var(--accent-dim);
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}

.post__content h2::before {
	content: "## ";
	color: var(--prompt);
}

.post__content h3::before {
	content: "### ";
	color: var(--prompt);
}

.post__content p {
	margin: 0 0 1rem;
}

.post__content p:last-child {
	margin-bottom: 0;
}

.post__content pre {
	background-color: var(--ctp-crust);
	border: 1px solid var(--border);
	padding: 1rem;
	overflow-x: auto;
}

.post__content code {
	font-family: inherit;
	font-size: 0.9375rem;
}

.post__content :not(pre)>code {
	background-color: var(--ctp-crust);
	border: 1px solid var(--border);
	padding: 0.125rem 0.25rem;
	color: var(--ctp-green);
}