/* AI-Genics — posts written in the WordPress editor, shown in the Elementor template "Article Template"
   (mu-plugins/aigenics-articles.php). Elementor styles the template itself (hero, card, image, titles, FAQ heading); this file
   only styles what Elementor cannot reach: the post's own text inside the box "ag-post-content" and its FAQ accordion inside
   "ag-post-faq" (any other Accordion block left in the post text looks the same). Everything is scoped to <main class="ag-article-main">.

   RESPONSIVE MODEL (same as the Elementor pages, aigenics-tools/lib.js): at 1920 px wide the values are Figma's pixels;
   from 1025 to 1919 px and from 1921 px up the whole design scales with the window (--ag-u = 1/1920 of the width, fonts never
   below a minimum); 1024 px and below (tablet) and 767 px and below (mobile) have their own fixed values.
   Figma: blog article 1439:41750 — body DM Sans Medium 20/31 −2 % #515358, one empty line between paragraphs, headings DM Sans
   Medium 33/33 −2 % #384154; FAQ items as on the article "Why Manual LC Discrepancy Review Misses 2 in 3 Errors".
   Styles marked DERIVED are for blocks the Figma article does not show (h3–h6, lists, quotes, images, tables, code, separators,
   password form): consistent with the design, CLIENT TO APPROVE. */

.ag-article-main { --ag-u: 1px; }
@media (min-width: 1025px) and (max-width: 1919px), (min-width: 1921px) {
	.ag-article-main { --ag-u: calc(100vw / 1920); }
}

/* ───────────── post text (Figma) ───────────── */
.ag-article-main .ag-post-content {
	color: #515358;
	font-family: var(--ag-body, "DM Sans"), sans-serif;
	font-weight: 500;
	font-size: max(13px, calc(20 * var(--ag-u)));
	line-height: 1.55;               /* 31 / 20 */
	letter-spacing: -0.02em;         /* −0.4 px */
	overflow-wrap: break-word;
}
.ag-article-main .ag-post-content::after { content: ""; display: table; clear: both; }
/* vertical rhythm: one empty line (31) between blocks; 47 above a heading, 10 under it (Figma's uniform values) */
:where(.ag-article-main) .ag-post-content > * { margin-block: 0; }
:where(.ag-article-main) .ag-post-content > * + * { margin-block-start: calc(31 * var(--ag-u)); }
:where(.ag-article-main) .ag-post-content > * + h2 { margin-block-start: calc(47 * var(--ag-u)); }
:where(.ag-article-main) .ag-post-content > h2 + * { margin-block-start: calc(10 * var(--ag-u)); }
/* paragraphs nested in quotes / list items / cells (zero-weight selectors: the rhythm rules above win at top level) */
:where(.ag-article-main .ag-post-content) p { margin-block: 0; }
:where(.ag-article-main .ag-post-content) p + p { margin-block-start: calc(31 * var(--ag-u)); }
.ag-article-main .ag-post-content h2 {
	max-width: max(690px, calc(1134 * var(--ag-u)));
	padding: 0;
	color: var(--ag-slate-dark, #384154);
	font-family: var(--ag-body, "DM Sans"), sans-serif;
	font-weight: 500;
	font-size: max(20px, calc(33 * var(--ag-u)));
	line-height: 1;                  /* 33 / 33 */
	letter-spacing: -0.02em;         /* −0.66 px */
}
.ag-article-main .ag-post-content strong, .ag-article-main .ag-post-content b { font-weight: 700; }
/* links: the site's inline-link style (class ag-text-links): red, 600, underlined */
.ag-article-main .ag-post-content a, .ag-article-main .ag-post-faq a {
	color: var(--ag-red, #a2262d);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.ag-article-main .ag-post-content a:hover, .ag-article-main .ag-post-content a:focus-visible,
.ag-article-main .ag-post-faq a:hover, .ag-article-main .ag-post-faq a:focus-visible { color: var(--ag-red-deep, #911825); }

/* ───────────── DERIVED (no Figma design — client to approve) ───────────── */
/* h3 26/33 SemiBold, h4–h6 20/31 Bold, all #384154 */
.ag-article-main .ag-post-content h3, .ag-article-main .ag-post-content h4,
.ag-article-main .ag-post-content h5, .ag-article-main .ag-post-content h6 {
	max-width: max(690px, calc(1134 * var(--ag-u)));
	padding: 0;
	color: var(--ag-slate-dark, #384154);
	font-family: var(--ag-body, "DM Sans"), sans-serif;
	letter-spacing: -0.02em;
}
.ag-article-main .ag-post-content h3 { font-weight: 600; font-size: max(16px, calc(26 * var(--ag-u))); line-height: 1.2692; }
.ag-article-main .ag-post-content h4, .ag-article-main .ag-post-content h5, .ag-article-main .ag-post-content h6 { font-weight: 700; font-size: max(13px, calc(20 * var(--ag-u))); line-height: 1.55; }
:where(.ag-article-main) .ag-post-content > * + h3 { margin-block-start: calc(40 * var(--ag-u)); }
:where(.ag-article-main) .ag-post-content > :is(h3, h4, h5, h6) + * { margin-block-start: calc(10 * var(--ag-u)); }
/* lists: the paragraph style, 24 px indent, 10 px between items */
.ag-article-main .ag-post-content ul, .ag-article-main .ag-post-content ol { padding-inline-start: calc(24 * var(--ag-u)); }
.ag-article-main .ag-post-content li + li, .ag-article-main .ag-post-content li > :is(ul, ol) { margin-block-start: calc(10 * var(--ag-u)); }
/* quote: red 3 px rule, the paragraph style in italic, the source smaller in slate */
.ag-article-main .ag-post-content blockquote {
	margin-inline: 0;
	padding: 0 0 0 calc(24 * var(--ag-u));
	border: 0;
	border-inline-start: 3px solid var(--ag-red, #a2262d);
	font-style: italic;
}
.ag-article-main .ag-post-content blockquote cite, .ag-article-main .ag-post-content blockquote footer {
	display: block;
	margin-block-start: calc(10 * var(--ag-u));
	color: var(--ag-slate, #657395);
	font-style: normal;
	font-size: max(13px, calc(16 * var(--ag-u)));
	line-height: 1.5;
	letter-spacing: 0;
}
/* images: rounded like the featured image; captions small, slate, centred */
.ag-article-main .ag-post-content img { max-width: 100%; height: auto; }
/* a Large / Full Size image block without alignment or a custom size spans the text column, like the featured image */
.ag-article-main .ag-post-content .wp-block-image:is(.size-large, .size-full):not(.alignleft, .alignright, .aligncenter, .is-resized) img { width: 100%; }
.ag-article-main .ag-post-content :is(.wp-block-image, .wp-caption) img,
.ag-article-main .ag-post-content > p > img, .ag-article-main .ag-post-content > img { border-radius: calc(25 * var(--ag-u)); }
:where(.ag-article-main .ag-post-content) figure { margin-inline: 0; }   /* the browser's 40 px; centred / floated blocks keep theirs */
.ag-article-main .ag-post-content figcaption, .ag-article-main .ag-post-content .wp-caption-text {
	margin: calc(12 * var(--ag-u)) 0 0;
	color: var(--ag-slate, #657395);
	font-family: var(--ag-body, "DM Sans"), sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: max(13px, calc(16 * var(--ag-u)));
	line-height: 1.5;
	letter-spacing: 0;
	text-align: center;
}
/* wide / full-width blocks stay inside the card; side-floated blocks drop the float on phones */
.ag-article-main .ag-post-content .alignwide, .ag-article-main .ag-post-content .alignfull { width: auto; max-width: 100%; margin-inline: 0; }
.ag-article-main .ag-post-content iframe, .ag-article-main .ag-post-content video, .ag-article-main .ag-post-content embed { max-width: 100%; }
/* tables: cream header row, hairline rows, scroll sideways when wider than the card */
.ag-article-main .ag-post-content > table { display: block; overflow-x: auto; }
.ag-article-main .ag-post-content table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: max(13px, calc(18 * var(--ag-u)));
	line-height: 1.5;
	letter-spacing: 0;
}
.ag-article-main .ag-post-content :is(thead, tfoot) { border: 0; }
.ag-article-main .ag-post-content :is(th, td),
.ag-article-main .ag-post-content tbody > tr:nth-child(odd) > :is(th, td),
.ag-article-main .ag-post-content tbody tr:hover > :is(th, td) {
	padding: calc(14 * var(--ag-u)) calc(18 * var(--ag-u));
	border: 0;
	border-block-end: 1px solid rgba(56, 65, 84, 0.15);
	background-color: transparent;
	text-align: start;
	vertical-align: top;
}
.ag-article-main .ag-post-content th { color: var(--ag-slate-dark, #384154); font-weight: 600; }
.ag-article-main .ag-post-content thead :is(th, td) { background-color: var(--ag-cream, #f6e9dc); }
/* code */
.ag-article-main .ag-post-content :is(code, kbd, samp) {
	padding: 0.1em 0.3em;
	border-radius: 4px;
	background-color: var(--ag-sand, #f3efe1);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
	letter-spacing: 0;
}
.ag-article-main .ag-post-content pre {
	overflow-x: auto;
	padding: calc(20 * var(--ag-u)) calc(24 * var(--ag-u));
	border: 0;
	border-radius: calc(15 * var(--ag-u));
	background-color: var(--ag-sand, #f3efe1);
	font-size: max(13px, calc(16 * var(--ag-u)));
	line-height: 1.6;
	letter-spacing: 0;
	white-space: pre;
}
.ag-article-main .ag-post-content pre code { padding: 0; background: none; font-size: inherit; }
/* separator: a hairline with the heading spacing around it */
.ag-article-main .ag-post-content hr {
	height: 0;
	border: 0;
	border-block-start: 1px solid rgba(56, 65, 84, 0.2);
	background: none;
	opacity: 1;
}
:where(.ag-article-main) .ag-post-content > * + hr, :where(.ag-article-main) .ag-post-content > hr + * { margin-block-start: calc(47 * var(--ag-u)); }
/* password-protected post: the form in the card, button like the site's red buttons */
.ag-article-main .post-password-form { max-width: none; margin-inline: 0; }
.ag-article-main .post-password-form p { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.ag-article-main .post-password-form label { display: flex; flex-direction: column; gap: 8px; }
.ag-article-main .post-password-form p + p { margin-block-start: calc(20 * var(--ag-u)); }
/* WordPress' auto-paragraphs leave a stray </p> after the form's hidden field = an empty paragraph */
.ag-article-main .post-password-form p:empty { display: none; }
.ag-article-main .post-password-form p:empty + p { margin-block-start: 0; }
.ag-article-main .post-password-form input[type="password"] {
	width: min(100%, 420px);
	margin: 0;
	padding: 12px 16px;
	border: 1px solid rgba(56, 65, 84, 0.3);
	border-radius: 10px;
	background-color: #fff;
	font: inherit;
}
.ag-article-main .post-password-form input[type="submit"] {
	margin: 0;
	padding: 14px 30px;
	border: 0;
	border-radius: 30px;
	background-color: var(--ag-red, #a2262d);
	color: #fff;
	font-family: var(--ag-heading, "Bai Jamjuree"), sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 22px;
	text-transform: uppercase;
}
.ag-article-main .post-password-form input[type="submit"]:hover,
.ag-article-main .post-password-form input[type="submit"]:focus-visible { background-color: var(--ag-red-deep, #911825); color: #fff; }

/* no featured image: the card starts with the title. From 1025 px its line box is 0.175em taller above the glyphs than Figma's
   33 px line (line-height 47 instead of 33, article-template.js), so it starts that much higher: the glyphs stay where they were. */
.ag-article-main.ag-no-image .ag-post-title:not(h1) { margin-top: 0; }
@media (min-width: 1025px) {
	.ag-article-main.ag-no-image .ag-post-title:not(h1) { margin-top: -0.175em; }
}

/* ───────────── FAQ: the post's Accordion block in "ag-post-faq" (Figma = 220's items) ─────────────
   The same look for any further Accordion block that stays in the post text ("ag-post-content"): without it, it showed the
   theme's pink nowrap buttons and pushed a phone page sideways.
   closed: #f1fdff, r15, 82 high (26 + question 30 + 26), question DM Sans SemiBold 23/30 #384154, "+" DM Sans Medium 45/30
   #657395 in a 34 × 30 box 23 px from the right; open: #fffaf2, question Bold red, "-" red, answer 13 px under the question,
   DM Sans Regular 20/30 #5e5e66, max 1058 wide, 23 px bottom padding; 10 px between items. */
.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion {
	display: flex;
	flex-direction: column;
	gap: calc(10 * var(--ag-u));
	margin-inline: 0;
	padding: 0;
}
.ag-article-main .ag-post-faq .wp-block-accordion { margin-block: 0; }   /* in the post text: the text's spacing between blocks */
.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-item {
	margin: 0;
	padding: 0;
	border-radius: calc(15 * var(--ag-u));
	background-color: #f1fdff;
}
.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-item.is-open { background-color: #fffaf2; }
.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-heading {
	max-width: none;
	margin: 0;
	padding: 0;
	font: inherit;
	letter-spacing: 0;
}
.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-heading__toggle {
	display: flex;
	align-items: center;
	gap: calc(20 * var(--ag-u));
	width: 100%;
	margin: 0;
	padding: calc(26 * var(--ag-u)) calc(23 * var(--ag-u)) calc(26 * var(--ag-u)) calc(30 * var(--ag-u));
	border: 0;
	border-radius: calc(15 * var(--ag-u));
	background: none;
	box-shadow: none;
	color: var(--ag-slate-dark, #384154);
	font-family: var(--ag-body, "DM Sans"), sans-serif;
	font-weight: 600;
	font-size: max(14px, calc(23 * var(--ag-u)));
	line-height: 1.3043;             /* 30 / 23 */
	letter-spacing: 0;
	text-align: start;
	text-transform: none;
	white-space: normal;
	user-select: text;
	transition: none;
	cursor: pointer;
}
.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-heading__toggle-title { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; text-decoration: none; }
.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title { text-decoration: none; }
.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-heading__toggle-icon {
	order: 2;                        /* always on the right, as designed */
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(34 * var(--ag-u));
	height: calc(30 * var(--ag-u));
	font-size: 0;                    /* the block's own "+" is replaced by the designed glyphs below */
	transform: none;
	transition: none;
	color: var(--ag-slate, #657395);
}
.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-heading__toggle-icon::before {
	content: "+";
	font-family: var(--ag-body, "DM Sans"), sans-serif;
	font-weight: 500;
	font-size: max(27px, calc(45 * var(--ag-u)));
	line-height: 0.6667;             /* 30 / 45 */
}
.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle {
	padding-bottom: calc(13 * var(--ag-u));
	color: var(--ag-red, #a2262d);
	font-weight: 700;
}
.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
	transform: none;
	color: var(--ag-red, #a2262d);
}
.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon::before { content: "-"; }
.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-panel {
	margin: 0;
	padding: 0 calc(30 * var(--ag-u)) calc(23 * var(--ag-u));
	color: #5e5e66;
	font-family: var(--ag-body, "DM Sans"), sans-serif;
	font-weight: 400;
	font-size: max(13px, calc(20 * var(--ag-u)));
	line-height: 1.5;                /* 30 / 20 */
	letter-spacing: 0;
}
/* closed items show only their question — WordPress' own mechanism: the accordion script gives a closed panel
   hidden="until-found", which find-in-page (Ctrl+F) and links to text inside it open; without JavaScript every answer stays
   readable. The theme's reset hides every [hidden] with display: none, which would stop find-in-page, so an until-found panel
   keeps its box: 0 high (content-visibility: hidden, no padding — the same as WordPress' own [hidden] panel rule). */
.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-panel[hidden] { padding: 0; border: 0; }
@supports (content-visibility: hidden) {
	.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-panel[hidden="until-found" i] { display: block; content-visibility: hidden; }
}
.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-panel > * { max-width: max(690px, calc(1058 * var(--ag-u))); margin-block: 0; }
.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-panel > * + * { margin-block-start: calc(30 * var(--ag-u)); }

/* ───────────── tablet (≤ 1024 px) — same values as the Elementor article ───────────── */
@media (max-width: 1024px) {
	.ag-article-main .ag-post-content { font-size: 18px; line-height: 28px; letter-spacing: -0.36px; }
	:where(.ag-article-main) .ag-post-content > * + * { margin-block-start: 28px; }
	:where(.ag-article-main .ag-post-content) p + p { margin-block-start: 28px; }
	:where(.ag-article-main) .ag-post-content > * + h2 { margin-block-start: 40px; }
	:where(.ag-article-main) .ag-post-content > * + h3 { margin-block-start: 34px; }
	:where(.ag-article-main) .ag-post-content > * + hr, :where(.ag-article-main) .ag-post-content > hr + * { margin-block-start: 40px; }
	.ag-article-main .ag-post-content :is(h2, h3, h4, h5, h6) { max-width: 100%; }
	.ag-article-main .ag-post-content h2 { font-size: 26px; line-height: 32px; letter-spacing: -0.52px; }
	.ag-article-main .ag-post-content h3 { font-size: 22px; line-height: 28px; letter-spacing: -0.44px; }
	.ag-article-main .ag-post-content :is(h4, h5, h6) { font-size: 18px; line-height: 28px; }
	.ag-article-main .ag-post-content :is(.wp-block-image, .wp-caption) img,
	.ag-article-main .ag-post-content > p > img, .ag-article-main .ag-post-content > img { border-radius: 20px; }
	.ag-article-main .ag-post-content table { font-size: 16px; }

	.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-heading__toggle { padding: 22px 20px 25px 24px; font-size: 20px; line-height: 26px; }
	.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle { padding-bottom: 12px; }
	.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-panel { padding: 0 24px 23px; font-size: 18px; line-height: 26px; }
	.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-panel > * { max-width: 100%; }
	.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-panel > * + * { margin-block-start: 26px; }
}

/* ───────────── mobile (≤ 767 px) ───────────── */
@media (max-width: 767px) {
	.ag-article-main .ag-post-content { font-size: 16px; line-height: 26px; letter-spacing: -0.32px; }
	:where(.ag-article-main) .ag-post-content > * + * { margin-block-start: 24px; }
	:where(.ag-article-main .ag-post-content) p + p { margin-block-start: 24px; }
	:where(.ag-article-main) .ag-post-content > * + h2 { margin-block-start: 32px; }
	:where(.ag-article-main) .ag-post-content > h2 + *, :where(.ag-article-main) .ag-post-content > :is(h3, h4, h5, h6) + * { margin-block-start: 8px; }
	:where(.ag-article-main) .ag-post-content > * + h3 { margin-block-start: 28px; }
	:where(.ag-article-main) .ag-post-content > * + hr, :where(.ag-article-main) .ag-post-content > hr + * { margin-block-start: 32px; }
	.ag-article-main .ag-post-content h2 { font-size: 22px; line-height: 28px; letter-spacing: -0.44px; }
	.ag-article-main .ag-post-content h3 { font-size: 19px; line-height: 25px; letter-spacing: -0.38px; }
	.ag-article-main .ag-post-content :is(h4, h5, h6) { font-size: 16px; line-height: 26px; }
	.ag-article-main .ag-post-content :is(ul, ol) { padding-inline-start: 20px; }
	.ag-article-main .ag-post-content blockquote { padding-inline-start: 16px; }
	.ag-article-main .ag-post-content :is(.wp-block-image, .wp-caption) img,
	.ag-article-main .ag-post-content > p > img, .ag-article-main .ag-post-content > img { border-radius: 16px; }
	.ag-article-main .ag-post-content :is(.alignleft, .alignright) { float: none; margin-inline: 0; }
	.ag-article-main .ag-post-content table { font-size: 14px; table-layout: auto; }   /* columns fit their words; the table scrolls sideways when needed */
	.ag-article-main .ag-post-content :is(th, td) { overflow-wrap: normal; }
	.ag-article-main .ag-post-content :is(th, td),
	.ag-article-main .ag-post-content tbody > tr:nth-child(odd) > :is(th, td),
	.ag-article-main .ag-post-content tbody tr:hover > :is(th, td) { padding: 10px 12px; }
	.ag-article-main .ag-post-content pre { padding: 16px; border-radius: 12px; }

	.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion { gap: 8px; }
	.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-item, .ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-heading__toggle { border-radius: 12px; }
	.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-heading__toggle { gap: 12px; padding: 18px 16px 20px 16px; font-size: 18px; line-height: 24px; }
	.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle { padding-bottom: 10px; }
	.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-heading__toggle-icon { width: 26px; height: 24px; }
	.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-heading__toggle-icon::before { font-size: 36px; line-height: 24px; }
	.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-panel { padding: 0 16px 18px; font-size: 16px; line-height: 24px; }
	.ag-article-main :is(.ag-post-faq, .ag-post-content) .wp-block-accordion-panel > * + * { margin-block-start: 24px; }
}

/* phones: table cells keep whole words (Hello's reset sets word-break: break-word on th/td); a wide table scrolls sideways */
@media (max-width: 767px) {
	.ag-article-main .ag-post-content th,
	.ag-article-main .ag-post-content td { word-break: normal; overflow-wrap: normal; }
}

/* ── Research & Insights item pages (Figma v8 node 20:853; template "Research Item Template", aigenics-articles.php) ──
   Hero label "PRODUCT – TOPIC": product and dash white, topic beige (the label's own colour). Byline "By <author> | <month>"
   (ag-post-author): three spaces either side of the bar in Figma → 0.6em margins; in the card the name is black, the rest #515358. */
.ag-article-main .ag-post-category b { font-weight: inherit; color: #ffffff; }
.ag-article-main .ag-post-category .ag-cat-sep { color: #ffffff; }
.ag-article-main .ag-post-author .ag-by-sep { margin: 0 0.6em; }
.ag-article-main .ag-post-card-byline .ag-by-name,
.ag-article-main p.ag-post-author:not(h1 ~ p) .ag-by-name { color: #000000; }
/* References list (the item's list block with the class "ag-references"): red links, 22/51, slate bullets (Figma) */
.ag-article-main .ag-post-content ul.ag-references { list-style: none; padding-left: 0; }
.ag-article-main .ag-post-content ul.ag-references li { position: relative; padding-left: calc(38 * var(--ag-u, 1px)); font-size: calc(22 * var(--ag-u, 1px)); line-height: calc(51 * var(--ag-u, 1px)); }
.ag-article-main .ag-post-content ul.ag-references li::before { content: ''; position: absolute; left: calc(18 * var(--ag-u, 1px)); top: 0.95em; width: 10px; height: 10px; border-radius: 50%; background: #384154; }
.ag-article-main .ag-post-content ul.ag-references a { color: var(--ag-red, #a2262d); }
.ag-article-main .ag-post-content ul.ag-references li { margin: 0; }