/**
 * Article system (Phase 1, design B): P12–P17 single posts.
 * Rendered by the plugin template (templates/single.php) inside
 * .fr-article-page: dark work hero + warm-white reading body +
 * dark related-reading band. Colours resolve through the B
 * tokens scoped to .fr-article-page in fr-tokens.css.
 *
 * The reading body re-skins the stored content's .fr-article /
 * .fra-* components (Phase 0 markup) with the B reading tokens.
 * Nothing here renames content classes.
 */

/* The theme centres .site-main; the plugin template needs the
   full width instead (same pattern as the archive template). */
body.single-post main.site-main {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

.fr-article-page {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background: var(--fr-bg);
	color: var(--fr-text);
}

/* ---------- Hero (dark) ---------- */

.fr-single-hero {
	padding: 64px 80px 56px;
}

.fr-single-inner {
	max-width: 1080px;
	margin: 0 auto;
}

.fr-single-type {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .22em;
	color: var(--fr-accent);
	margin: 0 0 18px;
}

.fr-single-title {
	font-size: 47px;
	line-height: 1.28;
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--fr-text);
}

.fr-single-meta {
	font-size: 14.5px;
	color: var(--fr-muted);
	margin: 0 0 28px;
}

.fr-single-hero-media {
	margin: 0 0 28px;
}

.fr-single-hero-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.fr-single-hero-media--contain {
	background: var(--fr-surface);
	border: 1px solid var(--fr-border);
	border-radius: 12px;
	padding: 18px;
}

.fr-single-hero-media--contain img {
	border-radius: 6px;
}

.fr-single-summary {
	font-size: 18px;
	line-height: 1.7;
	color: var(--fr-text);
	max-width: 42em;
	margin: 0;
}

/* ---------- Reading body (warm white) ---------- */

.fr-single-body {
	background: var(--fr-reading-bg);
	color: var(--fr-reading-text);
}

.fr-single-reading {
	max-width: 760px;
	margin: 0 auto;
	padding: 52px 22px 64px;
}

/* The stored wrapper keeps its class; the frame owns layout. */
.fr-article-page .fr-article {
	max-width: none;
	padding: 0;
	font-size: 18px;
	line-height: 1.85;
	color: var(--fr-reading-text);
}

.fr-article-page .fr-article p {
	margin: 0 0 16px;
}

.fr-article-page .fr-article a {
	color: #B4552D;
}

.fr-article-page .fr-article h2 {
	font-size: 30px;
	line-height: 1.4;
	font-weight: 700;
	margin: 52px 0 14px;
	color: var(--fr-reading-text);
}

.fr-article-page .fr-article h3 {
	font-size: 20px;
	line-height: 1.45;
	font-weight: 700;
	margin: 30px 0 10px;
}

.fr-article-page .fr-article ul,
.fr-article-page .fr-article ol {
	margin: 0 0 16px;
	padding-left: 1.4em;
}

.fr-article-page .fr-article li {
	margin-bottom: 6px;
}

/* Evidence bar */
.fr-article-page .fra-evidence {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	border-top: 1px solid var(--fr-reading-border);
	border-bottom: 1px solid var(--fr-reading-border);
	padding: 16px 0;
	margin: 22px 0 30px;
}

.fr-article-page .fra-evidence dt {
	font-size: 12px;
	letter-spacing: .14em;
	color: #B4552D;
	margin-bottom: 4px;
}

.fr-article-page .fra-evidence dd {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
}

/* Conclusion-first block */
.fr-article-page .fra-answer {
	background: var(--fr-reading-callout);
	border-left: 3px solid #B4552D;
	padding: 18px 22px;
	margin: 0 0 34px;
	font-size: 17.5px;
	line-height: 1.75;
}

.fr-article-page .fra-answer p:last-child {
	margin-bottom: 0;
}

/* Figures, tables, code */
.fr-article-page .fr-article figure {
	margin: 26px 0;
}

.fr-article-page .fr-article figure img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

.fr-article-page .fr-article figcaption {
	color: var(--fr-reading-muted);
	font-size: 14px;
	margin-top: 8px;
}

.fr-article-page .fr-article table {
	width: 100%;
	border-collapse: collapse;
	margin: 22px 0 30px;
	font-size: 15.5px;
	line-height: 1.6;
}

.fr-article-page .fr-article th {
	text-align: left;
	background: var(--fr-reading-callout);
	padding: 10px 12px;
	border-bottom: 2px solid var(--fr-reading-border);
}

.fr-article-page .fr-article td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--fr-reading-border);
	vertical-align: top;
}

.fr-article-page .fr-article pre {
	background: var(--fr-surface);
	color: var(--fr-text);
	border-radius: 10px;
	padding: 16px 18px;
	overflow-x: auto;
	font-size: 14px;
	line-height: 1.6;
	margin: 20px 0;
}

.fr-article-page .fr-article code {
	font-size: .92em;
}

.fr-article-page .fr-article p code,
.fr-article-page .fr-article li code {
	background: var(--fr-reading-callout);
	border-radius: 4px;
	padding: 1px 6px;
}

/* Verdict box */
.fr-article-page .fra-verdict {
	border: 1.5px solid #B4552D;
	border-radius: 12px;
	padding: 22px 26px;
	margin: 40px 0;
	background: #FFFFFF;
}

.fr-article-page .fra-verdict-label {
	display: inline-block;
	background: #B4552D;
	color: #FFF;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	padding: 3px 10px;
	border-radius: 4px;
	margin-bottom: 12px;
}

.fr-article-page .fra-verdict p:last-child {
	margin-bottom: 0;
}

/* Dual outbound blocks */
.fr-article-page .fra-outbound {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin: 44px 0;
}

.fr-article-page .fra-out-card {
	border: 1px solid var(--fr-reading-border);
	border-radius: 12px;
	padding: 22px;
	background: #FFFFFF;
}

.fr-article-page .fra-out-card h3 {
	font-size: 19px;
	margin: 0 0 8px;
}

.fr-article-page .fra-out-card p {
	font-size: 15.5px;
	color: var(--fr-reading-muted);
}

.fr-article-page .fra-out-card a {
	font-weight: 700;
	text-decoration: none;
}

.fr-article-page .fra-out-card a:hover {
	text-decoration: underline;
}

/* FAQ */
.fr-article-page .fra-faq-item {
	border-top: 1px solid var(--fr-reading-border);
	padding: 16px 0 4px;
}

.fr-article-page .fra-faq-item h3 {
	font-size: 18px;
	margin: 0 0 8px;
}

/* Newsletter band inside articles: the coral monthly band. */
.fr-article-page .fr-article .frp-newsletter {
	margin-top: 48px;
	background: var(--fr-accent);
	color: var(--fr-reading-text);
	border-radius: 12px;
	padding: 30px 28px;
}

.fr-article-page .fr-article .frp-newsletter h2 {
	margin-top: 0;
	font-size: 26px;
}

.fr-article-page .frp-newsletter .fr-kit-form {
	margin: 18px 0 10px;
	max-width: 560px;
}

.fr-article-page .frp-newsletter .formkit-form {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	max-width: none !important;
}

.fr-article-page .frp-newsletter .formkit-input {
	background: #FFFFFF;
	color: var(--fr-reading-text);
	border: 1px solid rgba(36, 44, 40, .35) !important;
	border-radius: 3px !important;
	min-height: 50px;
	font-size: 16px;
}

.fr-article-page .frp-newsletter .formkit-submit {
	background: var(--fr-bg) !important;
	color: var(--fr-text) !important;
	border-radius: 3px !important;
	min-height: 50px;
	font-weight: 700;
}

.fr-article-page .frp-form-note {
	font-size: 13.5px;
	opacity: .85;
	margin: 0;
}

/* ---------- Related reading (dark) ---------- */

.fr-article-related-title {
	font-size: 26px;
	font-weight: 700;
	color: var(--fr-text);
	margin: 0 0 24px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1023px) {
	.fr-single-hero {
		padding: 44px 22px 40px;
	}
}

@media (max-width: 720px) {
	.fr-single-title {
		font-size: 32px;
	}

	.fr-single-summary {
		font-size: 16.5px;
	}

	.fr-article-page .fr-article {
		font-size: 16px;
	}

	.fr-article-page .fr-article h2 {
		font-size: 28px;
	}

	.fr-article-page .fra-evidence {
		grid-template-columns: 1fr 1fr;
	}

	.fr-article-page .fra-outbound {
		grid-template-columns: 1fr;
	}

	.fr-single-reading {
		padding: 36px 22px 48px;
	}
}