/*
 * Insight article typography — one spec, four places.
 *
 * The same article body is shown while it is written (the TinyMCE iframe), while
 * it is reviewed (the studio preview page), and after it is published (single.php).
 * Those used to be three different treatments, so a contributor never saw what
 * readers would get. Everything below is written to apply at all of them, which
 * is why the root is a :is() list rather than one class.
 *
 * Loaded into the editing iframe through the mce_css filter alongside tokens.css —
 * custom properties do not cross an iframe boundary, so both must go in.
 */

:root {
	--article-measure: 760px;
}

:is(
	.sasal-insight-article__body,
	.sasal-insight-preview__content,
	body.mce-content-body
) {
	color: var(--text-body, #46554e);
	font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
	font-size: var(--text-lg, 17px);
	line-height: var(--leading-relaxed, 1.7);
}

:is(.sasal-entry__content, .sasal-insight-preview__content) {
	font-size: var(--text-lg, 17px);
	line-height: var(--leading-relaxed, 1.7);
}

:lang(ja) :is(.sasal-insight-article__body, .sasal-insight-preview__content, .sasal-entry__content),
body.mce-content-body:lang(ja) {
	font-family: var(--font-jp, system-ui, -apple-system, "Hiragino Sans", sans-serif);
}

:is(
	.sasal-insight-article__body,
	.sasal-insight-preview__content,
	.sasal-entry__content,
	body.mce-content-body
) :where(p, ul, ol, blockquote, figure, table, pre) {
	margin: 0 0 1.15em;
}

:is(
	.sasal-insight-article__body,
	.sasal-insight-preview__content,
	.sasal-entry__content,
	body.mce-content-body
) :where(h2, h3, h4) {
	margin: 1.7em 0 0.5em;
	color: var(--text-primary, #101a16);
	font-weight: var(--weight-medium, 500);
	letter-spacing: var(--tracking-heading, -0.02em);
	line-height: 1.25;
	text-wrap: balance;
}

:is(
	.sasal-insight-article__body,
	.sasal-insight-preview__content,
	.sasal-entry__content,
	body.mce-content-body
) :where(h2) { font-size: var(--text-2xl, 24px); }

:is(
	.sasal-insight-article__body,
	.sasal-insight-preview__content,
	.sasal-entry__content,
	body.mce-content-body
) :where(h3) { font-size: var(--text-xl, 20px); }

:is(
	.sasal-insight-article__body,
	.sasal-insight-preview__content,
	.sasal-entry__content,
	body.mce-content-body
) :where(h4) { font-size: var(--text-lg, 17px); }

:is(
	.sasal-insight-article__body,
	.sasal-insight-preview__content,
	.sasal-entry__content,
	body.mce-content-body
) > :where(h1, h2, h3, h4):first-child {
	margin-top: 0;
}

:is(
	.sasal-insight-article__body,
	.sasal-insight-preview__content,
	.sasal-entry__content,
	body.mce-content-body
) :where(a) {
	color: var(--text-link, #1f6f5c);
	text-underline-offset: 0.15em;
}

:is(
	.sasal-insight-article__body,
	.sasal-insight-preview__content,
	.sasal-entry__content,
	body.mce-content-body
) :where(blockquote) {
	margin-left: 0;
	margin-right: 0;
	padding: 2px 0 2px 22px;
	border-left: 3px solid var(--green-300, #8fd3c2);
	color: var(--text-body, #46554e);
	font-style: normal;
}

:is(
	.sasal-insight-article__body,
	.sasal-insight-preview__content,
	.sasal-entry__content,
	body.mce-content-body
) :where(ul, ol) {
	padding-left: 1.3em;
}

:is(
	.sasal-insight-article__body,
	.sasal-insight-preview__content,
	.sasal-entry__content,
	body.mce-content-body
) :where(li) {
	margin-bottom: 0.4em;
}

:is(
	.sasal-insight-article__body,
	.sasal-insight-preview__content,
	.sasal-entry__content,
	body.mce-content-body
) :where(img) {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-media, 16px);
}

:is(
	.sasal-insight-article__body,
	.sasal-insight-preview__content,
	.sasal-entry__content,
	body.mce-content-body
) :where(code, pre) {
	background: var(--paper-100, #f2f4f1);
	color: var(--text-primary, #101a16);
	font-family: var(--font-mono, ui-monospace, Menlo, monospace);
	font-size: var(--text-base, 14px);
}

:is(
	.sasal-insight-article__body,
	.sasal-insight-preview__content,
	.sasal-entry__content,
	body.mce-content-body
) :where(code) {
	padding: 2px 6px;
	border-radius: var(--radius-sm, 4px);
}

:is(
	.sasal-insight-article__body,
	.sasal-insight-preview__content,
	.sasal-entry__content,
	body.mce-content-body
) :where(pre) {
	padding: 14px 16px;
	border-radius: var(--radius-md, 8px);
	overflow-x: auto;
}

:is(
	.sasal-insight-article__body,
	.sasal-insight-preview__content,
	.sasal-entry__content,
	body.mce-content-body
) :where(hr) {
	height: 1px;
	margin: 2em 0;
	border: 0;
	background: var(--border-subtle, #e2e6e1);
}

/* ---- The article shell: kicker, headline, lead, cover -------------------- */

.sasal-insight-article,
.sasal-insight-preview__article {
	width: min(100%, var(--article-measure));
	margin-inline: auto;
}

.sasal-insight-article__kicker,
.sasal-insight-preview__eyebrow {
	margin: 0 0 14px;
	color: var(--green-700, #1f6f5c);
	font: var(--type-eyebrow, 600 11px/1.2 system-ui);
	letter-spacing: var(--tracking-eyebrow, 0.18em);
	text-transform: uppercase;
}

.sasal-insight-article__title,
.sasal-insight-preview h1 {
	margin: 0;
	color: var(--text-primary, #101a16);
	font-family: var(--font-sans, system-ui, sans-serif);
	font-size: clamp(30px, 4vw, 46px);
	font-weight: var(--weight-light, 300);
	letter-spacing: var(--tracking-display, -0.03em);
	line-height: 1.08;
	text-wrap: balance;
}

.sasal-insight-article__excerpt,
.sasal-insight-preview__excerpt {
	margin: 22px 0 0;
	color: var(--text-muted, #6e7a74);
	font-size: var(--text-xl, 20px);
	font-weight: var(--weight-regular, 400);
	line-height: 1.6;
}

.sasal-insight-article__cover,
.sasal-insight-preview__cover {
	margin: 34px 0;
}

.sasal-insight-article__cover img,
.sasal-insight-preview__cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-media, 16px);
}