/* Blog pages — dark gray gradient that carries the home page palette through. */

body.blog {
	min-height: 100vh;
	/* Near-neutral, faintly cool dark grays sampled from the portrait,
	   resolving to the home page's black for continuity. Circular, with the
	   light center nudged slightly left of center. */
	background: radial-gradient(
		circle at 40% 50%,
		#2e3436 0%,
		#1b2022 45%,
		#000000 100%
	) fixed;
	color: var(--text-muted);
}

/* Fingerprint/circuit motif as a faint, full-bleed texture layered over the
   gradient. Fixed at z-index:1 — above the body's gradient background but below
   the content (z-index:2) so it never interferes with reading. */
body.blog::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 1;
	background: url(/assets/img/fingerprint-circuit-modified.webp) center center / 85% auto no-repeat;
	opacity: 0.05;
	pointer-events: none;
}

/* Right-aligned nav bar: wordmark beside the headshot, icon links beneath. */
.blog-nav {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.75rem;
	padding: 3vh 8vw 0 8vw;
	text-align: right;
}

.blog-nav a {
	text-decoration: none;
}

.blog-nav .nav-top {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* Same wordmark styling as the home page, dialed down a bit for the nav. */
.blog-nav .wordmark {
	font-size: 2.5rem;
}

/* Tagline beneath the name + headshot. */
.blog-nav .tagline {
	margin: -0.1rem 0 0;
	max-width: 16rem;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.05rem;
	font-style: italic;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.01em;
	text-align: right;
	color: var(--link-muted);
}

.blog-nav .avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
	transition: box-shadow 0.3s ease;
}

.blog-nav .avatar:hover {
	box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}

/* Stack the labeled social links beneath the name. The block sits on the right
   (via .blog-nav), but the links left-align so the icons line up in a column. */
.blog-nav .nav-icons {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	margin-top: 1vh;
}

.blog-nav .links a {
	padding-top: 1vh;
}

/* Shared content column for the post list and individual articles. */
.page {
	position: relative;
	z-index: 2;
	max-width: 760px;
	margin: 0vh auto 0;
	padding: 0 8vw 12vh;
}

/* Article list, newest first. */
.posts {
	margin: 0;
	padding: 0;
	list-style: none;
}

.posts li {
	padding: 1.5rem 0;
	border-bottom: 1px solid hsla(214, 20%, 60%, 0.2);
}

.post-title {
	display: block;
	font-size: 1.6rem;
	font-weight: lighter;
	color: white;
	text-decoration: none;
	transition: color 0.3s ease;
}

.post-title:hover {
	color: hsl(214, 38%, 90%);
	text-decoration: underline;
}

.post-date {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.95rem;
	color: var(--link-muted);
}

.post-summary {
	margin-top: 0.6rem;
	line-height: 1.7rem;
}

.read-more {
	display: inline-block;
	margin-top: 0.6rem;
	white-space: nowrap;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: hsl(214, 70%, 78%);
	text-decoration: none;
	transition: color 0.3s ease;
}

.read-more:hover {
	color: white;
	text-decoration: underline;
}

/* Icon breadcrumb: home › blog (› title on a post). */
.breadcrumb {
	display: flex;
	align-items: center;
	margin-bottom: 1.5rem;
	font-size: 0.95rem;
	color: var(--link-muted);
}

.breadcrumb a,
.breadcrumb .current {
	display: inline-flex;
	align-items: center;
	color: var(--link-muted);
	text-decoration: none;
	transition: color 0.3s ease;
}

.breadcrumb a:hover {
	color: white;
}

.breadcrumb .current {
	color: var(--text-muted);
}

.breadcrumb svg {
	width: 1.8rem;
	height: 1.8rem;
	fill: currentColor;
}

.breadcrumb .sep {
	margin: 0 0.5rem;
}

/* Single article. */
.article-title {
	color: white;
	font-weight: lighter;
	font-size: 2.6rem;
	margin: 0 0 0.4rem;
}

.article-body {
	margin-top: 2rem;
	line-height: 1.9rem;
}

.article-body a {
	color: hsl(214, 60%, 75%);
}

.article-body h2,
.article-body h3 {
	color: white;
	font-weight: lighter;
}

.article-body code {
	background: hsla(214, 20%, 60%, 0.15);
	padding: 0.1rem 0.35rem;
	border-radius: 3px;
}

.article-body pre {
	background: hsla(214, 30%, 10%, 0.8);
	padding: 1rem;
	border-radius: 6px;
	overflow-x: auto;
}

.article-body pre code {
	background: none;
	padding: 0;
}