. Nothing here can reach Header 47, Footer 55, Homepage 68, CRM 77 or any other document. No positional contracts: no :nth-child, no :last-child, no DOM-position body.elementor-page-105s, no generated gc-* / s-* classes. Where a native widget's own stable class is needed it is used only as a descendant of #bts-article-template and is named in a comment. TOKEN LITERALS Document Custom CSS is emitted outside Elementor's v4 variable resolution, so approved token values are duplicated here as literals. Coupling: #1E1B16 e-gv-634b17e bts-color-ink #6B6459 e-gv-45cb959 bts-color-mid #DED8CB e-gv-ee9948b bts-color-hairline #F4F1EA e-gv-3c069e1 bts-color-paper #FBF9F4 e-gv-e8b6962 bts-color-panel #BE7A2E e-gv-f7d262f bts-color-gap #8A5314 e-gv-14116d5 bts-color-gap-text #3F6A55 e-gv-4e6505a bts-color-improved #31506B e-gv-4b7a0bd bts-color-evidence (the approved focus ring) Libre Franklin e-gv-79dca91 bts-font-primary IBM Plex Mono e-gv-9e36e21 bts-font-mono 1.0625rem e-gv-d860aff body · 0.9rem e-gv-7cad03d body-small 0.72rem e-gv-600d507 mono · 0.78rem e-gv-822cb44 caption clamp(1.35rem,2.4vw,1.85rem) e-gv-02f38ce h2 · 1.35rem e-gv-c05c7b7 h3 1.35rem e-gv-3138cf1 quote · 960px e-gv-be199f3 bts-width-wide FROZEN THRESHOLDS — implemented here, independent of the global Elementor breakpoints (Tablet 1024 / Mobile 767), because the frozen Article design transitions elsewhere: >= 1080px viewport two-column shell; rail Related offer visible < 1080px viewport one-column shell; rail Related offer suppressed (the end CTA is the single conversion route) >= 900px viewport Related insights three columns < 900px viewport Related insights one column <= 767px viewport data table becomes labelled row blocks Two body-flow figures use a container query on the reading column instead of a viewport query, because their real constraint is the 680px measure, not the viewport. Precedent: BTS — CRM Page (record 78) already uses container-type on this install. ========================================================================== */ /* Phil review correction: align the breadcrumb labels on one text baseline. */ #bts-article-template #bts-article-breadcrumb { align-items: baseline; } /* ── 1 · ARTICLE SHELL ───────────────────────────────────────────────────── Constrained default: ONE column with the rail in normal flow BEFORE the reading column. That is DOM order and it is the approved constrained reader order — no duplicate desktop/mobile trees exist. The rail carries its own inline-start padding rather than a column-gap, so when the behaviour record removes an empty rail the grid collapses to a normal left-aligned reading column with no empty track and no orphan gap. */ #bts-article-template #bts-article-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; } #bts-article-template #bts-article-rail { grid-column: auto; grid-row: auto; align-self: auto; min-width: 0; padding-inline-start: 0; } #bts-article-template #bts-article-reading { grid-column: auto; grid-row: auto; min-width: 0; max-width: min(72ch, 680px); /* Container for the two body-flow figures below. */ container-type: inline-size; container-name: btsarticle; } /* Frozen desktop shell at 1080px: reading column FIRST visually, rail second, with DOM order unchanged. One shared rail wrapper. */ @media (min-width: 1080px) { #bts-article-template #bts-article-shell { grid-template-columns: minmax(0, min(72ch, 680px)) minmax(0, 1fr); gap: 0; } #bts-article-template #bts-article-reading { grid-column: 1; grid-row: 1; } #bts-article-template #bts-article-rail { grid-column: 2; grid-row: 1; padding-inline-start: 64px; /* Sticky needs a containing block taller than itself. */ align-self: stretch; } } /* ── 2 · ARTICLE RAIL ────────────────────────────────────────────────────── ONE wrapper owns sticky/static as a unit. Sticky is applied only when the behaviour record has MEASURED real eligibility and added the class. With JavaScript unavailable, or the rail too tall, the rail stays static, unclipped and fully reachable. It never scrolls internally: no overflow, no max-height, ever. */ #bts-article-template #bts-article-rail-inner { position: static; overflow: visible; } #bts-article-template #bts-article-rail-inner.bts-article-rail-sticky { position: sticky; top: 48px; } /* Below the frozen 1080px shell the rail Related offer is a duplicate conversion route: the end CTA already carries it. */ #bts-article-template #bts-article-offer { display: none; } @media (min-width: 1080px) { #bts-article-template #bts-article-offer { display: block; } } /* ── 3 · ON THIS PAGE ────────────────────────────────────────────────────── The list and its anchors are generated by the behaviour record from real H2 elements in the single Post Content flow. The 14px inline-start padding on the list is load-bearing: it gives the current-section marker a gutter that exists at EVERY width, so the marker never sits outside the rail and can never produce horizontal overflow at constrained widths. */ #bts-article-template #bts-article-toc-list { padding-inline-start: 14px; } #bts-article-template #bts-article-toc-list ul { list-style: none; margin: 0; padding: 0; } #bts-article-template #bts-article-toc-list li { margin: 0; padding: 0; border-block-end: 1px solid #DED8CB; } /* Class applied by the behaviour record — never :last-child. */ #bts-article-template #bts-article-toc-list li.bts-article-toc-last { border-block-end: 0; } #bts-article-template .bts-article-toclink { position: relative; display: flex; align-items: center; min-height: 44px; padding-block: 12px; padding-inline: 0; font-family: "Libre Franklin", sans-serif; font-weight: 400; font-size: 0.95rem; line-height: 1.4; color: #1E1B16; text-decoration: none; } #bts-article-template .bts-article-toclink:hover { text-decoration: underline; text-underline-offset: 3px; } /* Current section. The accessible state is aria-current="location" set by the behaviour record; weight and the ink tick are redundant non-colour cues. */ #bts-article-template .bts-article-toclink[aria-current="location"] { font-weight: 600; } #bts-article-template .bts-article-toclink[aria-current="location"]::before { content: ""; position: absolute; inset-inline-start: -14px; inset-block-start: calc(50% - 7px); width: 2px; height: 14px; background: #1E1B16; } /* ── 4 · FEATURED IMAGE ──────────────────────────────────────────────────── 16:9 framing with crop-safe cover behaviour, the hairline border and the approved caption rhythm. The widget's own image_border / caption controls already carry these values; they are restated here so the framing survives independently of the widget's generated CSS. */ #bts-article-template #bts-article-figure figure { margin: 0; } #bts-article-template #bts-article-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; border: 1px solid #DED8CB; } #bts-article-template #bts-article-figure figcaption { margin: 12px 0 0; max-width: 62ch; font-family: "Libre Franklin", sans-serif; font-style: italic; font-weight: 400; font-size: 0.78rem; line-height: 1.45; color: #6B6459; text-align: start; } /* ── 5 · RELATED INSIGHTS ────────────────────────────────────────────────── Frozen 900px transition, independent of the global 1024 breakpoint. .elementor-grid / .elementor-loop-container are the Loop Grid widget's own stable container classes; the chain still starts at the article root. */ #bts-article-template #bts-article-related-grid .elementor-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; } @media (min-width: 900px) { #bts-article-template #bts-article-related-grid .elementor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ── 6 · HIDDEN MARKERS AND DEFERRED DESTINATIONS ────────────────────────── The marker block is a data channel for the behaviour record, never content. It is removed from the visual AND the accessibility tree deliberately: it carries no reader-facing meaning, so no textual equivalent is owed and the sr-only pattern would be wrong here. Every id is enumerated — no attribute-prefix guesswork. */ #bts-article-template #bts-article-markers, #bts-article-template #bts-article-marker-show-hero-image, #bts-article-template #bts-article-marker-show-updated, #bts-article-template #bts-article-marker-core-point, #bts-article-template #bts-article-marker-offer-label, #bts-article-template #bts-article-marker-offer-body, #bts-article-template #bts-article-marker-offer-cta, #bts-article-template #bts-article-marker-offer-url { display: none !important; } /* /insights/ does not resolve on staging. No affordance without a destination: hidden here, and removed from the DOM by the behaviour record so it is absent from the accessibility tree as well. */ #bts-article-template #bts-article-related-viewall { display: none !important; } /* ── 7 · FOCUS VISIBILITY ────────────────────────────────────────────────── Site-wide ownership remains with the "BTS — Focus Visibility" Custom Code package. This is a scoped restatement with identical values, so that template-generated nodes that did not exist when that package was written (the TOC anchors) are covered. No competing value is introduced. Chrome applies :focus-visible only on trusted keyboard input — live keyboard confirmation stays a human check. */ #bts-article-template a[href]:focus-visible, #bts-article-template button:focus-visible, #bts-article-template .bts-article-toclink:focus-visible { outline: 2px solid #31506B; outline-offset: 2px; } /* ── 8 · 44px INTERACTIVE TARGETS ────────────────────────────────────────── Measure the real interactive node, never the wrapper. A v4 atomic widget carrying a link can render the anchor either AS the styled element or INSIDE it, so both surfaces are asserted; whichever does not exist is a harmless no-op. Inline editorial links inside the authored body flow are deliberately NOT inflated — inflating an inline link would break the line box and the 680px measure. That is the same approved position taken for the seven Homepage editorial title links. */ #bts-article-template #bts-article-offer-action, #bts-article-template #bts-article-offer-action > a, #bts-article-template #bts-article-cta-action, #bts-article-template #bts-article-cta-action > a { display: flex; align-items: center; min-height: 44px; width: fit-content; } #bts-article-template #bts-article-offer-action, #bts-article-template #bts-article-offer-action > a { justify-content: flex-start; } #bts-article-template #bts-article-cta-action, #bts-article-template #bts-article-cta-action > a { justify-content: center; } /* ── 9 · ARTICLE BODY — the single Post Content flow ─────────────────────── .elementor-widget-theme-post-content is the native Theme Builder widget's own stable class. There is exactly one such widget in this template (AT-004), and the chain still begins at the article root. Sections are styled by real authored classes, not cardified wholesale. */ #bts-article-template .elementor-widget-theme-post-content { font-family: "Libre Franklin", sans-serif; color: #1E1B16; } #bts-article-template .elementor-widget-theme-post-content p, #bts-article-template .elementor-widget-theme-post-content li { font-weight: 400; font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty; } #bts-article-template .elementor-widget-theme-post-content p { margin: 0 0 16px; } #bts-article-template .elementor-widget-theme-post-content h2 { font-family: "Libre Franklin", sans-serif; font-weight: 600; font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.15; letter-spacing: -0.01em; color: #1E1B16; margin: 48px 0 24px; text-wrap: balance; /* Room for the TOC jump target. */ scroll-margin-block-start: 32px; } #bts-article-template .elementor-widget-theme-post-content h3 { font-family: "Libre Franklin", sans-serif; font-weight: 600; font-size: 1.35rem; line-height: 1.2; color: #1E1B16; margin: 32px 0 16px; } #bts-article-template .elementor-widget-theme-post-content ul, #bts-article-template .elementor-widget-theme-post-content ol { margin: 0 0 24px; padding-inline-start: 24px; } #bts-article-template .elementor-widget-theme-post-content li { margin: 0 0 8px; } /* Links are distinguishable beyond colour. */ #bts-article-template .elementor-widget-theme-post-content a { color: #31506B; text-decoration: underline; text-underline-offset: 2px; } /* Mono structural label used by In brief, Scope note, FAQ, Sources, figures. Mono explains structure here; it is never decoration. */ #bts-article-template .bts-article-mono { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 0.72rem; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: #6B6459; margin: 0 0 12px; } /* In brief */ #bts-article-template .bts-article-brief { border-block-start: 2px solid #1E1B16; border-block-end: 1px solid #DED8CB; padding: 24px 0 20px; margin: 0 0 8px; } #bts-article-template .bts-article-brief-list { list-style: none; margin: 0; padding-inline-start: 20px; } #bts-article-template .bts-article-brief-list li { margin: 0 0 12px; } /* Pull quote. v4 has no semantic blockquote tag enum, but this is authored WordPress content, so the real

element is available and used. */ #bts-article-template .bts-article-quote { margin: 32px 0; padding: 0; border: 0; } #bts-article-template .bts-article-quote p { font-family: "Libre Franklin", sans-serif; font-style: italic; font-weight: 400; font-size: 1.35rem; line-height: 1.4; margin: 0; max-width: 50ch; } /* Evidence / caution note — Indigo rule plus Panel, never colour alone: the literal "Scope note" label carries the meaning independently. */ #bts-article-template .bts-article-note { border-inline-start: 2px solid #31506B; background: #FBF9F4; padding: 20px 24px; margin: 0 0 24px; } #bts-article-template .bts-article-note p:last-of-type { margin-block-end: 0; } /* Source reference marker. Inline, not a 44px target — it is a footnote marker inside a line of prose. */ #bts-article-template .bts-article-ref { font-family: "IBM Plex Mono", monospace; font-size: 0.7rem; letter-spacing: 0.06em; vertical-align: super; text-decoration: none; } /* Editorial figures. .bts-article-wide is a CAP, not an escape: it can never exceed the reading column, so it cannot produce horizontal overflow. */ #bts-article-template .bts-article-wide { max-width: 960px; } #bts-article-template .elementor-widget-theme-post-content .bts-article-figure { margin: 32px 0; max-width: 100%; } #bts-article-template .bts-article-figcaption { font-family: "Libre Franklin", sans-serif; font-style: italic; font-weight: 400; font-size: 0.78rem; line-height: 1.45; color: #6B6459; margin: 16px 0 0; max-width: 62ch; } /* Three peer decision routes. Unranked, uncoloured, no numbering ladder. Container query on the reading column: three columns only when the measure can carry them. Mapping from the frozen design: the design switches at page container 880px, where its reading column has already reached its 680px cap, so 672px of reading width is the faithful content threshold. */ #bts-article-template .bts-article-routes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; } #bts-article-template .bts-article-route { border-block-start: 2px solid #1E1B16; padding: 20px 24px 20px 0; } #bts-article-template .bts-article-route-name { font-weight: 600; font-size: 1.15rem; line-height: 1.25; margin: 0 0 8px; } #bts-article-template .bts-article-route-body { font-size: 0.95rem; line-height: 1.5; margin: 0; } @container btsarticle (min-width: 672px) { #bts-article-template .bts-article-routes { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Evidence sequence spine. Vertical by default; horizontal once the measure can carry four peers. Design threshold is page container 700px, where its reading column measures about 630px — mapped to 624px of reading width. */ #bts-article-template .bts-article-flow { position: relative; margin: 32px 0 40px; } #bts-article-template .bts-article-flowline { position: absolute; inset-inline-start: 6px; inset-block-start: 8px; inset-block-end: 8px; width: 2px; background: #1E1B16; } #bts-article-template .bts-article-nodes { display: flex; flex-direction: column; gap: 28px; padding-inline-start: 30px; } #bts-article-template .bts-article-node { position: relative; } /* The tick is a pseudo-element on an ordinary authored
, not on an Elementor container: the .e-con::before hazard does not apply here, and the fixture markup cannot be edited by this Decision. */ #bts-article-template .bts-article-node::before { content: ""; position: absolute; inset-inline-start: -24px; inset-block-start: 9px; width: 14px; height: 2px; background: #1E1B16; } #bts-article-template .bts-article-node-name { font-weight: 600; font-size: 1rem; line-height: 1.25; margin: 0 0 6px; } #bts-article-template .bts-article-node-body { font-size: 0.9rem; line-height: 1.45; color: #6B6459; margin: 0; } #bts-article-template .bts-article-term { display: inline-flex; align-items: baseline; gap: 10px; margin: 24px 0 0; padding-inline-start: 30px; } #bts-article-template .bts-article-term-mark { color: #3F6A55; font-size: 0.9rem; line-height: 1; } #bts-article-template .bts-article-term-label { color: #3F6A55; margin: 0; } @container btsarticle (min-width: 624px) { #bts-article-template .bts-article-flowline { inset-inline-start: 0; inset-inline-end: 0; inset-block-start: 6px; inset-block-end: auto; width: auto; height: 2px; } #bts-article-template .bts-article-nodes { flex-direction: row; gap: 24px; padding-inline-start: 0; padding-block-start: 30px; } #bts-article-template .bts-article-node { flex: 1 1 0; min-width: 0; } #bts-article-template .bts-article-node::before { inset-inline-start: 0; inset-block-start: -30px; width: 2px; height: 14px; } #bts-article-template .bts-article-term { padding-inline-start: 0; } } /* Always-open FAQ. No accordion: no substantive content is hidden. */ #bts-article-template .bts-article-faq { border-block-start: 1px solid #DED8CB; margin: 40px 0 0; padding-block-start: 24px; } #bts-article-template .bts-article-faq-q { font-weight: 600; font-size: 1.05rem; line-height: 1.3; margin: 0 0 8px; } /* Sources and further reading. The
keeps its list semantics and its markers — only the marker's typography is restyled — so the numbering is never lost to assistive technology. */ #bts-article-template .bts-article-sources { border-block-start: 1px solid #DED8CB; margin: 48px 0 0; padding-block-start: 24px; } #bts-article-template .bts-article-sources-list { list-style: decimal-leading-zero; margin: 0; padding-inline-start: 2.6em; } #bts-article-template .bts-article-sources-list li { margin: 0 0 16px; } #bts-article-template .bts-article-sources-list li::marker { font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; color: #6B6459; } #bts-article-template .bts-article-source-meta { display: block; font-size: 0.9rem; line-height: 1.5; color: #6B6459; overflow-wrap: anywhere; } /* ── 10 · DATA TABLE ─────────────────────────────────────────────────────── Caption above the table: WordPress emits
after , so the figure becomes a column and the caption is ordered first. Order is visual only; DOM and reading order are unchanged for assistive technology. */ #bts-article-template .bts-article-table { display: flex; flex-direction: column; margin: 24px 0 32px; } #bts-article-template .bts-article-table figcaption { order: -1; text-align: start; font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #6B6459; padding-block-end: 12px; } #bts-article-template .bts-article-table table { width: 100%; border-collapse: collapse; } #bts-article-template .bts-article-table th, #bts-article-template .bts-article-table td { text-align: start; vertical-align: top; font-size: 0.9rem; line-height: 1.5; padding: 12px 20px 12px 0; border-top: 1px solid #DED8CB; overflow-wrap: anywhere; } #bts-article-template .bts-article-table thead th { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #6B6459; border-top: 2px solid #1E1B16; } #bts-article-template .bts-article-table td::before { content: none; } /* Mobile treatment at the approved 767px mobile band. The header row stays in the accessibility tree — visually removed with the 1px + clip-path pattern, never display:none. data-label values are written by the behaviour record from the real column headers. */ @media (max-width: 767px) { #bts-article-template .bts-article-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #bts-article-template .bts-article-table tr { display: block; border-top: 1px solid #DED8CB; padding: 16px 0; } #bts-article-template .bts-article-table td { display: block; border-top: 0; padding: 0 0 10px; } #bts-article-template .bts-article-table td[data-label]::before { content: attr(data-label); display: block; font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #6B6459; margin-block-end: 4px; } } /* ── 11 · OVERFLOW GUARDS ────────────────────────────────────────────────── No clipped heading, caption, table, source title or figure, and no horizontal overflow, at any width. */ #bts-article-template #bts-article-title, #bts-article-template #bts-article-standfirst, #bts-article-template .elementor-widget-theme-post-content h2, #bts-article-template .elementor-widget-theme-post-content h3 { overflow-wrap: break-word; } #bts-article-template #bts-article-shell, #bts-article-template #bts-article-rail-inner, #bts-article-template #bts-article-toc, #bts-article-template #bts-article-core-point, #bts-article-template #bts-article-offer { min-width: 0; }/* End custom CSS */