/*
 * News section — archive + single article styling.
 *
 * Composes against the existing editorial vocabulary in sections.css so the
 * news pages feel like a chapter of the same book, not a separate publication:
 *
 *   • Section padding/background → reuses .liv-section + .liv-section--darker
 *   • Green eyebrow opener       → reuses .liv-section-mark + .liv-section-mark__bar
 *   • Half-width chapter break   → reuses <hr class="liv-section-rule">
 *   • Featured article layout    → mirrors .liv-editorial__inner (1fr 1fr)
 *   • Card left-border accent    → echoes .liv-construction__card
 *   • Date pill                  → echoes .liv-lifestyle__chip recolored leaf
 *
 * Order in this file:
 *   1. News hero (archive opener)
 *   2. News featured (lead article — editorial split)
 *   3. News archive grid + cards
 *   4. News detail (single article: hero, prose, footer rule)
 *   5. News related strip
 */

/* Cancel the theme.json block-gap that WP injects between the header
 * template-part and <main>, so the news hero (and detail hero) sits flush
 * against the bottom edge of the navbar header. Mirrors the .liv-main--exploreliv
 * rule in sections.css. */
.liv-main--news {
	margin-block-start: 0;
}

/* ─── 1. News hero ─────────────────────────────────────────── */

/* The archive opener stacks the section mark, eyebrow, and display title at
 * the bottom of a dark band so the chapter break that follows feels like a
 * literal page-turn into the article grid. */
.liv-news-hero {
	position: relative;
	overflow: hidden;
	min-height: 44vh;
	display: flex;
	align-items: flex-end;
}
.liv-news-hero__media {
	position: absolute;
	inset: 0;
	background-color: var(--liv-ink-900);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.liv-news-hero__overlay {
	position: absolute;
	inset: 0;
	/* Slightly stronger gradient so the eyebrow/title/lead at the bottom of
	 * the hero stay legible over a bright photo background. The top stays
	 * lightly tinted so the photo still reads as the dominant element. */
	background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.78) 100%);
}
.liv-news-hero > .liv-container {
	position: relative;
	width: 100%;
}
.liv-news-hero .liv-section__title {
	max-width: 22ch;
}
.liv-news-hero .liv-section__lead {
	max-width: 56ch;
	margin-block-start: 0.75rem;
}
/* Lift small type over busy photos with a soft halo (same recipe as exploreliv-intro). */
.liv-news-hero .liv-eyebrow,
.liv-news-hero .liv-section__lead {
	text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.5);
}
.liv-news-hero .liv-section__title {
	text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}

/* ─── 2. News dispatch (latest article hero panel) ───────────
 *
 * Two-panel "broadcast console" that replaces the previous
 * editorial-split featured-article rendering. Lives inside
 * .liv-news-hero--dispatch on patterns/news-hero.php and consists of:
 *
 *   .liv-news-dispatch-frame      — outer canvas + corner brackets
 *     .liv-news-dispatch__ribbon  — top-right status chip (pulsing dot)
 *     .liv-news-dispatch__brand   — Liv logo + archive-label strip
 *     .liv-news-dispatch__rule    — hairline divider
 *     .liv-news-dispatch__pair    — image | text-panel grid
 *       .liv-news-dispatch__media — featured image, mirrored notches
 *       .liv-news-dispatch__panel — green info box, mirrored notches
 *
 * The green panel only wraps the article TEXT — date, title, excerpt,
 * CTA. The ribbon and brand strip sit above it on the black canvas so
 * the "info box surrounds only the text" intent reads clearly.
 *
 * Motion gates: prefers-reduced-motion: reduce disables the pulse +
 * the bracket-extension hover. The :root token swap in tokens.css
 * already zeroes --liv-transition, so transitions don't need
 * individual gating beyond the keyframe animation.
 */

/* Base hero overrides for the dispatch variant — the original
 * .liv-news-hero rules above this block use flex/min-height to anchor
 * a centered headline at the bottom of a photo band, which fights the
 * dispatch panel's natural box flow. Reset for the modifier. */
.liv-news-hero--dispatch {
	display: block;
	align-items: initial;
	min-height: 0;
	overflow: visible;
}
.liv-news-hero--dispatch > .liv-container {
	position: static;
}

/* ─── Frame: bracket-cornered canvas around the whole module ─── */

.liv-news-dispatch-frame {
	position: relative;
	padding: clamp(1.25rem, 2.5vw, 2.25rem);
}

/* Four L-shaped corner brackets in leaf-500, ~28px legs. Built with
 * absolutely-positioned spans + two-side borders so each corner is a
 * single drawn glyph (no SVG). On hover/focus-within, the brackets
 * extend ~4px outward to give the whole module a subtle focus-pull. */
.liv-news-dispatch-frame__bracket {
	position: absolute;
	width: 28px;
	height: 28px;
	pointer-events: none;
	transition: transform var(--liv-transition);
}
.liv-news-dispatch-frame__bracket--tl {
	top: 0;
	left: 0;
	border-top: 2px solid var(--liv-leaf-500);
	border-left: 2px solid var(--liv-leaf-500);
}
.liv-news-dispatch-frame__bracket--tr {
	top: 0;
	right: 0;
	border-top: 2px solid var(--liv-leaf-500);
	border-right: 2px solid var(--liv-leaf-500);
}
.liv-news-dispatch-frame__bracket--bl {
	bottom: 0;
	left: 0;
	border-bottom: 2px solid var(--liv-leaf-500);
	border-left: 2px solid var(--liv-leaf-500);
}
.liv-news-dispatch-frame__bracket--br {
	bottom: 0;
	right: 0;
	border-bottom: 2px solid var(--liv-leaf-500);
	border-right: 2px solid var(--liv-leaf-500);
}
.liv-news-dispatch-frame:hover .liv-news-dispatch-frame__bracket--tl,
.liv-news-dispatch-frame:focus-within .liv-news-dispatch-frame__bracket--tl {
	transform: translate(-4px, -4px);
}
.liv-news-dispatch-frame:hover .liv-news-dispatch-frame__bracket--tr,
.liv-news-dispatch-frame:focus-within .liv-news-dispatch-frame__bracket--tr {
	transform: translate(4px, -4px);
}
.liv-news-dispatch-frame:hover .liv-news-dispatch-frame__bracket--bl,
.liv-news-dispatch-frame:focus-within .liv-news-dispatch-frame__bracket--bl {
	transform: translate(-4px, 4px);
}
.liv-news-dispatch-frame:hover .liv-news-dispatch-frame__bracket--br,
.liv-news-dispatch-frame:focus-within .liv-news-dispatch-frame__bracket--br {
	transform: translate(4px, 4px);
}

/* ─── Ribbon: top-right status chip ─────────────────────────── */

.liv-news-dispatch__ribbon {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	float: right;
	padding: 0.5rem 1rem 0.5rem 0.875rem;
	margin-bottom: 0.75rem;
	background: var(--liv-leaf-500);
	color: var(--liv-ink-900);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	/* Diagonal notch on the bottom-left corner — same notch language
	 * the green panel uses below, so the ribbon reads as a piece of the
	 * same console family. */
	clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
}
.liv-news-dispatch__ribbon-id {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.liv-news-dispatch__ribbon-sep {
	opacity: 0.5;
}
.liv-news-dispatch__pulse {
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--liv-ink-900);
	flex-shrink: 0;
}
.liv-news-dispatch-frame.is-pulsing .liv-news-dispatch__pulse {
	animation: liv-news-dispatch-pulse 1.4s ease-in-out infinite;
}
@keyframes liv-news-dispatch-pulse {
	0%, 100% { transform: scale(1);    opacity: 1; }
	50%      { transform: scale(0.65); opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
	.liv-news-dispatch-frame.is-pulsing .liv-news-dispatch__pulse {
		animation: none;
	}
}

/* ─── Brand strip: logo + archive label on the black canvas ─── */

.liv-news-dispatch__brand {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	color: var(--liv-paper);
	/* clear:both so the floated ribbon doesn't push the brand strip
	 * sideways or shrink-wrap it; the strip needs to span full width. */
	clear: both;
}
.liv-news-dispatch__logo {
	display: inline-flex;
	align-items: center;
	color: var(--liv-paper);
}
.liv-news-dispatch__logo svg {
	width: clamp(56px, 6vw, 84px);
	height: auto;
	display: block;
}
/* Recolor the leaf inside the logo SVG — both `g` groups use
 * currentColor, but the second group (the leaf) gets a specific green
 * via a nested rule so the wordmark stays paper-white. */
.liv-news-dispatch__logo svg > g > g:nth-of-type(2) path {
	fill: var(--liv-leaf-500);
}
.liv-news-dispatch__brand-meta {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--liv-paper);
}

/* ─── Hairline rule between brand strip and panel pair ─────── */

.liv-news-dispatch__rule {
	border: none;
	height: 1px;
	background: linear-gradient(90deg, var(--liv-leaf-500) 0, var(--liv-leaf-500) 64px, rgba(255,255,255,0.08) 64px, rgba(255,255,255,0.08) 100%);
	margin: clamp(0.875rem, 1.5vw, 1.25rem) 0 clamp(1rem, 2vw, 1.5rem);
}

/* ─── Pair: image | text-panel grid ─────────────────────────── */

.liv-news-dispatch__pair {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(1rem, 2vw, 1.75rem);
	align-items: stretch;
}

/* ─── Image (left panel) ────────────────────────────────────── */

.liv-news-dispatch__media {
	position: relative;
	display: block;
	overflow: hidden;
	background:
		radial-gradient(100% 100% at 100% 100%, rgba(151,196,89,0.20), transparent 60%),
		linear-gradient(135deg, #131a14 0%, #0a0a0a 60%, #0a0a0a 100%);
	box-shadow: 0 24px 60px -20px rgba(0,0,0,0.55);
	/* Mirrored notches — top-RIGHT + bottom-LEFT cut, so when paired
	 * with the green panel (which cuts top-LEFT + bottom-RIGHT) the two
	 * panels read as mirrored siblings sharing one shape language. */
	clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
	min-height: clamp(280px, 38vw, 480px);
}
.liv-news-dispatch__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--liv-transition-slow);
}
.liv-news-dispatch__media:hover img,
.liv-news-dispatch__media:focus-visible img {
	transform: scale(1.025);
}
.liv-news-dispatch__media-chip {
	position: absolute;
	top: 0.875rem;
	left: 0.875rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.6rem;
	background: rgba(0,0,0,0.65);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--liv-leaf-300);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 0.22em;
	line-height: 1;
	text-transform: uppercase;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(151,196,89,0.4);
}
.liv-news-dispatch__media-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--liv-leaf-300);
}

/* ─── Panel (right): the green "info box" wrapping the text ─── */

.liv-news-dispatch__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(0.625rem, 1.2vw, 0.875rem);
	padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.25rem);
	background: var(--liv-leaf-500);
	color: var(--liv-ink-900);
	box-shadow: 0 24px 60px -20px rgba(0,0,0,0.55);
	/* Mirrored notches — top-LEFT + bottom-RIGHT cut, opposite of the
	 * image. This is the move that turns "image and a green box" into
	 * "two mirrored panels sharing one shape language." */
	clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
	/* Hairline scanline overlay — 1px stripes at 4% opacity for a faint
	 * "console signal" texture. Applied via the ::before pseudo so it
	 * sits behind the content but inside the clip-path. */
	overflow: hidden;
}
.liv-news-dispatch__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: repeating-linear-gradient(
		180deg,
		rgba(0,0,0,0.05) 0,
		rgba(0,0,0,0.05) 1px,
		transparent 1px,
		transparent 4px
	);
	/* Fade out near the title rows so the texture never fights legibility
	 * on the longest runs of type. */
	mask-image: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, transparent 22%, transparent 80%, rgba(0,0,0,0.7) 100%);
	-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, transparent 22%, transparent 80%, rgba(0,0,0,0.7) 100%);
}

/* Three tiny vertical edge ticks on left/right margins — "instrument
 * panel" detail. Pure CSS, no images. */
.liv-news-dispatch__ticks {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 14px;
	pointer-events: none;
	z-index: 2;
}
.liv-news-dispatch__ticks--left  { left: 6px;  }
.liv-news-dispatch__ticks--right { right: 6px; }
.liv-news-dispatch__ticks span {
	display: block;
	width: 2px;
	height: 8px;
	background: var(--liv-ink-900);
	opacity: 0.35;
	border-radius: 1px;
}

/* Broadcast meta line — the "BROADCAST · FILE 001 / WELD · SIGNAL LIVE"
 * strip just inside the top of the green panel. Below the cut corner. */
.liv-news-dispatch__meta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(0,0,0,0.78);
	z-index: 1;
	position: relative;
}
.liv-news-dispatch__meta-dot {
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--liv-ink-900);
}

/* Date — the visual hero of the panel. clamp() carries the big-to-small
 * fluid scaling so the type sits proportional to the panel at every
 * viewport size. */
.liv-news-dispatch__date {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	letter-spacing: 0.08em;
	line-height: 1;
	color: var(--liv-ink-900);
	position: relative;
	z-index: 1;
}

/* Title: bold display, ink-900 on leaf-500 (7.2:1, AAA at any size). */
.liv-news-dispatch__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 900;
	font-size: clamp(2rem, 3.6vw, 2.875rem);
	letter-spacing: -0.02em;
	line-height: 1.05;
	color: var(--liv-ink-900);
	max-width: 22ch;
	position: relative;
	z-index: 1;
}
.liv-news-dispatch__title a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(transparent calc(100% - 3px), rgba(0,0,0,0.85) 3px);
	background-size: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--liv-transition);
}
.liv-news-dispatch__title a:hover,
.liv-news-dispatch__title a:focus-visible {
	background-size: 100% 100%;
}

.liv-news-dispatch__excerpt {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--liv-ink-900);
	max-width: 52ch;
	position: relative;
	z-index: 1;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Action row — READ STORY pill on the left, "N MIN READ · ENG / R&D"
 * meta on the right. The pill uses pure black bg + leaf-300 text so it
 * pops as the primary action against the green panel. */
.liv-news-dispatch__action {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: clamp(0.5rem, 1vw, 0.875rem);
	position: relative;
	z-index: 1;
	flex-wrap: wrap;
}
.liv-news-dispatch__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.75rem 1.5rem;
	background: var(--liv-ink-900);
	color: var(--liv-leaf-300);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 999px;
	transition: background-color var(--liv-transition), transform var(--liv-transition);
}
.liv-news-dispatch__cta:hover,
.liv-news-dispatch__cta:focus-visible {
	background: var(--liv-leaf-700);
	color: var(--liv-paper);
	transform: translateY(-1px);
}
.liv-news-dispatch__cta:focus-visible {
	outline: none;
	box-shadow: var(--liv-focus-ring);
}
.liv-news-dispatch__cta svg {
	width: 16px;
	height: 11px;
	transition: transform var(--liv-transition);
}
.liv-news-dispatch__cta:hover svg,
.liv-news-dispatch__cta:focus-visible svg {
	transform: translateX(4px);
}
.liv-news-dispatch__readtime {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(0,0,0,0.72);
}

/* ─── Responsive ─────────────────────────────────────────────
 * 1024–768: pair stays two-column but margins tighten, type compresses.
 * <768:    pair stacks (image above panel), notches shrink, brand strip wraps.
 * <480:    date scales down, brand-meta hides the "NEWS ARCHIVE ·" prefix to keep one line. */

@media (max-width: 1023px) {
	.liv-news-dispatch__pair { grid-template-columns: 1fr 1fr; }
	.liv-news-dispatch__title { font-size: clamp(1.625rem, 3.2vw, 2.25rem); }
}

@media (max-width: 767px) {
	.liv-news-dispatch__pair {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	.liv-news-dispatch__media {
		min-height: 240px;
		clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
	}
	.liv-news-dispatch__panel {
		clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
	}
	.liv-news-dispatch-frame { padding: 1rem; }
	.liv-news-dispatch-frame__bracket { width: 20px; height: 20px; }
	.liv-news-dispatch__ribbon {
		float: none;
		display: flex;
		justify-content: flex-start;
		width: fit-content;
		font-size: 0.6875rem;
	}
	.liv-news-dispatch__brand {
		flex-wrap: wrap;
		gap: 0.625rem;
	}
}

@media (max-width: 479px) {
	.liv-news-dispatch__date  { font-size: 1.5rem; }
	.liv-news-dispatch__title { font-size: 1.5rem; }
	.liv-news-dispatch__ticks { display: none; }
}

/* ─── 3. Archive grid + cards ─────────────────────────────── */

.liv-news-archive .liv-section__header {
	margin-block-end: clamp(1.5rem, 3vw, 2.5rem);
}

.liv-news-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

@media (max-width: 1023px) {
	.liv-news-archive__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.liv-news-archive__grid { grid-template-columns: 1fr; }
}

/* Card — anchor-wrapped <article> so the whole tile is one focusable target.
 * Border-left leaf rail picks up the .liv-construction__card pattern. */
.liv-news-card {
	display: block;
	color: inherit;
	text-decoration: none;
	background: rgba(255,255,255,0.025);
	border-left: 2px solid var(--liv-leaf-500);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	overflow: hidden;
	transition: transform var(--liv-transition), background-color var(--liv-transition), border-color var(--liv-transition);
	height: 100%;
	display: flex;
	flex-direction: column;
}
.liv-news-card:hover,
.liv-news-card:focus-visible {
	transform: translateY(-3px);
	background: rgba(151,196,89,0.06);
	border-left-color: var(--liv-leaf-300);
}
.liv-news-card:focus-visible {
	outline: none;
	box-shadow: var(--liv-focus-ring);
}

.liv-news-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background:
		radial-gradient(60% 60% at 50% 50%, rgba(151,196,89,0.18), transparent 70%),
		linear-gradient(135deg, #131a14, #0a0a0a);
}
.liv-news-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--liv-transition-slow);
}
.liv-news-card:hover .liv-news-card__media img {
	transform: scale(1.03);
}

/* Date pill — leaf-300 background, ink-900 text, top-left over the image.
 * Mirrors .liv-lifestyle__chip but recolored to leaf rather than paper.
 *
 * Layered separation against arbitrary card images:
 *   • box-shadow (0.45 alpha drop) — separates pill from the image
 *   • inset 1px ring at rgba(255,255,255,0.5) — keeps the pill edge readable
 *     even when the underlying card image is also a leaf-green tone (e.g. a
 *     grassy photo would otherwise visually swallow the pill). */
.liv-news-card__date {
	position: absolute;
	top: 0.875rem;
	left: 0.875rem;
	z-index: 2;
	padding: 0.4rem 0.7rem;
	background: var(--liv-leaf-300);
	color: var(--liv-ink-900);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow:
		0 2px 8px rgba(0,0,0,0.45),
		inset 0 0 0 1px rgba(255,255,255,0.55);
	pointer-events: none;
}

.liv-news-card__body {
	padding: clamp(1rem, 1.5vw, 1.25rem) clamp(1rem, 1.5vw, 1.25rem) 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	flex: 1;
}
.liv-news-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.375rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--liv-paper);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.liv-news-card__excerpt {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--liv-ink-200);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.liv-news-card__cta {
	margin-top: auto;
	padding-top: 0.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--liv-leaf-300);
}
.liv-news-card__cta svg {
	width: 14px;
	height: 10px;
	transition: transform var(--liv-transition);
}
.liv-news-card:hover .liv-news-card__cta svg,
.liv-news-card:focus-visible .liv-news-card__cta svg {
	transform: translateX(3px);
}

/* ─── 4. Single article detail ────────────────────────────── */

/* Hero band — featured image as full-bleed background with a darkening
 * gradient overlay so title + eyebrow stay legible regardless of photo. */
.liv-news-detail__hero {
	position: relative;
	overflow: hidden;
	min-height: 52vh;
	display: flex;
	align-items: flex-end;
}
.liv-news-detail__hero-media {
	position: absolute;
	inset: 0;
	background-color: var(--liv-ink-900);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.liv-news-detail__hero-overlay {
	position: absolute;
	inset: 0;
	/* Three-stop gradient: 0.40 at top (legible back link), 0.30 in the
	 * middle (less drama, photo still reads), 0.82 at the bottom (date +
	 * title sit here, need the strongest backing for hero photos that
	 * happen to be bright at the bottom edge). */
	background: linear-gradient(180deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.30) 35%, rgba(0,0,0,0.82) 100%);
}
.liv-news-detail__hero > .liv-container {
	position: relative;
	width: 100%;
}

/* Back link sits above the eyebrow — a small green-tracked link that doubles
 * as the article-page wayfinding. */
.liv-news-detail__back {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-block-end: clamp(1.25rem, 3vw, 2rem);
	color: var(--liv-paper);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-color: var(--liv-leaf-500);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	/* Matches the eyebrow/lead halo so the link stays legible against any
	 * photo background — the back link sits in the upper hero zone where
	 * the overlay gradient is lightest. */
	text-shadow: 0 1px 2px rgba(0,0,0,0.65), 0 0 6px rgba(0,0,0,0.45);
}
.liv-news-detail__back svg {
	width: 14px;
	height: 10px;
	color: var(--liv-leaf-300);
	transition: transform var(--liv-transition);
}
.liv-news-detail__back:hover svg,
.liv-news-detail__back:focus-visible svg {
	transform: translateX(-3px);
}

.liv-news-detail__date {
	color: var(--liv-leaf-300);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin-block-end: 1rem;
	text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 0 1px rgba(0,0,0,0.5);
}

.liv-news-detail__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 4.5vw, 3.5rem);
	font-weight: 900;
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: 0;
	max-width: 24ch;
	color: var(--liv-paper);
	text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}

/* Article body — long-form prose, max-width constrained for readable measure.
 * Sits on a paper-colored section so the contrast change tells the reader
 * they've entered the article proper. */
.liv-news-detail__body {
	max-width: min(64ch, 100%);
	margin: 0 auto;
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--liv-ink-700);
}
.liv-news-detail__body > * + * {
	margin-block-start: 1.25rem;
}
.liv-news-detail__body h2 {
	margin-block-start: 2.5rem;
	margin-block-end: 0.75rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(1.625rem, 2.8vw, 2rem);
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: var(--liv-ink-900);
	position: relative;
	padding-block-start: 1.5rem;
}
/* Leaf bar above each H2 — repeats the section-mark rhythm down the article. */
.liv-news-detail__body h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	height: 2px;
	background: var(--liv-leaf-500);
	border-radius: 1px;
}
.liv-news-detail__body h3 {
	margin-block-start: 1.75rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--liv-ink-900);
}
.liv-news-detail__body p {
	margin: 0;
}
.liv-news-detail__body ul,
.liv-news-detail__body ol {
	padding-inline-start: 1.25rem;
	margin: 0;
}
.liv-news-detail__body li + li {
	margin-block-start: 0.5rem;
}
.liv-news-detail__body ul {
	list-style: none;
	padding-inline-start: 0;
}
.liv-news-detail__body ul li {
	position: relative;
	padding-inline-start: 1.5rem;
}
.liv-news-detail__body ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 8px;
	height: 8px;
	background: var(--liv-leaf-500);
	border-radius: 1px;
}
.liv-news-detail__body strong,
.liv-news-detail__body b {
	color: var(--liv-ink-900);
	font-weight: 700;
}
/* Emphasis carries weight + italic instead of color so it always meets WCAG AA
 * on the paper background — leaf-700 on white sits at 4.04:1 which fails the
 * 4.5:1 normal-text bar. Ink-900 italic + 600 weight reads as emphasis without
 * sacrificing contrast. */
.liv-news-detail__body em {
	color: var(--liv-ink-900);
	font-style: italic;
	font-weight: 600;
}
/* Links: ink-900 body text + bold green underline so the link signal is
 * carried by the underline (a green visual marker) while the text itself
 * stays at 19.8:1 contrast. Hover thickens the underline rather than tinting
 * the text — preserves contrast and provides a more substantial affordance. */
.liv-news-detail__body a {
	color: var(--liv-ink-900);
	text-decoration: underline;
	text-decoration-color: var(--liv-leaf-500);
	text-decoration-thickness: 2.5px;
	text-underline-offset: 4px;
	transition: text-decoration-color var(--liv-transition), text-decoration-thickness var(--liv-transition);
}
.liv-news-detail__body a:hover,
.liv-news-detail__body a:focus-visible {
	text-decoration-color: var(--liv-leaf-700);
	text-decoration-thickness: 3.5px;
}
.liv-news-detail__body blockquote {
	margin: 1.5rem 0;
	padding: 0.5rem 0 0.5rem 1.5rem;
	border-left: 3px solid var(--liv-leaf-500);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.1875rem;
	line-height: 1.45;
	color: var(--liv-ink-900);
}

/* End-of-article leaf rule — a small green divider that closes the prose
 * before the related strip. Matches the visual punctuation in /exploreliv. */
.liv-news-detail__endmark {
	display: block;
	width: 48px;
	height: 3px;
	background: var(--liv-leaf-500);
	border-radius: 2px;
	margin: 3rem auto 0;
}

/* ─── 5. Related strip ────────────────────────────────────── */

.liv-news-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

@media (max-width: 1023px) {
	.liv-news-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.liv-news-related__grid { grid-template-columns: 1fr; }
}

/* Empty-state — shown if the seeder hasn't been run yet so the archive
 * doesn't render as a blank dark void. */
.liv-news-empty {
	max-width: 56ch;
	color: var(--liv-ink-200);
	font-size: 1rem;
	line-height: 1.55;
}
.liv-news-empty code {
	background: rgba(151,196,89,0.12);
	color: var(--liv-leaf-300);
	padding: 0.15em 0.45em;
	border-radius: var(--r-sm);
	font-size: 0.9em;
}

/* ─── News hero title + lead size bump ───────────────────────
 *
 * Per editorial direction, the page-opener H1 ("Stories from the road.")
 * and lead paragraph were reading too small inside the dark hero band.
 * Both are bumped 50% over their theme defaults. Scoped tightly to
 * .liv-news-hero so every OTHER .liv-section__title / .liv-section__lead
 * pair across the site (homepage, exploreliv, etc.) keeps its original
 * size. */

.liv-news-hero .liv-section__title {
	/* 5xl preset clamp(2.25rem, 6vw, 3rem) × 1.5 → 54px on a small
	 * viewport, 72px on desktop. Same fluid curve, 50% larger. */
	font-size: clamp(3.375rem, 6.75vw, 4.5rem);
}
.liv-news-hero .liv-section__lead {
	/* Default body size (1rem / 16px) × 1.5 → 1.5rem / 24px. Line-height
	 * tightens slightly to compensate for the larger setting. */
	font-size: 1.5rem;
	line-height: 1.45;
	/* Pop treatment so the lead reads cleanly against any hero photo:
	 *   • color paper (was ink-200) for the brightest possible base
	 *   • weight 500 (was inherited 400) — a notch heavier without going bold
	 *   • three-layer text-shadow:
	 *       1. tight black drop (0 2px 4px) — crisp glyph edges
	 *       2. softer black halo (0 0 12px) — separates from busy backgrounds
	 *       3. wide leaf-tinted ambient glow (0 0 24px) — brand accent that
	 *          adds optical depth and makes the type "lift" off the surface
	 *
	 * This is intentionally stronger than the eyebrow/title shadow recipe
	 * elsewhere in the hero — the lead is the longest run of text on the
	 * page opener and needs the heaviest backing to stay legible end-to-end. */
	color: var(--liv-paper);
	font-weight: 500;
	max-width: 56ch;
	text-shadow:
		0 2px 4px rgba(0, 0, 0, 0.85),
		0 0 12px rgba(0, 0, 0, 0.55),
		0 0 24px rgba(91, 160, 46, 0.35);
}

/* ─── Green-text size bump (news pages only) ─────────────────
 *
 * Per editorial direction, every green-colored text element on the news
 * archive and single pages is doubled in size. Scoped via .liv-main--news
 * (the wrapper class on templates/archive-news_article.html and
 * templates/single-news_article.html) so the homepage, exploreliv, and
 * other pages stay at their original eyebrow/CTA sizes.
 *
 * Each rule lists the "from → to" so the doubling stays auditable.
 *
 * Adjacent SVG chevrons (the "Read →" arrow on cards, the "← All News"
 * arrow on the detail back link) are bumped to match because they read
 * as a unit with the green text they sit beside — leaving them at the
 * old 14×10 size would look disproportionate next to the larger label. */

.liv-main--news .liv-eyebrow {
	/* 0.6875rem → 1.375rem (11px → 22px) */
	font-size: 1.375rem;
}

.liv-main--news .liv-news-card__cta {
	/* 0.8125rem → 1.625rem (13px → 26px) */
	font-size: 1.625rem;
}
.liv-main--news .liv-news-card__cta svg {
	/* Match the bumped label — 14×10 → 28×20. */
	width: 28px;
	height: 20px;
}

.liv-main--news .liv-news-detail__date {
	/* 0.875rem → 1.75rem (14px → 28px) */
	font-size: 1.75rem;
}

/* The back link's TEXT is paper (white), so the label itself doesn't
 * scale. But its chevron is leaf-300 — that counts as a green element
 * and scales with the rest. */
.liv-main--news .liv-news-detail__back svg {
	width: 28px;
	height: 20px;
}

.liv-main--news .liv-news-empty code {
	/* 0.9em → 1.8em (relative; doubles alongside surrounding copy). */
	font-size: 1.8em;
}