/**
 * FreshBrand Editorial Modules
 * =============================================================================
 * A reading-rhythm system for long-form articles.
 *
 * SOURCE OF TRUTH
 * ---------------
 * Nothing here invents a colour, a family or a shape. Every value resolves to a
 * token the FreshBrand child theme already publishes in `sass/_base.scss` and
 * ships inlined via `assets/css/critical.css`:
 *
 *   colour   --qode-main-color, --qode-main-opposite-color, --bg-second-color,
 *            --bg-light, --bg-color, --bd-color, --primary, --secondary,
 *            --text-light
 *   type     --font-body, --font-display, --fs-base, --fluid-*
 *   space    --unit-space-res, --rhythm-unit, --fluid-*
 *   motion   --ease-smooth, --default-transition
 *
 * The plugin only decides SIZE, WEIGHT, LINE-HEIGHT, TRACKING and WHITESPACE.
 * Dark mode needs no rules of its own: the theme flips those tokens under
 * `body.qodef-skin--dark` and every module follows.
 *
 * NO shadows, no gradients, no rounded cards, no icons, no animation — the site
 * does not use them, so neither does this.
 *
 * ARCHITECTURE
 * ------------
 * 0. Tokens          `--article-*`, defined once on the region
 * 1. Width system    text / wide / full, driven by native block alignment
 * 2. Theme bridge    the few high-specificity rules that out-rank einar
 * 3. Primitives      eyebrow, index, numbered list, link, caption
 * 4. Modules         A–J, one block per module class
 * 5. Responsive
 *
 * Modules lay themselves out with flexbox `gap`, never margins. The theme sets
 * blanket `p { margin: 1.4em 0 }` rules on single posts at a specificity a
 * plugin cannot politely beat; §2 zeroes those inside modules once, and from
 * then on spacing is gap-driven and immune to the cascade.
 *
 * @package FreshBrand_Editorial
 */

/* =============================================================================
   0. TOKENS
   ========================================================================== */

.article-content,
.editor-styles-wrapper {
	/* --- Width -------------------------------------------------------------
	   1rem = 10px (the theme sets html { font-size: 62.5% }).
	   text 720px  ·  wide 1040px  ·  full = the theme's content grid (1300px). */
	--article-text: 72rem;
	--article-wide: 104rem;
	--article-gutter: var(--unit-space-res, 2.8rem);

	/* --- Space -------------------------------------------------------------
	   Straight aliases onto the theme's generated fluid scale, so module
	   whitespace breathes on exactly the same curve as the rest of the site. */
	--article-space-xs: var(--fluid-14-16, clamp(1.4rem, 1.3rem + 0.13vw, 1.6rem));
	--article-space-sm: var(--fluid-18-28, clamp(1.8rem, 1.55rem + 0.65vw, 2.8rem));
	--article-space-md: var(--fluid-28-48, clamp(2.8rem, 2.32rem + 1.29vw, 4.8rem));
	--article-space-lg: var(--fluid-48-84, clamp(4.8rem, 3.93rem + 2.33vw, 8.4rem));
	--article-space-xl: var(--fluid-84-112, clamp(8.4rem, 7.72rem + 1.81vw, 11.2rem));

	/* Gutter for the markers of ordinary body lists — the bullet sits in it,
	   the text column starts after it. Narrower than --article-num-width
	   because a bullet needs far less room than a two-digit number. */
	--article-list-indent: 2.4rem;

	/* --- Type --------------------------------------------------------------
	   Families are inherited, never declared. Only the scale is set here. */
	--article-lede-size: var(--fluid-20-28, clamp(2rem, 1.81rem + 0.52vw, 2.8rem));
	--article-eyebrow-size: var(--fluid-14-16, clamp(1.4rem, 1.35rem + 0.13vw, 1.6rem));
	--article-caption-size: var(--fluid-14-16, clamp(1.4rem, 1.35rem + 0.13vw, 1.6rem));
	--article-link-size: 1.6rem; /* einar's button is a fixed 16px; match it exactly. */
	--article-lead-in-size: var(--fluid-18-24, clamp(1.8rem, 1.66rem + 0.39vw, 2.4rem));
	--article-statement-size: var(--fluid-28-48, clamp(2.8rem, 2.32rem + 1.29vw, 4.8rem));
	--article-display-size: var(--fluid-32-64, clamp(3.2rem, 2.43rem + 2.07vw, 6.4rem));
	--article-index-size: var(--fluid-28-40, clamp(2.8rem, 2.51rem + 0.78vw, 4rem));

	/* Body headings. The theme's global scale puts h2 at --fluid-36-56 and h3
	   at --fluid-32-48 — 11% apart, which reads as two shouts rather than a
	   hierarchy, and at full size an h2 out-signals everything else on the
	   screen including the reading rail beside it. Both step down the theme's
	   own fluid scale: h2 by 11-14%, h3 far enough that the levels are legible
	   as different. No new values — these are tokens the theme already
	   generates. Module headings are untouched; they follow the module's own
	   scale (§2). */
	--article-h2-size: var(--fluid-32-48, clamp(3.2rem, 2.81165rem + 1.0356vw, 4.8rem));
	--article-h3-size: var(--fluid-24-32, clamp(2.4rem, 2.20583rem + 0.5178vw, 3.2rem));
	--article-number-size: var(--fluid-48-84, clamp(4.8rem, 3.93rem + 2.33vw, 8.4rem));

	/* 1.15, not 1: Vietnamese stacks diacritics above the cap line (ế, ộ, ữ),
	   so a line box the height of the font leaves the marks colliding with the
	   descenders above them. This is the floor the theme's own headings use. */
	--article-lh-display: 1.15;
	--article-lh-heading: 1.15;
	--article-lh-body: 1.618;

	/* FreshBrand tightens type; it never opens it out. Measured across the
	   site's own components, every non-normal tracking value is negative
	   (-1.35px dominates, on 60 elements). Labels therefore get their identity
	   from case, weight and colour — never from letter-spacing. */
	--article-track-display: -0.03em;

	/* --- Colour ------------------------------------------------------------
	   Semantic names in front of the theme's tokens. Dark mode is automatic. */
	--article-ink: var(--qode-main-color, #000);
	--article-ink-secondary: var(--secondary, #333);
	--article-ink-muted: var(--text-light, #71717a);
	--article-surface: var(--bg-second-color, #fff);
	--article-surface-alt: var(--bg-light, #f5f5f5);
	--article-line: var(--bd-color, #e5e5e5);
	--article-accent: var(--primary, #0000ff);
	--article-inverse-bg: var(--qode-main-color, #000);
	--article-inverse-ink: var(--qode-main-opposite-color, #fff);
}

/* =============================================================================
   1. WIDTH SYSTEM

   Three tiers, driven by the block editor's own alignment control so a writer
   changes width from the toolbar and never touches a class:

     (none)      -> text   ~720px   paragraphs, headings, lists, definitions
     Wide        -> wide  ~1040px   frameworks, comparisons, cases, diagrams
     Full        -> full            the theme's content grid, edge to edge

   `max-width` + `margin-inline: auto` is used rather than a breakout grid on
   purpose: it leaves vertical margin collapsing intact, so the theme's own
   paragraph rhythm keeps working, and it can never produce a horizontal
   scrollbar.
   ========================================================================== */

.article-content > * {
	max-width: var(--article-text);
	margin-inline: auto;
}

.article-content > .alignwide,
.article-content > .editorial-wide {
	max-width: var(--article-wide);
}

.article-content > .alignfull,
.article-content > .editorial-full {
	max-width: none;
}

/* Anything set to Full inside a padded region gets its gutter back. */
.article-content > .alignfull > :not(.alignfull):not(.alignwide),
.article-content > .editorial-full > :not(.alignfull):not(.alignwide) {
	max-width: var(--article-text);
	margin-inline: auto;
}

/* An Elementor template appended to the article — the child theme's
   end-of-article CTA — is a top-level child of the region like any block, so it
   takes the text measure and centres with everything else. It also gets the
   module's own breathing room, because that is what it is: the last editorial
   break in the piece. Elementor containers stretch to their parent, so nothing
   inside needs overriding. */
.article-content > .elementor {
	max-width: var(--article-text);
	margin-inline: auto;
	margin-block-start: var(--article-space-lg);
}

/* A lede may sit a touch wider than the measure without becoming a hero. */
.article-content > .editorial-lede,
.article-content > .is-style-editorial-lede {
	max-width: calc(var(--article-text) + 8rem);
}

/* Images keep their aspect ratio at every tier. */
.article-content img,
.article-content video {
	max-width: 100%;
	height: auto;
}

/* =============================================================================
   2. THEME BRIDGE

   einar styles single-post content with `#qodef-page-inner … > article p`,
   which carries an ID and therefore out-ranks any plain plugin selector. These
   are the only rules that need to reach that weight; they are deliberately
   collected here rather than scattered, and each one is a *neutralisation* so
   the rest of the sheet can stay at normal specificity.

   The heaviest theme selector in play is
   `.single-post #qodef-page-inner .qodef--single > article p + .wp-block-image`
   at (1 id, 3 classes, 2 elements). Every rule below therefore carries the
   prefix `.single-post #qodef-page-inner .article-content.editorial-scope`,
   which reaches four classes and wins without a single `!important`.

   `.editorial-scope` exists purely to supply that fourth class; FBE_Content
   adds it alongside `.article-content`.
   ========================================================================== */

/* Centre the measure.
   `.article-content > * { margin-inline: auto }` in §1 is not enough on its
   own: the theme sets `p, ul { margin: 1.4em 0 }`, and that shorthand also
   writes `margin-left/right: 0`. Without this rule paragraphs sit flush left
   while headings and figures centre — the column visibly breaks in two.
   Only the inline sides are set here, so the theme keeps owning the vertical
   paragraph rhythm. */
.single-post #qodef-page-inner .article-content.editorial-scope > * {
	margin-inline: auto;
}

/* Inside a module, spacing comes from `gap`. Zero the theme's blanket margins
   once so nothing downstream has to fight for them. `div` and `li` are in the
   list because core's flow-layout support also puts a 24px block margin on
   every child of a Group; that would stack on top of the gap. */
.single-post #qodef-page-inner .article-content.editorial-scope .editorial-module :is(p, ul, ol, li, div, h2, h3, h4, h5, h6, figure, blockquote, table, hr) {
	margin: 0;
}

/* Section whitespace. The theme gives `p + h2` a 1em lead; long-form needs a
   real gap between arguments. */
.single-post #qodef-page-inner .article-content.editorial-scope > h2 {
	font-size: var(--article-h2-size);
	margin-top: var(--article-space-xl);
	margin-bottom: var(--article-space-sm);
}

.single-post #qodef-page-inner .article-content.editorial-scope > h3 {
	font-size: var(--article-h3-size);
	margin-top: var(--article-space-lg);
	margin-bottom: var(--article-space-sm);
}

/* Three modules are a bare core block rather than a Group — Figure, System
   Gallery and Decision Matrix — so they carry no `.editorial-module` class and
   need the module rhythm spelled out. */
.single-post #qodef-page-inner .article-content.editorial-scope > :is(.editorial-figure, .editorial-system-gallery, .editorial-decision-matrix, .is-style-editorial-figure, .is-style-editorial-decision-matrix) {
	margin-block: var(--article-space-lg);
}

/* An H2 that opens the article, or follows a module, does not need the lead-in
   twice — the module already supplied it. */
.single-post #qodef-page-inner .article-content.editorial-scope > :first-child {
	margin-top: 0;
}

/* Headings inside modules follow the module's own scale, not the theme's. */
.single-post #qodef-page-inner .article-content.editorial-scope .editorial-module :is(h2, h3, h4, h5, h6) {
	line-height: var(--article-lh-heading);
	text-wrap: pretty;
}

/* The theme underlines every link in post content. Editorial links draw their
   own rule so the underline sits where the design wants it. */
.single-post #qodef-page-inner .article-content.editorial-scope .editorial-link {
	text-decoration: none;
}

/* On the two inverse surfaces the link's ink is stated outright rather than left
   to `inherit`, so no future theme link rule can put dark text on the dark
   panel, and hover dims instead of turning accent blue — the accent has too
   little contrast against black to read as a hover state. */
.single-post #qodef-page-inner .article-content.editorial-scope :is(.editorial-final-principle, .editorial-end-cta) .editorial-link {
	color: var(--article-inverse-ink);
}



/* =============================================================================
   3. PRIMITIVES
   ========================================================================== */

/* Every module is a vertical stack. Sub-stacks nest for tighter groupings. */
.editorial-module,
.editorial-stack {
	display: flex;
	flex-direction: column;
	gap: var(--article-space-sm);
}

.editorial-stack--tight {
	gap: var(--article-space-xs);
}

.editorial-stack--loose {
	gap: var(--article-space-md);
}

/* Rhythm: modules are the breaks between runs of text, so they own generous
   space on both sides and never touch a paragraph. */
.article-content > .editorial-module {
	margin-block: var(--article-space-lg);
}

/* --- Eyebrow ------------------------------------------------------------- */

.editorial-eyebrow,
.is-style-editorial-eyebrow {
	font-size: var(--article-eyebrow-size);
	font-weight: 700;
	/* Stated, not inherited. Display type carries negative tracking, and a label
	   nested inside it (the Pull Quote's attribution) was picking that up and
	   rendering tighter than every other label. */
	letter-spacing: normal;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--article-ink-muted);
}

/* --- Section index (the big "02") ---------------------------------------- */

.editorial-index {
	font-size: var(--article-index-size);
	font-weight: 800;
	line-height: var(--article-lh-heading);
	letter-spacing: var(--article-track-display);
	color: var(--article-ink-muted);
	font-variant-numeric: tabular-nums;
}

/* --- Statement / display -------------------------------------------------- */

.editorial-statement,
.is-style-editorial-statement {
	font-size: var(--article-statement-size);
	font-weight: 800;
	line-height: var(--article-lh-display);
	letter-spacing: var(--article-track-display);
	color: var(--article-ink);
	text-wrap: balance;
}

.editorial-display,
.is-style-editorial-display {
	font-size: var(--article-display-size);
	font-weight: 800;
	line-height: var(--article-lh-display);
	letter-spacing: var(--article-track-display);
	text-transform: uppercase;
	color: var(--article-ink);
	text-wrap: balance;
}

/* --- Lead-in sentence ----------------------------------------------------- */

.editorial-lead-in {
	font-size: var(--article-lead-in-size);
	font-weight: 300;
	line-height: 1.4;
	color: var(--article-ink);
	text-wrap: pretty;
}

/* --- Caption -------------------------------------------------------------- */

.editorial-caption,
.is-style-editorial-caption,
.article-content figcaption {
	font-size: var(--article-caption-size);
	line-height: 1.5;
	color: var(--article-ink-muted);
	text-align: start;
}

/* --- Numbered list -------------------------------------------------------
   `decimal-leading-zero` gives the 01 / 02 / 03 the brief asks for, generated
   rather than typed, so renumbering an item is impossible to get wrong. */

.editorial-numbered,
.is-style-editorial-numbered {
	font-size: inherit;
	list-style: none;
	padding-inline-start: 0;
	counter-reset: editorial-item;
	display: flex;
	flex-direction: column;
	gap: var(--article-space-sm);
}

.editorial-numbered,
.is-style-editorial-numbered {
	/* One place to retune the number column. */
	--article-num-width: 5.6rem;
}

.editorial-numbered > li,
.is-style-editorial-numbered > li {
	font-size: inherit;
	counter-increment: editorial-item;
	position: relative;
	margin: 0;
	line-height: var(--article-lh-body);
	text-wrap: pretty;

	/* Hanging indent: the first line starts at 0 so the number can sit in the
	   gutter, every wrapped line starts at the text column. */
	padding-inline-start: var(--article-num-width);
	text-indent: calc(var(--article-num-width) * -1);
}

/* The number rides the text's own baseline.
   It is an inline-block, not an absolutely positioned box: an inline-block sits
   on the line's baseline by definition, so a smaller number stays locked to the
   text however the two font sizes or the line-height change. Absolute
   positioning cannot do this — `top: 0` aligns the *boxes*, and because the
   half-leading of a 15px number differs from that of a 17px line, the digits
   floated ~2px above the words. */
.editorial-numbered > li::before,
.is-style-editorial-numbered > li::before {
	content: counter(editorial-item, decimal-leading-zero);
	display: inline-block;
	width: var(--article-num-width);
	text-indent: 0;
	font-size: var(--article-eyebrow-size);
	font-weight: 700;
	/* The one place `line-height: 1` is allowed: the content is `counter()`, so
	   it can only ever be digits — no diacritic can appear here. Keeping the box
	   tight also stops it adding height to the list item's own line. */
	line-height: 1;
	color: var(--article-ink-muted);
	font-variant-numeric: tabular-nums;
}

/* A bold lead word becomes the item's title and the rest becomes its note.

   The lead must stay *inline*. `display: block` looks like the obvious way to
   put the note on its own line, but a block box cannot share the item's first
   line with the counter — so the number is stranded on a line of its own above
   the title, which is neither this module's design (number in the gutter,
   beside the text) nor Framework's (number stacked above, padding zeroed).
   A block lead also inherits the li's negative `text-indent`, dragging the
   title a whole number-column left of the note beneath it.

   Breaking after the lead with a generated newline gets the line break without
   either problem: counter and title share line one, the note starts line two,
   and both sit in the text column. */
.editorial-numbered > li > strong:first-child {
	font-weight: 700;
	color: var(--article-ink);
}

.editorial-numbered > li > strong:first-child::after {
	content: "\A";
	white-space: pre;
}

/* --- Plain list ----------------------------------------------------------- */

.editorial-plain,
.is-style-editorial-plain {
	font-size: inherit;
	list-style: none;
	padding-inline-start: 0;
	display: flex;
	flex-direction: column;
	gap: var(--article-space-xs);
}

.editorial-plain > li,
.is-style-editorial-plain > li {
	font-size: inherit;
	margin: 0;
}

/* --- Body list -----------------------------------------------------------
   Ordinary `core/list` blocks — the ones with no editorial class, which is
   most of the lists in a normal article.

   Something in the stack renders them with `list-style-position: inside`, so
   the marker joins the first line box and every wrapped line falls back to the
   list's left edge, level with the bullet instead of with the text above it.
   Measured on a published post: line one started at x=36, line two at x=14.
   No authoring rule for it is visible to the CSSOM, so rather than hunt the
   source this states the intent outright, at a specificity nothing on the site
   can outrank.

   `outside` puts the marker in the gutter; the padding reserves that gutter so
   the marker cannot hang out of the reading measure. Wrapped lines then align
   with the first line, which is the whole point.

   The `:not()` keeps every editorial list out of it: those manage their own
   markers and would otherwise be beaten by this rule's four classes. */
.single-post #qodef-page-inner .article-content.editorial-scope :is(ul, ol):not([class*="editorial-"]) {
	list-style-position: outside;
	padding-inline-start: var(--article-list-indent);
	/* Never set margin-inline-start here. §1 centres the measure with
	   `margin-inline: auto`, and pinning the start margin to 0 cancels that
	   auto — the list then goes flush left and drifts out of the text column.
	   Invisible at narrow widths, where the measure fills the container. */
}

.single-post #qodef-page-inner .article-content.editorial-scope :is(ul, ol):not([class*="editorial-"]) > li {
	/* A wrapped item reads better with its own lines closer than the gap to the
	   next item, so leading stays on the body curve and spacing goes between. */
	line-height: var(--article-lh-body);
	margin-block: 0;
	text-wrap: pretty;
}

.single-post #qodef-page-inner .article-content.editorial-scope :is(ul, ol):not([class*="editorial-"]) > li + li {
	margin-block-start: var(--article-space-xs);
}

/* Nested lists indent from their parent's text column, not from the measure. */
.single-post #qodef-page-inner .article-content.editorial-scope :is(ul, ol):not([class*="editorial-"]) :is(ul, ol) {
	margin-block: var(--article-space-xs);
}

/* --- Rules ---------------------------------------------------------------- */

.editorial-rule,
.is-style-editorial-rule {
	border: 0;
	border-top: 1px solid var(--article-line);
	height: 0;
	width: 100%;
	max-width: none;
	opacity: 1;
}

.editorial-rule-top {
	border-top: 1px solid var(--article-line);
	padding-top: var(--article-space-sm);
}

.editorial-rule-block {
	border-top: 1px solid var(--article-line);
	border-bottom: 1px solid var(--article-line);
	padding-block: var(--article-space-md);
}

/* --- Link -----------------------------------------------------------------
   A faithful rebuild of einar's textual button
   (`.qodef-button.qodef-layout--textual`, einar-core.min.css) so an editorial
   CTA and a theme CTA are indistinguishable: 16px / 500 / uppercase / line-height 1,
   the theme's own arrow SVG leading the label, and a 5px gap.

   THE MOTION. einar clips the button box (`clip-path: inset(-.3em 0)`) and holds
   both the arrow *and* the label translated -10px at rest; on hover both return
   to 0. The clip hides the arrow's tail while it is pulled back, so what the eye
   reads is: the arrow grows to full length and pushes the label along, while its
   left end never leaves the alignment line.

   That version needs a span around the label to translate it. Editorial links
   are written by hand in a paragraph — there is no span, and Gutenberg would
   strip one. So the same three facts are produced by animating the arrow's
   width instead, with the mask pinned to its right edge: the visible tail grows
   from 25px to 35px, the arrowhead advances 10px, and the label — the next flex
   item — is pushed the same 10px. Left edge fixed, identical geometry, no markup.

   The earlier version translated only the arrow, which pushed it 10px *outside*
   the text column and left the label sitting still. Both wrong. */

.editorial-link {
	--editorial-arrow-rest: 2.5rem;
	--editorial-arrow-full: 3.5rem;

	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--article-link-size);
	font-weight: 500;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--article-ink);
	text-decoration: none;
}

.editorial-link::before {
	content: "";
	flex: none;
	width: var(--editorial-arrow-rest);
	height: 1.5rem;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2234.8962%22%20height%3D%2215%22%20viewBox%3D%220%200%2034.8962%2015%22%20fill%3D%22%23000%22%3E%3Crect%20y%3D%226.25%22%20width%3D%2233%22%20height%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%2029.5837%203.64%20C%2027.3962%201.68%2025.8337%200%2025.8337%200%20h%20-0.9375%20a%2060.295%2060.295%200%200%200%203.4375%205.04%20L%2029.8962%207%20L%2028.3337%208.96%20A%2060.295%2060.295%200%200%200%2024.8963%2014%20h%200.9375%20s%201.5625%20-1.68%203.75%20-3.64%20a%2013.2224%2013.2224%200%200%201%205.3125%20-3.08%20V%206.72%20A%2013.2224%2013.2224%200%200%201%2029.5837%203.64%20Z%22%2F%3E%3C%2Fsvg%3E") no-repeat right center / var(--editorial-arrow-full) 1.5rem;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2234.8962%22%20height%3D%2215%22%20viewBox%3D%220%200%2034.8962%2015%22%20fill%3D%22%23000%22%3E%3Crect%20y%3D%226.25%22%20width%3D%2233%22%20height%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M%2029.5837%203.64%20C%2027.3962%201.68%2025.8337%200%2025.8337%200%20h%20-0.9375%20a%2060.295%2060.295%200%200%200%203.4375%205.04%20L%2029.8962%207%20L%2028.3337%208.96%20A%2060.295%2060.295%200%200%200%2024.8963%2014%20h%200.9375%20s%201.5625%20-1.68%203.75%20-3.64%20a%2013.2224%2013.2224%200%200%201%205.3125%20-3.08%20V%206.72%20A%2013.2224%2013.2224%200%200%201%2029.5837%203.64%20Z%22%2F%3E%3C%2Fsvg%3E") no-repeat right center / var(--editorial-arrow-full) 1.5rem;
	transition: width 0.42s cubic-bezier(0.44, 0.73, 0.35, 0.97);
}

.editorial-link:hover::before,
.editorial-link:focus-visible::before {
	width: var(--editorial-arrow-full);
}

/* Keyboard focus needs to be seen, and the arrow sliding is not enough on its
   own. The accent is the site's only highlight colour, so it does this job. */
.editorial-link:focus-visible {
	outline: 2px solid var(--article-accent);
	outline-offset: 0.4em;
}

/* --- Surfaces ------------------------------------------------------------- */

.editorial-surface,
.is-style-editorial-surface {
	background-color: var(--article-surface-alt);
	padding: var(--article-space-md);
}

.editorial-inverse,
.is-style-editorial-inverse {
	background-color: var(--article-inverse-bg);
	color: var(--article-inverse-ink);
	padding: var(--article-space-md);
}

.editorial-inverse :is(h2, h3, h4, h5, h6, p, li, strong, cite),
.is-style-editorial-inverse :is(h2, h3, h4, h5, h6, p, li, strong, cite) {
	color: inherit;
}

.editorial-inverse .editorial-eyebrow,
.is-style-editorial-inverse .editorial-eyebrow {
	color: inherit;
	opacity: 0.6;
}

.editorial-inverse .editorial-link,
.is-style-editorial-inverse .editorial-link {
	color: inherit;
}

/* =============================================================================
   4. MODULES
   ========================================================================== */

/* --- A. CORE CONTENT ------------------------------------------------------ */

/* 01 · Lede */
.editorial-lede,
.is-style-editorial-lede {
	font-size: var(--article-lede-size);
	font-weight: 300;
	line-height: 1.45;
	color: var(--article-ink);
	text-wrap: pretty;
}

/* 02 · Theory Section — the base structure of the whole system. No surface,
   no frame: a hairline, a number, and a lot of air. */
.editorial-theory {
	gap: var(--article-space-md);
	border-top: 1px solid var(--article-line);
	padding-top: var(--article-space-sm);
}

.article-content > .editorial-theory {
	margin-block-start: var(--article-space-xl);
}

/* The section number is set at the heading's own size and colour-dropped: the
   "mỏ neo thị giác" the FreshBrand design system asks for — a large muted figure
   carrying the block, not a small label above it. Matching the heading's size
   and line-height is also what puts the two on a shared baseline once the number
   is hung in the margin below. */
.editorial-theory .editorial-index {
	font-size: var(--fluid-36-56, 4rem);
	line-height: var(--article-lh-heading);
	margin-bottom: calc(var(--article-space-xs) * -1);
}

/* Wide viewports only: the measure leaves ~190px of margin either side, so the
   number moves out of the text column into it. The heading then starts on the
   column edge and the number anchors the section from outside — the asymmetric
   split the design system prefers over a stacked label. Narrower than this there
   is no margin to hang into, so it stacks as before. */
@media (min-width: 75em) {

	.editorial-theory {
		position: relative;
	}

	.editorial-theory .editorial-index {
		position: absolute;

		/* Not `top: 0`. An absolutely positioned box resolves its offsets
		   against the containing block's *padding* box, so `0` sits above the
		   module's own `padding-top` — the number floated a full
		   `--article-space-sm` (~25px measured) higher than the heading it is
		   supposed to sit level with. Repeating the same token here cancels
		   that exactly and cannot drift from it.

		   Box alignment is only enough because the two share their metrics:
		   the rule above deliberately gives the number the heading's font-size
		   and line-height, so equal box tops mean equal baselines. Change one
		   of those and this has to be revisited — see the numbered list, where
		   differing sizes are why its counter is a baseline-aligned
		   inline-block rather than an absolutely positioned box. */
		top: var(--article-space-sm);

		/* The gap rides in `inset`, not `margin`: §2 zeroes every margin inside
		   a module at a weight this rule cannot reach. */
		inset-inline-end: calc(100% + var(--article-space-md));
		text-align: end;
	}
}

.editorial-theory .editorial-thesis {
	font-size: var(--article-lead-in-size);
	font-weight: 300;
	line-height: 1.4;
	color: var(--article-ink);
	max-width: 56rem;
	text-wrap: pretty;
}

.editorial-theory__body {
	display: flex;
	flex-direction: column;
	gap: var(--article-space-sm);
	line-height: var(--article-lh-body);
}

/* 03 · Key Takeaway — the one place a secondary surface earns its keep. */
.editorial-takeaway {
	background-color: var(--article-surface-alt);
	padding: var(--article-space-lg);
	gap: var(--article-space-md);
}

.editorial-takeaway .editorial-statement {
	max-width: 24ch;
}

/* --- B. THINKING / FRAMEWORK ---------------------------------------------- */

/* 04 · Framework */
.editorial-framework {
	border-top: 2px solid var(--article-ink);
	padding-top: var(--article-space-sm);
	gap: var(--article-space-md);
}

.editorial-framework__items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--article-space-lg);
	row-gap: var(--article-space-md);
}

.editorial-framework__items > li {
	border-top: 1px solid var(--article-line);
	padding-top: var(--article-space-sm);
	padding-inline-start: 0;
	text-indent: 0;
}

.editorial-framework__items > li::before {
	display: block;
	width: auto;
	margin-bottom: var(--article-space-xs);
}

.editorial-framework__items > li > strong:first-child {
	font-size: var(--article-lead-in-size);
	font-weight: 700;
	margin-bottom: 0.3em;
}

/* 05 · Principle — a signature module. Very large type, very little of it. */
.editorial-principle {
	border-top: 1px solid var(--article-line);
	border-bottom: 1px solid var(--article-line);
	padding-block: var(--article-space-lg);
	gap: var(--article-space-md);
}

.editorial-principle .editorial-eyebrow {
	color: var(--article-accent);
}

.editorial-principle .editorial-display {
	max-width: 16ch;
}

.editorial-principle .editorial-note {
	max-width: 48rem;
	color: var(--article-ink-secondary);
	line-height: var(--article-lh-body);
}

/* 06 · Mental Model — relationships between concepts, drawn in type. */
.editorial-model {
	gap: var(--article-space-md);
}

.editorial-model__flow {
	list-style: none;
	padding-inline-start: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

.editorial-model__flow > li {
	margin: 0;
	font-size: var(--article-lead-in-size);
	font-weight: 700;
	line-height: 1.2;
	color: var(--article-ink);
}

/* A hairline, not a "↓". The site is built on rules; a stray arrow glyph reads
   as a typo at this size, and the sequence is already carried by reading order. */
.editorial-model__flow > li + li::before {
	content: "";
	display: block;
	width: 1px;
	height: var(--article-space-md);
	margin-block: var(--article-space-xs);
	margin-inline-start: 0.15em;
	background-color: var(--article-line);
}

/* Hierarchy variant: Brand ├ Identity ├ Behaviour └ Experience */
.editorial-model--tree .editorial-model__flow {
	gap: 0;
}

.editorial-model--tree .editorial-model__flow > li + li {
	position: relative;
	padding-inline-start: var(--article-space-md);
	padding-top: var(--article-space-xs);
	font-weight: 400;
	border-inline-start: 1px solid var(--article-line);
	margin-inline-start: 0.4rem;
}

.editorial-model--tree .editorial-model__flow > li + li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: calc(var(--article-space-xs) + 0.7em);
	width: var(--article-space-sm);
	height: 1px;
	padding: 0;
	background-color: var(--article-line);
}

.editorial-model--tree .editorial-model__flow > li:last-child {
	border-inline-start-color: transparent;
	box-shadow: none;
}

/* 07 · Process — horizontal on desktop, vertical on mobile. */
.editorial-process {
	border-top: 2px solid var(--article-ink);
	padding-top: var(--article-space-sm);
	gap: var(--article-space-md);
}

.editorial-process__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: var(--article-space-md);
}

.editorial-process__steps > li {
	padding-inline-start: 0;
	text-indent: 0;
	border-top: 1px solid var(--article-line);
	padding-top: var(--article-space-sm);
}

.editorial-process__steps > li::before {
	display: block;
	width: auto;
	margin-bottom: var(--article-space-xs);
}

.editorial-process__steps > li > strong:first-child {
	font-size: var(--article-lead-in-size);
	margin-bottom: 0.3em;
}

/* --- C. EXPERIENCE / PRACTICE --------------------------------------------- */

/* 08 · Agency POV — matches the rule the site already uses for `.quote`. */
.editorial-pov {
	border-inline-start: 3px solid var(--article-accent);
	padding-inline-start: var(--article-space-md);
	gap: var(--article-space-sm);
}

.editorial-pov .editorial-lead-in {
	max-width: 44rem;
}

/* 09 · Field Note — an annotation, not an announcement. */
.editorial-field-note {
	display: grid;
	grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
	column-gap: var(--article-space-md);
	row-gap: var(--article-space-xs);
	border-top: 1px solid var(--article-line);
	padding-top: var(--article-space-sm);
	color: var(--article-ink-secondary);

	/* Same label-beside-prose pairing as Key Term, same fix: align the two on
	   their baselines, not on the top of the row. */
	align-items: baseline;
}

.editorial-field-note > .editorial-eyebrow {
	grid-column: 1;
}

.editorial-field-note > :not(.editorial-eyebrow) {
	grid-column: 2;
	font-size: var(--article-caption-size);
	line-height: 1.6;
}

/* 10 · Mini Case */
.editorial-mini-case {
	border-top: 2px solid var(--article-ink);
	padding-top: var(--article-space-sm);
	gap: var(--article-space-md);
}

.editorial-mini-case__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--article-space-lg);
	row-gap: var(--article-space-md);
}

.editorial-entry {
	display: flex;
	flex-direction: column;
	gap: var(--article-space-xs);
	line-height: var(--article-lh-body);
}

/* 11 · Example */
.editorial-example {
	border-top: 1px solid var(--article-line);
	border-bottom: 1px solid var(--article-line);
	padding-block: var(--article-space-md);
	gap: var(--article-space-sm);
}

/* 12 · Common Mistake */
.editorial-mistake {
	border-top: 2px solid var(--article-ink);
	padding-top: var(--article-space-sm);
	gap: var(--article-space-md);
}

.editorial-mistake__claim {
	font-size: var(--article-lede-size);
	font-weight: 300;
	line-height: 1.35;
	color: var(--article-ink-muted);
	max-width: 28ch;
	text-wrap: pretty;
}

/* 13 · Good / Bad Comparison — separated by weight and colour, never by
   dashboard red and green. */
.editorial-comparison {
	gap: var(--article-space-md);
}

.editorial-comparison__columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--article-space-lg);
	row-gap: var(--article-space-md);
}

.editorial-comparison__side {
	display: flex;
	flex-direction: column;
	gap: var(--article-space-sm);
	border-top: 1px solid var(--article-line);
	padding-top: var(--article-space-sm);
}

.editorial-comparison__side--strong {
	border-top-color: var(--article-ink);
	border-top-width: 2px;
}

.editorial-comparison__side li {
	line-height: 1.4;
	color: var(--article-ink-muted);
}

.editorial-comparison__side--strong li {
	color: var(--article-ink);
	font-weight: 500;
}

/* --- D. VISUAL CONTENT ---------------------------------------------------- */

/* 14 · Standard Figure */
.editorial-figure,
.is-style-editorial-figure {
	display: flex;
	flex-direction: column;
	gap: var(--article-space-xs);
}

.editorial-figure figcaption,
.is-style-editorial-figure figcaption {
	border-top: 1px solid var(--article-line);
	padding-top: var(--article-space-xs);
	font-size: var(--article-caption-size);
	color: var(--article-ink-muted);
	max-width: 60ch;
}

/* 15 · Annotated Image */
.editorial-annotated-image {
	gap: var(--article-space-sm);
}

.editorial-annotated-image .editorial-numbered {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	column-gap: var(--article-space-md);
	row-gap: var(--article-space-xs);
	border-top: 1px solid var(--article-line);
	padding-top: var(--article-space-sm);
}

.editorial-annotated-image .editorial-numbered {
	--article-num-width: 4rem;
}

.editorial-annotated-image .editorial-numbered > li {
	font-size: var(--article-caption-size);
	color: var(--article-ink-secondary);
}

/* 16 · Before / After */
.editorial-before-after {
	gap: var(--article-space-md);
}

.editorial-before-after__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--article-space-md);
}

.editorial-before-after__side {
	display: flex;
	flex-direction: column;
	gap: var(--article-space-xs);
}

.editorial-before-after__side figure {
	margin: 0;
}

.editorial-before-after__side img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* 17 · Visual Breakdown */
.editorial-breakdown {
	gap: var(--article-space-sm);
}

.editorial-breakdown__levels {
	list-style: none;
	padding-inline-start: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	counter-reset: editorial-level;
}

.editorial-breakdown__levels > li {
	counter-increment: editorial-level;
	margin: 0;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--article-space-md);
	border-top: 1px solid var(--article-line);
	padding-block: var(--article-space-sm);
	font-size: var(--article-lead-in-size);
	font-weight: 700;
	line-height: 1.2;
}

.editorial-breakdown__levels > li::before {
	content: counter(editorial-level, decimal-leading-zero);
	font-size: var(--article-eyebrow-size);
	font-weight: 700;
	color: var(--article-ink-muted);
	font-variant-numeric: tabular-nums;
	order: 2;
}

.editorial-breakdown__levels > li:last-child {
	border-bottom: 1px solid var(--article-line);
}

/* 18 · Gallery / System View */
.editorial-system-gallery.wp-block-gallery {
	gap: var(--article-space-sm);
}

.editorial-system-gallery.wp-block-gallery > figcaption {
	flex-basis: 100%;
	border-top: 1px solid var(--article-line);
	padding-top: var(--article-space-xs);
	margin-top: var(--article-space-xs);
	font-size: var(--article-caption-size);
	color: var(--article-ink-muted);
	text-align: start;
}

/* --- E. TEXT RHYTHM ------------------------------------------------------- */

/* 19 · Pull Quote — no quote mark, no surface, no border. Just scale. */
/* The scale sits on the blockquote and the paragraph inherits it, rather than
   the other way round. Core styles the quote block's paragraph directly in the
   editor canvas, and a rule on the paragraph loses there even at high
   specificity; a rule on the block itself wins in both contexts. */
.editorial-pullquote,
.is-style-editorial-pullquote {
	border: 0;
	padding: 0;
	background: none;
	text-align: start;
	font-size: var(--article-statement-size);
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: var(--article-track-display);
	color: var(--article-ink);
}

/* The quote paragraph simply inherits the block's scale. Restating it here
   would also capture the attribution paragraph, which carries `.editorial-eyebrow`
   and must keep its own size. */
.editorial-pullquote p:not(.editorial-eyebrow),
.is-style-editorial-pullquote p:not(.editorial-eyebrow) {
	/* Inheritance does not reach here: the theme's `html p { line-height: 1.618 }`
	   applies to this paragraph directly and beats the value on the block, so a
	   42px quote was being leaded like body copy. Stated outright instead. */
	line-height: var(--article-lh-display);
	text-wrap: balance;
}

/* Core draws a large decorative quote glyph on the quote block in the editor
   canvas. The brief is explicit: no quote icon. */
.editorial-pullquote::before,
.editorial-pullquote::after,
.is-style-editorial-pullquote::before,
.is-style-editorial-pullquote::after {
	content: none;
}

/* Attribution. The patterns use an eyebrow paragraph rather than the block's
   native citation field, because the canvas renders `cite` inside a contenteditable
   RichText whose type cannot be overridden from a stylesheet — it would inherit
   the display size while writing. This rule keeps a hand-added citation correct
   on the front end. */
.editorial-pullquote :is(cite, .wp-block-pullquote__citation),
.is-style-editorial-pullquote :is(cite, .wp-block-pullquote__citation) {
	display: block;
	margin-top: var(--article-space-sm);
	font-size: var(--article-eyebrow-size);
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--article-ink-muted);
}

/* 20 · Definition */
.editorial-definition {
	border-top: 1px solid var(--article-line);
	border-bottom: 1px solid var(--article-line);
	padding-block: var(--article-space-sm);
	gap: var(--article-space-xs);
}

.editorial-definition__term {
	font-size: var(--article-lead-in-size);
	font-weight: 700;
	line-height: 1.2;
	color: var(--article-ink);
}

.editorial-definition__body {
	line-height: var(--article-lh-body);
	color: var(--article-ink-secondary);
}

/* 21 · Key Term — lighter than a definition. */
.editorial-term {
	display: grid;
	grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
	column-gap: var(--article-space-md);
	row-gap: var(--article-space-xs);
	border-top: 1px solid var(--article-line);
	padding-top: var(--article-space-xs);

	/* The label and the explanation share row 1, so their first baselines are
	   aligned to each other rather than their boxes to the top of the row. A
	   15px label and 17px prose have different ascents; without this the label
	   rides visibly high against the line of text beside it. */
	align-items: baseline;
}

.editorial-term .editorial-eyebrow {
	grid-column: 1;
	grid-row: 1;
}

/* The term itself starts row 2 of the label column. The explanation stays in
   row 1 and is left to run past it — it must not stretch the row and drag the
   term down, so it is pulled out of the row's baseline group by spanning. */
.editorial-term__name {
	grid-column: 1;
	grid-row: 2;
	font-weight: 700;
	line-height: 1.3;
	align-self: baseline;
}

.editorial-term__body {
	grid-column: 2;
	grid-row: 1;
	line-height: var(--article-lh-body);
	color: var(--article-ink-secondary);
}

/* 22 · Data Point */
.editorial-data-point {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	column-gap: var(--article-space-lg);
	row-gap: var(--article-space-sm);
	align-items: start;
	border-top: 1px solid var(--article-line);
	padding-top: var(--article-space-md);
}

.editorial-data-point__value {
	grid-column: 1;
	grid-row: 1 / span 3;
	font-size: var(--article-number-size);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: var(--article-ink);
	font-variant-numeric: tabular-nums;
}

.editorial-data-point__label {
	grid-column: 2;
}

.editorial-data-point__body {
	grid-column: 2;
	line-height: var(--article-lh-body);
	color: var(--article-ink-secondary);
}

.editorial-data-point__source {
	grid-column: 2;
	font-size: var(--article-caption-size);
	color: var(--article-ink-muted);
}

/* --- F. DECISION / ACTION ------------------------------------------------- */

/* 23 · Checklist — numbers, not checkboxes. */
.editorial-checklist {
	border-top: 2px solid var(--article-ink);
	padding-top: var(--article-space-sm);
	gap: var(--article-space-md);
}

.editorial-checklist__items {
	gap: 0;
}

.editorial-checklist__items > li {
	border-top: 1px solid var(--article-line);
	padding-block: var(--article-space-sm);
}

.editorial-checklist__items > li:last-child {
	border-bottom: 1px solid var(--article-line);
}

/* 24 · Diagnostic Questions */
.editorial-diagnostic {
	gap: var(--article-space-md);
}

.editorial-diagnostic__questions {
	list-style: none;
	padding-inline-start: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.editorial-diagnostic__questions > li {
	margin: 0;
	border-top: 1px solid var(--article-line);
	padding-block: var(--article-space-sm);
	font-size: var(--article-lede-size);
	font-weight: 300;
	line-height: 1.3;
	color: var(--article-ink);
	text-wrap: balance;
}

.editorial-diagnostic__questions > li:last-child {
	border-bottom: 1px solid var(--article-line);
}

/* 25 · Decision Matrix */
figure.editorial-decision-matrix,
figure.is-style-editorial-decision-matrix {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.editorial-decision-matrix table,
.is-style-editorial-decision-matrix table {
	width: 100%;
	min-width: 46rem;
	border-collapse: collapse;
	border: 0;
}

/* einar borders every `tr` (--qode-border-color). The matrix is ruled by its
   own hairlines, so the row boxes are cleared. */
.editorial-decision-matrix :is(tr, thead, tbody, tfoot),
.is-style-editorial-decision-matrix :is(tr, thead, tbody, tfoot) {
	border: 0;
}

.editorial-decision-matrix :is(th, td),
.is-style-editorial-decision-matrix :is(th, td) {
	border: 0;
	border-bottom: 1px solid var(--article-line);
	padding: var(--article-space-xs) var(--article-space-sm);
	text-align: start;
	vertical-align: top;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.editorial-decision-matrix thead :is(th, td),
.is-style-editorial-decision-matrix thead :is(th, td) {
	font-size: var(--article-eyebrow-size);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--article-ink-muted);
	border-bottom-color: var(--article-ink);
}

.editorial-decision-matrix :is(thead, tbody) :is(th, td):not(:first-child),
.is-style-editorial-decision-matrix :is(thead, tbody) :is(th, td):not(:first-child) {
	text-align: center;
	width: 16rem;
	text-wrap: balance;
}

.editorial-decision-matrix tbody td:first-child,
.is-style-editorial-decision-matrix tbody td:first-child {
	font-weight: 500;
	color: var(--article-ink);
}

/* 26 · Do / Don't */
.editorial-do-dont {
	gap: var(--article-space-md);
}

.editorial-do-dont__columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--article-space-lg);
	row-gap: var(--article-space-md);
}

.editorial-do-dont__side {
	display: flex;
	flex-direction: column;
	gap: var(--article-space-sm);
	border-top: 2px solid var(--article-ink);
	padding-top: var(--article-space-sm);
}

.editorial-do-dont__side--dont {
	border-top-width: 1px;
	border-top-color: var(--article-line);
}

.editorial-do-dont__side--dont li {
	color: var(--article-ink-muted);
}

/* --- G. NAVIGATION -------------------------------------------------------- */

/* 27 · Article Contents — styling only. The brief puts this module in the
   Elementor Single Post Template, so nothing here assumes it is in content. */
.article-toc {
	display: flex;
	flex-direction: column;
	gap: var(--article-space-sm);
	font-size: var(--article-caption-size);
}

.article-toc__list {
	list-style: none;
	padding-inline-start: 0;
	counter-reset: editorial-toc;
	display: flex;
	flex-direction: column;
	gap: var(--article-space-xs);
}

.article-toc__list > li {
	counter-increment: editorial-toc;
	margin: 0;
}

.article-toc__list a {
	display: flex;
	gap: var(--article-space-sm);
	text-decoration: none;
	color: var(--article-ink-muted);
	transition: color 0.3s var(--ease-smooth, ease);
}

.article-toc__list a::before {
	content: counter(editorial-toc, decimal-leading-zero);
	font-variant-numeric: tabular-nums;
}

.article-toc__list a:hover,
.article-toc__list li.is-active > a {
	color: var(--article-ink);
}

@media (min-width: 64.0625em) {
	.article-toc--sticky {
		position: sticky;
		top: var(--article-space-lg);
	}
}

/* 28 · Section Index */
.editorial-section-index {
	border-top: 1px solid var(--article-line);
	padding-top: var(--article-space-sm);
	gap: var(--article-space-sm);
}

.editorial-section-index .editorial-numbered > li {
	line-height: 1.4;
}

.editorial-section-index a {
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid transparent;
}

.editorial-section-index a:hover {
	border-bottom-color: currentColor;
}

/* --- H. TRUST / SOURCE ---------------------------------------------------- */

/* 29 · Source Note */
.editorial-source {
	border-top: 1px solid var(--article-line);
	padding-top: var(--article-space-xs);
	gap: var(--article-space-xs);
	font-size: var(--article-caption-size);
	line-height: 1.5;
	color: var(--article-ink-muted);
}

.editorial-source__ref {
	color: var(--article-ink);
	font-weight: 500;
}

/* 30 · Further Reading */
.editorial-further-reading {
	border-top: 2px solid var(--article-ink);
	padding-top: var(--article-space-sm);
	gap: var(--article-space-md);
}

.editorial-further-reading .editorial-numbered {
	gap: 0;
}

.editorial-further-reading .editorial-numbered > li {
	border-top: 1px solid var(--article-line);
	padding-block: var(--article-space-sm);
}

.editorial-further-reading .editorial-numbered > li:last-child {
	border-bottom: 1px solid var(--article-line);
}

/* --- I. CONCLUSION -------------------------------------------------------- */

/* 31 · Key Lessons */
.editorial-key-lessons {
	border-top: 2px solid var(--article-ink);
	padding-top: var(--article-space-sm);
	gap: var(--article-space-md);
}

.editorial-key-lessons .editorial-numbered {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--article-space-lg);
	row-gap: var(--article-space-md);
}

.editorial-key-lessons .editorial-numbered > li {
	padding-inline-start: 0;
	text-indent: 0;
	font-size: var(--article-lead-in-size);
	font-weight: 300;
	line-height: 1.35;
}

.editorial-key-lessons .editorial-numbered > li::before {
	display: block;
	width: auto;
	margin-bottom: var(--article-space-xs);
}

/* 32 · Final Principle — the article's last full stop. */
.editorial-final-principle {
	background-color: var(--article-inverse-bg);
	color: var(--article-inverse-ink);
	padding: var(--article-space-xl) var(--article-space-lg);
	gap: var(--article-space-md);
}

.editorial-final-principle :is(p, h2, h3, .editorial-eyebrow, .editorial-display) {
	color: inherit;
}

.editorial-final-principle .editorial-eyebrow {
	opacity: 0.6;
}

.editorial-final-principle .editorial-statement {
	max-width: 20ch;
	font-weight: 300;
}

/* 33 · Next Step */
.editorial-next-step {
	border-top: 2px solid var(--article-ink);
	padding-top: var(--article-space-sm);
	gap: var(--article-space-sm);
}

.editorial-next-step .editorial-lead-in {
	max-width: 40rem;
	font-weight: 700;
}

/* --- J. COMMERCIAL -------------------------------------------------------- */

/* 34 · Contextual CTA — earns its place by being about the section it sits in. */
.editorial-contextual-cta {
	border-top: 1px solid var(--article-line);
	border-bottom: 1px solid var(--article-line);
	padding-block: var(--article-space-md);
	gap: var(--article-space-sm);
	align-items: flex-start;
}

.editorial-contextual-cta .editorial-lead-in {
	max-width: 42rem;
	font-weight: 700;
}

.editorial-contextual-cta .editorial-body {
	max-width: 52rem;
	color: var(--article-ink-secondary);
	line-height: var(--article-lh-body);
}

/* 35 · End-of-Article CTA */
.editorial-end-cta {
	background-color: var(--article-inverse-bg);
	color: var(--article-inverse-ink);
	padding: var(--article-space-xl) var(--article-space-lg);
	gap: var(--article-space-md);
	align-items: flex-start;
}

.editorial-end-cta :is(p, h2, h3, .editorial-eyebrow, .editorial-statement, .editorial-link) {
	color: inherit;
}

.editorial-end-cta .editorial-eyebrow {
	opacity: 0.6;
}

.editorial-end-cta .editorial-statement {
	max-width: 20ch;
	font-weight: 300;
}

.editorial-end-cta .editorial-body {
	max-width: 52rem;
	line-height: var(--article-lh-body);
	opacity: 0.8;
}

/* =============================================================================
   5. RESPONSIVE

   Breakpoints are the theme's own (sass/_mixins.scss): lg 849px, md 700px,
   sm 549px — so modules break at the same widths as the rest of the site.
   ========================================================================== */

@media (max-width: 53.0625em) { /* lg — 849px */

	.editorial-framework__items,
	.editorial-mini-case__grid,
	.editorial-comparison__columns,
	.editorial-do-dont__columns,
	.editorial-key-lessons .editorial-numbered,
	.editorial-before-after__pair {
		grid-template-columns: minmax(0, 1fr);
	}

	.editorial-takeaway,
	.editorial-final-principle,
	.editorial-end-cta {
		padding: var(--article-space-md);
	}

	.editorial-data-point {
		grid-template-columns: minmax(0, 1fr);
	}

	.editorial-data-point__value {
		grid-column: 1;
		grid-row: auto;
	}

	.editorial-data-point :is(.editorial-data-point__label, .editorial-data-point__body, .editorial-data-point__source) {
		grid-column: 1;
	}
}

@media (max-width: 48em) { /* md — 700px */

	.editorial-field-note,
	.editorial-term {
		grid-template-columns: minmax(0, 1fr);
	}

	.editorial-field-note > :not(.editorial-eyebrow),
	.editorial-term__name,
	.editorial-term__body {
		grid-column: 1;
		grid-row: auto;
	}

	.editorial-breakdown__levels > li {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--article-space-xs);
	}

	.editorial-breakdown__levels > li::before {
		order: -1;
	}
}

@media (max-width: 34.3125em) { /* sm — 549px */

	.editorial-numbered,
	.is-style-editorial-numbered {
		--article-num-width: 4rem;
	}

	.editorial-pov {
		padding-inline-start: var(--article-space-sm);
	}
}

/* =============================================================================
   6. PRINT / REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.editorial-link::before,
	.article-toc__list a {
		transition: none;
	}

	.editorial-link::before {
		width: var(--editorial-arrow-full);
	}
}