/**
 * "From the Apiary" — blog/article styles for the Frogmouth 2026 theme.
 *
 * Powers two views, both wrapped in `.fp-blog`:
 *   - the article listing (home.php / archive.php → template-parts/blog-listing.php)
 *   - the single article (single.php)
 *
 * Like the homepage / PDP / category landing, blog pages use CUSTOM CHROME:
 * header.php / footer.php suppress the standard .site-header / .site-footer on
 * blog views (see frogmouth_uses_custom_chrome()); the templates render their own
 * sticky header + dark footer via template-parts/chrome-header.php /
 * template-parts/chrome-footer.php. Tokens are redeclared on `.fp-blog` so this
 * file is self-contained, mirroring front-page.css / category.css / single-product.css.
 */

.fp-blog {
	--fp-cream: #f1ebdb;
	--fp-cream-card: #f7f1e3;
	--fp-cream-img: #e8e0cd;
	--fp-ink: #1c2419;
	--fp-footer: #141a10;
	--fp-amber: #d99a2b;
	--fp-gold: #e7c98a;
	--fp-muted: #cfc8b3;
	--fp-muted-warm: #e7e0cd;
	--fp-green-text: #4d5a40;
	--fp-green-soft: #5a6650;
	--fp-olive: #7a6a2e;
	--fp-body-ink: #2a3322;
	--fp-body-soft: #3a4432;
	--fp-meta: #9a8a62;
	--fp-dot: #c8a35e;
	--fp-line: rgba(28, 36, 25, 0.14);
	--fp-line-soft: rgba(28, 36, 25, 0.12);
	--fp-line-strong: rgba(28, 36, 25, 0.18);
	--fp-line-chip: rgba(28, 36, 25, 0.22);
	--fp-serif: "Newsreader", Georgia, serif;
	--fp-mono: "JetBrains Mono", ui-monospace, monospace;

	font-family: var(--fp-serif);
	background: var(--fp-cream);
	color: var(--fp-ink);
	min-height: 100vh;
}

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

.fp-blog ::selection {
	background: var(--fp-amber);
	color: var(--fp-ink);
}

/* ---------------------------------------------------------------- chrome -- */

/* The blog header (ship bar + nav) now renders through the shared partial
   template-parts/site-header.php (via template-parts/chrome-header.php); its CSS
   lives in style.css (.fp-site-header*), loaded globally. */

/* The blog footer now renders through the shared partial
   template-parts/site-footer.php; its appearance lives in Tailwind utilities
   (tw.css) + the shared .fp-connect rules in style.css, both loaded globally. */

/* ------------------------------------------------------- listing: hero -- */

.fp-blog__hero {
	max-width: 1340px;
	margin: 0 auto;
	padding: 72px 56px 44px;
	text-align: center;
}

.fp-blog__eyebrow {
	font-family: var(--fp-mono);
	font-size: 12px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--fp-olive);
	margin-bottom: 22px;
}

.fp-blog__title {
	font-family: var(--fp-serif);
	font-weight: 400;
	font-size: 72px;
	line-height: 1;
	letter-spacing: -0.015em;
	margin: 0 0 22px;
}

.fp-blog__title em {
	font-style: italic;
}

.fp-blog__lede {
	font-family: var(--fp-serif);
	font-size: 21px;
	line-height: 1.55;
	max-width: 600px;
	margin: 0 auto;
	color: var(--fp-green-text);
}

/* ----------------------------------------------------- listing: filter -- */

.fp-blog__filter {
	max-width: 1340px;
	margin: 0 auto;
	padding: 0 56px 40px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}

.fp-blog__chip {
	font-family: var(--fp-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 9px 18px;
	border-radius: 2px;
	cursor: pointer;
	text-decoration: none;
	background: transparent;
	color: var(--fp-green-text);
	border: 1px solid var(--fp-line-chip);
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.fp-blog__chip:hover {
	border-color: var(--fp-ink);
}

.fp-blog__chip--active {
	background: var(--fp-ink);
	color: var(--fp-cream);
	border-color: var(--fp-ink);
}

/* Keep the active chip's text cream on hover/focus. Without this, the global
   `a:hover { color: var(--fg-ink) }` (style.css) — a higher-specificity bare
   element rule — turns the text dark ink, invisible on the ink fill. */
.fp-blog__chip--active:hover,
.fp-blog__chip--active:focus {
	color: var(--fp-cream);
}

/* --------------------------------------------------- listing: featured -- */

.fp-blog__featured-wrap {
	max-width: 1340px;
	margin: 0 auto;
	padding: 0 56px;
}

.fp-blog__featured {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 0;
	text-decoration: none;
	color: inherit;
	background: var(--fp-cream-card);
	border: 1px solid var(--fp-line);
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.fp-blog__featured:hover {
	box-shadow: 0 30px 60px -32px rgba(28, 36, 25, 0.5);
}

.fp-blog__featured-media {
	aspect-ratio: 16 / 11;
	overflow: hidden;
	background: var(--fp-cream-img);
}

.fp-blog__featured-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.fp-blog__featured:hover .fp-blog__featured-media img {
	transform: scale(1.03);
}

.fp-blog__featured-body {
	padding: 56px 52px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.fp-blog__featured-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.fp-blog__cat-badge {
	font-family: var(--fp-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--fp-ink);
	background: var(--fp-gold);
	padding: 5px 11px;
	border-radius: 2px;
}

.fp-blog__featured-date {
	font-family: var(--fp-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fp-olive);
}

.fp-blog__featured-title {
	font-family: var(--fp-serif);
	font-weight: 400;
	font-size: 42px;
	line-height: 1.04;
	letter-spacing: -0.01em;
	margin: 0 0 18px;
}

.fp-blog__featured-excerpt {
	font-family: var(--fp-serif);
	font-size: 19px;
	line-height: 1.55;
	color: var(--fp-green-text);
	margin: 0 0 28px;
}

.fp-blog__readmore {
	font-family: var(--fp-mono);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fp-ink);
	font-weight: 700;
}

/* ------------------------------------------------------- listing: grid -- */

.fp-blog__grid-wrap {
	max-width: 1340px;
	margin: 0 auto;
	padding: 48px 56px 20px;
}

.fp-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.fp-blog__empty {
	max-width: 1340px;
	margin: 0 auto;
	padding: 20px 56px 80px;
	text-align: center;
	font-family: var(--fp-serif);
	font-size: 20px;
	color: var(--fp-green-text);
}

/* ------------------------------------------------- article card (shared) -- */
/* Migrated to Tailwind utilities (epic 01, Phase 2 — see
   template-parts/article-card.php), both the grid + related variants. Only the
   dot atom stays here: it's reused in single.php's article-header meta, outside
   the card template-part. */
.fp-article-card__dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--fp-dot);
	flex-shrink: 0;
}

/* ------------------------------------------------- listing: pagination -- */

.fp-blog__pagination {
	max-width: 1340px;
	margin: 0 auto;
	padding: 36px 56px 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--fp-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.fp-blog__pagination .page-numbers {
	min-width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	border: 1px solid var(--fp-line-chip);
	border-radius: 2px;
	text-decoration: none;
	color: var(--fp-ink);
	transition: border-color 0.15s ease, color 0.15s ease;
}

.fp-blog__pagination a.page-numbers:hover {
	border-color: var(--fp-ink);
}

.fp-blog__pagination .page-numbers.current {
	background: var(--fp-ink);
	color: var(--fp-cream);
	border-color: var(--fp-ink);
}

.fp-blog__pagination .page-numbers.dots {
	border: none;
	color: var(--fp-olive);
}

.fp-blog__pagination .next,
.fp-blog__pagination .prev {
	color: var(--fp-olive);
}

.fp-blog__pagination .next:hover,
.fp-blog__pagination .prev:hover {
	color: var(--fp-ink);
}

/* -------------------------------------------------- article: header -- */

.fp-article__header {
	max-width: 820px;
	margin: 0 auto;
	padding: 60px 32px 40px;
	text-align: center;
}

.fp-article__breadcrumb {
	font-family: var(--fp-mono);
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--fp-meta);
	margin-bottom: 26px;
}

.fp-article__breadcrumb a {
	color: var(--fp-olive);
	text-decoration: none;
}

.fp-article__breadcrumb a:hover {
	color: var(--fp-ink);
}

.fp-article__breadcrumb .sep {
	margin: 0 0.5em;
}

.fp-article__breadcrumb .current {
	color: var(--fp-ink);
}

.fp-article__title {
	font-family: var(--fp-serif);
	font-weight: 400;
	font-size: 56px;
	line-height: 1.05;
	letter-spacing: -0.015em;
	margin: 0 0 24px;
}

.fp-article__title em {
	font-style: italic;
}

.fp-article__lede {
	font-family: var(--fp-serif);
	font-size: 21px;
	line-height: 1.5;
	color: var(--fp-green-text);
	max-width: 620px;
	margin: 0 auto 28px;
}

.fp-article__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	font-family: var(--fp-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fp-olive);
}

/* -------------------------------------------------- article: hero img -- */

.fp-article__hero {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 32px;
}

.fp-article__hero-inner {
	aspect-ratio: 21 / 9;
	overflow: hidden;
	border: 1px solid var(--fp-line);
	background: var(--fp-cream-img);
}

.fp-article__hero-inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* -------------------------------------------------- article: body prose -- */

.fp-article__body {
	max-width: 720px;
	margin: 0 auto;
	padding: 56px 32px 20px;
}

.fp-blog .entry-content > *:first-child {
	margin-top: 0;
}

.fp-blog .entry-content p:not(.fp-carousel p) {
	font-family: var(--fp-serif);
	font-size: 20px;
	line-height: 1.7;
	margin: 0 0 24px;
	color: var(--fp-body-ink);
}

.fp-blog .entry-content a:not(.fp-carousel a) {
	color: var(--fp-olive);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fp-blog .entry-content strong,
.fp-blog .entry-content b {
	font-weight: 600;
}

.fp-blog .entry-content em {
	font-style: italic;
}

.fp-blog .entry-content h2:not(.fp-carousel h2) {
	font-family: var(--fp-serif);
	font-weight: 500;
	font-size: 32px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 48px 0 18px;
}

.fp-blog .entry-content h3:not(.fp-carousel h3) {
	font-family: var(--fp-mono);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fp-olive);
	margin: 34px 0 12px;
}

.fp-blog .entry-content h4 {
	font-family: var(--fp-serif);
	font-weight: 500;
	font-size: 24px;
	line-height: 1.2;
	margin: 32px 0 14px;
}

.fp-blog .entry-content img:not(.fp-carousel img),
.fp-blog .entry-content figure {
	max-width: 100%;
	height: auto;
}

.fp-blog .entry-content figure {
	margin: 36px 0;
}

.fp-blog .entry-content figcaption {
	font-family: var(--fp-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fp-meta);
	margin-top: 10px;
	text-align: center;
}

/* unordered lists — amber ▸ marker */
.fp-blog .entry-content ul {
	font-family: var(--fp-serif);
	font-size: 20px;
	line-height: 1.6;
	margin: 0 0 24px;
	padding-left: 0;
	list-style: none;
	color: var(--fp-body-ink);
}

.fp-blog .entry-content ul li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 13px;
}

.fp-blog .entry-content ul li::before {
	content: "\25B8";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--fp-amber);
	font-family: var(--fp-mono);
	font-size: 15px;
	line-height: 1.7;
}

/* ordered lists — gold numbered discs */
.fp-blog .entry-content ol {
	font-family: var(--fp-serif);
	font-size: 20px;
	line-height: 1.6;
	margin: 0 0 24px;
	padding-left: 0;
	list-style: none;
	counter-reset: step;
	color: var(--fp-body-ink);
}

.fp-blog .entry-content ol li {
	position: relative;
	padding-left: 42px;
	margin-bottom: 16px;
	counter-increment: step;
}

.fp-blog .entry-content ol li::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 2px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--fp-gold);
	color: var(--fp-ink);
	font-family: var(--fp-mono);
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* pull quote */
.fp-blog .entry-content blockquote {
	margin: 44px 0;
	padding: 8px 0 8px 32px;
	border-left: 3px solid var(--fp-amber);
}

.fp-blog .entry-content blockquote p {
	font-family: var(--fp-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 27px;
	line-height: 1.35;
	margin: 0;
	color: var(--fp-ink);
}

.fp-blog .entry-content blockquote cite {
	display: block;
	margin-top: 14px;
	font-family: var(--fp-mono);
	font-style: normal;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fp-olive);
}

/*
 * Editorial helper blocks — apply these classes to a Group block (callout) or
 * Columns block (benefit grid) in the post editor to reproduce the dark callout
 * and 2-up benefit grid from the design. Plain prose needs none of this.
 */
.fp-blog .entry-content .fp-callout {
	background: var(--fp-ink);
	color: var(--fp-muted-warm);
	padding: 30px 34px;
	margin: 36px 0;
	border-radius: 3px;
}

.fp-blog .entry-content .fp-callout > *:last-child {
	margin-bottom: 0;
}

.fp-blog .entry-content .fp-callout__label {
	font-family: var(--fp-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--fp-gold);
	margin: 0 0 12px;
}

.fp-blog .entry-content .fp-callout p {
	font-size: 19px;
	line-height: 1.6;
	color: var(--fp-muted-warm);
	margin: 0;
}

.fp-blog .entry-content .fp-benefits {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--fp-line);
	border: 1px solid var(--fp-line);
	margin: 0 0 28px;
}

.fp-blog .entry-content .fp-benefits .fp-benefit {
	background: var(--fp-cream-card);
	padding: 24px 26px;
}

.fp-blog .entry-content .fp-benefit__label {
	font-family: var(--fp-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fp-olive);
	margin: 0 0 8px;
}

.fp-blog .entry-content .fp-benefit p {
	font-size: 17px;
	line-height: 1.5;
	margin: 0;
	color: var(--fp-body-soft);
}

/* FAQ — a definition-style list rendered from <h3>/<p> pairs inside .fp-faq,
   or core <details> blocks */
.fp-blog .entry-content .fp-faq {
	border-top: 1px solid var(--fp-line-strong);
	margin: 0 0 28px;
}

.fp-blog .entry-content .fp-faq .fp-faq__item {
	border-bottom: 1px solid var(--fp-line-strong);
	padding: 24px 0;
}

.fp-blog .entry-content .fp-faq .fp-faq__q {
	font-family: var(--fp-serif);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: 0;
	color: var(--fp-ink);
	margin: 0 0 10px;
}

.fp-blog .entry-content .fp-faq .fp-faq__a {
	font-family: var(--fp-serif);
	font-size: 18px;
	line-height: 1.6;
	color: var(--fp-body-soft);
	margin: 0;
}

/* -------------------------------------------------- article: shop CTA -- */

.fp-article__cta {
	max-width: 1140px;
	margin: 48px auto 0;
	padding: 0 32px;
}

.fp-article__cta-inner {
	background: var(--fp-ink);
	color: var(--fp-cream);
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	overflow: hidden;
	border-radius: 3px;
}

.fp-article__cta-text {
	padding: 56px 52px;
}

.fp-article__cta-eyebrow {
	font-family: var(--fp-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--fp-gold);
	margin-bottom: 18px;
}

.fp-article__cta-title {
	font-family: var(--fp-serif);
	font-weight: 400;
	font-size: 38px;
	line-height: 1.08;
	margin: 0 0 16px;
}

.fp-article__cta-body {
	font-family: var(--fp-serif);
	font-size: 18px;
	line-height: 1.6;
	color: var(--fp-muted);
	margin: 0 0 28px;
	max-width: 420px;
}

.fp-article__cta-btn {
	font-family: var(--fp-mono);
	cursor: pointer;
	background: var(--fp-amber);
	color: var(--fp-ink);
	border: none;
	padding: 16px 34px;
	border-radius: 2px;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 700;
	text-decoration: none;
	display: inline-block;
	transition: background 0.15s ease;
}

.fp-article__cta-btn:hover {
	background: var(--fp-cream);
}

.fp-article__cta-media {
	align-self: stretch;
	min-height: 340px;
	background-size: cover;
	background-position: center;
	background-color: var(--fp-cream-img);
}

/* -------------------------------------------------- article: author -- */

.fp-article__author {
	max-width: 720px;
	margin: 0 auto;
	padding: 56px 32px;
}

.fp-article__author-inner {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	border-top: 1px solid var(--fp-line-strong);
	border-bottom: 1px solid var(--fp-line-strong);
	padding: 36px 0;
}

.fp-article__author-avatar {
	width: 72px;
	height: 72px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--fp-ink);
	color: var(--fp-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--fp-mono);
	font-size: 22px;
	letter-spacing: 0.04em;
	overflow: hidden;
}

.fp-article__author-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.fp-article__author-name {
	font-family: var(--fp-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fp-olive);
	margin-bottom: 6px;
}

.fp-article__author-bio {
	font-family: var(--fp-serif);
	font-size: 18px;
	line-height: 1.6;
	margin: 0;
	color: var(--fp-body-soft);
}

/* -------------------------------------------------- article: related -- */

.fp-article__related {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 32px 80px;
}

.fp-article__related-label {
	font-family: var(--fp-mono);
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--fp-olive);
	margin-bottom: 26px;
}

.fp-article__related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 980px) {
	.fp-blog__hero {
		padding: 48px 24px 32px;
	}

	.fp-blog__title {
		font-size: 46px;
	}

	.fp-blog__filter {
		padding: 0 24px 32px;
	}

	.fp-blog__featured-wrap,
	.fp-blog__grid-wrap,
	.fp-blog__pagination {
		padding-left: 24px;
		padding-right: 24px;
	}

	.fp-blog__featured {
		grid-template-columns: 1fr;
	}

	.fp-blog__featured-body {
		padding: 32px 28px 36px;
	}

	.fp-blog__featured-title {
		font-size: 32px;
	}

	.fp-blog__grid,
	.fp-article__related-grid {
		grid-template-columns: 1fr 1fr;
	}

	.fp-article__title {
		font-size: 40px;
	}

	.fp-article__cta-inner {
		grid-template-columns: 1fr;
	}

	.fp-article__cta-media {
		min-height: 220px;
		order: -1;
	}
}

@media (max-width: 640px) {
	.fp-blog__title {
		font-size: 36px;
	}

	.fp-blog__lede,
	.fp-article__lede {
		font-size: 18px;
	}

	.fp-blog__grid,
	.fp-article__related-grid {
		grid-template-columns: 1fr;
	}

	.fp-article__header {
		padding: 40px 22px 30px;
	}

	.fp-article__title {
		font-size: 32px;
	}

	.fp-article__hero,
	.fp-article__cta,
	.fp-article__related {
		padding-left: 20px;
		padding-right: 20px;
	}

	.fp-article__body {
		padding: 40px 22px 10px;
	}

	.fp-blog .entry-content p,
	.fp-blog .entry-content ul,
	.fp-blog .entry-content ol {
		font-size: 18px;
	}

	.fp-blog .entry-content h2 {
		font-size: 26px;
		margin-top: 40px;
	}

	.fp-blog .entry-content blockquote p {
		font-size: 22px;
	}

	.fp-article__cta-text {
		padding: 36px 28px;
	}

	.fp-article__cta-title {
		font-size: 30px;
	}

	.fp-blog .entry-content .fp-benefits {
		grid-template-columns: 1fr;
	}

	.fp-article__author-inner {
		flex-direction: column;
		gap: 18px;
	}
}

/* ================================================================ *
 * Lip-balm guide — editorial body components ([fp_lb] shortcode)    *
 *                                                                   *
 * Rendered inside `.fp-blog .entry-content`, so EVERY selector is   *
 * prefixed with `.fp-blog .entry-content` to out-specify the bare-  *
 * element prose rules above (p/h2/h3/a/img). Components use         *
 * div/span markup, so prose-element styling never leaks in.         *
 * ================================================================ */

/* section eyebrow above an h2 — <p class="fp-kicker">[ … ]</p> */
.fp-blog .entry-content .fp-kicker {
	font-family: var(--fp-mono);
	font-size: 11px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: #a8472e;
	font-weight: 500;
	margin: 48px 0 -6px;
}

/* Lede with drop cap. Applies to an explicit <p class="fp-lede"> AND, theme-wide,
   to the first paragraph of every article body so all posts get the treatment
   without per-article markup. */
.fp-blog .entry-content .fp-lede,
.fp-blog .entry-content > p:first-of-type {
	font-size: 22px;
	line-height: 1.65;
}

.fp-blog .entry-content .fp-lede::first-letter,
.fp-blog .entry-content > p:first-of-type::first-letter {
	float: left;
	font-family: var(--fp-serif);
	font-size: 78px;
	line-height: 0.78;
	font-weight: 500;
	padding: 6px 12px 0 0;
	color: #a8472e;
}

/* pull quote — <blockquote class="fp-pullquote"> */
.fp-blog .entry-content .fp-pullquote {
	border-left: none;
	text-align: center;
	max-width: 720px;
	margin: 52px auto;
	padding: 0 24px;
	position: relative;
}

.fp-blog .entry-content .fp-pullquote::before {
	content: "\201C";
	display: block;
	font-family: var(--fp-serif);
	font-size: 64px;
	line-height: 0.5;
	color: var(--fp-amber);
	margin-bottom: 18px;
}

.fp-blog .entry-content .fp-pullquote p {
	font-family: var(--fp-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 30px;
	line-height: 1.4;
	color: var(--fp-ink);
	margin: 0;
	text-align: center;
}

/* The three data graphics (decoder / compare / formula) break OUT of the 720px
   reading column to the same ~1140px width as the [fp_product_carousel]
   (carousel.css .fp-carousel), so they line up. The breakout is applied inside
   each component block — after its `margin` shorthand — so margin-left:50% isn't
   reset: margin-left moves the left edge to the column centre (= page centre,
   column is margin:auto); translateX pulls back half the element's own width,
   re-centring on the page. width caps to the viewport on small screens. */

/* ---------------------------------------------------------- DECODER -- */

.fp-blog .entry-content .fp-decoder {
	margin: 30px 0 0;
	width: min(1140px, calc(100vw - 48px));
	margin-left: 50%;
	transform: translateX(-50%);
	border: 1px solid var(--fp-line-strong);
	border-radius: 4px;
	overflow: hidden;
	background: var(--fp-cream-card);
}

.fp-blog .entry-content .fp-decoder__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 18px;
	background: var(--fp-ink);
	color: var(--fp-muted-warm);
	padding: 16px 22px;
}

.fp-blog .entry-content .fp-decoder__title {
	font-family: var(--fp-mono);
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--fp-gold);
}

.fp-blog .entry-content .fp-decoder__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.fp-blog .entry-content .fp-decoder__key {
	font-family: var(--fp-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	color: var(--fp-muted-warm);
}

.fp-blog .entry-content .fp-decoder__key::before {
	content: "\25CF";
	margin-right: 6px;
	font-size: 11px;
}

.fp-blog .entry-content .fp-decoder__key--avoid::before {
	color: #c96a4a;
}

.fp-blog .entry-content .fp-decoder__key--caution::before {
	color: #d99a2b;
}

.fp-blog .entry-content .fp-decoder__key--good::before {
	color: #7faf6a;
}

.fp-blog .entry-content .fp-decoder__row {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 18px 22px;
	border-top: 1px solid var(--fp-line);
	border-left: 4px solid transparent;
}

.fp-blog .entry-content .fp-decoder__rows > .fp-decoder__row:first-child {
	border-top: none;
}

.fp-blog .entry-content .fp-decoder__row--avoid {
	border-left-color: #c96a4a;
}

.fp-blog .entry-content .fp-decoder__row--caution {
	border-left-color: #d99a2b;
}

.fp-blog .entry-content .fp-decoder__row--good {
	border-left-color: #7faf6a;
}

.fp-blog .entry-content .fp-decoder__chip-cell {
	flex: 0 0 84px;
}

.fp-blog .entry-content .fp-decoder__chip {
	display: inline-block;
	font-family: var(--fp-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 3px;
	color: #fff;
	white-space: nowrap;
}

.fp-blog .entry-content .fp-decoder__chip--avoid {
	background: #c96a4a;
}

.fp-blog .entry-content .fp-decoder__chip--caution {
	background: #d99a2b;
}

.fp-blog .entry-content .fp-decoder__chip--good {
	background: #7faf6a;
}

.fp-blog .entry-content .fp-decoder__body {
	display: block;
}

.fp-blog .entry-content .fp-decoder__name {
	display: block;
	font-family: var(--fp-serif);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--fp-ink);
	margin-bottom: 4px;
}

.fp-blog .entry-content .fp-decoder__desc {
	display: block;
	font-family: var(--fp-serif);
	font-size: 15px;
	line-height: 1.55;
	color: var(--fp-body-soft);
}

.fp-blog .entry-content .fp-decoder__caption {
	font-family: var(--fp-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fp-meta);
	text-align: center;
	margin: 16px 0 28px;
}

/* ---------------------------------------------------------- COMPARE -- */

.fp-blog .entry-content .fp-compare {
	margin: 30px 0 28px;
	width: min(1140px, calc(100vw - 48px));
	margin-left: 50%;
	transform: translateX(-50%);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.fp-blog .entry-content .fp-compare__inner {
	min-width: 560px;
	border: 1px solid var(--fp-line-strong);
	border-radius: 4px;
	overflow: hidden;
}

.fp-blog .entry-content .fp-compare__row {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr 1.1fr;
	border-top: 1px solid var(--fp-line);
}

.fp-blog .entry-content .fp-compare__row:first-child {
	border-top: none;
}

.fp-blog .entry-content .fp-compare__row--head {
	background: var(--fp-ink);
}

.fp-blog .entry-content .fp-compare__cell {
	padding: 16px 18px;
	font-family: var(--fp-serif);
	font-size: 15px;
	line-height: 1.5;
	color: var(--fp-body-soft);
	border-left: 1px solid var(--fp-line);
}

.fp-blog .entry-content .fp-compare__cell:first-child {
	border-left: none;
}

.fp-blog .entry-content .fp-compare__row--head .fp-compare__cell {
	font-family: var(--fp-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fp-muted-warm);
	border-left-color: rgba(255, 255, 255, 0.12);
}

.fp-blog .entry-content .fp-compare__cell--prop {
	font-weight: 600;
	color: var(--fp-ink);
}

.fp-blog .entry-content .fp-compare__row--head .fp-compare__cell--prop {
	color: var(--fp-gold);
}

.fp-blog .entry-content .fp-compare__cell--good {
	background: rgba(127, 175, 106, 0.12);
	color: var(--fp-body-ink);
}

.fp-blog .entry-content .fp-compare__row--head .fp-compare__cell--good {
	background: #2f3d26;
	color: #cfe0c2;
}

/* -------------------------------------------------------- DEEPDIVES -- */

.fp-blog .entry-content .fp-deepdive {
	margin: 30px 0 28px;
}

.fp-blog .entry-content .fp-deepdive__item {
	display: flex;
	gap: 26px;
	align-items: flex-start;
	padding: 30px 0;
	border-top: 1px solid var(--fp-line-strong);
}

.fp-blog .entry-content .fp-deepdive__item:first-child {
	border-top: none;
	padding-top: 4px;
}

.fp-blog .entry-content .fp-deepdive__num {
	flex: 0 0 auto;
	font-family: var(--fp-mono);
	font-size: 40px;
	font-weight: 500;
	line-height: 1;
	color: var(--fp-amber);
}

.fp-blog .entry-content .fp-deepdive__text {
	display: block;
}

.fp-blog .entry-content .fp-deepdive__role {
	display: block;
	font-family: var(--fp-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #a8472e;
	margin-bottom: 6px;
}

.fp-blog .entry-content .fp-deepdive__latin {
	display: block;
	font-family: var(--fp-serif);
	font-style: italic;
	font-size: 24px;
	line-height: 1.2;
	color: var(--fp-ink);
	margin-bottom: 10px;
}

.fp-blog .entry-content .fp-deepdive__body {
	display: block;
	font-family: var(--fp-serif);
	font-size: 17px;
	line-height: 1.6;
	color: var(--fp-body-soft);
}

/* ---------------------------------------------------------- FORMULA -- */

.fp-blog .entry-content .fp-formula {
	background: #1c2419;
	color: var(--fp-muted-warm);
	border-radius: 4px;
	padding: 48px 40px;
	margin: 36px 0 28px;
	width: min(1140px, calc(100vw - 48px));
	margin-left: 50%;
	transform: translateX(-50%);
}

.fp-blog .entry-content .fp-formula__head {
	text-align: center;
	margin-bottom: 38px;
}

.fp-blog .entry-content .fp-formula__kicker {
	display: block;
	font-family: var(--fp-mono);
	font-size: 11px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--fp-gold);
	margin-bottom: 16px;
}

.fp-blog .entry-content .fp-formula__title {
	display: block;
	font-family: var(--fp-serif);
	font-weight: 500;
	font-size: 42px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--fp-cream);
	margin-bottom: 12px;
}

.fp-blog .entry-content .fp-formula__subhead {
	display: block;
	font-family: var(--fp-serif);
	font-style: italic;
	font-size: 18px;
	line-height: 1.5;
	color: var(--fp-muted);
}

.fp-blog .entry-content .fp-formula__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.fp-blog .entry-content .fp-formula__cell {
	background: #1c2419;
	padding: 22px 18px;
}

.fp-blog .entry-content .fp-formula__num {
	display: block;
	font-family: var(--fp-mono);
	font-size: 13px;
	letter-spacing: 0.1em;
	color: var(--fp-gold);
	margin-bottom: 12px;
}

.fp-blog .entry-content .fp-formula__name {
	display: block;
	font-family: var(--fp-serif);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--fp-cream);
	margin-bottom: 8px;
}

.fp-blog .entry-content .fp-formula__desc {
	display: block;
	font-family: var(--fp-serif);
	font-size: 14px;
	line-height: 1.5;
	color: var(--fp-muted);
}

/* -------------------------------------------------------- CHECKLIST -- */

.fp-blog .entry-content .fp-checklist {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 30px 0 28px;
}

.fp-blog .entry-content .fp-checklist__item {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	background: var(--fp-cream-card);
	border: 1px solid var(--fp-line);
	border-radius: 4px;
	padding: 20px 22px;
}

.fp-blog .entry-content .fp-checklist__badge {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #a8472e;
	color: #fff;
	font-family: var(--fp-mono);
	font-size: 14px;
	font-weight: 500;
	border-radius: 3px;
}

.fp-blog .entry-content .fp-checklist__text {
	font-family: var(--fp-serif);
	font-size: 17px;
	line-height: 1.6;
	color: var(--fp-body-ink);
}

/* -------------------------------------------------------------- FAQ -- */
/* The lip-balm FAQ uses native <details>; .fp-faq base rules above give
   it top/bottom borders + padding. These add the +/− marker + open state. */

.fp-blog .entry-content .fp-faq--lb .fp-faq__item {
	cursor: pointer;
}

.fp-blog .entry-content .fp-faq--lb .fp-faq__q {
	position: relative;
	padding-right: 36px;
	margin-bottom: 0;
	list-style: none;
	cursor: pointer;
}

.fp-blog .entry-content .fp-faq--lb .fp-faq__q::-webkit-details-marker {
	display: none;
}

.fp-blog .entry-content .fp-faq--lb .fp-faq__q::after {
	content: "+";
	position: absolute;
	top: 0;
	right: 0;
	font-family: var(--fp-mono);
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	color: var(--fp-amber);
}

.fp-blog .entry-content .fp-faq--lb .fp-faq__item[open] .fp-faq__q::after {
	content: "\2212";
}

.fp-blog .entry-content .fp-faq--lb .fp-faq__a {
	margin-top: 12px;
}

/* ----------------------------------------- lip-balm guide responsive -- */

@media (max-width: 760px) {
	.fp-blog .entry-content .fp-formula {
		padding: 36px 22px;
	}

	.fp-blog .entry-content .fp-formula__title {
		font-size: 32px;
	}

	.fp-blog .entry-content .fp-formula__grid {
		grid-template-columns: 1fr 1fr;
	}

	.fp-blog .entry-content .fp-deepdive__item {
		gap: 16px;
	}

	.fp-blog .entry-content .fp-deepdive__num {
		font-size: 30px;
	}

	.fp-blog .entry-content .fp-pullquote p {
		font-size: 24px;
	}
}

@media (max-width: 480px) {
	.fp-blog .entry-content .fp-decoder__row {
		flex-direction: column;
		gap: 8px;
	}

	.fp-blog .entry-content .fp-formula__grid {
		grid-template-columns: 1fr;
	}
}