/*
Theme Name: Koushik Site
Theme URI: https://koushik.site
Author: Koushik
Description: A minimalist digital garden theme with mathematical typography scale, light code syntax highlighting, copy utilities, image lightboxes, floating collapse buttons, and reading indicators.
Version: 3.2.0
*/

:root {
	/* Natural Textures & Mineral Inks */
	--wp--preset--color--primary: #1c1917; /* Deep Mineral Ink */
	--wp--preset--color--secondary: #78716c; /* Warm Stone Gray */
	--wp--preset--color--background: #fafaf9; /* Warm Bone/Chalk Canvas */
	--wp--preset--color--surface: #f5f5f4;
	--wp--preset--color--surface-elevated: #ffffff;
	--wp--preset--color--accent: #9a3412; /* Deep Vermilion / Terracotta */
	--wp--preset--color--border: #e7e5e4; /* Muted Substrate Stroke */
	
	/* Intentional Type Pairing */
	--wp--preset--font-family--serif: "Newsreader", "Charter", "Bitstream Charter", "Georgia", serif;
	--wp--preset--font-family--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--wp--preset--font-family--mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, Monaco, monospace;
	
	/* Phyllotaxis Fibonacci Spacing Scale */
	--space-1: 6px;
	--space-2: 12px;
	--space-3: 18px;
	--space-4: 24px;
	--space-5: 36px;
	--space-6: 48px;
	--space-7: 72px;
	
	/* Strict Mathematical Linear Heading Scale */
	--type-h1: 2.125rem; /* 34px - Calm canopy */
	--type-h2: 1.5625rem; /* 25px - Section division */
	--type-h3: 1.250rem; /* 20px - Subsection */
	--type-h4: 1.0625rem; /* 17px - Component */
	--type-h5: 1.000rem; /* 16px */
	--type-h6: 0.875rem; /* 14px */
	--type-body: 1.125rem; /* 18px */
	--type-caption: 0.85rem;
	--type-micro: 0.75rem;
}

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--type-body);
	line-height: 1.618;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Global 10x UX Rule: No Underlines on Anchor Tags, Smooth Color Transitions */
a {
	color: var(--wp--preset--color--primary);
	text-decoration: none !important;
	transition: color 0.15s ease, transform 0.15s ease;
}

a:hover {
	color: var(--wp--preset--color--accent);
}

/* Base Measure (820px) & Left-Bank Alignment */
.wp-site-blocks, main, .entry-content, .wp-block-post-content {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}

/* Strict Linear Heading Scale with 2:1 Top-to-Bottom Margin Ratio */
h1, .wp-block-post-title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--type-h1);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--primary);
	margin-top: var(--space-6); /* 48px */
	margin-bottom: var(--space-4); /* 24px */
}

h2, .wp-block-heading:is(h2) {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--type-h2);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
	margin-top: var(--space-7) !important; /* 72px */
	margin-bottom: var(--space-5) !important; /* 36px */
}

h3, .wp-block-heading:is(h3) {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--type-h3);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--primary);
	margin-top: var(--space-5) !important; /* 36px */
	margin-bottom: var(--space-3) !important; /* 18px */
}

h4, .wp-block-heading:is(h4) {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--type-h4);
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--primary);
	margin-top: var(--space-4) !important; /* 24px */
	margin-bottom: var(--space-2) !important; /* 12px */
}

h5, .wp-block-heading:is(h5) {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--type-h5);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--secondary);
	margin-top: var(--space-3) !important; /* 18px */
	margin-bottom: var(--space-1) !important; /* 9px */
}

h6, .wp-block-heading:is(h6) {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--type-h6);
	font-weight: 500;
	color: var(--wp--preset--color--secondary);
	margin-top: var(--space-2) !important;
	margin-bottom: var(--space-1) !important;
}

/* Paragraphs & Text Flow */
p, .wp-block-paragraph {
	margin-top: 0;
	margin-bottom: var(--space-4);
	line-height: 1.618;
	color: #292524;
}

/* 1. Header Profile: Strict Flex Left Alignment & Mobile Responsive */
.site-main-header {
	padding-top: clamp(2rem, 4vw, 3.5rem);
	padding-bottom: 1.5rem;
}

.header-profile-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 14px !important;
	width: 100% !important;
	max-width: 820px !important;
	margin: 0 auto !important;
}

.header-avatar {
	flex: 0 0 56px !important;
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	max-width: 56px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.header-avatar a {
	display: block !important;
	width: 56px !important;
	height: 56px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
}

.header-avatar img {
	width: 56px !important;
	min-width: 56px !important;
	max-width: 56px !important;
	height: 56px !important;
	min-height: 56px !important;
	max-height: 56px !important;
	aspect-ratio: 1 / 1 !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	display: block !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	margin: 0 !important;
	padding: 0 !important;
}

.header-text-group {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.header-site-title,
.header-text-group h1 {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 1.125rem !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	font-family: var(--wp--preset--font-family--sans) !important;
}

.header-tagline {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0.9375rem !important;
	line-height: 1.45 !important;
	font-family: var(--wp--preset--font-family--sans) !important;
	color: var(--wp--preset--color--secondary) !important;
}

.header-inline-about {
	color: var(--wp--preset--color--accent) !important;
	font-weight: 500 !important;
	margin-left: 0.25rem !important;
	white-space: nowrap !important;
}

/* Top Reading Progress Bar (2px) */
.reading-progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 2.5px;
	background-color: var(--wp--preset--color--accent);
	width: 0%;
	z-index: 10000;
	transition: width 0.08s ease-out;
}

/* Filter Navigation Pills */
.filter-pills {
	display: flex;
	gap: var(--space-4);
	list-style: none;
	padding: 0 0 var(--space-2) 0;
	margin: 0 0 var(--space-6) 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.875rem;
}

.filter-pills a {
	color: var(--wp--preset--color--secondary);
	padding-bottom: var(--space-2);
	position: relative;
	transition: color 0.15s ease;
}

.filter-pills a:hover,
.filter-pills a.active,
.filter-pills a.current {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.filter-pills a.active::after,
.filter-pills a.current::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 2px;
	background-color: var(--wp--preset--color--accent);
}

/* Top Source Citation Bar */
.source-citation-top {
	margin-top: var(--space-2);
	margin-bottom: var(--space-3);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.source-citation-label {
	color: var(--wp--preset--color--secondary);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
}

.source-citation-link {
	color: var(--wp--preset--color--primary);
	font-weight: 500;
	border-bottom: 1px dotted #a8a29e;
	padding-bottom: 1px;
}

.source-citation-link:hover {
	color: var(--wp--preset--color--accent);
	border-bottom: 1px solid var(--wp--preset--color--accent);
}

.source-citation-link .source-arrow {
	color: #a8a29e;
	font-size: 0.75rem;
}

/* In-situ Stream Post Accordion with Top + Bottom Sticky Collapse UX */
.stream-post {
	position: relative;
	padding-bottom: var(--space-6);
	margin-bottom: var(--space-6);
	border-bottom: 1px solid var(--wp--preset--color--border);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stream-post:last-child {
	border-bottom: none;
}

.stream-post .wp-block-post-title {
	margin-top: 4px !important;
	margin-bottom: var(--space-2) !important;
	font-size: 1.5625rem !important;
}

.stream-post .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent);
}

.stream-content-truncated {
	position: relative;
}

.stream-content-full {
	display: none;
}

.stream-post.is-expanded .stream-content-truncated {
	display: none;
}

.stream-post.is-expanded .stream-content-full {
	display: block;
}

/* Dual Header Actions */
.stream-header-actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: 8px;
}

.stream-expand-toggle,
.stream-top-collapse-btn {
	background: none;
	border: 1px solid var(--wp--preset--color--border);
	padding: 2px 8px;
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: all 0.15s ease;
}

.stream-expand-toggle:hover,
.stream-top-collapse-btn:hover {
	background-color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--accent);
}

.stream-post-meta-terms a {
	color: var(--wp--preset--color--accent) !important;
	font-weight: 600;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.stream-post-meta-date {
	color: var(--wp--preset--color--secondary) !important;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.85rem;
}

/* Single Post Top Breadcrumb Bar */
.single-top-nav-bar {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding-bottom: var(--space-3);
	margin-bottom: var(--space-4);
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.875rem;
}

.single-top-nav-bar .back-link {
	color: var(--wp--preset--color--secondary);
}

.single-top-nav-bar .back-link:hover {
	color: var(--wp--preset--color--primary);
}

.single-top-nav-bar .nav-sep {
	color: #d6d3d1;
}

.single-top-nav-bar .nav-current {
	color: var(--wp--preset--color--primary);
	font-weight: 500;
}

/* Copy Button */
.single-icon-copy-btn {
	background: none;
	border: none;
	padding: 2px 4px;
	margin: 0;
	cursor: pointer;
	color: var(--wp--preset--color--secondary);
	display: inline-flex;
	align-items: center;
	position: relative;
	border-radius: 4px;
}

.single-icon-copy-btn:hover {
	color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--surface);
}

.single-icon-copy-btn .copy-toast {
	position: absolute;
	top: -24px;
	left: 50%;
	transform: translateX(-50%);
	background: #1c1917;
	color: #ffffff;
	font-size: 0.6875rem;
	font-family: var(--wp--preset--font-family--sans);
	padding: 2px 6px;
	border-radius: 4px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.single-icon-copy-btn.copied .copy-toast {
	opacity: 1;
}

/* Component: Blockquotes */
.wp-block-quote {
	margin: var(--space-6) 0 !important;
	padding: 0 0 0 var(--space-4) !important;
	border-left: 3px solid var(--wp--preset--color--accent) !important;
}

.wp-block-quote p {
	font-size: 1.25rem !important;
	line-height: 1.618 !important;
	font-style: italic;
	color: var(--wp--preset--color--primary) !important;
	margin-bottom: var(--space-2) !important;
}

.wp-block-quote cite {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--secondary);
	font-style: normal;
	display: block;
}

/* 4. Warm Neutral Light Code Block Syntax */
.code-block-wrapper {
	position: relative;
	margin: var(--space-5) 0 !important;
}

.wp-block-code {
	background-color: #f6f5f3 !important; /* Warm Gray/Cream Surface */
	color: #292524 !important; /* Deep Neutral Text */
	border: 1px solid #e7e5e4 !important;
	border-radius: 6px !important;
	padding: var(--space-4) var(--space-4) !important;
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: 0.875rem !important;
	line-height: 1.6 !important;
	overflow-x: auto !important;
	margin: 0 !important;
}

.code-copy-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: #ffffff;
	border: 1px solid #d6d3d1;
	color: #57534e;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	font-weight: 500;
	padding: 3px 8px;
	border-radius: 4px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: all 0.15s ease;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.code-copy-btn:hover {
	background-color: #f5f5f4;
	color: #1c1917;
	border-color: #a8a29e;
}

.code-copy-btn.copied {
	background-color: #ecfdf5;
	color: #065f46;
	border-color: #a7f3d0;
}

/* Light Syntax Token Colors */
.syn-kw { color: #9a3412; font-weight: 600; } /* terracotta keywords */
.syn-fn { color: #0369a1; } /* sky blue functions */
.syn-str { color: #15803d; } /* forest green strings */
.syn-num { color: #7c3aed; } /* violet numbers */
.syn-comment { color: #a8a29e; font-style: italic; } /* warm stone comments */
.syn-var { color: #b45309; } /* amber variables */

/* 5. Data Tables (Fully Enclosed, Matched Headers and Numbers) */
.wp-block-table {
	margin: var(--space-6) 0 !important;
	overflow-x: auto;
}

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.875rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	overflow: hidden;
}

.wp-block-table th {
	background-color: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-transform: uppercase;
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	padding: var(--space-3) var(--space-4);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-align: left;
}

.wp-block-table td {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: var(--space-3) var(--space-4);
	color: #44403c;
}

.wp-block-table th.col-num,
.wp-block-table td.col-num {
	text-align: right !important;
	font-variant-numeric: tabular-nums;
}

.wp-block-table tr:hover td {
	background-color: rgba(0, 0, 0, 0.015);
}

/* Component: Callouts / Asides with Distinct Accent & Badge */
.garden-callout-card {
	background-color: #fcfbf9 !important;
	border: 1px solid #e7e5e4 !important;
	border-left: 4px solid var(--wp--preset--color--accent) !important;
	border-radius: 6px !important;
	margin: var(--space-5) 0 !important;
	padding: var(--space-4) var(--space-5) !important;
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: 0.9375rem !important;
	line-height: 1.55 !important;
}

.garden-callout-card p {
	margin: 0 !important;
	color: #292524 !important;
}

.callout-badge {
	display: inline-block;
	background-color: var(--wp--preset--color--accent);
	color: #ffffff;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 2px 6px;
	border-radius: 3px;
	margin-right: 6px;
	vertical-align: 1px;
}

/* 7. Image Handling: Natural Intrinsic Sizing (No Pixelation) */
.garden-figure, .wp-block-image {
	margin: var(--space-6) auto !important;
	display: block;
	max-width: 100%;
	text-align: center;
}

.garden-figure img, .wp-block-image img {
	max-width: 100% !important;
	width: auto !important; /* Never stretch smaller assets beyond native resolution */
	height: auto !important;
	border-radius: 6px !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	display: inline-block !important;
	margin: 0 auto !important;
	cursor: zoom-in;
	transition: opacity 0.15s ease;
	image-rendering: auto;
}

.garden-figure img:hover, .wp-block-image img:hover {
	opacity: 0.96;
}

/* 8. Responsive Multi-Image Grid */
.garden-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin: var(--space-6) 0;
}

.garden-gallery-grid figure {
	margin: 0 !important;
}

.garden-gallery-grid img {
	width: 100% !important;
	height: 180px !important;
	object-fit: cover !important;
	border-radius: 6px !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	cursor: zoom-in;
}

.wp-element-caption {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--type-caption);
	color: var(--wp--preset--color--secondary);
	margin-top: var(--space-2) !important;
	text-align: left !important;
	opacity: 0.8;
}

/* Lightbox Fullscreen Blur Overlay */
.garden-lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(28, 25, 23, 0.85);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	cursor: zoom-out;
}

.garden-lightbox.is-open {
	opacity: 1;
	pointer-events: auto;
}

.garden-lightbox img {
	max-width: 90vw;
	max-height: 88vh;
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
	transform: scale(0.96);
	transition: transform 0.2s ease;
}

.garden-lightbox.is-open img {
	transform: scale(1);
}

/* Component: Audio Player */
.wp-block-audio {
	margin: var(--space-5) 0 !important;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	padding: var(--space-3) var(--space-4);
}

.wp-block-audio audio {
	width: 100%;
	height: 36px;
}

/* Internal Transclusion Wikilinks */
.internal-wikilink {
	color: var(--wp--preset--color--primary);
	border-bottom: 1px dotted var(--wp--preset--color--accent);
	transition: all 0.15s ease;
}

.internal-wikilink:hover {
	color: var(--wp--preset--color--accent);
	border-bottom: 1px solid var(--wp--preset--color--accent);
}

/* Transclusion Popovers (Rich Metadata + Read Time) */
.vault-hover-popover {
	position: absolute;
	width: 320px;
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
	padding: var(--space-4);
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
	transform: translateY(4px);
}

.vault-hover-popover.visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.popover-meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--secondary);
	margin-bottom: 6px;
}

.popover-read-time {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

.popover-title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	margin-bottom: 6px;
	line-height: 1.3;
}

.popover-body {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 0.875rem;
	color: var(--wp--preset--color--secondary);
	line-height: 1.5;
}

/* Backlinks & Related Notes */
.vault-connections-section {
	margin-top: var(--space-7);
	padding-top: var(--space-4);
	border-top: 1px solid var(--wp--preset--color--border);
}

.vault-section-heading {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--secondary);
	margin-bottom: var(--space-4);
}

.vault-connections-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--space-4);
}

.vault-connections-list li {
	padding: var(--space-3) var(--space-4);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.vault-connections-list li:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.vault-item-cat {
	display: inline-block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--accent);
	margin-bottom: 2px;
	font-weight: 600;
}

.vault-item-title {
	display: block;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	margin-bottom: 4px;
}

.vault-item-title:hover {
	color: var(--wp--preset--color--accent);
}

.vault-item-excerpt {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 0.875rem;
	color: var(--wp--preset--color--secondary);
	margin: 0;
	line-height: 1.5;
}

/* Force Single Column Flow & Prevent Third-Party Grid Fragmenting */
main.wp-block-group,
.wp-site-blocks > main,
.entry-content,
.wp-block-post-content {
	display: block !important;
	float: none !important;
	width: 100% !important;
	max-width: 820px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	grid-template-columns: none !important;
}

.entry-content > *,
.wp-block-post-content > * {
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Fix Footnotes Container Flow */
.garden-footnotes-container {
	display: block !important;
	width: 100% !important;
	clear: both !important;
}

/* Fix Section 11 Audio Player Flow */
.wp-block-audio {
	display: block !important;
	width: 100% !important;
	clear: both !important;
}

/* Vault Connections (Referenced In / Related) Vertical Flow */
.vault-connections-section {
	display: block !important;
	width: 100% !important;
	clear: both !important;
}

.vault-connections-list {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--space-4) !important;
	width: 100% !important;
}

/* Force True Single-Column Centering & Padding for Main Block */
main.wp-block-group,
.wp-site-blocks > main,
.entry-content,
.wp-block-post-content {
	display: block !important;
	float: none !important;
	width: 100% !important;
	max-width: 820px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1rem !important;
	padding-right: 1rem !important;
}

/* Clean Stream Feed Typography & Read More Link */
.stream-content-clean p {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: #383532;
	margin-top: 0.35rem !important;
	margin-bottom: 0 !important;
}

.stream-read-more {
	display: inline-block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent) !important;
	margin-left: 0.35rem;
	white-space: nowrap;
	transition: color 0.15s ease, transform 0.15s ease;
}

.stream-read-more:hover {
	color: #712308 !important;
	transform: translateX(2px);
}

/* Enhanced Syntax Token Palette (Warm, High-Contrast & Distinct) */
.syn-kw { color: #c2410c !important; font-weight: 700 !important; } /* Vivid Terracotta Keywords */
.syn-fn { color: #0284c7 !important; font-weight: 600 !important; } /* Ocean Blue Functions */
.syn-str { color: #16a34a !important; } /* Emerald Green Strings */
.syn-num { color: #9333ea !important; font-weight: 600 !important; } /* Bright Purple Numbers */
.syn-comment { color: #9ca3af !important; font-style: italic !important; } /* Slate Comments */
.syn-var { color: #d97706 !important; font-weight: 600 !important; } /* Amber Variables */
.syn-type { color: #0d9488 !important; font-weight: 600 !important; } /* Teal Types */
.syn-op { color: #e11d48 !important; } /* Rose Operators */

/* Code Block >10 Lines Collapsible Container & Expand Button */
.code-block-wrapper {
	position: relative;
	margin: var(--space-5) 0 !important;
}

.code-is-collapsible.code-collapsed pre.wp-block-code {
	max-height: 280px !important;
	overflow: hidden !important;
	mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
}

.code-expand-btn {
	display: block;
	width: 100%;
	background-color: #fafaf9;
	border: 1px solid #e7e5e4;
	border-top: none;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	padding: 8px 14px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	cursor: pointer;
	text-align: center;
	transition: all 0.15s ease;
}

.code-expand-btn:hover {
	background-color: #f5f5f4;
	color: #712308;
}

/* Golden Ratio & Editorial Additions */

/* 1. Keyboard Key Inputs (<kbd>) */
kbd, .wp-block-kbd {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	background-color: #f5f5f4;
	border: 1px solid #d6d3d1;
	border-bottom: 2px solid #a8a29e;
	border-radius: 4px;
	padding: 2px 6px;
	white-space: nowrap;
	display: inline-block;
	box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

/* 2. Definition Lists (<dl>, <dt>, <dd>) */
dl {
	margin: var(--space-5) 0;
	display: grid;
	grid-template-columns: minmax(130px, 1fr) 3fr;
	gap: 8px 24px;
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: var(--space-4);
}

dt {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--secondary);
	margin: 0;
	padding: 4px 0;
}

dd {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: #292524;
	margin: 0 0 var(--space-3) 0;
	padding: 4px 0;
}

@media (max-width: 600px) {
	dl {
		grid-template-columns: 1fr;
		gap: 4px;
	}
	dd {
		margin-bottom: var(--space-4);
	}
}

/* 3. Thematic Horizontal Rule (<hr>) with Golden Ratio negative space */
hr, .wp-block-separator {
	border: none !important;
	border-top: 1px solid var(--wp--preset--color--border) !important;
	margin: clamp(2.5rem, 5vw, 4rem) auto !important;
	max-width: 160px !important;
	text-align: center;
	position: relative;
}

hr::after {
	content: "§";
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--wp--preset--color--background);
	padding: 0 10px;
	color: var(--wp--preset--color--secondary);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 0.9375rem;
}

/* 4. Native Collapsible Accordion (<details> & <summary>) */
details {
	background-color: #fafaf9;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	padding: 12px 18px;
	margin: var(--space-4) 0;
	transition: background-color 0.15s ease;
}

details[open] {
	background-color: #ffffff;
}

summary {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	user-select: none;
	outline: none;
	display: list-item;
}

summary:hover {
	color: var(--wp--preset--color--accent);
}

details > *:not(summary) {
	margin-top: 12px;
	font-size: 0.9375rem;
	color: #44403c;
}

/* 5. Semantic Table <caption> */
.wp-block-table table caption {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--type-caption);
	color: var(--wp--preset--color--secondary);
	text-align: left;
	padding: 8px 2px 4px 2px;
	caption-side: bottom;
	letter-spacing: 0.02em;
}

/* 6. Diff & Patch Syntax Styling */
.syn-diff-add {
	background-color: #ecfdf5 !important;
	color: #065f46 !important;
	display: block;
	padding: 1px 4px;
	margin: 0 -4px;
	border-left: 3px solid #10b981;
}

.syn-diff-del {
	background-color: #fef2f2 !important;
	color: #991b1b !important;
	display: block;
	padding: 1px 4px;
	margin: 0 -4px;
	border-left: 3px solid #ef4444;
}

/* 7. Video Embed Container (16:9 intrinsic ratio) */
.garden-video-frame {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 ratio */
	margin: var(--space-6) 0;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	background: #1c1917;
}

.garden-video-frame iframe,
.garden-video-frame video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}


/* ────────────────────────────────────────────────────�

/* ─────────────────────────────────────────────────────────────────────────────
   8. Rich Media & Third-Party Embeds (Quiet Editorial Framing)
   ───────────────────────────────────────────────────────────────────────────── */

/* Core WordPress Embed Wrapper */
.wp-block-embed {
	margin: 2rem 0;
	clear: both;
}

.wp-block-embed figcaption,
.wp-element-caption {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 0.8125rem;
	color: #71717a;
	margin-top: 0.625rem;
	text-align: center;
	line-height: 1.4;
}

/* 16:9 Intrinsic Video Aspect Ratio (YouTube / Vimeo / Video) - Fixed Heights */
.wp-block-embed-youtube .wp-block-embed__wrapper,
.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper,
.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper,
.wp-embed-aspect-16-9 .wp-block-embed__wrapper {
	position: relative !important;
	width: 100% !important;
	padding-top: 56.25% !important; /* 16:9 landscape ratio */
	padding-bottom: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	border-radius: 6px !important;
	border: 1px solid #e4e4e7 !important;
	background: #18181b !important;
}

.wp-block-embed-youtube iframe,
.wp-block-embed.wp-has-aspect-ratio iframe,
.wp-block-embed.wp-embed-aspect-16-9 iframe,
.wp-embed-aspect-16-9 iframe {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	border: 0 !important;
}

/* Twitter / X Embed Container & Clickable Card */
.wp-block-embed-twitter,
.wp-block-embed-x {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 2rem 0;
}

.wp-block-embed-twitter .twitter-tweet,
.wp-block-embed-x .twitter-tweet {
	margin: 0 auto !important;
	border-radius: 8px !important;
	border: 1px solid #e4e4e7 !important;
	background: #ffffff !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

/* Clickable Editorial Tweet Card */
a.garden-tweet-card,
.garden-tweet-card {
	display: block !important;
	text-decoration: none !important;
	color: #18181b !important;
	border: 1px solid #e4e4e7;
	border-radius: 8px;
	background: #ffffff;
	padding: 18px 20px;
	margin: 2rem 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

a.garden-tweet-card:hover {
	border-color: #9a3412 !important;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04) !important;
	transform: translateY(-1px);
}

.garden-tweet-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.garden-tweet-author {
	display: flex;
	align-items: center;
	gap: 10px;
}

.garden-tweet-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #18181b;
	color: #fcfcfa;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 0.8125rem;
	font-family: system-ui, sans-serif;
}

.garden-tweet-name {
	font-family: system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.875rem;
	color: #18181b;
	line-height: 1.2;
}

.garden-tweet-handle {
	font-family: ui-monospace, monospace;
	font-size: 0.75rem;
	color: #71717a;
}

.garden-tweet-body {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 1rem;
	line-height: 1.6;
	color: #18181b;
	margin-bottom: 12px;
}

.garden-tweet-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: ui-monospace, monospace;
	font-size: 0.75rem;
	color: #a1a1aa;
	border-top: 1px solid #f4f4f5;
	padding-top: 10px;
}

/* Spotify Audio / Podcast Embeds */
.wp-block-embed-spotify,
.garden-spotify-frame {
	margin: 2rem 0;
	clear: both;
}

.wp-block-embed-spotify iframe,
.garden-spotify-frame iframe {
	border-radius: 12px !important;
	border: 1px solid #e4e4e7 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
	width: 100% !important;
	height: 152px !important;
	display: block !important;
}

/* GitHub Gist / Repo Card Embed Primitives */
.garden-github-card {
	border: 1px solid #e4e4e7;
	border-radius: 8px;
	background: #fcfbf9;
	padding: 16px 20px;
	margin: 1.75rem 0;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.garden-github-card:hover {
	border-color: #d4d4d8;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.garden-github-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.8125rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	color: #71717a;
	margin-bottom: 8px;
}

.garden-github-title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: #18181b;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.garden-github-title:hover {
	color: #9a3412;
}

.garden-github-desc {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 0.9375rem;
	color: #3f3f46;
	line-height: 1.5;
	margin: 6px 0 12px 0;
}

.garden-github-meta {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 0.75rem;
	color: #71717a;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Curated Bookmark / Link Preview Card */
.garden-bookmark-card {
	border: 1px solid #e4e4e7;
	border-radius: 8px;
	background: #ffffff;
	padding: 18px 20px;
	margin: 1.75rem 0;
	border-left: 3px solid #9a3412;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.garden-bookmark-eyebrow {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #9a3412;
	margin-bottom: 6px;
}

.garden-bookmark-title {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 1.0625rem;
	font-weight: 600;
	margin: 0 0 6px 0;
}

.garden-bookmark-title a {
	color: #18181b;
	text-decoration: none;
}

.garden-bookmark-title a:hover {
	color: #9a3412;
	text-decoration: underline;
}

.garden-bookmark-take {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 0.9375rem;
	color: #27272a;
	line-height: 1.6;
	margin-bottom: 10px;
}

.garden-bookmark-source {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.75rem;
	color: #a1a1aa;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* ==========================================================================
   14. AGENT SYSTEM SPECIFICATIONS & SCIENTIFIC ARTIFACTS
   ========================================================================== */

/* 14.1 Agent Provenance & Execution Canopy */
.garden-agent-canopy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: var(--wp--preset--color--surface, #ffffff);
	border: 1px solid var(--wp--preset--color--border, #e4e4e7);
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.6875rem;
	margin: 1.5rem 0;
}

.garden-agent-canopy .badge-agent {
	background: #18181b;
	color: #fafafa;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 4px;
	letter-spacing: 0.05em;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.garden-agent-canopy .meta-item {
	color: var(--wp--preset--color--secondary, #71717a);
	display: inline-flex;
	align-items: center;
}

.garden-agent-canopy .meta-item strong {
	color: var(--wp--preset--color--contrast, #18181b);
	margin-left: 3px;
}

.garden-agent-canopy .badge-verified {
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #a7f3d0;
	font-weight: 600;
	padding: 2px 6px;
	border-radius: 4px;
}

/* 14.2 Diagnostic Metric KPI Scorecard Grid */
.garden-kpi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin: 1.5rem 0;
}

.garden-kpi-card {
	background: var(--wp--preset--color--surface, #ffffff);
	border: 1px solid var(--wp--preset--color--border, #e4e4e7);
	border-radius: 6px;
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.garden-kpi-card .kpi-label {
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--secondary, #71717a);
	margin-bottom: 4px;
}

.garden-kpi-card .kpi-val {
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #18181b);
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.garden-kpi-card .kpi-delta {
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.6875rem;
	margin-top: 6px;
	font-weight: 500;
}

.garden-kpi-card .kpi-delta.is-positive {
	color: #059669;
}

.garden-kpi-card .kpi-delta.is-highlight {
	color: var(--wp--preset--color--accent, #9a3412);
}

/* 14.3 Grounded Tool Execution Trace */
.garden-tool-trace {
	margin: 1.5rem 0;
	border: 1px solid var(--wp--preset--color--border, #e4e4e7);
	border-radius: 6px;
	background: #fafaf9;
	overflow: hidden;
}

.garden-tool-trace summary {
	padding: 10px 14px;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.75rem;
	font-weight: 600;
	color: #18181b;
	cursor: pointer;
	user-select: none;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #f5f5f4;
	border-bottom: 1px solid transparent;
	transition: background 0.15s ease;
}

.garden-tool-trace[open] summary {
	border-bottom-color: var(--wp--preset--color--border, #e4e4e7);
}

.garden-tool-trace summary:hover {
	background: #ebebe9;
}

.garden-tool-trace .tool-badge {
	background: #18181b;
	color: #ffffff;
	font-size: 0.625rem;
	padding: 1px 5px;
	border-radius: 3px;
	font-weight: 700;
}

.garden-tool-trace .tool-status {
	margin-left: auto;
	color: #059669;
	font-weight: 600;
	font-size: 0.6875rem;
}

.garden-tool-trace pre {
	margin: 0 !important;
	padding: 12px 14px !important;
	background: #18181b !important;
	color: #f4f4f5 !important;
	border-radius: 0 !important;
	font-size: 0.75rem !important;
	border: none !important;
}

/* 14.4 Architectural Decision Record (ADR) Card */
.garden-adr-card {
	border: 1px solid var(--wp--preset--color--border, #e4e4e7);
	border-left: 4px solid var(--wp--preset--color--accent, #9a3412);
	background: var(--wp--preset--color--surface, #ffffff);
	border-radius: 0 6px 6px 0;
	padding: 16px 18px;
	margin: 1.5rem 0;
}

.garden-adr-card .adr-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--wp--preset--color--border, #e4e4e7);
	padding-bottom: 8px;
	margin-bottom: 10px;
}

.garden-adr-card .adr-title {
	font-family: var(--wp--preset--font-family--serif, serif);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #18181b);
}

.garden-adr-card .adr-status {
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.6875rem;
	font-weight: 700;
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #a7f3d0;
	padding: 2px 7px;
	border-radius: 3px;
}

.garden-adr-card .adr-body p {
	font-size: 0.875rem;
	line-height: 1.6;
	margin-bottom: 8px;
	color: var(--wp--preset--color--contrast, #18181b);
}

.garden-adr-card .adr-field-label {
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--wp--preset--color--secondary, #71717a);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	display: block;
	margin-top: 8px;
}

/* 14.5 Monospace ASCII Directory & Flow Trees */
.garden-ascii-tree {
	background: #18181b;
	color: #f4f4f5;
	border-radius: 6px;
	padding: 14px 16px;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.78125rem;
	line-height: 1.5;
	overflow-x: auto;
	margin: 1.5rem 0;
	border: 1px solid #27272a;
}


/* Multi-Variant Callout Taxonomy (Obsidian & Agent Standard) */
.garden-callout-note {
	background-color: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-left: 4px solid #3b82f6 !important;
	border-radius: 6px !important;
	margin: var(--space-5) 0 !important;
	padding: var(--space-4) var(--space-5) !important;
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: 0.9375rem !important;
	line-height: 1.55 !important;
}

.garden-callout-tip {
	background-color: #f0fdf4 !important;
	border: 1px solid #dcfce7 !important;
	border-left: 4px solid #10b981 !important;
	border-radius: 6px !important;
	margin: var(--space-5) 0 !important;
	padding: var(--space-4) var(--space-5) !important;
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: 0.9375rem !important;
	line-height: 1.55 !important;
}

.garden-callout-warning {
	background-color: #fffbeb !important;
	border: 1px solid #fef3c7 !important;
	border-left: 4px solid #f59e0b !important;
	border-radius: 6px !important;
	margin: var(--space-5) 0 !important;
	padding: var(--space-4) var(--space-5) !important;
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: 0.9375rem !important;
	line-height: 1.55 !important;
}

.garden-callout-important {
	background-color: #faf5ff !important;
	border: 1px solid #f3e8ff !important;
	border-left: 4px solid #8b5cf6 !important;
	border-radius: 6px !important;
	margin: var(--space-5) 0 !important;
	padding: var(--space-4) var(--space-5) !important;
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: 0.9375rem !important;
	line-height: 1.55 !important;
}

.garden-callout-caution {
	background-color: #fff1f2 !important;
	border: 1px solid #ffe4e6 !important;
	border-left: 4px solid #f43f5e !important;
	border-radius: 6px !important;
	margin: var(--space-5) 0 !important;
	padding: var(--space-4) var(--space-5) !important;
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: 0.9375rem !important;
	line-height: 1.55 !important;
}


/* ==========================================================================
   15. GLOBAL TYPOGRAPHY HARMONY & RELATIVE CODE SCALING
   ========================================================================== */

/* Universal Inline Code Sizing (Relative Scaling Across Headings & Body) */
:not(pre) > code,
p code,
li code,
td code,
dd code,
.wp-block-paragraph code {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace) !important;
	font-size: 0.85em !important; /* Scaled relative to parent container font size */
	font-weight: 500 !important;
	padding: 0.15em 0.35em !important;
	background-color: #f4f3ef !important;
	border: 1px solid #e5e3dc !important;
	border-radius: 4px !important;
	color: #18181b !important;
	white-space: break-spaces;
	word-break: break-word;
	vertical-align: 0.04em;
}

/* Headings with inline code (e.g., 13.7 Note Deduplication ... 01_Projects/runsarcasm/Architecture.md) */
h1 code, h1 :not(pre) > code,
h2 code, h2 :not(pre) > code,
h3 code, h3 :not(pre) > code,
h4 code, h4 :not(pre) > code,
h5 code, h5 :not(pre) > code,
h6 code, h6 :not(pre) > code {
	font-size: 0.82em !important;
	font-weight: 600 !important;
	padding: 0.1em 0.3em !important;
	background-color: rgba(0, 0, 0, 0.04) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	border-radius: 4px !important;
}

/* Table Typography Alignment */
.wp-block-table table {
	font-family: var(--wp--preset--font-family--serif, "Newsreader", Georgia, serif) !important;
	font-size: 0.875rem !important;
}

.wp-block-table td code {
	font-size: 0.8125rem !important;
}

/* Strict Heading Proportion Rules */
h1, .wp-block-heading:is(h1) {
	font-size: 2.125rem !important; /* 34px */
	line-height: 1.25 !important;
	font-weight: 600 !important;
	letter-spacing: -0.02em !important;
	margin-top: 2rem !important;
	margin-bottom: 0.875rem !important;
}

h2, .wp-block-heading:is(h2) {
	font-size: 1.5625rem !important; /* 25px */
	line-height: 1.3 !important;
	font-weight: 600 !important;
	letter-spacing: -0.015em !important;
	margin-top: 2rem !important;
	margin-bottom: 0.75rem !important;
}

h3, .wp-block-heading:is(h3) {
	font-size: 1.25rem !important; /* 20px */
	line-height: 1.35 !important;
	font-weight: 600 !important;
	margin-top: 1.5rem !important;
	margin-bottom: 0.5rem !important;
}

h4, .wp-block-heading:is(h4) {
	font-size: 1.0625rem !important; /* 17px */
	line-height: 1.4 !important;
	font-weight: 600 !important;
	margin-top: 1.25rem !important;
	margin-bottom: 0.35rem !important;
}

p, .wp-block-paragraph {
	font-size: 1.0625rem !important; /* 17px base */
	line-height: 1.618 !important; /* Golden ratio */
	margin-bottom: 1.25rem !important;
}


/* ==========================================================================
   16. COMPREHENSIVE TYPOGRAPHY SYSTEM NORMALIZATION
   ========================================================================== */

/* Universal Root Base Variables */
:root {
	--type-body: 1.0625rem; /* 17px base */
	--type-h1: 2.125rem;   /* 34px */
	--type-h2: 1.5625rem;  /* 25px */
	--type-h3: 1.25rem;    /* 20px */
	--type-h4: 1.0625rem;  /* 17px */
	--type-h5: 0.9375rem;  /* 15px */
	--type-h6: 0.8125rem;  /* 13px */
}

/* Ensure ALL body copy, paragraphs, list items, and descriptions share the exact same 17px font size & 1.618 line height */
body,
p,
.wp-block-paragraph,
ol,
ul,
li,
dl,
dd {
	font-family: var(--wp--preset--font-family--serif) !important;
	font-size: 1.0625rem !important; /* 17px */
	line-height: 1.618 !important;
	color: var(--wp--preset--color--primary) !important;
}

/* List spacing and margin normalization */
ol, ul {
	margin-top: 0.5rem !important;
	margin-bottom: 1.25rem !important;
	padding-left: 1.5rem !important;
}

li {
	margin-bottom: 0.5rem !important;
}

/* Clean up bold tags inside lists and paragraphs */
li strong,
p strong {
	font-weight: 600 !important;
	color: #18181b !important;
}

/* Universal Inline Code Token (Proportional Scaling) */
:not(pre) > code,
p code,
li code,
td code,
dd code,
.wp-block-paragraph code,
.wp-block-post-content code:not(pre code) {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace) !important;
	font-size: 0.85em !important; /* 85% of parent container font size */
	font-weight: 500 !important;
	padding: 0.15em 0.38em !important;
	background-color: #f4f3ef !important;
	border: 1px solid #e5e3dc !important;
	border-radius: 4px !important;
	color: #18181b !important;
	white-space: break-spaces;
	word-break: break-word;
	vertical-align: 0.04em;
}

/* Inline code inside headings (H1 - H6) */
h1 code, h1 :not(pre) > code,
h2 code, h2 :not(pre) > code,
h3 code, h3 :not(pre) > code,
h4 code, h4 :not(pre) > code,
h5 code, h5 :not(pre) > code,
h6 code, h6 :not(pre) > code {
	font-size: 0.82em !important;
	font-weight: 600 !important;
	padding: 0.1em 0.3em !important;
	background-color: rgba(0, 0, 0, 0.04) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	border-radius: 4px !important;
}

/* Code Blocks (<pre>) */
.wp-block-code,
pre.wp-block-code,
pre {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace) !important;
	font-size: 0.875rem !important; /* 14px */
	line-height: 1.6 !important;
}

.wp-block-code code,
pre code {
	font-family: inherit !important;
	font-size: inherit !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
}

/* Headings scale and spacing */
h1, .wp-block-heading:is(h1) {
	font-size: 2.125rem !important; /* 34px */
	line-height: 1.25 !important;
	font-weight: 600 !important;
	letter-spacing: -0.02em !important;
	margin-top: 2rem !important;
	margin-bottom: 0.875rem !important;
}

h2, .wp-block-heading:is(h2) {
	font-size: 1.5625rem !important; /* 25px */
	line-height: 1.3 !important;
	font-weight: 600 !important;
	letter-spacing: -0.015em !important;
	margin-top: 2.25rem !important;
	margin-bottom: 0.75rem !important;
}

h3, .wp-block-heading:is(h3) {
	font-size: 1.25rem !important; /* 20px */
	line-height: 1.35 !important;
	font-weight: 600 !important;
	margin-top: 1.75rem !important;
	margin-bottom: 0.5rem !important;
}

h4, .wp-block-heading:is(h4) {
	font-size: 1.0625rem !important; /* 17px */
	line-height: 1.4 !important;
	font-weight: 600 !important;
	margin-top: 1.25rem !important;
	margin-bottom: 0.35rem !important;
}


/* ==========================================================================
   17. MODERN VIEWPORT WIDTH (820px) & PERFECT LEFT-ALIGNMENT
   ========================================================================== */

/* Universal Content Width & Flush Left Alignment */
:root {
	--wp--style--global--content-size: 820px !important;
	--wp--style--global--wide-size: 1080px !important;
}

/* Master Centered Reading Container */
.wp-site-blocks,
main,
main.wp-block-group,
.wp-site-blocks > main,
.entry-content,
.wp-block-post-content {
	display: block !important;
	float: none !important;
	width: 100% !important;
	max-width: 820px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Inner post content: Ensure 0 extra margin/padding so it is strictly flush with Title */
.entry-content,
.wp-block-post-content,
.stream-content-clean,
.single-post-header,
.stream-post {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.entry-content > *,
.wp-block-post-content > *,
.stream-content-clean > * {
	margin-left: 0 !important;
	box-sizing: border-box !important;
}

/* Ensure blocks without intrinsic padding start flush on the left margin,
   while preserving inner padding on boxed components (callouts, code, quotes, tables, etc.) */
.entry-content > p,
.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > h5,
.entry-content > h6,
.wp-block-post-content > p,
.wp-block-post-content > h1,
.wp-block-post-content > h2,
.wp-block-post-content > h3,
.wp-block-post-content > h4,
.wp-block-post-content > h5,
.wp-block-post-content > h6 {
	padding-left: 0 !important;
}

/* Title Left-Edge Alignment: Ensure title starts exactly flush on the left */
h1.wp-block-post-title,
.wp-block-post-title,
.wp-block-post-title a,
.single-post-header h1,
.stream-post .wp-block-post-title {
	margin-left: 0 !important;
	padding-left: 0 !important;
	text-indent: 0 !important;
}

/* Metadata Bar: Inline Non-Wrapping Flex Row (Category • Date • Actions) */
.stream-post-meta-row,
.single-post-header .wp-block-group.is-layout-flex,
.stream-post .wp-block-group.is-layout-flex,
.wp-block-group.is-layout-flex:has(.stream-post-meta-terms) {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 8px !important;
	margin-top: 0 !important;
	margin-bottom: 6px !important;
	margin-left: 0 !important;
	padding-left: 0 !important;
}

.stream-post-meta-terms,
.stream-post-meta-terms a {
	display: inline-flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	white-space: nowrap !important;
	line-height: 1 !important;
}

.stream-meta-sep,
.stream-post-meta-row p,
.single-post-header .wp-block-group.is-layout-flex p,
.stream-post .wp-block-group.is-layout-flex p {
	display: inline-flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0.75rem !important;
	line-height: 1 !important;
	color: #d1d5db !important;
	white-space: nowrap !important;
}

.stream-post-meta-date,
.stream-post-meta-date time {
	display: inline-flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: 0.8125rem !important;
	color: var(--wp--preset--color--secondary, #78716c) !important;
	white-space: nowrap !important;
	line-height: 1 !important;
}

/* Filter pills alignment */
.filter-pills {
	margin-left: 0 !important;
	padding-left: 0 !important;
}


/* ==========================================================================
   18. STRICT DESIGN SYSTEM MARGIN & PADDING NORMALIZATION
   ========================================================================== */

/* 18.1 Golden Ratio Section Rhythm (Heading & Vertical Flow) */
.entry-content,
.wp-block-post-content {
	line-height: 1.618 !important;
}

/* Paragraph Vertical Margins */
.entry-content p,
.wp-block-post-content p,
p.wp-block-paragraph {
	margin-top: 0 !important;
	margin-bottom: 1.25rem !important; /* ~20px clean paragraph gap */
	line-height: 1.618 !important;
}

/* Headings Top/Bottom Rhythm (2:1 Ratio Rule) */
.entry-content h1, .wp-block-post-content h1, h1.wp-block-heading {
	margin-top: 2.5rem !important;
	margin-bottom: 1rem !important;
	line-height: 1.25 !important;
}

.entry-content h2, .wp-block-post-content h2, h2.wp-block-heading {
	margin-top: 2.25rem !important;
	margin-bottom: 0.85rem !important;
	line-height: 1.3 !important;
}

.entry-content h3, .wp-block-post-content h3, h3.wp-block-heading {
	margin-top: 1.75rem !important;
	margin-bottom: 0.65rem !important;
	line-height: 1.35 !important;
}

.entry-content h4, .wp-block-post-content h4, h4.wp-block-heading {
	margin-top: 1.35rem !important;
	margin-bottom: 0.5rem !important;
	line-height: 1.4 !important;
}

.entry-content h5, .wp-block-post-content h5, h5.wp-block-heading {
	margin-top: 1.15rem !important;
	margin-bottom: 0.4rem !important;
}

.entry-content h6, .wp-block-post-content h6, h6.wp-block-heading {
	margin-top: 1rem !important;
	margin-bottom: 0.35rem !important;
}

/* First element after heading or top container should have 0 top margin */
.entry-content > :first-child,
.wp-block-post-content > :first-child {
	margin-top: 0 !important;
}

/* 18.2 Block Component Padding & Margins */

/* Code Blocks (<pre>) */
.code-block-wrapper,
.wp-block-code,
pre.wp-block-code {
	margin-top: 1.5rem !important;
	margin-bottom: 1.75rem !important;
	padding: 1.15rem 1.25rem !important;
	border-radius: 6px !important;
	border: 1px solid var(--wp--preset--color--border, #e7e5e4) !important;
	background-color: #f6f5f3 !important;
}

/* Callouts / Asides */
.garden-callout-card,
.garden-callout-note,
.garden-callout-info,
.garden-callout-tip,
.garden-callout-warning,
.garden-callout-important,
.garden-callout-caution {
	margin-top: 1.5rem !important;
	margin-bottom: 1.75rem !important;
	padding: 1rem 1.25rem !important;
	border-radius: 6px !important;
}

.garden-callout-card p,
.garden-callout-note p,
.garden-callout-info p,
.garden-callout-tip p,
.garden-callout-warning p,
.garden-callout-important p,
.garden-callout-caution p {
	margin: 0 !important;
}

/* Blockquotes */
blockquote,
.wp-block-quote {
	margin-top: 1.75rem !important;
	margin-bottom: 2rem !important;
	padding: 0.75rem 0 0.75rem 1.25rem !important;
	border-left: 3px solid var(--wp--preset--color--accent, #9a3412) !important;
}

blockquote p,
.wp-block-quote p {
	margin-bottom: 0.5rem !important;
	font-style: italic !important;
}

/* Tables */
.wp-block-table,
figure.wp-block-table {
	margin-top: 1.75rem !important;
	margin-bottom: 2rem !important;
}

.wp-block-table td,
.wp-block-table th {
	padding: 0.65rem 0.85rem !important;
}

/* Figures & Images */
.garden-figure,
figure.wp-block-image,
.wp-block-image {
	margin-top: 1.75rem !important;
	margin-bottom: 2rem !important;
}

figcaption,
.wp-element-caption {
	margin-top: 0.5rem !important;
	margin-bottom: 0 !important;
	font-size: 0.8125rem !important;
	color: var(--wp--preset--color--secondary, #78716c) !important;
	text-align: center !important;
}

/* Embed Cards (YouTube, Tweets, Spotify, GitHub, Bookmarks) */
.wp-block-embed,
a.garden-tweet-card,
.garden-tweet-card,
.garden-spotify-frame,
.garden-github-card,
.garden-bookmark-card,
.garden-adr-card,
.garden-tool-trace {
	margin-top: 1.75rem !important;
	margin-bottom: 2rem !important;
}

/* Lists */
ol, ul {
	margin-top: 0.5rem !important;
	margin-bottom: 1.35rem !important;
	padding-left: 1.5rem !important;
}

li {
	margin-bottom: 0.4rem !important;
}

li > ul,
li > ol {
	margin-top: 0.3rem !important;
	margin-bottom: 0.3rem !important;
}

/* Footnotes */
.garden-footnotes-container {
	margin-top: 2.5rem !important;
	padding-top: 1.25rem !important;
	border-top: 1px solid var(--wp--preset--color--border, #e7e5e4) !important;
}