with no .alignfull, and breaks them out with the same 100vw formula. Left in the content track they would compute margin-left: 50% of 1354 − 50vw = −283 and hang 240px off the left edge. A UAGB root container IS a band. */ body.skp-typed .entry-content > section.wp-block-uagb-container, body.skp-typed .entry-content > .uagb-is-root-container { grid-column: full; } /* Neutralise the breakout hacks these tracks replace. skp-design-system.css §9 sets width/max-width/margin with !important on .skp-product-page and .skp-resource-page, so this must match it. Once those pages are all migrated, delete §9 there and this block with it. */ body.skp-typed .entry-content > .skp-product-page, body.skp-typed .entry-content > .skp-resource-page { width: auto !important; max-width: none !important; margin-inline: 0 !important; } /* .skp-section carries the same 100vw + negative-margin pair. Inside a shell that is already viewport-wide it is not just redundant, it is the scrollbar overflow. A plain block child of a full-bleed parent IS full-bleed. */ body.skp-typed .skp-section, body.skp-typed .skp-resource-section, body.skp-typed .skp-lineage, body.skp-typed .skp-applications { width: auto; max-width: none; margin-inline: 0; } /* ---- THE INNER WRAPPER, WHATEVER IT IS CALLED --------------------------- The site grew four parallel names for one idea, one per era: .skp-inner the component shell (2026-08) .skp-resource-inner the resource batch (2026-05) .uagb-container-inner-blocks-wrap the UAGB block pages (2025) — nothing — everything older Measured on /resource/custom-pvc-tarpaulin-quote-checklist/, all eleven .skp-resource-inner wrappers sit at 1354px at a 1440 viewport, which is correct, and then run uncapped at 1920 because their max-width is a percentage. THE CAP APPLIES ONLY DIRECTLY INSIDE A FULL-BLEED BAND, and this is the subtle part. --skp-inner-cap is min(94%, 1600px), and 94% is 94% OF THE PARENT. Inside a viewport-wide band that is the contract value. Inside an already-capped parent it is 94% of an already-correct number — measured on /products/, a nested .uagb-container-inner-blocks-wrap took 94% of 1354 and rendered at 1272px, shrinking every nested card by 6% for no reason. A wrapper cannot know whether its parent is a band. So the default is "fill", and the cap is granted by the band, from outside. */ body.skp-typed :is(.skp-inner, .skp-resource-inner, .uagb-container-inner-blocks-wrap) { width: 100%; max-width: 100%; margin-inline: auto; box-sizing: border-box; } /* Our own bands have zero horizontal padding, so the wrapper owns the gutter and takes the full token. */ body.skp-typed :is(.skp-section, .skp-resource-section, .skp-applications) > :is(.skp-inner, .skp-resource-inner, .uagb-container-inner-blocks-wrap) { max-width: var(--skp-inner-cap); } /* A UAGB band keeps its own padding, so its wrapper takes a CEILING only — the same reasoning as the direct-child rule above. Using --skp-inner-cap here would take 94% of an already-inset box and lose ~34px at 1440. */ body.skp-typed .wp-block-uagb-container.alignfull > .uagb-container-inner-blocks-wrap, body.skp-typed :is(main, .entry-content) > .wp-block-uagb-container > .uagb-container-inner-blocks-wrap, body.skp-typed :is(main, .entry-content) > section > .uagb-container-inner-blocks-wrap { max-width: min(1600px, 100%); } /* ---- ONE GUTTER, APPLIED ONCE ------------------------------------------- The gutter is created by the INNER CAP and by nothing else. Applying it twice is not a hypothetical: skp-design-system.css §12(b) puts `padding-inline: var(--skp-gutter)` on the band, and the inner wrapper then caps at 94% of what is left. Measured on /resource/sample-and-order-process/ at a 390 viewport: band 390 → padding 18+18 → 354 → 94% → 333px, against a contract of 354. The page loses 21px of column to a gutter it already had. So: bands carry no horizontal padding, and the inner wrapper caps. */ /* Our own bands carry no horizontal padding — the inner wrapper caps. .skp-applications is the exception and is NOT in this list: it is the one band whose gutter lives in its own padding rather than in an inner cap (skp-product-tiers.css:113, `padding: clamp(52px,6vw,88px) var(--skp-gutter)`). Zeroing it took the gutter away and left the applications grid running the full 1440 with its cards flush to both edges. */ body.skp-typed :is(.skp-section, .skp-resource-section) { padding-inline: 0; } body.skp-typed .skp-applications { padding-inline: var(--skp-gutter); } /* ---- LEGACY BANDS: ADD THE CAP, TOUCH NOTHING ELSE ---------------------- A UAGB band writes its own padding from the editor with !important, and that padding is already correct below 1600 — measured, these pages put their content at exactly 1354 at a 1440 viewport without any help. The ONLY thing they get wrong is that a percentage-based inset never stops growing: 1504 at 1920, and 1816 on /about/ before the §12(b) patch. So the fix is a ceiling and nothing else. No `width: 100%`, no gutter subtraction, no zeroing of the band's padding. This is the second attempt. The first zeroed the band padding with !important and re-derived the gutter from the child, which is arithmetically equivalent and behaviourally not: changing the band's content box from 354 to 390 changed the containing block that WordPress's own column rules resolve against, and four-column blocks stopped stacking on mobile. Measured on /factories/ at 390 — a stat column went from W354 L18 (stacked, correct) to W306 L362 (side by side, 360px past the right edge) and the layer INTRODUCED a 105-element overflow on /about/, 33 on /factories/, 17 on /certifications/ and 20 on /contact-us/. The dry run caught all four before they shipped. The lesson is in 10-GOVERNANCE terms: a rule that is correct about the number it sets can still be wrong about the box it changes. Prefer the ceiling that adds a constraint over the rewrite that replaces a mechanism. Prose is excluded — a paragraph is not a layout wrapper and takes the narrower READING measure from REGION 2. Without the exclusion this rule wins on specificity and prose ran at 119ch on /products/. */ body.skp-typed :is(main, .entry-content) > :is(.wp-block-uagb-container, .wp-block-group, section) > *:not(.uagb-container-inner-blocks-wrap):not(.skp-resource-inner):not(.skp-inner):not(.skp-applications__inner):not(p):not(ul):not(ol):not(dl):not(blockquote), /* A UAGB ROOT container is a band wherever it sits in the tree, not only as a direct child of main. Measured on /products/pvc-tarpaulin/ at 390: .uagb-block-furtherread is nested one level deeper, so the rule above missed it and its prose ran to 386px on a 390 viewport — no gutter at all. */ body.skp-typed .uagb-is-root-container > *:not(.uagb-container-inner-blocks-wrap):not(.skp-resource-inner):not(.skp-inner):not(.skp-applications__inner):not(p):not(ul):not(ol):not(dl):not(blockquote) { max-width: min(1600px, 100%); margin-inline: auto; } /* The applications grid that skp-product-tiers.php appends to every hub. Its inner wrapper was never capped, so on /products/industrial-pvc-curtains/ each card measured the full 1440 and the grid rendered as a single stacked column at desktop — a three-up grid that had silently stopped being one. */ body.skp-typed .skp-applications > .skp-applications__inner { width: 100%; max-width: var(--skp-inner-cap); margin-inline: auto; box-sizing: border-box; } /* /products/industrial-pvc-curtains/ has exactly ONE application child, and a one-item grid stretched that card across the full 1354. A lone card is not a row — it is a card. Hold it to a third of the grid so a hub with one application and a hub with three read as the same component. `03 §0` in miniature: the layout should say how many there are. */ body.skp-typed .skp-applications__card:only-child { max-width: min(100%, 440px); } /* ---- ARTICLES AND ARCHIVES ---------------------------------------------- The 49 blog posts have never had a single design-system rule applied to them: skp-design-system.css and skp-components.css are both gated on is_page(). Measured 2026-08-30, every article renders identically wrong: band 1019px at a 1440 viewport (should reach 1440) content 933px (should be 1354) overflow 4 elements, all in the comment form Astra's "separate container" wraps the article in a padded white card — .ast-article-single carries padding: 5.34em 6.67em, which is where 1440 becomes 1019 becomes 933. The card is the theme making a magazine-layout decision on behalf of a manufacturer's technical library. Released, so an article gets the same shell as everything else. The reading column is preserved and then some: 68ch at 1.72 leading, from REGION 0. Measured cause: `body.ast-right-sidebar` puts the post in a two-column layout — .content-area at 1043px with 60px of right padding, beside a 348px "Recent Posts" widget. That is a magazine decision applied to a manufacturer's technical library, and it is why an article is the only page type on the site that cannot reach the viewport edge. The article goes full width and the widget stacks BELOW it at the same cap. Nothing is removed — every link in Recent Posts is still on the page, in the same order — it simply stops taking a quarter of the reading width on a document whose job is to be read. */ /* The container must stack, not split. `flex: 1 1 100%` on two flex siblings inside a nowrap row gives 720 + 720, which measured as an article band of 719px at a 1440 viewport — narrower than the sidebar layout it replaced. Block layout is the whole fix. */ body:is(.skp-type-article, .skp-type-directory) .site-content > .ast-container { display: block; } /* Not scoped to .ast-separate-container — the posts run `ast-plain-container ast-right-sidebar`, and a rule written for the wrong container class is a rule that does nothing. */ body:is(.skp-type-article, .skp-type-directory) :is( .content-area, #primary, .site-main, .ast-article-single, .ast-article-post ) { padding-inline: 0; margin-inline: 0; max-width: none; width: 100%; float: none; } body:is(.skp-type-article, .skp-type-directory) .ast-article-single { padding-block: 0; } /* ---- THE FOOT OF AN ARTICLE IS A BAND ---------------------------------- Measured band coverage — the share of a page's height carried by a full-bleed surface that differs from the page: product / resource pages 44 – 91 % /blog/ 9.3 % articles 0 % Zero. An article is a white column on a white page from header to footer, which is why it reads as narrow however wide the viewport is. "Full width" is not only whether the band spans 1920px — it is whether the eye can SEE that it does, and nothing marks an edge that has no colour. The prose column stays at 730px, because a 1600px paragraph is unreadable and widening it would be the wrong fix. The width comes from BANDING the zones either side of the reading column — which is what every other page type on the site already does. */ body.skp-type-article :is(.ast-single-related-posts-container, #comments) { background: var(--skp-surface-container-low); padding-block: var(--skp-section-rhythm); border-block-start: 1px solid var(--skp-outline-variant); } body.skp-type-article #comments { background: var(--skp-surface-container); } /* the widget area, stacked and capped like any other content */ body:is(.skp-type-article, .skp-type-directory) :is(#secondary, .widget-area.secondary) { width: 100%; max-width: var(--skp-inner-cap); margin-inline: auto; padding-inline: 0; float: none; flex: 1 1 100%; } /* The blog archive is a directory of articles and takes the directory shell. Its furniture — hero, filter row, pagination — sits in .content-area, not .entry-content, so the grid never reaches it. Measured at 1920: .blog-hero uses a flat 60px padding, so its H1 ran to 1800px. Flat padding is exactly the unbounded-growth pattern the layout contract forbids (01 §6.1); the cap belongs on the child. */ body:is(.skp-type-directory, .skp-type-article) :is( .ast-row, .site-main > .ast-archive-description, .site-main > article, .content-area > :is(.blog-hero, .blog-filters, .blog-results-info, .ast-pagination) > *, /* Astra's related-posts block, on every article. Same flat-padding pattern: 42.5px each side, so it measured 1834px at 1920. */ .ast-single-related-posts-container > * ) { width: 100%; max-width: var(--skp-inner-cap); margin-inline: auto; } /* The comment form, on every one of the 49 posts. Astra lays it out with .ast-row, a negative-margin grid gutter, inside a container that has no matching positive padding. Measured: legend at left −20, four elements past the edge. It is the same negative-margin failure as the lineage nav, in the theme rather than in our CSS. */ body.skp-typed #comments .ast-row, body.skp-typed .comment-form .ast-row { margin-inline: 0; width: 100%; max-width: 100%; } body.skp-typed #comments { width: 100%; max-width: var(--skp-inner-cap); margin-inline: auto; box-sizing: border-box; } body.skp-typed #comments :is(input, textarea, select) { max-width: 100%; box-sizing: border-box; } /* Comment furniture lives OUTSIDE .entry-content, so the reading measure in REGION 2 never reaches it. Measured on every article at 1920: the "Your email address will not be published" note ran to 126ch and the comments block to 1834px. Prose is prose wherever it is. */ body.skp-typed #comments :is(p, li, label, .comment-notes, .comment-form-comment) { max-width: var(--skp-read-measure); } body.skp-typed #comments :is(p, li, label) { font-size: var(--skp-body-medium); line-height: var(--skp-read-leading); color: var(--skp-on-surface-variant); } /* ========================================================================= REGION 2 — TYPED PROSE The 34 pages that are not yet built from components still have to look like this site TODAY. They are ordinary WordPress markup, so the type layer has to reach ordinary WordPress markup. Scope is deliberately `:not([class*="skp-"])` — anything carrying a component class is owned by skp-components.css and must not be second- guessed from here. This styles the raw stuff and only the raw stuff. ========================================================================= */ body.skp-typed .entry-content :is(p, li, dd, dt):not([class*="skp-"]) { font-size: var(--skp-body-medium); line-height: var(--skp-read-leading); color: var(--skp-on-surface); } /* ---- THE READING MEASURE ------------------------------------------------- The worst legibility defect on the site, and it is sitewide. Measured 2026-08-30 at a 1440 viewport, in real ch units: /resource/custom-pvc-tarpaulin-quote-checklist/ 176 ch /products/ 176 ch Every band caps its inner wrapper at 1354px and then sets running prose to the full 1354. 176 characters is roughly two and a half times the top of the 45–75 band that every legibility study since Tinker lands on, and it is why these pages are exhausting to read even though nothing about them looks broken. A capped BAND is not a reading measure; only the paragraph is. Applied to the prose element itself, at any depth, and NOT to its container — a container measure would also narrow tables, figures and grids, which need the whole column. Depth rather than a parent list is deliberate. The first version scoped this to direct children of the four inner-wrapper names and missed, measured: ul.skp-resource-list > li 142 ch (list carries a class) div.skp-resource-note > p 136 ch (one wrapper div deeper) There is no finite list of wrappers on a site with four content eras. A cap only ever NARROWS: prose already inside a 400px card is unaffected, because max-width does not stretch anything. So the blanket form is both simpler and safer than trying to enumerate. Excluded: cells, because a table column sets its own width, and the two component parts that own a deliberately different measure. */ body.skp-typed .entry-content :is(p, li, blockquote, dt, dd):not(.skp-section-lede):not(.skp-eyebrow) { /* The !important is against another !important, not against nothing. skp-design-system.css §12(b) ships body.page-id-1092 .skp-product-page > *, body .skp-legacy-product > * { max-width: var(--skp-inner-cap) !important } to give /products/sound-barrier/ a gutter it lacked. It works, and it also applies a 1354px LAYOUT cap to running prose — measured at 126ch on that page. A layout cap must never win over a reading measure. Delete this !important the day those two page-ID rules are removed. The generic direct-child rule in REGION 1 already supplies the gutter they were written for, so they are dead weight the moment this layer is live — see 17-PAGE-TYPES §9. */ max-width: var(--skp-read-measure) !important; } body.skp-typed .entry-content :is(td, th) :is(p, li, dd, dt), body.skp-typed .entry-content :is(td, th) { max-width: none; } /* Furniture outside .entry-content still contains prose. Measured on /blog/: the hero lede sits in .content-area, never reached the measure, and ran to 109ch. A directory and an archive both put real copy above the listing. */ body:is(.skp-type-directory, .skp-type-article) .content-area :is(p, li):not([class*="skp-"]):not(.entry-content *) { max-width: var(--skp-read-measure); } /* Centre-set copy must stay centred once it is narrowed, or a narrowed measure silently becomes a left-aligned column under a centred heading — which looks like a bug rather than a decision. */ body.skp-typed .entry-content :is(p, ul, ol):is(.has-text-align-center, [style*="text-align:center"], [style*="text-align: center"]) { margin-inline: auto; } body.skp-typed .entry-content .uagb-container-inner-blocks-wrap > p.has-text-align-center, body.skp-typed .entry-content .wp-block-uagb-container > p.has-text-align-center { margin-inline: auto; } /* ---- vertical rhythm ----------------------------------------------------- Grid items do not margin-collapse. Two stacked blocks that used to share a collapsed 22px now sum to 44px, so the flow has to be stated rather than inherited. Bottom margins only — one direction, one value, no arithmetic. */ body.skp-typed .entry-content > * { margin-block-start: 0; } body.skp-typed .entry-content > * + * { margin-block-start: var(--skp-flow); } body.skp-typed .entry-content > * + :is(h2, h3) { margin-block-start: var(--skp-flow-head); } /* a band owns its own padding and must not also carry flow */ body.skp-typed .entry-content > :is(.skp-section, main, .alignfull, .skp-product-page, .skp-resource-page, .skp-lineage, .skp-applications) + *, body.skp-typed .entry-content > :is(.skp-section, main, .alignfull, .skp-product-page, .skp-resource-page, .skp-lineage, .skp-applications) { margin-block-start: 0; } /* ---- headings ------------------------------------------------------------ One treatment, four variables. The type decides the variables; nothing decides the treatment. */ body.skp-typed .entry-content :is(h2, h3):not([class*="skp-"]) { font-family: var(--skp-font); color: var(--skp-on-surface); letter-spacing: var(--skp-head-track); text-wrap: balance; } body.skp-typed .entry-content h2:not([class*="skp-"]) { position: relative; font-size: var(--skp-head-size); font-weight: 600; line-height: 1.12; text-transform: var(--skp-head-case); max-width: 32ch; padding-inline-start: calc(var(--skp-head-bar-w) + var(--skp-space-md)); margin-block-end: var(--skp-space-md); } /* the accent bar — present only where the type gives it a width */ body.skp-typed .entry-content h2:not([class*="skp-"])::before { content: ""; position: absolute; inset-block: 0.12em 0.12em; inset-inline-start: 0; width: var(--skp-head-bar-w); border-radius: var(--skp-shape-extra-small); background: var(--skp-accent); } body.skp-typed .entry-content h3:not([class*="skp-"]) { font-size: var(--skp-title-large); font-weight: 700; line-height: 1.2; margin-block-end: var(--skp-space-sm); max-width: 40ch; } /* ---- links --------------------------------------------------------------- Astra ships `a:not(.button):not(...)` rules that outrank a single class (07 §3.3) — the documented reason card copy once shipped underlined. The !important here is that arms race already lost once; do not remove it without re-measuring. */ body.skp-typed .entry-content :is(p, li, dd, td, th) a:not([class*="skp-"]):not(.wp-block-button__link) { color: var(--skp-link-ink); text-decoration: underline !important; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, var(--skp-link-ink) 42%, transparent); transition: text-decoration-color var(--skp-motion-fast), color var(--skp-motion-fast); } body.skp-typed .entry-content :is(p, li, dd, td, th) a:not([class*="skp-"]):hover { text-decoration-color: currentColor; } body.skp-typed .entry-content a:focus-visible { outline: var(--skp-focus-width) solid var(--skp-focus-ring); outline-offset: var(--skp-focus-offset); border-radius: var(--skp-shape-extra-small); } /* ---- lists --------------------------------------------------------------- A marker in the accent is the cheapest way to make an ordinary bulleted list belong to a design system. */ body.skp-typed .entry-content > ul:not([class*="skp-"]) > li::marker, body.skp-typed .entry-content .uagb-container-inner-blocks-wrap > ul > li::marker { color: var(--skp-accent); } body.skp-typed .entry-content :is(ul, ol):not([class*="skp-"]) > li + li { margin-block-start: var(--skp-space-sm); } /* ---- images -------------------------------------------------------------- Never upscale. This is the rule that shipped a 74x13px decorative zigzag at 1354x846 — 05 §4.2. */ body.skp-typed .entry-content img { max-width: 100%; height: auto; } body.skp-typed .entry-content > figure:not([class*="skp-"]) img { border-radius: var(--skp-shape-media); } body.skp-typed .entry-content figcaption { font-size: var(--skp-body-small); color: var(--skp-on-surface-variant); margin-block-start: var(--skp-space-sm); max-width: var(--skp-read-measure); } /* ========================================================================= REGION 3 — TABLES Measured 2026-08-30: a table is the single most common cause of horizontal scroll on this site — it appears in the overflow report for 18 of the 22 failing URLs. A spec table is the most valuable content a manufacturer publishes and it must not be destroyed to fit 390px. So it scrolls, inside its own bounded box, with a visible edge that says so. `min-width: 0` in REGION 1 is what makes the box actually bound it. ========================================================================= */ body.skp-typed .entry-content table { width: 100%; border-collapse: collapse; font-size: var(--skp-body-small); } body.skp-typed .entry-content :is(th, td) { padding: var(--skp-space-md); text-align: start; vertical-align: top; border-bottom: 1px solid var(--skp-outline-variant); } body.skp-typed .entry-content th { font-weight: 700; color: var(--skp-on-surface); background: var(--skp-surface-container); } body.skp-typed .entry-content thead th { border-bottom: 2px solid var(--skp-accent); } /* A

 has no wrap point, so a code line is exactly as wide as it is.
   Measured on /how-to-measure-industrial-curtains/: five  blocks running
   to 853px on a 390 viewport. It scrolls in its own box, like a table. */
body.skp-typed .entry-content :is(pre, code) {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.skp-typed .entry-content pre {
  padding: var(--skp-space-md);
  background: var(--skp-surface-container);
  border-radius: var(--skp-shape-small);
  font-size: var(--skp-body-small);
}

/* A block table ships wrapped in a , and the figure is the box that
   has to bound it — clipping only the table leaves the figure at the table's
   natural width. Measured on /industrial-curtain-fire-ratings/: figure and
   table both at 785px on a 390 viewport. */
body.skp-typed .entry-content :is(figure.wp-block-table, .wp-block-table) {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}

@media (max-width: 900px) {
  /* the scroll box. `display:block` on a  is what makes overflow-x
     work at all — a table box ignores it. */
  body.skp-typed .entry-content table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    /* the edge fade IS the affordance. Without it a scrollable table looks
       like a clipped one, and nobody swipes a clipped table. */
    background:
      linear-gradient(to right, var(--skp-surface) 30%, rgba(255, 255, 255, 0)) left center,
      linear-gradient(to right, rgba(255, 255, 255, 0), var(--skp-surface) 70%) right center,
      radial-gradient(farthest-side at 0 50%, rgba(16, 32, 51, 0.14), rgba(16, 32, 51, 0)) left center,
      radial-gradient(farthest-side at 100% 50%, rgba(16, 32, 51, 0.14), rgba(16, 32, 51, 0)) right center;
    background-repeat: no-repeat;
    background-size: 28px 100%, 28px 100%, 13px 100%, 13px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  body.skp-typed .entry-content table :is(thead, tbody) {
    display: table;
    width: max-content;
    min-width: 100%;
  }
  body.skp-typed .entry-content table tr { display: table-row; }
  body.skp-typed .entry-content table :is(th, td) {
    display: table-cell;
    padding: var(--skp-space-sm) var(--skp-space-md);
  }
}


/* =========================================================================
   REGION 4 — THE SIGNATURE OF EACH TYPE
   Everything above is shared. This is the part that differs, and it is
   deliberately small — four devices, one per family of page.
   ========================================================================= */

/* ---- DIRECTORY · the wayfinding board ------------------------------------
   A directory heading is a sign, not a sentence: set as a tracked-out label
   with a hairline running the full width of the column. The rule is the
   device — it turns a list of links into a board with named zones. */
body.skp-type-directory .entry-content h2:not([class*="skp-"]) {
  max-width: none;
  padding-block-end: var(--skp-space-md);
  border-block-end: 1px solid var(--skp-outline-variant);
  color: var(--skp-on-surface-variant);
}
/* the bar becomes a leading tick rather than a full-height rule, because at
   label size a 4px bar spanning a 20px cap-height reads as a typo */
body.skp-type-directory .entry-content h2:not([class*="skp-"])::before {
  inset-block: auto 0.85em;
  height: 3px;
  width: 22px;
  background: var(--skp-accent);
}
body.skp-type-directory .entry-content h2:not([class*="skp-"]) {
  padding-inline-start: 0;
  padding-block-start: var(--skp-space-md);
}

/* ---- RESOURCE + ARTICLE · the technical note -----------------------------
   No bar. A document does not need signage; it needs a margin. The heading
   gets a short rule ABOVE it instead — the way a technical note breaks a
   section — and the whole column sits against a hairline so the page reads
   as a single continuous document rather than a stack of bands. */
body:is(.skp-type-resource, .skp-type-article) .entry-content h2:not([class*="skp-"]) {
  padding-inline-start: 0;
  padding-block-start: var(--skp-space-lg);
  max-width: var(--skp-read-measure);
}
body:is(.skp-type-resource, .skp-type-article) .entry-content h2:not([class*="skp-"])::before {
  inset-block: 0 auto;
  width: 44px;
  height: 3px;
  border-radius: 0;
  background: var(--skp-accent);
}

/* ---- ARTICLE · the related-reading rail ---------------------------------
   Once the sidebar stacks below the article it becomes a full-width column of
   post titles, and a post title set across 1354px runs to 134 characters —
   the same defect the reading measure exists to fix, arriving from the
   theme's widget instead of from the content.

   Set as a rail: a multi-column list of links, each one a proper 48px target,
   separated by hairlines. It reads as "more on this" rather than as a
   sidebar that fell over. */
body:is(.skp-type-article, .skp-type-directory) #secondary .widget {
  padding-block: var(--skp-space-2xl) 0;
  border-block-start: var(--skp-hairline, 1px solid var(--skp-outline-variant));
}
body:is(.skp-type-article, .skp-type-directory) #secondary .widget-title,
body:is(.skp-type-article, .skp-type-directory) #secondary h2 {
  font-size: var(--skp-title-large);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--skp-on-surface-variant);
  margin-block-end: var(--skp-space-lg);
  padding-inline-start: 0;
}
body:is(.skp-type-article, .skp-type-directory) #secondary .widget-title::before { content: none; }
body:is(.skp-type-article, .skp-type-directory) #secondary ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: var(--skp-space-2xl);
}
@media (min-width: 1100px) {
  body:is(.skp-type-article, .skp-type-directory) #secondary ul { columns: 3; }
}
body:is(.skp-type-article, .skp-type-directory) #secondary li {
  break-inside: avoid;
  max-width: none;
  margin: 0;
  border-block-end: 1px solid var(--skp-outline-variant);
}
body:is(.skp-type-article, .skp-type-directory) #secondary li a {
  display: flex;
  align-items: center;
  min-height: var(--skp-target-min);
  padding-block: var(--skp-space-sm);
  font-size: var(--skp-body-small);
  line-height: 1.35;
  color: var(--skp-on-surface);
  text-decoration: none !important;
}
body:is(.skp-type-article, .skp-type-directory) #secondary li a:hover {
  color: var(--skp-link-ink);
}

/* ---- PRODUCT · the pillar hero, reconciled ------------------------------
   Four pages — 500gsm-pvc-tarpaulin, pvc-tarpaulin-rolls, oem-custom-
   fabrication, car-wash-curtains — shipped a hero that was half dark and half
   light, because two global layers disagreed and neither knew about the other.

   skp-product-tiers.css makes every application-tier hero LIGHT:

     .skp-tier-application .skp-hero    { background-color: initial !important }
     .skp-tier-application .skp-hero h1 { color: var(--skp-ink) !important }

   The pillar hero's own inline