/* =============================================================================
   cr2026 — Get There v3
   Main Stylesheet
   ============================================================================= */

/* =============================================================================
   1. Design Tokens (CSS Custom Properties)
   ============================================================================= */

:root {
	/* Colors — Light Mode */
	--color-text:         #1a1a1a;
	--color-text-muted:   #717171;
	--color-bg:           hsl(30, 100%, 98%);
	--color-surface:      hsl(30, 39%, 90%); /* warm cream — like the page of a book */
	--color-border:       #e5e0d8;

	/* Brand Blues */
	--color-brand:        #2b4b6f;
	--color-brand-dark:   #19324b;
	--color-brand-light:  #4a7a9b;

	/* Typography */
	--font-body:    'Avenir Next', Avenir, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--font-heading: 'Playfair Display', Georgia, serif;
	--font-mono:    'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;

	/* Type Scale — base is 18px for comfortable reading */
	--text-xs:   0.75rem;   /* 12px */
	--text-sm:   0.875rem;  /* 14px */
	--text-base: 1.125rem;  /* 18px */
	--text-lg:   1.25rem;   /* 20px */
	--text-xl:   1.5rem;    /* 24px */
	--text-2xl:  2rem;      /* 32px */
	--text-3xl:  2.5rem;    /* 40px */
	--text-4xl:  3rem;      /* 48px */

	/* Spacing */
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-6:  1.5rem;
	--space-8:  2rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-24: 6rem;

	/* Layout */
	--content-width:  1008px;
	--wide-width:     1100px;
	--site-padding-x: clamp(var(--space-4), 5vw, var(--space-12));

	/* Header height (padding-block 32px + logotype 38px + border 1px) */
	--header-h: 71px;

	/* Nav arrow circles */
	--nav-arrow-bg:           var(--color-bg);
	--nav-arrow-shadow:       0 2px 6px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
	--nav-arrow-shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
	:root {
		--color-text:        #e8e4df;
		--color-text-muted:  #a09990;
		--color-bg:          #1a1a1a;
		--color-surface:     #242420;
		--color-border:      #333330;
		--color-brand:       #7baec8;
		--color-brand-dark:  #4a8ab0;
		--color-brand-light: #a8c8d8;

		--nav-arrow-bg:           var(--color-surface);
		--nav-arrow-shadow:       none;
		--nav-arrow-shadow-hover: none;
	}

}


/* =============================================================================
   2. Reset & Base
   ============================================================================= */

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

html {
	font-size: 100%; /* respect user preferences */
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.7;
	color: var(--color-text);
	background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 400;
	line-height: 1.25;
	margin-block-start: var(--space-8);
	margin-block-end: var(--space-4);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin-block: var(--space-4); }

a {
	color: var(--color-brand);
	text-underline-offset: 2px;
}
a:hover { color: var(--color-brand-dark); }

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

code, kbd, samp, pre {
	font-family: var(--font-mono);
	font-size: 0.9em;
}

blockquote {
	margin-inline: 0;
	padding-inline-start: var(--space-6);
	border-inline-start: 4px solid var(--color-brand);
	color: var(--color-text-muted);
	font-style: italic;
}

hr {
	border: none;
	border-block-start: 1px solid var(--color-border);
	margin-block: var(--space-8);
}

/* Accessibility */
.skip-link {
	position: absolute;
	transform: translateY(-100%);
}
.skip-link:focus {
	transform: translateY(0);
	background: var(--color-brand);
	color: #fff;
	padding: var(--space-2) var(--space-4);
	z-index: 999;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}


/* =============================================================================
   3. Layout
   ============================================================================= */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	flex: 1;
	padding-block: var(--space-12);
}

/* Centered content column */
.content-area,
.post-header__inner,
.post-content,
.page-content,
.page-header,
.archive-header__inner {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--site-padding-x);
}


/* =============================================================================
   4. Header
   ============================================================================= */

.site-header {
	border-block-end: 1px solid var(--color-border);
	padding-block: var(--space-4);
}

.site-header__inner {
	max-width: var(--wide-width);
	margin-inline: auto;
	padding-inline: var(--site-padding-x);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
}

.site-title {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--color-text);
	text-decoration: none;
}

.primary-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--space-6);
}

.primary-nav__list a {
	color: var(--color-text);
	text-decoration: none;
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.primary-nav__list a:hover { color: var(--color-brand); }

/* Logotype */
.site-logo {
	display: flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
	flex-shrink: 0;
}

.site-logotype {
	display: block;
	height: 38px;
	width: auto;
}

/* Dropdown — parent item needs relative positioning */
.primary-nav .menu-item-has-children {
	position: relative;
}

/* Chevron indicator */
.primary-nav .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	margin-inline-start: var(--space-1);
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	vertical-align: middle;
	opacity: 0.6;
}

/* Sub-menu — hidden by default */
.primary-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 180px;
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
	list-style: none;
	margin: 0;
	padding: var(--space-2) 0;
	padding-block-start: var(--space-4); /* top padding bridges gap between link and menu */
	z-index: 100;
}

@media (prefers-color-scheme: dark) {
	.primary-nav .sub-menu {
		background: rgba(26, 26, 26, 0.92);
		border-color: var(--color-border);
	}
}

/* Reveal on hover or keyboard focus-within */
.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children:focus-within > .sub-menu {
	display: block;
}

/* Sub-menu link styling — override the uppercase treatment */
.primary-nav .sub-menu a {
	display: block;
	padding: var(--space-2) var(--space-4);
	white-space: nowrap;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--text-sm);
}

/* Social icons — inline SVGs injected by cr2026_replace_nav_social_icons() */
.primary-nav__list a svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* Hamburger toggle button — hidden on desktop */
.nav-toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-text);
	flex-shrink: 0;
}

.nav-toggle__bar {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transform-origin: center;
	transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Animate bars → X when open */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile social row — hidden on desktop */
.primary-nav__social-row { display: none; }

/* =============================================================================
   Mobile navigation (≤720px)
   ============================================================================= */

@media (max-width: 720px) {

	/* Sticky header — also the absolute containing block for the dropdown panel */
	.site-header {
		position: sticky;
		top: 0;
		z-index: 100;
		background: var(--color-bg);
	}

	.nav-toggle { display: flex; }

	/* Panel — full-width dropdown anchored below the sticky header */
	.primary-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 99;
		background: rgba(255, 255, 255, 0.92);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		border-block-end: 1px solid var(--color-border);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-6px);
		transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	}

	body.nav-is-open .primary-nav {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}

	/* Vertical list — left-aligned, full width */
	.primary-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--space-2) var(--site-padding-x) 0;
	}

	/* Hide social icon items — shown in the social row below */
	.primary-nav__list li:has(> a > svg) { display: none; }

	/* Nav links — normal weight, normal case */
	.primary-nav__list > li > a {
		display: block;
		font-size: var(--text-base);
		font-weight: 400;
		text-transform: none;
		letter-spacing: 0;
		padding: 14px 0;
		color: var(--color-text);
	}

	/* Separator before Resources (first item with children) */
	.primary-nav__list .menu-item-has-children {
		border-top: 1px solid var(--color-border);
		margin-top: var(--space-2);
		padding-top: var(--space-2);
	}

	/* Resources → section label, not interactive */
	.primary-nav__list .menu-item-has-children > a {
		font-size: var(--text-xs);
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--color-text-muted);
		padding-top: var(--space-2);
		padding-bottom: var(--space-1);
		pointer-events: none;
		cursor: default;
	}

	/* Hide dropdown chevron */
	.primary-nav .menu-item-has-children > a::after { display: none; }

	/* Sub-menu: inline, no dropdown chrome */
	.primary-nav .sub-menu {
		display: block;
		position: static;
		background: none;
		border: none;
		box-shadow: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		min-width: 0;
		padding: 0 0 var(--space-2);
	}

	.primary-nav .sub-menu a {
		display: block;
		font-size: var(--text-base);
		text-transform: none;
		letter-spacing: 0;
		font-weight: 400;
		padding: 10px 0;
		white-space: normal;
		color: var(--color-text);
	}
	.primary-nav .sub-menu a:hover { color: var(--color-brand); }

	/* Social icon row */
	.primary-nav__social-row {
		display: flex;
		align-items: center;
		gap: var(--space-6);
		padding: var(--space-4) var(--site-padding-x);
		margin-top: var(--space-2);
		border-top: 1px solid var(--color-border);
	}

	.primary-nav__social-link {
		display: flex;
		color: var(--color-text-muted);
		transition: color 0.15s;
	}
	.primary-nav__social-link:hover { color: var(--color-text); }

	.primary-nav__social-link svg {
		width: 20px;
		height: 20px;
		fill: currentColor;
	}
}

/* Dark mode — mobile nav panel */
@media (max-width: 720px) and (prefers-color-scheme: dark) {
	.primary-nav {
		background: rgba(26, 26, 26, 0.92);
	}
}


/* =============================================================================
   5. Footer
   ============================================================================= */

.site-footer {
	border-block-start: 1px solid var(--color-border);
	padding-block: var(--space-8);
	margin-block-start: var(--space-16);
}

.site-footer__inner {
	max-width: var(--wide-width);
	margin-inline: auto;
	padding-inline: var(--site-padding-x);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	flex-wrap: wrap;
}

.footer-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.footer-nav__list a {
	color: var(--color-text-muted);
	text-decoration: none;
	font-size: var(--text-sm);
}
.footer-nav__list a:hover { color: var(--color-text); }

.site-footer__copyright {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	margin: 0;
}


/* =============================================================================
   6. Post Meta
   ============================================================================= */

.post-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-block: var(--space-4);
}

.post-meta__left {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.post-meta__author {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.post-meta__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
}

.post-meta__author-link {
	color: inherit;
	text-decoration: none;
}
.post-meta__author-link:hover { color: var(--color-brand); }

.reading-time::before {
	content: '·';
	display: inline-block;
	margin-inline-end: var(--space-4);
}

/* Share icons */
.post-meta__share {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.post-meta__share-link {
	display: flex;
	color: var(--color-text-muted);
	transition: color 0.15s;
}
.post-meta__share-link:hover { color: var(--color-brand); }

.post-meta__share-link svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

@media (max-width: 560px) {
	.post-meta {
		display: grid;
		grid-template-columns: 32px 1fr auto;
		grid-template-rows: auto auto;
		column-gap: var(--space-2);
		row-gap: var(--space-1);
	}
	.post-meta__left   { display: contents; }
	.post-meta__author { display: contents; }
	.post-meta__avatar {
		grid-column: 1;
		grid-row: 1 / 3;
		align-self: center;
	}
	.post-meta__author-link {
		grid-column: 2;
		grid-row: 1;
		align-self: end;
	}
	.reading-time {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
	}
	.post-meta__share {
		grid-column: 3;
		grid-row: 1 / 3;
		align-self: center;
	}
	.reading-time::before { display: none; }
}


/* =============================================================================
   7. Single Post
   ============================================================================= */

.post-header { padding-block: var(--space-12) var(--space-8); }

.post-title {
	font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl));
	margin-block: 0 var(--space-3);
}

.post-subtitle {
	font-size: var(--text-xl);
	color: var(--color-text-muted);
	font-family: var(--font-heading);
	font-style: italic;
	margin-block: 0 var(--space-4);
}

.post-thumbnail {
	max-width: var(--wide-width);
	margin-inline: auto;
	margin-block-end: var(--space-8);
}
.post-thumbnail img { width: 100%; }
@media (prefers-color-scheme: dark) {
	.post-thumbnail img,
	.article-card__img,
	.post-row__img { opacity: 0.8; }
}

/* First paragraph lead-in */
.post-content > p:first-of-type {
	font-size: var(--text-lg);
}

/* Post navigation (prev/next) */
.post-navigation {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding-block: var(--space-8);
	border-block-start: 1px solid var(--color-border);
	margin-block-start: var(--space-8);
}

.post-nav__link {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-3);
	color: var(--color-text);
	text-decoration: none;
}
.post-nav__link--prev { justify-self: start; }
.post-nav__link--next { justify-self: end; flex-direction: row-reverse; }

.post-nav__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--nav-arrow-bg);
	box-shadow: var(--nav-arrow-shadow);
	transition: box-shadow 0.15s, transform 0.15s;
}
.post-nav__link:hover .post-nav__arrow {
	box-shadow: var(--nav-arrow-shadow-hover);
	transform: scale(1.06);
}
.post-nav__label {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.post-nav__archive {
	justify-self: center;
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color 0.15s;
}
.post-nav__archive:hover { color: var(--color-text); }

/* Journal prompt */
.journal-prompt {
	padding: 16px 24px;
	background: var(--color-surface);
	border-left: 3px solid var(--color-border);
}

.journal-prompt__label {
	margin: 0 0 0.25em;
	font-size: var(--text-xs);
	font-weight: 600;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
}

.journal-prompt__text {
	margin: 0;
	font-style: italic;
	font-size: var(--text-sm);
}

/* Post subscribe — below article content */
.post-subscribe {
	border-block-start: 1px solid var(--color-border);
	background: var(--color-surface);
	padding-block: var(--space-12);
}

.post-subscribe__inner {
	max-width: 600px;
	margin-inline: auto;
	padding-inline: var(--site-padding-x);
}


/* =============================================================================
   8. Post Card (archive / index)
   ============================================================================= */

.post-grid {
	display: grid;
	gap: var(--space-8);
}

.post-card { display: grid; gap: var(--space-4); }

.post-card__thumbnail img { border-radius: 4px; }

.post-card__title {
	font-size: var(--text-xl);
	margin: 0;
}
.post-card__title a { color: var(--color-text); text-decoration: none; }
.post-card__title a:hover { color: var(--color-brand); }

.post-card__subtitle {
	color: var(--color-text-muted);
	font-style: italic;
	margin: 0;
}

.post-card__meta {
	display: flex;
	gap: var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.post-card__meta .reading-time::before { content: '· '; }


/* =============================================================================
   9. Book Templates
   ============================================================================= */

/* Flush cream headers against the site header — no gap */
body.single-book .site-main,
body.post-type-archive-photo .site-main { padding-block-start: 0; }

/* Single book — hero surface wrapping the two-column layout */
.book-hero {
	background: var(--color-surface);
	border-block-end: 1px solid var(--color-border);
	padding-block: var(--space-12);
}

.book-layout {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-10, var(--space-8));
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--site-padding-x);
	align-items: start;
}

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

.book-cover {
	width: 220px;
	flex-shrink: 0;
	/* Room for the page block that peeks out below and right */
	padding-right: 9px;
	padding-bottom: 9px;
}

/* Hardcover book effect — flat, front-facing */
.book-3d {
	position: relative;
	display: inline-block;
	line-height: 0;
}

/* Page block — cream rectangle offset down-right, simulating book thickness */
.book-3d::before {
	content: '';
	position: absolute;
	top: 3px;
	right: -9px;
	bottom: -9px;
	left: 3px;
	border-radius: 1px 3px 3px 1px;
	background: linear-gradient(to bottom, #e9e4dc, #d9d3c8);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

.book-3d img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	border-radius: 3px;
	box-shadow:
		0 18px 50px rgba(0, 0, 0, 0.12),
		0 4px 14px  rgba(0, 0, 0, 0.07);
}
@media (prefers-color-scheme: dark) {
	.book-3d img { box-shadow: none; }
}

/* Printed-cover sheen — faint gloss from upper-left */
.book-3d::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: 3px;
	background: linear-gradient(
		148deg,
		rgba(255, 255, 255, 0.18) 0%,
		rgba(255, 255, 255, 0.06) 30%,
		transparent 58%
	);
	pointer-events: none;
}

.book-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	padding-block-start: var(--space-2);
}

.book-title {
	font-size: var(--text-2xl);
	line-height: 1.2;
	margin: 0;
}

.book-byline {
	font-size: var(--text-base);
	color: var(--color-text-muted);
	margin: var(--space-2) 0 0;
}

.book-byline__sep {
	margin-inline: 0.2em;
}

.book-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
}

.book-link--primary {
	display: inline-block;
	padding: var(--space-3) var(--space-6);
	border-radius: 4px;
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
	background-color: var(--color-brand);
	color: #fff;
	transition: background-color 0.15s;
}
.book-link--primary:hover { background-color: var(--color-brand-dark); color: #fff; }

.book-link--secondary {
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-text-muted);
	text-decoration: none;
	border-block-end: 1px solid var(--color-border);
	transition: color 0.15s, border-color 0.15s;
}
.book-link--secondary:hover {
	color: var(--color-text);
	border-block-end-color: var(--color-text);
}

/* Books archive — header */
.books-header { padding-block: var(--space-12); }

.books-header__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-12);
	align-items: center;
	max-width: var(--wide-width);
	margin-inline: auto;
	padding-inline: var(--site-padding-x);
}

@media (max-width: 680px) {
	.books-header__inner { grid-template-columns: 1fr; }
}

.books-header__text .archive-title { margin-block-start: 0; }
.books-header__text p { color: var(--color-text-muted); margin-block: var(--space-3) 0; }
.books-header__jump {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-block-start: var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-brand);
	text-decoration: none;
}
.books-header__jump:hover { text-decoration: underline; }

.books-header__quote {
	border: none;
	padding: var(--space-6) var(--space-8);
	background: var(--color-surface);
	border-radius: 4px;
	font-style: italic;
	font-size: var(--text-lg);
	color: var(--color-text);
	margin: 0;
}

.books-header__quote p { margin: 0 0 var(--space-3); }

.books-header__quote cite {
	display: block;
	font-style: normal;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-text-muted);
}

/* Books archive — featured articles */
.books-featured {
	background: var(--color-surface);
	padding-block: var(--space-12);
}

.books-featured__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-6);
	max-width: var(--wide-width);
	margin-inline: auto;
	padding-inline: var(--site-padding-x);
}

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

@media (max-width: 500px) {
	.books-featured__grid { grid-template-columns: 1fr; }
}

.books-featured-card__img-link { display: block; }

.books-featured-card__img,
.books-featured-card__img-placeholder {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 4px;
	display: block;
	margin-block-end: var(--space-4);
}

.books-featured-card__img-placeholder { background: var(--color-border); }

.books-featured-card__img-link:hover .books-featured-card__img {
	opacity: 0.88;
}

.books-featured-card__title {
	font-size: var(--text-base);
	margin: 0 0 var(--space-2);
}

.books-featured-card__title a {
	color: var(--color-text);
	text-decoration: none;
}
.books-featured-card__title a:hover { color: var(--color-brand); }

.books-featured-card__excerpt {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin: 0;
}

/* Books archive — grid */
.books-grid-wrap {
	max-width: var(--wide-width);
	margin-inline: auto;
	padding-inline: var(--site-padding-x);
	padding-block: var(--space-12);
}

.book-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--space-6);
}

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

@media (max-width: 500px) {
	.book-grid { grid-template-columns: repeat(2, 1fr); }
}

.book-card__cover-link { display: block; }
.book-card__cover-link img {
	width: 100%;
	border-radius: 4px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	transition: box-shadow 0.2s, transform 0.2s;
	display: block;
}
.book-card__cover-link:hover img {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	transform: translateY(-3px);
}


/* =============================================================================
   10. Photo Grid (Shareable Images)
   ============================================================================= */

.photos-grid-wrap {
	max-width: var(--wide-width);
	margin-inline: auto;
	padding-inline: var(--site-padding-x);
	padding-block-end: var(--space-12);
}

.photo-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-3);
}

@media (max-width: 700px) { .photo-grid { grid-template-columns: repeat(2, 1fr); } }

.photo-grid__item { display: block; overflow: hidden; border-radius: 4px; }
.photo-grid__item img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform 0.25s;
}
.photo-grid__item:hover img { transform: scale(1.03); }


/* =============================================================================
   10b. Photo Single
   ============================================================================= */

.photo-single {
	max-width: 600px;
	margin-inline: auto;
	padding-inline: var(--site-padding-x);
	padding-block-end: var(--space-12);
	text-align: center;
}

.photo-single__image {
	margin-block-end: var(--space-8);
}

.photo-single__image img {
	width: 100%;
	border-radius: 4px;
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.14),
		0 6px 18px rgba(0, 0, 0, 0.08);
}

.photo-quote {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: normal;
	line-height: 1.5;
	margin: 0 0 var(--space-6);
}

.photo-quote__text {
	display: block;
	margin-block-end: var(--space-3);
}

.photo-quote__attr {
	display: block;
	font-size: var(--text-base);
	font-style: italic;
	color: var(--color-text-muted);
}

.photo-download {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border-radius: 4px;
	border: 1px solid var(--color-border);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-text-muted);
	text-decoration: none;
	transition: border-color 0.15s, color 0.15s;
}
.photo-download:hover {
	border-color: var(--color-text-muted);
	color: var(--color-text);
}


/* =============================================================================
   11. Archive Header
   ============================================================================= */

.archive-header {
	padding-block: var(--space-12) var(--space-8);
	border-block-end: 1px solid var(--color-border);
	margin-block-end: var(--space-8);
}

.archive-header--surface {
	background: var(--color-surface);
	position: relative;
}

/* Parchment texture overlay — shared by all cream header sections */
.archive-header--surface::before,
.topic-page__header::before,
.error-404__header::before,
.home-topics::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('../img/parchment-texture.webp');
	background-size: cover;
	opacity: 0.25;
	pointer-events: none;
}

@supports (background-image: url('x.avif')) {
	.archive-header--surface::before,
	.topic-page__header::before,
	.error-404__header::before,
	.home-topics::before {
		background-image: url('../img/parchment-texture.avif');
	}
}

.archive-title { margin: 0 0 var(--space-3); }
.archive-description { color: var(--color-text-muted); margin: 0; }

body.tag .archive-title,
body.category .archive-title {
	display: flex;
	align-items: center;
	gap: 0.3em;
}

.archive-title__icon {
	width: 0.85em;
	height: 0.85em;
	flex-shrink: 0;
	translate: 0 -0.05em; /* optical vertical alignment */
	color: var(--color-text-muted);
}


/* =============================================================================
   12. 404 Page
   ============================================================================= */

.error-404__header {
	background: var(--color-surface);
	position: relative;
	border-block-end: 1px solid var(--color-border);
	text-align: center;
	padding-block: var(--space-16);
	padding-inline: var(--site-padding-x);
}

.error-404__number {
	font-family: var(--font-heading);
	font-size: clamp(5rem, 15vw, 9rem);
	line-height: 1;
	color: var(--color-brand);
	opacity: 0.2;
	margin: 0 0 var(--space-4);
}

.error-404__heading {
	font-family: var(--font-heading);
	font-size: var(--text-3xl);
	margin: 0 0 var(--space-6);
}

.error-404__quote {
	font-family: var(--font-heading);
	font-style: italic;
	font-size: var(--text-lg);
	color: var(--color-text-muted);
	border: none;
	padding: 0;
	margin: 0 auto var(--space-6);
	max-width: 560px;
}

.error-404__body {
	color: var(--color-text-muted);
	max-width: 480px;
	margin-inline: auto;
	margin-block: 0;
	text-wrap: balance;
}

.error-404__content {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--site-padding-x);
	padding-block: var(--space-12);
}

.error-404__content .search-form label {
	flex: 1;
	min-width: 0;
}

.error-404__content .search-field {
	width: 100%;
}

.error-404__links-label {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-block: 0 var(--space-4);
}

.error-404__link-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
}

@media (max-width: 560px) {
	.error-404__link-grid {
		grid-template-columns: 1fr;
	}
}

.error-404__link {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-4) var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: 6px;
	text-decoration: none;
	color: var(--color-text);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.error-404__link:hover {
	border-color: var(--color-brand-light);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	text-decoration: none;
}

.error-404__link-title {
	font-weight: 600;
	color: var(--color-brand);
}

.error-404__link-desc {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

body.error404 .site-main { padding-block: 0; }


/* =============================================================================
   13. Search Form
   ============================================================================= */

.search-form {
	display: flex;
	gap: var(--space-2);
	margin-block: var(--space-6);
}

.search-field {
	flex: 1;
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	font-family: var(--font-body);
	font-size: var(--text-base);
	background: var(--color-bg);
	color: var(--color-text);
}

.search-submit {
	padding: var(--space-2) var(--space-6);
	background: var(--color-brand);
	color: #fff;
	border: none;
	border-radius: 4px;
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s;
}
.search-submit:hover { background-color: var(--color-brand-dark); }


/* =============================================================================
   14. Shortcode Styles (from get-there plugin)
   ============================================================================= */

/* [callout] */
.callout {
	background: var(--color-surface);
	border-inline-start: 4px solid var(--color-brand);
	padding: var(--space-6);
	border-radius: 0 4px 4px 0;
	margin-block: var(--space-6);
}

/* [post-commentary] — subdued annotation outside the content: outdated-content disclaimers, caveats, etc. */
.post-commentary {
	background: #f0f0f0;
	border-inline-start: 3px solid #c8c8c8;
	padding: var(--space-4) var(--space-6);
	border-radius: 0 4px 4px 0;
	margin-block: var(--space-6);
	font-size: var(--text-sm);
	font-style: italic;
	color: var(--color-text-muted);
}

@media (prefers-color-scheme: dark) {
	.post-commentary {
		background: #2a2a28;
		border-inline-start-color: #4a4a45;
	}
}

/* [button] shortcode */
.sc-button {
	display: inline-block;
	padding: var(--space-3) var(--space-6);
	background: var(--color-brand);
	color: #fff;
	font-family: var(--font-ui);
	font-size: var(--text-base);
	font-weight: 600;
	text-decoration: none;
	border-radius: 4px;
	transition: background 0.15s ease;
}
.sc-button:hover { background: var(--color-brand-dark); color: #fff; }
.sc-button-wrap { text-align: center; }

/* [pullquote] / [tweetable] */
.pullquote,
.tweetable {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-style: italic;
	color: var(--color-brand-dark);
	border-block: 2px solid var(--color-brand);
	padding-block: var(--space-4);
	margin-block: var(--space-8);
	text-align: center;
}

/* The blockquote inside .tweetable — reset the global left-border style */
.tweetable blockquote {
	border: none;
	padding: 0;
	margin: 0;
	color: inherit;
	font-style: inherit;
}

/* Attribution */
.tweetable cite {
	display: block;
	font-size: var(--text-sm);
	font-style: normal;
	font-family: var(--font-body);
	color: var(--color-text-muted);
	margin-block-start: var(--space-2);
}

/* Tweet Quote button */
.tweetable .actions {
	list-style: none;
	margin: var(--space-3) 0 0;
	padding: 0;
	display: flex;
	justify-content: center;
}

.tweetable .actions a {
	font-size: var(--text-sm);
	font-family: var(--font-body);
	font-style: normal;
	color: var(--color-brand);
	text-decoration: none;
	border: 1px solid var(--color-brand);
	padding: var(--space-1) var(--space-4);
	border-radius: 3px;
	transition: background-color 0.15s, color 0.15s;
}

.tweetable .actions a:hover {
	background: var(--color-brand);
	color: #fff;
}

/* Journal prompt */
.comment-reminder {
	background: var(--color-surface);
	border-left: 3px solid var(--color-border);
	border-radius: 0 4px 4px 0;
	padding: var(--space-4) var(--space-6);
	margin-block: var(--space-8);
	font-style: italic;
	font-size: var(--text-sm);
	color: var(--color-text);
}

.comment-reminder .preface {
	display: block;
	font-style: normal;
	font-weight: 600;
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-block-end: var(--space-2);
}

/* Easy Social Share Buttons — strip round-retina, plain monochrome icons */
.essb_displayed_bottom {
	margin-block-start: var(--space-4);
}

.essb_links_list {
	display: flex !important;
	gap: var(--space-3) !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	align-items: center;
}

.essb_links_list .essb_item {
	margin: 0 !important;
	padding: 0 !important;
}

.essb_links_list .essb_item a,
.essb_links_list .essb_item a:hover,
.essb_links_list .essb_item a:focus {
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	width: auto !important;
	height: auto !important;
	color: var(--color-text-muted) !important;
	transition: color 0.15s;
}

body .essb_links .essb_links_list .essb_item a:hover,
body .essb_links .essb_links_list .essb_item a:focus,
body .essb_links.essb_template_round-retina li a:hover,
body .essb_links.essb_template_round-retina li a:focus,
body .essb_links .essb-s-ch-light:hover,
body .essb_links .essb-s-ch-light:focus {
	color: var(--color-text) !important;
}

.essb_links .essb-svg-icon {
	width: 18px !important;
	height: 18px !important;
	fill: currentColor !important;
	display: block;
}

.essb_links .essb-svg-icon path {
	fill: currentColor !important;
}

/* [mono] */
.mono { font-family: var(--font-mono); }

/* [affiliate-disclaimer] */
.gt-affiliate-disclaimer {
	background: transparent;
	border-inline-start: 2px solid var(--color-border);
	padding: var(--space-2) var(--space-4);
	margin-block: var(--space-6);
	font-size: var(--text-sm);
	font-style: italic;
	color: var(--color-text-muted);
}


/* =============================================================================
   15. Front Page
   ============================================================================= */

/* Remove site-main padding so the hero is truly flush with the header */
/* Flex column so .home-cta can grow to fill remaining height — closes gap before footer */
body.home .site-main {
	padding-block: 0;
	display: flex;
	flex-direction: column;
}

body.home .home-cta {
	flex: 1;
}

body.home .site-footer {
	margin-block-start: 0;
}

/* --- Hero --- */
.home-hero {
	width: 100%;
	line-height: 0; /* kill the inline gap below <picture> */
}
@media (min-width: 768px) {
	.home-hero { padding-block: 20px; }
}

.home-hero__picture {
	display: block;
	width: 100%;
}

.home-hero__picture img {
	width: 100%;
	height: auto;
	display: block;
}

/* --- Topic Cards --- */
.home-topics {
	padding-block: var(--space-16);
	background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.08) 100%) var(--color-surface);
	position: relative;
}

.home-topics__inner {
	max-width: var(--wide-width);
	margin-inline: auto;
	padding-inline: var(--site-padding-x);
}

.home-topics__heading {
	font-size: var(--text-2xl);
	text-align: center;
	margin-block: 0 var(--space-8);
}

.topic-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-6);
}

.topic-card {
	display: block;
	padding: var(--space-8);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	color: var(--color-text);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
	will-change: transform;
}

.topic-card:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, .10);
	transform: translateY(-2px);
	color: var(--color-text);
}

.topic-card__title {
	font-size: var(--text-xl);
	margin-block: 0 var(--space-3);
	color: var(--color-brand-dark);
}

.topic-card__body {
	margin: 0;
	color: var(--color-text-muted);
	line-height: 1.6;
}

.topic-card__img {
	display: block;
	width: calc(100% + 2 * var(--space-8));
	max-width: unset;
	margin-inline: calc(-1 * var(--space-8));
	margin-block-start: calc(-1 * var(--space-8));
	margin-block-end: var(--space-5);
	height: 160px;
	object-fit: cover;
	border-radius: 7px 7px 0 0;
	transition: transform 0.2s ease;
	will-change: transform;
}

.topic-card:hover .topic-card__img {
	transform: scale(1.03);
}

/* --- Search --- */
.home-search {
	padding-block: var(--space-12);
}

.home-search__inner {
	max-width: 600px;
	margin-inline: auto;
	padding-inline: var(--site-padding-x);
	text-align: center;
}

.home-search__label {
	font-size: var(--text-lg);
	color: var(--color-text-muted);
	margin-block: 0 var(--space-4);
}

.home-search .search-form {
	justify-content: center;
}

/* --- Email Magnet CTA --- */
.home-cta {
	padding-block: var(--space-16);
	background-color: var(--color-brand-dark);
	color: #fff;
}

.home-cta__inner {
	max-width: 840px;
	margin-inline: auto;
	padding-inline: var(--site-padding-x);
	text-align: center;
}

.home-cta__title {
	font-size: var(--text-2xl);
	color: #fff;
	margin-block: 0 var(--space-4);
}

.home-cta__body {
	font-size: var(--text-lg);
	color: rgba(255, 255, 255, 0.85);
	margin-block: 0 var(--space-6);
}


/* =============================================================================
   16. Pagination
   ============================================================================= */

.page-links,
.navigation.pagination {
	margin-block: var(--space-8);
}

.navigation.pagination .nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-2);
}

.nav-links a,
.nav-links span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--nav-arrow-bg);
	box-shadow: var(--nav-arrow-shadow);
	font-size: var(--text-sm);
	text-decoration: none;
	color: var(--color-text);
	transition: box-shadow 0.15s, transform 0.15s;
}

.nav-links a:hover {
	box-shadow: var(--nav-arrow-shadow-hover);
	transform: scale(1.06);
}

.nav-links .current {
	background: var(--color-brand);
	color: #fff;
	box-shadow: none;
}

.nav-links .dots {
	background: none;
	box-shadow: none;
	color: var(--color-text-muted);
}


/* =============================================================================
   17. Topic Pages
   ============================================================================= */

/* Page header */
.topic-page__header {
	background: var(--color-surface);
	position: relative;
	border-block-end: 1px solid var(--color-border);
	padding-block: var(--space-12) var(--space-8);
}

.topic-page__header__inner {
	max-width: var(--wide-width);
	margin-inline: auto;
	padding-inline: var(--site-padding-x);
}

.topic-page__title {
	font-size: var(--text-3xl);
	margin-block: 0 var(--space-3);
}

.topic-page__intro {
	font-size: var(--text-lg);
	color: var(--color-text-muted);
	max-width: 60ch;
	margin: 0;
}

/* Topic pages manage their own vertical rhythm */
.topic-page {
	margin-block-start: calc(-1 * var(--space-12)); /* cancel .site-main padding-block */
}
/* body.tag already zeroes .site-main padding — don't double-cancel */
body.tag .topic-page { margin-block-start: 0; }

/* Page body */
.topic-page__body {
	max-width: var(--wide-width);
	margin-inline: auto;
	padding-inline: var(--site-padding-x);
	padding-block: var(--space-12);
}

/* Section */
.topic-section {
	margin-block-end: var(--space-16);
}

.topic-section:last-child {
	margin-block-end: 0;
}

.topic-section__heading {
	font-size: var(--text-xl);
	margin-block: 0 var(--space-6);
	padding-block-end: var(--space-3);
	border-block-end: 2px solid var(--color-border);
}

/* Article grid — 3 columns, wraps naturally */
.article-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}

@media (max-width: 700px) {
	.article-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

/* Article card */
.article-card {
	display: flex;
	flex-direction: column;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var(--color-border);
	background: #ffffff;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
@media (prefers-color-scheme: dark) {
	.article-card { background: var(--color-surface); }
}

.article-card:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, .10);
	transform: translateY(-2px);
}

.article-card__img-link {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.article-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s ease;
}

.article-card:hover .article-card__img {
	transform: scale(1.03);
}

.article-card__body {
	padding: var(--space-4);
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.article-card__title {
	font-family: var(--font-heading);
	font-size: var(--text-base);
	line-height: 1.3;
	margin: 0;
}

.article-card__title a {
	color: var(--color-text);
	text-decoration: none;
}

.article-card__title a:hover {
	color: var(--color-brand);
}

.article-card__excerpt {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.55;
	margin: 0;
}


/* =============================================================================
   Tag / Archive — Post row list
   ============================================================================= */

body.tag .site-main,
body.search .site-main { padding-block: 0; }
body.tag .archive-header,
body.search .archive-header { margin-block-end: 0; }
body.tag .post-row:first-child,
body.category .post-row:first-child,
body.search .post-row:first-child { border-block-start: none; }

/* Category outer wrapper (topic-page__body) provides padding-block-start;
   tag/search have no equivalent wrapper so the row's default padding must stand. */
body.category .post-row:first-child { padding-block-start: 0; }

/* Tighter row padding for tag/search: row default (space-6 each side) creates a
   between-post gap of ~49px — 2× the header-to-first-post gap. Reduce to space-3
   per side so between-row gap (~25px) matches the top gap (space-6 = 24px). */
body.tag .post-row,
body.search .post-row { padding-block: var(--space-3); }
body.tag .post-row:first-child,
body.search .post-row:first-child { padding-block-start: var(--space-6); }

/* Vertical stack of rows */
.post-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Individual row */
.post-row {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: var(--space-6);
	align-items: start;
	padding-block: var(--space-6);
	border-block-end: 1px solid var(--color-border);
}

.post-row:first-child {
	border-block-start: 1px solid var(--color-border);
}

/* Image */
.post-row__img-link {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 4px;
	flex-shrink: 0;
}

.post-row__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s ease;
}

.post-row:hover .post-row__img {
	transform: scale(1.03);
}

/* Body */
.post-row__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.post-row__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.post-row__title {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	line-height: 1.25;
	margin: 0;
}

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

.post-row__title a:hover {
	color: var(--color-brand);
}

.post-row__subtitle {
	font-size: var(--text-base);
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1.3;
}

.post-row__excerpt {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.55;
	margin: 0;
}

.post-row__excerpt p {
	margin: 0;
}

.post-row__meta {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin-block-start: var(--space-1);
}

/* No image: body spans full width */
.post-row.no-thumbnail {
	grid-template-columns: 1fr;
}

/* Responsive: stack on narrow screens */
@media (max-width: 560px) {
	.post-row {
		grid-template-columns: 1fr;
	}

	.post-row__img-link {
		aspect-ratio: 16 / 9;
	}
}


/* =============================================================================
   18. Start Here Page
   ============================================================================= */

/* Remove site-main padding — each section manages its own */
body.page-id-1740 .site-main { padding-block: 0; }
body.page-id-1740 .site-footer { margin-block-start: 0; }

/* --- Narrative content wrapper --- */
.start-here-body {
	padding-block: var(--space-12);
}

/* --- Voice-of-reader pain-point quotes --- */
.voice-quotes {
	background: var(--color-surface);
	border-radius: 8px;
	padding: var(--space-2) var(--space-8);
	margin-block: var(--space-6);
}

.voice-quote {
	margin: 0;
	padding: var(--space-5, var(--space-4)) 0;
	border-inline-start: none;
	padding-inline-start: 0;
	color: var(--color-text-muted);
}

.voice-quote + .voice-quote {
	border-top: 1px solid var(--color-border);
}

.voice-quote p {
	margin: 0;
	font-size: var(--text-base);
}

/* --- Popular Posts section --- */
.start-here-popular {
	background: var(--color-surface);
	border-block: 1px solid var(--color-border);
	padding-block: var(--space-12);
}

.start-here-popular__inner {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--site-padding-x);
}

.start-here-popular__header {
	margin-block-end: var(--space-10, var(--space-8));
}

.start-here-popular__header h2 {
	margin-block-start: 0;
	margin-block-end: var(--space-2);
}

.start-here-popular__header p {
	color: var(--color-text-muted);
	margin: 0;
}

.popular-category {
	margin-block-end: var(--space-10, var(--space-8));
}

.popular-category:last-of-type {
	margin-block-end: 0;
}

.popular-category__label {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-block: 0 var(--space-4);
}

.start-here-popular__footer {
	margin-block-start: var(--space-8);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-block-end: 0;
}

/* --- Testimonials section --- */
.start-here-testimonials {
	padding-block: var(--space-12);
}

.start-here-testimonials h2 {
	margin-block-start: 0;
}

/* --- CTA section --- */
.start-here-cta {
	background-color: var(--color-brand-dark);
	color: #fff;
	padding-block: var(--space-16);
	text-align: center;
}

.start-here-cta__inner {
	max-width: 840px;
	margin-inline: auto;
	padding-inline: var(--site-padding-x);
}

.start-here-cta__title {
	font-size: var(--text-2xl);
	color: #fff;
	margin-block: 0 var(--space-4);
}

.start-here-cta__body {
	font-size: var(--text-lg);
	color: rgba(255, 255, 255, 0.85);
	margin-block: 0 var(--space-6);
}



/* =============================================================================
   20. About Page
   ============================================================================= */

body.page-id-49 .site-main { padding-block: 0; }

.about-intro {
	display: grid;
	grid-template-columns: 1fr 180px;
	column-gap: var(--space-10);
	align-items: start;
	padding-block: var(--space-12);
}

.about-photo {
	grid-column: 2;
	grid-row: 1 / 3;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	object-fit: cover;
}

.about-intro p {
	grid-column: 1;
	margin-block: 0 var(--space-4);
}

.about-intro p:last-child { margin-block-end: 0; }

.about-body {
	padding-block-end: var(--space-12);
}

.about-body h2:first-child { margin-block-start: 0; }

@media (max-width: 600px) {
	.about-intro {
		grid-template-columns: 1fr;
	}
	.about-photo {
		grid-column: 1;
		grid-row: 1;
		width: 120px;
		height: 120px;
		margin-block-end: var(--space-6);
	}
}


/* =============================================================================
   19. Testimonial Cards
   ============================================================================= */

.testimonial-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-6);
	margin-block: var(--space-8);
}

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

.testimonial-card {
	position: relative;
	margin: 0;
	padding: var(--space-8);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
}

/* Large decorative opening quote mark */
.testimonial-card::before {
	content: '\201C';
	position: absolute;
	top: var(--space-4);
	left: var(--space-6);
	font-family: var(--font-heading);
	font-size: 4rem;
	line-height: 1;
	color: var(--color-brand-light);
	pointer-events: none;
	user-select: none;
}

.testimonial-card blockquote {
	margin: 0;
	padding: 0;
	border: none;
	padding-block-start: var(--space-8); /* clear the quote mark */
}

.testimonial-card blockquote p {
	margin: 0;
	font-family: var(--font-heading);
	font-style: italic;
	font-size: var(--text-base);
	line-height: 1.65;
	color: var(--color-text);
}


/* =============================================================================
   21. Blog Page
   ============================================================================= */

body.page-blog .site-main { padding-block: 0; }

/* Category sections */
.blog-section {
	border-block-start: 1px solid var(--color-border);
	padding-block: var(--space-12);
}

.blog-section:first-of-type { border-block-start: none; }

.blog-section__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	margin-block-end: var(--space-6);
}

.blog-section__title { margin: 0; }

.blog-section__all {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}

.blog-section__all:hover { color: var(--color-brand); }

/* Browse by Topic */
.blog-topics {
	background: var(--color-surface);
	border-block: 1px solid var(--color-border);
	padding-block: var(--space-12);
}

.blog-topics__title {
	margin-block-start: 0;
	margin-block-end: var(--space-6);
}

.tag-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-2);
	margin-block-end: var(--space-8);
}

.tag-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-3);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 100px;
	font-size: var(--text-sm);
	color: var(--color-text);
	text-decoration: none;
	transition: border-color 0.15s, color 0.15s;
}

.tag-pill:hover {
	border-color: var(--color-brand);
	color: var(--color-brand);
}

.tag-pill__count {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.tag-pill--more {
	appearance: none;
	background: var(--color-bg);
	cursor: pointer;
	font: inherit;
}

.tag-pill--more svg {
	transition: transform 0.2s ease;
}

.tag-pill--more[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.tag-pills--overflow {
	margin-block-start: calc(-1 * var(--space-6));
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.tag-pills--overflow.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.blog-topics__footer {
	font-size: var(--text-sm);
	margin: 0;
}

body.page-blog .site-footer { margin-block-start: 0; }


/* =============================================================================
   22. Archives Page
   ============================================================================= */

body.page-archives .site-main { padding-block: 0; }
body.page-archives .site-footer { margin-block-start: 0; }

/* Search bar — white section between hero and topic pills */
.archives-search {
	padding-block: var(--space-8);
	border-block-end: 1px solid var(--color-border);
}

.archives-search__input {
	width: 100%;
	max-width: 480px;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	font-size: var(--text-base);
	font-family: var(--font-body);
	background: var(--color-bg);
	color: var(--color-text);
}

.archives-search__input:focus {
	outline: none;
	border-color: var(--color-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 15%, transparent);
}

.archives-search__count {
	margin-block-start: var(--space-2);
	margin-block-end: 0;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* Browse by Topic */
.archives-topics {
	background: var(--color-surface);
	border-block: 1px solid var(--color-border);
	padding-block: var(--space-10);
}

.archives-topics__title {
	margin-block-start: 0;
	margin-block-end: var(--space-6);
	font-size: var(--text-xl);
}

/* Post index */
.archives-index {
	padding-block: var(--space-12);
}

.archive-year {
	display: grid;
	grid-template-columns: 80px 1fr;
	column-gap: var(--space-10);
	margin-block-end: var(--space-10);
}

.archive-year:last-child { margin-block-end: 0; }

.archive-year__heading {
	font-size: var(--text-2xl);
	color: var(--color-text-muted);
	font-weight: 400;
	margin: 0;
	padding-block-start: 0.15em; /* optical alignment with first list item */
}

.archive-post-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.archive-post-item {
	display: grid;
	grid-template-columns: 52px 1fr auto;
	align-items: baseline;
	column-gap: var(--space-4);
	padding-block: var(--space-2);
	border-block-end: 1px solid var(--color-border);
}

.archive-post-item:last-child { border-block-end: none; }

.archive-post-item__date {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	white-space: nowrap;
}

.archive-post-item__title {
	color: var(--color-text);
	text-decoration: none;
	line-height: 1.4;
}

.archive-post-item__title:hover { color: var(--color-brand); }

.archive-post-item__cat {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
}

.archives-no-results {
	color: var(--color-text-muted);
	font-style: italic;
	padding-block: var(--space-8);
}

/* =============================================================================
   23. Email Form
   ============================================================================= */

.email-form {
	width: 100%;
}

/* --- Dark context (navy CTA sections) --- */
.email-form--dark .email-form__heading {
	font-size: var(--text-2xl);
	color: #fff;
	margin-block: 0 var(--space-4);
}

.email-form--dark .email-form__body {
	font-size: var(--text-lg);
	color: rgba(255, 255, 255, 0.85);
	margin-block: 0 var(--space-6);
}

.email-form--dark .email-form__input {
	background: #fff;
	color: var(--color-text);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.email-form--dark .email-form__btn {
	background: #fff;
	color: var(--color-brand-dark);
}

.email-form--dark .email-form__btn:hover {
	opacity: 0.88;
}

.email-form--dark .email-form__status {
	color: rgba(255, 255, 255, 0.85);
}

/* --- Light context (cream / single post) --- */
.email-form--light .email-form__heading {
	font-size: var(--text-xl);
	color: var(--color-brand-dark);
	margin-block: 0 var(--space-3);
}

.email-form--light .email-form__body {
	font-size: var(--text-base);
	color: var(--color-text-muted);
	margin-block: 0 var(--space-6);
}

.email-form--light .email-form__input {
	background: var(--color-bg);
	color: var(--color-text);
	border: 1px solid var(--color-border);
}

.email-form--light .email-form__btn {
	background: var(--color-brand);
	color: #fff;
}

.email-form--light .email-form__btn:hover {
	background: var(--color-brand-dark);
}

.email-form--light .email-form__status {
	color: var(--color-text-muted);
}

/* --- Shared form elements --- */
.email-form__input--name {
	width: 100%;
	margin-block-end: var(--space-3);
}

.email-form__row {
	display: flex;
	gap: var(--space-3);
}

.email-form__input {
	flex: 1;
	min-width: 0;
	padding: var(--space-3) var(--space-4);
	border-radius: 4px;
	font-size: var(--text-base);
	font-family: var(--font-body);
	outline: none;
}

.email-form__input:focus {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 20%, transparent);
}

.email-form__btn {
	flex-shrink: 0;
	padding: var(--space-3) var(--space-6);
	border: none;
	border-radius: 4px;
	font-size: var(--text-base);
	font-family: var(--font-body);
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s, background 0.15s;
}

.email-form__btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.email-form__status {
	margin-block: var(--space-3) 0;
	font-size: var(--text-sm);
}

.email-form--success .email-form__status {
	font-style: italic;
}

@media (min-width: 768px) {
	.email-form__form {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		gap: var(--space-3);
	}

	.email-form__input--name {
		flex: 1;
		width: auto;
		min-width: 0;
		margin-block-end: 0;
	}

	.email-form__row {
		flex: 2;
		min-width: 0;
	}

	.email-form__status {
		flex-basis: 100%;
		margin-block-start: 0;
	}
}

@media (max-width: 520px) {
	.email-form__row {
		flex-direction: column;
	}

	.email-form__btn {
		width: 100%;
	}
}


/* Ensure [hidden] works on block/grid elements */
[hidden] { display: none !important; }

@media (max-width: 600px) {
	.archive-year {
		grid-template-columns: 1fr;
	}
	.archive-year__heading {
		font-size: var(--text-xl);
		margin-block-end: var(--space-3);
	}
	.archive-post-item {
		grid-template-columns: 48px 1fr;
	}
	.archive-post-item__cat { display: none; }
}