/* =============================================================================
 * CRAFT MY PROTOTYPE — Content styles (everything NON-Elementor)
 * -----------------------------------------------------------------------------
 * Styles WordPress-native output that Elementor never touches: single posts,
 * the_content() / Gutenberg core blocks, comments (default wp_list_comments
 * markup), post navigation, blog + archive lists, pagination, and search.
 *
 * THEMING: colors come ONLY from the global tokens.css custom properties, which
 * auto-swap under [data-theme="dark"] — so using the vars gives dark mode for
 * free. No hardcoded hex, no separate dark block in this file.
 *
 * SCOPING: every selector is namespaced under a .cmp-* class (or .cmp-prose for
 * content), so nothing leaks onto Elementor-built pages. Comment selectors use
 * WordPress's DEFAULT classes but stay fenced inside the .cmp-comments wrapper.
 *
 * Utilities referenced (defined elsewhere — NOT redefined here):
 *   .cmp-container .cmp-section .cmp-section-pad .cmp-display-l .cmp-eyebrow
 *   .cmp-lead .cmp-h2 .cmp-btn .cmp-btn--primary .cmp-btn--ghost
 *   .cmp-build-plate .cmp-grain .cmp-hairline .cmp-tick-frame
 *
 * Mobile-first. Breakpoints at 768px and 1024px. Honors reduced-motion.
 * ========================================================================== */


/* =============================================================================
 * 1) POST / ARCHIVE HEAD BAND
 *    Page-header-style hero used by single.php / archive.php / search.php.
 *    Markup puts .cmp-build-plate .cmp-grain on the <section> and a
 *    .cmp-container inside .cmp-post-head__inner.
 * ========================================================================== */
.cmp-post-head {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--border-hair);
	background: var(--canvas);
}

/* keep the grain overlay behind the content layer */
.cmp-post-head.cmp-grain::after {
	z-index: 0;
}

.cmp-post-head__inner {
	position: relative;
	z-index: 1;
	padding-block: 3rem 2.5rem;
}

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */
.cmp-post-head__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted);
}

.cmp-post-head__crumbs a {
	color: var(--muted);
	text-decoration: none;
	transition: color var(--dur-fast, 180ms) var(--ease-standard, ease);
}

.cmp-post-head__crumbs a:hover,
.cmp-post-head__crumbs a:focus-visible {
	color: var(--amber-text);
}

.cmp-post-head__crumbs [aria-current="page"] {
	color: var(--ink);
}

.cmp-post-head__sep {
	opacity: 0.5;
}

/* ── Eyebrow (mono kicker with short leading rule) ───────────────────────── */
.cmp-post-head__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	margin-bottom: 0.75rem;
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--amber-text);
}

.cmp-post-head__eyebrow::before {
	content: "";
	width: 24px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

/* ── Title ───────────────────────────────────────────────────────────────── */
.cmp-post-head__title {
	max-width: 22ch;
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--ink);
}

/* ── Meta row ────────────────────────────────────────────────────────────── */
.cmp-post-head__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1.25rem;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted);
}

.cmp-post-head__meta a {
	color: var(--muted);
	text-decoration: none;
	transition: color var(--dur-fast, 180ms) var(--ease-standard, ease);
}

.cmp-post-head__meta a:hover,
.cmp-post-head__meta a:focus-visible {
	color: var(--amber-text);
}

.cmp-post-head__dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--muted);
	flex: 0 0 auto;
}

@media (min-width: 768px) {
	.cmp-post-head__inner {
		padding-block: 3.5rem 3rem;
	}
}


/* =============================================================================
 * 2) PROSE — the_content() output + Gutenberg core blocks
 *    Base scope: .cmp-prose. Reading measure, editorial rhythm.
 * ========================================================================== */
.cmp-prose {
	max-width: var(--reading);
	color: var(--body);
	font-size: 1.0625rem;
	line-height: 1.75;
}

/* vertical rhythm — consistent gap between flow children */
.cmp-prose > * + * {
	margin-top: 1.25rem;
}

/* ── Headings ────────────────────────────────────────────────────────────── */
.cmp-prose h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.9rem;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--ink);
	margin-top: 2.5rem;
}

.cmp-prose h3 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin-top: 2rem;
}

.cmp-prose h4 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.25;
	color: var(--ink);
	margin-top: 1.75rem;
}

/* first heading shouldn't push extra space against the band above */
.cmp-prose > h2:first-child,
.cmp-prose > h3:first-child,
.cmp-prose > h4:first-child {
	margin-top: 0;
}

.cmp-prose strong,
.cmp-prose b {
	color: var(--ink);
	font-weight: 700;
}

.cmp-prose em,
.cmp-prose i {
	font-style: italic;
}

/* ── Links ───────────────────────────────────────────────────────────────── */
.cmp-prose a {
	color: var(--amber-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--dur-fast, 180ms) var(--ease-standard, ease);
}

.cmp-prose a:hover,
.cmp-prose a:focus-visible {
	color: var(--ink);
}

/* ── Lists ───────────────────────────────────────────────────────────────── */
.cmp-prose ul,
.cmp-prose ol {
	padding-left: 1.25rem;
	margin-top: 1.25rem;
}

.cmp-prose ul {
	list-style: disc;
}

.cmp-prose ol {
	list-style: decimal;
}

.cmp-prose li {
	margin-top: 0.4rem;
	padding-left: 0.25rem;
}

.cmp-prose li::marker {
	color: var(--amber-text);
}

/* nested lists tighten up */
.cmp-prose li > ul,
.cmp-prose li > ol {
	margin-top: 0.4rem;
}

/* ── Blockquote ──────────────────────────────────────────────────────────── */
.cmp-prose blockquote {
	margin: 1.75rem 0;
	padding: 1rem 1.25rem;
	border-left: 2px solid var(--amber);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	background: var(--canvas-sunk);
	color: var(--ink);
	font-style: italic;
}

.cmp-prose blockquote p {
	margin-top: 0;
}

.cmp-prose blockquote cite {
	display: block;
	margin-top: 0.6rem;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
}

/* ── Inline code + preformatted ──────────────────────────────────────────── */
.cmp-prose code,
.cmp-prose kbd,
.cmp-prose samp {
	font-family: var(--font-mono);
	font-size: 0.9em;
	background: var(--canvas-sunk);
	color: var(--ink);
	padding: 0.15em 0.4em;
	border-radius: 6px;
}

.cmp-prose pre {
	margin: 1.75rem 0;
	padding: 1.25rem;
	border-radius: var(--r-md);
	background: var(--ink);
	color: #f7f3ee;
	font-family: var(--font-mono);
	font-size: 0.9rem;
	line-height: 1.6;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* code inside pre resets the inline pill styling */
.cmp-prose pre code {
	background: none;
	color: inherit;
	padding: 0;
	border-radius: 0;
	font-size: inherit;
}

/* ── Rule ────────────────────────────────────────────────────────────────── */
.cmp-prose hr {
	border: 0;
	height: 1px;
	background: var(--border-hair);
	margin: 2.5rem 0;
}

/* ── Media ───────────────────────────────────────────────────────────────── */
.cmp-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--r-md);
}

.cmp-prose figure {
	margin: 0;
}

.cmp-prose figcaption {
	margin-top: 0.6rem;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--muted);
	text-align: center;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.cmp-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.75rem 0;
	font-size: 0.95rem;
}

.cmp-prose th,
.cmp-prose td {
	border-bottom: 1px solid var(--border-hair);
	padding: 0.6rem 0.8rem;
	text-align: left;
	vertical-align: top;
}

.cmp-prose th {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
}


/* ── Gutenberg core blocks ───────────────────────────────────────────────── */

/* image block */
.cmp-prose .wp-block-image {
	margin: 1.75rem 0;
}

.cmp-prose .wp-block-image img {
	border-radius: var(--r-md);
}

.cmp-prose .wp-block-image figcaption {
	margin-top: 0.6rem;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--muted);
	text-align: center;
}

/* quote block — mirror the blockquote treatment */
.cmp-prose .wp-block-quote {
	margin: 1.75rem 0;
	padding: 1rem 1.25rem;
	border-left: 2px solid var(--amber);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	background: var(--canvas-sunk);
	color: var(--ink);
	font-style: italic;
}

.cmp-prose .wp-block-quote cite,
.cmp-prose .wp-block-quote__citation {
	display: block;
	margin-top: 0.6rem;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
}

/* pullquote — centered, larger, amber rules top + bottom */
.cmp-prose .wp-block-pullquote {
	margin: 2.5rem 0;
	padding: 2rem 1rem;
	border-top: 2px solid var(--amber);
	border-bottom: 2px solid var(--amber);
	text-align: center;
	background: transparent;
}

.cmp-prose .wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-style: normal;
}

.cmp-prose .wp-block-pullquote p {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem);
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--ink);
}

.cmp-prose .wp-block-pullquote cite,
.cmp-prose .wp-block-pullquote__citation {
	display: block;
	margin-top: 1rem;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
}

/* button block — style like .cmp-btn--primary */
.cmp-prose .wp-block-button {
	margin-top: 1.25rem;
}

.cmp-prose .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1;
	background: var(--amber);
	color: var(--on-amber, #fff);
	padding: 0.7rem 1.4rem;
	border: 1px solid transparent;
	border-radius: var(--r-pill, 999px);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur-fast, 180ms) var(--ease-standard, ease),
		box-shadow var(--dur-fast, 180ms) var(--ease-standard, ease);
}

.cmp-prose .wp-block-button__link:hover,
.cmp-prose .wp-block-button__link:focus-visible {
	background: var(--amber-hover);
	color: var(--on-amber, #fff);
	box-shadow: var(--amber-glow);
}

/* outline button variant */
.cmp-prose .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--amber-text);
	border-color: var(--border-strong);
}

.cmp-prose .wp-block-button.is-style-outline .wp-block-button__link:hover,
.cmp-prose .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	border-color: var(--amber);
	color: var(--amber-text);
	background: var(--amber-tint);
	box-shadow: none;
}

.cmp-prose .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* columns */
.cmp-prose .wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gutter);
	margin: 1.75rem 0;
}

.cmp-prose .wp-block-column {
	flex: 1 1 240px;
	min-width: 0;
}

.cmp-prose .wp-block-column > * + * {
	margin-top: 1.25rem;
}

/* gallery */
.cmp-prose .wp-block-gallery,
.cmp-prose .blocks-gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 1.75rem 0;
	padding: 0;
	list-style: none;
}

.cmp-prose .wp-block-gallery figure,
.cmp-prose .blocks-gallery-item figure {
	margin: 0;
	height: 100%;
}

.cmp-prose .wp-block-gallery img,
.cmp-prose .blocks-gallery-grid img {
	border-radius: var(--r-sm);
	width: 100%;
}

@media (min-width: 768px) {
	.cmp-prose .wp-block-gallery.columns-3,
	.cmp-prose .blocks-gallery-grid.columns-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.cmp-prose .wp-block-gallery.columns-4,
	.cmp-prose .blocks-gallery-grid.columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* table block */
.cmp-prose .wp-block-table {
	margin: 1.75rem 0;
	overflow-x: auto;
}

.cmp-prose .wp-block-table table {
	margin: 0;
}

.cmp-prose .wp-block-table figcaption {
	margin-top: 0.6rem;
}

/* code + preformatted + verse blocks — share the pre treatment */
.cmp-prose .wp-block-code,
.cmp-prose .wp-block-preformatted,
.cmp-prose .wp-block-verse {
	margin: 1.75rem 0;
	padding: 1.25rem;
	border-radius: var(--r-md);
	background: var(--ink);
	color: #f7f3ee;
	font-family: var(--font-mono);
	font-size: 0.9rem;
	line-height: 1.6;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.cmp-prose .wp-block-code code {
	background: none;
	color: inherit;
	padding: 0;
	border-radius: 0;
	font-size: inherit;
}

.cmp-prose .wp-block-verse {
	font-style: normal;
	white-space: pre-wrap;
}

/* separator block — like hr; dotted variant supported */
.cmp-prose .wp-block-separator {
	border: 0;
	height: 1px;
	background: var(--border-hair);
	margin: 2.5rem auto;
	max-width: 100%;
}

.cmp-prose .wp-block-separator.is-style-wide {
	width: 100%;
}

.cmp-prose .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
	width: 6rem;
}

.cmp-prose .wp-block-separator.is-style-dots {
	height: auto;
	background: none;
	border: 0;
	text-align: center;
	line-height: 1;
	max-width: none;
}

.cmp-prose .wp-block-separator.is-style-dots::before {
	content: "···";
	font-family: var(--font-mono);
	font-size: 1.5rem;
	letter-spacing: 0.5em;
	color: var(--muted);
	padding-left: 0.5em;
}

/* cover block */
.cmp-prose .wp-block-cover {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	padding: 2rem;
	border-radius: var(--r-md);
	overflow: hidden;
	color: #fff;
	margin: 1.75rem 0;
}

.cmp-prose .wp-block-cover .wp-block-cover__background {
	border-radius: inherit;
}

.cmp-prose .wp-block-cover .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}

.cmp-prose .wp-block-cover h2,
.cmp-prose .wp-block-cover h3 {
	color: #fff;
	margin-top: 0;
}

/* embeds — responsive 16:9 wrapper */
.cmp-prose .wp-block-embed {
	margin: 1.75rem 0;
}

.cmp-prose .wp-block-embed__wrapper {
	position: relative;
}

.cmp-prose .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper::before {
	content: "";
	display: block;
	padding-top: 56.25%;
}

.cmp-prose .wp-block-embed.wp-has-aspect-ratio iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--r-md);
}

.cmp-prose .wp-block-embed figcaption {
	margin-top: 0.6rem;
}

/* list block inherits the prose list rules; just normalize spacing */
.cmp-prose .wp-block-list {
	margin-top: 1.25rem;
}


/* ── Alignment helpers (WP + Gutenberg) ──────────────────────────────────── */
.cmp-prose .aligncenter {
	display: block;
	margin-inline: auto;
}

.cmp-prose .alignleft {
	float: left;
	margin: 0.3rem 1.25rem 1rem 0;
	max-width: 50%;
}

.cmp-prose .alignright {
	float: right;
	margin: 0.3rem 0 1rem 1.25rem;
	max-width: 50%;
}

.cmp-prose .alignwide {
	width: min(100%, 900px);
	max-width: none;
	margin-inline: auto;
}

.cmp-prose .alignfull {
	width: 100%;
	max-width: none;
}

/* clear floats so following blocks don't wrap awkwardly */
.cmp-prose::after {
	content: "";
	display: block;
	clear: both;
}

/* ── Classic-editor caption + misc ───────────────────────────────────────── */
.cmp-prose .wp-caption {
	max-width: 100%;
	margin: 1.75rem 0;
}

.cmp-prose .wp-caption img {
	border-radius: var(--r-md);
}

.cmp-prose .wp-caption-text {
	margin-top: 0.6rem;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--muted);
	text-align: center;
}

.cmp-prose .sticky {
	/* purely a semantic flag in content; no visual change needed here */
	display: block;
}

/* classic [gallery] shortcode */
.cmp-prose .gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 1.75rem 0;
}

.cmp-prose .gallery-item {
	margin: 0;
	text-align: center;
}

.cmp-prose .gallery-item img {
	width: 100%;
	border-radius: var(--r-sm);
	border: 1px solid var(--border-hair);
}

.cmp-prose .gallery-caption {
	margin-top: 0.4rem;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	color: var(--muted);
}

/* visually-hidden helper (in case content emits it) */
.cmp-prose .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute;
}


/* =============================================================================
 * 3) FEATURED IMAGE (single post)
 * ========================================================================== */
.cmp-single__media {
	margin-block: 2rem;
}

.cmp-single__media img {
	width: 100%;
	height: auto;
	border-radius: var(--r-md);
	border: 1px solid var(--border-hair);
	display: block;
}

.cmp-single__media-cap {
	margin-top: 0.7rem;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted);
	text-align: center;
}


/* =============================================================================
 * 4) TAGS (post footer)
 * ========================================================================== */
.cmp-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border-hair);
}

.cmp-tag {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted);
	background: var(--canvas-sunk);
	border: 1px solid var(--border-hair);
	border-radius: 999px;
	padding: 0.3rem 0.7rem;
	text-decoration: none;
	transition: color var(--dur-fast, 180ms) var(--ease-standard, ease),
		border-color var(--dur-fast, 180ms) var(--ease-standard, ease);
}

.cmp-tag:hover,
.cmp-tag:focus-visible {
	color: var(--amber-text);
	border-color: var(--amber-tint-border);
}


/* =============================================================================
 * 5) POST NAVIGATION (prev / next)
 * ========================================================================== */
.cmp-postnav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-block: 3rem;
}

.cmp-postnav__link {
	display: block;
	border: 1px solid var(--border-hair);
	border-radius: var(--r-md);
	background: var(--card);
	padding: 1rem 1.25rem;
	box-shadow: var(--shadow-rest);
	text-decoration: none;
	transition: border-color var(--dur-fast, 180ms) var(--ease-standard, ease),
		transform var(--dur-fast, 180ms) var(--ease-standard, ease),
		box-shadow var(--dur-fast, 180ms) var(--ease-standard, ease);
}

.cmp-postnav__link:hover,
.cmp-postnav__link:focus-visible {
	border-color: var(--border-strong);
	transform: translateY(-2px);
	box-shadow: var(--shadow-hover);
}

.cmp-postnav__link--next {
	text-align: right;
}

.cmp-postnav__dir {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
}

.cmp-postnav__title {
	display: block;
	margin-top: 0.35rem;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.3;
}

@media (max-width: 639px) {
	.cmp-postnav {
		grid-template-columns: 1fr;
	}
	.cmp-postnav__link--next {
		text-align: left;
	}
}


/* =============================================================================
 * 6) COMMENTS — WordPress DEFAULT classes inside a .cmp-comments wrapper
 *    (the comments template uses wp_list_comments default markup)
 * ========================================================================== */
.cmp-comments {
	max-width: var(--reading);
	margin-block: 3.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--border-hair);
}

.cmp-comments__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--ink);
	margin: 0 0 1.5rem;
}

/* ── Comment list ────────────────────────────────────────────────────────── */
.cmp-comments .comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cmp-comments .comment-list .children {
	list-style: none;
	margin: 1.5rem 0 0 1.5rem;
	padding-left: 1.25rem;
	border-left: 1px solid var(--border-hair);
}

.cmp-comments .comment-list li.comment {
	margin-bottom: 1.5rem;
}

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

/* ── Comment body (avatar + content side by side) ────────────────────────── */
.cmp-comments .comment-body {
	display: flex;
	gap: 0.9rem;
	padding: 1.1rem;
	border: 1px solid var(--border-hair);
	border-radius: var(--r-md);
	background: var(--card);
	box-shadow: var(--shadow-rest);
}

.cmp-comments .comment-author {
	flex: 0 0 auto;
}

.cmp-comments .comment-author .avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--border-hair);
	display: block;
}

/* author name + meta sit in the flexible content column */
.cmp-comments .comment-author .fn {
	font-style: normal;
	font-weight: 600;
	color: var(--ink);
}

.cmp-comments .comment-author .says {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute;
}

.cmp-comments .comment-metadata {
	margin-top: 0.15rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted);
}

.cmp-comments .comment-metadata a {
	color: var(--muted);
	text-decoration: none;
	transition: color var(--dur-fast, 180ms) var(--ease-standard, ease);
}

.cmp-comments .comment-metadata a:hover,
.cmp-comments .comment-metadata a:focus-visible {
	color: var(--amber-text);
}

/* the content column needs to fill remaining width next to the avatar */
.cmp-comments .comment-body > footer,
.cmp-comments .comment-content {
	min-width: 0;
	flex: 1 1 auto;
}

.cmp-comments .comment-content {
	margin-top: 0.5rem;
	color: var(--body);
	line-height: 1.65;
}

.cmp-comments .comment-content p {
	margin: 0 0 0.75rem;
}

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

.cmp-comments .comment-content a {
	color: var(--amber-text);
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

.cmp-comments .comment-content a:hover,
.cmp-comments .comment-content a:focus-visible {
	color: var(--ink);
}

.cmp-comments .comment-content ul,
.cmp-comments .comment-content ol {
	padding-left: 1.2rem;
	margin: 0.5rem 0 0.75rem;
}

.cmp-comments .comment-content li::marker {
	color: var(--amber-text);
}

/* ── Reply link ──────────────────────────────────────────────────────────── */
.cmp-comments .reply {
	margin-top: 0.5rem;
}

.cmp-comments .comment-reply-link {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--amber-text);
	text-decoration: none;
	transition: color var(--dur-fast, 180ms) var(--ease-standard, ease);
}

.cmp-comments .comment-reply-link:hover,
.cmp-comments .comment-reply-link:focus-visible {
	color: var(--ink);
}

/* post-author comment gets an amber edge + faint tint */
.cmp-comments .bypostauthor > .comment-body {
	border-left: 2px solid var(--amber);
	background: color-mix(in srgb, var(--amber-tint) 55%, var(--card));
}

.cmp-comments .comment-awaiting-moderation {
	display: block;
	margin-top: 0.4rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--muted);
}

/* pingbacks / trackbacks — minimal */
.cmp-comments .pingback,
.cmp-comments .trackback {
	margin-bottom: 1rem;
	padding: 0.75rem 1rem;
	border: 1px dashed var(--border-hair);
	border-radius: var(--r-sm);
	font-size: 0.92rem;
	color: var(--body);
}

.cmp-comments .pingback .comment-edit-link,
.cmp-comments .trackback .comment-edit-link {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	text-transform: uppercase;
	color: var(--muted);
}

/* ── Comment form ────────────────────────────────────────────────────────── */
.cmp-comments .comment-respond,
#respond {
	margin-top: 2.5rem;
}

.cmp-comments .comment-reply-title,
#respond .comment-reply-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--ink);
	margin: 0 0 1rem;
}

.cmp-comments .comment-reply-title small {
	margin-left: 0.6rem;
	font-size: 0.8rem;
	font-weight: 400;
}

.cmp-comments .comment-reply-title small a {
	color: var(--amber-text);
	text-decoration: none;
}

.cmp-comments .comment-form,
#respond .comment-form {
	display: grid;
	gap: 1rem;
}

/* author / email / url can share a 2-col row on wider viewports */
.cmp-comments .comment-form-comment,
.cmp-comments .comment-form-author,
.cmp-comments .comment-form-email,
.cmp-comments .comment-form-url {
	margin: 0;
}

.cmp-comments .comment-form label,
#respond .comment-form label {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted);
}

.cmp-comments .comment-form input[type="text"],
.cmp-comments .comment-form input[type="email"],
.cmp-comments .comment-form input[type="url"],
.cmp-comments .comment-form textarea,
#respond .comment-form input[type="text"],
#respond .comment-form input[type="email"],
#respond .comment-form input[type="url"],
#respond .comment-form textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	background: var(--card);
	color: var(--ink);
	font: inherit;
	transition: border-color var(--dur-fast, 180ms) var(--ease-standard, ease),
		box-shadow var(--dur-fast, 180ms) var(--ease-standard, ease);
}

.cmp-comments .comment-form input[type="text"]:focus,
.cmp-comments .comment-form input[type="email"]:focus,
.cmp-comments .comment-form input[type="url"]:focus,
.cmp-comments .comment-form textarea:focus,
#respond .comment-form input:focus,
#respond .comment-form textarea:focus {
	outline: none;
	border-color: var(--amber);
	box-shadow: 0 0 0 3px var(--amber-tint);
}

.cmp-comments .comment-form textarea,
#respond .comment-form textarea {
	min-height: 120px;
	resize: vertical;
}

/* submit — primary button */
.cmp-comments .form-submit .submit,
#respond .form-submit .submit,
#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1;
	background: var(--amber);
	color: var(--on-amber, #fff);
	border: 0;
	padding: 0.75rem 1.5rem;
	border-radius: var(--r-sm);
	cursor: pointer;
	transition: background-color var(--dur-fast, 180ms) var(--ease-standard, ease),
		box-shadow var(--dur-fast, 180ms) var(--ease-standard, ease);
}

.cmp-comments .form-submit .submit:hover,
#respond .form-submit .submit:hover,
#submit:hover {
	background: var(--amber-hover);
	box-shadow: var(--amber-glow);
}

/* notes + consent */
.cmp-comments .comment-notes,
.cmp-comments .comment-form-cookies-consent {
	font-family: var(--font-mono);
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--muted);
}

.cmp-comments .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.cmp-comments .comment-form-cookies-consent input {
	margin-top: 0.2rem;
}

.cmp-comments .comment-form-cookies-consent label {
	display: inline;
	margin: 0;
	font-family: var(--font-mono);
	text-transform: none;
	letter-spacing: 0;
	color: var(--muted);
}

.cmp-comments .logged-in-as,
.cmp-comments .must-log-in {
	font-size: 0.85rem;
	color: var(--muted);
}

.cmp-comments .logged-in-as a,
.cmp-comments .must-log-in a {
	color: var(--amber-text);
	text-decoration: none;
}

.cmp-comments .logged-in-as a:hover,
.cmp-comments .must-log-in a:hover {
	color: var(--ink);
}

.cmp-comments .no-comments {
	font-family: var(--font-mono);
	font-size: 0.85rem;
	color: var(--muted);
}

@media (min-width: 640px) {
	.cmp-comments .comment-form-author,
	.cmp-comments .comment-form-email {
		display: inline-block;
		width: calc(50% - 0.5rem);
		vertical-align: top;
	}
	.cmp-comments .comment-form-author {
		margin-right: 1rem;
	}
}


/* =============================================================================
 * 7) ARCHIVE / BLOG LIST
 * ========================================================================== */
.cmp-archive {
	position: relative;
}

.cmp-archive__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

/* ── Post card ───────────────────────────────────────────────────────────── */
.cmp-postcard {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border-hair);
	border-radius: var(--r-md);
	background: var(--card);
	overflow: hidden;
	box-shadow: var(--shadow-rest);
	transition: border-color var(--dur-fast, 180ms) var(--ease-standard, ease),
		transform var(--dur-fast, 180ms) var(--ease-standard, ease),
		box-shadow var(--dur-fast, 180ms) var(--ease-standard, ease);
}

.cmp-postcard:hover,
.cmp-postcard:focus-within {
	border-color: var(--border-strong);
	transform: translateY(-3px);
	box-shadow: var(--shadow-hover);
}

/* ── Card media ──────────────────────────────────────────────────────────── */
.cmp-postcard__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--canvas-sunk);
}

.cmp-postcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--dur-base, 240ms) var(--ease-out, ease);
}

.cmp-postcard:hover .cmp-postcard__media img {
	transform: scale(1.03);
}

/* empty-media placeholder — subtle build-plate grid */
.cmp-postcard__media--empty {
	background-color: var(--canvas-sunk);
	background-image:
		linear-gradient(var(--plate-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--plate-line) 1px, transparent 1px);
	background-size: 22px 22px;
}

/* ── Card body ───────────────────────────────────────────────────────────── */
.cmp-postcard__body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	flex: 1;
	padding: 1.25rem 1.25rem 1.5rem;
}

.cmp-postcard__cat {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--amber-text);
	text-decoration: none;
}

.cmp-postcard__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1.25;
	color: var(--ink);
	margin: 0;
}

.cmp-postcard__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--dur-fast, 180ms) var(--ease-standard, ease);
}

.cmp-postcard__title a:hover,
.cmp-postcard__title a:focus-visible {
	color: var(--amber-text);
}

.cmp-postcard__excerpt {
	color: var(--body);
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0;
	/* clamp to ~3 lines */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cmp-postcard__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted);
}

.cmp-postcard__meta .cmp-post-head__dot,
.cmp-postcard__meta-dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--muted);
	flex: 0 0 auto;
}

.cmp-postcard__more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--amber-text);
	text-decoration: none;
	transition: color var(--dur-fast, 180ms) var(--ease-standard, ease);
}

.cmp-postcard__more::after {
	content: "\2192"; /* → */
	transition: transform var(--dur-fast, 180ms) var(--ease-out, ease);
}

.cmp-postcard__more:hover,
.cmp-postcard__more:focus-visible {
	color: var(--ink);
}

.cmp-postcard__more:hover::after {
	transform: translateX(3px);
}

@media (min-width: 768px) {
	.cmp-archive__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.cmp-archive__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}


/* =============================================================================
 * 8) PAGINATION — WordPress .page-numbers
 * ========================================================================== */
.cmp-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin-block: 3rem;
}

.cmp-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.6rem;
	border: 1px solid var(--border-hair);
	border-radius: var(--r-sm);
	background: var(--card);
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: 0.85rem;
	text-decoration: none;
	transition: border-color var(--dur-fast, 180ms) var(--ease-standard, ease),
		background-color var(--dur-fast, 180ms) var(--ease-standard, ease),
		color var(--dur-fast, 180ms) var(--ease-standard, ease);
}

.cmp-pagination a.page-numbers:hover,
.cmp-pagination a.page-numbers:focus-visible {
	border-color: var(--border-strong);
}

.cmp-pagination .page-numbers.current {
	background: var(--amber);
	color: var(--on-amber, #fff);
	border-color: var(--amber);
}

.cmp-pagination .page-numbers.dots {
	border: 0;
	background: transparent;
	color: var(--muted);
}

.cmp-pagination .prev.page-numbers,
.cmp-pagination .next.page-numbers {
	padding: 0 1rem;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}


/* =============================================================================
 * 9) SEARCH
 * ========================================================================== */
.cmp-searchform {
	display: flex;
	gap: 0.5rem;
	max-width: 520px;
}

.cmp-searchform input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	background: var(--card);
	color: var(--ink);
	font: inherit;
	transition: border-color var(--dur-fast, 180ms) var(--ease-standard, ease),
		box-shadow var(--dur-fast, 180ms) var(--ease-standard, ease);
}

.cmp-searchform input[type="search"]:focus {
	outline: none;
	border-color: var(--amber);
	box-shadow: 0 0 0 3px var(--amber-tint);
}

.cmp-searchform button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1;
	background: var(--amber);
	color: var(--on-amber, #fff);
	border: 0;
	padding: 0.7rem 1.4rem;
	border-radius: var(--r-sm);
	cursor: pointer;
	transition: background-color var(--dur-fast, 180ms) var(--ease-standard, ease),
		box-shadow var(--dur-fast, 180ms) var(--ease-standard, ease);
}

.cmp-searchform button:hover,
.cmp-searchform button:focus-visible {
	background: var(--amber-hover);
	box-shadow: var(--amber-glow);
}

/* no-results block (eyebrow + lead already styled globally) */
.cmp-noresults {
	max-width: var(--reading);
	color: var(--body);
}

.cmp-noresults p {
	margin-top: 1rem;
}


/* =============================================================================
 * Reduced-motion — neutralize transforms/transitions for this file's components
 * (tokens.css already kills durations globally; this also stops the hover lift
 *  and arrow nudge from implying motion.)
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.cmp-postnav__link,
	.cmp-postcard,
	.cmp-postcard__media img,
	.cmp-postcard__more::after {
		transition: none;
	}
	.cmp-postnav__link:hover,
	.cmp-postnav__link:focus-visible,
	.cmp-postcard:hover,
	.cmp-postcard:focus-within {
		transform: none;
	}
	.cmp-postcard:hover .cmp-postcard__media img {
		transform: none;
	}
	.cmp-postcard__more:hover::after {
		transform: none;
	}
}

/* ============================================================================
   GUIDES HUB (/guides/) — two large link cards to the filament + printer guides
   ============================================================================ */
.cmp-guidehub {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 768px) {
	.cmp-guidehub {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}
}
.cmp-guidehub__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 2rem;
	border: 1px solid var(--border-hair);
	border-radius: var(--r-lg);
	background: var(--card);
	box-shadow: var(--shadow-rest);
	text-decoration: none;
	transition: transform var(--dur-fast, 180ms) ease, border-color var(--dur-fast, 180ms) ease, box-shadow var(--dur-fast, 180ms) ease;
}
.cmp-guidehub__card:hover {
	transform: translateY(-3px);
	border-color: var(--border-strong);
	box-shadow: 0 6px 24px rgba(40, 28, 20, 0.08);
}
.cmp-guidehub__n {
	font-family: var(--font-mono);
	font-size: 0.8rem;
	color: var(--amber-text);
	letter-spacing: 0.04em;
}
.cmp-guidehub__eyebrow {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
}
.cmp-guidehub__title {
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 2.4vw, 1.85rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 0;
}
.cmp-guidehub__desc {
	color: var(--body);
	font-size: 0.975rem;
	line-height: 1.6;
	margin: 0;
}
.cmp-guidehub__more {
	margin-top: 0.5rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--amber-text);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.cmp-guidehub__card:hover .cmp-guidehub__more {
	color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
	.cmp-guidehub__card,
	.cmp-guidehub__card:hover {
		transform: none;
		transition: none;
	}
}