/* Leology theme · design system 1.1.0 · the blog surface (inc/ds.php: leology_ds_surface()). Drawn after Arena-x-B-01-r1.
   Class selectors only, in layer `ds` (wins over style.css, which is in `legacy`).

   The Blog home (home.php), its Topic / Format views (archive.php) and search results (search.php):
     masthead        5.1  the Ultramarine field with the column rules; .leo-mast--view is its smaller form (5.5, proposed)
     featured        5.2  .leo-feat, framed 2 px Ultramarine, with the round stamp when the article is playable
     filters         5.4  .leo-filters, the Press Grey panel and square chips (.leo-facet__chips / .leo-chip: leology.js)
     cards           5.3  .leo-bcard in .leo-cards, three columns from 768 px
     pagination           .leo-pager: not in the mockup (deviation), square Ultramarine page boxes, the current one Sun
     empty state     5.6  .leo-none
     crossing band   5.7  .leo-cross, the deep band into Arena (only while the root opens on Arena)
     founder         5.8  .leo-hello on the Sun field (1.2.0), "HI," and the portrait off-register on an Ultramarine block
   Nothing here moves on scroll or on arrival (design system 1.1); only hover, focus and press change state. */

@layer ds {

	/* ---- Sections ----------------------------------------------------------------------------------- */
	.leo-ds .leo-blk { padding: var(--ax-block) 0; background: var(--ax-paper); }
	.leo-ds .leo-blk--first { padding-top: var(--ds-section-first); }
	.leo-ds .leo-blk--featured { padding-bottom: 0; }
	.leo-ds .leo-blk--follow { padding-top: var(--ds-section-follow); }
	.leo-ds .leo-sechead__label { margin: 0; }

	/* On the fields the focus ring is Sun (design system §2.4). */
	.leo-ds .leo-mast :focus-visible, .leo-ds .leo-cross :focus-visible { outline-color: var(--b-sun); }

	/* ---- Column rules (3.7): a 1 px left rule and a line every 25 %, inset to the container ----------- */
	.leo-ds .leo-mast__rules, .leo-ds .leo-cross__rules {
		position: absolute; inset: 0; z-index: -1; pointer-events: none;
		border-left: 1px solid var(--ds-color-rule-on-ultramarine);
		background-image: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--ds-color-rule-on-ultramarine) calc(25% - 1px) 25%);
	}
	.leo-ds .leo-cross__rules {
		border-left-color: var(--ds-color-rule-on-deep);
		background-image: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--ds-color-rule-on-deep) calc(25% - 1px) 25%);
	}

	/* ---- Masthead (5.1) ------------------------------------------------------------------------------ */
	.leo-ds .leo-mast { position: relative; isolation: isolate; overflow: hidden; background: var(--b-field); color: #fff; }
	.leo-ds .leo-mast__inner { position: relative; padding-top: 64px; padding-bottom: 60px; }
	@media (min-width: 768px) { .leo-ds .leo-mast__inner { padding-top: 112px; padding-bottom: 80px; } }
	.leo-ds .leo-mast__title {
		margin: 0; color: #fff; text-transform: uppercase; letter-spacing: 0; overflow-wrap: break-word;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 800;
		font-size: var(--ds-type-display-masthead-size); line-height: var(--ds-type-display-masthead-leading);
	}
	.leo-ds:lang(vi) .leo-mast__title { line-height: var(--ds-type-display-masthead-leading-vi); }
	.leo-ds:lang(en) .leo-mast__title { font-size: var(--ds-type-display-masthead-size-en); }
	.leo-ds .leo-mast__line { display: block; text-wrap: balance; }
	.leo-ds .leo-mast__line--b, .leo-ds .leo-mast__accent { color: var(--b-sun); }
	.leo-ds .leo-mast__row { display: grid; gap: 28px; margin-top: 30px; }
	@media (min-width: 900px) { .leo-ds .leo-mast__row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
	.leo-ds .leo-mast__sub { max-width: 440px; margin: 0; font: 500 19px/1.55 var(--ax-text); color: var(--b-on); }
	.leo-ds .leo-mast__stats { display: grid; grid-template-columns: repeat(3, auto); width: fit-content; margin: 0; border: var(--ds-border-thin) solid var(--ds-color-on-dark-frame); }
	.leo-ds .leo-mast__stat { display: grid; align-content: start; gap: 4px; padding: 14px 18px 12px; }
	.leo-ds .leo-mast__stat + .leo-mast__stat { border-left: var(--ds-border-thin) solid var(--ds-color-on-dark-frame); }
	.leo-ds .leo-mast__stat-value {
		margin: 0; color: var(--b-sun);
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 800; font-size: var(--ds-type-numeral-stat-size); line-height: .9;
	}
	.leo-ds .leo-mast__stat-label {
		margin: 0; color: #fff; text-transform: uppercase;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 14px; line-height: 1.15; letter-spacing: .05em;
	}
	@media (max-width: 420px) {
		.leo-ds .leo-mast__stat { padding: 12px 12px 10px; }
		.leo-ds .leo-mast__stat-label { font-size: 13px; }
	}

	/* Phones (owner's feedback, 20/10/2026), the Blog home's masthead only. The headline leads: as large as its
	   longest line allows, measured, not guessed ("Để làm được." is 4.87 em wide, "Then make it work." 7.62 em), with
	   tighter leading. Each fills about 86 % of the 100vw - 40px column, not more: the metric fallback face shown until
	   the web font arrives (Arial, size-adjusted, about 15 % wider here) must still fit, so the first paint never wraps
	   into a third line and jumps back. The subheadline steps back to 16 px. The
	   three figures sit on one full-width row: smaller numerals and labels, labels on one line wherever they fit, so
	   the three cells keep one height. From 768 px the desktop sizes apply unchanged (66 px / 55 px there, so the
	   step at the breakpoint is a couple of pixels at most). */
	@media (max-width: 767.98px) {
		.leo-ds .leo-mast--home .leo-mast__title { font-size: clamp(52px, calc(17.6vw - 7px), 68px); }
		.leo-ds:lang(vi) .leo-mast--home .leo-mast__title { line-height: 1; }
		.leo-ds:lang(en) .leo-mast--home .leo-mast__title { font-size: clamp(34px, calc(11.3vw - 4.5px), 54px); line-height: .9; }
		.leo-ds .leo-mast--home .leo-mast__row { gap: 22px; margin-top: 22px; }
		.leo-ds .leo-mast--home .leo-mast__sub { font-size: 16px; line-height: 1.5; }
		.leo-ds .leo-mast--home .leo-mast__stats { width: 100%; grid-template-columns: repeat(3, auto); }
		.leo-ds .leo-mast--home .leo-mast__stat { gap: 4px; padding: 10px 10px 9px; }
		.leo-ds .leo-mast--home .leo-mast__stat-value { font-size: 30px; }
		.leo-ds .leo-mast--home .leo-mast__stat-label { font-size: 11px; line-height: 1.2; letter-spacing: .04em; }
	}
	@media (min-width: 370px) and (max-width: 767.98px) { .leo-ds .leo-mast--home .leo-mast__stat-label { white-space: nowrap; } }

	/* The Blog home's rhythm and the sign-in panel (owner's feedback, 21/10/2026). The panel came back without making
	   the masthead taller: the field's padding, the gaps and the three figures were tightened instead, and the
	   Featured section sits closer under it, so the Featured article starts in the first screen as before the panel
	   (measured with the card, VI: 390 x 844 shows the card's top 250 px, 252 before the panel; 1440 x 900, 197 px,
	   83 before; desktop and tablet mastheads no taller than without the card). Members get the same rhythm without
	   the panel.
	   The panel is the one sign-in partial with a headline and the Google button only: no icon, no terms line
	   (auth-actions.php `terms`). It is a card of its own (owner, 21/10/2026, second pass: it must not melt into the
	   field): the white surface of the system's panels (the event facts box, the ticket), square, no shadow, with the
	   6 px Sun top edge of the sign-in dialog (5.9), the headline in Ultramarine and the Sun primary inside, as on
	   the facts box. On a phone and a tablet it follows the sub line, before the figures (the source order). From
	   1024 px it takes the field's empty upper right, beside the headline: a column of 288-320 px plus a 32 px gap,
	   which the longest headline line leaves free at every width even in the fallback face shown before the web
	   font arrives (measured: 334 px free at 1024, 379 px from 1680), so the headline never wraps. */
	.leo-ds .leo-mast--home .leo-mast__inner { padding-top: 26px; padding-bottom: 26px; }
	@media (min-width: 768px) { .leo-ds .leo-mast--home .leo-mast__inner { padding-top: 72px; padding-bottom: 56px; } }
	.leo-ds .leo-mast--home .leo-mast__stat { padding: 10px 16px 9px; gap: 3px; }
	.leo-ds .leo-mast--home .leo-mast__stat-value { font-size: clamp(34px, 3vw, 44px); }
	.leo-ds .leo-mast--home .leo-mast__stat-label { font-size: 13px; }
	.leo-ds .leo-mast--home + .leo-blk--featured { padding-top: 32px; }
	@media (min-width: 768px) { .leo-ds .leo-mast--home + .leo-blk--featured { padding-top: 56px; } }
	@media (max-width: 767.98px) {
		.leo-ds .leo-mast--home .leo-mast__row { gap: 14px; margin-top: 14px; }
		.leo-ds .leo-mast--home .leo-mast__stat { padding: 8px 10px 7px; }
		.leo-ds .leo-mast--home .leo-mast__stat-value { font-size: 24px; }
		.leo-ds .leo-mast--home .leo-mast__stat-label { font-size: 10.5px; }
	}

	.leo-ds .leo-mast__auth { padding: 10px 12px 12px; border-top: 6px solid var(--b-sun); background: var(--ax-paper); color: var(--b-ink); }
	.leo-ds .leo-mast__auth .leo-auth-cta { display: grid; gap: 10px; justify-items: stretch; text-align: left; color: var(--b-ink); }
	.leo-ds .leo-mast__auth .leo-auth-cta__title { margin: 0; font-size: 20px; line-height: 1.04; color: var(--b-field); text-wrap: balance; }
	.leo-ds:lang(vi) .leo-mast__auth .leo-auth-cta__title { line-height: 1.12; }
	.leo-ds .leo-mast__auth .leo-auth-cta__error { margin: 0; max-width: none; }
	.leo-ds .leo-mast__auth .leo-google { min-height: 46px; padding: 10px 14px; font-size: 16px; }
	/* On the white card the paper rules apply again: the ink focus ring, and the primary's ink / Sun hover (2.1). */
	.leo-ds .leo-mast__auth :focus-visible { outline-color: var(--b-ink); }
	@media (min-width: 768px) and (max-width: 1023.98px) {
		.leo-ds .leo-mast--auth .leo-mast__inner { padding-top: 48px; padding-bottom: 52px; }
		.leo-ds .leo-mast--auth .leo-mast__row { grid-template-columns: minmax(0, 1fr); }
		.leo-ds .leo-mast--auth .leo-mast__auth { max-width: 420px; }
	}
	@media (min-width: 1024px) {
		/* Three tracks: the headline spans the first two and the panel takes the third, so the headline always has
		   everything but the panel's column; the figures span the last two, so they keep their one-line width even
		   where it is wider than the panel. */
		.leo-ds .leo-mast--auth .leo-mast__inner {
			display: grid; grid-template-columns: minmax(0, 1fr) auto clamp(288px, 24vw, 320px); column-gap: 32px;
			grid-template-areas: "title title auth" "sub stats stats";
		}
		.leo-ds .leo-mast--auth .leo-mast__row { display: contents; }
		.leo-ds .leo-mast--auth .leo-mast__title { grid-area: title; }
		.leo-ds .leo-mast--auth .leo-mast__auth { grid-area: auth; align-self: center; }
		.leo-ds .leo-mast--auth .leo-mast__sub { grid-area: sub; align-self: end; margin-top: 30px; }
		.leo-ds .leo-mast--auth .leo-mast__stats { grid-area: stats; justify-self: end; align-self: end; margin-top: 30px; }
		.leo-ds .leo-mast__auth { padding: 18px 20px 20px; }
		.leo-ds .leo-mast__auth .leo-auth-cta { gap: 14px; }
		.leo-ds .leo-mast__auth .leo-auth-cta__title { font-size: clamp(22px, 1.9vw, 28px); }
		.leo-ds .leo-mast__auth .leo-google { min-height: 52px; font-size: 17px; }
	}

	/* The smaller masthead of the Topic / Format views and search results (5.5, proposed): the view's name, the
	   second choice or the search words in Sun, the description, the count, then the page's search field. */
	.leo-ds .leo-mast--view .leo-mast__inner { padding-top: 56px; padding-bottom: 56px; }
	@media (min-width: 768px) { .leo-ds .leo-mast--view .leo-mast__inner { padding-top: 80px; padding-bottom: 72px; } }
	.leo-ds .leo-mast--view .leo-mast__title { font-size: var(--ds-type-title-article-size); line-height: var(--ds-type-title-article-leading); text-wrap: balance; }
	.leo-ds:lang(vi) .leo-mast--view .leo-mast__title { line-height: var(--ds-type-title-article-leading-vi); }
	.leo-ds .leo-mast--view .leo-mast__line { display: inline; }
	.leo-ds .leo-mast__eyebrow {
		display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: #fff; text-transform: uppercase;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: .06em;
	}
	.leo-ds .leo-mast__dot, .leo-ds .leo-cross__dot { width: 10px; height: 10px; flex: none; background: var(--b-sun); }
	.leo-ds .leo-mast__desc { max-width: 640px; margin: 18px 0 0; font: 500 19px/1.55 var(--ax-text); color: var(--b-on); }
	.leo-ds .leo-mast__count {
		margin: 18px 0 0; color: #fff; text-transform: uppercase;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 14px; line-height: 1.2; letter-spacing: .05em;
	}
	.leo-ds .leo-mast__search { max-width: 640px; margin-top: 26px; }

	/* The search field (5.5, proposed): a white field, 52 px, a 2 px frame, the icon inside; the submit beside it
	   from 600 px and under it below. On the Ultramarine field the submit is Sun, like the bar's (deviation from
	   the proposed --ink, which would vanish on Ultramarine). */
	.leo-ds .leo-search--hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: 100%; max-width: none; }
	@media (min-width: 600px) { .leo-ds .leo-search--hero { grid-template-columns: minmax(0, 1fr) auto; gap: 0; } }
	.leo-ds .leo-search--hero > .leo-icon { position: absolute; z-index: 1; left: 16px; top: 16px; width: 20px; height: 20px; color: var(--b-ink-3); }
	.leo-ds .leo-search--hero .leo-search__input {
		width: 100%; height: 52px; margin: 0; padding: 0 16px 0 46px;
		border: var(--ds-border-base) solid var(--b-line-2); border-radius: 0; background: #fff; color: var(--b-ink); box-shadow: none;
		font: 400 17px/1.3 var(--ax-text);
		transition: border-color 160ms var(--mo-ease-fade), box-shadow 160ms var(--mo-ease-fade);
	}
	.leo-ds .leo-search--hero .leo-search__input::placeholder { color: var(--b-ink-3); }
	.leo-ds .leo-search--hero .leo-search__input:focus { outline: none; border-color: var(--b-field); background: #fff; box-shadow: var(--ds-ring-input-focus); }
	.leo-ds .leo-search--hero .leo-search__submit {
		position: static; min-height: 52px; margin: 0; padding: 0 24px;
		border: var(--ds-border-base) solid var(--b-sun); border-radius: 0; background: var(--b-sun); color: var(--b-ink); cursor: pointer;
		font-family: var(--ax-display); font-stretch: 75%; font-size: 18px; font-weight: 700; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase;
		transition: background-color 160ms var(--mo-ease-fade), color 160ms var(--mo-ease-fade), border-color 160ms var(--mo-ease-fade);
	}
	.leo-ds .leo-search--hero .leo-search__submit:hover { background: var(--b-ink); color: var(--b-sun); border-color: var(--b-ink); }

	/* ---- Tag (3.4) and byline ------------------------------------------------------------------------- */
	.leo-ds .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); text-decoration: none; text-transform: uppercase;
		font-family: var(--ax-display); font-stretch: 75%; font-size: 15px; font-weight: 700; line-height: 1.6; letter-spacing: .03em;
		transition: background-color 160ms var(--mo-ease-fade), color 160ms var(--mo-ease-fade);
	}
	.leo-ds .leo-tag:hover { background: var(--b-ink); color: var(--b-sun); }
	.leo-ds .leo-byline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font: 400 14px/1.45 var(--ax-text); color: var(--b-ink-3); }
	.leo-ds .leo-byline__name { font-weight: 700; color: var(--b-ink); }
	.leo-ds .leo-byline__sep { color: var(--b-ink-3); }
	.leo-ds .leo-byline .leo-avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; font-size: 12px; letter-spacing: 0; }

	/* ---- The round stamp (3.5) ---------------------------------------------------------------------------- */
	.leo-ds .leo-stamp {
		position: absolute; z-index: 3; display: grid; place-items: center; box-sizing: border-box;
		width: var(--ds-size-sticker); height: var(--ds-size-sticker); margin: 0; padding: 14px;
		border-radius: 50%; background: var(--b-sun); color: var(--b-ink); box-shadow: var(--ds-ring-sticker);
		text-align: center; text-transform: uppercase; pointer-events: none; transform: rotate(var(--ds-rotate-sticker));
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 800; font-size: 20px; line-height: 1; letter-spacing: .04em;
	}
	.leo-ds:lang(en) .leo-stamp { font-size: 15px; letter-spacing: .02em; }

	/* ---- Featured article (5.2) ----------------------------------------------------------------------------- */
	.leo-ds .leo-feat { position: relative; display: grid; margin: 0; background: #fff; border: var(--ds-border-base) solid var(--b-field); transition: box-shadow 160ms var(--mo-ease-fade); }
	@media (min-width: 900px) { .leo-ds .leo-feat { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
	.leo-ds .leo-feat:hover { box-shadow: var(--ds-ring-feature-hover); }
	.leo-ds .leo-feat__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #fff; border-bottom: var(--ds-border-base) solid var(--b-field); }
	@media (min-width: 900px) { .leo-ds .leo-feat__media { border-bottom: 0; border-right: var(--ds-border-base) solid var(--b-field); } }
	.leo-ds .leo-feat__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
	/* An interactive article's banner is designed to its edges: shown whole, never cropped. */
	.leo-ds .leo-feat__media--whole img { object-fit: contain; }
	.leo-ds .leo-feat__glyph, .leo-ds .leo-bcard__glyph {
		display: grid; place-items: center; width: 100%; height: 100%; background: var(--b-field); color: var(--b-sun);
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 800; font-size: clamp(64px, 8vw, 120px); line-height: 1;
	}
	.leo-ds .leo-feat__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; min-width: 0; padding: 28px 22px 30px; }
	@media (min-width: 900px) { .leo-ds .leo-feat__body { padding: 40px 44px; } }
	.leo-ds .leo-feat__title {
		margin: 0; color: var(--b-field); letter-spacing: 0;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: var(--ds-type-title-feature-size); line-height: var(--ds-type-title-feature-leading);
	}
	.leo-ds:lang(vi) .leo-feat__title { line-height: var(--ds-type-title-feature-leading-vi); }
	.leo-ds .leo-feat__title a, .leo-ds .leo-bcard__title a {
		color: inherit; text-decoration: none;
		background: linear-gradient(var(--b-sun), var(--b-sun)) 0 100% / 0 36% no-repeat;
		transition: background-size 380ms var(--mo-ease);
	}
	.leo-ds .leo-feat:hover .leo-feat__title a, .leo-ds .leo-feat__title a:focus-visible { background-size: 100% 36%; }
	.leo-ds .leo-feat__excerpt { margin: 0; font: 400 17px/1.6 var(--ax-text); color: var(--b-ink-2); }
	.leo-ds .leo-feat__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; width: 100%; margin-top: 8px; }
	/* The stamp: over the cover's top-RIGHT corner below 900 px (owner's feedback, 20/10/2026; it was top-left), where
	   the cover is the card's first row, so the card's corner is the cover's; on the cover / body seam from 900 px,
	   unchanged. Never on the title; it takes no clicks (pointer-events: none), so the card's links stay whole. */
	.leo-ds .leo-feat__stamp { top: -34px; right: 14px; left: auto; }
	@media (min-width: 900px) { .leo-ds .leo-feat__stamp { top: -42px; right: auto; left: calc(53.5% - 70px); } }

	/* ---- Filters (5.4) ----------------------------------------------------------------------------------- */
	.leo-ds .leo-filters { display: grid; gap: 12px; margin: 0 0 32px; padding: 18px 20px; background: var(--b-grey); }
	.leo-ds .leo-filters__groups { display: grid; gap: 12px; min-width: 0; }
	.leo-ds .leo-filters__row { display: grid; gap: 8px; align-items: center; min-width: 0; }
	@media (min-width: 768px) { .leo-ds .leo-filters__row { grid-template-columns: 120px minmax(0, 1fr); } }
	.leo-ds .leo-filters__label {
		color: var(--b-field); text-transform: uppercase;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 17px; line-height: 1.2; letter-spacing: .06em;
	}
	/* A phone: one row per facet that scrolls sideways, no scrollbar, room for the focus ring (2 px at 3 px). */
	.leo-ds .leo-filters__chips {
		display: flex; gap: 8px; margin: -5px; padding: 5px; list-style: none;
		overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none;
	}
	.leo-ds .leo-filters__chips::-webkit-scrollbar { display: none; }
	@media (min-width: 768px) { .leo-ds .leo-filters__chips { flex-wrap: wrap; overflow: visible; } }
	.leo-ds .leo-filters__item { flex: none; margin: 0; }
	.leo-ds .leo-fchip {
		display: inline-flex; align-items: center; flex: none; min-height: 38px; padding: 6px 14px;
		border: var(--ds-border-thin) solid var(--b-line-2); border-radius: 0; background: #fff; color: var(--b-field); box-shadow: none;
		font: 600 14px/1.2 var(--ax-text); letter-spacing: 0; white-space: nowrap; 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 .leo-fchip:hover { background: var(--b-sun); border-color: var(--b-sun); color: var(--b-ink); }
	.leo-ds .leo-fchip.is-active { background: var(--b-field); border-color: var(--b-field); color: #fff; font-weight: 600; box-shadow: none; }
	.leo-ds .leo-filters__clear { justify-self: start; margin: 0; }
	.leo-ds .leo-filters__clear-link {
		color: var(--b-field); text-decoration: underline; text-underline-offset: 4px; text-transform: uppercase;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 16px; letter-spacing: .04em;
	}
	.leo-ds .leo-filters__clear-link:hover { color: var(--b-ink); }

	/* ---- Article cards (5.3) --------------------------------------------------------------------------- */
	.leo-ds .leo-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
	@media (min-width: 768px) { .leo-ds .leo-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
	.leo-ds .leo-bcard {
		position: relative; display: flex; flex-direction: column; overflow: hidden; margin: 0;
		background: #fff; border: var(--ds-border-thin) solid var(--b-line-2); border-radius: 0; box-shadow: none;
		transition: border-color 160ms var(--mo-ease-fade), box-shadow 160ms var(--mo-ease-fade);
	}
	.leo-ds .leo-bcard:hover { border-color: var(--b-field); box-shadow: var(--ds-ring-card-hover); }
	.leo-ds .leo-bcard__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--b-grey); border-bottom: var(--ds-border-thin) solid var(--b-line-2); }
	.leo-ds .leo-bcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
	.leo-ds .leo-bcard__glyph { font-size: 72px; }
	.leo-ds .leo-bcard__body { display: flex; flex-direction: column; flex: 1; align-items: flex-start; padding: 20px 20px 18px; }
	.leo-ds .leo-bcard__title {
		margin: 12px 0 0; color: var(--b-deep); letter-spacing: 0;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: var(--ds-type-title-card-size); line-height: var(--ds-type-title-card-leading);
	}
	.leo-ds:lang(vi) .leo-bcard__title { line-height: var(--ds-type-title-card-leading-vi); }
	.leo-ds .leo-bcard__title a { background-size: 0 38%; }
	.leo-ds .leo-bcard:hover .leo-bcard__title a, .leo-ds .leo-bcard__title a:focus-visible { background-size: 100% 38%; }
	.leo-ds .leo-bcard__excerpt { margin: 10px 0 18px; font: 400 15px/1.6 var(--ax-text); color: var(--b-ink-2); }
	/* The date and "Đọc bài" share a line while it holds both; in a narrow column (three columns at 768 px, a long
	   English date) "Đọc bài" moves under the date, to the right, instead of squeezing the date into a column. */
	.leo-ds .leo-bcard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; width: 100%; margin-top: auto; padding-top: 16px; border-top: var(--ds-border-thin) solid var(--b-line); }
	.leo-ds .leo-bcard__foot .leo-byline { font-size: 13px; gap: 4px 6px; }
	.leo-ds .leo-bcard__more {
		display: inline-flex; align-items: center; gap: 5px; flex: none; margin-left: auto; color: var(--b-field); text-decoration: none; text-transform: uppercase; white-space: nowrap;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: .03em;
	}
	.leo-ds .leo-bcard__more:hover { color: var(--b-ink); }
	.leo-ds .leo-bcard__arrow { display: inline-block; transition: transform 220ms var(--mo-ease); }
	@media (hover: hover) { .leo-ds .leo-bcard:hover .leo-bcard__arrow { transform: translate3d(3px, 0, 0); } }

	/* ---- Pagination (not in the mockup): square Ultramarine page boxes, the current page Sun -------------- */
	.leo-ds .leo-pager { display: flex; justify-content: center; margin: 48px 0 0; }
	.leo-ds .leo-pager .nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
	.leo-ds .leo-pager .page-numbers {
		display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px;
		border: var(--ds-border-base) solid var(--b-field); border-radius: 0; background: #fff; color: var(--b-field); text-decoration: none; text-transform: uppercase;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 18px; line-height: 1; letter-spacing: .03em;
		transition: background-color 160ms var(--mo-ease-fade), color 160ms var(--mo-ease-fade), border-color 160ms var(--mo-ease-fade);
	}
	.leo-ds .leo-pager .page-numbers:hover { background: var(--b-field); border-color: var(--b-field); color: #fff; }
	.leo-ds .leo-pager .page-numbers.current { background: var(--b-sun); border-color: var(--b-sun); color: var(--b-ink); }
	.leo-ds .leo-pager .page-numbers.dots { min-width: 24px; padding: 0; border-color: transparent; background: transparent; color: var(--b-ink-3); }

	/* ---- Empty state (5.6) ------------------------------------------------------------------------------- */
	.leo-ds .leo-none { display: grid; justify-items: center; gap: 8px; margin: 0; padding: 40px 20px; text-align: center; border: var(--ds-border-base) dashed var(--b-line-2); background: #fff; }
	.leo-ds .leo-none__title {
		margin: 0; color: var(--b-field); letter-spacing: 0;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 28px; line-height: 1.05;
	}
	.leo-ds .leo-none__text { max-width: 560px; margin: 0; font: 400 16px/1.6 var(--ax-text); color: var(--b-ink-2); }
	.leo-ds .leo-none__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; }

	/* ---- Crossing band into Arena (5.7) ---------------------------------------------------------------- */
	.leo-ds .leo-cross { position: relative; isolation: isolate; overflow: hidden; background: var(--b-deep); color: #fff; }
	.leo-ds .leo-cross__grid { position: relative; display: grid; gap: 40px; align-items: center; padding-top: 64px; padding-bottom: 72px; }
	@media (min-width: 900px) { .leo-ds .leo-cross__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; padding-top: var(--ds-section-band); padding-bottom: var(--ds-section-band); } }
	.leo-ds .leo-cross__copy, .leo-ds .leo-cross__art { position: relative; min-width: 0; }
	.leo-ds .leo-cross__eyebrow {
		display: flex; align-items: center; gap: 10px; margin: 0; color: #fff; text-transform: uppercase;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: .06em;
	}
	.leo-ds .leo-cross__title {
		margin: 0; color: #fff; text-transform: uppercase; letter-spacing: 0;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 800; font-size: var(--ds-type-heading-section-size); line-height: var(--ds-type-heading-section-leading);
	}
	.leo-ds:lang(vi) .leo-cross__title { line-height: var(--ds-type-heading-section-leading-vi); }
	.leo-ds .leo-cross__line { display: block; }
	.leo-ds .leo-cross__line--b { color: var(--b-sun); }
	.leo-ds .leo-cross__text { max-width: 440px; margin: 18px 0 0; font: 500 18px/1.6 var(--ax-text); color: var(--b-on); }
	.leo-ds .leo-cross__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 30px; }
	@media (max-width: 599.98px) { .leo-ds .leo-cross__actions { flex-direction: column; align-items: flex-start; } }
	/* The text link (2.3), light: white with a 2 px underline, Sun on hover. */
	.leo-ds .leo-cross__link {
		display: inline-flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: var(--ds-border-base) solid currentColor;
		color: #fff; text-decoration: none; text-transform: uppercase;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 700; font-size: 18px; line-height: 1.2; letter-spacing: .03em;
		transition: color 160ms var(--mo-ease-fade);
	}
	.leo-ds .leo-cross__link:hover { color: var(--b-sun); }
	.leo-ds .leo-cross__link .leo-icon { width: 16px; height: 16px; }
	.leo-ds .leo-cross__img { display: block; width: 100%; height: auto; border: var(--ds-border-base) solid #fff; }
	/* The slanted note (3.6), a Sun label at the art's bottom right. */
	.leo-ds .leo-cross__note {
		position: absolute; z-index: 2; right: -8px; bottom: -22px; display: inline-flex; width: fit-content; margin: 0; padding: 9px 14px 10px;
		background: var(--b-sun); color: var(--b-ink); transform: rotate(4deg); pointer-events: none;
		font: italic 600 var(--ds-type-text-note-size)/1.25 var(--ax-text);
	}
	@media (max-width: 899.98px) { .leo-ds .leo-cross__note { right: 8px; } }

	/* ---- Icons in buttons and links: they nudge up-right on hover (2.1) ---------------------------------- */
	.leo-ds .leo-feat .leo-btn .leo-icon, .leo-ds .leo-cross .leo-icon, .leo-ds .leo-hello .leo-btn .leo-icon { width: 20px; height: 20px; flex: none; transition: transform 220ms var(--mo-ease); }
	.leo-ds .leo-cross__link .leo-icon { width: 16px; height: 16px; }
	@media (hover: hover) {
		.leo-ds .leo-feat .leo-btn:hover .leo-icon, .leo-ds .leo-cross .leo-btn:hover .leo-icon, .leo-ds .leo-cross__link:hover .leo-icon { transform: translate3d(2px, -2px, 0); }
	}

	/* ---- Founder (5.8, design system 1.2.0): the Sun field, edge to edge -------------------------------------
	   On Sun (#FFDA3B): "HI," Ultramarine 7.3:1; the lead ink 13.8:1; the body ink-2 9.0:1; the Ultramarine button
	   (white label 9.9:1) and its block 7.3:1 against the field; the ink outline and the ink focus ring 13.8:1.
	   Nothing Sun inside the section: a Sun button would vanish on it (2.1). */
	.leo-ds .leo-hello { padding: var(--ax-block) 0; background: var(--b-sun); color: var(--b-ink); }
	.leo-ds .leo-hello__grid { display: grid; gap: 36px; align-items: center; }
	@media (min-width: 900px) { .leo-ds .leo-hello__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; } }
	/* The portrait in a 2 px ink frame, printed off-register on an Ultramarine block (offset 18 px). */
	.leo-ds .leo-hello__media { position: relative; isolation: isolate; max-width: 440px; padding: 0 18px 18px 0; }
	.leo-ds .leo-hello__media::before { content: ""; position: absolute; z-index: -1; inset: 18px 0 0 18px; background: var(--b-field); }
	.leo-ds .leo-hello__img { display: block; width: 100%; height: auto; border: var(--ds-border-base) solid var(--b-ink); }
	/* Until a portrait exists: a white panel (an Ultramarine one would merge with the block), the monogram Ultramarine. */
	.leo-ds .leo-hello__placeholder {
		display: grid; place-items: center; align-content: center; gap: 14px; aspect-ratio: 3 / 4; padding: 24px; text-align: center;
		border: var(--ds-border-base) solid var(--b-ink); background: #fff; color: var(--b-ink);
	}
	.leo-ds .leo-hello__monogram { color: var(--b-field); font-family: var(--ax-display); font-stretch: 75%; font-weight: 800; font-size: 96px; line-height: 1; }
	.leo-ds .leo-hello__pending { font: 600 14px/1.4 var(--ax-text); color: var(--b-ink-2); }
	.leo-ds .leo-hello__title {
		margin: 0; color: var(--b-field); text-transform: uppercase; letter-spacing: 0;
		font-family: var(--ax-display); font-stretch: 75%; font-weight: 800; font-size: var(--ds-type-display-word-size); line-height: var(--ds-type-display-word-leading);
	}
	.leo-ds .leo-hello__text { display: grid; gap: 14px; max-width: 600px; margin-top: 22px; }
	.leo-ds .leo-hello__para { margin: 0; font: 400 17px/1.7 var(--ax-text); color: var(--b-ink-2); }
	.leo-ds .leo-hello__para--lead { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.45; font-weight: 600; color: var(--b-ink); }
	.leo-ds .leo-hello__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
	/* The actions on Sun: "Đọc bài viết của mình" is the Ultramarine button (.leo-btn--navy, the shell's); "Đặt lịch 1:1"
	   an ink outline that fills ink with a Sun label on hover and focus (the fill swap of 2.1). The ring stays ink. */
	.leo-ds .leo-hello .leo-btn--soft { background: transparent; color: var(--b-ink); border-color: var(--b-ink); }
	.leo-ds .leo-hello .leo-btn--soft:hover, .leo-ds .leo-hello .leo-btn--soft:focus-visible { background: var(--b-ink); color: var(--b-sun); border-color: var(--b-ink); }
	.leo-ds .leo-hello :focus-visible { outline-color: var(--b-ink); }
}