/* ---------- Fonts (self-hosted, same set as the WordPress sibling theme) ---------- */

@font-face {
	font-family: "Roboto Slab";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/roboto-slab-700-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Roboto Slab";
	font-weight: 900;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/roboto-slab-900-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Source Serif 4";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/source-serif-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Source Serif 4";
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	src: url("../fonts/source-serif-400-italic.woff2") format("woff2");
}
@font-face {
	font-family: "Source Serif 4";
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/source-serif-600-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/inter-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/inter-500-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/inter-600-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/inter-700-normal.woff2") format("woff2");
}

/* Alfa Slab One only ships one real weight. It's registered at both 400 and
   900 so headings requesting font-weight:900 use the real glyphs instead of
   a synthetic/faux-bold version of the 400 weight. */
@font-face {
	font-family: "Alfa Slab One";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/alfa-slab-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Alfa Slab One";
	font-weight: 900;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/alfa-slab-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Merriweather";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/merriweather-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Merriweather";
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	src: url("../fonts/merriweather-400-italic.woff2") format("woff2");
}
@font-face {
	font-family: "Merriweather";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/merriweather-700-normal.woff2") format("woff2");
}

/* ---------- Design tokens ---------- */

:root {
	--color-background: #ffffff;
	--color-off-white: #f7f4ef;
	--color-ink: #1a1613;
	--color-charcoal: #1c1815;
	--color-charcoal-border: #3a332d;
	--color-stone: #6b6259;
	--color-stone-light: #d9d2c7;
	--color-rust: #bf4522;
	--color-cream: #efe9de;

	--font-slab: "Roboto Slab", "Rockwell", ui-serif, Georgia, serif;
	--font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
	--font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--font-size-small: 0.8125rem;
	--font-size-meta: 0.875rem;
	--font-size-medium: 1.0625rem;
	--font-size-large: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
	--font-size-x-large: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
	--font-size-xx-large: clamp(1.65rem, 1.45rem + 0.9vw, 2.125rem);
	--font-size-huge: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
	--content-font-size: 1.15rem;
	--dek-font-size: var(--font-size-large);

	--space-10: 0.5rem;
	--space-20: 1rem;
	--space-30: 1.5rem;
	--space-40: 2.5rem;
	--space-50: 4rem;
	--space-60: 6rem;

	--content-size: 660px;
	--wide-size: 1040px;
}

/* ---------- Reset & base ---------- */

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

body {
	margin: 0;
	background: var(--color-background);
	color: var(--color-ink);
	font-family: var(--font-serif);
	font-size: var(--font-size-medium);
	line-height: 1.6;
}

/* Merriweather renders visually larger than Source Serif 4 at the same
   font-size, so body copy needs a compensating size reduction when it's
   selected via the "Body font" theme setting. */
body[data-body-font="Merriweather"] {
	--content-font-size: 1rem;
	--dek-font-size: clamp(1rem, 0.92rem + 0.35vw, 1.15rem);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

figure {
	margin: 0;
}

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

a:visited {
	color: inherit;
}

a:hover {
	color: var(--accent-color, var(--color-rust));
}

h1, h2, h3, h4 {
	font-family: var(--font-slab);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0 0 0.5em;
}

h1 { font-size: var(--font-size-xx-large); }
h2 { font-size: var(--font-size-x-large); }
h3 { font-size: var(--font-size-large); }

.site-main a {
	text-decoration: none;
}

/* ---------- Content width -----------
   Same approach as the WordPress sibling theme: rather than relying on a
   framework alignment utility, every top-level content wrapper gets an
   explicit max-width + centering + responsive side padding so nothing
   touches the browser edge. */

.homepage-grid,
.listing-page,
.single-page,
.error-404-content {
	max-width: var(--wide-size);
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(1rem, 4vw, 2.5rem);
	padding-right: clamp(1rem, 4vw, 2.5rem);
}

.listing-page-title {
	padding-top: var(--space-40);
	margin-bottom: 0;
}

/* ---------- Header ---------- */

/* ----- Compact header: logo left, inline nav, no tagline. Always
   rendered — it's the whole header when "shrink on scroll" is off, and
   the post-scroll state when it's on. Background/border live on the
   compact and expanded blocks themselves (not the outer .site-header)
   because the compact block can be pulled out of normal flow via
   position: fixed, and a detached box doesn't inherit its old parent's
   painted background. ----- */

.site-header-compact {
	background: var(--header-bg-color, var(--color-charcoal));
	border-bottom: 1px solid var(--color-charcoal-border);
}

/* Sticky is applied to the outer .site-header (whose containing block is
   body — tall enough to give the sticky element real "runway"), not to
   .site-header-compact itself. .site-header-compact is the only child
   here, so its box is exactly as tall as .site-header — pinning the
   child directly leaves zero scroll distance for it to actually stay
   stuck before its own container has already scrolled away. */
.site-header--sticky:not(.site-header--shrink) {
	position: sticky;
	top: 0;
	z-index: 50;
}

.site-header--shadow.is-scrolled .site-header-compact {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.site-header-compact {
	transition: box-shadow 0.2s ease;
}

.site-header-bar {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: clamp(1.5rem, 4vw, 3rem);
	max-width: var(--wide-size);
	margin-left: auto;
	margin-right: auto;
	padding: var(--space-20) clamp(1rem, 4vw, 2.5rem);
}

.site-header-icons {
	flex: 0 0 auto;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 1.25rem;
}

.site-header-icon {
	display: inline-flex;
	color: var(--header-text-color, var(--color-cream));
	opacity: 0.85;
	transition: opacity 0.15s ease;
}

.site-header-icon-button {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
}

.site-header-icon:hover {
	opacity: 1;
}

.site-header-hamburger {
	display: none;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	color: var(--header-text-color, var(--color-cream));
	cursor: pointer;
	flex: 0 0 auto;
}

.site-header-hamburger .icon-close {
	display: none;
}

.site-header-hamburger.is-active .icon-menu {
	display: none;
}

.site-header-hamburger.is-active .icon-close {
	display: inline-flex;
}

.site-header-brand {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	flex: 0 0 auto;
}

.site-logo-link {
	display: inline-flex;
	flex: 0 0 auto;
}

.site-logo {
	height: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
	width: auto;
}

.site-title {
	font-family: var(--font-slab);
	font-weight: 900;
	font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	color: var(--header-text-color, #ffffff);
	margin: 0;
	line-height: 1.08;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.site-title a {
	color: inherit;
	text-decoration: none;
}

.site-header-nav {
	display: flex;
	flex: 1;
	align-items: center;
	overflow-x: auto;
}

.site-header-nav ul {
	list-style: none;
	display: flex;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
}

.site-header-nav a {
	color: var(--header-text-color, var(--color-cream));
	text-decoration: none;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: var(--font-size-meta);
	padding: 0.4rem 0;
	border-bottom: 2px solid transparent;
	display: inline-block;
	opacity: 0.85;
	white-space: nowrap;
}

.site-header-nav a:hover,
.site-header-nav .nav-current a {
	border-bottom-color: var(--accent-color, var(--color-rust));
	opacity: 1;
}

/* Mobile dropdown nav — hidden until the hamburger toggles it open */

.site-header-mobile-nav {
	display: none;
	border-top: 1px solid var(--color-charcoal-border);
	padding: var(--space-10) clamp(1rem, 4vw, 2.5rem) var(--space-20);
}

.site-header-mobile-nav.is-open {
	display: block;
}

.site-header-mobile-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
}

.site-header-mobile-nav a {
	color: var(--header-text-color, var(--color-cream));
	text-decoration: none;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: var(--font-size-medium);
	display: block;
	padding: 0.35rem 0;
	opacity: 0.85;
}

.site-header-mobile-nav a:hover,
.site-header-mobile-nav .nav-current a {
	opacity: 1;
	color: var(--accent-color, var(--color-rust));
}

/* ----- Expanded header: centered logo/title, tagline, nav row below.
   Only rendered in the template when "shrink on scroll" is on — this is
   the pre-scroll state at the top of the page. ----- */

.site-header-expanded {
	background: var(--header-bg-color, var(--color-charcoal));
	border-bottom: 1px solid var(--color-charcoal-border);
}

.site-header-expanded-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
	max-width: var(--wide-size);
	margin-left: auto;
	margin-right: auto;
	padding: var(--space-30) clamp(1rem, 4vw, 2.5rem) var(--space-20);
}

.site-header-expanded .site-header-spacer,
.site-header-expanded .site-header-icons {
	min-width: 96px;
	flex: 0 0 auto;
}

.site-header-titles {
	flex: 1;
	text-align: center;
}

.site-header-expanded .site-title-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-20);
}

.site-header-expanded .site-logo {
	height: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.site-header-expanded .site-title {
	font-size: clamp(1.75rem, 1.4rem + 2vw, 3rem);
	white-space: normal;
}

.site-tagline {
	margin: 0.35rem 0 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-meta);
	color: var(--header-text-color, var(--color-stone-light));
	opacity: 0.75;
}

.site-header-nav-row {
	border-top: 1px solid var(--color-charcoal-border);
	padding: 0.3rem clamp(1rem, 4vw, 2.5rem);
	display: flex;
	justify-content: center;
}

.site-header-nav-row ul {
	list-style: none;
	display: flex;
	gap: 2rem;
	margin: 0;
	padding: 0;
}

.site-header-nav-row a {
	color: var(--header-text-color, var(--color-cream));
	text-decoration: none;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: var(--font-size-meta);
	padding-bottom: 0.5rem;
	border-bottom: 2px solid transparent;
	display: inline-block;
	opacity: 0.85;
}

.site-header-nav-row a:hover,
.site-header-nav-row .nav-current a {
	border-bottom-color: var(--accent-color, var(--color-rust));
	opacity: 1;
}

/* ----- Shrink-on-scroll swap (desktop only — mobile always uses the
   compact header, see below) ----- */

@media (min-width: 768px) {
	.site-header--shrink .site-header-compact {
		position: fixed;
		top: -100px;
		left: 0;
		right: 0;
		transition: top 0.25s ease;
		z-index: 50;
	}

	.site-header--shrink.is-scrolled .site-header-compact {
		top: 0;
	}

	/* Shrink on, sticky off: reveal the compact header in normal flow
	   instead of pinning it, so it scrolls away like any other element. */
	.site-header--shrink:not(.site-header--sticky) .site-header-compact {
		position: static;
		top: auto;
		display: none;
	}

	.site-header--shrink:not(.site-header--sticky).is-scrolled .site-header-compact {
		display: block;
	}
}

/* ----- Mobile: always the compact header, with a hamburger dropdown ----- */

@media (max-width: 767px) {
	.site-header-expanded {
		display: none;
	}

	.site-header-compact {
		position: static;
		transform: none;
		display: block;
	}

	.site-header--sticky .site-header-compact {
		position: sticky;
		top: 0;
		z-index: 50;
	}

	.site-header-hamburger {
		display: inline-flex;
	}

	.site-header-nav {
		display: none;
	}

	.site-header-icons {
		margin-left: auto;
	}
}

/* ---------- Homepage masonry grid ---------- */

.homepage-grid {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr) 260px;
	gap: var(--space-30);
	align-items: start;
	padding-top: var(--space-40);
	padding-bottom: var(--space-60);
}

.grid-col-left {
	display: flex;
	flex-direction: column;
}

.grid-col-left-item {
	padding-top: var(--space-30);
	border-top: 1px solid var(--color-stone-light);
}

.grid-col-left-item:first-child {
	padding-top: 0;
	border-top: none;
}

.grid-col-left-item img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 10px;
}

.grid-col-left-item h3 {
	font-size: 1rem;
	margin-top: var(--space-20);
	margin-bottom: 0.4rem;
}

.grid-col-left-item h3 a {
	text-decoration: none;
}

.grid-col-left-item p {
	font-family: var(--font-sans);
	font-size: 0.8rem;
	color: var(--color-stone);
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.grid-col-feature .feature-post-image {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 14px;
}

.grid-col-feature h2 {
	font-size: var(--font-size-huge);
	text-align: center;
	margin-top: var(--space-40);
	margin-bottom: var(--space-20);
}

.grid-col-feature h2 a {
	text-decoration: none;
}

.grid-col-feature .excerpt {
	text-align: center;
	max-width: 46rem;
	margin: 0 auto;
	color: var(--color-stone);
}

.grid-col-feature .post-byline-row {
	justify-content: center;
	margin-top: var(--space-30);
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	color: var(--color-stone);
}

.subscribe-card {
	border: 1px solid var(--color-stone-light);
	border-radius: 12px;
	padding: var(--space-30);
	text-align: center;
	margin-bottom: var(--space-40);
}

.subscribe-card h3 {
	margin-top: 0;
}

.subscribe-card p {
	font-family: var(--font-sans);
	font-size: var(--font-size-meta);
	color: var(--color-stone);
}

.subscribe-card .subscribe-button {
	display: inline-block;
	width: 100%;
	background: var(--color-ink);
	color: #ffffff;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: var(--font-size-meta);
	text-decoration: none;
	border-radius: 999px;
	padding: 0.7rem 1.4rem;
	text-align: center;
}

.subscribe-card .subscribe-button:hover {
	background: var(--accent-color, var(--color-rust));
	color: #ffffff;
}

.grid-col-right {
	display: flex;
	flex-direction: column;
}

.grid-col-right-item {
	padding-top: var(--space-30);
	border-top: 1px solid var(--color-stone-light);
}

.grid-col-right-item:first-child {
	padding-top: 0;
	border-top: none;
}

.grid-col-right-item img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 10px;
}

.grid-col-right-item h3 {
	font-size: 1rem;
	margin-top: var(--space-20);
	margin-bottom: 0.4rem;
}

.grid-col-right-item h3 a {
	text-decoration: none;
}

.grid-col-right-item p {
	font-family: var(--font-sans);
	font-size: 0.8rem;
	color: var(--color-stone);
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

@media (max-width: 960px) {
	.homepage-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Post byline row (shared) ---------- */

.post-byline-row {
	display: flex;
	align-items: center;
	gap: var(--space-20);
	margin: var(--space-20) 0;
}

.avatar {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	object-fit: cover;
	background: var(--color-stone-light);
}

.post-byline-names {
	line-height: 1.35;
}

.post-byline-names .author-name {
	margin: 0;
	text-transform: uppercase;
	font-weight: 700;
	font-size: var(--font-size-small);
	font-family: var(--font-sans);
}

.post-byline-names time {
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	color: var(--color-stone);
}

/* ---------- Single post ---------- */

.single-post-header {
	max-width: var(--content-size);
	margin: 0 auto;
	padding-top: var(--space-40);
}

.post-dek {
	font-family: var(--font-serif);
	font-size: var(--dek-font-size);
	color: var(--color-stone);
	font-weight: 400;
	margin-top: var(--space-20);
}

.post-byline-row--single {
	justify-content: space-between;
	border-top: 1px solid var(--color-stone-light);
	border-bottom: 1px solid var(--color-stone-light);
	padding: var(--space-20) 0;
}

.post-byline-row--single .post-byline-left {
	display: flex;
	align-items: center;
	gap: var(--space-20);
}

.post-action-icons {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	color: var(--color-stone);
}

.post-action-icon {
	display: inline-flex;
	cursor: pointer;
	color: inherit;
	text-decoration: none;
}

.post-action-icon:hover {
	color: var(--accent-color, var(--color-rust));
}

.single-post-featured-image {
	max-width: var(--content-size);
	margin: var(--space-30) auto var(--space-40);
}

.single-post-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 14px;
}

.single-post-content {
	max-width: var(--content-size);
	margin: 0 auto;
	font-family: var(--font-serif);
	font-size: var(--content-font-size);
	line-height: 1.75;
}

.single-post-content p {
	margin-bottom: 1.5em;
}

.single-post-content a {
	color: var(--accent-color, var(--color-rust));
}

.single-post-content a:hover {
	opacity: 0.8;
}

/* Drop cap — opt in per post by adding the internal "#drop-cap" tag.
   `initial-letter` (Safari, Chrome 110+) uses the font's real metrics to
   span exactly 3 lines and sit flush with the cap-height of the first
   line — far more accurate than hand-tuned font-size/line-height. The
   float-based declarations below are the fallback for browsers that don't
   support it yet (notably Firefox); supporting browsers apply both, which
   is the property's intended, spec'd pairing. */
.single-post-content.has-drop-cap > p:first-of-type::first-letter {
	float: left;
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: 4.6em;
	line-height: 0.78;
	padding-right: 0.12em;
	margin-top: 0.1em;
	color: var(--accent-color, var(--color-rust));
	initial-letter: 3 3;
	-webkit-initial-letter: 3 3;
}

.single-post-content img {
	border-radius: 10px;
}

.single-post-content figure {
	margin: 2em 0;
}

.single-post-content figure figcaption {
	margin-top: 0.75em;
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	color: var(--color-stone);
	text-align: center;
}

/* Koenig editor "wide" and "full" width image/card options — these need to
   visibly break out of the constrained reading column or Ghost's theme
   validator (gscan) flags them as unstyled. */
.single-post-content .kg-width-wide {
	width: 100%;
	max-width: 1000px;
	margin-left: 50%;
	transform: translateX(-50%);
}

.single-post-content .kg-width-full {
	width: 100vw;
	max-width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

.single-post-content .kg-width-full img {
	width: 100%;
	border-radius: 0;
}

/* Embed cards (YouTube, etc.) come out of Koenig with an inline
   width/height in px sized to the original oEmbed response, which
   overflows the reading column on anything narrower than that. max-width
   clamps regardless of the inline width; height needs !important since
   Koenig also sets an inline height, and forcing it to auto lets the
   inline aspect-ratio (also set by Koenig) recompute it proportionally. */
.single-post-content .kg-embed-card,
.single-post-content iframe {
	max-width: 100%;
}

.single-post-content iframe {
	height: auto !important;
}

/* Gallery card */

.single-post-content .kg-gallery-container {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.single-post-content .kg-gallery-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 0.5em;
}

.single-post-content .kg-gallery-image {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
}

.single-post-content .kg-gallery-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}

/* Bookmark card */

.single-post-content .kg-bookmark-card {
	margin: 2em 0;
}

.single-post-content .kg-bookmark-container {
	display: flex;
	min-height: 8em;
	color: inherit;
	text-decoration: none;
	border: 1px solid var(--color-stone-light);
	border-radius: 10px;
	overflow: hidden;
}

.single-post-content .kg-bookmark-container:hover {
	border-color: var(--accent-color, var(--color-rust));
}

.single-post-content .kg-bookmark-content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1 1 auto;
	padding: 1em 1.25em;
	min-width: 0;
}

.single-post-content .kg-bookmark-title {
	font-family: var(--font-slab);
	font-weight: 700;
	font-size: var(--font-size-medium);
}

.single-post-content .kg-bookmark-description {
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	color: var(--color-stone);
	margin-top: 0.35em;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.single-post-content .kg-bookmark-metadata {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin-top: 1em;
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	color: var(--color-stone);
}

.single-post-content .kg-bookmark-icon {
	width: 18px;
	height: 18px;
	border-radius: 3px;
}

.single-post-content .kg-bookmark-author,
.single-post-content .kg-bookmark-publisher {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.single-post-content .kg-bookmark-publisher::before {
	content: "•";
	margin-right: 0.5em;
}

.single-post-content .kg-bookmark-thumbnail {
	flex: 0 0 33%;
	min-width: 0;
}

.single-post-content .kg-bookmark-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

@media (max-width: 600px) {
	.single-post-content .kg-bookmark-thumbnail {
		display: none;
	}
}

.single-post-comments {
	max-width: var(--content-size);
	margin: var(--space-40) auto 0;
	border-top: 1px solid var(--color-stone-light);
	padding-top: var(--space-40);
}

/* ---------- Post grid (archive / tag pages) ---------- */

.post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-40) var(--space-30);
	padding-top: var(--space-40);
	padding-bottom: var(--space-60);
}

@media (max-width: 900px) {
	.post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

.post-grid-item-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 12px;
	margin-bottom: var(--space-20);
}

.post-grid-item h3 {
	font-size: 1.1rem;
	margin-bottom: 0.35rem;
}

.post-grid-item h3 a {
	text-decoration: none;
}

.post-grid-item p {
	font-family: var(--font-sans);
	font-size: 0.85rem;
	color: var(--color-stone);
	margin: 0 0 0.5rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.post-grid-item time {
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	color: var(--color-stone);
}

/* ---------- Footer ---------- */

.site-footer {
	background: var(--color-charcoal);
	color: var(--color-stone-light);
	padding: var(--space-40) clamp(1rem, 4vw, 2.5rem);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-20);
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
}

.site-footer p {
	margin: 0;
}

.site-footer nav ul {
	list-style: none;
	display: flex;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
}

.site-footer a {
	color: var(--color-stone-light);
	text-decoration: none;
}

.site-footer a:hover {
	color: #ffffff;
}

/* ---------- Authors index page ---------- */

.author-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-30);
	padding-top: var(--space-40);
	padding-bottom: var(--space-60);
}

@media (max-width: 700px) {
	.author-grid {
		grid-template-columns: 1fr;
	}
}

.author-card {
	border: 1px solid var(--color-stone-light);
	border-radius: 14px;
	padding: var(--space-30);
	transition: border-color 0.15s ease;
}

.author-card:hover {
	border-color: var(--accent-color, var(--color-rust));
}

.author-card-top {
	display: block;
	text-decoration: none;
	color: inherit;
}

.author-card-avatar {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 999px;
	background: var(--color-stone-light);
	margin-bottom: var(--space-20);
}

.author-card-name {
	font-size: 1.1rem;
	margin: 0 0 0.35rem;
}

.author-card-bio {
	font-family: var(--font-sans);
	font-size: 0.85rem;
	color: var(--color-stone);
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.author-card-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-20);
	margin-top: var(--space-20);
	padding-top: var(--space-20);
	border-top: 1px solid var(--color-stone-light);
}

.author-card-meta-icon {
	display: inline-flex;
	color: var(--color-stone);
}

.author-card-meta-icon:hover {
	color: var(--accent-color, var(--color-rust));
}

.author-card-meta-text {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	color: var(--color-stone);
	text-decoration: none;
}

.author-card-meta-count:hover {
	color: var(--accent-color, var(--color-rust));
}

/* ---------- Single author page ---------- */

.author-profile {
	display: flex;
	align-items: flex-start;
	gap: var(--space-30);
	padding-top: var(--space-40);
	padding-bottom: var(--space-40);
	border-bottom: 1px solid var(--color-stone-light);
	margin-bottom: var(--space-40);
}

.author-profile-avatar {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: 999px;
	background: var(--color-stone-light);
	flex: 0 0 auto;
}

.author-profile-name {
	margin: 0 0 0.5rem;
}

.author-profile-bio {
	font-family: var(--font-sans);
	font-size: var(--font-size-medium);
	line-height: 1.6;
	color: var(--color-stone);
	margin: 0;
	max-width: 46rem;
}

.author-profile-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-20);
	margin-top: var(--space-20);
}

.author-profile-meta-icon {
	display: inline-flex;
	color: var(--color-stone);
}

.author-profile-meta-icon:hover {
	color: var(--accent-color, var(--color-rust));
}

.author-profile-meta-text {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	color: var(--color-stone);
}

@media (max-width: 600px) {
	.author-profile {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.author-profile-meta {
		justify-content: center;
	}
}

/* ---------- Tags index page ---------- */

.tag-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-30);
	padding-top: var(--space-40);
	padding-bottom: var(--space-60);
}

@media (max-width: 900px) {
	.tag-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

.tag-card {
	display: block;
	padding: var(--space-30);
	border: 1px solid var(--color-stone-light);
	border-radius: 14px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease;
}

.tag-card:hover {
	border-color: var(--accent-color, var(--color-rust));
}

.tag-card-name {
	font-size: 1.1rem;
	margin: 0 0 0.35rem;
}

.tag-card-description {
	font-family: var(--font-sans);
	font-size: 0.85rem;
	color: var(--color-stone);
	margin: 0 0 0.5rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.tag-card-count {
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	color: var(--color-stone);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}