/* Feed-based personal site with DOS/Win95/Solaris aesthetic */

:root {
	--fg: #0A0A0D; /* RAL 9005 Jet Black */
	--bg: #ECECE7; /* RAL 9003 Signal White */
	--bg-secondary: #e0e0db;
	--border: #0A0A0D;
	--link: #1e26d3;
}

@media (prefers-color-scheme: dark) {
	:root {
		--fg: #ECECE7; /* RAL 9003 Signal White */
		--bg: #0A0A0D; /* RAL 9005 Jet Black */
		--bg-secondary: #151517;
		--border: #ECECE7;
		--link: #5cb88a;
	}
}

body {
	max-width: 640px;
	width: 92%;
	margin: 0 auto;
	padding: 1.5rem 0;
}

@media (min-width: 720px) {
	body {
		padding: 2rem 0;
	}
}

a {
	color: var(--link);
}

a:visited {
	color: #14198a; /* Darker blue */
}

a:hover {
	color: #4a50e8; /* Lighter blue */
}

@media (prefers-color-scheme: dark) {
	a:visited {
		color: #4a9070;
	}
	a:hover {
		color: #7dd4a8;
	}
}

/* Header - override concrete.css */
header {
	margin: 0 0 1.5em 0 !important;
	padding: 0 !important;
}

main {
	margin-top: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.site-header {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
	line-height: 1;
}

.site-name {
	font-weight: bold;
	font-size: 1rem;
	text-decoration: none;
	color: var(--fg);
	margin-right: 0.5rem;
}

.site-name:visited {
	color: var(--fg);
}

.site-header nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 !important;
	padding: 0 !important;
}

.nav-btn {
	font-size: 1rem;
	text-decoration: none;
	color: var(--fg);
	border: solid var(--border);
	padding: 0.15rem 0.5rem;
}

.nav-btn:visited {
	color: var(--fg);
}

.nav-btn:hover {
	background: var(--fg);
	color: var(--bg);
}

.nav-btn.active {
	background: var(--fg);
	color: var(--bg);
}

/* Search box */
.search-box {
	margin-top: 0.75rem;
	display: flex;
	gap: 0.5rem;
	width: 100%;
	align-items: stretch;
}

.search-box input,
.search-box button {
	height: 2rem;
	padding: 0 0.5rem;
	font-size: 1rem;
	border: solid var(--border);
	background: var(--bg);
	color: var(--fg);
	font-family: inherit;
	box-sizing: border-box;
	margin: 0;
}

.search-box input {
	flex: 1;
}

.search-box input::placeholder {
	color: var(--fg);
}

.search-box input:focus {
	outline: none;
}

.search-box button {
	padding: 0 0.75rem;
	cursor: pointer;
}

.search-box button:hover {
	background: var(--fg);
	color: var(--bg);
}

/* Search results */
.search-results:empty {
	display: none;
}

.search-results {
	margin-top: 0.5rem;
	background: var(--fg);
	color: var(--bg);
	padding: 0.5rem;
	font-size: 1rem;
}

.search-results ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.search-results li {
	margin: 0.25rem 0;
}

.search-results a {
	color: var(--bg);
}

.search-results a:visited {
	color: var(--bg);
}

.search-results a:hover {
	opacity: 0.7;
}

.search-results .no-results {
	margin: 0;
}


/* Stream */
.stream {
	margin-top: 0;
}

.stream::before {
	content: "░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░";
	display: block;
	overflow: hidden;
	white-space: nowrap;
	font-family: "Px437 IBM VGA8", monospace;
	font-size: 1rem;
	line-height: 1;
	margin-bottom: 2rem;
	color: var(--fg);
}

.post {
	padding: 2rem 0;
}

.post + .post::before {
	content: "░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░";
	display: block;
	overflow: hidden;
	white-space: nowrap;
	font-family: "Px437 IBM VGA8", monospace;
	font-size: 1rem;
	line-height: 1;
	margin-bottom: 2rem;
	color: var(--fg);
}

.post:first-child {
	padding-top: 0;
}

/* Date — subtle, small, short ISO */
.post-date {
	font-size: 0.7rem;
	color: var(--fg);
	margin-bottom: 0.5rem;
	font-family: monospace;
}

/* Tags — hierarchical, inline, understated */
.post-tags {
	margin-top: 0.75rem;
}

.tag {
	display: inline;
	font-size: 0.7rem;
	font-family: monospace;
}

.tag a {
	color: var(--link);
}

.tag a:hover {
	text-decoration: underline;
}

.tag .sep {
	color: var(--fg);
	margin: 0 1px;
}

.tag + .tag::before {
	content: "·";
	margin: 0 0.4rem;
	color: var(--fg);
}

/* Post body */
.post-title {
	font-size: 1rem;
	font-weight: bold;
	margin: 0 0 0.4rem 0;
}

.post-title a {
	color: var(--fg);
	text-decoration: none;
}

.post-title a:visited {
	color: var(--fg);
}

.post-title a:hover {
	color: var(--link);
}

.post p {
	margin: 0.5rem 0;
	line-height: 1.6;
}

.post-summary {
	margin: 0.5rem 0;
	line-height: 1.6;
}

.continue-reading {
	display: inline-block;
	font-size: 0.85rem;
	margin-top: 0.25rem;
}

/* Photo posts */
.photo-container {
	position: relative;
	margin: 0.75rem 0;
	border: solid var(--border);
	overflow: hidden;
	line-height: 0;
}

.post-photo {
	display: block;
	width: 100%;
}

/* Dithered/original image swap on hover */
.post-photo-original {
	display: none;
}

.photo-container:hover .post-photo-dither {
	display: none;
}

.photo-container:hover .post-photo-original {
	display: block;
}

.post-photo-caption {
	font-size: 0.8rem;
	color: var(--fg);
	margin-top: 0.15rem;
}

/* Filter bar */
.filter-bar {
	margin-top: 0.75rem;
	font-size: 0.8rem;
}

.tag-tree a {
	font-family: monospace;
}

.filter-bar summary {
	cursor: pointer;
	color: var(--fg);
}

.tag-tree {
	margin-top: 0.5rem;
	padding-left: 0;
	list-style: none;
}

.tag-tree ul {
	padding-left: 1.5rem;
	list-style: none;
}

.tag-tree li {
	margin: 0.15rem 0;
}

.tag-tree a {
	text-decoration: none;
}

.tag-count {
	color: var(--fg);
	font-size: 0.75rem;
}

/* Footer */
footer {
	margin-top: 2rem;
	font-size: 0.8rem;
}

/* Article page */
article::before {
	content: "░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░";
	display: block;
	overflow: hidden;
	white-space: nowrap;
	font-family: "Px437 IBM VGA8", monospace;
	font-size: 1rem;
	line-height: 1;
	margin-bottom: 2rem;
	color: var(--fg);
}

.article-header {
	margin-bottom: 2rem;
}

.article-header h1 {
	margin-bottom: 0.5rem;
}

.article-meta {
	font-size: 0.8rem;
	font-family: monospace;
}

.article-content {
	line-height: 1.7;
}

.article-content h2 {
	margin-top: 2rem;
}

.article-content h3 {
	margin-top: 1.5rem;
}

.article-content blockquote {
	border-left: solid var(--border);
	padding-left: 1rem;
	margin-left: 0;
	font-style: italic;
}

.article-content ul,
.article-content ol {
	padding-left: 1.5rem;
}

.article-content li {
	margin: 0.25rem 0;
}

/* Article figures */
.article-figure {
	margin: 1.5rem 0;
}

.article-figure figcaption {
	margin-top: 0.5rem;
	font-style: italic;
}

/* Pagination */
.pagination {
	display: flex;
	justify-content: space-between;
	margin-top: 2rem;
	font-size: 0.85rem;
}

.pagination a {
	text-decoration: none;
}

.pagination .disabled {
	opacity: 0.3;
}

/* Censored text */
.censored {
	font-family: "Px437 IBM VGA8", monospace;
}