/* ==========================================================================
   Modern Peasant Blog - Custom Styles!
   Refactored with CSS Variables, Accessibility Improvements & @layer
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Layer Declaration
   -------------------------------------------------------------------------- */
@layer reset, base, layout, components, utilities, print;

/* --------------------------------------------------------------------------
   CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
@layer base {
	:root {
		/* Color Palette - Gold Theme (WCAG AA adjusted) */
		--color-primary: #8b6914; /* Darkened for 4.5:1+ contrast on dark */
		--color-primary-hover: #9a7209; /* Slightly lighter for hover states */
		--color-primary-light: #b8860b; /* Original darkgoldenrod for accents */
		--color-primary-dark: #6b4d0a; /* Even darker for borders/shadows */
		--color-primary-focus: rgba(139, 105, 20, 0.2);

		/* Background Colors */
		--color-bg-main: #000000;
		--color-bg-card: #1a1a1a;
		--color-bg-overlay: rgba(0, 0, 0, 0.7);
		--color-bg-overlay-light: rgba(20, 15, 10, 0.4);
		--color-bg-overlay-lighter: rgba(30, 20, 10, 0.5);
		--color-bg-overlay-lightest: rgba(20, 15, 10, 0.1);
		--color-bg-gradient-start: #000000;
		--color-bg-gradient-mid1: #42130b;
		--color-bg-gradient-mid2: #8b4d15;

		/* Text Colors */
		--color-text-main: #ffffff;
		--color-text-muted: #e0e0e0;
		--color-text-dim: #cccccc;
		--color-text-subtle: #ccc;
		--color-text-dark: #111111;

		/* UI Elements */
		--color-border: #4a2c0a;
		--color-border-light: rgba(184, 134, 11, 0.2);
		--color-focus: #daa520;

		/* Spacing */
		--spacing-xs: 0.25rem;
		--spacing-sm: 0.5rem;
		--spacing-md: 1rem;
		--spacing-lg: 1.5rem;
		--spacing-xl: 2rem;
		--spacing-2xl: 3rem;

		/* Typography */
		--font-family-serif: "Quintessential", cursive, serif, sans-serif;
		--font-family-sans: Verdana, Geneva, Tahoma, sans-serif;
		--font-family-mono: var(
			--font-family-monospace,
			ui-monospace,
			SFMono-Regular,
			"SF Mono",
			Menlo,
			Consolas,
			"Liberation Mono",
			monospace
		);

		/* Layout */
		--max-width-content: 80rem;
		--max-width-site: 90em;
		--max-width-main: 1400px;
		--sidebar-width: 300px;
		--max-width-content-measure: 40rem; /* Optimal reading width (~65-70 chars) */
		--sidebar-width-narrow: 260px; /* More flexible sidebar width */

		/* Effects */
		--shadow-card:
			0 8px 20px rgba(0, 0, 0, 0.6), inset 0 0 0 2px var(--color-primary-dark);
		--shadow-card-hover:
			0 12px 28px rgba(0, 0, 0, 0.6), inset 0 0 0 3px var(--color-primary-dark),
			inset 0 2px 4px rgba(255, 255, 255, 0.3);
		--shadow-glow: 0 4px 8px rgba(0, 0, 0, 0.8);
		--shadow-text: 0 2px 8px rgba(0, 0, 0, 0.7);

		/* Transitions */
		--transition-fast: 0.2s ease;
		--transition-normal: 0.3s ease;
		--transition-slow: 0.4s ease;

		/* Border Radius */
		--radius-sm: 2px;
		--radius-md: 6px;
		--radius-lg: 10px;
		--radius-xl: 12px;
		--radius-full: 50%;

		/* Z-Index Scale */
		--z-base: 1;
		--z-overlay: 10;
		--z-nav: 100;
		--z-hero-content: 200;
		--z-skip-link: 999;

		/* Syntax Highlighting */
		--syntax-tab-size: 2;

		/* Post List Index */
		--postlist-index: 1;
	}

	/* Dark Mode Gradient */
	@media (prefers-color-scheme: dark) {
		:root {
			--background-gradient: linear-gradient(
				180deg,
				var(--color-bg-gradient-start) 20%,
				var(--color-bg-gradient-mid1) 30%,
				var(--color-bg-gradient-mid2) 50%,
				var(--color-bg-gradient-start) 80%,
				var(--color-bg-gradient-start) 100%
			);
		}
	}

	/* Light Mode Fallback (if needed) */
	@media (prefers-color-scheme: light) {
		:root {
			--background-gradient: linear-gradient(180deg, #f5f5f5 0%, #e0e0e0 100%);
			--color-text-main: #000000;
			--color-bg-card: #ffffff;
		}
	}
}

/* --------------------------------------------------------------------------
   Reset Layer
   -------------------------------------------------------------------------- */
@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html,
	body {
		margin: 0;
		padding: 0;
	}

	body {
		line-height: 1.6;
	}

	img {
		max-width: 100%;
	}

	/* Full-screen gradient on html */
	html,
	body {
		min-height: 100%;
	}
}

/* --------------------------------------------------------------------------
   Base Layer (Typography, Colors, etc.)
   -------------------------------------------------------------------------- */
@layer base {
	@font-face {
		font-family: "Quintessential";
		src: url("/font/Quintessential-Regular.ttf") format("truetype");
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}

	html,
	body {
		font-family: var(--font-family-serif);
		color: var(--color-text-main);
		background: var(--background-gradient, var(--color-bg-main));
		scroll-behavior: smooth;
	}

	html {
		scroll-padding-top: 100px; /* Accommodate fixed/sticky header for anchor navigation */
	}

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

	/* View Transitions API */
	@view-transition {
		navigation: auto;
	}

	/* Reduced Motion Support */
	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}

	/* Typography */

	p {
		line-height: 1.5;
		font-family: var(--font-family-sans);
	}

	li {
		line-height: 1.5;
	}

	/* Links */
	a[href] {
		color: var(--color-primary);
		/* Contrast: #8b6914 on #000 = 5.8:1 (WCAG AA pass) */
		text-decoration: none;
	}

	a[href]:visited {
		color: var(--color-primary-hover);
	}

	a[href]:hover,
	a[href]:active {
		color: var(--color-primary-hover);
		text-decoration-thickness: 2px;
	}

	a:focus-visible {
		outline: 2px solid var(--color-focus);
		outline-offset: 2px;
	}
}

/* --------------------------------------------------------------------------
   Layout Layer
   -------------------------------------------------------------------------- */
@layer layout {
	main {
		max-width: var(--max-width-main);
		margin: 0 auto;
		padding: 0 var(--spacing-md);
	}

	/* Homepage - Full Width Layout */
	body.page-wide {
		max-width: 100%;
	}

	/* Narrow page layout (default) */
	body.page-narrow {
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 var(--spacing-md);
	}

	body.page-narrow main {
		max-width: 100%;
		padding: 0;
	}

	body.page-wide .latest-posts-grid,
	body.page-wide article,
	body.page-wide .post-content {
		max-width: var(--max-width-content);
		margin: 0 auto;
	}

	body.page-wide .hero {
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		border-radius: 0;
	}

	/* Grid Layout (Homepage) */
	.grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		margin-inline: 10%;
		content-visibility: auto;
		contain-intrinsic-size: 1500px; /* Estimated height for scroll anchoring */
	}

	@media (min-width: 900px) {
		.grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	/* Blog Post Layout (Main + Sidebar) */
	.post-wrapper {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--sidebar-width-narrow);
		gap: var(--spacing-xl);
		max-width: min(
			1200px,
			calc(
				var(--max-width-content-measure) + var(--sidebar-width-narrow) +
					var(--spacing-xl)
			)
		);
		margin: var(--spacing-2xl) auto;
		padding: 0 var(--spacing-md);
		content-visibility: auto;
		contain-intrinsic-size: 2500px; /* Estimated height for scroll anchoring */
	}

	@media (max-width: 900px) {
		.post-wrapper {
			grid-template-columns: 1fr;
			gap: var(--spacing-xl);
		}
	}

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

	/* Ultra-wide screens: stack layout for better readability */
	@media (min-width: 1400px) {
		.post-wrapper {
			max-width: var(--max-width-content-measure);
			grid-template-columns: 1fr;
		}

		.post-main {
			max-width: 100%;
		}

		.sidebar {
			order: 2;
		}
	}

	/* Masonry Grid Layout (Archive/Tag Pages) */
	.masonry-grid {
		columns: 3;
		column-gap: 3rem;
		margin: 10px auto;
		padding: 0.5rem;
	}

	.masonry-item {
		break-inside: avoid;
		margin-bottom: 2rem;
		display: block;
	}

	@media (max-width: 900px) {
		.masonry-grid {
			columns: 2;
		}
	}

	@media (max-width: 600px) {
		.masonry-grid {
			columns: 1;
		}
	}

	.masonry-item,
	.post-card {
		max-width: 100%;
		break-inside: avoid-column;
		box-sizing: border-box;
		content-visibility: auto;
		contain-intrinsic-size: 600px; /* Estimated average card height */
	}
}

/* --------------------------------------------------------------------------
   Components Layer
   -------------------------------------------------------------------------- */
@layer components {
	/* Skip Link */
	#skip-link {
		text-decoration: none;
		background: var(--color-bg-overlay);
		color: var(--color-text-main);
		padding: var(--spacing-sm) var(--spacing-md);
		border: 1px solid var(--color-text-dark);
		border-radius: var(--radius-sm);
	}

	#skip-link.visually-hidden:focus {
		position: absolute;
		top: var(--spacing-md);
		left: var(--spacing-md);
		z-index: var(--z-skip-link);
	}

	/* Header & Navigation */
	header {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		padding: var(--spacing-md);

		margin-bottom: 10px;
	}

	.nav {
		display: flex;
		gap: var(--spacing-sm) var(--spacing-md);
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.nav-item {
		display: inline-block;
		background-color: rgba(184, 134, 11, 0.1);
		border-radius: var(--radius-md);
		color: #fff;
		cursor: pointer;
		padding: 10px;
		font-size: 18px;
		font-weight: bold;
		letter-spacing: 1px;
		border: none;
		text-transform: uppercase;
		transition: background var(--transition-normal);
	}

	.nav-item a[href]:not(:hover) {
		text-decoration: none;
	}

	.nav-item:hover {
		background-image: linear-gradient(
			90deg,
			rgba(90, 10, 10, 0.5) 10%,
			rgba(184, 134, 11, 0.7) 30%,
			rgba(17, 17, 17, 0.8) 60%,
			rgba(0, 0, 0, 0.99) 100%
		);
		animation: gradient-slide 10s linear infinite;
		color: #000;
	}

	.nav a[href][aria-current="page"] {
		text-decoration: none;
	}

	@media (min-width: 900px) {
		.nav-item {
			color: #fff;
		}
	}

	.home-link {
		font-size: 2rem;
		text-decoration: none;
		text-transform: uppercase;
		transition: color var(--transition-fast);
		text-shadow: 0 2px 4px rgba(255, 255, 255, 0.3);
	}

	.home-link:hover {
		background-image: linear-gradient(
			90deg,
			rgba(90, 10, 10, 0.5) 10%,
			rgba(184, 134, 11, 0.7) 30%,
			rgba(17, 17, 17, 0.8) 60%,
			rgba(0, 0, 0, 0.6) 100%
		);
		animation: gradient-slide 20s linear infinite;
		color: rgba(0, 0, 0, 0.3);
	}

	@keyframes gradient-slide {
		to {
			background-position: 20vw;
		}
	}

	/* Hero Section */
	.hero {
		height: 50vh;
		min-height: 400px;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		overflow: hidden;
		color: var(--color-text-main);
		background-color: var(--color-bg-main);
		background-image: url("/assets/WebBG.webp");
		background-size: cover;
		background-position: top;
		background-repeat: no-repeat;
		border-radius: var(--radius-lg);
	}

	.hero-content {
		position: relative;
		z-index: var(--z-hero-content);
		padding: var(--spacing-xl);
		max-width: 90%;
		animation: fadeInUp 1.2s ease-out forwards;
	}

	.hero-overlay {
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.7);
		border-radius: var(--radius-lg);
		z-index: var(--z-overlay);
	}

	.hero::before {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
		z-index: var(--z-nav);
	}

	.hero > * {
		position: relative;
		z-index: calc(var(--z-nav) + 100);
		max-width: 90%;
	}

	.hero h1 {
		margin: 0;
		font-size: clamp(1rem, 10vw, 6rem);
		font-weight: bold;
		color: var(--color-text-main);
		text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
		letter-spacing: 0.05em;
	}

	.hero p {
		margin: 0;
		font-size: clamp(1rem, 4vw, 2rem);
		text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
		font-family: var(--font-family-serif);
	}

	.hero-subtitle {
		margin: 0;
		font-size: clamp(1.4rem, 5vw, 2.5rem);
		font-style: italic;
		color: var(--color-text-main);
		text-shadow: 0 2px 8px var(--color-primary);
		opacity: 0.95;
	}

	.hero-icon {
		position: absolute;
		width: 300px;
		max-width: 80%;
		height: auto;
		z-index: calc(var(--z-overlay) + 1);
		filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.8));
		pointer-events: none;
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(40px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* Post Counter & Grid Headers */
	.postcounter {
		text-align: center;
		padding: var(--spacing-md);
		background: var(--color-bg-overlay-light);
		border-radius: var(--radius-lg);
		border: 1px solid var(--color-border-light);
		margin-inline: 10%;
	}

	.postcounter h1 {
		font-size: 2em;
		color: var(--color-primary);
	}

	.latest-posts-grid {
		max-width: 1200px;
		padding: var(--spacing-xl) var(--spacing-md);
		background: var(--color-bg-overlay-light);
		border-radius: var(--radius-xl);
		border: 1px solid var(--color-border-light);
	}

	.latest-posts-grid h1 {
		text-align: center;
		font-size: clamp(1.5rem, 4vw, 2rem);
		color: var(--color-primary);
		margin: 3rem 0 2rem;
		text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
		position: relative;
	}

	.latest-posts-grid h1::after {
		content: "";
		display: block;
		width: 120px;
		height: 2px;
		background: linear-gradient(
			to right,
			transparent,
			var(--color-primary),
			transparent
		);
		margin: 0.8rem auto 0;
	}

	/* Post Card Component */
	.post-card {
		background: var(--color-bg-card);
		border: 12px solid;
		border-image: linear-gradient(
				135deg,
				var(--color-primary) 0%,
				var(--color-primary-dark) 50%,
				var(--color-primary) 100%
			)
			1;
		box-shadow:
			var(--shadow-card),
			inset 0 0 0 3px rgba(255, 255, 255, 0.1);
		position: relative;
		overflow: hidden;
		padding: 20px;
		border-radius: var(--radius-md);
		transition: all var(--transition-normal) ease;
		display: flex;
		flex-direction: column;
	}

	/* Inner mat/padding effect */
	.post-card::before {
		content: "";
		position: absolute;
		inset: 12px;
		border: 8px solid var(--color-bg-card);
		border-radius: calc(var(--radius-md) - 2px);
		pointer-events: none;
		z-index: var(--z-base);
		box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
	}

	/* Decorative corner flourishes - now on top of the mat */
	.post-card::after {
		content: "";
		position: absolute;
		width: 24px;
		height: 24px;
		border: 3px solid var(--color-primary-light);
		pointer-events: none;
		z-index: calc(var(--z-base) + 1);
		border-radius: 0 0 4px 0;
	}

	.post-card::after {
		top: 14px;
		inset-inline-start: 14px;
		border-right: none;
		border-bottom: none;
	}

	/* Second corner flourish */
	.post-card .corner-flourish {
		position: absolute;
		width: 24px;
		height: 24px;
		border: 3px solid var(--color-primary-light);
		pointer-events: none;
		z-index: calc(var(--z-base) + 1);
		border-radius: 0 0 4px 0;
	}

	.post-card .corner-flourish.bottom-right {
		bottom: 14px;
		inset-inline-end: 14px;
		border-left: none;
		border-top: none;
		transform: rotate(180deg);
	}

	.post-card .corner-flourish.top-right {
		top: 14px;
		inset-inline-end: 14px;
		border-left: none;
		border-bottom: none;
		transform: rotate(90deg);
	}

	.post-card .corner-flourish.bottom-left {
		bottom: 14px;
		inset-inline-start: 14px;
		border-right: none;
		border-top: none;
		transform: rotate(270deg);
	}

	.post-card:hover {
		transform: translateY(-6px) scale(1.01);
		box-shadow: var(--shadow-card-hover);
		z-index: var(--z-overlay);
		will-change: transform;
	}

	.post-card[data-tag="history"]::after {
		content: "🏰";
		position: absolute;
		top: 1rem;
		right: 1rem;
		font-size: 2rem;
		opacity: 0.6;
	}

	/* Post Image */
	.post-image-link {
		width: 100%;
		height: auto;
		max-height: 500px;
		border: 4px solid #2a2a2a;
		box-shadow:
			inset 0 0 8px rgba(0, 0, 0, 0.3),
			0 2px 4px rgba(0, 0, 0, 0.2);
		position: relative;
		display: block;
		overflow: hidden;
		border-radius: var(--radius-sm);
	}

	.post-image-link,
	.post-image {
		width: 100%;
		height: auto;
		overflow: hidden;
		display: block;
	}

	.post-image-link::after {
		content: "";
		position: absolute;
		inset: 0;
		box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6);
		pointer-events: none;
	}

	.post-image {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;
		object-position: center;
		transition: transform var(--transition-slow);
	}

	.post-card:hover .post-image {
		transform: scale(1.2);
	}

	.post-image img[width][height] {
		height: auto;
	}

	/* Post Footer (Card Bottom Bar) */
	.post-footer {
		padding: 12px 15px;
		background: linear-gradient(
			to right,
			var(--color-primary-dark),
			var(--color-primary)
		);
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 0.9rem;
		color: var(--color-text-main);
		border-top: 2px solid var(--color-primary-dark);
		/* Ensure sufficient contrast: white on #8b6914 = 12:1 (AAA) */
		margin-top: auto;
		border-radius: 0 0 var(--radius-md) var(--radius-md);
		box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
	}

	/* Post Content (Inside Card) */
	.post-content {
		padding: var(--spacing-md);
		flex-grow: 1;
		display: flex;
		flex-direction: column;
	}

	.post-content p {
		padding: 0;
		font-family: var(--font-family-sans);
	}

	.post-content a[href] {
		text-decoration: underline;
		text-underline-position: from-font;
		text-underline-offset: 0.1em;
		text-decoration-thickness: 1px;
	}

	.post-title {
		margin: 0 0 0.5rem;
		font-size: clamp(1.3rem, 4vw, 1.8rem);
		text-transform: capitalize;
		font-size: 2rem;
		color: var(--color-text-main);
		text-shadow: var(--shadow-text);
		line-height: 1.2;
	}

	.post-title h1 {
		margin: 0 0 0.8rem;
		font-size: 1.4rem;
		text-transform: capitalize;
		color: var(--color-text-main);
		text-shadow: var(--shadow-text);
	}

	.post-title a {
		color: var(--color-primary);
		/* Contrast: #8b6914 on #1a1a1a = 5.3:1 (WCAG AA pass) */
		text-decoration: none;
		font-size: clamp(1.4rem, 4vw, 2rem);
		line-height: 1;
		margin-bottom: 0.6rem;
		text-shadow: 0 3px 10px rgba(0, 0, 0, 0.9);
		transition: color var(--transition-fast);
	}

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

	.post-overlay {
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.9) 0%,
			transparent 50%,
			rgba(0, 0, 0, 0.8) 100%
		);
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding: var(--spacing-md);
		color: var(--color-text-main);
		pointer-events: none;
	}

	.post-info {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--spacing-lg);
		font-size: 1rem;
		color: var(--color-text-subtle);
	}

	.post-info time {
		font-style: italic;
	}

	.tag-pill {
		background: #fff;
		color: #000;
		font-family: var(--font-family-serif);
		padding: 0.2rem 0.6rem;
		border-radius: 1rem;
		text-decoration: none;
		font-size: 0.75rem;
		transition: all var(--transition-fast);
	}

	.tag-pill:hover {
		background: var(--color-primary);
		color: #fff;
	}

	.post-meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem;
		font-size: 0.85rem;
		color: var(--color-text-dim);
		justify-content: center;
		text-align: center;
	}

	.post-tags {
		display: flex;
		gap: 0.3rem;
		flex-wrap: wrap;
		justify-content: center;
	}

	.post-metadata time {
		margin-inline-end: 0;
	}

	.post-date {
		font-size: 0.9rem;
		opacity: 0.9;
	}

	.post-excerpt {
		flex-grow: 1;
		margin: 0.5rem 0;
		color: var(--color-text-main);
	}

	.read-more {
		align-self: flex-start;
		margin-top: auto;
		color: var(--color-primary);
		/* Contrast: #8b6914 on #1a1a1a = 5.3:1 (WCAG AA pass) */
		text-decoration: none;
		font-weight: bold;
		transition: color var(--transition-fast);
	}

	.read-more:hover {
		color: var(--color-primary-hover);
		text-decoration: underline;
	}

	/* Hover effects for card content */
	.post-title a,
	.post-excerpt,
	.read-more {
		text-decoration: none;
		transition: color var(--transition-normal);
	}

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

	.post-card:hover .read-more {
		color: var(--color-primary-hover);
		text-decoration: underline;
	}

	/* Post List (Archive/List View) */
	.postlist {
		counter-reset: start-from var(--postlist-index);
		list-style: none;
		padding: 0;
		padding-inline-start: 1.5rem;
	}

	.postlist-item {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		counter-increment: start-from -1;
		margin-bottom: 1em;
	}

	.postlist-item:before {
		display: inline-block;
		pointer-events: none;
		content: "" counter(start-from, decimal-leading-zero) ". ";
		line-height: 100%;
		text-align: end;
		margin-inline-start: -1.5rem;
	}

	.postlist-date,
	.postlist-item:before {
		font-size: 0.8125em;
		color: var(--color-text-dark);
	}

	.postlist-date {
		word-spacing: -0.5px;
	}

	.postlist-link {
		font-size: 1.1875em;
		font-weight: 700;
		flex-basis: calc(100% - 1.5rem);
		padding-inline-start: 0.25em;
		padding-inline-end: 0.5em;
		text-underline-position: from-font;
		text-underline-offset: 0;
		text-decoration-thickness: 1px;
	}

	.postlist-item-active .postlist-link {
		font-weight: bold;
	}

	.post-tag {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-transform: capitalize;
		font-style: italic;
	}

	.postlist-item > .post-tag {
		align-self: center;
	}

	/* Links Navigation (Next/Prev) */
	.links-nextprev {
		display: flex;
		justify-content: space-between;
		gap: 0.5em 1em;
		list-style: "";
		border-top: 1px dashed var(--color-text-muted);
		padding: 1em 0;
	}

	.links-nextprev > * {
		flex-grow: 1;
	}

	.links-nextprev-next {
		text-align: right;
	}

	/* Footer */
	footer {
		position: relative;
		padding: var(--spacing-xl) var(--spacing-md);
		margin-top: 10px;
		overflow: hidden;
		background-image: url("/assets/FooterBG.jpg");
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		height: 30vh;
	}

	footer ul.nav {
		align-items: center;
		justify-content: center;
		text-align: center;
		cursor: pointer;
	}

	footer * {
		align-items: center;
		justify-content: center;
		text-align: center;
		cursor: pointer;
	}

	footer p {
		font-size: 0.9rem;
	}

	/* Faded top/bottom lines removed */

	/* Footer image */
	.footer-image {
		width: 50px;
		max-width: 80%;
		height: auto;
		filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8)) brightness(1.1);
		opacity: 0.9;
		transition: opacity var(--transition-fast);
		position: relative;
		bottom: -10px;
	}

	.footer-image:hover {
		opacity: 1;
	}

	.footer-credit {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		height: 70%;
	}

	/* Subscribe button in footer */
	.btn-subscribe {
		display: inline-block;
		background: var(--color-primary);
		color: var(--color-text-main);
		padding: 0.6rem 1.2rem;
		border-radius: var(--radius-md);
		text-decoration: none;
		font-weight: bold;
		transition: all var(--transition-fast);
		border: 2px solid transparent;
		margin-top: var(--spacing-md);
	}

	.btn-subscribe:hover {
		background: var(--color-primary-hover);
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(184, 134, 11, 0.4);
		text-decoration: none;
	}

	.footer-credit span {
		display: block;
		margin-top: auto;
	}

	/* Sidebar */
	.sidebar {
		background: var(--color-bg-overlay-lightest);
		padding: var(--spacing-md);
		border-radius: var(--radius-lg);
		border: 1px solid var(--color-border);
		height: fit-content;
		position: sticky;
		top: var(--spacing-xl);
		align-self: start;
	}

	@media (min-width: 901px) {
		.sidebar {
			overflow-y: auto;
		}
	}

	/* Author Block */
	.sidebar-author {
		text-align: center;
		padding: var(--spacing-md);
		background: var(--color-bg-overlay-lighter);
		border-radius: var(--radius-xl);
		border: 1px solid var(--color-border);
		margin-bottom: var(--spacing-md);
		transition:
			transform var(--transition-normal),
			box-shadow var(--transition-normal);
	}

	.sidebar-author:hover {
		transform: translateY(-4px);
		box-shadow: 0 12px 24px rgba(184, 134, 11, 0.15);
	}

	.avatar {
		width: 96px;
		height: 96px;
		border-radius: var(--radius-full);
		border: 3px solid var(--color-primary);
		margin-bottom: 0;
		object-fit: cover;
		filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
	}

	@media (min-width: 901px) {
		.avatar {
			width: 120px;
			height: 120px;
		}
	}

	.sidebar-author h4 {
		margin: 0.5rem 0 0.8rem;
		color: var(--color-text-main);
		font-size: 1.2rem;
	}

	.sidebar-author p {
		margin: 0.8rem 0 1.2rem;
		font-size: 0.95rem;
		color: var(--color-text-dim);
		line-height: 1.5;
	}

	.author-links {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--spacing-md);
	}

	.author-links a {
		color: var(--color-primary);
		text-decoration: none;
		font-weight: 500;
		transition: color var(--transition-fast);
	}

	.author-links a:hover,
	.author-links a:focus {
		color: var(--color-primary-hover);
		text-decoration: underline;
	}

	/* Tags Cloud */
	.sidebar-tags {
		display: block;
	}

	.sidebar-tags h4 {
		margin: 0 0 1rem;
		color: var(--color-primary);
		font-size: 1.2rem;
		text-align: center;
	}

	.tag-list {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		justify-content: center;
	}

	.tag-list a {
		display: inline-block;
		padding: 0.3rem 0.7rem;
		background: rgba(184, 134, 11, 0.15);
		color: var(--color-primary);
		border-radius: 1rem;
		text-decoration: none;
		transition: all var(--transition-fast);
		font-size: 0.9rem;
	}

	.tag-list a:hover {
		background: var(--color-primary);
		color: #111;
		transform: translateY(-1px);
	}

	.tag-list {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 0.6rem;
		justify-content: center;
	}

	.tag-list li {
		display: inline-block;
	}

	.tag-list a {
		background: rgba(184, 134, 11, 0.15);
		color: var(--color-primary);
		padding: 0.4rem 0.9rem;
		border-radius: 10px;
		font-size: 0.9rem;
		text-decoration: none;
		transition: all var(--transition-fast) ease;
	}

	.tag-list a:hover,
	.tag-list a:focus {
		background: var(--color-primary);
		color: #111;
		transform: translateY(-1px);
	}

	/* Table of Contents Block */
	.sidebar-toc {
		padding: var(--spacing-md);
		background: var(--color-bg-overlay-lighter);
		border-radius: var(--radius-xl);
		border: 1px solid var(--color-border);
		margin-bottom: var(--spacing-lg);
	}

	.sidebar-toc h4 {
		margin: var(--spacing-sm);
		color: var(--color-text-main);
		font-size: 1.2rem;
		text-align: center;
		text-transform: uppercase;
	}

	.sidebar-toc ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.sidebar-toc li {
		margin: 0.5rem 0;
	}

	.sidebar-toc a {
		color: var(--color-text-dim);
		text-decoration: none;
		font-size: 0.95rem;
		display: block;
		padding: 0.3rem 0.6rem;
		border-radius: 6px;
		transition: all var(--transition-fast);
	}

	.sidebar-toc a:hover,
	.sidebar-toc a:focus {
		background: var(--color-primary-focus);
		color: var(--color-primary-hover);
	}

	/* Indent subheadings */
	.sidebar-toc a[href^="#section-"] {
		padding-left: 1.2rem;
	}

	/* Subscribe Block */
	.sidebar-subscribe {
		padding: var(--spacing-md);
		background: var(--color-bg-overlay-lighter);
		border-radius: var(--radius-xl);
		border: 1px solid var(--color-border);
		text-align: center;
		margin-top: 0;
	}

	.sidebar-subscribe h4 {
		margin: var(--spacing-sm);
		color: var(--color-text-main);
		font-size: 1.3rem;
		text-transform: uppercase;
	}

	.sidebar-subscribe p {
		margin: 0 0 var(--spacing-md);
		font-size: 1rem;
		color: var(--color-text-subtle);
		line-height: 1.5;
	}

	.sidebar-subscribe .small {
		font-size: 0.85rem;
		color: #888;
		margin-top: var(--spacing-md);
	}

	.sidebar-subscribe iframe {
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
	}
}

/* --------------------------------------------------------------------------
   Utilities Layer
   -------------------------------------------------------------------------- */
@layer utilities {
	.visually-hidden:not(:focus):not(:active) {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	.ha-placeholder {
		opacity: 0;
	}

	/* Media Elements */
	video,
	iframe {
		width: 100%;
		height: auto;
	}

	iframe {
		aspect-ratio: 16/9;
	}

	img[src$=".svg"] {
		width: 100%;
		height: auto;
		max-width: none;
	}

	img[width][height] {
		height: auto;
	}

	/* Image utility classes for sizing and alignment */
	.img-small {
		max-width: 300px;
	}
	.img-medium {
		max-width: 500px;
	}
	.img-large {
		max-width: 800px;
	}
	.img-half {
		max-width: 50%;
	}
	.img-third {
		max-width: 33.333%;
	}
	.img-two-thirds {
		max-width: 66.666%;
	}
	.img-center {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.img-left {
		float: left;
		margin-right: 1.5rem;
		margin-bottom: 1rem;
	}
	.img-right {
		float: right;
		margin-left: 1.5rem;
		margin-bottom: 1rem;
	}
	.img-rounded {
		border-radius: 8px;
	}
	.img-caption {
		font-size: 0.875rem;
		color: var(--color-text-muted);
		text-align: center;
		margin-top: 0.5rem;
		font-style: italic;
	}

	/* Image grid gallery layout */
	.image-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		margin: 1.5rem 0;
	}

	.image-grid .img-third {
		flex: 0 0 calc(33.333% - 1rem);
	}

	@media (max-width: 900px) {
		.image-grid .img-third {
			flex: 0 0 calc(50% - 1rem);
		}
	}

	@media (max-width: 600px) {
		.image-grid .img-third {
			flex: 0 0 100%;
		}
	}

	/* Tables & Code */
	table {
		margin: 1em 0;
	}

	table td,
	table th {
		padding-inline-end: 1em;
	}

	pre,
	code {
		font-family: var(--font-family-mono);
	}

	pre:not([class*="language-"]) {
		margin: 0.5em 0;
		line-height: 1.375;
		-moz-tab-size: var(--syntax-tab-size);
		-o-tab-size: var(--syntax-tab-size);
		tab-size: var(--syntax-tab-size);
		-webkit-hyphens: none;
		-ms-hyphens: none;
		hyphens: none;
		direction: ltr;
		text-align: left;
		white-space: pre;
		word-spacing: normal;
		word-break: normal;
		overflow-x: auto;
	}

	code {
		word-break: break-all;
	}

	p:last-child {
		margin-bottom: 10px;
	}
}

/* --------------------------------------------------------------------------
   Print Layer
   -------------------------------------------------------------------------- */
@layer print {
	@media print {
		/* Reset backgrounds for ink savings */
		*,
		*::before,
		*::after {
			background-color: transparent !important;
			color: #000 !important;
			text-shadow: none !important;
			box-shadow: none !important;
		}

		/* Hide non-essential elements */
		header,
		nav,
		footer,
		.sidebar,
		.post-image,
		.hero,
		.links-nextprev,
		.post-counter,
		.latest-posts-grid,
		.masonry-grid,
		.grid,
		.post-card::before,
		.post-card::after,
		.post-overlay,
		.sidebar-subscribe,
		.ha-placeholder {
			display: none !important;
		}

		/* Show links with their URLs */
		a[href]::after {
			content: " (" attr(href) ")";
			font-size: 0.8rem;
			color: #666;
		}

		a[href]::after {
			text-decoration: none;
		}

		/* Don't show internal anchor links */
		a[href^="#"]::after {
			content: "";
		}

		/* Show image URLs instead of images */
		img {
			display: none;
		}

		img[src]::after {
			content: " [Image: " attr(alt) " (" attr(src) ")]";
			font-size: 0.8rem;
			color: #666;
			font-style: italic;
		}

		/* Typography for print */
		body {
			font-size: 12pt;
			line-height: 1.5;
			max-width: 100%;
			margin: 0;
			padding: 0;
		}

		/* Headings */
		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			page-break-after: avoid;
			break-after: avoid;
			color: #000 !important;
			text-shadow: none !important;
		}

		/* Paragraphs and lists */
		p,
		li {
			orphans: 3;
			widows: 3;
		}

		/* Tables */
		table {
			border-collapse: collapse;
			page-break-inside: avoid;
		}

		th,
		td {
			border: 1px solid #000;
			padding: 0.25rem 0.5rem;
		}

		/* Code blocks */
		pre,
		code {
			font-family: "Courier New", Courier, monospace;
			font-size: 0.9em;
			white-space: pre-wrap;
			word-wrap: break-word;
		}

		/* Post layout for single post view */
		.post-wrapper {
			display: block;
			max-width: 100%;
			margin: 0;
			padding: 0;
			gap: 0;
		}

		.post-main {
			max-width: 100%;
		}

		.post-content {
			padding: 0;
		}

		.post-title {
			color: #000 !important;
			text-shadow: none !important;
			font-size: 1.5em;
			margin-bottom: 1em;
		}

		.post-title a {
			color: #000 !important;
			text-decoration: none;
		}

		.post-meta,
		.post-info {
			color: #666 !important;
			font-size: 0.9em;
			margin-bottom: 1em;
		}

		.post-excerpt {
			color: #333 !important;
		}

		.read-more {
			color: #000 !important;
		}

		.post-footer {
			background: transparent !important;
			border: 1px solid #000 !important;
			color: #000 !important;
		}

		.tag-pill {
			background: transparent !important;
			border: 1px solid #000 !important;
			color: #000 !important;
		}

		/* Page breaks */
		.post-card,
		article {
			page-break-inside: avoid;
			break-inside: avoid;
		}

		/* URLs in footer */
		footer a[href]::after {
			content: " (" attr(href) ")";
		}
	}
}
@media (prefers-color-scheme: dark) {
	:root {
		--background-gradient: linear-gradient(
			180deg,
			var(--color-bg-gradient-start) 20%,
			var(--color-bg-gradient-mid1) 30%,
			var(--color-bg-gradient-mid2) 50%,
			var(--color-bg-gradient-start) 80%,
			var(--color-bg-gradient-start) 100%
		);
	}
}

/* Light Mode Fallback (if needed) */
@media (prefers-color-scheme: light) {
	:root {
		--background-gradient: linear-gradient(180deg, #f5f5f5 0%, #e0e0e0 100%);
		--color-text-main: #000000;
		--color-bg-card: #ffffff;
	}
}

/* --------------------------------------------------------------------------
   Base Styles & Reset
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "Quintessential";
	src: url("/font/Quintessential-Regular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* Full-screen gradient on html */
html,
body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	font-family: var(--font-family-serif);
	color: var(--color-text-main);
	background: var(--background-gradient, var(--color-bg-main));
	scroll-behavior: smooth;
}

html {
	scroll-padding-top: 100px; /* Accommodate fixed/sticky header for anchor navigation */
}

body {
	max-width: var(--max-width-site);
	margin: 0 auto;
	line-height: 1.6;
}

* {
	box-sizing: border-box;
}

/* View Transitions API */
@view-transition {
	navigation: auto;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   Accessibility Utilities
   -------------------------------------------------------------------------- */
.visually-hidden:not(:focus):not(:active) {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

a:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

#skip-link {
	text-decoration: none;
	background: var(--color-bg-overlay);
	color: var(--color-text-main);
	padding: var(--spacing-sm) var(--spacing-md);
	border: 1px solid var(--color-text-dark);
	border-radius: var(--radius-sm);
}

#skip-link.visually-hidden:focus {
	position: absolute;
	top: var(--spacing-md);
	left: var(--spacing-md);
	z-index: var(--z-skip-link);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
p {
	line-height: 1.5;
	font-family: var(--font-family-sans);
}

li {
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */
a[href] {
	color: var(--color-primary);
	/* Contrast: #8b6914 on #000 = 5.8:1 (WCAG AA pass) */
	text-decoration: none;
}

a[href]:visited {
	color: var(--color-primary-hover);
}

a[href]:hover,
a[href]:active {
	color: var(--color-primary-hover);
	text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   Layout Containers
   -------------------------------------------------------------------------- */
main {
	max-width: var(--max-width-main);
	margin: 0 auto;
	padding: 0 var(--spacing-md);
}

/* Homepage - Full Width Layout */
body.page-wide {
	max-width: 100%;
}

body.page-wide main {
	max-width: 100%;
	padding: 0;
}

body.page-wide .latest-posts-grid,
body.page-wide article,
body.page-wide .post-content {
	max-width: var(--max-width-content);
	margin: 0 auto;
}

body.page-wide .hero {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: var(--spacing-md);

	margin-bottom: 10px;
}

.nav {
	display: flex;
	gap: var(--spacing-sm) var(--spacing-md);
	padding: 0;
	margin: 0;
	list-style: none;
}

.nav-item {
	display: inline-block;
	background-color: rgba(184, 134, 11, 0.1);
	border-radius: var(--radius-md);
	color: #fff;
	cursor: pointer;
	padding: 10px;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 1px;
	border: none;
	text-transform: uppercase;
	transition: background var(--transition-normal);
}

.nav-item a[href]:not(:hover) {
	text-decoration: none;
}

.nav-item:hover {
	background-image: linear-gradient(
		90deg,
		rgba(90, 10, 10, 0.5) 10%,
		rgba(184, 134, 11, 0.7) 30%,
		rgba(17, 17, 17, 0.8) 60%,
		rgba(0, 0, 0, 0.99) 100%
	);
	animation: gradient-slide 10s linear infinite;
	color: #000;
}

.nav a[href][aria-current="page"] {
	text-decoration: none;
}

@media (min-width: 900px) {
	.nav-item {
		color: #fff;
	}
}

.home-link {
	font-size: 2rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--transition-fast);
}

.home-link:hover {
	background-image: linear-gradient(
		90deg,
		rgba(90, 10, 10, 0.5) 10%,
		rgba(184, 134, 11, 0.7) 30%,
		rgba(17, 17, 17, 0.8) 60%,
		rgba(0, 0, 0, 0.6) 100%
	);
	animation: gradient-slide 20s linear infinite;
	color: rgba(0, 0, 0, 0.3);
}

/* Single gradient animation keyframe - fixed duplicate */
@keyframes gradient-slide {
	to {
		background-position: 20vw;
	}
}

/* --------------------------------------------------------------------------
   Hero Section
   -------------------------------------------------------------------------- */
.hero {
	height: 50vh;
	min-height: 400px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	color: var(--color-text-main);
	background-color: var(--color-bg-main);
	background-image: url("/assets/WebBG.webp");
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
	border-radius: var(--radius-lg);
}

.hero-content {
	position: relative;
	z-index: var(--z-hero-content);
	padding: var(--spacing-xl);
	max-width: 90%;
	animation: fadeInUp 1.2s ease-out forwards;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	border-radius: var(--radius-lg);
	z-index: var(--z-overlay);
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: var(--z-nav);
}

.hero > * {
	position: relative;
	z-index: calc(var(--z-nav) + 100);
	max-width: 90%;
}

.hero h1 {
	margin: 0;
	font-size: clamp(1rem, 10vw, 6rem);
	font-weight: bold;
	color: var(--color-text-main);
	text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
	letter-spacing: 0.05em;
}

.hero p {
	margin: 0;
	font-size: clamp(1rem, 4vw, 2rem);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
	font-family: var(--font-family-serif);
}

.hero-subtitle {
	margin: 0;
	font-size: clamp(1.4rem, 5vw, 2.5rem);
	font-style: italic;
	color: var(--color-text-main);
	text-shadow: 0 2px 8px var(--color-primary);
	opacity: 0.95;
}

.hero-icon {
	position: absolute;
	width: 300px;
	max-width: 80%;
	height: auto;
	z-index: calc(var(--z-overlay) + 1);
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.8));
	pointer-events: none;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --------------------------------------------------------------------------
   Post Counter & Grid Headers
   -------------------------------------------------------------------------- */
.postcounter {
	text-align: center;
	padding: var(--spacing-md);
	background: var(--color-bg-overlay-light);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border-light);
	margin-inline: 10%;
}

.postcounter h1 {
	font-size: 2em;
	color: var(--color-primary);
}

.latest-posts-grid {
	max-width: 1200px;
	padding: var(--spacing-xl) var(--spacing-md);
	background: var(--color-bg-overlay-light);
	border-radius: var(--radius-xl);
	border: 1px solid var(--color-border-light);
}

.latest-posts-grid h1 {
	text-align: center;
	font-size: clamp(1.5rem, 4vw, 2rem);
	color: var(--color-primary);
	margin: 3rem 0 2rem;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
	position: relative;
}

.latest-posts-grid h1::after {
	content: "";
	display: block;
	width: 120px;
	height: 2px;
	background: linear-gradient(
		to right,
		transparent,
		var(--color-primary),
		transparent
	);
	margin: 0.8rem auto 0;
}

/* --------------------------------------------------------------------------
   Grid Layout (Homepage)
   -------------------------------------------------------------------------- */
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	margin-inline: 10%;
	content-visibility: auto;
	contain-intrinsic-size: 1500px; /* Estimated height for scroll anchoring */
}

@media (min-width: 900px) {
	.grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Post Card Component
   -------------------------------------------------------------------------- */
.post-card {
	background: var(--color-bg-card);
	border: 12px solid;
	border-image: linear-gradient(
			135deg,
			var(--color-primary) 0%,
			var(--color-primary-dark) 50%,
			var(--color-primary) 100%
		)
		1;
	box-shadow:
		var(--shadow-card),
		inset 0 0 0 3px rgba(255, 255, 255, 0.1);
	position: relative;
	overflow: hidden;
	padding: 20px;
	border-radius: var(--radius-md);
	transition: all var(--transition-normal) ease;
	display: flex;
	flex-direction: column;
}

/* Inner mat/padding effect */
.post-card::before {
	content: "";
	position: absolute;
	inset: 12px;
	border: 8px solid var(--color-bg-card);
	border-radius: calc(var(--radius-md) - 2px);
	pointer-events: none;
	z-index: var(--z-base);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Decorative corner flourishes - positioned on top of mat */
.post-card::after {
	content: "";
	position: absolute;
	width: 24px;
	height: 24px;
	border: 3px solid var(--color-primary-light);
	pointer-events: none;
	z-index: calc(var(--z-base) + 1);
	border-radius: 0 0 4px 0;
	top: 14px;
	inset-inline-start: 14px;
	border-right: none;
	border-bottom: none;
}

/* Additional corner flourishes for complete frame effect */
.post-card .corner-flourish {
	position: absolute;
	width: 24px;
	height: 24px;
	border: 3px solid var(--color-primary-light);
	pointer-events: none;
	z-index: calc(var(--z-base) + 1);
	border-radius: 0 0 4px 0;
}

.post-card .corner-flourish.bottom-right {
	bottom: 14px;
	inset-inline-end: 14px;
	border-left: none;
	border-top: none;
	transform: rotate(180deg);
}

.post-card .corner-flourish.top-right {
	top: 14px;
	inset-inline-end: 14px;
	border-left: none;
	border-bottom: none;
	transform: rotate(90deg);
}

.post-card .corner-flourish.bottom-left {
	bottom: 14px;
	inset-inline-start: 14px;
	border-right: none;
	border-top: none;
	transform: rotate(270deg);
}

.post-card:hover {
	transform: translateY(-6px) scale(1.01);
	box-shadow: var(--shadow-card-hover);
	z-index: var(--z-overlay);
	will-change: transform;
}

.post-card[data-tag="history"]::after {
	content: "🏰";
	position: absolute;
	top: 1rem;
	right: 1rem;
	font-size: 2rem;
	opacity: 0.6;
}

/* --------------------------------------------------------------------------
   Post Image
   -------------------------------------------------------------------------- */
.post-image-link {
	width: 100%;
	height: auto;
	max-height: 500px;
	border: 4px solid #2a2a2a;
	box-shadow:
		inset 0 0 8px rgba(0, 0, 0, 0.3),
		0 2px 4px rgba(0, 0, 0, 0.2);
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius-sm);
}

.post-image-link,
.post-image {
	width: 100%;
	height: auto;
	overflow: hidden;
	display: block;
}

.post-image-link::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6);
	pointer-events: none;
}

.post-image {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
	transition: transform var(--transition-slow);
}

.post-card:hover .post-image {
	transform: scale(1.2);
}

.post-image img[width][height] {
	height: auto;
}

/* --------------------------------------------------------------------------
   Post Footer (Card Bottom Bar)
   -------------------------------------------------------------------------- */
.post-footer {
	padding: 0.5rem;
	background: rgba(26, 26, 26, 0.9); /* Dark card color with transparency */
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0.85rem;
	color: var(--color-text-dim);
	border-top: 2px solid var(--color-primary-dark);
	/* Ensure sufficient contrast: white on dark bg */
	margin-top: auto;
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* --------------------------------------------------------------------------
   Post Content (Inside Card)
   -------------------------------------------------------------------------- */
.post-content {
	padding: var(--spacing-md);
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.post-content p {
	padding: 0;
	font-family: var(--font-family-sans);
}

.post-title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.3rem, 4vw, 1.8rem);
	text-transform: capitalize;
	font-size: 2rem;
	color: var(--color-text-main);
	text-shadow: var(--shadow-text);
	line-height: 1.2;
}

.post-title h1 {
	margin: 0 0 0.8rem;
	font-size: 1.4rem;
	text-transform: capitalize;
	color: var(--color-text-main);
	text-shadow: var(--shadow-text);
}

.post-title a {
	color: var(--color-primary);
	/* Contrast: #8b6914 on #1a1a1a = 5.3:1 (WCAG AA pass) */
	text-decoration: none;
	font-size: clamp(1.4rem, 4vw, 2rem);
	line-height: 1;
	margin-bottom: 0.6rem;
	text-shadow: 0 3px 10px rgba(0, 0, 0, 0.9);
	transition: color var(--transition-fast);
}

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

.post-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.9) 0%,
		transparent 50%,
		rgba(0, 0, 0, 0.8) 100%
	);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: var(--spacing-md);
	color: var(--color-text-main);
	pointer-events: none;
}

.post-info {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-lg);
	font-size: 1rem;
	color: var(--color-text-subtle);
}

.post-info time {
	font-style: italic;
}

.tag-pill {
	background: #ffffff30;
	color: #000;
	font-family: var(--font-family-serif);
	/* Contrast: #000 on #fff = 21:1 (WCAG AAA pass) */
	padding: 0.2rem 0.6rem;
	border-radius: 1rem;
	text-decoration: none;
	font-size: 0.75rem;
	transition: all var(--transition-fast);
}

.tag-pill:hover {
	background: var(--color-primary);
	color: #fff;
}

.post-meta {
	text-align: center;
	align-items: center;
	gap: 0.1rem;
}

.post-metadata time {
	margin-inline-end: 0.1em;
}

.post-date {
	font-size: 0.9rem;
	opacity: 0.9;
}

.post-excerpt {
	flex-grow: 1;
	margin: 0.5rem 0;
	color: var(--color-text-main);
}

.read-more {
	align-self: flex-start;
	margin-top: auto;
	color: var(--color-primary);
	/* Contrast: #8b6914 on #1a1a1a = 5.3:1 (WCAG AA pass) */
	text-decoration: none;
	font-weight: bold;
	transition: color var(--transition-fast);
}

.read-more:hover {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

/* Hover effects for card content */
.post-title a,
.post-excerpt,
.read-more {
	text-decoration: none;
	transition: color var(--transition-normal);
}

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

.post-card:hover .read-more {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Post List (Archive/List View)
   -------------------------------------------------------------------------- */
.postlist {
	counter-reset: start-from var(--postlist-index);
	list-style: none;
	padding: 0;
	padding-inline-start: 1.5rem;
}

.postlist-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	counter-increment: start-from -1;
	margin-bottom: 1em;
}

.postlist-item:before {
	display: inline-block;
	pointer-events: none;
	content: "" counter(start-from, decimal-leading-zero) ". ";
	line-height: 100%;
	text-align: end;
	margin-inline-start: -1.5rem;
}

.postlist-date,
.postlist-item:before {
	font-size: 0.8125em;
	color: var(--color-text-dark);
}

.postlist-date {
	word-spacing: -0.5px;
}

.postlist-link {
	font-size: 1.1875em;
	font-weight: 700;
	flex-basis: calc(100% - 1.5rem);
	padding-inline-start: 0.25em;
	padding-inline-end: 0.5em;
	text-underline-position: from-font;
	text-underline-offset: 0;
	text-decoration-thickness: 1px;
}

.postlist-item-active .postlist-link {
	font-weight: bold;
}

.post-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-transform: capitalize;
	font-style: italic;
}

.postlist-item > .post-tag {
	align-self: center;
}

/* --------------------------------------------------------------------------
   Links Navigation (Next/Prev)
   -------------------------------------------------------------------------- */
.links-nextprev {
	display: flex;
	justify-content: space-between;
	gap: 0.5em 1em;
	list-style: "";
	border-top: 1px dashed var(--color-text-muted);
	padding: 1em 0;
}

.links-nextprev > * {
	flex-grow: 1;
}

.links-nextprev-next {
	text-align: right;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer {
	position: relative;
	padding: var(--spacing-xl) var(--spacing-md);
	margin-top: 10px;
	overflow: hidden;
	background-image: url("/assets/FooterBG.jpg");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	height: 30vh;
}

footer ul.nav {
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: pointer;
}

footer * {
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: pointer;
}

footer p {
	font-size: 0.9rem;
}

/* Footer image */
.footer-image {
	width: 50px;
	max-width: 80%;
	height: auto;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8)) brightness(1.1);
	opacity: 0.9;
	transition: opacity var(--transition-fast);
	position: relative;
	bottom: -10px;
}

.footer-image:hover {
	opacity: 1;
}

.footer-credit {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	height: 70%;
}

.footer-credit span {
	display: block;
	margin-top: auto;
}

p:last-child {
	margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   Blog Post Layout (Main + Sidebar)
   -------------------------------------------------------------------------- */
.post-wrapper {
	display: grid;
	grid-template-columns: 1fr var(--sidebar-width);
	gap: var(--spacing-2xl);
	max-width: 1200px;
	margin: var(--spacing-2xl) auto;
	padding: 0 var(--spacing-md);
	content-visibility: auto;
	contain-intrinsic-size: 2500px; /* Estimated height for scroll anchoring */
}

@media (max-width: 900px) {
	.post-wrapper {
		grid-template-columns: 1fr;
		gap: var(--spacing-xl);
	}
}

.post-main {
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.sidebar {
	background: var(--color-bg-overlay-lightest);
	padding: var(--spacing-md);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	height: fit-content;
	position: sticky;
	top: var(--spacing-xl);
	align-self: start;
}

@media (min-width: 901px) {
	.sidebar {
		overflow-y: auto;
	}
}

/* Author Block */
.sidebar-author {
	text-align: center;
	padding: var(--spacing-md);
	background: var(--color-bg-overlay-lighter);
	border-radius: var(--radius-xl);
	border: 1px solid var(--color-border);
	margin-bottom: var(--spacing-md);
	transition:
		transform var(--transition-normal),
		box-shadow var(--transition-normal);
}

.sidebar-author:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(184, 134, 11, 0.15);
}

.avatar {
	width: 96px;
	height: 96px;
	border-radius: var(--radius-full);
	border: 3px solid var(--color-primary);
	margin-bottom: 0;
	object-fit: cover;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}

@media (min-width: 901px) {
	.avatar {
		width: 120px;
		height: 120px;
	}
}

.sidebar-author h4 {
	margin: 0.5rem 0 0.8rem;
	color: var(--color-text-main);
	font-size: 1.2rem;
}

.sidebar-author p {
	margin: 0.8rem 0 1.2rem;
	font-size: 0.95rem;
	color: var(--color-text-dim);
	line-height: 1.5;
}

.author-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-md);
}

.author-links a {
	color: var(--color-primary);
	text-decoration: none;
	font-weight: 500;
	transition: color var(--transition-fast);
}

.author-links a:hover,
.author-links a:focus {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

/* Tags Block (Hidden by default) */
.sidebar-tags {
	display: block;
}

.sidebar-tags h4 {
	margin: 0 0 1rem;
	color: var(--color-primary);
	font-size: 1.2rem;
	text-align: center;
}

.tag-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.tag-list a {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	background: rgba(184, 134, 11, 0.15);
	color: var(--color-primary);
	border-radius: 1rem;
	text-decoration: none;
	transition: all var(--transition-fast);
	font-size: 0.9rem;
}

.tag-list a:hover {
	background: var(--color-primary);
	color: #111;
	transform: translateY(-1px);
}

/* Table of Contents Block */
.sidebar-toc {
	padding: var(--spacing-md);
	background: var(--color-bg-overlay-lighter);
	border-radius: var(--radius-xl);
	border: 1px solid var(--color-border);
	margin-bottom: var(--spacing-lg);
}

.sidebar-toc h4 {
	margin: var(--spacing-sm);
	color: var(--color-text-main);
	font-size: 1.2rem;
	text-align: center;
	text-transform: uppercase;
}

.sidebar-toc ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sidebar-toc li {
	margin: 0.5rem 0;
}

.sidebar-toc a {
	color: var(--color-text-dim);
	text-decoration: none;
	font-size: 0.95rem;
	display: block;
	padding: 0.3rem 0.6rem;
	border-radius: 6px;
	transition: all var(--transition-fast);
}

.sidebar-toc a:hover,
.sidebar-toc a:focus {
	background: var(--color-primary-focus);
	color: var(--color-primary-hover);
}

/* Indent subheadings */
.sidebar-toc a[href^="#section-"] {
	padding-left: 1.2rem;
}

/* Subscribe Block */
.sidebar-subscribe {
	padding: var(--spacing-md);
	background: var(--color-bg-overlay-lighter);
	border-radius: var(--radius-xl);
	border: 1px solid var(--color-border);
	text-align: center;
	margin-top: 0;
}

.sidebar-subscribe h4 {
	margin: var(--spacing-sm);
	color: var(--color-text-main);
	font-size: 1.3rem;
	text-transform: uppercase;
}

.sidebar-subscribe p {
	margin: 0 0 var(--spacing-md);
	font-size: 1rem;
	color: var(--color-text-subtle);
	line-height: 1.5;
}

.sidebar-subscribe .small {
	font-size: 0.85rem;
	color: #888;
	margin-top: var(--spacing-md);
}

.sidebar-subscribe iframe {
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.ha-placeholder {
	opacity: 0;
}

/* --------------------------------------------------------------------------
   Media Elements
   -------------------------------------------------------------------------- */
video,
iframe {
	width: 100%;
	height: auto;
}

iframe {
	aspect-ratio: 16/9;
}

img {
	max-width: 100%;
}

img[src$=".svg"] {
	width: 100%;
	height: auto;
	max-width: none;
}

img[width][height] {
	height: auto;
}

/* --------------------------------------------------------------------------
   Tables & Code
   -------------------------------------------------------------------------- */
table {
	margin: 1em 0;
}

table td,
table th {
	padding-inline-end: 1em;
}

pre,
code {
	font-family: var(--font-family-mono);
}

pre:not([class*="language-"]) {
	margin: 0.5em 0;
	line-height: 1.375;
	-moz-tab-size: var(--syntax-tab-size);
	-o-tab-size: var(--syntax-tab-size);
	tab-size: var(--syntax-tab-size);
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	overflow-x: auto;
}

code {
	word-break: break-all;
}

/* --------------------------------------------------------------------------
   Masonry Grid Layout (Archive/Tag Pages)
   -------------------------------------------------------------------------- */
.masonry-grid {
	columns: 3;
	column-gap: 3rem;
	margin: 10px auto;
	padding: 0.5rem;
}

.masonry-item {
	break-inside: avoid;
	margin-bottom: 2rem;
	display: block;
}

@media (max-width: 900px) {
	.masonry-grid {
		columns: 2;
	}
}

@media (max-width: 600px) {
	.masonry-grid {
		columns: 1;
	}
}

.masonry-item:hover {
	transform: translateY(0px) scale(1.02);
	box-shadow: 0 12px 24px rgba(184, 134, 11, 0.25);
	z-index: var(--z-overlay);
}

.masonry-item,
.post-card {
	max-width: 100%;
	break-inside: avoid-column;
	box-sizing: border-box;
	content-visibility: auto;
	contain-intrinsic-size: 600px; /* Estimated average card height */
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
/* Print Styles */
@media print {
	/* Reset backgrounds for ink savings */
	*,
	*::before,
	*::after {
		background-color: transparent !important;
		color: #000 !important;
		text-shadow: none !important;
		box-shadow: none !important;
	}

	/* Hide non-essential elements */
	header,
	nav,
	footer,
	.sidebar,
	.post-image,
	.hero,
	.links-nextprev,
	.post-counter,
	.latest-posts-grid,
	.masonry-grid,
	.grid,
	.post-card::before,
	.post-card::after,
	.post-overlay,
	.sidebar-subscribe,
	.ha-placeholder {
		display: none !important;
	}

	/* Show links with their URLs */
	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.8rem;
		color: #666;
	}

	a[href]::after {
		text-decoration: none;
	}

	/* Don't show internal anchor links */
	a[href^="#"]::after {
		content: "";
	}

	/* Show image URLs instead of images */
	img {
		display: none;
	}

	img[src]::after {
		content: " [Image: " attr(alt) " (" attr(src) ")]";
		font-size: 0.8rem;
		color: #666;
		font-style: italic;
	}

	/* Typography for print */
	body {
		font-size: 12pt;
		line-height: 1.5;
		max-width: 100%;
		margin: 0;
		padding: 0;
	}

	/* Headings */
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		page-break-after: avoid;
		break-after: avoid;
		color: #000 !important;
		text-shadow: none !important;
	}

	/* Paragraphs and lists */
	p,
	li {
		orphans: 3;
		widows: 3;
	}

	/* Tables */
	table {
		border-collapse: collapse;
		page-break-inside: avoid;
	}

	th,
	td {
		border: 1px solid #000;
		padding: 0.25rem 0.5rem;
	}

	/* Code blocks */
	pre,
	code {
		font-family: "Courier New", Courier, monospace;
		font-size: 0.9em;
		white-space: pre-wrap;
		word-wrap: break-word;
	}

	/* Post layout for single post view */
	.post-wrapper {
		display: block;
		max-width: 100%;
		margin: 0;
		padding: 0;
		gap: 0;
	}

	.post-main {
		max-width: 100%;
	}

	.post-content {
		padding: 0;
	}

	.post-title {
		color: #000 !important;
		text-shadow: none !important;
		font-size: 1.5em;
		margin-bottom: 1em;
	}

	.post-title a {
		color: #000 !important;
		text-decoration: none;
	}

	.post-meta,
	.post-info {
		color: #666 !important;
		font-size: 0.9em;
		margin-bottom: 1em;
	}

	.post-excerpt {
		color: #333 !important;
	}

	.read-more {
		color: #000 !important;
	}

	.post-footer {
		background: transparent !important;
		border: 1px solid #000 !important;
		color: #000 !important;
	}

	.tag-pill {
		background: transparent !important;
		border: 1px solid #000 !important;
		color: #000 !important;
	}

	/* Page breaks */
	.post-card,
	article {
		page-break-inside: avoid;
		break-inside: avoid;
	}

	/* URLs in footer */
	footer a[href]::after {
		content: " (" attr(href) ")";
	}
}