/* ==========================================================================
   Guide article — template-guide-article.php and inc/article-*.php
   Built from the article reference: navy serif headlines, a bronze accent,
   and three quiet panel tints — warm cream for figures and checklists, cool
   mist for the sidebar boxes, sky blue for the questions box and the closing
   band. Loaded after theme.css on the template only. Follows the theme's
   sizing rule: fixed px tokens swapped at the theme's breakpoints
   (600 · 768 · 1080 · 1280 · 1536), no vw / vh.

   Layout: one column, the sidebar after the closing band; at 1080 the
   sidebar moves beside the article and the band spans both columns.
   ========================================================================== */

.page-template-template-guide-article {
	--ar-ink: var(--ink);
	--ar-sub: #2c3f66; /* serif subtitles */
	--ar-text: #4a5873;
	--ar-muted: #667390;
	--ar-line: #e2e6ed;
	--ar-cream: #fcf7ee;
	--ar-cream-line: #ecdcc2;
	--ar-mist: #f4f5f8;
	--ar-sky: #eaf3fc;
	--ar-sky-line: #cddcee;
	--ar-blue: #2f6fc4;
	--ar-blue-strong: #255aa3;
	--ar-btn: #a5681d; /* reference bronze, deepened to clear 4.5:1 under white type */
	--ar-btn-strong: #8c5615;
	--ar-sun: #e2ad62; /* gold button on navy */
	--ar-sun-strong: #d39a49;

	--ar-side-w: 100%;
	--ar-col-gap: 0px;
	--ar-row-gap: 48px;
	--ar-block-gap: 40px;
	--ar-title: 30px;
	--ar-dek: 16px;
	--ar-h2: 25px;
	--ar-fact-value: 26px;
	--ar-card-pad: 20px;
	--ar-author-photo: 104px;
	--ar-social: 32px;
	--ar-social-gap: 8px;
	--ar-media-w: 42%; /* card photo, of the card's width */
	--ar-checks-w: 64%; /* checklist, overlapping the photo's faded edge */
	--ar-card-title: 22px;
	--ar-card-value: 28px;
	--ar-option-title: 19px;
	--ar-bottom-title: 26px;

	/* Quick-facts medallions (dark values in dark.css). */
	--ar-fact-badge: radial-gradient(circle at 32% 28%, #fff 0, #fffaf1 45%, #f7ead2 100%);
	--ar-fact-ring: #ecdcc2;
	--ar-fact-shadow: 0 10px 22px -12px rgba(165, 104, 29, 0.55), inset 0 1px 0 #fff;
	--ar-fact-tint: #f7e2bb;
	--ar-fact-gold: #c98a2e;
	--ar-fact-coin: #e2ad62;
	--ar-fact-line: #b8710f;
}

/* --- Shared pieces ------------------------------------------------------- */

/* Lining figures: Playfair's default old-style numerals sink "3%" and "0%"
   below the cap height the reference sets them at. */
.ar-page {
	padding-block: 18px 72px;
	background: var(--white);
	font-variant-numeric: lining-nums;
}

.ar-icon {
	display: inline-flex;
	flex: none;
	color: var(--gold);
}

.ar-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ar-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 10px;
	row-gap: 2px;
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ar-muted);
}

.ar-meta__sep {
	color: #c3cad6;
}

.ar-h2 {
	margin: 0;
	font-family: var(--display);
	font-size: var(--ar-h2);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.01em;
	color: var(--ar-ink);
}

.ar-section__lede {
	max-width: 720px;
	margin: 10px 0 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--ar-text);
	text-wrap: pretty;
}

/* Buttons: filled, square-ish, arrow nudges on hover. */
.ar-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 46px;
	padding: 10px 22px;
	border: 0;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.ar-btn > svg,
.ar-link > svg {
	flex: none;
	width: 16px;
	height: 12px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s var(--ease);
}

.ar-btn:hover > svg,
.ar-link:hover > svg {
	transform: translateX(3px);
}

.ar-btn--gold {
	background: var(--ar-btn);
	color: #fff;
}

.ar-btn--gold:hover {
	background: var(--ar-btn-strong);
}

.ar-btn--sun {
	background: var(--ar-sun);
	color: var(--navy);
}

.ar-btn--sun:hover {
	background: var(--ar-sun-strong);
}

.ar-btn--blue {
	background: var(--ar-blue);
	color: #fff;
}

.ar-btn--blue:hover {
	background: var(--ar-blue-strong);
}

.ar-btn--lg {
	min-width: 230px;
	min-height: 54px;
	padding-inline: 28px;
	font-size: 16px;
}

.ar-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	font-size: 14px;
	font-weight: 700;
	color: var(--gold-strong);
	text-decoration: none;
}

.ar-link:hover {
	color: var(--ar-btn-strong);
}

/* --- Breadcrumb ----------------------------------------------------------- */

/* An editorial section bar: the trail in dark semibold type over a hairline,
   the section the article files under in bronze. The trail stops at the
   section on screen (the headline sits right below); the page crumb stays
   for screen readers. Crumbs wrap as whole items when a language runs long. */
.ar-crumbs {
	padding-block: 2px 13px;
	border-bottom: 1px solid var(--ar-line);
}

.ar-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ar-text);
}

.ar-crumbs__list li {
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
}

.ar-crumbs__list li + li::before {
	content: "/";
	font-weight: 400;
	color: #aab3c2;
}

.ar-crumbs a {
	color: var(--ar-text);
	text-decoration: none;
	text-underline-offset: 3px;
	transition: color 0.2s var(--ease);
}

.ar-crumbs a:hover {
	color: var(--ar-ink);
	text-decoration: underline;
}

/* The article's section: the last crumb on screen. */
.ar-crumbs__list li:nth-last-child(2) a {
	font-weight: 700;
	color: var(--gold-strong);
}

.ar-crumbs__current {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --- Layout ---------------------------------------------------------------- */

.ar-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"main"
		"bottom"
		"side";
	gap: var(--ar-row-gap) var(--ar-col-gap);
	align-items: start;
	margin-top: 28px;
}

.ar-main {
	grid-area: main;
	min-width: 0;
}

.ar-end {
	grid-area: bottom;
	min-width: 0;
}

.ar-side {
	grid-area: side;
	display: grid;
	gap: 20px;
	align-content: start;
	min-width: 0;
}

.ar-side__follow,
.ar-side__cta {
	display: grid;
	gap: 20px;
	min-width: 0;
}

/* --- Headline wrapping ----------------------------------------------------------
   Lines fill naturally and break only where the width runs out — no balanced
   (shortened) first lines; `pretty` just keeps a lone word off the last line.
   Hyphenated compounds stay whole (julie_agency_article_headline()). The rule
   also overrides the theme's Vietnamese balance, so both languages wrap alike. */

.ar-page :is(.ar-title, .ar-h2, .ar-facts__title, .ar-fact__label, .ar-card__title, .ar-card__sub, .ar-option__title, .ar-option__sub, .ar-formula__title, .ar-step__title, .ar-note__title, .ar-photo-card__title, .ar-box__title, .ar-bottom__title, .ar-related__title, .ar-author__name, .ar-table th) {
	text-wrap: pretty;
}

.ar-nobr {
	white-space: nowrap;
}

/* --- Article head ------------------------------------------------------------ */

/* Kicker: the site's lead rule, then the series in tracked bronze caps,
   linked to its section. */
.ar-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 12.5px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold-strong);
}

.ar-eyebrow::before {
	content: "";
	flex: none;
	width: 28px;
	height: 2px;
	background: currentColor;
}

.ar-eyebrow a {
	color: inherit;
	text-decoration: none;
	text-underline-offset: 4px;
}

.ar-eyebrow a:hover {
	text-decoration: underline;
}

/* No measure cap: the headline uses the column's full width so its first
   line fills before it breaks. */
.ar-title {
	margin: 10px 0 0;
	font-family: var(--display);
	font-size: var(--ar-title);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--ar-ink);
}

.ar-dek {
	max-width: 690px;
	margin: 14px 0 0;
	font-size: var(--ar-dek);
	line-height: 1.6;
	color: var(--ar-text);
	text-wrap: pretty;
}

.ar-byline {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
}

.ar-byline__photo {
	width: 40px;
	height: 40px;
}

.ar-byline__meta {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ar-ink);
}

/* Phones: the author on its own line, date and read time beneath. */
@media (max-width: 599px) {
	.ar-byline__by {
		flex-basis: 100%;
	}

	.ar-byline__by + .ar-meta__sep {
		display: none;
	}
}

.ar-byline__by a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s var(--ease);
}

.ar-byline__by a:hover {
	color: var(--gold-strong);
}

.ar-hero {
	aspect-ratio: 16 / 10;
	margin: 22px 0 0;
	overflow: hidden;
	border-radius: 8px;
	background: var(--ar-mist);
}

.ar-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Art with words in it (labels on the photo): the frame takes the photo's
   own ratio at every width, so nothing is cropped. */
.ar-hero.ar-hero--whole {
	aspect-ratio: auto;
}

.ar-hero--whole img {
	height: auto;
}

.ar-body {
	display: flex;
	flex-direction: column;
	gap: var(--ar-block-gap);
	margin-top: 16px;
}

/* --- Block: quick facts ------------------------------------------------------ */

.ar-facts {
	padding: 20px 18px 22px;
	border: 1px solid var(--ar-cream-line);
	border-radius: 8px;
	background: var(--ar-cream);
}

.ar-facts__title {
	margin: 0;
	font-family: var(--display);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ar-ink);
}

.ar-facts__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	row-gap: 22px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.ar-fact {
	padding-inline: 10px;
	text-align: center;
}

.ar-fact:nth-child(even) {
	border-left: 1px solid var(--ar-cream-line);
}

.ar-fact__figure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
}

.ar-fact__icon {
	width: 28px;
	height: 28px;
}

/* Icon alone (no figure): a size up, over the label. */
.ar-fact__icon:only-child {
	width: 34px;
	height: 34px;
}

.ar-fact__icon:only-child svg {
	stroke-width: 1.4;
}

/* The icon is a two-tone drawing in a cream medallion: navy outlines, soft
   gold fills, a brighter gold accent. Same treatment in the summary panel
   and in the "cards" variant (e.g. the Risks section), which centers its
   content the same way. */
.ar-fact__icon:only-child {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border: 1px solid var(--ar-fact-ring);
	border-radius: 50%;
	background: var(--ar-fact-badge);
	box-shadow: var(--ar-fact-shadow);
	color: var(--ar-ink);
}

.ar-fact__icon:only-child svg {
	width: 44px;
	height: 44px;
	stroke-width: 2;
}

.ar-fact__icon .i-tint {
	fill: var(--ar-fact-tint);
}

.ar-fact__icon .i-gold {
	fill: var(--ar-fact-gold);
	stroke: none;
}

.ar-fact__icon .i-coin {
	fill: var(--ar-fact-coin);
}

.ar-fact__icon .i-gold-line {
	stroke: var(--ar-fact-line);
}

.ar-fact__icon:only-child + .ar-fact__value,
.ar-fact__figure:has(.ar-fact__icon:only-child) + .ar-fact__label {
	margin-top: 12px;
}

.ar-fact__value {
	font-family: var(--display);
	font-size: var(--ar-fact-value);
	font-weight: 600;
	line-height: 1;
	color: var(--ar-ink);
}

.ar-fact__label {
	margin: 10px 0 0;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ar-ink);
}

.ar-fact__copy {
	max-width: 190px;
	margin: 5px auto 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ar-muted);
}

/* --- Block: comparison table ------------------------------------------------- */

.ar-table-wrap {
	margin-top: 20px;
}

.ar-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--ar-text);
	text-align: left;
}

/* Phones: every row is a small card headed by its program. */
.ar-table thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.ar-table,
.ar-table tbody,
.ar-table tr,
.ar-table th,
.ar-table td {
	display: block;
}

.ar-table tbody {
	display: grid;
	gap: 12px;
}

.ar-table tbody tr {
	overflow: hidden;
	border: 1px solid var(--ar-line);
	border-radius: 8px;
	background: var(--white);
}

.ar-table tbody th {
	padding: 11px 16px;
	background: var(--navy);
	font-size: 15px;
	font-weight: 700;
	color: #fff;
}

.ar-table td {
	padding: 10px 16px 11px;
	border-top: 1px solid var(--ar-line);
}

.ar-table td::before {
	content: attr(data-label);
	display: block;
	margin-bottom: 2px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ar-muted);
}

.ar-table tbody th + td {
	border-top: 0;
}

/* --- Block: feature cards ------------------------------------------------------ */

.ar-cards__grid {
	display: grid;
	gap: 16px;
}

.ar-h2 + .ar-cards__grid {
	margin-top: 20px;
}

.ar-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--ar-card-pad) var(--ar-card-pad) 0;
	overflow: hidden;
	border: 1px solid var(--ar-line);
	border-radius: 10px;
	background: var(--white);
	box-shadow: 0 14px 34px -26px rgba(1, 34, 67, 0.42);
}

.ar-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.ar-card__title {
	margin: 0;
	font-family: var(--display);
	font-size: var(--ar-card-title);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--ar-ink);
}

.ar-card__sub {
	margin: 6px 0 0;
	font-family: var(--display);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ar-sub);
}

.ar-card__figure {
	display: flex;
	flex: none;
	align-items: center;
	gap: 9px;
	margin: 0;
}

.ar-card__icon {
	width: 30px;
	height: 30px;
}

/* Icon alone (no figure): it carries the corner on its own. */
.ar-card__icon:only-child {
	width: 42px;
	height: 42px;
}

.ar-card__value {
	font-family: var(--display);
	font-size: var(--ar-card-value);
	font-weight: 600;
	line-height: 1;
	color: var(--ar-ink);
}

.ar-card__copy {
	margin: 14px 0 18px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ar-text);
	text-wrap: pretty;
}

/* Checklist on the left; the photo fills the bottom-right corner and fades
   into the card along its top and left edges. */
.ar-card__foot {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 150px;
	margin: auto calc(var(--ar-card-pad) * -1) 0;
	padding: 0 var(--ar-card-pad) var(--ar-card-pad);
}

.ar-card__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--ar-media-w);
}

.ar-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 46%), linear-gradient(to bottom, transparent 0, #000 34%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, transparent 0, #000 46%), linear-gradient(to bottom, transparent 0, #000 34%);
	mask-composite: intersect;
}

.ar-checks {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 14px 16px;
	list-style: none;
	border-radius: 8px;
	background: var(--ar-cream);
	font-size: 13.5px;
	line-height: 1.4;
	color: #33415e;
}

.ar-card.has-image .ar-checks {
	width: var(--ar-checks-w);
}

/* Phones: the checklist takes the full width and the photo becomes a band
   along the card's foot, fading in from under the checklist. */
@media (max-width: 599px) {
	.ar-card__foot {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		padding-bottom: 0;
	}

	.ar-card.has-image .ar-checks {
		width: auto;
	}

	.ar-card__media {
		position: relative;
		width: auto;
		height: 132px;
		margin: -30px calc(var(--ar-card-pad) * -1) 0;
	}

	.ar-card__media img {
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 52%);
		mask-image: linear-gradient(to bottom, transparent 0, #000 52%);
	}

	.ar-card:not(.has-image) .ar-card__foot {
		padding-bottom: var(--ar-card-pad);
	}
}

.ar-card:not(.has-image) .ar-card__foot {
	min-height: 0;
}

.ar-card:not(.has-image) .ar-checks {
	flex: 1;
}

.ar-checks li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
}

.ar-checks__icon {
	width: 17px;
	height: 17px;
	margin-top: 1px;
}

.ar-checks__icon svg {
	stroke-width: 1.9;
}

/* --- Block: option cards ------------------------------------------------------- */

.ar-options__grid {
	display: grid;
	gap: 16px;
}

.ar-h2 + .ar-options__grid {
	margin-top: 20px;
}

.ar-option {
	display: flex;
	flex-direction: column;
	padding: var(--ar-card-pad);
	border: 1px solid var(--ar-line);
	border-radius: 10px;
	background: var(--white);
	box-shadow: 0 14px 34px -26px rgba(1, 34, 67, 0.42);
}

/* Icon and title alone on the first row, so the title has the card's full
   width and wraps only when the card narrows. */
.ar-option__head {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.ar-option__icon {
	width: 26px;
	height: 26px;
	margin-top: 1px;
}

.ar-option__title {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-family: var(--display);
	font-size: var(--ar-option-title);
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -0.01em;
	color: var(--ar-ink);
}

.ar-option__tag {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 6px;
	margin: 1px 0 0;
	padding: 4px 10px 4px 8px;
	border: 1px solid var(--ar-cream-line);
	border-radius: 999px;
	background: var(--ar-cream);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ar-ink);
	white-space: nowrap;
}

/* Subtitle on the left, tag on the right, lined up under the title past the
   icon; the tag drops under the subtitle when the row runs out. */
.ar-option__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 12px;
	margin: 8px 0 0 36px;
}

.ar-option__tag-icon {
	width: 15px;
	height: 15px;
}

.ar-option__tag-icon svg {
	stroke-width: 1.8;
}

.ar-option__sub {
	flex: 1 1 200px;
	margin: 0;
	font-family: var(--display);
	font-size: 14.5px;
	font-style: italic;
	line-height: 1.4;
	color: var(--ar-sub);
}

.ar-option__body {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 16px 0 18px;
}

.ar-option__points {
	display: grid;
	flex: 1;
	gap: 7px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 1.45;
	color: #33415e;
}

.ar-option__points li {
	position: relative;
	padding-left: 18px;
}

.ar-option__points li::before {
	content: "";
	position: absolute;
	top: 0.55em;
	left: 2px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--gold);
}

.ar-option__media {
	flex: none;
	width: 40%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 8px;
	background: var(--ar-mist);
}

.ar-option__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ar-link.ar-option__link {
	margin-top: auto;
	color: var(--ar-blue);
}

.ar-link.ar-option__link:hover {
	color: var(--ar-blue-strong);
}

/* Phones: the photo becomes a wide band under the list. */
@media (max-width: 599px) {
	.ar-option__body {
		flex-direction: column;
		align-items: stretch;
	}

	.ar-option__media {
		width: auto;
		aspect-ratio: 16 / 9;
	}
}

/* --- Block: prose (and editor content) ----------------------------------------- */

.ar-prose {
	max-width: 760px;
}

.ar-prose p {
	margin: 14px 0 0;
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--ar-text);
}

.ar-prose > :first-child {
	margin-top: 0;
}

.ar-prose .ar-h2 + p {
	margin-top: 12px;
}

.ar-prose h2,
.ar-prose h3 {
	margin: 32px 0 0;
	font-family: var(--display);
	font-weight: 600;
	line-height: 1.2;
	color: var(--ar-ink);
}

.ar-prose h2 {
	font-size: var(--ar-h2);
}

.ar-prose h3 {
	font-size: 21px;
}

.ar-prose .ar-checks--plain {
	margin-top: 16px;
	padding: 0;
	background: none;
	font-size: 16px;
	color: var(--ar-text);
}

/* --- Prose beside a photo ------------------------------------------------------- */

.ar-prose a {
	font-weight: 600;
	color: var(--gold-strong);
	text-underline-offset: 3px;
}

.ar-prose a:hover {
	color: var(--ar-btn-strong);
}

.ar-prose.has-media {
	display: grid;
	gap: 18px;
	max-width: none;
}

.ar-prose__media {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 8px;
	background: var(--ar-mist);
}

.ar-prose__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 768px) {
	.ar-prose.has-media {
		grid-template-columns: minmax(0, 1fr) 32%;
		align-items: start;
		gap: 28px;
	}
}

/* --- Block: worked formula ------------------------------------------------------ */

.ar-formula {
	display: grid;
	gap: 16px;
}

.ar-formula__main {
	padding: 22px;
	border: 1px solid var(--ar-line);
	border-radius: 10px;
	background: var(--white);
	box-shadow: 0 14px 34px -26px rgba(1, 34, 67, 0.42);
}

.ar-formula__title {
	margin: 0;
	font-family: var(--display);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ar-ink);
}

.ar-formula__lede {
	margin: 10px 0 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ar-text);
}

/* The formula itself: the one thing on the panel set to be copied down. */
.ar-formula__equation {
	margin: 14px 0 0;
	padding: 16px 18px;
	border: 1px solid var(--ar-cream-line);
	border-radius: 8px;
	background: var(--ar-cream);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
	text-align: center;
	text-wrap: balance;
	color: var(--ar-ink);
}

.ar-formula__note {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ar-muted);
}

.ar-formula__subtitle {
	margin: 22px 0 0;
	font-family: var(--display);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ar-ink);
}

.ar-formula__table {
	width: 100%;
	margin-top: 12px;
	overflow: hidden;
	border: 1px solid var(--ar-line);
	border-radius: 8px;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--ar-text);
	text-align: left;
}

.ar-formula__table thead th {
	padding: 10px 14px;
	background: var(--navy);
	font-size: 13px;
	font-weight: 700;
	color: #fff;
}

.ar-formula__table tbody th,
.ar-formula__table tbody td {
	padding: 10px 14px;
	border-top: 1px solid var(--ar-line);
}

.ar-formula__table tbody th {
	width: 34%;
	font-weight: 700;
	white-space: nowrap;
	color: var(--ar-ink);
}

.ar-formula__side {
	display: grid;
	gap: 16px;
	align-content: start;
}

.ar-formula__example,
.ar-formula__alert {
	padding: 18px 20px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ar-text);
}

.ar-formula__example {
	border: 1px solid var(--ar-sky-line);
	background: var(--ar-sky);
}

.ar-formula__alert {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	border: 1px solid var(--ar-cream-line);
	background: var(--ar-cream);
}

.ar-formula__example p,
.ar-formula__alert p {
	margin: 6px 0 0;
}

.ar-formula__side-title {
	margin: 0;
	font-family: var(--display);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ar-ink);
}

.ar-formula__alert .ar-formula__side-title {
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--gold-strong);
}

.ar-formula__alert-icon {
	width: 24px;
	height: 24px;
}

.ar-formula__points {
	margin: 6px 0 0;
	padding-left: 18px;
}

.ar-formula__points li::marker {
	color: var(--gold);
}

.ar-formula__result {
	font-size: 15px;
	font-weight: 700;
	color: var(--ar-ink);
}

/* Tablets and the narrower column beside the sidebar: the example and the
   note side by side under the panel. From 1280px all three share a row. */
@media (min-width: 768px) {
	.ar-formula__side {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.ar-formula {
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
		align-items: start;
	}

	.ar-formula__side {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Block: numbered spotlights ------------------------------------------------- */

.ar-spots__grid {
	display: grid;
	gap: 16px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.ar-spot {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 14px;
	border: 1px solid var(--ar-line);
	border-radius: 10px;
	background: var(--white);
	box-shadow: 0 14px 34px -26px rgba(1, 34, 67, 0.42);
}

.ar-spot__media {
	flex: none;
	width: 42%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 6px;
	background: var(--ar-mist);
}

.ar-spot__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ar-spot__body {
	min-width: 0;
	padding-top: 2px;
}

.ar-spot__title {
	margin: 0;
	font-family: var(--display);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ar-ink);
	text-wrap: pretty;
}

.ar-spot__num {
	color: var(--gold-strong);
}

.ar-spot__copy {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ar-text);
}

/* Small phones: the photo goes on top as a wide band. */
@media (max-width: 479px) {
	.ar-spot {
		flex-direction: column;
		align-items: stretch;
	}

	.ar-spot__media {
		width: auto;
		aspect-ratio: 16 / 9;
	}
}

/* --- Block: steps ------------------------------------------------------------------ */

/* Phones: a vertical timeline, the circles joined by a line down the left. */
.ar-steps__list {
	display: grid;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.ar-step {
	position: relative;
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	gap: 14px;
	padding-bottom: 20px;
}

.ar-step:last-child {
	padding-bottom: 0;
}

.ar-step::before {
	content: "";
	position: absolute;
	top: 42px;
	bottom: 6px;
	left: 17px;
	width: 2px;
	background: var(--ar-cream-line);
}

.ar-step:last-child::before {
	content: none;
}

.ar-step__num {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ar-btn);
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	color: #fff;
}

.ar-step__title {
	margin: 7px 0 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ar-ink);
}

.ar-step__copy {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ar-muted);
}

/* A row from 768px: the line runs from each circle to the next. */
@media (min-width: 768px) {
	.ar-steps__list {
		grid-template-columns: repeat(var(--ar-steps, 5), minmax(0, 1fr));
		gap: 16px;
	}

	.ar-step {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		gap: 12px;
		padding-bottom: 0;
		text-align: center;
	}

	.ar-step::before {
		top: 17px;
		bottom: auto;
		left: calc(50% + 26px);
		width: calc(100% - 36px);
		height: 2px;
	}

	.ar-step__title {
		margin-top: 0;
	}

	.ar-step__copy {
		font-size: 13.5px;
	}
}

/* --- Block: notes ----------------------------------------------------------------- */

.ar-notes__grid {
	display: grid;
	gap: 14px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.ar-note {
	padding: 18px 20px 20px;
	border-radius: 10px;
}

/* Soft blue panels for the reasons; white bordered cards for the risks. */
.ar-notes--mist .ar-note {
	border: 1px solid var(--ar-sky-line);
	background: var(--ar-sky);
}

.ar-notes--plain .ar-note {
	border: 1px solid var(--ar-line);
	background: var(--white);
}

.ar-note__title {
	margin: 0;
	font-family: var(--display);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ar-ink);
}

.ar-notes--plain .ar-note__title {
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
}

.ar-note__copy {
	margin: 8px 0 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ar-text);
}

@media (min-width: 768px) {
	.ar-notes--cols-3 .ar-notes__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ar-notes--cols-2 .ar-notes__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- Block: photo cards ------------------------------------------------------------- */

.ar-photos__grid {
	display: grid;
	gap: 16px;
	margin-top: 20px;
}

.ar-photo-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 14px;
	border: 1px solid var(--ar-line);
	border-radius: 10px;
	background: var(--white);
	box-shadow: 0 14px 34px -26px rgba(1, 34, 67, 0.42);
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.ar-photo-card:hover {
	border-color: var(--ar-cream-line);
	box-shadow: 0 18px 38px -24px rgba(1, 34, 67, 0.4);
}

.ar-photo-card__media {
	aspect-ratio: 12 / 5;
	overflow: hidden;
	border-radius: 6px;
	background: var(--ar-mist);
}

.ar-photo-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease);
}

.ar-photo-card:hover .ar-photo-card__media img {
	transform: scale(1.04);
}

.ar-photo-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 16px 6px 4px;
}

.ar-photo-card__title {
	margin: 0;
	font-family: var(--display);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ar-ink);
}

.ar-photo-card__copy {
	margin: 8px 0 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ar-text);
}

.ar-photo-card__points {
	display: grid;
	gap: 5px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--ar-muted);
}

.ar-photo-card__points li {
	position: relative;
	padding-left: 15px;
}

.ar-photo-card__points li::before {
	content: "";
	position: absolute;
	top: 0.55em;
	left: 1px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--gold);
}

/* The link covers the card: a click anywhere opens it. */
.ar-link.ar-photo-card__link {
	margin-top: auto;
	padding-top: 14px;
	color: var(--ar-blue);
}

.ar-link.ar-photo-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ar-photo-card:hover .ar-photo-card__link {
	color: var(--ar-blue-strong);
}

@media (min-width: 768px) {
	.ar-photos__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}
}

/* --- Block: flow ----------------------------------------------------------------------- */

/* Phones: a column of steps with arrows down; a row with arrows across from
   768px. */
.ar-flow__list {
	display: grid;
	gap: 26px;
	margin: 20px 0 0;
	padding: 18px;
	list-style: none;
	border: 1px solid var(--ar-line);
	border-radius: 10px;
	background: var(--ar-mist);
}

.ar-flow__step {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--ar-line);
	border-radius: 8px;
	background: var(--white);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	color: var(--ar-ink);
}

.ar-flow__step:not(:last-child)::after {
	content: "↓";
	position: absolute;
	bottom: -23px;
	left: 50%;
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	color: var(--ar-muted);
	transform: translateX(-50%);
}

@media (min-width: 768px) {
	.ar-flow__list {
		grid-template-columns: repeat(var(--ar-flow, 5), minmax(0, 1fr));
		gap: 24px;
	}

	.ar-flow__step:not(:last-child)::after {
		content: "→";
		top: 50%;
		right: -19px;
		bottom: auto;
		left: auto;
		transform: translateY(-50%);
	}
}

/* --- Block: steps as cards ----------------------------------------------------------- */

.ar-steps--cards .ar-steps__list {
	gap: 12px;
}

.ar-steps--cards .ar-step {
	grid-template-columns: 28px minmax(0, 1fr);
	align-content: start;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--ar-line);
	border-radius: 10px;
	background: var(--white);
}

.ar-steps--cards .ar-step::before {
	content: none;
}

.ar-steps--cards .ar-step__num {
	width: 28px;
	height: 28px;
	font-size: 13px;
}

.ar-steps--cards .ar-step__title {
	margin-top: 2px;
	font-family: var(--display);
	font-size: 18px;
	font-weight: 600;
}

@media (min-width: 768px) {
	.ar-steps--cards .ar-step {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
		padding: 18px 12px;
	}
}

/* --- Block: callout ------------------------------------------------------------------ */

.ar-callout__panel {
	margin-top: 18px;
	padding: 20px 24px;
	border: 1px solid var(--ar-cream-line);
	border-left: 4px solid var(--ar-btn);
	border-radius: 10px;
	background: var(--ar-cream);
}

.ar-callout__panel p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--ar-text);
}

.ar-callout__panel strong {
	font-weight: 700;
	color: var(--ar-ink);
}

/* --- Block: quick facts as cards (a section, not a summary panel) ---------------- */

.ar-facts.ar-facts--cards {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.ar-facts--cards .ar-facts__list {
	gap: 14px;
	margin-top: 20px;
}

.ar-facts.ar-facts--cards .ar-fact {
	padding: 24px 16px 20px;
	border: 1px solid var(--ar-line);
	border-radius: 10px;
	background: var(--white);
}

.ar-facts--cards .ar-fact__label {
	margin-top: 14px;
}

/* --- Views and likes ----------------------------------------------------------------- */

/* In the byline: as quiet as the date beside them. */
.ar-stat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.ar-stat__icon {
	width: 15px;
	height: 15px;
	color: var(--ar-muted);
}

/* The comment count jumps down to the comments. */
.ar-stat--comments {
	color: inherit;
	text-decoration: none;
}

.ar-stat--comments:hover {
	color: var(--gold-strong);
}

.ar-like {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 26px;
	padding: 2px 10px 2px 8px;
	border: 1px solid var(--ar-line);
	border-radius: 999px;
	background: var(--white);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ar-ink);
	cursor: pointer;
	transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.ar-like:hover,
.ar-like.is-liked {
	border-color: var(--ar-cream-line);
	background: var(--ar-cream);
}

.ar-like:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

.ar-like__icon {
	width: 15px;
	height: 15px;
	color: var(--ar-btn);
}

.ar-like.is-liked .ar-like__icon svg {
	fill: currentColor;
}

.ar-like.is-liked .ar-like__icon {
	animation: ar-like-pop 0.3s var(--ease);
}

@keyframes ar-like-pop {
	50% {
		transform: scale(1.25);
	}
}

/* Under the article: the same heart, asked as a question. */
.ar-reactions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-top: 36px;
	padding-top: 20px;
	border-top: 1px solid var(--ar-line);
}

.ar-reactions__ask {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--ar-ink);
}

.ar-like--text {
	gap: 7px;
	min-height: 36px;
	padding: 6px 14px 6px 12px;
	font-size: 14px;
}

.ar-like--text .ar-like__icon {
	width: 17px;
	height: 17px;
}

.ar-like--text .ar-like__count {
	padding-left: 8px;
	border-left: 1px solid var(--ar-line);
	color: var(--ar-muted);
}

/* --- Comments (where switched on) -------------------------------------------------- */

/* After the closing band, in the article's column; the sidebar follows on
   phones and tablets. */
.ar-layout.has-comments {
	grid-template-areas:
		"main"
		"bottom"
		"comments"
		"side";
}

@media (min-width: 1080px) {
	.ar-layout.has-comments {
		grid-template-areas:
			"main side"
			"bottom bottom"
			"comments .";
	}
}

.ar-discussion {
	grid-area: comments;
	min-width: 0;
}

.ar-comments {
	max-width: 720px;
}

/* Several pieces here set their own display; hidden must still hide them. */
.ar-comments [hidden] {
	display: none !important;
}

.ar-comments__count {
	font-size: 0.7em;
	font-weight: 600;
	color: var(--ar-muted);
}

/* Title on the left, the sort on the right. */
.ar-comments__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
}

.ar-comments__sort select {
	height: 34px;
	padding: 0 32px 0 14px;
	border: 1px solid var(--ar-line);
	border-radius: 999px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1.2 1.6 4.8 4.8 4.8-4.8' fill='none' stroke='%23667390' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center / 10px 7px;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ar-ink);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ar-comments__sort select:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

/* "View more comments" and "View more replies": plain bold text links. */
.ar-comments__more {
	display: block;
	margin: 16px 0 0;
	padding: 4px 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--ar-ink);
	cursor: pointer;
}

.ar-comments__more:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ar-comments__more--replies {
	margin: 10px 0 0 46px;
	font-size: 13px;
	color: var(--ar-muted);
}

@media (max-width: 479px) {
	.ar-comments__more--replies {
		margin-left: 26px;
	}
}

/* One rounded box to write in, the send button inside it. */
.ar-composer {
	margin-top: 16px;
}

.ar-composer__box {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 6px 6px 6px 18px;
	border: 1px solid #d8dde6;
	border-radius: 24px;
	background: #fff;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.ar-composer__box:focus-within {
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(184, 113, 15, 0.14);
}

.ar-composer__text {
	flex: 1;
	min-width: 0;
	max-height: 220px;
	padding: 7px 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ar-ink);
	resize: none;
}

.ar-composer__text:focus {
	outline: none;
}

/* Mirror behind the field (theme.js): draws the text so the reply's
   "@Name" can be coloured. Every text metric matches the field's. */
.ar-composer__input {
	position: relative;
	flex: 1;
	min-width: 0;
}

.ar-composer__input .ar-composer__text {
	position: relative;
	display: block;
	width: 100%;
	scrollbar-width: none;
}

.ar-composer__input .ar-composer__text::-webkit-scrollbar {
	display: none;
}

.ar-composer__text.has-mirror {
	color: transparent;
	caret-color: var(--ar-ink);
}

.ar-composer__text.has-mirror::selection {
	color: transparent;
	background: rgba(184, 113, 15, 0.22);
}

.ar-composer__mirror {
	position: absolute;
	inset: 0;
	overflow: hidden;
	padding: 7px 0;
	font: inherit;
	font-size: 15px;
	line-height: 1.5;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	color: var(--ar-ink);
	pointer-events: none;
}

/* Colour and a soft tint only: bold would widen it and move the caret. */
.ar-composer__mention {
	border-radius: 3px;
	background: rgba(184, 113, 15, 0.12);
	color: var(--ar-btn);
}

.ar-composer__text::placeholder {
	color: #8590a6;
}

.ar-composer__send {
	display: grid;
	flex: none;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ar-btn);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s var(--ease), opacity 0.2s var(--ease);
}

.ar-composer__send:hover {
	background: var(--ar-btn-strong);
}

.ar-composer__send svg {
	width: 16px;
	height: 12px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ar-composer.is-sending .ar-composer__send {
	opacity: 0.55;
	pointer-events: none;
}

.ar-comments__notice {
	margin: 0 0 10px;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.5;
}

.ar-comments__notice--ok {
	background: #e7f3ea;
	color: #1f5b35;
}

.ar-comments__notice--bad {
	background: #fbeceb;
	color: #9b2c1f;
}

/* No-JS fallback: name and email above the box. */
.ar-composer__identity {
	display: grid;
	gap: 0 14px;
	margin-bottom: 12px;
}

.ar-composer__field {
	display: grid;
	align-content: start;
	gap: 6px;
	margin: 0 0 12px;
}

.ar-composer__field label {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ar-ink);
}

.ar-comments__input {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1px solid #d8dde6;
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: 15px;
	color: var(--ar-ink);
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.ar-comments__input:focus {
	border-color: var(--gold);
	outline: none;
	box-shadow: 0 0 0 3px rgba(184, 113, 15, 0.16);
}

.ar-composer .form-turnstile {
	margin-top: 10px;
}

/* The threads: a bubble per comment, Like and Reply under it. */
.ar-comments__list,
.ar-comments__replies {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ar-comments__list {
	margin-top: 24px;
}

.ar-comments__replies {
	margin: 12px 0 0 46px;
}

.ar-comments__replies:empty {
	display: none;
}

.ar-comments__empty {
	margin: 18px 0 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ar-muted);
}

.ar-comment__row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.ar-comment__avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #e6eaf1;
	font-size: 14px;
	font-weight: 800;
	color: var(--ar-ink);
}

.ar-comments__replies .ar-comment__avatar {
	width: 30px;
	height: 30px;
	font-size: 12.5px;
}

.ar-comment.is-team > .ar-comment__row .ar-comment__avatar {
	background: var(--navy);
	color: #fff;
}

.ar-comment__main {
	min-width: 0;
}

.ar-comment__bubble {
	display: inline-block;
	max-width: 100%;
	padding: 9px 15px 10px;
	border-radius: 18px;
	background: var(--ar-mist);
}

.ar-comment.is-pending > .ar-comment__row .ar-comment__bubble {
	border: 1px dashed var(--ar-cream-line);
	background: var(--ar-cream);
}

.ar-comment__name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 8px;
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ar-ink);
}

.ar-comment__badge {
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--ar-cream);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gold-strong);
}

/* "@Name" in a reply, in the site's accent so it reads apart from the text. */
.ar-comment__mention {
	font-weight: 700;
	color: var(--ar-btn);
}

.ar-comment__text p {
	margin: 2px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ar-text);
	overflow-wrap: anywhere;
}

.ar-comment__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 14px;
	margin: 4px 0 0 15px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--ar-muted);
}

.ar-comment__action {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 700;
	color: var(--ar-muted);
	cursor: pointer;
}

.ar-comment__action:hover {
	color: var(--ar-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ar-comment__action.is-liked {
	color: var(--ar-btn);
}

.ar-comment__likes {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-weight: 600;
}

.ar-comment__likes .ar-icon {
	width: 13px;
	height: 13px;
	color: var(--ar-btn);
}

.ar-comment__likes svg {
	fill: currentColor;
}

.ar-comment__waiting {
	font-style: italic;
	color: var(--gold-strong);
}

/* The reply box opens under the thread, lined up with the replies. */
.ar-composer--reply {
	margin: 12px 0 0 46px;
}

.ar-composer--reply .ar-composer__box {
	padding-left: 14px;
}

.ar-composer--reply .ar-composer__send {
	width: 34px;
	height: 34px;
}

/* Name and email, asked once per tab session on the first send. */
.ar-identity {
	width: min(460px, calc(100% - 32px));
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: #fff;
	color: var(--ar-ink);
	box-shadow: 0 30px 80px -20px rgba(1, 20, 40, 0.45);
}

.ar-identity::backdrop {
	background: rgba(1, 20, 40, 0.45);
}

.ar-identity__form {
	padding: 24px 24px 22px;
}

.ar-identity__title {
	margin: 0;
	font-family: var(--display);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
}

.ar-identity__lede {
	margin: 8px 0 18px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ar-muted);
}

/* Name and email side by side in the message dialog, stacked on phones. */
.ar-identity__pair {
	display: grid;
	gap: 0 12px;
}

@media (min-width: 480px) {
	.ar-identity__pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ar-identity__message {
	height: auto;
	min-height: 104px;
	padding: 12px 14px;
	line-height: 1.55;
	resize: vertical;
}

.ar-identity form.is-sending .ar-btn {
	opacity: 0.6;
	pointer-events: none;
}

.ar-identity__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	margin-top: 8px;
}

.ar-identity__cancel {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ar-muted);
	cursor: pointer;
}

.ar-identity__cancel:hover {
	color: var(--ar-ink);
}

@media (min-width: 600px) {
	.ar-composer__identity {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 479px) {
	.ar-comments__replies,
	.ar-composer--reply {
		margin-left: 26px;
	}
}

/* --- Closing band: The Bottom Line --------------------------------------------- */

.ar-bottom {
	display: grid;
	gap: 22px;
	padding: 26px 22px 28px;
	border-radius: 12px;
	background: var(--ar-sky);
}

.ar-bottom__title {
	margin: 0;
	font-family: var(--display);
	font-size: var(--ar-bottom-title);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--ar-ink);
}

.ar-bottom__row {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 14px;
}

.ar-bottom__icon {
	width: 46px;
	height: 46px;
}

.ar-bottom__icon svg {
	stroke-width: 1.4;
}

.ar-bottom__copy {
	max-width: 780px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ar-text);
	text-wrap: pretty;
}

.ar-bottom__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.ar-bottom__note {
	max-width: 230px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ar-muted);
}

/* Small print under the closing band (or under the article when there is
   no band). */
.ar-disclaimer {
	max-width: 920px;
	margin: 18px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--ar-muted);
}

.ar-end > .ar-disclaimer:first-child {
	margin-top: 0;
}

/* --- Sidebar --------------------------------------------------------------------- */

.ar-box {
	padding: 22px;
	border-radius: 10px;
	background: var(--ar-mist);
}

.ar-box__title {
	margin: 0;
	font-family: var(--display);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ar-ink);
}

.ar-box__copy {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ar-text);
}

.ar-box__intro {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* Avatars: team photos are seated, waist-up portraits, so the circle zooms
   in on the face for a headshot instead of shrinking the whole frame. */
.ar-avatar {
	display: block;
	flex: none;
	overflow: hidden;
	border-radius: 50%;
	background: var(--ar-mist);
}

.ar-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 22%;
	transform: scale(1.55);
	transform-origin: 50% 25%;
}

/* About the author */
.ar-author__person {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 18px;
}

.ar-author__photo {
	width: var(--ar-author-photo);
	height: var(--ar-author-photo);
	border: 3px solid #fff;
	box-shadow: 0 8px 20px -10px rgba(1, 34, 67, 0.45);
}

.ar-author__id {
	min-width: 0;
}

.ar-author__name {
	margin: 0;
	font-family: var(--display);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ar-ink);
}

.ar-author__role {
	margin: 3px 0 0;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--ar-muted);
}

/* Social profiles under the role: quiet outlined circles, navy on hover. */
.ar-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ar-social-gap);
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.ar-social__link {
	display: grid;
	place-items: center;
	width: var(--ar-social);
	height: var(--ar-social);
	border: 1px solid #cfd6e1;
	border-radius: 50%;
	color: var(--ar-ink);
	text-decoration: none;
	transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.ar-social__link:hover {
	border-color: var(--navy);
	background: var(--navy);
	color: #fff;
}

.ar-social__link svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ar-author__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 16px;
	margin-top: 14px;
}

.ar-author__foot .ar-link {
	margin-top: 0;
}

.ar-author__nmls {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--ar-muted);
}

/* Newsletter */
.ar-news__icon {
	width: 36px;
	height: 36px;
}

.ar-news__icon svg {
	stroke-width: 1.4;
}

.ar-news__form {
	display: grid;
	gap: 10px;
	margin-top: 16px;
}

.ar-news__input {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1px solid #d8dde6;
	border-radius: 6px;
	background: #fff;
	font: inherit;
	font-size: 14.5px;
	color: var(--ar-ink);
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.ar-news__input::placeholder {
	color: #8590a6;
}

.ar-news__input:focus {
	border-color: var(--gold);
	outline: none;
	box-shadow: 0 0 0 3px rgba(184, 113, 15, 0.16);
}

.ar-news__btn {
	width: 100%;
}

.ar-news__note {
	margin: 12px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ar-muted);
}

.ar-news__notice {
	margin: 14px 0 0;
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 13.5px;
	line-height: 1.5;
}

.ar-news__notice--ok {
	background: #e7f3ea;
	color: #1f5b35;
}

.ar-news__notice--bad {
	background: #fbeceb;
	color: #9b2c1f;
}

.ar-news__form.is-sending .ar-news__btn {
	opacity: 0.7;
}

/* The two pinned panels (calculator, questions) are compact on purpose: the
   less height they take, the more screens can keep "Related Articles" pinned
   above them. */
.ar-side__cta .ar-box {
	padding: 16px 20px 18px;
}

.ar-side__cta .ar-box__title {
	font-size: 17px;
}

.ar-side__cta .ar-box__copy {
	margin-top: 8px;
	font-size: 13.5px;
	line-height: 1.55;
}

.ar-side__cta .ar-btn {
	min-height: 42px;
	padding-block: 8px;
	font-size: 14.5px;
}

/* Calculator: the one navy box */
.ar-calc {
	background: var(--navy);
}

.ar-calc .ar-box__title {
	color: #fff;
}

.ar-calc .ar-box__copy {
	color: rgba(255, 255, 255, 0.82);
}

.ar-calc__btn {
	width: 100%;
	margin-top: 14px;
}

.ar-calc__btn .ar-icon {
	width: 18px;
	height: 18px;
	color: currentColor;
}

/* Related articles */
.ar-related {
	padding-top: 4px;
}

.ar-related__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.ar-related__all {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 700;
	color: var(--gold-strong);
	text-decoration: none;
}

.ar-related__all svg {
	width: 14px;
	height: 11px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s var(--ease);
}

.ar-related__all:hover {
	color: var(--ar-btn-strong);
}

.ar-related__all:hover svg {
	transform: translateX(3px);
}

.ar-related__list {
	display: grid;
	gap: 16px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.ar-related__item {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
}

.ar-related__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 6px;
	background: var(--ar-mist);
}

.ar-related__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease);
}

.ar-related__item:hover .ar-related__media img {
	transform: scale(1.05);
}

.ar-related__title {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ar-ink);
	text-decoration: none;
	transition: color 0.2s var(--ease);
}

.ar-related__title:hover {
	color: var(--gold-strong);
}

.ar-related .ar-meta {
	margin-top: 5px;
	font-size: 12.5px;
}

/* Views and likes, in the meta line's own size and colour. */
.ar-related .ja-counts {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	opacity: 1;
}

/* Have questions */
.ar-help {
	background: var(--ar-sky);
}

.ar-help .ar-box__intro {
	gap: 10px;
}

.ar-help__icon {
	width: 28px;
	height: 28px;
	color: var(--ar-blue);
}

.ar-help .ar-btn {
	min-height: 36px;
	margin-top: 12px;
	padding: 6px 16px;
	font-size: 14px;
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (min-width: 600px) {
	.page-template-template-guide-article {
		--ar-title: 34px;
		--ar-dek: 17px;
		--ar-h2: 27px;
		--ar-card-pad: 22px;
		--ar-bottom-title: 28px;
	}

	.ar-facts {
		padding: 22px 24px 24px;
	}

	.ar-bottom {
		padding: 30px 32px 32px;
	}

	.ar-bottom__icon {
		width: 58px;
		height: 58px;
	}
}

@media (min-width: 768px) {
	.page-template-template-guide-article {
		--ar-title: 38px;
		--ar-h2: 28px;
		--ar-block-gap: 48px;
		--ar-bottom-title: 30px;
	}

	.ar-crumbs__list {
		font-size: 13px;
	}

	.ar-hero {
		aspect-ratio: 2 / 1;
	}

	.ar-facts__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ar-fact:not(:first-child) {
		border-left: 1px solid var(--ar-cream-line);
	}

	/* A real table again from here up. */
	.ar-table-wrap {
		overflow: hidden;
		border: 1px solid var(--ar-line);
		border-radius: 8px;
	}

	.ar-table {
		display: table;
	}

	.ar-table thead {
		position: static;
		display: table-header-group;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
		white-space: normal;
	}

	.ar-table tbody {
		display: table-row-group;
	}

	.ar-table tr,
	.ar-table tbody tr {
		display: table-row;
		overflow: visible;
		border: 0;
		border-radius: 0;
		background: none;
	}

	.ar-table th,
	.ar-table td {
		display: table-cell;
		vertical-align: middle;
	}

	.ar-table thead th {
		padding: 14px 18px;
		background: var(--navy);
		font-size: 14px;
		font-weight: 700;
		line-height: 1.3;
		color: #fff;
	}

	.ar-table thead th + th {
		border-left: 1px solid rgba(255, 255, 255, 0.14);
	}

	.ar-table tbody th,
	.ar-table tbody td {
		padding: 16px 18px;
		border-top: 1px solid var(--ar-line);
	}

	.ar-table tbody tr:first-child th,
	.ar-table tbody tr:first-child td {
		border-top: 0;
	}

	.ar-table tbody th {
		background: none;
		font-size: 15px;
		color: var(--ar-ink);
	}

	.ar-table tbody th + td {
		border-top: 1px solid var(--ar-line);
	}

	.ar-table tbody tr:first-child th + td {
		border-top: 0;
	}

	.ar-table tbody td {
		border-left: 1px solid var(--ar-line);
	}

	.ar-table tbody tr:nth-child(even) {
		background: #fafbfc;
	}

	.ar-table td::before {
		content: none;
	}

	.ar-table--cols-4 thead th:nth-child(1) {
		width: 17%;
	}

	.ar-table--cols-4 thead th:nth-child(2) {
		width: 19%;
	}

	.ar-table--cols-4 thead th:nth-child(3) {
		width: 28%;
	}

	/* Like options side by side: the row names take a fixed share and the
	   option columns split the rest equally. */
	.ar-table.ar-table--even {
		table-layout: fixed;
	}

	.ar-table--even thead th:nth-child(n) {
		width: auto;
	}

	.ar-table--even thead th:first-child {
		width: 22%;
	}

	.ar-table--cols-2 thead th:first-child {
		width: 30%;
	}

	/* A long list of short answers: tighter rows. */
	.ar-table--compact thead th,
	.ar-table--compact tbody th,
	.ar-table--compact tbody td {
		padding-block: 10px;
	}

	.ar-cards__grid,
	.ar-options__grid,
	.ar-spots__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}

	.page-template-template-guide-article {
		--ar-media-w: 40%;
		--ar-checks-w: 68%;
	}

	/* The sidebar pairs up below the article on tablets: author beside the
	   newsletter, related articles on a full row two to a line, then the
	   calculator beside the questions panel. */
	.ar-side {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

	.ar-side__follow {
		grid-column: 1 / -1;
	}

	.ar-side__cta {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
	}

	.ar-related__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 24px;
	}
}

@media (min-width: 1080px) {
	.page-template-template-guide-article {
		--ar-side-w: 300px;
		--ar-col-gap: 44px;
		--ar-row-gap: 56px;
		--ar-title: 40px;
		--ar-author-photo: 92px; /* a 300px rail: room for the four icons beside it */
		--ar-social: 30px;
		--ar-social-gap: 6px;
	}

	.ar-layout {
		grid-template-columns: minmax(0, 1fr) var(--ar-side-w);
		grid-template-areas:
			"main side"
			"bottom bottom";
	}

	/* The rail runs the article's full height; the calculator and questions
	   panels ride along below the header once the reader scrolls past the
	   author box, so the column beside the long card section is never empty. */
	.ar-side {
		grid-template-columns: minmax(0, 1fr);
		align-self: stretch;
	}

	.ar-related__list {
		grid-template-columns: minmax(0, 1fr);
	}

	/* A tighter related list in the rail, so the pinned group fits more
	   screens. */
	.ar-related {
		padding-top: 0;
	}

	.ar-related__list {
		gap: 10px;
		margin-top: 10px;
	}

	.ar-related__item {
		grid-template-columns: 76px minmax(0, 1fr);
		gap: 12px;
	}

	.ar-related__title {
		font-size: 13.5px;
	}

	.ar-related .ar-meta {
		margin-top: 3px;
		font-size: 12px;
	}

	/* The pinned group sits a little tighter than the boxes above it. */
	.ar-side__follow,
	.ar-side__cta {
		gap: 14px;
	}

	/* Short screens: only the two panels stay pinned; related articles
	   scroll away with the author box (the wrapper steps out of layout). */
	.ar-side__follow {
		display: contents;
	}

	.ar-side__cta {
		position: sticky;
		top: calc(var(--header-h) + 16px);
		grid-template-columns: minmax(0, 1fr);
	}

	.ar-hero {
		aspect-ratio: 12 / 5;
	}

	/* Beside the sidebar the column is too narrow for two cards a row. */
	.ar-cards__grid,
	.ar-options__grid,
	.ar-spots__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.page-template-template-guide-article {
		--ar-checks-w: 62%;
	}

	.ar-bottom {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 44px;
		padding: 32px 44px 34px;
	}

	.ar-bottom__cta {
		align-self: stretch;
		justify-content: center;
		padding-left: 44px;
		border-left: 1px solid var(--ar-sky-line);
	}
}

@media (min-width: 1280px) {
	.page-template-template-guide-article {
		--ar-side-w: 340px;
		--ar-col-gap: 56px;
		--ar-title: 40px;
		--ar-dek: 18px;
		--ar-h2: 30px;
		--ar-fact-value: 28px;
		--ar-card-pad: 24px;
		--ar-card-title: 24px;
		--ar-card-value: 30px;
		--ar-option-title: 20px;
		--ar-bottom-title: 32px;
		--ar-author-photo: 108px;
		--ar-social: 32px;
		--ar-social-gap: 8px;
	}

	.ar-hero {
		aspect-ratio: 13 / 5;
	}

	.ar-cards__grid,
	.ar-options__grid,
	.ar-spots__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.page-template-template-guide-article {
		--ar-checks-w: 70%;
	}
}

@media (min-width: 1536px) {
	.page-template-template-guide-article {
		--ar-side-w: 360px;
		--ar-col-gap: 64px;
		--ar-title: 44px;
		--ar-card-title: 26px;
		--ar-media-w: 44%;
		--ar-checks-w: 66%;
	}
}

/* The 300px rail (1080-1279px) is 260px inside: a little less padding and
   a point off the calculator title keep "Find Out How Much You Can Afford"
   on one line, in Vietnamese too. */
@media (min-width: 1080px) and (max-width: 1279px) {
	.ar-side__cta .ar-box {
		padding-inline: 16px;
	}

	.ar-calc .ar-box__title {
		font-size: 16px;
	}
}

/* Screens tall enough: related articles join the pinned group. Thresholds
   are the measured group (related list + both panels) plus the header and
   breathing room; the 300px rail (1080-1279px) runs taller than the wider
   ones. Mid-height screens (most laptops) pin the first three related
   articles; taller ones pin all four. Vietnamese copy runs longer, so it
   needs a little more height. Re-measure if the panels' copy changes. */
@media (min-width: 1080px) and (min-height: 712px), (min-width: 1280px) and (min-height: 704px) {
	html:not([data-lang="vi"]) .ar-side__follow {
		display: grid;
		position: sticky;
		top: calc(var(--header-h) + 16px);
	}

	html:not([data-lang="vi"]) .ar-side__cta {
		position: static;
	}

	html:not([data-lang="vi"]) .ar-related__item:nth-child(n + 4) {
		display: none;
	}
}

@media (min-width: 1080px) and (min-height: 780px), (min-width: 1280px) and (min-height: 772px) {
	html:not([data-lang="vi"]) .ar-related__item:nth-child(n + 4) {
		display: grid;
	}
}

@media (min-width: 1080px) and (min-height: 753px), (min-width: 1280px) and (min-height: 745px) {
	[data-lang="vi"] .ar-side__follow {
		display: grid;
		position: sticky;
		top: calc(var(--header-h) + 16px);
	}

	[data-lang="vi"] .ar-side__cta {
		position: static;
	}

	[data-lang="vi"] .ar-related__item:nth-child(n + 4) {
		display: none;
	}
}

@media (min-width: 1080px) and (min-height: 839px), (min-width: 1280px) and (min-height: 813px) {
	[data-lang="vi"] .ar-related__item:nth-child(n + 4) {
		display: grid;
	}
}

/* Vietnamese runs longer and sets in Be Vietnam Pro: a step down on the
   headline and card titles keeps their line counts close to English. */
[data-lang="vi"] .ar-title {
	font-size: calc(var(--ar-title) * 0.88);
	line-height: 1.2;
}

[data-lang="vi"] .ar-card__title {
	font-size: calc(var(--ar-card-title) * 0.88);
	line-height: 1.25;
}

[data-lang="vi"] .ar-option__title {
	font-size: calc(var(--ar-option-title) * 0.9);
	line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
	.ar-btn > svg,
	.ar-link > svg,
	.ar-related__media img {
		transition: none;
	}

	.ar-like.is-liked .ar-like__icon {
		animation: none;
	}
}