/* Leology theme · design system 1.1.0 · the article surface (inc/ds.php: leology_ds_surface()). Drawn after Arena-x-B-01-r1
   (article.html, post-014.html, post-paid-ads-ecosystem.html, specimen-quote.html; css/layout.css + css/site.css "Article").
   COMPONENT_LIBRARY.md 6.2 breadcrumbs · 6.3 header · 6.4 contents · 6.5 prose · 6.6 prompt panel · 6.8 Arena card ·
   6.9 comments · 6.10 related rail · 6.11 banner · 6.12 founder quote · 6.13 embedded board · 6.14 sign-in gate.
   Class selectors only, in layer `ds` (wins over style.css, which is in `legacy`). Where a class keeps its legacy name
   (single.php, the scripts and the analytics read them), the legacy rule still applies underneath, so the properties it
   sets that B does not want are reset here.

   Prose: the body is WordPress block markup (shared with ordinary pages, `.leo-ds--page`: the legal pages, 20/10/2026). Its rules reach the body's own blocks only (direct children of .leo-prose,
   and the lists and quotes inside them), never the inside of an interactive embed (the Paid Ads map #pae, the prompt
   cell, the board), whose own stylesheets are in `legacy` and would otherwise lose to these.
   WordPress prints the core block styles as unlayered inline <style> elements (wp-block-separator-inline-css,
   wp-block-table-inline-css, wp-block-library-inline-css), and an unlayered rule outranks every layer whatever its
   specificity: the few properties they set on these elements (every <figure>'s margin, from core's
   `:where(figure){margin:0 0 1em}`; the separator's and the table cells' borders; the cells' padding) are overridden
   with !important, and only those. No motion here: no reveal, wipe or rise; hover and focus feedback only. */

@layer ds {

	/* ---- Breadcrumbs (6.2): a Press Grey strip, condensed capitals ------------------------------- */
	.leo-ds--article .leo-art__crumbbar { padding: 16px 0; background: var(--b-grey); border-bottom: 1.5px solid var(--b-line-2); }
	.leo-ds--article .leo-crumbs { display: block; gap: 0; font-size: inherit; color: inherit; }
	.leo-ds--article .leo-crumbs__list {
		display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; list-style: none;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 15px; line-height: 1.6; letter-spacing: .05em; text-transform: uppercase; color: var(--b-ink-3);
	}
	.leo-ds--article .leo-crumbs__list > li { list-style: none; }
	.leo-ds--article .leo-crumbs__list > li + li::before { content: "/"; margin: 0 10px; opacity: .5; }
	.leo-ds--article .leo-crumbs__list a { padding-block: 0; color: var(--b-ink-2); text-decoration: none; transition: color 160ms var(--mo-ease-fade); }
	.leo-ds--article .leo-crumbs__list a:hover, .leo-ds--article .leo-crumbs__list .leo-crumbs__here { color: var(--b-field); }
	/* Phones: a taller tap target on the links (as the live theme has), without changing the strip. */
	@media (max-width: 767.98px) {
		.leo-ds--article .leo-crumbs__list a { display: inline-block; margin-block: -6px; padding-block: 6px; }
	}

	/* ---- Header (6.3): tag, title, deck, the ruled byline; the quote beside the title (6.12) -------- */
	.leo-ds--article .leo-art__head { margin: 0; padding: 48px 0 40px; }
	@media (min-width: 768px) { .leo-ds--article .leo-art__head { padding: 72px 0 48px; } }
	.leo-ds--article .leo-art__headin { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
	.leo-ds--article .leo-art__lead { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }

	.leo-ds--article .leo-tag {
		display: inline-block; align-self: flex-start; width: fit-content; padding: 2px 8px; border: 0; border-radius: 0; background: var(--b-sun); color: var(--b-ink);
		font-family: var(--ax-display); font-stretch: 75%; font-size: 15px; font-weight: 700; line-height: 1.6; letter-spacing: .03em; text-transform: uppercase; text-decoration: none;
		transition: background-color 160ms var(--mo-ease-fade), color 160ms var(--mo-ease-fade);
	}
	.leo-ds--article .leo-tag:hover { background: var(--b-ink); color: var(--b-sun); }

	/* Measures in em, not ch: ch follows whichever font is loaded. pretty, not balance: a long title fills its first line. */
	.leo-ds--article .leo-art__title {
		max-width: var(--ds-type-title-article-measure); margin: 16px 0 0;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: clamp(42px, 5.6vw, 88px); line-height: .96; letter-spacing: 0; color: var(--b-field);
		text-wrap: pretty;
	}
	.leo-ds--article:lang(vi) .leo-art__title { line-height: 1.05; }
	.leo-ds--article .leo-art__title:first-child { margin-top: 0; }
	.leo-ds--article .leo-art__title.screen-reader-text { margin: -1px; }
	.leo-ds--article .leo-art__deck { max-width: 860px; margin: 18px 0 0; font-family: var(--ax-text); font-weight: 500; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; color: var(--b-ink-2); }

	/* The byline: shown at every width (the live theme hid it on phones, where its quote row stood in). */
	.leo-ds--article .leo-art__meta {
		grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: 26px 0 0; padding: 20px 0 0;
		border: 0; border-top: 3px solid var(--b-field); color: var(--b-ink-2); font-size: 14px;
	}
	@media (max-width: 599.98px) { .leo-ds--article .leo-art__meta { flex-direction: column; align-items: flex-start; } }
	.leo-ds--article .leo-art__author { display: inline-flex; align-items: center; gap: 10px; }
	.leo-ds--article .leo-art__author .leo-avatar { width: 42px; height: 42px; background: var(--b-field); color: #fff; font-size: 14px; }
	.leo-ds--article .leo-art__author strong {
		display: block; font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 19px; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase; color: var(--b-ink);
	}
	.leo-ds--article .leo-art__author small { display: block; margin: 0; font: 400 13px/1.6 var(--ax-text); color: var(--b-ink-3); }
	.leo-ds--article .leo-art__facts { display: inline-flex; flex-wrap: wrap; gap: 8px 20px; }
	.leo-ds--article .leo-art__fact { display: inline-flex; align-items: center; gap: 7px; font: 400 14px/1.6 var(--ax-text); color: var(--b-ink-2); }
	.leo-ds--article .leo-art__fact .leo-icon { width: 16px; height: 16px; stroke-width: 1.8; color: var(--b-field); }

	/* The post's own quote (D-047). No quote, no column and no room kept for one (single.php adds --quote only then). */
	.leo-ds--article .leo-hquote {
		display: grid; grid-template-columns: var(--ds-size-avatar-quote) minmax(0, 1fr); column-gap: 18px; align-items: start;
		margin: 32px 0 0 !important; padding: 20px 0 0; border-top: 3px solid var(--b-sun);
	}
	.leo-ds--article .leo-hquote__face { display: grid; place-items: center; width: var(--ds-size-avatar-quote); height: var(--ds-size-avatar-quote); overflow: hidden; border: 2px solid var(--b-ink); background: var(--b-sun); }
	.leo-ds--article .leo-hquote__face img { width: 100%; height: 100%; object-fit: cover; }
	/* The theme's own photograph is a full-length shot: zoomed to the face (its crop on the live theme). */
	.leo-ds--article .leo-hquote__face--zoom img { object-position: 50% 12%; transform: scale(3.2); }
	.leo-ds--article .leo-hquote__monogram { font-family: var(--ax-display); font-stretch: 75%; font-weight: 800; font-size: 26px; line-height: 1; color: var(--b-ink); }
	.leo-ds--article .leo-hquote__text { margin: 0; padding: 0; border: 0; background: none; }
	.leo-ds--article .leo-hquote__text p { margin: 0; font: italic 600 clamp(19px, 1.5vw, 23px)/1.45 var(--ax-text); color: var(--b-ink); }
	.leo-ds--article .leo-hquote__cite {
		grid-column: 2; margin-top: 10px; font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 15px; line-height: 1.6; letter-spacing: .05em; text-transform: uppercase; color: var(--b-field);
	}
	@media (min-width: 1024px) {
		.leo-ds--article .leo-art__head--quote .leo-art__headin { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); column-gap: 64px; }
		.leo-ds--article .leo-art__head--quote .leo-art__title { max-width: var(--ds-type-title-article-measure-quote); text-wrap: balance; }
		.leo-ds--article .leo-art__head--quote .leo-hquote { align-self: end; margin: 0 0 6px !important; }
	}
	@media (max-width: 599.98px) {
		.leo-ds--article .leo-hquote { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; }
		.leo-ds--article .leo-hquote__face { width: 48px; height: 48px; }
		.leo-ds--article .leo-hquote__monogram { font-size: 18px; }
	}

	/* ---- Banner (6.11): crop · whole · inset, chosen in single.php exactly as the live theme chooses ---- */
	.leo-ds--article .leo-art__cover { margin: 0 !important; max-height: none; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; background: var(--b-grey); }
	.leo-ds--article .leo-art__cover img { display: block; width: 100%; height: auto; max-height: var(--ds-size-banner-max-phone); object-fit: cover; object-position: 50% 50%; }
	.leo-ds--article .leo-art__cover--crop, .leo-ds--article .leo-art__cover--whole { border-bottom: 6px solid var(--b-sun); }
	.leo-ds--article .leo-art__cover--whole img { object-fit: contain; }
	@media (min-width: 768px) {
		.leo-ds--article .leo-art__cover img { height: var(--ds-size-banner-height); max-height: none; }
	}
	/* Inset: the complete banner, framed, over the reading column; its height follows the picture. */
	.leo-ds--article .leo-art__banner { margin-top: 0; padding-top: 8px; }
	.leo-ds--article .leo-art__cover.leo-art__cover--inset { border: 2px solid var(--b-field); background: #fff; }
	.leo-ds--article .leo-art__cover.leo-art__cover--inset img { height: auto; max-height: none; object-fit: contain; }
	@media (min-width: 1024px) {
		.leo-ds--article .leo-art__banner { display: grid; grid-template-columns: 210px minmax(0, 1fr) 260px; gap: 48px; }
		.leo-ds--article .leo-art__banner > .leo-art__cover { grid-column: 2; }
	}
	@media (min-width: 1280px) {
		.leo-ds--article .leo-art__banner { grid-template-columns: 230px minmax(0, 700px) 290px; justify-content: space-between; }
	}

	/* ---- Grid: contents · reading column · related ------------------------------------------------ */
	.leo-ds--article .leo-art__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 0; padding: 48px 0 var(--ds-section-block); align-items: start; }
	.leo-ds--article .leo-art__toc { display: none; }
	.leo-ds--article .leo-art__col, .leo-ds--article .leo-rail { min-width: 0; }
	@media (min-width: 1024px) {
		.leo-ds--article .leo-art__grid { grid-template-columns: 210px minmax(0, 1fr) 260px; gap: 48px; padding-top: 64px; }
		/* The 4 px of padding keeps the focus ring of a link inside the scrolling column. */
		.leo-ds--article .leo-art__toc {
			display: block; position: sticky; top: calc(var(--leo-nav-top, 0px) + var(--ds-size-sticky-top)); align-self: start;
			max-height: calc(100vh - var(--leo-nav-top, 0px) - 124px); overflow: auto; margin: -4px; padding: 4px;
		}
		.leo-ds--article .leo-toc-m { display: none; }
		.leo-ds--article .leo-rail { grid-column: auto; position: sticky; top: calc(var(--leo-nav-top, 0px) + var(--ds-size-sticky-top)); align-self: start; }
	}
	@media (min-width: 1280px) {
		.leo-ds--article .leo-art__grid { grid-template-columns: 230px minmax(0, 700px) 290px; justify-content: space-between; }
	}

	/* ---- Contents (6.4): a ruled title, links on a track, the section being read on a 4 px Sun mark ---- */
	.leo-ds--article .leo-toc { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
	.leo-ds--article .leo-toc__title {
		margin: 0 0 10px; padding-top: 12px; border-top: 3px solid var(--b-field);
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 17px; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; color: var(--b-field);
	}
	.leo-ds--article .leo-toc__list { display: grid; gap: 2px; margin: 0; padding: 0; }
	.leo-ds--article .leo-toc__item a {
		display: block; padding: 7px 0 7px 14px; border: 0; border-left: 2px solid var(--b-line); border-radius: 0; background: none;
		font: 500 14px/1.4 var(--ax-text); color: var(--b-ink-2); text-decoration: none;
		transition: color 160ms var(--mo-ease-fade), border-color 160ms var(--mo-ease-fade);
	}
	.leo-ds--article .leo-toc__item a:hover { color: var(--b-field); border-left-color: var(--b-field); background: none; }
	.leo-ds--article .leo-toc__item--h3 a { padding-left: 28px; font-size: 14px; }
	.leo-ds--article .leo-toc__item a.is-active { color: var(--b-ink); font-weight: 700; border-left: 4px solid var(--b-sun); padding-left: 12px; background: none; }
	.leo-ds--article .leo-toc__item--h3 a.is-active { padding-left: 26px; }

	/* Phones and tablets: the contents in one framed box above the body. */
	.leo-ds--article .leo-toc-m { margin: 0 0 32px; overflow: hidden; border: 2px solid var(--b-field); border-radius: 0; background: #fff; box-shadow: none; }
	.leo-ds--article .leo-toc-m > summary {
		display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 16px; cursor: pointer; list-style: none;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 18px; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; color: var(--b-field);
	}
	.leo-ds--article .leo-toc-m[open] > summary { border-bottom: 1.5px solid var(--b-line-2); }
	.leo-ds--article .leo-toc-m > summary .leo-icon { width: 20px; height: 20px; color: var(--b-field); transition: transform 200ms var(--mo-ease-fade); }
	.leo-ds--article .leo-toc-m .leo-toc { padding: 4px 16px 14px; border: 0; }
	.leo-ds--article .leo-toc-m .leo-toc__title { display: none; }

	/* ---- Prose (6.5): Hanken 18/1.75 on white, at most 700 px ------------------------------------- */
	.leo-ds--article .leo-art__card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose { max-width: var(--ds-size-measure); overflow-wrap: break-word; font: 400 18px/1.75 var(--ax-text); color: var(--b-ink); }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > * { margin: 0; }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > * + * { margin-top: 1.15em; }

	:is(.leo-ds--article, .leo-ds--page) .leo-prose > h2 {
		margin-top: 2.1em; font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: clamp(32px, 3vw, 42px); line-height: 1.02; letter-spacing: 0; color: var(--b-field);
		scroll-margin-top: calc(var(--leo-nav-top, 0px) + 96px);
	}
	:is(.leo-ds--article, .leo-ds--page):lang(vi) .leo-prose > h2 { line-height: 1.1; }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > h2::before { content: ""; display: block; width: 44px; height: 6px; margin-bottom: 16px; background: var(--b-sun); }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > h3 { margin-top: 1.6em; font: 700 21px/1.35 var(--ax-text); color: var(--b-ink); scroll-margin-top: calc(var(--leo-nav-top, 0px) + 96px); }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > h4 { margin-top: 1.4em; font: 700 18px/1.4 var(--ax-text); color: var(--b-ink); }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > :first-child { margin-top: 0; }

	:is(.leo-ds--article, .leo-ds--page) .leo-prose > :is(p, ul, ol, blockquote, h2, h3, h4, figure) :is(strong, b) { font-weight: 700; color: inherit; }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > :is(p, ul, ol, blockquote, h3, h4, figure) a {
		color: var(--b-field); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color 160ms var(--mo-ease-fade);
	}
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > :is(p, ul, ol, blockquote, h3, h4, figure) a:hover { color: var(--b-ink); }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > :is(p, ul, ol, blockquote) code { padding: 1px 5px; border-radius: 0; background: var(--b-grey); color: var(--b-ink); font-family: var(--ds-font-family-mono); font-size: .86em; }

	/* Lists: Sun squares, Ultramarine numerals. */
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > :is(ul, ol), :is(.leo-ds--article, .leo-ds--page) .leo-prose > :is(ul, ol) li > :is(ul, ol) { display: grid; gap: .65em; padding: 0; list-style: none; }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > :is(ul, ol) li > :is(ul, ol) { margin: .65em 0 0; }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > :is(ul, ol) li { position: relative; margin: 0; padding-left: 1.75em; line-height: inherit; list-style: none; }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > :is(ul, ol) li > p { margin: 0; }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > ul > li::before, :is(.leo-ds--article, .leo-ds--page) .leo-prose > :is(ul, ol) li > ul > li::before {
		content: ""; position: absolute; left: .25em; top: .66em; width: 9px; height: 9px; background: var(--b-sun); box-shadow: 0 0 0 1.5px var(--b-ink);
	}
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > ol, :is(.leo-ds--article, .leo-ds--page) .leo-prose > :is(ul, ol) li > ol { counter-reset: leo-ol; }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > ol > li, :is(.leo-ds--article, .leo-ds--page) .leo-prose > :is(ul, ol) li > ol > li { counter-increment: leo-ol; }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > ol > li::before, :is(.leo-ds--article, .leo-ds--page) .leo-prose > :is(ul, ol) li > ol > li::before {
		content: counter(leo-ol); position: absolute; left: 0; top: 0;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 800; font-size: 22px; line-height: 1.3; color: var(--b-field);
	}

	/* Quotes on Sand behind a 6 px Ultramarine bar. */
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > blockquote {
		margin-top: 1.7em; padding: 22px 24px 22px 30px; border: 0; border-radius: 0; background: var(--b-sand); box-shadow: inset 6px 0 0 var(--b-field);
		font-style: normal; color: var(--b-ink);
	}
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > blockquote > * { margin: 0; }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > blockquote > * + * { margin-top: .8em; }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > blockquote cite { display: block; font-size: 15px; font-style: normal; font-weight: 600; color: var(--b-ink-2); }

	/* A section break is a 64 × 3 Ultramarine stub; before a heading the heading's Sun bar is the break. */
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > hr { width: 64px; height: 0; margin: 2.6em 0; border: 0; border-top: 3px solid var(--b-field) !important; background: none; opacity: 1; }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > hr:has(+ h2) { border-top-color: transparent !important; margin: 1.2em 0 0; }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > hr:first-child { margin-top: 0; }

	/* Tables: a scroll wrapper framed in Ultramarine, an Ultramarine header row. */
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > .wp-block-table { margin: 1.6em 0 0 !important; overflow-x: auto; border: 2px solid var(--b-field); }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > .wp-block-table table { width: 100%; min-width: 640px; margin: 0; border-collapse: collapse; font-size: 15px; }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > .wp-block-table thead { border-bottom: 0 !important; }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > .wp-block-table :is(th, td) { padding: 10px 12px !important; border: 0 !important; text-align: left; vertical-align: top; }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > .wp-block-table th {
		background: var(--b-field); color: #fff; font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 17px; line-height: 1.2; letter-spacing: .03em; text-transform: uppercase;
	}
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > .wp-block-table td { border-top: 1.5px solid var(--b-line) !important; font-size: 15px; line-height: 1.55; color: var(--b-ink); }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > .wp-block-table td:first-child { font-weight: 700; }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > .wp-block-table figcaption { padding: 8px 12px; font-size: 13px; line-height: 1.45; color: var(--b-ink-3); }

	/* Figures: the full column, framed. */
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > :is(.wp-block-image, .wp-block-embed) { margin: 1.6em 0 0 !important; }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > .wp-block-image img { width: 100%; height: auto; border: 2px solid var(--b-field); border-radius: 0; }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > .wp-block-image figcaption { margin-top: 8px; font-size: 13px; line-height: 1.45; text-align: left; color: var(--b-ink-3); }

	/* Code blocks outside the prompt cell. */
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > .wp-block-code {
		padding: 18px; overflow: auto; border: 0; border-radius: 0; background: var(--b-grey); color: var(--b-ink);
		font: 400 13px/1.6 var(--ds-font-family-mono); white-space: pre-wrap; overflow-wrap: anywhere;
	}
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > .wp-block-code code { padding: 0; background: none; color: inherit; font: inherit; }

	.leo-ds--article .leo-pagelinks { margin-top: 28px; font: 600 15px/1.5 var(--ax-text); color: var(--b-ink-2); }

	/* ---- Prompt panel (6.6): the live prompt cell (assets/interactive/ad-simulation.js builds it) ------ */
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > .leo-prompt { margin-top: 1.7em; overflow: hidden; border: 2px solid var(--b-field); border-radius: 0; background: #fff; box-shadow: none; }
	.leo-ds--article .leo-prompt__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 12px 10px 16px; border: 0; background: var(--b-field); color: #fff; }
	.leo-ds--article .leo-prompt__bar :focus-visible { outline-color: var(--b-sun); }
	.leo-ds--article .leo-prompt__label {
		display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-right: auto;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 18px; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; color: #fff;
	}
	.leo-ds--article .leo-prompt__dot { display: none; }
	.leo-ds--article .leo-prompt__label small { font: 500 13px/1.3 var(--ax-text); font-stretch: 100%; letter-spacing: 0; text-transform: none; color: var(--b-on); }
	.leo-ds--article .leo-prompt__copy { min-height: 40px; padding: 8px 14px; border-color: var(--b-sun); background: var(--b-sun); color: var(--b-ink); font-size: 16px; }
	.leo-ds--article .leo-prompt__copy:hover, .leo-ds--article .leo-prompt__copy:focus-visible { border-color: #fff; background: #fff; color: var(--b-ink); }
	.leo-ds--article .leo-prompt__copy.is-copied { border-color: #fff; background: #fff; color: var(--b-field); }
	.leo-ds--article .leo-prompt__view { position: relative; }
	.leo-ds--article .leo-prompt__view.is-collapsed { max-height: none; overflow: visible; }
	.leo-ds--article .leo-prompt__view.is-collapsed::after { display: none; }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose .leo-prompt__pre {
		margin: 0; padding: 18px; overflow: auto; border: 0; border-radius: 0; background: var(--b-grey); color: var(--b-ink);
		font: 400 13px/1.6 var(--ds-font-family-mono); tab-size: 4; white-space: pre-wrap; overflow-wrap: anywhere;
	}
	.leo-ds--article .leo-prompt__view.is-collapsed .leo-prompt__pre { max-height: 320px; }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose .leo-prompt__pre:focus-visible { outline: 2px solid var(--b-ink); outline-offset: -4px; }
	:is(.leo-ds--article, .leo-ds--page) .leo-prose .leo-prompt__pre code { padding: 0; border-radius: 0; background: none; color: inherit; font: inherit; }
	.leo-ds--article .leo-prompt__foot { display: block; padding: 0; border: 0; background: #fff; }
	.leo-ds--article .leo-prompt__toggle {
		display: flex; justify-content: center; width: 100%; min-height: 48px; padding: 8px 16px; border: 0; border-top: 2px solid var(--b-field); background: #fff; color: var(--b-field);
		font-size: 17px; letter-spacing: .04em; text-decoration: none;
	}
	.leo-ds--article .leo-prompt__toggle:hover, .leo-ds--article .leo-prompt__toggle:focus-visible { background: var(--b-sun); color: var(--b-ink); }
	.leo-ds--article .leo-prompt__toggle:focus-visible { outline-offset: -4px; }
	.leo-ds--article .leo-prompt__status { display: block; padding: 10px 16px; font: 500 14px/1.5 var(--ax-text); color: var(--b-ink-2); }
	.leo-ds--article .leo-prompt__status:empty { display: none; }
	.leo-ds--article .leo-prompt.has-error .leo-prompt__status { color: var(--ds-color-danger); }

	/* ---- Embedded board (6.13): framed in Ultramarine, square buttons; the board itself is untouched ---- */
	:is(.leo-ds--article, .leo-ds--page) .leo-prose > .leo-adsim { margin-top: 1.7em; }
	.leo-ds--article .leo-adsim__frame { height: clamp(560px, 82vh, 880px); border: 2px solid var(--b-field); border-radius: 0; background: #fff; box-shadow: none; }
	.leo-ds--article .leo-adsim__frame.is-fullscreen, .leo-ds--article .leo-adsim__frame:fullscreen { width: 100%; height: 100%; border: 0; }
	.leo-ds--article .leo-adsim__iframe { background: #fff; }
	.leo-ds--article .leo-adsim__bar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
	.leo-ds--article .leo-adsim__newtab { min-height: 40px; padding: 8px 16px; border-color: var(--b-field); background: transparent; color: var(--b-field); text-decoration: none; }
	.leo-ds--article .leo-adsim__newtab:hover, .leo-ds--article .leo-adsim__newtab:focus-visible { border-color: var(--b-field); background: var(--b-field); color: #fff; }
	.leo-ds--article .leo-adsim__fallback a { color: var(--b-field); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
	@media (max-width: 767.98px) {
		.leo-ds--article .leo-adsim__frame { height: clamp(520px, 78vh, 760px); }
		.leo-ds--article .leo-adsim__bar .leo-btn { flex: 1 1 auto; justify-content: center; }
	}

	/* ---- Signed out (6.14): the preview, a dashed rule, the Ultramarine sign-in card. No blur. ------ */
	.leo-ds--article .leo-lockzone { position: static; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
	.leo-ds--article .leo-lockzone__teaser { padding: 0 0 28px; border-bottom: 2px dashed var(--b-line-2); }
	.leo-ds--article .leo-lockzone__label {
		display: block; margin: 0 0 12px;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; color: var(--b-ink-3);
	}
	:is(.leo-ds--article, .leo-ds--page) .leo-prose--preview > p { font-size: 19px; line-height: 1.7; color: var(--b-ink); }
	.leo-ds--article .leo-lockzone__ghost { display: none; }
	.leo-ds--article .leo-lockzone__gate {
		position: static; margin: 28px 0 0; padding: 32px 30px 30px; border: 0; border-radius: 0; background: var(--b-field); color: #fff; box-shadow: none;
		-webkit-backdrop-filter: none; backdrop-filter: none;
	}
	.leo-ds--article .leo-lockzone__gate :focus-visible { outline-color: var(--b-sun); }
	.leo-ds--article .leo-lockzone__gate .leo-auth-cta { display: grid; gap: 14px; justify-items: start; text-align: left; }
	.leo-ds--article .leo-lockzone__gate .leo-auth-cta__title { margin: 0; font-size: clamp(32px, 3vw, 44px); line-height: 1; }
	.leo-ds--article:lang(vi) .leo-lockzone__gate .leo-auth-cta__title { line-height: 1.08; }
	.leo-ds--article .leo-lockzone__gate .leo-auth-cta__sub { max-width: 520px; margin: 0; }
	.leo-ds--article .leo-lockzone__gate .leo-auth-cta__error { margin: 0; }
	.leo-ds--article .leo-lockzone__gate .leo-google { width: auto; padding: 14px 24px; gap: 12px; }
	.leo-ds--article .leo-lockzone__gate .leo-auth-cta__status { justify-content: flex-start; margin: 0; }
	.leo-ds--article .leo-lockzone__gate .leo-auth-cta__terms { margin: 0; }

	/* ---- Arena card (6.8): the end of an article, for a member, while the root opens on Arena ------- */
	.leo-ds--article .leo-bridge { position: relative; margin-top: 56px; padding: 28px; background: var(--b-field); color: #fff; }
	.leo-ds--article .leo-bridge :focus-visible { outline-color: var(--b-sun); }
	.leo-ds--article .leo-bridge__note {
		position: absolute; top: -16px; right: 22px; display: inline-flex; width: fit-content; margin: 0; padding: 9px 14px 10px; background: var(--b-sun); color: var(--b-ink);
		font: italic 600 clamp(16px, 1.25vw, 19px)/1.25 var(--ax-text); transform: rotate(4deg);
	}
	.leo-ds--article .leo-bridge__tag { margin: 0; font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; color: var(--b-sun); }
	.leo-ds--article .leo-bridge__title { margin: 6px 0 0; font-family: var(--ax-display); font-stretch: 75%; font-weight: 800; font-size: 46px; line-height: .92; text-transform: uppercase; color: #fff; }
	.leo-ds--article .leo-bridge__text { max-width: 420px; margin: 10px 0 20px; font: 400 16px/1.55 var(--ax-text); color: var(--b-on); }

	/* Buttons that lead to another page carry the up-right arrow; it nudges on hover (pointer devices). */
	.leo-ds--article .leo-art__icon { width: 20px; height: 20px; flex: none; stroke-width: 2.2; transition: transform 220ms var(--mo-ease); }
	@media (hover: hover) and (prefers-reduced-motion: no-preference) {
		.leo-ds--article .leo-btn:hover .leo-art__icon { transform: translate3d(2px, -2px, 0); }
	}

	/* ---- Tags under the article (live: kept; no local post has any) -------------------------------- */
	.leo-ds--article .leo-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 40px 0 0; padding: 0; list-style: none; }
	.leo-ds--article .leo-tags a {
		display: inline-block; padding: 3px 9px; border: 1.5px solid var(--b-line-2); border-radius: 0; background: #fff; color: var(--b-field);
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 15px; line-height: 1.3; letter-spacing: .03em; text-transform: uppercase; text-decoration: none;
		transition: background-color 160ms var(--mo-ease-fade), color 160ms var(--mo-ease-fade), border-color 160ms var(--mo-ease-fade);
	}
	.leo-ds--article .leo-tags a:hover { border-color: var(--b-field); background: var(--b-field); color: #fff; }

	/* ---- Comments (6.9) ------------------------------------------------------------------------------ */
	.leo-ds--article .leo-comments { margin-top: 72px; }
	.leo-ds--article .leo-comments .leo-sechead__label { margin: 0; font-size: clamp(30px, 3vw, 44px); }
	.leo-ds--article .leo-comments__count {
		flex: none; display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 0; background: var(--b-sun); color: var(--b-ink);
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 800; font-size: 18px; line-height: 1;
	}

	/* A visitor: one framed row and the way to sign in. */
	.leo-ds--article .leo-comments__signin {
		display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin: 0; padding: 18px 20px;
		border: 2px solid var(--b-line-2); border-radius: 0; background: none;
	}
	.leo-ds--article .leo-comments__signin-text {
		flex: 1 1 16rem; min-width: 0; margin: 0;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: .03em; text-transform: uppercase; color: var(--b-field);
	}

	/* A member: "Để lại bình luận", the Sun avatar beside a square field, the ink submit. */
	.leo-ds--article .leo-comments__reply-title {
		margin: 0 0 14px; font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 18px; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; color: var(--b-field);
	}
	.leo-ds--article .leo-comments__reply-title small { margin-left: 10px; font: 600 14px/1.2 var(--ax-text); letter-spacing: 0; text-transform: none; }
	.leo-ds--article .leo-comments__reply-title small a { color: var(--b-ink-2); font-size: 14px; }
	.leo-ds--article .leo-comments__form { display: grid; gap: 14px; justify-items: start; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
	.leo-ds--article .leo-comments__form > * { margin: 0; }
	.leo-ds--article .leo-composer { display: flex; align-items: flex-start; gap: 12px; width: 100%; }
	.leo-ds--article .leo-composer .leo-avatar { width: 42px; height: 42px; background: var(--b-sun); color: var(--b-ink); font-size: 12px; }
	.leo-ds--article .leo-composer__field { flex: 1; min-width: 0; margin: 0; }
	.leo-ds--article .leo-comments .leo-textarea {
		display: block; width: 100%; min-height: 104px; padding: 12px 14px; border: 2px solid var(--b-line-2); border-radius: 0; background: #fff; color: var(--b-ink); box-shadow: none;
		font: 400 16px/1.6 var(--ax-text); resize: vertical;
		transition: border-color 160ms var(--mo-ease-fade), box-shadow 160ms var(--mo-ease-fade);
	}
	.leo-ds--article .leo-comments .leo-textarea::placeholder { color: var(--b-ink-3); opacity: 1; }
	.leo-ds--article .leo-comments .leo-textarea:focus, .leo-ds--article .leo-comments .leo-textarea:focus-visible { outline: none; border-color: var(--b-field); background: #fff; box-shadow: var(--ds-ring-input-focus); }
	.leo-ds--article .leo-comments__form .form-submit { display: block; margin: 0; }
	.leo-ds--article .leo-comments__empty, .leo-ds--article .leo-comments__closed {
		margin: 22px 0 0; padding: 0; border: 0; border-radius: 0; background: none; text-align: left; font: 400 15px/1.6 var(--ax-text); color: var(--b-ink-3);
	}

	/* The thread (no local post has comments yet): the same frame as the sign-in row. */
	.leo-ds--article .comment-list { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
	.leo-ds--article .comment-list .children { display: grid; gap: 14px; margin: 14px 0 0; padding: 0 0 0 20px; border-left: 2px solid var(--b-line); list-style: none; }
	.leo-ds--article .leo-comment { display: flex; gap: 12px; padding: 18px 20px; border: 2px solid var(--b-line); border-radius: 0; background: #fff; }
	.leo-ds--article .leo-comment .leo-avatar { width: 36px; height: 36px; }
	.leo-ds--article .leo-comment__pending { padding: 2px 8px; border: 0; border-radius: 0; background: var(--b-sand); color: var(--b-ink); font: 700 13px/1.4 var(--ax-text); }
	.leo-ds--article .leo-comment__author { font: 700 15px/1.3 var(--ax-text); color: var(--b-ink); }
	.leo-ds--article .leo-comment__date, .leo-ds--article .leo-comment__date a { font: 400 13px/1.4 var(--ax-text); color: var(--b-ink-3); }
	.leo-ds--article .leo-comment__text { font: 400 16px/1.6 var(--ax-text); color: var(--b-ink-2); }
	.leo-ds--article .leo-comment__actions a { font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--b-field); }
	.leo-ds--article .leo-comments .page-numbers { border-radius: 0; }

	/* ---- Related rail (6.10) ------------------------------------------------------------------------- */
	.leo-ds--article .leo-rail { display: block; }
	.leo-ds--article .leo-rail__title {
		margin: 0 0 16px; padding-top: 12px; border-top: 3px solid var(--b-field);
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 17px; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; color: var(--b-field);
	}
	.leo-ds--article .leo-rail__list { display: grid; gap: 16px; margin: 0; padding: 0; }
	.leo-ds--article .leo-rail__list li + li { padding-top: 0; border-top: 0; }
	.leo-ds--article .leo-rail__item {
		display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; padding-bottom: 14px; border-bottom: 1.5px solid var(--b-line); color: inherit; text-decoration: none;
	}
	.leo-ds--article .leo-rail__thumb { display: block; width: auto; height: auto; aspect-ratio: 16 / 9; overflow: hidden; border: 1.5px solid var(--b-line-2); border-radius: 0; background: var(--b-grey); }
	.leo-ds--article .leo-rail__thumb img { width: 100%; height: 100%; object-fit: cover; transition: none; }
	.leo-ds--article .leo-rail__item:hover .leo-rail__thumb img { transform: none; }
	/* No cover: the live title glyph on the field (no gradient in B). */
	.leo-ds--article .leo-rail__glyph { display: grid; place-items: center; height: 100%; min-height: 0; background: var(--b-field); color: var(--b-sun); font-family: var(--ax-display); font-stretch: 75%; font-weight: 800; font-size: 24px; }
	.leo-ds--article .leo-rail__text { display: grid; gap: 4px; min-width: 0; }
	.leo-ds--article .leo-rail__cat { display: block; font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 14px; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; color: var(--b-field); }
	.leo-ds--article .leo-rail__headline { display: block; margin: 0; overflow: visible; -webkit-line-clamp: unset; font: 600 15px/1.35 var(--ax-text); color: var(--b-ink); }
	.leo-ds--article .leo-rail__item:hover .leo-rail__headline { color: var(--b-field); text-decoration: underline; text-underline-offset: 3px; }
	.leo-ds--article .leo-rail__text small { display: block; margin: 0; font: 400 13px/1.45 var(--ax-text); color: var(--b-ink-3); }
	@media (max-width: 1023.98px) {
		.leo-ds--article .leo-rail__list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
	}
}