/* ============================================================
   ArtLand — general templates (blog, page, single, archive,
   search, 404). Uses the design tokens from style.css :root.
   ============================================================ */

/* --- Shared shell --------------------------------------------------- */

/* Editorial hero — the same eyebrow + colored-accent-title pattern used by
   the portfolio (.pf-hero) and the form pages (.form-hero). Hoisted here so
   the blog/archive/single templates can adopt it without enqueueing the
   portfolio or forms stylesheets. */
.page-hero {
	padding: 140px 0 64px;
	position: relative;
	border-bottom: 1px solid var(--border);
	background:
		radial-gradient(60% 120% at 0% 0%, rgba(212, 164, 55, 0.10), transparent 60%),
		var(--bg-elev);
}
.page-hero .container { max-width: var(--container); }
.page-hero .pf-hero-head {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 64px;
	align-items: end;
}
.page-hero .pf-intro { min-width: 0; }
.page-hero .pf-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
}
.page-hero .pf-eyebrow-text {
	color: var(--gold);
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
}
.page-hero .pf-eyebrow-line {
	width: 90px;
	height: 1px;
	background: linear-gradient(to right,
		var(--gold) 0%,
		rgba(212, 164, 55, 0.55) 55%,
		rgba(212, 164, 55, 0) 100%);
	display: block;
}
.page-hero .pf-title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(36px, 4vw, 56px);
	line-height: 1.06;
	letter-spacing: -0.025em;
	color: var(--text);
	margin: 0;
	text-transform: none;
}
.page-hero .pf-title span {
	color: var(--gold);
	font-weight: 400;
	font-style: italic;
	letter-spacing: -0.025em;
	text-shadow:
		0 0 22px rgba(212, 164, 55, 0.22),
		0 0 55px rgba(212, 164, 55, 0.12);
}
.page-hero .pf-desc {
	position: relative;
	padding-left: 22px;
	padding-bottom: 4px;
	max-width: 460px;
	justify-self: end;
}
.page-hero .pf-desc::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 6px;
	width: 1px;
	background: linear-gradient(to bottom,
		rgba(212, 164, 55, 0.85) 0%,
		rgba(212, 164, 55, 0.25) 60%,
		transparent 100%);
}
.page-hero .pf-desc p {
	margin: 0;
	color: var(--text-dim);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.75;
}

/* Single-post hero gets a meta row under the title for date/author (legacy). */
.page-hero-meta {
	margin-top: 18px;
	font-size: 13px;
	color: var(--text-dim);
	font-family: var(--font-display);
	letter-spacing: 0.06em;
}
.page-hero-meta a { color: var(--gold); text-decoration: none; }
.page-hero-meta .sep { color: var(--text-muted); margin: 0 10px; }

/* --- Single-post hero (richer than the generic .page-hero) ---------- */
.post-hero { padding: 130px 0 76px; }
/* In "plain" mode (no excerpt, no image) the right column would otherwise
   leave the title hanging at ~53% width — let the .pf-intro span the full
   row so the title has the air it deserves. */
.post-hero--plain .pf-hero-head {
	grid-template-columns: 1fr;
}
.post-hero--plain .pf-intro { max-width: 880px; }

/* Meta line under the title — author · read time · comments. */
.post-hero-meta {
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-family: var(--font-display);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-dim);
}
.post-hero-meta-author { color: var(--text); }
.post-hero-meta-comments {
	color: var(--text-dim);
	text-decoration: none;
	transition: color 0.2s var(--ease);
}
.post-hero-meta-comments:hover { color: var(--gold); }
.post-hero-meta-dot {
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--gold);
	opacity: 0.6;
}

/* Tag pills under the meta row. */
.post-hero-tags {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.post-hero-tags li { margin: 0; }
.post-hero-tags a {
	display: inline-flex;
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: lowercase;
	color: var(--text-muted);
	background: rgba(212, 164, 55, 0.05);
	border: 1px solid rgba(212, 164, 55, 0.18);
	border-radius: 999px;
	padding: 5px 12px;
	text-decoration: none;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.post-hero-tags a:hover {
	color: var(--gold);
	border-color: rgba(212, 164, 55, 0.55);
	background: rgba(212, 164, 55, 0.10);
}

/* --- Full-bleed background-image hero variant ---
   Used when the post has a featured image: the image becomes the hero
   background, gradient overlay keeps the title readable. Long editorial
   titles get room to breathe instead of being squeezed into a column. */
.post-hero--image-bg {
	position: relative;
	min-height: 60vh;
	padding: 96px 0 80px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
.post-hero--image-bg::before,
.post-hero--image-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.post-hero--image-bg::before {
	background-image: var(--hero-bg);
	background-size: cover;
	/* Default to centered; the per-post Hero Image Position picker
	   sets `--hero-focal` to a "X% Y%" pair when an editor drags. */
	background-position: var(--hero-focal, center center);
	z-index: 0;
}
.post-hero--image-bg::after {
	/* DEFAULT gradient — the original 3-stop vertical (with lighter
	   middle) + horizontal-up-to-60% — preserved exactly so existing
	   posts that haven't been customized render unchanged. */
	background:
		linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.30) 30%, rgba(10, 10, 10, 0.85) 100%),
		linear-gradient(90deg,  rgba(10, 10, 10, 0.65) 0%, rgba(10, 10, 10, 0.10) 60%);
	z-index: 1;
}
/* CUSTOM gradient — applied ONLY when the section carries the
   `.has-hero-overlay` class (i.e. the post has saved overlay values
   in `_artland_hero_overlay`). Per-edge alphas come from the inline
   CSS vars emitted by `artland_hero_inline_style()`. Higher specificity
   than the default rule above so the cascade picks this one when both
   match. */
.post-hero--image-bg.has-hero-overlay::after {
	background:
		linear-gradient(180deg,
			rgba(10, 10, 10, var(--hero-overlay-top,    0.55)) 0%,
			rgba(10, 10, 10, var(--hero-overlay-bottom, 0.85)) 100%),
		linear-gradient(90deg,
			rgba(10, 10, 10, var(--hero-overlay-left,   0.65)) 0%,
			rgba(10, 10, 10, var(--hero-overlay-right,  0.10)) 100%);
}
.post-hero--image-bg .container { position: relative; z-index: 2; }
.post-hero--image-bg .pf-hero-head { display: block; }
.post-hero--image-bg .pf-intro { max-width: 880px; }
.post-hero--image-bg .pf-title { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); }
.post-hero--image-bg .pf-subtitle {
	color: rgba(255, 255, 255, 0.92);
	font-size: 18px;
	line-height: 1.55;
	max-width: 640px;
	margin: 14px 0 18px;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
/* Eyebrow text + line keep the gold treatment from the base `.page-hero`
   rule (form-hero pages already use gold over image-bg, see About Us);
   white was an earlier override that drifted the article-page heroes
   away from the rest of the site's style. */
.post-hero--image-bg .post-hero-meta { color: rgba(255, 255, 255, 0.85); }
.post-hero--image-bg .post-hero-meta a { color: rgba(255, 255, 255, 0.95); }
.post-hero--image-bg .post-hero-meta-dot { background: rgba(255, 255, 255, 0.55); }
.post-hero--image-bg .post-hero-tags a {
	color: rgba(255, 255, 255, 0.85);
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.20);
}
.post-hero--image-bg .post-hero-tags a:hover {
	color: var(--gold-bright, #f0c14b);
	background: rgba(212, 164, 55, 0.15);
	border-color: rgba(212, 164, 55, 0.55);
}
@media (max-width: 768px) {
	.post-hero--image-bg { min-height: 48vh; padding: 64px 0 48px; }
}

/* Featured-image column on the hero. Slight tilt + dark vignette so it
   reads as a photographic accent, not an inline thumbnail. */
.post-hero-media {
	justify-self: end;
	align-self: stretch;
	width: 100%;
	max-width: 520px;
	/* Matches the 16:9 aspect the AI generates for hero prompts. Using 4:3
	   here center-cropped the top and bottom of every hero. */
	aspect-ratio: 16 / 9;
	border-radius: 14px;
	overflow: hidden;
	position: relative;
	border: 1px solid var(--border);
	box-shadow:
		0 30px 60px -30px rgba(0, 0, 0, 0.6),
		0 0 0 1px rgba(212, 164, 55, 0.05);
}
.post-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, transparent 0%, transparent 60%, rgba(0, 0, 0, 0.35) 100%);
	pointer-events: none;
}
.post-hero-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1024px) {
	.post-hero-media {
		justify-self: start;
		max-width: 100%;
		aspect-ratio: 16 / 9;
	}
}
@media (max-width: 620px) {
	.post-hero { padding: 110px 0 56px; }
	.post-hero-meta { font-size: 11px; gap: 8px; }
}

@media (max-width: 1024px) {
	.page-hero .pf-hero-head {
		grid-template-columns: 1fr;
		gap: 24px;
		align-items: start;
	}
	.page-hero .pf-desc { justify-self: start; max-width: 560px; }
}
@media (max-width: 620px) {
	.page-hero { padding: 110px 0 48px; }
}

.page-body {
	/* Top padding tightened (56→28) so article-page.php / single.php bodies
	   sit closer to the hero. The hero already has 76–80px bottom padding,
	   so 28px here is enough breathing room without leaving a dark band.

	   Vertical-only — horizontal gutter comes from `.container`'s
	   padding-left/right (var(--gutter)). Using the `padding` shorthand
	   here would zero those out and make article body text touch the
	   screen edges on narrow viewports. */
	padding-top: 28px;
	padding-bottom: 80px;
}

/* --- Breadcrumb -----------------------------------------------------
   Editorial bar — display font, uppercase letter-spacing, gold chevron
   separators, a thin gold accent line on the left as a marker (same
   visual language as the eyebrow row + page-children-head). The current
   page sits at the end in a muted gold-tinted shade so the breadcrumb
   reads "from Home, through these sections, to here".

   Rendered as `<div class="container artland-breadcrumb-row">` directly
   between the page-hero and the main content container — so its width
   and gutter match the regular `.container` on every template and the
   bar never shifts horizontally between page types. */

.artland-breadcrumb-row {
	padding-top: 22px;
	padding-bottom: 4px;
}

.artland-breadcrumb {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* Leading gold gradient stub — mirrors `.pf-eyebrow-line` rendered to
   the LEFT of the trail so the bar visually anchors to the editorial
   gold accent system. Hidden on very narrow viewports where every pixel
   counts. */
.artland-breadcrumb::before {
	content: "";
	display: block;
	width: 32px;
	height: 1px;
	flex-shrink: 0;
	background: linear-gradient(to right,
		rgba(212, 164, 55, 0)   0%,
		rgba(212, 164, 55, 0.55) 50%,
		var(--gold)              100%);
}

.artland-breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.artland-breadcrumb-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

/* Links — quiet at rest, slide to gold on hover. NO marker-highlight
   here (this isn't editorial body prose). */
.artland-breadcrumb-link {
	position: relative;
	color: var(--text-dim);
	text-decoration: none;
	transition: color 0.25s var(--ease);
	white-space: nowrap;
}
.artland-breadcrumb-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -3px;
	height: 1px;
	background: var(--gold);
	transition: right 0.3s var(--ease);
	opacity: 0.7;
}
.artland-breadcrumb-link:hover,
.artland-breadcrumb-link:focus-visible {
	color: var(--gold);
}
.artland-breadcrumb-link:hover::after,
.artland-breadcrumb-link:focus-visible::after {
	right: 0;
}

/* Current page — terminal "you are here" marker. Gold-tinted but
   dimmer than active link hover, so the eye reads it as the END of the
   trail, not as something clickable. Italic display variant matches the
   gold accent treatment used in section titles. */
.artland-breadcrumb-current {
	color: rgba(212, 164, 55, 0.78);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0.14em;
	white-space: nowrap;
	max-width: 24em;
	overflow: hidden;
	text-overflow: ellipsis;
}

.artland-breadcrumb-sep {
	color: var(--gold);
	opacity: 0.45;
	font-size: 14px;
	line-height: 1;
	font-style: normal;
}

/* Narrow viewports — hide the leading gold stub (no space for it),
   collapse the size a touch. */
@media (max-width: 600px) {
	.artland-breadcrumb {
		font-size: 10px;
		letter-spacing: 0.16em;
		gap: 10px;
	}
	.artland-breadcrumb::before { display: none; }
	.artland-breadcrumb-current { max-width: 14em; }
}

/* --- Prose / entry content ------------------------------------------ */
.entry-content {
	max-width: 720px;
	margin: 0 auto;
	color: var(--text-dim);
	font-size: 17px;
	line-height: 1.8;
}
body.single-post .entry-content {
	font-family: var(--font-display);
	font-size: 16.5px;
	line-height: 1.6;
}
.entry-content > p:first-child {
	font-size: 19px;
	color: var(--text);
	line-height: 1.7;
}
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	font-family: var(--font-display);
	color: var(--text);
	font-weight: 700;
	line-height: 1.25;
	margin-top: 1.8em;
}
.entry-content h2 { font-size: 28px; }
.entry-content h3 { font-size: 22px; }
.entry-content h4 { font-size: 18px; }
/* Inline editorial links — no underline, semi-bold gold text by default,
   marker-highlight slides in from the LEFT on hover (gold band fills the
   bottom 40 % of the line, like a yellow highlighter). Text shifts to
   white on hover so it stays readable on top of the highlight. This is
   visibly different from any standard browser underline — at rest there
   IS no underline, just emphasised gold text.

   Scoped to in-flow text contexts (p, li, blockquote, headings, td) so
   PHP-rendered card components inside `.entry-content` (related-posts
   grid, CTA card, sub-services grid) keep their own link styling. */
.entry-content p a,
.entry-content li a,
.entry-content blockquote a,
.entry-content h2 a,
.entry-content h3 a,
.entry-content h4 a,
.entry-content td a {
	color: var(--gold);
	font-weight: 500;
	text-decoration: none;
	background-image: linear-gradient(
		to top,
		rgba( 212, 164, 55, 0.38 ) 0%,
		rgba( 212, 164, 55, 0.38 ) 40%,
		transparent 40%
	);
	background-size: 0% 100%;        /* zero-width at rest = invisible */
	background-position: 0 0;
	background-repeat: no-repeat;
	padding: 1px 3px;
	margin: 0 -3px;
	border-radius: 2px;
	transition:
		background-size 0.4s var(--ease),
		color 0.25s var(--ease);
}
.entry-content p a:hover,
.entry-content li a:hover,
.entry-content blockquote a:hover,
.entry-content h2 a:hover,
.entry-content h3 a:hover,
.entry-content h4 a:hover,
.entry-content td a:hover {
	color: var(--text);
	background-size: 100% 100%;       /* highlight sweeps in from left */
}
.entry-content ul { padding-left: 1.4em; list-style: disc; }
.entry-content ol { padding-left: 1.4em; list-style: decimal; }
.entry-content ul ul { list-style: circle; }
.entry-content ul ul ul { list-style: square; }
.entry-content li::marker { color: var(--gold); }
.entry-content li + li { margin-top: 0.4em; }
.entry-content img { max-width: 100%; height: auto; border-radius: var(--radius); }
.entry-content blockquote {
	border-left: 3px solid var(--gold);
	padding: 6px 0 6px 22px;
	color: var(--text);
	font-style: italic;
}
.entry-content code {
	background: var(--bg-card-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 2px 6px;
	font-size: 0.9em;
}
.entry-content pre {
	background: var(--bg-card-2);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 18px;
	overflow: auto;
}
.entry-content pre code { background: none; border: 0; padding: 0; }

/* --- Single post ---------------------------------------------------- */
.single-entry { }
.entry-thumb {
	max-width: 1040px;
	margin: 0 auto 40px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--border);
}
.entry-thumb img { display: block; width: 100%; height: auto; }
.entry-footer {
	/* Full container width — sibling of `.entry-content`, NOT capped to
	   the article column. Matches `.related-posts` / `.comments-area`. */
	margin: 96px 0 0;
	padding-top: 48px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.entry-footer .tag-link {
	font-size: 12px;
	color: var(--text-dim);
	border: 1px solid var(--border-strong);
	border-radius: 999px;
	padding: 5px 12px;
	text-decoration: none;
}
.entry-footer .tag-link:hover { color: var(--gold); border-color: var(--gold); }

/* --- Post navigation (Previous / Next) ------------------------------
   Editorial typography pair. No card chrome — just two well-typed
   links that echo the hero-title language (display font, light weight,
   italic gold label + plain white title). Each link is constrained
   in width so the pair sits against the outer edges of the section
   with breathing room between them; titles may wrap to two lines. */

.post-nav {
	margin: 96px 0 0;
	padding-top: 48px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
}
.post-nav > div { min-width: 0; }
.post-nav a {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 340px;
	color: var(--text);
	text-decoration: none;
}
.post-nav-next  { display: flex; justify-content: flex-end; }
.post-nav-next a { text-align: right; align-items: flex-end; }

/* Label — italic gold, sits ABOVE the title as the supporting eyebrow.
   Same font as the title, similar size so the pair reads as a
   unified two-line block (label + title), not as a tiny micro-label
   bolted on top of a larger title. */
.post-nav-label {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 400;
	font-style: italic;
	letter-spacing: -0.01em;
	color: var(--gold);
}
.post-nav-arrow {
	display: inline-flex;
	font-size: 16px;
	font-style: normal;
	line-height: 1;
	transition: transform 0.3s var(--ease);
	will-change: transform;
}
.post-nav-prev a:hover .post-nav-arrow { transform: translateX(-4px); }
.post-nav-next a:hover .post-nav-arrow { transform: translateX(4px); }

/* Title — display font, white, with the last word in a gold-italic
   <span> for the two-color accent. The title block FILLS the card
   width (no align-self override) so:
     - The title's right edge always lines up with the label's right
       edge above it.
     - The underline below spans the same width as the card itself,
       acting as a card-edge accent that flanks the prev/next pair
       symmetrically.
   Text inside wraps left-to-right within that width on both sides
   (Next side overrides the right-text-align inherited from <a>). */
.post-nav-title {
	position: relative;
	display: block;
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--text);
}
.post-nav-next .post-nav-title { text-align: left; }
.post-nav-title span {
	color: var(--gold);
	font-style: italic;
	font-weight: 400;
	transition: text-shadow 0.35s var(--ease);
}
/* Gold underline — full-card-width line that scales from one side
   matching the arrow direction. transform-origin controls which side
   it reveals from; transform: scaleX animates the growth. */
.post-nav-title::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 1px;
	background: linear-gradient(to right,
		rgba(212, 164, 55, 0.4) 0%,
		var(--gold) 100%);
	transform: scaleX(0);
	transform-origin: right center;     /* Previous: reveals from right → left */
	transition: transform 0.5s var(--ease);
}
.post-nav-next .post-nav-title::after {
	background: linear-gradient(to right,
		var(--gold) 0%,
		rgba(212, 164, 55, 0.4) 100%);
	transform-origin: left center;      /* Next: reveals from left → right */
}
.post-nav a:hover .post-nav-title::after { transform: scaleX(1); }
/* Soft glow on the gold accent word — adds warmth on hover without
   shifting the color. */
.post-nav a:hover .post-nav-title span {
	text-shadow:
		0 0 16px rgba(212, 164, 55, 0.45),
		0 0 36px rgba(212, 164, 55, 0.22);
}

/* Empty side (first or last post in the series) — keep the layout
   stable by leaving the grid cell present, just hidden. */
.post-nav > div:empty { visibility: hidden; }

/* --- Post grid (blog / archive / search) ---------------------------- */
.post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

/* Inline body images generated by Image Manager — click to zoom (full size). */
.artland-generated-figure { margin: 28px 0; }
.artland-generated-figure img {
	width: 100%; height: auto; display: block;
	border-radius: 8px;
}
.artland-img-zoom {
	display: block; cursor: zoom-in;
	transition: transform 0.25s var(--ease, ease);
}
.artland-img-zoom:hover { transform: scale(1.005); }

.artland-lightbox {
	position: fixed; inset: 0;
	background: rgba(8, 8, 8, 0.94);
	display: none; align-items: center; justify-content: center;
	z-index: 99999;
	cursor: zoom-out;
}
.artland-lightbox.is-open { display: flex; }
.artland-lightbox-stage {
	max-width: 96vw; max-height: 92vh;
	display: flex; align-items: center; justify-content: center;
}
.artland-lightbox-img {
	max-width: 96vw; max-height: 92vh;
	width: auto; height: auto;
	object-fit: contain;
	border-radius: 6px;
	transition: opacity 0.18s ease;
}
.artland-lightbox-loading {
	position: absolute;
	color: rgba(255, 255, 255, 0.65);
	font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
}
.artland-lightbox-close {
	position: absolute; top: 18px; right: 22px;
	background: none; border: 0; color: rgba(255, 255, 255, 0.7);
	font-size: 36px; line-height: 1; cursor: pointer;
	padding: 6px 14px;
	transition: color 0.2s ease;
}
.artland-lightbox-close:hover { color: #fff; }

/* Sub-services section on hub-style article pages — needs breathing room
   above the EXPLORE eyebrow so it doesn't visually hug the article CTA. */
.page-children {
	margin-top: 96px;
	padding-top: 48px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.page-children-head { margin-bottom: 28px; }

/* Eyebrow ("EXPLORE") matches the hero pattern — gold caps text + gold
   gradient line — so the section reads as part of the same editorial
   system rather than a generic header. */
.page-children .pf-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 14px;
}
.page-children .pf-eyebrow-text {
	color: var(--gold);
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
}
.page-children .pf-eyebrow-line {
	width: 90px;
	height: 1px;
	background: linear-gradient(to right,
		var(--gold) 0%,
		rgba(212, 164, 55, 0.55) 55%,
		rgba(212, 164, 55, 0) 100%);
	display: block;
}

/* Title — display font + light weight + italic gold accent on the trailing
   word, matching .pf-title in the hero. Sized down to ~32px so it reads
   as a section heading rather than a second hero. */
.page-children-title {
	margin: 6px 0 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--text);
}
.page-children-title span {
	color: var(--gold);
	font-weight: 400;
	font-style: italic;
	text-shadow:
		0 0 22px rgba(212, 164, 55, 0.22),
		0 0 55px rgba(212, 164, 55, 0.12);
}

@media (max-width: 768px) {
	.page-children { margin-top: 64px; padding-top: 36px; }
	.page-children-title { font-size: 22px; }
}

.post-card {
	display: flex;
	margin: 0;
	padding: 0;
	min-width: 0;
}

/* Whole card is one link — keyboard-focusable, no nested-link warnings.
   The card chrome (bg, border, shadow) lives on the LINK so all of it
   becomes the hit target and styles cleanly on :hover / :focus-visible. */
.post-card-link {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: linear-gradient(180deg, rgba(20, 20, 20, 0.7), rgba(14, 14, 14, 0.7));
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
	color: inherit;
	text-decoration: none;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.02) inset,
		0 14px 30px -22px rgba(0, 0, 0, 0.55);
	transition:
		transform 0.45s var(--ease),
		border-color 0.45s var(--ease),
		box-shadow 0.45s var(--ease);
}
.post-card-link::after {
	/* Soft gold halo that fades in on hover — uses radial-gradient so it
	   feels like a backlight, not a heavy shadow. */
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(120% 60% at 50% 0%, rgba(212, 164, 55, 0.10), transparent 60%);
	opacity: 0;
	transition: opacity 0.5s var(--ease);
}
.post-card-link:hover {
	transform: translateY(-6px);
	border-color: rgba(212, 164, 55, 0.45);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.04) inset,
		0 24px 50px -24px rgba(0, 0, 0, 0.7),
		0 0 0 1px rgba(212, 164, 55, 0.10);
}
.post-card-link:hover::after { opacity: 1; }
.post-card-link:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

/* Thumbnail area — always renders; falls back to a stylized placeholder
   when the post has no featured image (most of the old posts). */
.post-card-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--bg-card-2);
}
.post-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ease);
}
.post-card-link:hover .post-card-thumb img { transform: scale(1.05); }
/* Subtle bottom darkening so any text below the image (when designs
   add a title overlay later) reads cleanly. Also gives the no-thumb
   placeholder some depth. */
.post-card-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.35) 100%);
	pointer-events: none;
}

.post-card-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px 26px 28px;
	flex: 1 1 auto;
}
.post-card-meta-row {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 14px;
}
.post-card-cat {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--gold);
}
.post-card-title {
	display: block;
	font-family: var(--font-display);
	font-size: 21px;
	font-weight: 500;
	line-height: 1.22;
	letter-spacing: -0.012em;
	color: var(--text);
	margin: 0;
	transition: color 0.25s var(--ease);
}
.post-card-title span {
	color: var(--gold);
	font-weight: 400;
	font-style: italic;
}
.post-card-excerpt {
	display: block;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.7;
	color: var(--text-dim);
	margin: 0;
}
/* CTA — proper button-styled "Read article" pinned to the bottom of the
   card (margin-top:auto). Same outline-button language as the submit /
   Browse button (.btn-outline pattern). */
.post-card-cta {
	margin-top: auto;
	padding-top: 6px;
}
.post-card-cta-btn {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	border: 1px solid var(--border-strong);
	border-radius: 6px;
	background: transparent;
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--text-dim);
	transition:
		border-color 0.35s var(--ease),
		color 0.35s var(--ease),
		background-color 0.35s var(--ease),
		gap 0.35s var(--ease);
}
.post-card-cta-btn::after {
	content: "\2192";
	transition: transform 0.35s var(--ease);
}
.post-card-link:hover .post-card-cta-btn {
	color: var(--gold);
	border-color: var(--gold);
	background: rgba(212, 164, 55, 0.06);
	gap: 14px;
}
.post-card-link:hover .post-card-cta-btn::after { transform: translateX(3px); }

/* --- Pagination ----------------------------------------------------- */
.artland-pagination {
	margin-top: 48px;
	display: flex;
	justify-content: center;
}
/* WordPress's `paginate_links( ['type' => 'list'] )` wraps the items in
   <ul class="page-numbers"> AND gives each inner item the same
   .page-numbers class. Without this reset, the wrapper picks up the
   per-item border/radius styles below and outlines the whole strip. */
.artland-pagination ul.page-numbers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	background: transparent;
	border: 0;
	border-radius: 0;
}
.artland-pagination ul.page-numbers > li {
	margin: 0;
	display: inline-flex;
}
.artland-pagination ul.page-numbers > li > .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	margin: 0;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: transparent;
	color: var(--text-dim);
	text-decoration: none;
	transition:
		border-color 0.25s var(--ease),
		color 0.25s var(--ease),
		background-color 0.25s var(--ease);
}
.artland-pagination ul.page-numbers > li > a.page-numbers:hover {
	border-color: var(--gold);
	color: var(--gold);
}
.artland-pagination ul.page-numbers > li > .page-numbers.current {
	background: var(--gold);
	border-color: var(--gold);
	color: #111;
	font-weight: 600;
}
/* Ellipsis "…" — bare text, no button chrome. */
.artland-pagination ul.page-numbers > li > .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: var(--text-muted);
	letter-spacing: 0.16em;
	cursor: default;
}
.artland-pagination ul.page-numbers > li > .page-numbers.dots:hover {
	border-color: transparent;
	color: var(--text-muted);
}

/* --- Search form ---------------------------------------------------- */
.search-form {
	display: flex;
	gap: 10px;
	max-width: 480px;
}
.search-form .search-field {
	flex: 1;
	background: var(--bg-card-2);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	color: var(--text);
	padding: 12px 16px;
	font-family: var(--font-body);
	font-size: 15px;
}
.search-form .search-field:focus { outline: none; border-color: var(--gold); }
.search-form .search-submit {
	background: var(--gold);
	border: 0;
	border-radius: var(--radius);
	color: #111;
	font-family: var(--font-display);
	font-weight: 600;
	padding: 0 22px;
	cursor: pointer;
}
.search-form .search-submit:hover { background: var(--gold-bright); }

/* --- No results / 404 ----------------------------------------------- */
.no-results,
.error-404 {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}
.error-404-code {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(80px, 16vw, 160px);
	line-height: 1;
	color: var(--gold);
	opacity: 0.85;
}
.no-results p,
.error-404 p { color: var(--text-dim); margin: 14px 0 24px; }
.error-404 .search-form { margin: 0 auto; }

/* --- Post CTA card -------------------------------------------------- */

/* The CTA is appended INSIDE `.entry-content` so YARPP's related-posts
   block can follow it. Without this reset, `.entry-content a` (gold,
   underlined) cascades onto our buttons and links — most visibly making
   the primary button's text invisible (gold on gold). */
.entry-content .post-cta a,
.entry-content .post-cta a:visited {
	color: inherit;
	text-decoration: none;
}

.post-cta {
	max-width: 820px;
	margin: 56px auto 0;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 44px 48px 36px;
	background:
		linear-gradient(135deg, rgba(212, 164, 55, 0.05) 0%, transparent 45%),
		linear-gradient(180deg, rgba(20, 20, 20, 0.92), rgba(12, 12, 12, 0.92));
	/* Subtle gold edge — premium frame for the closing CTA. */
	border: 1px solid rgba(212, 164, 55, 0.30);
	border-radius: 18px;
	box-shadow:
		0 0 0 1px rgba(212, 164, 55, 0.04) inset,
		0 1px 0 rgba(212, 164, 55, 0.10) inset,
		0 30px 60px -36px rgba(0, 0, 0, 0.7);
}
.post-cta::before {
	/* Soft gold halo from the top-right corner. */
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(80% 80% at 100% 0%, rgba(212, 164, 55, 0.10), transparent 55%);
	pointer-events: none;
	z-index: 1;
}
/* Subtle topographic / line texture in the background — adds depth
   without competing with the content. Two SVGs layered for a wavy
   contour effect. Inline data URIs so no extra HTTP request. */
.post-cta-texture {
	position: absolute;
	inset: 0;
	opacity: 0.5;
	pointer-events: none;
	background:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='240' viewBox='0 0 480 240'><g fill='none' stroke='%23d4a437' stroke-opacity='0.06' stroke-width='1'><path d='M-20 60 Q 80 30, 180 60 T 380 60 T 580 60'/><path d='M-20 110 Q 80 80, 180 110 T 380 110 T 580 110'/><path d='M-20 160 Q 80 130, 180 160 T 380 160 T 580 160'/><path d='M-20 210 Q 80 180, 180 210 T 380 210 T 580 210'/></g></svg>") center/cover no-repeat;
	mix-blend-mode: screen;
	z-index: 0;
}

/* Top section — logo + body, as before. */
.post-cta-head {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 32px;
	align-items: start;
	position: relative;
	z-index: 2;
}

/* Brand logo mark in the left column — stretches to the full row height
   so the image flex-centers vertically against the body's content
   (instead of sitting at the top alongside the eyebrow). */
.post-cta-mark {
	justify-self: center;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 120px;
}
.post-cta-mark img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 110px;
	opacity: 0.9;
}

.post-cta-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: relative;
	z-index: 2;
}
.post-cta-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 2px;
}
.post-cta-eyebrow-text {
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--gold);
}
.post-cta-eyebrow-line {
	width: 70px;
	height: 1px;
	background: linear-gradient(to right,
		var(--gold) 0%,
		rgba(212, 164, 55, 0.55) 55%,
		rgba(212, 164, 55, 0) 100%);
}
/* The CTA renders inside `.entry-content`, where `.entry-content h2`
   sets `margin-top: 1.8em` — that would shove the title ~36px below the
   eyebrow. Override here with the explicit 0.4em + double the selector
   for specificity. */
.entry-content .post-cta .post-cta-title,
.post-cta .post-cta-title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: var(--text);
	margin: 0.4em 0 0;
}
.post-cta-title span {
	color: var(--gold);
	font-weight: 400;
	font-style: italic;
}
.post-cta-subtitle {
	font-family: var(--font-body);
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--text-dim);
	margin: 0;
	max-width: 56ch;
}

/* Trust signal — quiet line under the subtitle that answers "what
   happens if I click?" hesitation. Small caps + gold-dot separators on
   the · character. Mid-weight color so it reads as supporting copy, not
   competing with the button. */
.post-cta-trust {
	display: inline-block;
	margin: 4px 0 0;
	/* Roomier padding + soft rounded rectangle (was a full pill, which stretched
	   awkwardly around multi-line text). Soft gold gradient background +
	   a slightly stronger gold border give the badge more presence. */
	padding: 14px 22px;
	background:
		linear-gradient(135deg, rgba(212, 164, 55, 0.10), rgba(212, 164, 55, 0.03));
	border: 1px solid rgba(212, 164, 55, 0.22);
	border-radius: 14px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.04),
		0 8px 22px -16px rgba(0, 0, 0, 0.55);
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.55;
	text-transform: uppercase;
	color: var(--text-dim);
	align-self: flex-start;
	max-width: 100%;
}

/* Actions — gold-filled primary button + quiet secondary link beneath. */
.post-cta-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-top: 4px;
}
/* Primary button — gold-filled, dark text, arrow on the right. */
.entry-content .post-cta .post-cta-btn,
.post-cta .post-cta-btn {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 16px 26px;
	/* `.entry-content a` applies `margin: 0 -3px` for the marker-highlight
	   trick — that nudges the button 3 px left of the text above it. Reset. */
	margin: 0;
	border-radius: 8px;
	background: var(--gold);
	color: #0a0a0a;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	text-decoration: none;
	min-width: 280px;
	transition:
		background-color 0.35s var(--ease),
		transform 0.35s var(--ease),
		box-shadow 0.35s var(--ease);
}
.post-cta-btn > * { position: relative; z-index: 1; color: #0a0a0a; }
.post-cta-btn-label {
	flex: 1 1 auto;
	text-align: center;
}
.post-cta-btn-icon-right {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform 0.35s var(--ease);
}
.post-cta-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.20), transparent);
	transform: translateX(-100%);
	transition: transform 0.8s ease;
	pointer-events: none;
}
.entry-content .post-cta .post-cta-btn:hover,
.post-cta .post-cta-btn:hover {
	background: var(--gold-bright);
	transform: translateY(-3px);
	box-shadow: 0 12px 32px -10px rgba(212, 164, 55, 0.40);
}
.post-cta-btn:hover::before { transform: translateX(100%); }
.post-cta-btn:hover .post-cta-btn-icon-right { transform: translateX(4px); }

/* Secondary link — flanked by short horizontal lines. Now constrained to
   the same min-width as the primary button (280 px), and centered under
   it, so the lines + text never extend wider than the button above. */
.post-cta-link-wrap {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	width: 280px;
	max-width: 100%;
}
.post-cta-link-line {
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(to right, rgba(212, 164, 55, 0), rgba(212, 164, 55, 0.40), transparent);
}
/* The .post-cta link inherits the editorial marker-highlight effect from
   .entry-content a (background-image gradient). Hard-override the lot so
   the secondary link reads as a quiet CTA accent, not a body link. */
.entry-content .post-cta .post-cta-link,
.post-cta .post-cta-link {
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-muted);
	text-decoration: none;
	white-space: nowrap;
	background: none;             /* kill the marker highlight inherited from .entry-content a */
	background-image: none;
	background-size: auto;
	padding: 0;
	margin: 0;
	border-radius: 0;
	transition: color 0.25s var(--ease);
}
.entry-content .post-cta .post-cta-link:hover,
.post-cta .post-cta-link:hover {
	color: var(--gold);
	background: none;
	background-image: none;
	background-size: auto;
}

/* Feature pills row at the bottom — three (or more) capability badges
   that double as soft service-page links. The whole row sits on a
   subtle top divider so it reads as "supporting info" after the CTA. */
.post-cta-features {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
	padding-top: 28px;
	border-top: 1px solid rgba(212, 164, 55, 0.12);
}
.post-cta-feature {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 6px 4px;
	text-decoration: none;
	color: var(--text-dim);
	transition: color 0.25s var(--ease);
}
.post-cta-feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(212, 164, 55, 0.35);
	background: rgba(212, 164, 55, 0.04);
	color: var(--gold);
	flex-shrink: 0;
	transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.post-cta-feature-icon svg,
.post-cta-feature-icon i { width: 16px; height: 16px; stroke-width: 1.6; }
.post-cta-feature-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.post-cta-feature-label {
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text);
	line-height: 1.2;
}
.post-cta-feature-tagline {
	font-family: var(--font-body);
	font-size: 12.5px;
	color: var(--text-muted);
	line-height: 1.3;
}
a.post-cta-feature:hover .post-cta-feature-icon {
	border-color: var(--gold);
	background: rgba(212, 164, 55, 0.10);
}
a.post-cta-feature:hover .post-cta-feature-label { color: var(--gold); }

@media (max-width: 720px) {
	.post-cta { padding: 32px 24px; gap: 24px; }
	.post-cta-head { grid-template-columns: 1fr; gap: 18px; }
	.post-cta-mark { max-width: 80px; margin: 0; }
	.entry-content .post-cta .post-cta-btn,
	.post-cta .post-cta-btn { min-width: 0; width: 100%; }
	.post-cta-features { gap: 18px; }
}

/* --- Related posts (YARPP, theme template) -------------------------- */

/* YARPP appends its output inside .entry-content via the_content() filter,
   so the .entry-content heading rules (`font-weight: 700`, `margin-top: 1.8em`,
   font-size by tag) cascade into our related-post titles. Reset all of them
   on the .related-posts subtree so the editorial card layout below has full
   control. */
.related-posts h3,
.related-posts h4,
.related-posts h4 a {
	font-family: var(--font-display);
	margin-top: 0;
}
.related-posts a { text-decoration: none; }

.related-posts {
	margin: 96px 0 0;
	padding-top: 48px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.related-posts-head { margin-bottom: 28px; }

/* Eyebrow ("KEEP READING") + gold gradient line — mirrors the pattern
   used by `.page-children-head` so the two below-article sections feel
   like part of the same editorial system. */
.related-posts .pf-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 14px;
}
.related-posts .pf-eyebrow-text {
	color: var(--gold);
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
}
.related-posts .pf-eyebrow-line {
	width: 90px;
	height: 1px;
	background: linear-gradient(to right,
		var(--gold) 0%,
		rgba(212, 164, 55, 0.55) 55%,
		rgba(212, 164, 55, 0) 100%);
	display: block;
}

/* Title — same display + light + italic-gold-accent pattern as
   `.page-children-title`. Selectors are doubled with `.entry-content`
   because YARPP injects this aside INSIDE the_content, so the bare
   `.entry-content h3` editorial rule (weight 700, size 22px,
   margin-top 1.8em) would otherwise win on specificity. */
.entry-content .related-posts-title,
.related-posts-title {
	margin: 6px 0 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--text);
}
.entry-content .related-posts-title span,
.related-posts-title span {
	color: var(--gold);
	font-weight: 400;
	font-style: italic;
	text-shadow:
		0 0 22px rgba(212, 164, 55, 0.22),
		0 0 55px rgba(212, 164, 55, 0.12);
}

@media (max-width: 768px) {
	.entry-content .related-posts-title,
	.related-posts-title { font-size: 22px; }
}
.related-posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.related-post {
	display: flex;
	margin: 0;
	padding: 0;
	min-width: 0;
}
/* Single anchor wraps everything — mirrors the .post-card-link pattern. */
.related-post-link {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: linear-gradient(180deg, rgba(20, 20, 20, 0.7), rgba(14, 14, 14, 0.7));
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 14px;
	color: inherit;
	text-decoration: none;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.02) inset,
		0 14px 30px -22px rgba(0, 0, 0, 0.55);
	transition:
		transform 0.45s var(--ease),
		border-color 0.45s var(--ease),
		box-shadow 0.45s var(--ease);
}
.related-post-link::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(120% 60% at 50% 0%, rgba(212, 164, 55, 0.10), transparent 60%);
	opacity: 0;
	transition: opacity 0.5s var(--ease);
}
.related-post-link:hover {
	transform: translateY(-4px);
	border-color: rgba(212, 164, 55, 0.45);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.04) inset,
		0 20px 40px -22px rgba(0, 0, 0, 0.65),
		0 0 0 1px rgba(212, 164, 55, 0.10);
}
.related-post-link:hover::after { opacity: 1; }
.related-post-link:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

/* Thumbnail strip — same fallback pattern as blog cards. */
.related-post-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--bg-card-2);
}
.related-post-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ease);
}
.related-post-link:hover .related-post-thumb img { transform: scale(1.05); }
.related-post-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.35) 100%);
	pointer-events: none;
}
.related-post-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 20px 22px;
	flex: 1 1 auto;
}
.related-post-cat {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--gold);
}
.related-post-title {
	display: block;
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.28;
	letter-spacing: -0.01em;
	color: var(--text);
	margin: 0;
	transition: color 0.25s var(--ease);
}
.related-post-title span {
	color: var(--gold);
	font-weight: 400;
	font-style: italic;
}
.related-post-excerpt {
	display: block;
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1.65;
	color: var(--text-dim);
	margin: 0;
}

/* CTA — pinned to the bottom of the card so every related card ends with
   the same button regardless of whether it had an image / excerpt. Same
   outline-button language as the blog cards but tighter to match the
   smaller scale. */
.related-post-cta {
	margin-top: auto;
	padding-top: 4px;
}
.related-post-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 18px;
	border: 1px solid var(--border-strong);
	border-radius: 6px;
	background: transparent;
	font-family: var(--font-display);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--text-dim);
	transition:
		border-color 0.35s var(--ease),
		color 0.35s var(--ease),
		background-color 0.35s var(--ease),
		gap 0.35s var(--ease);
}
.related-post-cta-btn::after {
	content: "\2192";
	transition: transform 0.35s var(--ease);
}
.related-post-link:hover .related-post-cta-btn {
	color: var(--gold);
	border-color: var(--gold);
	background: rgba(212, 164, 55, 0.06);
	gap: 12px;
}
.related-post-link:hover .related-post-cta-btn::after { transform: translateX(3px); }

@media (max-width: 920px) {
	.related-posts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.related-posts-grid { grid-template-columns: 1fr; }
}

/* --- Comments ------------------------------------------------------- */
.comments-area {
	/* Width-matched to `.related-posts` / `.page-children` so all
	   below-article sections share the same container edge. */
	margin: 96px 0 0;
	padding-top: 48px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Comment list (existing replies) */
.comments-area .comment-list { list-style: none; padding: 0; margin: 0 0 36px; }
.comments-area .comment-list li { margin-top: 18px; }
.comments-title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(24px, 2.4vw, 30px);
	letter-spacing: -0.015em;
	color: var(--text);
	margin: 0 0 22px;
}
.comments-title::before {
	content: "";
	display: block;
	width: 36px;
	height: 1px;
	background: var(--gold);
	margin-bottom: 14px;
	opacity: 0.8;
}
.comments-area .comment-body {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 22px 26px;
	color: var(--text-dim);
	line-height: 1.7;
	font-size: 15px;
}
.comments-area .comment-author {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}
.comments-area .comment-author .fn {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--text);
	font-style: normal;
}
.comments-area .comment-author .says { display: none; }
.comments-area .comment-author img {
	border-radius: 50%;
	border: 1px solid var(--border-strong);
}
.comments-area .comment-metadata {
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 12px;
}
.comments-area .comment-metadata a {
	color: var(--text-muted);
	text-decoration: none;
}
.comments-area .comment-metadata a:hover { color: var(--gold); }
.comments-area .reply { margin-top: 14px; }
.comments-area .comment-reply-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold);
	text-decoration: none;
}
.comments-area .comment-reply-link:hover { color: var(--gold-bright); }
.comments-area .children {
	list-style: none;
	padding: 0;
	margin: 18px 0 0 28px;
	border-left: 1px solid var(--border);
	padding-left: 22px;
}
.comments-area .no-comments {
	color: var(--text-muted);
	font-style: italic;
}

/* Comment FORM ------------------------------------------------------ */
.comments-area .comment-respond {
	margin-top: 8px;
}
.comments-area .comment-reply-title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(24px, 2.4vw, 30px);
	letter-spacing: -0.015em;
	color: var(--text);
	margin: 0 0 8px;
}
/* "Leave a Reply" — comments.php passes title_reply with "Reply" in a
   <span>, matching the gold-italic accent used everywhere else. */
.comments-area .comment-reply-title span {
	color: var(--gold);
	font-style: italic;
	font-weight: 400;
}
.comments-area .comment-reply-title::before {
	content: "";
	display: block;
	width: 36px;
	height: 1px;
	background: var(--gold);
	margin-bottom: 14px;
	opacity: 0.8;
}
.comments-area .comment-reply-title small {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.06em;
	color: var(--text-muted);
}
.comments-area .comment-reply-title small a {
	color: var(--gold);
	text-decoration: none;
}
.comments-area .comment-form {
	display: grid;
	gap: 18px;
	margin-top: 18px;
}
.comments-area .comment-notes,
.comments-area .logged-in-as {
	margin: 0;
	font-size: 13px;
	color: var(--text-muted);
}
.comments-area .comment-notes .required {
	color: #ff6060;
	margin-left: 4px;
}
.comments-area .comment-form-comment,
.comments-area .comment-form-author,
.comments-area .comment-form-email,
.comments-area .comment-form-url {
	margin: 0;
}

/* Two-column layout for Name / Email rows on wide screens. */
@media (min-width: 720px) {
	.comments-area .comment-form-author,
	.comments-area .comment-form-email {
		display: inline-block;
		width: calc(50% - 9px);
		vertical-align: top;
	}
	.comments-area .comment-form-author { margin-right: 14px; }
}

.comments-area label {
	display: block;
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-dim);
	margin-bottom: 8px;
}
.comments-area .required-field-message,
.comments-area label .required {
	color: #ff6060;
	margin-left: 4px;
	font-size: 10px;
	letter-spacing: 0.18em;
}

.comments-area input[type="text"],
.comments-area input[type="email"],
.comments-area input[type="url"],
.comments-area textarea {
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
	background: rgba(10, 10, 10, 0.75);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 8px;
	color: var(--text);
	padding: 13px 16px;
	font-family: var(--font-body);
	font-size: 14.5px;
	outline: none;
	transition:
		border-color .25s var(--ease),
		background-color .25s var(--ease),
		box-shadow .35s var(--ease);
}
.comments-area textarea {
	min-height: 160px;
	resize: vertical;
	line-height: 1.6;
}
.comments-area input::placeholder,
.comments-area textarea::placeholder { color: var(--text-muted); }
.comments-area input[type="text"]:hover,
.comments-area input[type="email"]:hover,
.comments-area input[type="url"]:hover,
.comments-area textarea:hover { border-color: rgba(255, 255, 255, 0.18); }
.comments-area input[type="text"]:focus,
.comments-area input[type="email"]:focus,
.comments-area input[type="url"]:focus,
.comments-area textarea:focus {
	border-color: rgba(212, 164, 55, 0.6);
	background: rgba(10, 10, 10, 0.9);
	box-shadow:
		0 0 0 1px rgba(212, 164, 55, 0.15),
		0 0 22px -6px rgba(212, 164, 55, 0.25);
}

/* Cookie-consent checkbox row */
.comments-area .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 13px;
	color: var(--text-dim);
}
.comments-area .comment-form-cookies-consent input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 4px;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
	position: relative;
	transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.comments-area .comment-form-cookies-consent input[type="checkbox"]:hover {
	border-color: rgba(212, 164, 55, 0.6);
}
.comments-area .comment-form-cookies-consent input[type="checkbox"]:checked {
	background-color: var(--gold);
	border-color: var(--gold);
}
.comments-area .comment-form-cookies-consent input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'><path d='M1 5l3.5 3.5L11 1' stroke='%230a0a0a' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / 10px 8px;
}
.comments-area .comment-form-cookies-consent label {
	display: inline;
	margin: 0;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--text-dim);
}

/* Submit — matches the .btn-outline + Quform submit pattern. */
.comments-area .form-submit { margin: 8px 0 0; }
.comments-area .submit {
	position: relative;
	overflow: hidden;
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 38px;
	border-radius: 6px;
	border: 1px solid var(--border-strong);
	background: transparent;
	color: var(--text);
	cursor: pointer;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	transition:
		transform 0.45s ease,
		border-color 0.45s ease,
		color 0.45s ease,
		background-color 0.45s ease,
		box-shadow 0.45s ease;
}
.comments-area .submit::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
	transform: translateX(-100%);
	transition: transform 0.8s ease;
	pointer-events: none;
}
.comments-area .submit:hover::before { transform: translateX(100%); }
.comments-area .submit:hover {
	border-color: var(--gold);
	color: var(--gold);
	background: rgba(212, 164, 55, 0.06);
	transform: translateY(-4px);
	box-shadow: 0 10px 30px rgba(212, 164, 55, 0.10);
}
.comments-area .submit:active { transform: translateY(0); }

/* --- Responsive ----------------------------------------------------- */
@media (max-width: 980px) {
	.post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
	.post-grid { grid-template-columns: 1fr; }
	.page-hero { padding-top: 116px; }
	.post-nav { flex-direction: column; }
}

/* --- Header nav: WP menu adjustment -----------------------------------
   The static design hard-coded UPPERCASE nav labels. WordPress menu
   items are entered in natural case, so the top-level nav is uppercased
   here to match the design (megamenu columns/links keep their case). */
.primary-nav > ul > li > a {
	text-transform: uppercase;
}