/* =========================================================================
   Loose Ends — main stylesheet
   A calm, editorial design system. See theme.json for the block-editor
   side of the same palette/typography tokens.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root {
	--background: #F8F7F4;
	--surface: #FFFFFF;
	--text-primary: #181818;
	--text-secondary: #666666;
	--border: #E8E6E1;
	--dark: #111111;
	--accent: #31493C;
	--quote-bg: #F1EFEA;

	--font-heading: "Cormorant Garamond", Georgia, serif;
	--font-body: "Inter", Arial, sans-serif;

	--content-width: 860px;
	--wide-width: 1200px;
	--page-pad: clamp(1.25rem, 4vw, 4rem);
	--section-pad: clamp(5rem, 10vw, 9rem);

	--ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* -------------------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--background);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 400;
	margin: 0 0 0.5em;
}

p {
	margin: 0 0 1em;
}

button,
input,
textarea,
select {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

.site-main {
	overflow-x: clip;
}

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

/* -------------------------------------------------------------------------
   3. Accessibility helpers
   ------------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: fixed;
	top: -100px;
	left: 1rem;
	z-index: 10000;
	background: var(--dark);
	color: #fff;
	padding: 0.75em 1.25em;
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	transition: top 0.2s var(--ease);
	border-radius: 2px;
}

.skip-link:focus {
	top: 1rem;
	width: auto;
	height: auto;
	clip: auto;
	overflow: visible;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   4. Layout primitives
   ------------------------------------------------------------------------- */
.section {
	padding-top: var(--section-pad);
	padding-bottom: var(--section-pad);
	padding-left: var(--page-pad);
	padding-right: var(--page-pad);
}

.content-area,
.page-header,
.about-page__header,
.section__header,
.post-grid,
.about-newsletter__grid {
	max-width: var(--wide-width);
	margin-left: auto;
	margin-right: auto;
}

.content-area {
	padding-left: var(--page-pad);
	padding-right: var(--page-pad);
	padding-bottom: var(--section-pad);
}

.eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-secondary);
}

.eyebrow--link:hover {
	color: var(--accent);
}

.section-title {
	font-size: clamp(2rem, 3vw, 3.25rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.section-title--small {
	font-size: clamp(1.5rem, 2.4vw, 2.25rem);
	margin-bottom: 2rem;
}

.article-title {
	font-size: clamp(2.5rem, 5vw, 5rem);
	line-height: 1;
	letter-spacing: -0.025em;
}

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.text-link svg {
	transition: transform 0.25s var(--ease);
}

.text-link:hover {
	color: var(--accent);
	border-color: currentColor;
}

.text-link:hover svg {
	transform: translateX(3px);
}

/* -------------------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--text-primary);
	background: transparent;
	color: var(--text-primary);
	padding: 14px 28px;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 2px;
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.btn:hover {
	background: var(--text-primary);
	color: var(--surface);
}

.btn--on-dark,
.btn--dark {
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
	background: transparent;
}

.btn--on-dark:hover,
.btn--dark:hover {
	background: #fff;
	color: var(--dark);
	border-color: #fff;
}

/* Buttons block (core/button): .btn's className lands on the outer wrapper
   div, while WordPress's own "Outline" block style additionally borders
   the inner .wp-block-button__link — the two combined drew a visible
   double line. Strip the wrapper's box entirely and let the inner link
   carry the one, single border. !important only on the properties that
   actually caused the double line, to reliably beat core's own
   is-style-outline rule regardless of stylesheet load order. */
.wp-block-button.btn,
.wp-block-button.btn--on-dark {
	border: none;
	background: none;
	padding: 0;
}

.wp-block-button.btn--on-dark.is-style-outline .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.5) !important;
	background: transparent !important;
	color: #fff;
	padding: 14px 28px;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 2px;
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.wp-block-button.btn--on-dark.is-style-outline .wp-block-button__link:hover {
	background: #fff !important;
	color: var(--dark) !important;
	border-color: #fff !important;
}

/* -------------------------------------------------------------------------
   6. Header
   ------------------------------------------------------------------------- */
.site-header {
	position: relative;
	z-index: 100;
	background: var(--background);
	color: var(--text-primary);
	border-bottom: 1px solid var(--border);
}

.site-header--on-dark {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	transition: background-color 0.3s var(--ease);
}

.site-header--on-dark.site-header--solid {
	position: fixed;
	background: rgba(17, 17, 17, 0.92);
	backdrop-filter: blur(6px);
}

.site-header__inner {
	max-width: var(--wide-width);
	margin: 0 auto;
	min-height: 80px;
	padding: 0 var(--page-pad);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.site-header__wordmark {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	letter-spacing: -0.01em;
}

.custom-logo-link img {
	max-height: 44px;
	width: auto;
}

.site-header__nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.primary-menu {
	display: flex;
	gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

.primary-menu a {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding-bottom: 4px;
	border-bottom: 1px solid transparent;
	transition: border-color 0.25s var(--ease), opacity 0.25s var(--ease);
}

.primary-menu a:hover,
.primary-menu .current-menu-item > a {
	border-color: currentColor;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.search-toggle,
.menu-toggle {
	background: none;
	border: none;
	color: inherit;
	display: inline-flex;
	padding: 0.25rem;
}

.menu-toggle {
	display: none;
}

/* Inline search panel */
.site-search {
	border-top: 1px solid var(--border);
	background: var(--surface);
	color: var(--text-primary);
}

.site-header--on-dark .site-search {
	border-top-color: rgba(255, 255, 255, 0.12);
	background: var(--dark);
	color: #fff;
}

.site-search__form {
	max-width: var(--wide-width);
	margin: 0 auto;
	padding: 1.25rem var(--page-pad);
	display: flex;
	align-items: center;
	gap: 1rem;
}

.site-search__input {
	flex: 1;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--border);
	padding: 0.5em 0;
	font-family: var(--font-heading);
	font-size: 1.5rem;
}

.site-header--on-dark .site-search__input {
	border-bottom-color: rgba(255, 255, 255, 0.3);
}

.site-search__input:focus {
	outline: none;
	border-bottom-color: var(--accent);
}

.site-search__submit,
.site-search__close {
	background: none;
	border: none;
	color: inherit;
	display: inline-flex;
}

/* -------------------------------------------------------------------------
   7. Hero — a Cover block (see inc/patterns.php). Cover supplies its own
   flat dim overlay; the extra ::after adds the left-heavy readability
   fade from the brief on top of whatever photo is set.
   ------------------------------------------------------------------------- */
.wp-block-cover.hero {
	min-height: 680px;
	color: #fff;
	overflow: hidden;
}

/* Extra height + negative offset gives the parallax script (main.js) room
   to translate the image without ever revealing blank space at the edges —
   the JS clamps its movement to well within this buffer. */
.wp-block-cover.hero .wp-block-cover__image-background,
.wp-block-cover.hero > img {
	height: 130% !important;
	top: -15% !important;
	transition: none;
}

.wp-block-cover.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.55) 0%,
		rgba(0, 0, 0, 0.25) 45%,
		rgba(0, 0, 0, 0) 100%
	);
}

.wp-block-cover.hero .wp-block-cover__inner-container {
	max-width: var(--wide-width);
	width: 100%;
	margin: 0 auto;
	padding: clamp(6rem, 14vw, 10rem) var(--page-pad) clamp(3rem, 6vw, 5rem);
}

.hero__title {
	font-size: clamp(3.5rem, 7vw, 7rem);
	line-height: 0.92;
	letter-spacing: -0.035em;
	margin-bottom: 0.5em;
	color: #fff;
}

.hero__subtext {
	max-width: 32ch;
	font-size: 1.125rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 2em;
}

/* -------------------------------------------------------------------------
   8. Recent thoughts / post grid
   ------------------------------------------------------------------------- */
.section__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
	padding-left: var(--page-pad);
	padding-right: var(--page-pad);
}

.recent-thoughts {
	padding-top: var(--section-pad);
	padding-bottom: var(--section-pad);
}

.post-grid {
	padding-left: var(--page-pad);
	padding-right: var(--page-pad);
}

.post-grid:not(.wp-block-query) {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem 2.5rem;
}

/* The homepage grid is a live Query Loop block (see inc/patterns.php):
   .wp-block-post-template is the <ul>, .wp-block-post each <li>. */
.post-grid.wp-block-query .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem 2.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.post-grid.wp-block-query .wp-block-post {
	margin: 0;
}

.post-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--border);
	margin-bottom: 1.25rem;
}

.post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease);
}

.post-card:hover .post-card__media img,
.wp-block-post:hover .post-card__media img {
	transform: scale(1.02);
}

.post-card__media-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--border), var(--background));
}

.post-card__title {
	font-size: 1.5rem;
	line-height: 1.2;
	margin: 0.75rem 0 0.5rem;
}

.post-card__title a {
	transition: color 0.25s var(--ease);
}

.post-card__title a:hover {
	color: var(--accent);
}

.post-card__excerpt {
	color: var(--text-secondary);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 0.75rem;
}

.post-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.post-card__link svg {
	transition: transform 0.25s var(--ease);
}

.post-card__link:hover {
	color: var(--accent);
}

.post-card__link:hover svg {
	transform: translateX(3px);
}

/* Read More block (Query Loop version) has no icon — add a CSS arrow instead. */
.post-card__link--block::after {
	content: "→";
	margin-left: 0.4em;
	display: inline-block;
	transition: transform 0.25s var(--ease);
}

.post-card__link--block:hover::after {
	transform: translateX(3px);
}

/* Article meta line (category · date · reading time) */
.article-meta {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-secondary);
}

/* Block version (Group of post-terms + post-date) has no manual divider
   spans — add one via CSS instead. */
.wp-block-group.article-meta > * + *::before {
	content: "·";
	margin-right: 0.5em;
	opacity: 0.5;
}

.article-meta .wp-block-post-terms,
.article-meta .wp-block-post-terms a {
	color: var(--accent);
}

.article-meta__category {
	color: var(--accent);
	transition: opacity 0.25s var(--ease);
}

.article-meta__category:hover {
	opacity: 0.7;
}

.article-meta__divider {
	opacity: 0.5;
}

.article-meta--large {
	font-size: 0.8125rem;
	margin-top: 1rem;
	color: var(--text-secondary);
}

/* -------------------------------------------------------------------------
   9. Statement (dark quote) section
   ------------------------------------------------------------------------- */
.statement {
	background: var(--dark);
	color: #fff;
	padding: var(--section-pad) var(--page-pad);
	text-align: center;
}

.statement__mark,
.statement__text,
.statement__attribution {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.statement__mark {
	display: block;
	font-family: var(--font-heading);
	font-size: 4rem;
	line-height: 1;
	color: var(--accent);
	opacity: 0.9;
	margin-bottom: 0.25em;
}

.statement__text {
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	line-height: 1.3;
	margin-bottom: 1.5em;
}

/* Each typed-in character (main.js) starts blurred and fades/sharpens into
   place instead of snapping in instantly, giving the reveal a softer,
   smoother feel. */
.statement__text .char {
	/* inline, not inline-block: inline-block would make every character its
	   own "atomic" box, letting the browser wrap the line between any two
	   letters (mid-word) instead of only at real word spaces. No
	   white-space override either — "pre" preserves spaces but also
	   disables wrapping at them, which was the actual cause here; a plain
	   space in a normal inline span already renders and wraps correctly. */
	display: inline;
	filter: blur(6px);
	opacity: 0;
	transition: filter 0.35s ease-out, opacity 0.35s ease-out;
}

.statement__text .char.is-visible {
	filter: blur(0);
	opacity: 1;
}

/* Blinking caret while the type-on-scroll effect (main.js) is running. */
.statement__text.is-typing::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 0.9em;
	margin-left: 3px;
	background: currentColor;
	vertical-align: text-bottom;
	animation: loose-ends-caret-blink 1s step-end infinite;
}

@keyframes loose-ends-caret-blink {
	50% {
		opacity: 0;
	}
}

.statement__attribution {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.statement__attribution::before {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	background: rgba(255, 255, 255, 0.3);
	margin: 0 auto 1.5em;
}

/* -------------------------------------------------------------------------
   10. About preview + newsletter — a Columns block (see inc/patterns.php).
   Selectors below are qualified with the block's own class to guarantee
   they win over core block-library layout defaults regardless of enqueue
   order.
   ------------------------------------------------------------------------- */
.wp-block-columns.about-newsletter__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(3rem, 6vw, 6rem);
	align-items: center;
}

.wp-block-column.about-preview {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 2rem;
	align-items: center;
}

.about-preview__media {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--border);
	margin: 0 auto;
}

.about-preview__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-preview__heading {
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	line-height: 1.15;
	margin: 0.5em 0 0.5em;
}

.about-preview__text {
	color: var(--text-secondary);
	margin-bottom: 1.25em;
}

.wp-block-group.newsletter-panel {
	background: var(--surface);
	border: 1px solid var(--border);
	padding: clamp(1.75rem, 3vw, 2.5rem);
}

.newsletter-panel__label {
	display: block;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-secondary);
	margin-bottom: 0.75em;
}

.newsletter-panel__text {
	margin-bottom: 1.5em;
}

.newsletter-panel__form {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* Fixes an existing page's Subscribe button if it still has the old
   "btn btn--dark" classes from before — that variant is white-on-white
   against this panel's light background. Overrides it back to the
   correct dark-on-light look without needing to hand-edit the HTML block. */
.newsletter-panel__form .btn--dark {
	border-color: var(--text-primary);
	color: var(--text-primary);
	background: transparent;
}

.newsletter-panel__form .btn--dark:hover {
	background: var(--text-primary);
	color: var(--surface);
}

.newsletter-panel__input {
	flex: 1;
	min-width: 180px;
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: 2px;
	padding: 14px 16px;
	font-size: 0.9375rem;
}

.newsletter-panel__input:focus {
	outline: none;
	border-color: var(--accent);
}

/* -------------------------------------------------------------------------
   11. Footer
   ------------------------------------------------------------------------- */
.site-footer {
	background: var(--dark);
	color: rgba(255, 255, 255, 0.75);
}

.site-footer__inner {
	max-width: var(--wide-width);
	margin: 0 auto;
	padding: var(--section-pad) var(--page-pad) clamp(2rem, 4vw, 3rem);
}

.site-footer__top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: clamp(2.5rem, 6vw, 5rem);
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__wordmark {
	display: inline-block;
	font-family: var(--font-heading);
	font-size: 1.75rem;
	color: #fff;
	margin-bottom: 0.5em;
}

.site-footer__strapline {
	max-width: 30ch;
	margin-bottom: 1.5em;
}

.site-footer__social {
	display: flex;
	gap: 1rem;
}

.site-footer__social a {
	display: inline-flex;
	color: #fff;
	opacity: 0.85;
	transition: opacity 0.25s var(--ease);
}

.site-footer__social a:hover {
	opacity: 1;
	color: var(--accent);
}

.site-footer__nav-title {
	display: block;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 1.25em;
}

.site-footer__nav-list {
	display: flex;
	flex-direction: column;
	gap: 0.85em;
}

.site-footer__nav-list a {
	transition: opacity 0.25s var(--ease);
}

.site-footer__nav-list a:hover {
	opacity: 0.7;
}

.site-footer__bottom {
	padding-top: clamp(1.5rem, 3vw, 2rem);
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.5);
}

/* -------------------------------------------------------------------------
   12. Page header (Archive / generic)
   ------------------------------------------------------------------------- */
.page-header {
	padding: clamp(4rem, 8vw, 7rem) var(--page-pad) clamp(2rem, 4vw, 3rem);
}

.page-header .page-title {
	font-size: clamp(2.5rem, 5vw, 5rem);
	line-height: 1;
	letter-spacing: -0.025em;
}

.page-header__intro {
	max-width: 60ch;
	color: var(--text-secondary);
	font-size: 1.125rem;
	margin-top: 0.5em;
}

.page-title em {
	font-style: italic;
	color: var(--accent);
}

/* -------------------------------------------------------------------------
   13. Archive controls (category filters + search)
   ------------------------------------------------------------------------- */
.archive-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
	border-bottom: 1px solid var(--border);
}

.category-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
}

.category-filters__item {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-secondary);
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.category-filters__item:hover {
	color: var(--text-primary);
}

.category-filters__item.is-active {
	color: var(--accent);
	border-color: var(--accent);
}

.archive-controls__search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-bottom: 1px solid var(--border);
	min-width: 220px;
}

.archive-controls__search input {
	flex: 1;
	border: none;
	background: transparent;
	padding: 0.6em 0;
	font-size: 0.9375rem;
}

.archive-controls__search input:focus {
	outline: none;
}

.archive-controls__search button {
	background: none;
	border: none;
	color: var(--text-secondary);
	display: inline-flex;
}

.archive-controls__search:focus-within {
	border-color: var(--accent);
}

/* -------------------------------------------------------------------------
   14. Pagination
   ------------------------------------------------------------------------- */
.pagination,
.navigation.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	margin-top: clamp(3rem, 6vw, 5rem);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.pagination .page-numbers {
	padding: 0.5em 0.75em;
	color: var(--text-secondary);
}

.pagination .page-numbers.current {
	color: var(--text-primary);
	border-bottom: 1px solid var(--accent);
}

.pagination a.page-numbers:hover {
	color: var(--accent);
}

/* -------------------------------------------------------------------------
   15. No results
   ------------------------------------------------------------------------- */
.no-results {
	text-align: center;
	padding: clamp(3rem, 6vw, 5rem) 1rem;
	color: var(--text-secondary);
}

.no-results .btn {
	margin-top: 1.5rem;
}

/* -------------------------------------------------------------------------
   16. Single article
   ------------------------------------------------------------------------- */
.single-article__header,
.contact-page__header {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: clamp(4rem, 8vw, 7rem) var(--page-pad) 2rem;
	text-align: left;
}

/* About's title uses the exact same width + padding as the Archive page's
   .page-header (see section 12), so those two share the same position. */
.about-page__header {
	padding: clamp(4rem, 8vw, 7rem) var(--page-pad) clamp(2rem, 4vw, 3rem);
	text-align: left;
}

.single-article__header .eyebrow {
	margin-bottom: 1em;
}

/* Generic Pages (page.php — Terms, Privacy, or any page without a
   dedicated template) reuse .single-article__header above for the title,
   so it lines up with the body below it instead of the Archive's wider
   .page-header. This gives that content proper breathing room before the
   footer, since — unlike single posts — there's no post-nav/related-posts
   section between it and the footer to provide that spacing already. */
.single-page {
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.single-article__featured-image {
	max-width: var(--wide-width);
	margin: 2rem auto clamp(3rem, 6vw, 4rem);
	padding: 0 var(--page-pad);
}

.single-article__featured-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.single-article__featured-image figcaption {
	margin-top: 0.75rem;
	font-size: 0.8125rem;
	color: var(--text-secondary);
	text-align: center;
}

.article-body,
.single-article__body {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 var(--page-pad);
	font-size: 1.125rem;
	line-height: 1.8;
}

.article-body h2 {
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	margin-top: 1.75em;
	letter-spacing: -0.015em;
}

.article-body h3 {
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	margin-top: 1.5em;
}

.article-body p {
	margin-bottom: 1.4em;
}

.article-body ul,
.article-body ol {
	margin: 0 0 1.4em;
	padding-left: 1.4em;
}

.article-body ul {
	list-style: disc;
}

.article-body ol {
	list-style: decimal;
}

.article-body li {
	margin-bottom: 0.5em;
}

.article-body a {
	text-decoration: underline;
	text-decoration-color: var(--border);
	text-underline-offset: 3px;
	transition: text-decoration-color 0.25s var(--ease), color 0.25s var(--ease);
}

.article-body a:hover {
	color: var(--accent);
	text-decoration-color: var(--accent);
}

.article-body img {
	margin: 0 auto;
}

.article-body figure {
	margin: 2em 0;
}

.article-body figcaption {
	font-size: 0.875rem;
	color: var(--text-secondary);
	margin-top: 0.75em;
	text-align: center;
}

.article-body blockquote,
.wp-block-quote {
	border-left: 4px solid var(--accent);
	background: var(--quote-bg);
	padding: 1.5rem 2rem;
	margin: 2em 0;
	font-family: var(--font-heading);
	font-size: 1.5rem;
	line-height: 1.5;
}

.article-body blockquote p:last-child,
.wp-block-quote p:last-child {
	margin-bottom: 0;
}

.article-body blockquote cite,
.wp-block-quote cite {
	display: block;
	margin-top: 0.75em;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-style: normal;
	color: var(--text-secondary);
}

.wp-block-pullquote {
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	padding: 2em 0;
	margin: 2.5em 0;
	text-align: center;
}

.wp-block-pullquote p {
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.3;
}

.article-body .alignwide {
	max-width: var(--wide-width);
	margin-left: calc(50% - 50vw + (100vw - var(--wide-width)) / 2);
	margin-left: calc(50% - var(--wide-width) / 2);
	width: var(--wide-width);
	max-width: calc(100vw - 2 * var(--page-pad));
}

.article-body .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* Heading hierarchy beyond h2/h3, plus an anchor-jump offset so a linked
   heading (e.g. #recent-thoughts) doesn't end up hidden behind a sticky
   header. */
.article-body h4 {
	font-size: 1.25rem;
	margin-top: 1.5em;
}

.article-body h5,
.article-body h6 {
	font-size: 1.0625rem;
	margin-top: 1.5em;
	letter-spacing: 0.02em;
}

.article-body h2,
.article-body h3,
.article-body h4 {
	scroll-margin-top: 100px;
}

.article-body strong,
.article-body b {
	font-weight: 600;
}

.article-body mark {
	background: var(--quote-bg);
	color: inherit;
	padding: 0.1em 0.3em;
	border-radius: 2px;
}

.article-body code,
.article-body kbd {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 0.875em;
	background: var(--quote-bg);
	padding: 0.15em 0.4em;
	border-radius: 2px;
}

.article-body kbd {
	border: 1px solid var(--border);
}

/* Code / preformatted blocks — dark, matching the site's other dark
   sections, with horizontal scroll rather than wrapping/breaking layout. */
.article-body pre,
.article-body .wp-block-code,
.article-body .wp-block-preformatted {
	background: var(--dark);
	color: #fff;
	padding: 1.5rem;
	margin: 2em 0;
	border-radius: 2px;
	overflow-x: auto;
	font-size: 0.9375rem;
	line-height: 1.6;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.article-body pre code,
.article-body .wp-block-code code {
	background: none;
	padding: 0;
	color: inherit;
	font-size: inherit;
}

/* Tables — wrapped so a wide table scrolls horizontally within itself
   rather than breaking the page layout on mobile (WordPress doesn't do
   this by default). */
.article-body .wp-block-table {
	margin: 2em 0;
	overflow-x: auto;
}

.article-body .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}

.article-body .wp-block-table th,
.article-body .wp-block-table td {
	padding: 0.75em 1em;
	border-bottom: 1px solid var(--border);
	text-align: left;
}

.article-body .wp-block-table th {
	font-weight: 500;
	letter-spacing: 0.02em;
}

.article-body .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: var(--quote-bg);
}

.article-body hr,
.article-body .wp-block-separator {
	margin: 3em auto;
	border: none;
	border-top: 1px solid var(--border);
}

.article-body .wp-block-separator.is-style-dots {
	border-top: none;
	text-align: center;
	line-height: 1;
	height: auto;
	letter-spacing: 0.5em;
	color: var(--text-secondary);
}

.article-body .wp-block-gallery {
	margin: 2em 0;
}

.article-body .wp-block-gallery figcaption {
	margin-top: 0.5em;
}

/* Embeds — video, social posts, etc. Keeps a consistent 16:9 box for
   video-type embeds so the page doesn't jump once the iframe loads. */
.article-body .wp-block-embed {
	margin: 2em 0;
}

.article-body .wp-block-embed__wrapper {
	position: relative;
}

.article-body .wp-block-embed.is-type-video .wp-block-embed__wrapper {
	aspect-ratio: 16 / 9;
}

.article-body .wp-block-embed.is-type-video iframe {
	width: 100%;
	height: 100%;
}

.article-body .wp-block-embed figcaption {
	margin-top: 0.75em;
}

.article-body dl {
	margin: 0 0 1.4em;
}

.article-body dt {
	font-weight: 500;
}

.article-body dd {
	margin: 0 0 1em;
	color: var(--text-secondary);
}

/* Drop cap — a small, tasteful nod to print/editorial typesetting,
   available directly from the paragraph block's own toolbar. */
.article-body p.has-drop-cap:first-letter {
	float: left;
	font-family: var(--font-heading);
	font-size: 4.5rem;
	line-height: 0.85;
	padding: 0.05em 0.1em 0 0;
	color: var(--accent);
}

.article-body .wp-block-details {
	margin: 2em 0;
	border: 1px solid var(--border);
	padding: 1.25rem 1.5rem;
	border-radius: 2px;
}

.article-body .wp-block-details summary {
	cursor: pointer;
	font-weight: 500;
}

/* Columns/Buttons/Audio/File used directly within article content (not
   just the homepage patterns) get sensible default spacing. */
.article-body .wp-block-columns {
	margin: 2em 0;
	gap: 2rem;
}

.article-body .wp-block-buttons {
	margin: 1.5em 0;
}

.article-body .wp-block-audio,
.article-body .wp-block-file {
	margin: 2em 0;
}

.single-article__footer {
	max-width: var(--content-width);
	margin: clamp(2.5rem, 5vw, 4rem) auto 0;
	padding: 2rem var(--page-pad) 0;
	border-top: 1px solid var(--border);
}

.single-article__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 1.75rem;
}

.term-pill {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.5em 1em;
	border: 1px solid var(--border);
	border-radius: 2px;
	transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.term-pill:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.term-pill--tag {
	text-transform: none;
	letter-spacing: 0.02em;
}

.share-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.share-links a,
.share-links button {
	background: none;
	border: none;
	padding: 0;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-secondary);
	transition: color 0.25s var(--ease);
}

.share-links a:hover,
.share-links button:hover {
	color: var(--accent);
}

.post-nav {
	max-width: var(--content-width);
	margin: clamp(3rem, 6vw, 4rem) auto 0;
	padding: 2rem var(--page-pad) 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	border-top: 1px solid var(--border);
}

.post-nav__item--next {
	text-align: right;
}

.post-nav__label {
	display: block;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-secondary);
	margin-bottom: 0.5em;
}

.post-nav__item a {
	font-family: var(--font-heading);
	font-size: 1.375rem;
	transition: color 0.25s var(--ease);
}

.post-nav__item a:hover {
	color: var(--accent);
}

.related-posts {
	max-width: var(--wide-width);
	margin: clamp(4rem, 8vw, 6rem) auto 0;
	padding: clamp(3rem, 6vw, 5rem) var(--page-pad) 0;
	border-top: 1px solid var(--border);
}

.single-article__comments {
	max-width: var(--content-width);
	margin: clamp(3rem, 6vw, 4rem) auto 0;
	padding: 0 var(--page-pad) 4rem;
}

/* -------------------------------------------------------------------------
   Comments (comments.php + loose_ends_comment_template callback)
   ------------------------------------------------------------------------- */
.comments-title {
	margin-bottom: 2rem;
}

.comments-closed,
.comments-empty-note {
	color: var(--text-secondary);
	font-size: 0.9375rem;
}

.comments-empty-note {
	margin-bottom: 2rem;
}

.comment-list,
.comment-list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.comment-list > li {
	margin-bottom: 2rem;
}

/* Nested replies: an indent plus a connecting rule down the left edge
   makes the reply relationship visually unambiguous at a glance. */
.comment-list .children {
	margin-top: 2rem;
	padding-left: 1.75rem;
	border-left: 2px solid var(--border);
}

.comment-list .children > li {
	margin-bottom: 1.75rem;
}

.comment-list .children > li:last-child {
	margin-bottom: 0;
}

.comment-body {
	padding-bottom: 1.75rem;
	border-bottom: 1px solid var(--border);
}

.comment-author.vcard {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.comment-author.vcard img.avatar {
	border-radius: 50%;
	display: block;
}

.comment-meta .fn {
	display: block;
	font-style: normal;
	font-weight: 500;
	font-size: 0.9375rem;
}

.comment-meta time {
	font-size: 0.8125rem;
	color: var(--text-secondary);
}

.comment-awaiting-moderation {
	font-size: 0.8125rem;
	font-style: italic;
	color: var(--accent);
	margin-bottom: 0.75rem;
}

.comment-content {
	font-size: 1rem;
	line-height: 1.7;
}

.comment-content p:last-child {
	margin-bottom: 0;
}

.comment-reply-link {
	margin-top: 0.75rem;
}

#cancel-comment-reply-link {
	margin-left: 1rem;
	color: var(--text-secondary);
}

/* The comment form reuses .contact-form's field/input styling directly —
   see the .contact-form__field rules — for visual consistency across
   every form on the site. */
.comment-form #cancel-comment-reply-link {
	display: inline-block;
	margin-top: 0.5em;
}

/* -------------------------------------------------------------------------
   17. About page template — .about-page__body reuses .article-body's
   width/spacing directly (see section 16), so there's nothing extra to
   set here beyond the intro line and the footer button's rule.
   ------------------------------------------------------------------------- */
.about-page__intro {
	font-size: 1.25rem;
	color: var(--text-secondary);
	max-width: 55ch;
	margin-top: 0.75em;
}

/* Match .about-page__header's box exactly (same max-width/margin/padding)
   instead of the narrower --content-width .article-body normally uses —
   that way both edges align with the title, not just the left one, so it
   reads as centered rather than flush-left with a big gap on the right. */
.about-page__body {
	max-width: var(--wide-width);
	margin: 0 auto;
	padding: 0 var(--page-pad);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* -------------------------------------------------------------------------
   18. Contact page template
   ------------------------------------------------------------------------- */
.contact-page {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 var(--page-pad) 6rem;
}

.contact-page__intro {
	max-width: none;
	padding: 0;
	color: var(--text-secondary);
	margin-top: 0.75em;
}

.form-notice {
	padding: 1.25rem 1.5rem;
	border-radius: 2px;
	margin-bottom: 2rem;
	font-size: 0.9375rem;
}

.form-notice--success {
	background: var(--quote-bg);
	border-left: 4px solid var(--accent);
}

.form-notice--error {
	background: #FBEAEA;
	border-left: 4px solid #A33;
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 1rem;
}

.contact-form__hidden-label {
	position: absolute;
	left: -9999px;
}

.contact-form__field label {
	display: block;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-secondary);
	margin-bottom: 0.6em;
}

.contact-form__field input,
.contact-form__field textarea {
	width: 100%;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 2px;
	padding: 14px 16px;
	font-size: 1rem;
	resize: vertical;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
	outline: none;
	border-color: var(--accent);
}

.contact-form__error {
	display: block;
	color: #A33;
	font-size: 0.8125rem;
	margin-top: 0.5em;
}

.contact-form .btn {
	align-self: flex-start;
}

/* -------------------------------------------------------------------------
   19. 404
   ------------------------------------------------------------------------- */
.not-found {
	max-width: 600px;
	margin: 0 auto;
	padding: clamp(6rem, 12vw, 9rem) var(--page-pad);
	text-align: center;
}

.not-found .eyebrow {
	color: var(--accent);
	margin-bottom: 1rem;
	display: block;
}

.not-found p {
	color: var(--text-secondary);
	margin: 1rem 0 2rem;
}

.not-found__search {
	display: flex;
	gap: 0.75rem;
	margin-bottom: 2rem;
}

.not-found__search input {
	flex: 1;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 2px;
	padding: 12px 16px;
}

.not-found__search input:focus {
	outline: none;
	border-color: var(--accent);
}

/* -------------------------------------------------------------------------
   20. Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 1080px) {
	.post-grid:not(.wp-block-query),
	.post-grid.wp-block-query .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}

	.site-footer__top {
		grid-template-columns: 1fr 1fr;
	}

	.site-footer__brand {
		grid-column: 1 / -1;
	}

	.wp-block-columns.about-newsletter__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 860px) {
	.site-header__nav {
		position: fixed;
		top: 80px;
		left: 0;
		right: 0;
		bottom: 0;
		/* Explicit height instead of relying on top+bottom to stretch it —
		   mobile browsers report 100vh inconsistently once the address bar
		   is factored in, which was leaving this panel too short. */
		height: calc(100vh - 80px);
		height: calc(100dvh - 80px);
		overflow-y: auto;
		background: var(--dark);
		color: #fff;
		padding: 2rem var(--page-pad);
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
		justify-content: flex-start;
		z-index: 90;
	}

	.site-header__nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.primary-menu {
		flex-direction: column;
		gap: 1.5rem;
	}

	.primary-menu a {
		font-size: 0.9375rem;
	}

	.menu-toggle {
		display: inline-flex;
	}

	.wp-block-column.about-preview {
		grid-template-columns: 1fr;
		text-align: left;
	}

	.about-preview__media {
		width: 120px;
		height: 120px;
	}
}

@media (max-width: 720px) {
	.wp-block-cover.hero {
		min-height: 520px;
	}

	.post-grid:not(.wp-block-query),
	.post-grid.wp-block-query .wp-block-post-template {
		grid-template-columns: 1fr;
	}

	.section__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.site-footer__top {
		grid-template-columns: 1fr;
	}

	.post-nav {
		grid-template-columns: 1fr;
	}

	.post-nav__item--next {
		text-align: left;
	}

	.archive-controls {
		flex-direction: column;
		align-items: stretch;
	}

	.archive-controls__search {
		min-width: 0;
	}
}