/* =============================================================================
   LabLynx, Articles
   The stylesheet for the opt-in article template (LL-ARTICLES). Self-contained:
   this site has no shared design-system stylesheet, so tokens, container,
   heading scale and button all live here.

   Everything is scoped under .llart, which only exists on a post carrying
   `_ll_tpl = 2`. Nothing here can reach the other 177 articles or any
   Cornerstone page.

   GEOMETRY, and why it is what it is:
   The site navigation uses `.x-container.max.width`, which is
   `width: 88%; max-width: 1200px`, centred. So does .llart-container, exactly.
   That is what puts the H1's left edge on the same line as the logo. Do not add
   horizontal padding to the container: padding would inset the content past the
   logo and the misalignment is immediately visible.

   Written mobile-first. One breakpoint at 1024px introduces the sidebar column;
   below that everything is a single column in source order.

   THE DIVIDER SYSTEM. Read this before adding a border.

   The first pass ruled almost every block: a 2px navy line over every H2, above
   and below the takeaways, over the FAQ, the sources, the author card, the table
   wrapper, under every sidebar label, and inside every mobile table card. On a
   six-section article that is around twenty horizontal lines, and the page reads
   as a stack of bands rather than as an article.

   So there are now exactly two weights, and they are rationed:

     STRONG  2px navy   at most twice on a reading column. Today: the top of the
                        key-takeaways block, and the table header underline.
     HAIRLINE 1px #e3e7ed (--art-rule)  for genuine section starts (FAQ, sources,
                        author) and for list separators that do real work (FAQ
                        items, table rows).

   Everything else separates with type and space. A heading does not need a line
   above it, a label does not need one under it, and a card that already has a
   panel, a left edge and a type change does not need a fourth separator inside
   it. If you are reaching for a border, check what is within 200px of it first.
   ============================================================================= */

.llart {
	/* ---- brand ----------------------------------------------------------
	   navy   = structure, headings, dark panels
	   orange = accents, eyebrows, the primary call to action
	   green  = functional success only (a checkmark), never a brand accent
	   -------------------------------------------------------------------- */
	--llart-navy: #061634;
	--llart-navy-lift: #0d2547;      /* hover/step above navy on dark panels */
	--llart-brand-orange: #f48220;
	--llart-brand-orange-soft: #fdf0e4;
	--llart-brand-orange-ink: #9a4f0c;   /* orange text that passes on white */
	--llart-accent: #f48220;
	--llart-link: #003388;

	--llart-ink: #16223a;
	--llart-ink-body: #333333;
	--llart-ink-3: #55606f;
	/* 5.01:1 on white. The previous #7c8695 was 3.68:1, which fails AA for
	   normal text, and every use of this token is small text: the small-caps
	   aside labels at 11px, the byline meta, the breadcrumb and the contents
	   counters. Verified by scripts/contrast.py in the articleWriting skill. */
	--llart-ink-4: #67707e;
	--llart-line: #e3e7ed;
	/* 5.37:1 on white. #1f8a4c was 4.38, which just misses AA on the
	   "copied" state's white label. */
	--llart-good: #1b7a43;
	--llart-bg-gray: #f5f7fa;
	--llart-bg-card-warm: #fbf9f6;

	--llart-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--llart-display: 'Roboto', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	/* ---- geometry ------------------------------------------------------- */
	--llart-band: 1200px;            /* == .x-container.max */
	--llart-band-w: 88%;             /* == .x-container.width */
	--llart-measure: 46rem;          /* prose measure, ~72 characters */
	--llart-side: 320px;             /* sidebar column */
	--llart-gutter: clamp(32px, 3.2vw, 52px);  /* was clamp(40px,5vw,88px): 72px at 1440 read as a gap, not a column break */

	--art-body-size: 1.125rem;       /* 18px, up to 19px on desktop below */
	--art-body-lh: 1.75;
	--art-rule: 1px solid var(--llart-line);

	font-family: var(--llart-sans);
	color: var(--llart-ink-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;                /* a wide table can never scroll the page */
}

@media (min-width: 1024px) {
	.llart { --art-body-size: 1.1875rem; }
}

/* Headings inherit the display face, NOT a colour.
   A blanket `.llart h2 { color: navy }` outranks `.llart__ctahead { color:#fff }`
   on specificity (0-1-1 beats 0-1-0), which is what made the call-to-action
   headline navy-on-navy and invisible. Colour is set per component instead. */
.llart h1, .llart h2, .llart h3, .llart h4 {
	font-family: var(--llart-display);
	text-wrap: balance;
}

.llart-container {
	width: var(--llart-band-w);
	max-width: var(--llart-band);
	margin-inline: auto;
}

.llart-h2 {
	margin: 0 0 1.5rem;
	font-size: clamp(1.625rem, 3vw, 2.125rem);
	line-height: 1.2;
	font-weight: 700;
	color: var(--llart-navy);
}

.llart-cta {
	display: inline-flex; align-items: center; gap: .625rem;
	/* Padding absorbs the 2px the border used to occupy, so the button is the
	   same size it was. */
	padding: 1.0625rem 2rem;
	border: 0; border-radius: 3px;
	font-family: var(--llart-sans);
	font-size: .9375rem; font-weight: 700; letter-spacing: .02em;
	text-decoration: none; cursor: pointer;
	transition: background-image .18s ease, background-color .18s ease, color .18s ease;
}
/* The brand gradient from the site header, deepened at the light end so the
   label passes WCAG AA.

   The header's literal values are #f48220 to rgb(170,68,0). White on #f48220 is
   2.61:1, and this label is 15px bold, which is not "large text", so it needs
   4.5:1. Navy does not rescue it either: navy on the DARK end is about 3.0:1. No
   label colour passes across the requested gradient, so a stop has to move.
   #b85a0c is the lightest orange that carries white at 4.5 (it measures 4.66),
   the dark stop is untouched, and the sweep still reads as orange into burnt
   orange.

   Hover reverses the gradient rather than going solid navy: this button sits on
   a navy panel in the closing call to action and inside a navy card in the rail,
   so a navy hover would erase it. */
.llart-cta--primary {
	background-color: #b85a0c;
	background-image: linear-gradient(to right, #b85a0c, rgb(170, 68, 0));
	color: #fff;
}
.llart-cta--primary:hover,
.llart-cta--primary:focus-visible {
	background-image: linear-gradient(to right, rgb(170, 68, 0), #b85a0c);
	color: #fff;
}
.llart-cta__label { display: inline-block; }

.llart :focus-visible {
	outline: 3px solid var(--llart-brand-orange);
	outline-offset: 2px;
}

/* ---- icons ---------------------------------------------------------------
   Font Awesome Pro path data, inlined by inc/article-icons.php. Sized in em so
   an icon always matches the text it sits beside.
   ------------------------------------------------------------------------- */

.llart-ico {
	width: 1em; height: 1em;
	fill: currentColor;
	flex: none;
	vertical-align: -0.1em;
}

/* Screen-reader-only, for block titles that are structural but not visual. */
.llart__sr,
.llart .llart__sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Anchors must not land under the sticky site header. */
.llart [id] { scroll-margin-top: 6.25rem; }

/* ---- breadcrumbs --------------------------------------------------------
   Wraps rather than overflowing: a long article title in the trail was pushing
   the page wider than the viewport on a phone, which is a horizontal scrollbar
   on every article. The current page is clamped to two lines.
   ------------------------------------------------------------------------- */

.llart__crumbs { padding: 1.25rem 0 0; }
.llart__crumblist {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: .375rem .5rem;
	margin: 0; padding: 0; list-style: none;
	font-size: .8125rem; line-height: 1.4;
	color: var(--llart-ink-4);
}
.llart__crumblist li { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.llart__crumbsep { color: var(--llart-line); font-size: .625rem; }
.llart__crumblist a {
	color: var(--llart-ink-3); text-decoration: none;
	white-space: nowrap;
}
.llart__crumblist a:hover, .llart__crumblist a:focus {
	color: var(--llart-brand-orange-ink); text-decoration: underline; text-underline-offset: 3px;
}
.llart__crumbcurrent {
	color: var(--llart-ink-4);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---- article header ----------------------------------------------------- */

.llart__head { padding: 1.75rem 0 0; }

/* One quiet eyebrow, not two competing badges. A pill plus a dot plus a second
   label read as a UI control rather than a masthead. */
.llart__kicker {
	display: flex; flex-wrap: wrap; align-items: baseline;
	gap: .5rem .75rem;
	margin: 0 0 1.125rem;
	font-size: .75rem; font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase;
}
.llart__chip {
	color: var(--llart-brand-orange-ink);
	text-decoration: none;
	border-bottom: 2px solid var(--llart-brand-orange);
	padding-bottom: 2px;
}
.llart__chip:hover, .llart__chip:focus { color: var(--llart-navy); border-color: var(--llart-navy); }
.llart__kickersep { color: var(--llart-line); font-weight: 400; }
.llart__format { color: var(--llart-ink-4); letter-spacing: .16em; }

.llart__title {
	margin: 0;
	max-width: min(100%, 56rem);
	font-size: clamp(2rem, 4.6vw, 3.375rem);
	line-height: 1.08;
	letter-spacing: -0.022em;
	font-weight: 700;
	color: var(--llart-navy);
}
.llart__deck {
	margin: 1.25rem 0 0;
	max-width: min(100%, 44rem);
	font-size: clamp(1.0625rem, 1.9vw, 1.3125rem);
	line-height: 1.55;
	font-weight: 400;
	color: var(--llart-ink-3);
	text-wrap: pretty;
}

.llart__byline {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 1rem 1.5rem;
	margin: 2rem 0 0; padding: 1.25rem 0 0;
	border-top: var(--art-rule);
}
.llart__bylinewho { display: flex; align-items: center; gap: .875rem; min-width: 0; }
.llart__avatar { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; flex: none; }
.llart__by { margin: 0; font-size: .9375rem; line-height: 1.35; min-width: 0; }
.llart__byname { display: block; font-weight: 700; color: var(--llart-ink); }
.llart__byrole { display: block; color: var(--llart-ink-3); font-size: .84375rem; }
.llart__meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
	margin: 0;
	font-size: .8125rem; font-weight: 600; letter-spacing: .03em;
	text-transform: uppercase; color: var(--llart-ink-4);
}
.llart__meta .llart-ico { color: var(--llart-ink-4); }
.llart__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--llart-ink-4); flex: none; }
.llart__updated { color: var(--llart-brand-orange-ink); }
.llart__reviewed { margin: 1rem 0 0; font-size: .875rem; color: var(--llart-ink-3); }

/* ---- hero --------------------------------------------------------------
   Sits inside the band, not full-bleed: a full-bleed image breaks the single
   left edge the rest of the page is aligned to.

   The aspect ratio is 1.9:1 because that is what the media library holds. Almost
   every existing hero is 1200x630, so a 16:9 box would upscale and crop every
   one of them to no purpose. On a phone it opens up to 3:2, where a very wide
   crop leaves the subject unreadable.
   ------------------------------------------------------------------------- */

.llart__hero { margin: 1.75rem 0 0; line-height: 0; }
.llart__heroimg {
	display: block;
	width: 100%; height: auto;
	aspect-ratio: 1.9 / 1;
	object-fit: cover;
	border-radius: 4px;
}
.llart__herocap { margin: .75rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--llart-ink-4); }

/* ---- reading column + sidebar ------------------------------------------ */

.llart__shell { padding: 2.5rem 0 0; }
.llart__main { min-width: 0; }
.llart__main > * { max-width: var(--llart-measure); }
/* Prose is capped at a reading measure; a comparison table is not prose and
   benefits from the whole column. */
.llart__prose .llart__tablewrap { max-width: none; }

@media (min-width: 1024px) {
	.llart__shell {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--llart-side);
		gap: 0 var(--llart-gutter);
		align-items: start;
		padding-top: 3.5rem;
	}
}

/* ---- sidebar -----------------------------------------------------------
   Standardised: the same four modules in the same order on every article, so a
   reader learns the furniture once. Contents, then curated internal links, then
   related reading, then one small conversion card. Share sits last.

   It never scrolls inside itself. The contents list is capped in the partial
   (llart_toc_cap) rather than made scrollable, because an inner scrollbar on a
   sticky rail is a usability trap on a trackpad.
   ------------------------------------------------------------------------- */

.llart__sidebar { min-width: 0; }

@media (min-width: 1024px) {
	.llart__sidebar-inner {
		position: sticky;
		top: 6rem;
	}
}

.llart__side-mod { margin: 0 0 1.75rem; }
.llart__side-mod:last-child { margin-bottom: 0; }

/* No underline. Small caps in navy with an orange glyph is already
   unmistakably a module label, and four underlined labels plus the contents
   summary put seven hairlines into a 320px rail. */
.llart__side-label {
	display: flex; align-items: center; gap: .5rem;
	margin: 0 0 .875rem;
	font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--llart-navy);
}
.llart__side-label .llart-ico { color: var(--llart-brand-orange); font-size: .875rem; }

.llart__side-list { margin: 0; padding: 0; list-style: none; }
.llart__side-list li { margin: 0 0 .625rem; }
.llart__side-list li:last-child { margin-bottom: 0; }
.llart__side-list a {
	display: flex; gap: .5rem; align-items: baseline;
	font-size: .875rem; line-height: 1.45; font-weight: 600;
	color: var(--llart-navy); text-decoration: none;
}
.llart__side-list a .llart-ico { color: var(--llart-ink-4); font-size: .625rem; position: relative; top: -.1em; }
.llart__side-list a:hover, .llart__side-list a:focus {
	color: var(--llart-brand-orange-ink); text-decoration: underline; text-underline-offset: 3px;
}
.llart__side-list a:hover .llart-ico, .llart__side-list a:focus .llart-ico { color: var(--llart-brand-orange-ink); }
.llart__side-note { margin: .25rem 0 0; font-size: .75rem; line-height: 1.45; color: var(--llart-ink-4); }

.llart__side-more {
	display: inline-flex; align-items: center; gap: .375rem; margin-top: .5rem;
	font-size: .75rem; font-weight: 700; letter-spacing: .04em;
	color: var(--llart-ink-3); text-decoration: none;
}
.llart__side-more:hover, .llart__side-more:focus { color: var(--llart-brand-orange-ink); }

/* Related reading, as compact rows rather than cards: a card in a 320px rail
   competes with the article for attention. */
.llart__side-read { margin: 0; padding: 0; list-style: none; }
.llart__side-read li { padding: 0 0 .75rem; margin: 0 0 .75rem; border-bottom: var(--art-rule); }
.llart__side-read li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.llart__side-read a {
	font-size: .875rem; line-height: 1.4; font-weight: 700;
	color: var(--llart-navy); text-decoration: none;
}
.llart__side-read a:hover, .llart__side-read a:focus { color: var(--llart-brand-orange-ink); }
.llart__side-readmeta { display: block; margin-top: .25rem; font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--llart-ink-4); font-weight: 600; }

/* One small conversion card, not a second hero. */
.llart__side-card {
	padding: 1.25rem 1.25rem 1.375rem;
	background: var(--llart-navy);
	border-radius: 4px;
	color: #fff;
}
.llart__side-card .llart__side-label { color: rgba(255,255,255,.72); }
.llart__side-card .llart__side-label .llart-ico { color: var(--llart-brand-orange); }
.llart__side-cardtext { margin: 0 0 1rem; font-size: .875rem; line-height: 1.55; color: rgba(255,255,255,.82); }
.llart__side-card .llart-cta { padding: .8125rem 1.25rem; font-size: .8125rem; }

/* ---- share -------------------------------------------------------------- */

.llart__share-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.llart__share-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.375rem; height: 2.375rem; padding: 0;
	border: 1px solid var(--llart-line); border-radius: 50%;
	background: #fff; color: var(--llart-ink-3); cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.llart__share-btn .llart-ico { font-size: .875rem; }
/* An author `display` rule beats the UA stylesheet's [hidden]{display:none},
   so the native-share button showed on desktops that have no share sheet. */
.llart__share-btn[hidden] { display: none; }
.llart__share-btn:hover, .llart__share-btn:focus {
	border-color: var(--llart-navy); background: var(--llart-navy); color: #fff;
}
.llart__share-btn.is-copied { border-color: var(--llart-good); background: var(--llart-good); color: #fff; }

/* Save as PDF. A labelled button, because a download is a different kind of
   action from a share and an unlabelled fifth circle would not say so. The
   target is a real file at a stable URL, not a print dialog. */
.llart__pdf {
	display: inline-flex; align-items: center; gap: .5rem;
	margin-top: .75rem; padding: .625rem 1rem;
	border: 1px solid var(--llart-line); border-radius: 3px;
	background: #fff; color: var(--llart-navy);
	font-size: .8125rem; font-weight: 700; letter-spacing: .02em;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.llart__pdf .llart-ico { color: var(--llart-brand-orange); font-size: .9375rem; }
.llart__pdf:hover, .llart__pdf:focus {
	border-color: var(--llart-navy); background: var(--llart-navy); color: #fff;
}
.llart__pdf:hover .llart-ico, .llart__pdf:focus .llart-ico { color: #fff; }

/* ---- the short answer --------------------------------------------------
   A standfirst, not a callout box. The tinted panel with a shouty label was the
   thing that read as machine-generated; the same words set as an opening
   statement with a rule read as an editor's summary.
   ------------------------------------------------------------------------- */

.llart__answer {
	margin: 0 0 2.5rem;
	padding: 0 0 0 1.5rem;
	border-left: 3px solid var(--llart-brand-orange);
}
.llart__answer-label {
	margin: 0 0 .5rem;
	font-size: .6875rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
	color: var(--llart-ink-4);
}
.llart__answer-text {
	margin: 0;
	font-size: clamp(1.1875rem, 2vw, 1.375rem);
	line-height: 1.5;
	color: var(--llart-navy);
	font-weight: 400;
	text-wrap: pretty;
}

/* ---- key takeaways ------------------------------------------------------ */

.llart__takeaways {
	margin: 0 0 3rem; padding: 1.375rem 0 0;
	border-top: 2px solid var(--llart-navy);
}
.llart__taketitle { font-size: 1.1875rem; line-height: 1.3; margin: 0 0 1.25rem; color: var(--llart-navy); }

.llart__takeaway-list { margin: 0; padding: 0; list-style: none; }
.llart__takeaway-list li {
	position: relative;
	padding: 0 0 0 1.5rem; margin: 0 0 .8125rem;
	font-size: 1.0625rem; line-height: 1.55; color: var(--llart-ink-body);
}
.llart__takeaway-list li:last-child { margin-bottom: 0; }
.llart__takeaway-list li::before {
	content: ""; position: absolute; left: 0; top: .62em;
	width: 10px; height: 2px; background: var(--llart-brand-orange);
}

/* ---- contents ----------------------------------------------------------- */

.llart__toc-box { padding: 0; border: 0; background: none; }
.llart__toc-summary {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; gap: .5rem;
	margin: 0 0 .875rem;
	font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--llart-navy);
}
.llart__toc-summary::-webkit-details-marker { display: none; }
.llart__toc-summary .llart-ico { color: var(--llart-brand-orange); font-size: .875rem; }
.llart__toc-caret { margin-left: auto; transition: transform .18s ease; color: var(--llart-ink-4); font-size: .625rem; }
.llart__toc-box[open] .llart__toc-caret { transform: rotate(90deg); }

.llart__toc-list { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.llart__toc-item { counter-increment: toc; }
.llart__toc-list > li > a {
	display: block; position: relative;
	padding: .3125rem 0 .3125rem 1.75rem;
	font-size: .875rem; line-height: 1.45;
	color: var(--llart-ink-body); text-decoration: none;
}
.llart__toc-list > li > a::before {
	content: counter(toc, decimal-leading-zero);
	position: absolute; left: 0; top: .45rem;
	font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
	color: var(--llart-ink-4);
}
.llart__toc-list a:hover, .llart__toc-list a:focus { color: var(--llart-brand-orange-ink); }
.llart__toc-list a.is-current { color: var(--llart-navy); font-weight: 700; }
.llart__toc-list a.is-current::before { color: var(--llart-brand-orange-ink); }

/* ---- prose -------------------------------------------------------------- */

.llart__prose {
	font-size: var(--art-body-size);
	line-height: var(--art-body-lh);
	color: var(--llart-ink-body);
	counter-reset: llartsection;
}
.llart__prose > *:first-child { margin-top: 0; }
.llart__prose p { margin: 0 0 1.35em; text-wrap: pretty; }

/* Numbered section rule above every top-level section. */
.llart__prose h2 {
	counter-increment: llartsection;
	margin: 2.9em 0 .6em;
	font-size: clamp(26px, 3.2vw, 33px);
	line-height: 1.2; font-weight: 700;
	letter-spacing: -0.018em; color: var(--llart-navy);
	scroll-margin-top: 100px;
	text-wrap: balance;
}
/* The section number, with no rule above it. A full-width navy line over every
   H2 was six horizontal rules in a six-section article, and with the takeaways
   block, the FAQ, the sources and the table all ruled as well the page read as
   a set of bands rather than an article. The number, the colour and the space
   above mark the section perfectly well on their own. */
.llart__prose h2::before {
	content: counter(llartsection, decimal-leading-zero);
	display: block;
	margin-bottom: .5rem;
	font-size: .6875rem; font-weight: 700; letter-spacing: .18em;
	color: var(--llart-brand-orange-ink);
}
.llart__prose h3 {
	margin: 1.9em 0 .5em;
	font-size: clamp(20px, 2.3vw, 23px);
	line-height: 1.3; font-weight: 700;
	color: var(--llart-navy);
	scroll-margin-top: 100px;
}
.llart__prose h4 { margin: 1.6em 0 .4em; font-size: 18px; font-weight: 700; color: var(--llart-ink); }

/* heading deep-link affordance */
.llart__heading { position: relative; }
.llart__anchor {
	margin-left: .35em;
	font-weight: 400; font-size: .7em;
	color: var(--llart-ink-4); text-decoration: none;
	opacity: 0; transition: opacity .15s ease;
}
.llart__heading:hover .llart__anchor,
.llart__anchor:focus { opacity: 1; }
.llart__anchor:hover { color: var(--llart-brand-orange-ink); }

.llart__prose ul, .llart__prose ol { margin: 0 0 1.35em; padding-left: 1.3em; }
.llart__prose li { margin: 0 0 .6em; padding-left: .2em; }
.llart__prose li::marker { color: var(--llart-brand-orange-ink); }
.llart__prose li > ul, .llart__prose li > ol { margin: .55em 0 .3em; }

.llart__prose a,
.llart__link {
	color: var(--llart-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--llart-brand-orange-ink);
	transition: background-color .15s ease;
}
.llart__prose a:hover, .llart__prose a:focus {
	background: var(--llart-brand-orange-soft);
}

.llart__prose strong { color: var(--llart-navy); font-weight: 700; }
.llart__prose img { max-width: 100%; height: auto; }
.llart__prose figure { margin: 2.2em 0; }
.llart__prose figcaption { margin-top: 12px; font-size: 14px; color: var(--llart-ink-3); }
.llart__prose blockquote {
	margin: 2.2em 0; padding: 0 0 0 28px;
	border-left: 3px solid var(--llart-brand-orange);
	color: var(--llart-navy);
	font-size: clamp(20px, 2.4vw, 24px); line-height: 1.45;
}
.llart__prose code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .86em;
	background: var(--llart-bg-gray);
	padding: .15em .4em; border-radius: 4px;
}
.llart__prose pre {
	margin: 1.8em 0; padding: 20px 22px;
	background: var(--llart-navy); color: #e8edf6;
	border-radius: 6px; overflow-x: auto;
	font-size: 14px; line-height: 1.6;
}
.llart__prose pre code { background: none; padding: 0; color: inherit; }
.llart__prose hr { margin: 2.8em 0; border: 0; border-top: var(--art-rule); }

/* ---- tables ------------------------------------------------------------
   A table on desktop, CARDS on a phone.

   A horizontally scrolling table is the worst thing to hand a phone reader: the
   header row leaves the viewport on the first swipe, and every cell after that
   is an unlabelled fragment. So below 720px each row becomes a card, the first
   cell becomes its title, and every other cell prints its own column header
   from `data-label`, which inc/article-body.php puts on every body cell of
   every table.

   Nothing here is per article. Any table in any article gets it, with no markup
   for a writer to remember.

   720px rather than 640px on purpose: it catches large phones and a small
   tablet in portrait, where a three-column table is already too tight.
   ------------------------------------------------------------------------- */

.llart__tablewrap { margin: 2.2em 0; overflow-x: auto; }
/* The WRAPPER carries the border, so the space around the box is its margin.
   The TABLE inside it must contribute none, or the inherited theme margin
   opens a gap between the last row and the bottom border. Removing the
   wrapper's margin instead was the wrong half: it left body text sitting hard
   against the bordered box. */
.llart__table { margin: 0; }
.llart__tablewrap:focus-visible { outline: 2px solid var(--llart-brand-orange); outline-offset: 2px; }
.llart__table { width: 100%; border-collapse: collapse; font-size: 1rem; }
/* X Theme's global table CSS puts `border-top: 1px solid #ddd` on every cell.
   Left alone it doubles every row separator on desktop, and in card mode it
   draws a line above every single cell, which is what made the cards look
   ruled. Reset it explicitly and keep only the separator this template asks
   for. */
.llart__table th, .llart__table td { border-top: 0; }
.llart__table td {
	padding: .875rem 1.125rem .875rem 0; text-align: left; vertical-align: top;
	border-bottom: var(--art-rule);
}
.llart__table tr:last-child td { border-bottom: 0; }
.llart__table thead th {
	padding: 0 1.125rem .625rem 0; text-align: left; vertical-align: bottom;
	border-bottom: 2px solid var(--llart-navy);
	color: var(--llart-navy); font-weight: 700;
	font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
	white-space: nowrap;
}

@media (max-width: 720px) {
	.llart__tablewrap {
		overflow-x: visible;      /* there is nothing to scroll once it is cards */
		margin: 1.75em 0;
	}
	.llart__table,
	.llart__table thead,
	.llart__table tbody,
	.llart__table tr,
	.llart__table th,
	.llart__table td { display: block; }

	/* The header row is redundant once every cell carries its own label, but it
	   stays in the accessibility tree rather than being display:none, so the
	   table is still announced as a table. */
	.llart__table thead {
		position: absolute; width: 1px; height: 1px;
		overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
	}

	.llart__table tr {
		margin: 0 0 .875rem;
		padding: 1rem 1.125rem 1.125rem;
		background: var(--llart-bg-gray);
		border-left: 3px solid var(--llart-navy);
		border-radius: 3px;
	}
	.llart__table tr:last-child { margin-bottom: 0; }

	/* `border: 0`, not `border-bottom: 0`: the theme's cell border is on the TOP
	   side, so resetting one side left a line above every cell in the card. */
	.llart__table td,
	.llart__table tbody th { padding: 0; border: 0; margin: 0 0 .75rem; }
	.llart__table tr > *:last-child { margin-bottom: 0; }

	/* Cell one is the card's title. No rule under it: the card already has a
	   panel, a left edge and a type change, and a fourth separator inside a box
	   that small is what made the cards look ruled. */
	.llart__table [data-lead] {
		margin: 0 0 .75rem;
		font-family: var(--llart-display);
		font-size: 1.0625rem; font-weight: 700; line-height: 1.3;
		color: var(--llart-navy);
	}

	/* Every other cell is a labelled value. */
	.llart__table [data-label]:not([data-lead])::before {
		content: attr(data-label);
		display: block;
		margin-bottom: .1875rem;
		font-family: var(--llart-display);
		font-size: .625rem; font-weight: 700; letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--llart-brand-orange-ink);
	}

	/* An empty cell would otherwise print a label with nothing under it. */
	.llart__table td:empty { display: none; }
}

/* ---- the desktop table -------------------------------------------------
   Cards were tried on desktop and rejected: on a wide screen a comparison IS a
   table, and six panels made the reader hunt for the comparison the table was
   already making. So the table stays and takes the CARDS' palette, which is the
   part that worked.

   From the cards, exactly: the orange small-caps label, the navy weight on each
   row's name, the light panel tint, generous padding.

   Column separation is explicit rather than implied. The row-name column gets a
   heavier right edge because it is a different KIND of thing from the values,
   and the value columns get hairlines between them so a reader tracking one
   system down the table has a lane to follow. Ruled lines were avoided
   elsewhere in this stylesheet on purpose; a comparison grid is the one place
   they earn their keep, because the reader is genuinely navigating in two
   dimensions.

   Below 720px it becomes cards. At that width a five-column table cannot work,
   and that was never the complaint.
   ----------------------------------------------------------------------- */

@media (min-width: 721px) {
	.llart__prose .llart__tablewrap,
	.llart__tablewrap {
		margin: 2.4em 0;
		max-width: none;
		border: 1px solid var(--llart-line);
		border-radius: 4px;
		overflow: hidden;
	}
	.llart__table { width: 100%; border-collapse: collapse; margin: 0; }

	/* Header: the card's label treatment, on the card's panel tint. */
	.llart__table thead th {
		background: var(--llart-bg-gray);
		color: var(--llart-brand-orange-ink);
		font-family: var(--llart-display);
		font-size: .625rem;
		font-weight: 700;
		letter-spacing: .14em;
		text-transform: uppercase;
		text-align: left;
		padding: .875rem 1rem;
		border: 0;
		border-bottom: 2px solid var(--llart-navy);
		vertical-align: bottom;
	}

	/* The row-name column is a different kind of thing from the values. */
	.llart__table thead th:first-child,
	.llart__table tbody tr > *:first-child {
		width: 21%; min-width: 8.5rem;
		border-right: 2px solid var(--llart-line);
	}

	/* Hairlines give each system a lane to read down. */
	.llart__table tbody td + td,
	.llart__table thead th + th + th { border-left: 1px solid var(--llart-line); }
	.llart__table tbody tr > *:nth-child(2) { border-left: 0; }

	.llart__table tbody td,
	.llart__table tbody th {
		padding: .9375rem 1rem;
		border-top: 1px solid var(--llart-line);
		vertical-align: top;
		font-size: .9375rem;
		line-height: 1.5;
	}
	.llart__table tbody tr:first-child > * { border-top: 0; }

	/* Alternating tint, same value the cards used. */
	.llart__table tbody tr:nth-child(even) { background: var(--llart-bg-gray); }

	/* Each row's name, weighted like a card title. */
	.llart__table tbody [data-lead] {
		font-family: var(--llart-display);
		font-weight: 700;
		font-size: 1rem;
		color: var(--llart-navy);
		white-space: normal;
	}
}




/* ---- modules ------------------------------------------------------------ */

/* ---- asides: one geometry, three voices --------------------------------
   The short answer, a callout and the product block are all the same shape as
   each other: a 3px rule in the left margin, an outdented gutter, and no box.
   Consistency was the point of unifying them, and it also removes three tinted
   rounded panels from the page.

   Not boxing them is also the least generic thing available here. A rounded
   tinted card with a bold coloured label is what every template ships and what
   every generator produces; a rule in the margin with a small-caps label is how
   a magazine sets an aside, and it costs less ink and less markup.

   The three differ only in the label's voice and the rule's colour, which is
   what tells a reader whether they are looking at a summary, an aside, or the
   one place the product is named.
   ------------------------------------------------------------------------- */

.llart-mod { margin: 2.4em 0; }

.llart-mod--callout,
.llart-mod--note,
.llart-mod--rule,
.llart-mod--regulator,
.llart-mod--warning,
.llart-mod--related,
.llart-mod--fit {
	padding: .125rem 0 .125rem 1.5rem;
	border-left: 3px solid var(--llart-line);
	background: none;
	border-radius: 0;
	font-size: inherit;
}

.llart-mod__label {
	margin: 0 0 .5rem;
	font-family: var(--llart-display);
	font-size: .6875rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
	color: var(--llart-ink-4);
}
.llart-mod__body > *:first-child { margin-top: 0; }
.llart-mod__body > *:last-child { margin-bottom: 0; }

/* An aside. Body text at reading size, so it reads as a note beside the
   argument rather than as a second summary competing with the first. */
.llart-mod--callout { border-left-color: var(--llart-ink-4); }
.llart-mod--note { border-left-color: var(--llart-ink-4); }

/* A rule of thumb is the writer's own generalisation. */
.llart-mod--rule { border-left-color: var(--llart-brand-orange); }
.llart-mod--rule .llart-mod__label { color: var(--llart-brand-orange-ink); }

/* Two that must not be missed keep a colour with meaning. */
.llart-mod--warning { border-left-color: #b32d2e; }
.llart-mod--warning .llart-mod__label { color: #b32d2e; }
.llart-mod--regulator { border-left-color: var(--llart-navy); }
.llart-mod--regulator .llart-mod__label { color: var(--llart-navy); }

/* The one place the product is named. The label is a real heading in sentence
   case, not a small-caps tag, because it is a claim being made rather than a
   category being announced. */
.llart-mod--fit { border-left-color: var(--llart-navy); }
.llart-mod--fit .llart-mod__label {
	margin: 0 0 .625rem;
	font-size: 1.0625rem; font-weight: 700;
	letter-spacing: -0.01em; text-transform: none;
	color: var(--llart-navy);
}
.llart-mod__cta { margin-top: 1.125rem; }

/* Inline read-next. Same gutter; the link carries the weight. */
.llart-mod--related { border-left-color: var(--llart-brand-orange); }
.llart-mod--related .llart-mod__label { color: var(--llart-brand-orange-ink); }
.llart-mod__relatedlink {
	display: inline-block;
	font-size: 1.0625rem; font-weight: 700; line-height: 1.35;
	color: var(--llart-navy); text-decoration: none;
}
.llart-mod__relatedlink:hover, .llart-mod__relatedlink:focus { color: var(--llart-brand-orange-ink); }
.llart-mod__relateddeck { margin: .5rem 0 0; font-size: .9375rem; color: var(--llart-ink-3); }

.llart-mod--definition {
	padding: .125rem 0 .125rem 1.5rem;
	border-left: 3px solid var(--llart-navy);
	background: none;
}
.llart-mod--definition .llart-mod__term {
	margin: 0 0 .375rem;
	font-family: var(--llart-display);
	font-size: 1.1875rem; font-weight: 700; color: var(--llart-navy);
}

.llart-mod--steps { counter-reset: llartstep; list-style: none; padding: 0; margin: 2.2em 0; }
.llart-mod__step {
	counter-increment: llartstep;
	position: relative;
	padding: 0 0 0 58px; margin: 0 0 26px;
}
.llart-mod__step::before {
	content: counter(llartstep, decimal-leading-zero);
	position: absolute; left: 0; top: 2px;
	font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
	color: var(--llart-brand-orange-ink);
}
.llart-mod__steptitle { margin: 0 0 6px; font-size: 19px; font-weight: 700; color: var(--llart-navy); }

.llart-mod--stat { padding: .125rem 0 .125rem 1.5rem; border-left: 3px solid var(--llart-brand-orange); }
.llart-mod__value { margin: 0; font-size: clamp(32px, 4vw, 44px); font-weight: 700; color: var(--llart-navy); line-height: 1.05; letter-spacing: -0.02em; }
.llart-mod__statlabel { margin: 10px 0 0; font-size: 17px; color: var(--llart-ink-body); }
.llart-mod__source { margin: 12px 0 0; font-size: 13px; color: var(--llart-ink-3); }

.llart-mod--quote { margin: 2.4em 0; padding: .125rem 0 .125rem 1.5rem; border-left: 3px solid var(--llart-brand-orange); }
.llart-mod__cite { display: block; margin-top: 12px; font-size: 14px; font-style: normal; color: var(--llart-ink-3); }

/* No left rule. The checks are already a strong left edge, and a second vertical
   line beside them read as a stray border. */
.llart-mod--checklist { padding: .125rem 0; border-left: 0; }
.llart-mod--checklist .llart-mod__label { color: var(--llart-ink-4); }
/* The tick is a real Font Awesome path injected per item by
   llart_module_checklist(), not a rotated CSS box. The old version read as a
   stray border, and a hand-drawn icon is not allowed here in any case. */
.llart-mod--checklist ul,
.llart__prose .llart-mod--checklist ul { list-style: none; padding: 0; margin: 0; }
.llart-mod--checklist li,
.llart__prose .llart-mod--checklist li {
	position: relative; padding: 0 0 0 1.75rem; margin: 0 0 .6875rem; border: 0;
}
.llart-check__ico {
	position: absolute; left: 0; top: .28em;
	width: 15px; height: 15px; flex: none;
	fill: var(--llart-good); color: var(--llart-good);
}

.llart-mod--figure { margin: 2.4em 0; }
.llart-mod__img { display: block; width: 100%; height: auto; }
.llart-mod__caption { margin-top: 12px; font-size: 14px; color: var(--llart-ink-3); }


/* ---- chart and timeline ------------------------------------------------
   Block boxes and percentage widths, not SVG: dompdf renders these, a screen
   reader reads every value as ordinary text in the reading order, and there is
   no JavaScript. See inc/article-modules.php for the reasoning.
   ------------------------------------------------------------------------- */

.llart-mod--chart { margin: 2.4em 0; padding: 0; border-left: 0; }
.llart-chart { display: grid; gap: .625rem; }
.llart-chart__row {
	display: grid;
	grid-template-columns: minmax(6rem, 11rem) minmax(0, 1fr) auto;
	align-items: center;
	gap: .75rem;
}
.llart-chart__label {
	font-size: .875rem; line-height: 1.35; color: var(--llart-ink-body);
}
.llart-chart__track {
	display: block; height: 1.375rem;
	background: var(--llart-bg-gray);
	border-radius: 2px;
	overflow: hidden;
}
.llart-chart__bar {
	display: block; height: 100%;
	background-color: var(--llart-navy);
	border-radius: 2px 0 0 2px;
}
.llart-chart__row.is-emphasis .llart-chart__bar {
	background-color: #b85a0c;
	background-image: linear-gradient(to right, #b85a0c, rgb(170, 68, 0));
}
.llart-chart__value {
	font-family: var(--llart-display);
	font-size: .875rem; font-weight: 700; color: var(--llart-navy);
	white-space: nowrap;
}
.llart-mod--chart .llart-mod__source,
.llart-mod--chart figcaption {
	margin: .75rem 0 0; font-size: .8125rem; color: var(--llart-ink-3);
}

/* On a phone the label goes above its own bar rather than fighting it for a
   third of a 390px viewport. */
@media (max-width: 640px) {
	.llart-chart__row {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: .25rem .625rem;
	}
	.llart-chart__label { grid-column: 1 / -1; font-weight: 600; color: var(--llart-navy); }
}

.llart-mod--timeline { margin: 2.4em 0; padding: 0; border-left: 0; }

/* The dot and the connector are BOTH drawn from the item's own origin, so they
   cannot drift apart. The first version put a border-left on the list and then
   pulled the dots leftwards with a negative offset, which meant the line's
   position depended on the list's padding and the dot's on its own arithmetic;
   they missed each other by a pixel or two and the line appeared to run beside
   the dots rather than through them.

   Geometry: the dot is 11px at left:0, so its centre is at x=5.5px. The
   connector is 2px wide at left:4.5px, so its centre is at x=5.5px too. */
/* The indent lives on the ITEM, not the list, so the dot at left:0 and the text
   at padding-left both measure from the same edge.

   Both selectors carry two classes on purpose. `.llart__prose ol` sets
   padding-left:1.3em and `.llart__prose li` sets padding-left:.2em, and both are
   (0,1,1), so a single-class `.llart-time` or `.llart-time__item` loses to them.
   That is what left the item with 3.6px of padding and the dot sitting on the
   first letter of the date. */
.llart__prose .llart-time,
.llart-time { list-style: none; margin: 0; padding: 0; }
.llart__prose .llart-time__item,
.llart-time .llart-time__item { position: relative; margin: 0; padding: 0 0 1.375rem 1.875rem; }
.llart__prose .llart-time__item:last-child,
.llart-time .llart-time__item:last-child { padding-bottom: 0; }

.llart-time__item::before {
	content: ""; position: absolute;
	left: 0; top: .3em;
	width: 11px; height: 11px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--llart-line);
	box-sizing: border-box;
	z-index: 1;
}
/* The connector runs from just under this dot to the top of the next one. */
.llart-time__item::after {
	content: ""; position: absolute;
	left: 4.5px; top: calc(.3em + 11px);
	width: 2px; bottom: -0.35rem;
	background: var(--llart-line);
}
.llart-time__item:last-child::after { display: none; }

/* A status word travels with the colour, so orange is labelled rather than
   guessed at. Set `status` only on a timeline of real calendar dates. */
.llart-time__flag {
	display: inline-block; margin-left: .5rem;
	font-size: .5625rem; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; vertical-align: .1em;
}
.llart-time__flag--past { color: var(--llart-ink-4); }
.llart-time__flag--now,
.llart-time__flag--next { color: var(--llart-brand-orange-ink); }

.llart-time__item.is-past::before { background: var(--llart-line); border-color: var(--llart-line); }
.llart-time__item.is-now::before,
.llart-time__item.is-next::before { background: var(--llart-brand-orange); border-color: var(--llart-brand-orange); }

.llart-time__date {
	display: block; margin-bottom: .25rem;
	font-family: var(--llart-display);
	font-size: .8125rem; font-weight: 700; letter-spacing: .04em;
	color: var(--llart-navy);
}
.llart-time__item.is-past .llart-time__date { color: var(--llart-ink-3); }
.llart-time__body { font-size: 1rem; line-height: 1.6; }
.llart-time__body > *:first-child { margin-top: 0; }
.llart-time__body > *:last-child { margin-bottom: 0; }

/* ---- FAQ ---------------------------------------------------------------- */

.llart__blocktitle {
	margin: 0 0 6px;
	font-size: clamp(24px, 3vw, 30px); line-height: 1.2; font-weight: 700;
	letter-spacing: -0.018em; color: var(--llart-navy);
}
.llart__faq { margin: 4.5rem 0 0; padding-top: 1.75rem; border-top: var(--art-rule); }
.llart__faq-list { margin-top: 22px; }
.llart__faq-item { border-bottom: var(--art-rule); }
.llart__faq-q {
	list-style: none; cursor: pointer;
	display: flex; align-items: flex-start; gap: 14px;
	padding: 20px 0;
}
.llart__faq-q::-webkit-details-marker { display: none; }
.llart__faq-marker {
	flex: none; margin-top: 9px;
	width: 9px; height: 9px;
	border-right: 2px solid var(--llart-brand-orange);
	border-bottom: 2px solid var(--llart-brand-orange);
	transform: rotate(-45deg);
	transition: transform .18s ease;
}
.llart__faq-item[open] .llart__faq-marker { transform: rotate(45deg); }
.llart__faq-qtext { margin: 0; font-size: 19px; line-height: 1.4; font-weight: 700; color: var(--llart-navy); }
.llart__faq-a { padding: 0 0 22px 23px; font-size: 17px; line-height: 1.65; color: var(--llart-ink-body); }
.llart__faq-a > *:first-child { margin-top: 0; }
.llart__faq-a > *:last-child { margin-bottom: 0; }

/* ---- sources ------------------------------------------------------------ */

.llart__sources { margin: 3.5rem 0 0; padding-top: 1.75rem; border-top: var(--art-rule); }
.llart__source-list { margin: 20px 0 0; padding-left: 1.2em; font-size: 16px; line-height: 1.6; }
.llart__source { margin-bottom: 12px; }
.llart__source a { color: var(--llart-navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--llart-brand-orange-ink); }
.llart__source-pub { display: block; font-size: 13.5px; color: var(--llart-ink-3); }

/* ---- author card -------------------------------------------------------- */

.llart__authorcard { margin: 64px 0 0; }
.llart__authorbox {
	display: flex; gap: 24px; align-items: flex-start;
	padding: 2rem 0 0; border-top: var(--art-rule);
}
.llart__authorimg { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none; }
.llart__authorname { margin: 0; font-size: 20px; font-weight: 700; color: var(--llart-navy); }
.llart__authorrole { margin: 3px 0 0; font-size: 14px; color: var(--llart-brand-orange-ink); font-weight: 600; }
.llart__authorbio { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--llart-ink-body); }
.llart__authorknows { margin: 14px 0 0; font-size: 13.5px; color: var(--llart-ink-3); }
.llart__authorknowslabel {
	display: block; margin-bottom: 4px;
	font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--llart-ink-4);
}
.llart__authorlinks { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; }
.llart__authorlinks a { color: var(--llart-navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--llart-brand-orange-ink); }

/* ---- next step --------------------------------------------------------
   Colour is declared on every element in here, not inherited. This panel is
   navy, so anything that inherits a navy heading colour disappears into it.
   It stacks below 720px rather than squeezing the button onto two lines.
   ------------------------------------------------------------------------- */

.llart__cta { padding: 4rem 0 0; }
.llart__ctabox {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 1.5rem 2rem;
	padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 3rem);
	background: var(--llart-navy);
	border-radius: 4px;
}
.llart__ctatext { flex: 1 1 22rem; min-width: 0; max-width: 44rem; }
.llart__ctahead {
	margin: 0;
	font-size: clamp(1.375rem, 2.6vw, 1.875rem);
	line-height: 1.2; font-weight: 700; letter-spacing: -0.018em;
	color: #fff;
}
.llart__ctabody {
	margin: .625rem 0 0;
	font-size: 1.0625rem; line-height: 1.55;
	color: rgba(255,255,255,.82);
}
.llart__ctabox .llart-cta { flex: 0 0 auto; }

/* ---- related + hub ------------------------------------------------------ */

.llart__related { padding: 4rem 0 4.5rem; }
/* No rule above this heading: it sits directly under the dark call-to-action
   panel, which is already a hard horizontal edge. Two in a row reads as a
   mistake. */
.llart__relatedhead {
	margin: 0 0 1.875rem;
	font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700;
	letter-spacing: -0.018em; color: var(--llart-navy);
}
.llart__relatedgrid {
	display: grid; gap: 34px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.llart__card { display: flex; flex-direction: column; background: none; }
.llart__cardimg { display: block; line-height: 0; background: var(--llart-bg-gray); overflow: hidden; }
.llart__cardimg img {
	width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
	transition: transform .35s ease;
}
.llart__card:hover .llart__cardimg img { transform: scale(1.03); }
.llart__cardbody { padding: 18px 0 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.llart__cardtopic {
	margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--llart-brand-orange-ink);
}
.llart__cardtopic a { color: inherit; text-decoration: none; }
.llart__cardtopic a:hover, .llart__cardtopic a:focus { text-decoration: underline; }
.llart__cardtitle { margin: 0; font-size: 20px; line-height: 1.28; font-weight: 700; letter-spacing: -0.012em; }
.llart__cardtitle a { color: var(--llart-navy); text-decoration: none; }
.llart__cardtitle a:hover, .llart__cardtitle a:focus { color: var(--llart-brand-orange-ink); }
.llart__carddeck { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--llart-ink-3); }
.llart__cardmeta {
	margin: auto 0 0; padding-top: 10px;
	display: flex; align-items: center; gap: 9px;
	font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	color: var(--llart-ink-4);
}

/* ---- archive + hub pages ------------------------------------------------ */

.llart__archivehead { padding: 46px 0 34px; }
.llart__archivekicker {
	margin: 0 0 14px;
	font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--llart-brand-orange-ink);
}
.llart__archivetitle {
	margin: 0; max-width: 17ch;
	font-size: clamp(34px, 5.2vw, 58px); line-height: 1.06;
	letter-spacing: -0.025em; font-weight: 700; color: var(--llart-navy);
	text-wrap: balance;
}
.llart__archiveintro {
	margin: 24px 0 0; max-width: 62ch;
	font-size: 19px; line-height: 1.62; color: var(--llart-ink-3);
}
.llart__hubintro p { margin: 0 0 1em; }
.llart__hubintro p:last-child { margin-bottom: 0; }
.llart__archivecount {
	margin: 22px 0 0; font-size: 12px; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: var(--llart-ink-4);
}

.llart__filters { border-top: 2px solid var(--llart-navy); border-bottom: var(--art-rule); padding: 20px 0; }
.llart__filtersinner {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
}
.llart__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.llart__filters .llart__chip {
	background: transparent; color: var(--llart-ink-3);
	border: 1px solid var(--llart-line);
	letter-spacing: .04em; text-transform: none; font-size: 13.5px; font-weight: 600;
}
.llart__filters .llart__chip.is-current { background: var(--llart-navy); border-color: var(--llart-navy); color: #fff; }
.llart__filters .llart__chip:hover,
.llart__filters .llart__chip:focus { border-color: var(--llart-brand-orange); color: var(--llart-brand-orange-ink); background: transparent; }
.llart__filters .llart__chip.is-current:hover { color: #fff; background: #b85a0c; border-color: #b85a0c; }
.llart__chipcount { font-size: 11px; opacity: .6; }

.llart__search { display: flex; gap: 8px; }
.llart__search input[type="search"] {
	padding: 10px 14px; border: 1px solid var(--llart-line); border-radius: 4px;
	font-size: 14px; min-width: 210px; background: #fff;
}
.llart__search input[type="search"]:focus {
	outline: 2px solid var(--llart-brand-orange); outline-offset: 1px; border-color: transparent;
}
.llart__search button {
	padding: 10px 18px; border: 0; border-radius: 4px; cursor: pointer;
	background: var(--llart-navy); color: #fff; font-size: 13px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase;
}
.llart__search button:hover, .llart__search button:focus { background: var(--llart-brand-orange); }

.llart__listwrap { padding: 52px 0 20px; }
.llart__list { display: grid; gap: 44px 34px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.llart__empty { padding: 48px 0; font-size: 18px; color: var(--llart-ink-3); }

.llart__pagination { margin: 56px 0 0; }
.llart__pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.llart__pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 12px;
	border: 1px solid var(--llart-line); border-radius: 4px;
	color: var(--llart-ink-body); text-decoration: none; font-size: 14px; font-weight: 600;
}
.llart__pagination .page-numbers:hover { border-color: var(--llart-brand-orange); color: var(--llart-brand-orange-ink); }
.llart__pagination .page-numbers.current { background: var(--llart-navy); border-color: var(--llart-navy); color: #fff; }

/* ---- reading progress --------------------------------------------------- */

.llart__progress {
	position: fixed; top: 0; left: 0; right: 0; height: 3px;
	background: transparent; z-index: 9999; pointer-events: none;
}
.llart__progressbar { height: 100%; width: 0; background: var(--llart-brand-orange); }

/* ---- focus visibility --------------------------------------------------- */

.llart a:focus-visible,
.llart button:focus-visible,
.llart summary:focus-visible {
	outline: 2px solid var(--llart-brand-orange);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---- motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.llart *,
	.llart *::before,
	.llart *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.llart__card:hover .llart__cardimg img { transform: none; }
}

/* ---- responsive --------------------------------------------------------
   The layout is mobile-first, so these blocks only handle what genuinely needs
   to change: the sidebar's position in the flow, and the type and spacing scale.
   ------------------------------------------------------------------------- */

/* Below the sidebar breakpoint the rail drops under the article. Its modules go
   two-up so they do not become a long tail of links between the prose and the
   call to action. */
@media (max-width: 1023px) {
	.llart__sidebar {
		margin-top: 3rem;
		padding-top: 1.5rem;
		border-top: 2px solid var(--llart-navy);
	}
	.llart__sidebar-inner {
		display: grid;
		gap: 1.75rem 2.5rem;
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
		align-items: start;
	}
	.llart__side-mod { margin-bottom: 0; }

	/* The rail's conversion card is hidden below this width, and deliberately.
	   On desktop it earns its place by being sticky: it is visible while the
	   reader is still reading. Below the breakpoint the rail has moved to the end
	   of the article, which puts "Talk it through" immediately above the closing
	   panel's "Take this to your next audit prep" and asks the same question
	   twice in a row.
	   The closing panel is the one that survives: it is full width, it carries a
	   heading matched to the article's format, and it sits where the reading ends.
	   Nothing unique is lost, because both point at /get-started/. */
	.llart__side-card { display: none; }
	.llart__main > * { max-width: none; }
}

/* Phone. Everything narrows and the vertical rhythm tightens; nothing is
   hidden, because a phone reader is not a lesser reader. */
@media (max-width: 640px) {
	.llart {
		--art-body-lh: 1.7;
		--llart-band-w: 90%;
	}
	.llart__crumbs { padding-top: .875rem; }
	.llart__crumblist { font-size: .75rem; }
	.llart__head { padding-top: 1.25rem; }
	.llart__kicker { margin-bottom: .875rem; font-size: .6875rem; letter-spacing: .12em; }
	.llart__title { letter-spacing: -0.015em; line-height: 1.14; }
	.llart__deck { margin-top: 1rem; }
	.llart__byline { margin-top: 1.5rem; gap: .875rem; }
	.llart__meta { font-size: .75rem; }
	.llart__hero { margin-top: 1.25rem; }
	.llart__heroimg { aspect-ratio: 3 / 2; }
	.llart__shell { padding-top: 2rem; }

	.llart__answer { margin-bottom: 2rem; padding-left: 1.125rem; }
	.llart__takeaways { margin-bottom: 2rem; }

	.llart__prose h2 { margin-top: 2.1em; }
	.llart__prose h2::before { margin-bottom: .875rem; padding-top: 1rem; }

	/* A 58px step number beside a 20px heading is a desktop flourish. */
	.llart-mod__step { padding-left: 2.75rem; }
	.llart-mod__step::before { font-size: 1.125rem; }
	.llart-mod--callout,
	.llart-mod--definition,
	.llart-mod--related,
	.llart-mod--fit { padding: 1.25rem 1.25rem; }

	.llart__faq { margin-top: 3rem; }
	.llart__faq-qtext { font-size: 1.0625rem; }
	.llart__faq-a { padding-left: 0; }
	.llart__sources, .llart__authorcard { margin-top: 2.5rem; }
	.llart__authorbox { flex-direction: column; gap: 1.125rem; }
	.llart__cta { padding-top: 3rem; }
	.llart__related { padding: 2.75rem 0 3rem; }
	.llart__ctabox .llart-cta { width: 100%; justify-content: center; }
	.llart__relatedgrid { gap: 2rem; }

	/* No hover on touch, so a hover-revealed anchor could never be reached. */
	.llart__anchor { display: none; }
	.llart__table { font-size: .9375rem; }
	.llart__tablewrap { margin-inline: 0; }
}

/* Small phones: the numbered section rule and the counter start to crowd. */
@media (max-width: 400px) {
	.llart__title { font-size: 1.75rem; }
	.llart__share-btn { width: 2.25rem; height: 2.25rem; }
}

/* ---- print -------------------------------------------------------------- */

@media print {
	.llart__sidebar, .llart__cta, .llart__related,
	.llart__filters, .llart__progress, .llart__crumbs { display: none !important; }
	.llart__main, .llart__head-inner { max-width: none; }
	.llart__sidebar { display: none !important; }
	.llart__faq-item > .llart__faq-a { display: block !important; }
	.llart__prose a::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
	.llart__answer { border: 0; border-left: 3px solid #999; }
}