/* -----------------------------------------------------------------------------
 * P4 · Single-post structural parity.
 *
 * WHAT WAS MISSING, measured at 1440 on 2026-08-11 on
 * /kant-space-invisible-canvas/ :
 *
 *     element                       reference      here (before)
 *     ---------------------------   -----------    -------------
 *     document height                    4719             3405
 *     DOM elements                       1686             1230
 *     .blog-article__related (prev/next) 108.4 px         absent
 *     #respond (comment form)            114.0 px         absent
 *     related-posts list                 3 items          absent
 *     rendered diagram <svg>             1                0
 *
 * 456 elements is not a styling difference. The article template in the parent
 * theme is title + featured image + content + post-meta and stops there, so
 * three whole sections below the article body had nowhere to render. The
 * reference plane puts them there through solutech's single.php, which is
 * template-scoped and therefore gone.
 *
 * The child now ships templates/single.html carrying post-navigation, the core
 * comments block and a [vnm_related_posts] shortcode. This sheet is what makes
 * those three read as one article rather than three loose blocks.
 *
 * ONE HONEST DIFFERENCE, stated here so it is not discovered later: on the
 * reference plane the related-posts list and the Mailchimp "Stay in the loop"
 * form live in a RIGHT RAIL — `.pix-sidebar`, measured 406.7 x 1267.6, inside a
 * col-xl-4 beside a col-xl-8 content column 843.3 px wide. Here the content
 * column is the full 980 px and the related list runs underneath. Rebuilding
 * the 8/4 split and a widget area is a bigger change than one lane should land
 * unreviewed, and the reference's rail also contains a login widget that is
 * `display:none` on every page load, so a faithful rail would be two thirds
 * empty. The numbers are recorded so the next person has the target.
 *
 * No `!important` in this file. It is enqueued at priority 120, after every
 * sheet it needs to sit on top of. A4, A5 and A6 all measured !important to be
 * unnecessary on this estate and none of them needed it.
 * -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
 * MEASURED TARGETS. Every number below was read off the reference plane at
 * 1440 on 2026-08-11, not chosen. The reference decomposes exactly, so these
 * rules reproduce the PARTS and the totals follow:
 *
 *   .blog-article__related  108.4 = 32.4 (label) + 56 (h4, 2 lines @28) + 20
 *                                  margin 35 top / 50 bottom, NO border
 *   #respond                114.0 = 26.6 (#reply-title) + 32.4 (.must-log-in)
 *                                  + 15 (its margin) + 40 (padding-bottom)
 *
 * ONE THING I GOT WRONG AND THE BROWSER CAUGHT: the first draft of this file
 * separated these sections with `border-top: 1px solid rgba(255,255,255,.12)`.
 * The body here computes `rgb(255, 255, 255)` — this is a LIGHT theme, exactly
 * like the reference — so that rule painted white on white and was invisible.
 * The reference uses no rule at all (`border-top-width: 0px` on both), so the
 * borders are gone rather than re-coloured. Separation is spacing.
 * -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
 * 1. Previous / next post navigation
 *
 * `justify-content: space-between` and not a 2-track grid: the first and last
 * post have only ONE neighbour and the shortcode omits the missing cell
 * entirely, so a fixed second track would leave a dead column and drag the
 * surviving link off its edge.
 * -------------------------------------------------------------------------- */

.vnm-single__nav {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin: 35px 0 50px;
	padding: 0;
	border: 0;
}

.vnm-single__nav-cell {
	flex: 0 1 48%;
	min-width: 0;
}

.vnm-single__nav-cell.is-next {
	margin-left: auto;
	text-align: right;
	padding-right: 40px;   /* room for the FA arrow outside the title ( exam geometry ) */
}

.vnm-single__nav-cell.is-prev {
	padding-left: 40px;
}

/* 32.4 — the reference's label block; the inner span is the 16px face. */
.vnm-single__nav-label {
	margin: 0;
	font-size: 18px;
	line-height: 32.4px;
}

.vnm-single__nav-label span {
	font-size: 16px;
	line-height: 28.8px;
	color: #444444;   /* exam: solid ink-soft, no opacity ( measured ) */
}

.vnm-single__nav-label a {
	text-decoration: none;
	color: inherit;   /* the label is a link since 2026-09-13 ( exam parity ) */
}

/* 56 + 20 — two lines at 28, then the reference's own bottom margin. */
.vnm-single__nav-title {
	margin: 0 0 20px;
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;   /* exam: 600 ( measured ) */
	position: relative;
}

.vnm-single__nav-title a {
	text-decoration: none;
	color: #020202;     /* exam: ink on the white card — inherit would now carry the body's #444444 */
}

.vnm-single__nav-title a:hover,
.vnm-single__nav-title a:focus-visible {
	text-decoration: underline;
}

/* The prev/next ARROWS — solutech's own rule ( css/main.css
   .blog-article__related h4:before ), ported: FA glyphs sitting 40px outside
   the title, in the main colour. FA 7 solid = font-weight 900 ( the
   reference's 700 was FA 5 ). The next cell's arrow mirrors to the right
   edge ( its text is right-aligned ). */
.vnm-single__nav-title::before {
	position: absolute;
	top: -1px;
	left: -40px;
	font-family: 'Font Awesome 7 Free';
	font-size: 18px;
	font-weight: 900;
	color: var(--pix-button-color, var(--vnm-brand, #8888ea));
	content: '\f060';
}

.vnm-single__nav-cell.is-next .vnm-single__nav-title::before {
	right: -40px;
	left: auto;
	content: '\f061';
}

/* -----------------------------------------------------------------------------
 * 2. Comments
 *
 * Both planes carry `comment_registration = '1'` and `require_name_email = '1'`
 * — verified on both, not assumed — so the logged-out state being compared is
 * the same one sentence on each. This is like-for-like and not a form measured
 * against a notice.
 * -------------------------------------------------------------------------- */

.vnm-single__comments {
	margin: 0;
	padding: 0 0 40px;
	border: 0;
}

.vnm-single__comments .comment-reply-title,
.vnm-single__comments #reply-title {
	margin: 0;
	font-size: 19px;
	line-height: 26.6px;
	font-weight: 600; /* prod renders this heading at 600, not 700 */
}

.vnm-single__comments .must-log-in {
	margin: 0 0 15px;
	font-size: 18px;
	line-height: 32.4px;
}

.vnm-single__comments .comment-form input[type="text"],
.vnm-single__comments .comment-form input[type="email"],
.vnm-single__comments .comment-form input[type="url"],
.vnm-single__comments .comment-form textarea {
	max-width: 100%;
	box-sizing: border-box;
}

/* -----------------------------------------------------------------------------
 * 3. Related posts
 *
 * `repeat(auto-fit, minmax(220px, 1fr))` rather than `repeat(3, 1fr)`: the
 * shortcode returns FEWER than three when a category is thin, and three fixed
 * tracks would leave visible dead columns. It also removes the need for a
 * separate mobile rule.
 * -------------------------------------------------------------------------- */

.vnm-related {
	margin: 0;
	padding: 0;
	border: 0;
}

.vnm-related__title {
	margin: 21.6px 0;
	font-size: 21.6px;
	line-height: 30.24px;
	font-weight: 700;
}

.vnm-related__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 27px;
}

.vnm-related__item {
	min-width: 0;
	margin: 0;
}

.vnm-related__thumb {
	display: block;
	margin-bottom: 12px;
	border-radius: 6px;
	overflow: hidden;
}

/* The ratio lives on the img, never on a block attribute. A4 measured the
 * sharper version of this on the blog index: an `aspectRatio` attribute is
 * applied by core to a WRAPPER and the image inside keeps its own shape, so the
 * row still develops a ragged baseline — which is why A4's merge guard fails
 * the build if that attribute reappears in its template. Three related
 * thumbnails with three intrinsic ratios is the same defect at smaller scale.
 * 1.778 is the ratio A4 settled on and is reused deliberately. */
.vnm-related__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1.778;
	object-fit: cover;
}

.vnm-related__name {
	margin: 0 0 4px;
	font-size: 16px;
	line-height: 22.4px;
	font-weight: 700;
}

.vnm-related__name a {
	text-decoration: none;
	color: inherit;
}

.vnm-related__name a:hover,
.vnm-related__name a:focus-visible {
	text-decoration: underline;
}

.vnm-related__date {
	font-size: 13px;
	line-height: 18.2px;
	opacity: 0.65;
}

/* -----------------------------------------------------------------------------
 * 4. Diagrams
 *
 * The renderer is restored in inc/block-patterns.php. These are the container
 * rules that live in the reference's `custom_css` post (6709), which resolves
 * BY STYLESHEET NAME and therefore does not load under this theme — the same
 * class of failure as the theme_mods. Without them the diagram renders and then
 * sits unboxed on the page background.
 *
 * `max-width: 100%` on the SVG is not cosmetic: mermaid is initialised with
 * `useMaxWidth: false` (the reference author's setting, ported verbatim and
 * deliberately not "corrected"), so it emits an SVG at its natural width, which
 * on a wide flowchart exceeds the 980 px column and would push the document
 * past the viewport. Horizontal overflow is asserted at 0 on all seven routes
 * at both widths, so this rule is load-bearing for that assertion.
 * -------------------------------------------------------------------------- */

.mermaid-wrap,
.diagram-container {
	background: #fafbfc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 1.2rem 1.5rem;
	margin: 1.5rem 0;
	overflow-x: auto;
}

.mermaid svg,
.diagram-container svg {
	max-width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	.vnm-single__nav {
		flex-wrap: wrap;
		gap: 20px;
	}

	.vnm-single__nav-cell {
		flex: 1 1 100%;
	}

	.vnm-single__nav-cell.is-next {
		text-align: left;
		margin-left: 0;
	}
}

/* =============================================================================
 * P4b · SINGLE-POST HEADER PARITY — short description, meta row, column ratio
 *                                                            (2026-08-15)
 * -----------------------------------------------------------------------------
 * Measured on the reference, /kant-space-invisible-canvas/, with JS running
 * (the earlier raw-HTML comparison was misleading — see below):
 *
 *     .col-xl-8 article   827 px      .col-xl-4 rail   443 px    (~65 / 35)
 *     here, before        920 px                       340 px    (~73 / 27)
 *
 * ONE CORRECTION WORTH RECORDING. A raw-HTML diff of the two planes said dev was
 * missing its sidebar, prev/next and related posts. It is not: `curl` does not
 * run JS, and the chat/gallery rail is mounted CLIENT-SIDE by ai-chatboxes into
 * `.pix-container-boxed > .row:first-child > .col-xl-4.col-lg-4.col-md-12.d-xl-block`
 * (its bundle picks that selector first and `.pix-sidebar-form` only as a
 * fallback). Driven through CDP, dev's dock measures 340x3557 and already holds
 * `#aic-ai-gallery`, and both planes report 58 `aic-` nodes. prev/next and
 * related were also present — under this theme's own class names, not the
 * reference's, which is what the first comparison actually keyed on.
 *
 * So the only genuinely absent pieces were the short description and the share
 * row, and the only wrong number was the column ratio. That is all this sheet
 * changes.
 *
 * The Bootstrap grid these class names come from is solutech's and does not
 * exist here, which is why the columns were sizing themselves from flow rather
 * than from `col-xl-8` / `col-xl-4`.
 * ========================================================================== */

/* NO COLUMN RULES HERE, DELIBERATELY. `vnm-chat.css` already owns this row —
 * `.pix-container-boxed > .row` is flex/nowrap with `align-items: stretch`, the
 * article is `flex: 1 1 auto; min-width: 0`, and the dock is a fixed track. A
 * second set of flex rules in this file was written first and then removed: it
 * used `align-items: flex-start`, and that value is not cosmetic there —
 * `#aic-ai-chat-wrapper` is absolute/top:0/bottom:0 inside the dock, so a column
 * that does not stretch to the article's height gives the chat a zero-height
 * positioning context and it docks at y=0 with no scroll track. Two sets of
 * rules at equal specificity would have left that decided by sheet order.
 *
 * The ratio is corrected where it is defined instead: the dock's track in
 * vnm-chat.css, 340px -> 433px (the reference's col-xl-4 is 33.33% of the 1300
 * column; measured 443 including its padding, against 340 here).
 * -------------------------------------------------------------------------- */

/* ---- short description ----------------------------------------------------
 * The reference sets this larger than body copy and directly under the title,
 * as a standfirst rather than a first paragraph. */

.vnm-short-desc {
	margin: 18px 0 0;
	font-family: var(--wp--preset--font-family--jost);
	font-size: 18px;   /* owner number, 2026-09-13 ( was 1.15em, which resolved ~19.6px on the 17px base ) */
	line-height: 1.6;
	color: var(--vnm-ink-2, #555);
}

.vnm-short-desc p {
	margin: 0;
}

/* ---- date + share row ------------------------------------------------------ */

.vnm-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin: 18px 0 28px;
	font-family: var(--wp--preset--font-family--jost);
	font-size: 15px;
	line-height: 1.4;
	color: var(--vnm-ink-2, #555);
}

/* Core global styles carry `:root :where(.is-layout-flow) > :last-child {
   margin-block-end: 0 }` at ( 0-2-0 ) — as the row's LAST child in the head
   group, .vnm-meta's 28px bottom margin was silently zeroed by it. This
   repeats the selector with our class added ( 0-3-0 ) and restores the value;
   the shorthand above stays for every non-last-child placement. */
:root :where(.is-layout-flow) > .vnm-meta:last-child {
	margin-block-end: 28px;
}

.vnm-meta__date,
.vnm-meta__share {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Inline SVG, not a Font Awesome <i>: FA is solutech's and absent here, so an
   <i class="fas …"> renders an empty box — the same tofu defect as §9. */
.vnm-meta__icon {
	font-size: 14px;   /* FA glyph — sized by font since 2026-09-13 ( was a 15px svg box ) */
	flex: 0 0 auto;
	opacity: 0.75;
}

.vnm-meta__links {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vnm-meta__links li {
	margin: 0;
}

.vnm-meta__links a {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 13px;
	line-height: 1.5;
	color: inherit;
	text-decoration: none;
	opacity: 0.75;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.vnm-meta__links a:hover,
.vnm-meta__links a:focus-visible {
	opacity: 1;
	background: rgba(0, 0, 0, 0.05);
}

/* =============================================================================
 * P4c · SINGLE-POST HEAD — full-width featured image, left-aligned header
 *                                                            (2026-08-16)
 * -----------------------------------------------------------------------------
 * Measured on the reference, /kant-main7-time-inner-sense/, at 1600:
 *
 *     element        reference            here (before)
 *     ------------   ------------------   ------------------
 *     h1             left,  850 @ 364     CENTRED, 827 @ 123
 *     .pix-short-desc left, 857 @ 364     left,    827 @ 123
 *     .post__meta    left,  857 @ 364     left,    827 @ 123
 *     .post-image    left, 1460 @  63     left,    827 @ 123
 *
 * Two separate faults.
 *
 * 1. THE TITLE WAS BEING EATEN BY THE PAGE-TITLE BAND. §4/§12 style
 *    `h1.wp-block-post-title` as the black band, and on a single post that
 *    selector matches the POST title. The reference does not do this: its
 *    `templates/header/bg_image.php` wraps the whole title box in
 *    `if ( ! is_singular('post') )`, so on a post the band renders as an empty
 *    dark strip and the title prints in the content area, left aligned. The band
 *    rules are therefore switched off for `body.single-post` here rather than
 *    rewritten there — pages and archives still want them.
 *
 * 2. THE FEATURED IMAGE WAS TRAPPED IN THE CONTENT COLUMN. The reference puts it
 *    in its own full-width cell (`.col-md-12`), above the 8/4 split.
 *
 * WHY `order` AND NOT A SECOND `.row`. The obvious structure is two rows: head
 * row, then content+rail row. It would break the chat. ai-chatboxes selects
 * `.pix-container-boxed > .row:FIRST-CHILD > .col-xl-4…d-xl-block`, so moving
 * the rail into a second row drops it to the `.pix-sidebar-form` fallback, which
 * does not exist on this plane — the chat would silently stop docking. The head
 * and image are therefore extra children OF THE SAME ROW, pulled above the pair
 * with `order`, and the row is allowed to wrap.
 * ========================================================================== */

.pix-container-boxed > .row {
	flex-wrap: wrap;
}

.vnm-single__head,
.vnm-single__feat {
	flex: 0 0 100%;
	max-width: 100%;
	min-width: 0;
}

.vnm-single__head {
	order: -2;
}

.vnm-single__feat {
	order: -1;
	margin: 0 0 clamp(28px, 3vw, 48px);
}

.vnm-single__feat img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

/* ---- the head block, left aligned like the reference ---------------------- */

body.single-post .vnm-single__head h1.wp-block-post-title {
	/* undo the page-title band (§4 + §12): on a post the reference prints a
	   plain heading in the content area, not a black full-bleed strip. */
	background: none;
	background-image: none;
	box-shadow: none;
	clip-path: none;
	margin: 0 0 6px;
	padding: 0;
	color: inherit;
	text-align: left;
	line-height: 1.2;
}

body.single-post .vnm-single__head h1.wp-block-post-title::after,
body.single-post .vnm-single__head h1.wp-block-post-title::before {
	content: none;
}

body.single-post .vnm-single__head .vnm-short-desc,
body.single-post .vnm-single__head .vnm-meta {
	text-align: left;
}

/* The reference's head column is 857 wide inside a 1460 container — i.e. it does
   NOT run the full width the image does. Same proportion, expressed against this
   plane's 1300 column. */
@media (min-width: 1200px) {
	.vnm-single__head {
		max-width: 66.666%;
	}
}

/* The reference offsets the head block (col-md-8 OFFSET-md-2), i.e. it is
   centred in the container rather than flush with the content column: measured
   857 wide at left 364 inside a 1460 container, which is (1460-857)/2. Centre
   it here for the same reason rather than reproducing a 2/12 offset that this
   layout has no grid for. */
@media (min-width: 1200px) {
	.vnm-single__head {
		margin-inline: auto;
	}
}

/* =============================================================================
 * P4d · SINGLE-POST HEAD FIXES — clearance + round share buttons  (2026-08-16)
 * -----------------------------------------------------------------------------
 * TWO DEFECTS FOUND BY SCREENSHOTTING THE RESULT, not by reading it back.
 *
 * 1. THE TITLE RAN UNDER THE MASTHEAD. §10 takes the header out of flow, and the
 *    page-title band is what used to reserve that space. Switching the band off
 *    for `body.single-post` (P4c) removed the reservation with it, so the post
 *    title painted across "Blog Research About".
 *
 *    The reference reserves it with the empty band: measured on
 *    /kant-main7-time-inner-sense/, `.custom-header` is 220px tall (105 top +
 *    115 bottom) and contains NO h1 — `bg_image.php` skips the title box for
 *    `is_singular('post')`, so the strip is pure clearance. Reproduced here as
 *    padding on `main`, which is the same reservation without a decorative empty
 *    element to maintain.
 *
 * 2. THE SHARE LINKS WERE TEXT PILLS. The reference uses round icon buttons —
 *    `ul.pix-social-round-transparent` — so these are round too, with inline
 *    brand SVGs (Font Awesome is solutech's and absent here).
 * ========================================================================== */

body.single-post main.site-main {
	/* clears the 123px overlaid masthead (--vnm-header-h) with the reference's
	   own breathing room above the title */
	padding-top: calc(var(--vnm-header-h) + 28px);
}

@media (max-width: 899px) {
	/* below the nav breakpoint the header is back in flow and reserves its own
	   space, so this padding would be a second gap stacked on the first */
	body.single-post main.site-main {
		padding-top: 0;
	}
}

/* ---- round share buttons ---------------------------------------------------
 * MEASURED on the reference (`ul.pix-social-round-transparent`, 390px):
 *
 *     li   40x40 · background transparent · 1px solid rgb(136,136,234) · radius 25px
 *     a    bare — no background, no border, colour rgb(68,68,68)
 *     ul   display flex · gap 8px
 *
 * The class name says `-transparent` and that is the point: the ring is drawn
 * in the brand purple and the circle is empty. Ours had filled them —
 * `rgba(90,40,160,.4)` behind a grey ring at 48px — which read as four solid
 * lilac discs against the reference's outlines. The ring lives on the <a> here
 * rather than the <li>; same paint, one element up.
 * -------------------------------------------------------------------------- */

.vnm-meta__links {
	gap: 8px;
}

.vnm-meta__links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--pix-main-color, #8888ea);
	border-radius: 50%;
	color: #444;
	text-decoration: none;
	opacity: 1;
	transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.vnm-meta__links a svg {
	width: 15px;
	height: 15px;
	display: block;
}

.vnm-meta__links a:hover,
.vnm-meta__links a:focus-visible {
	opacity: 1;
	background: currentColor;
}

/* The glyph has to flip against the filled circle on hover, and `currentColor`
   is the fill for BOTH — so the icon is inverted via its own rule rather than
   inheriting, which would paint it invisible on its own background. */
.vnm-meta__links a:hover svg,
.vnm-meta__links a:focus-visible svg {
	color: var(--vnm-page-bg, #fff);
}

.vnm-meta__links {
	gap: 10px;
}

/* With flex-wrap:wrap on the row (P4c), the article kept flex:1 1 auto
   from vnm-chat.css — an AUTO basis is the content width, which together with
   the 433px rail exceeded the row and pushed the rail onto its own line, taking
   the article to full width (measured: .post-content 1276 instead of 827).
   A zero basis makes it take exactly the space the fixed rail leaves. */
@media (min-width: 1200px) {
	.pix-container-boxed > .row > .vnm-single__article {
		flex: 1 1 0;
	}
}

/* -----------------------------------------------------------------------------
 * P4e · the dark strip behind the masthead on single posts     (2026-08-16)
 *
 * The reference's empty `.custom-header` is not just clearance, it is DARK: the
 * masthead sits on black and the white content sheet begins below it. Here the
 * clearance from P4d is page-coloured, so the 20% veil in §10 composited over
 * white and the header read as pale grey with white text on it — legible in a
 * screenshot, poor on a real screen, and not what the reference looks like.
 *
 * Painted as a pseudo-element on `main` rather than a background on the padding,
 * because it has to reach the viewport edges while `main` is 1364 wide. `100vw`
 * is safe for the same reason §11 is: §4 puts `overflow-x: clip` on
 * `.wp-site-blocks`, so the overshoot past the scrollbar is clipped rather than
 * opening a horizontal scroll.
 *
 * Height matches the P4d clearance exactly, so the strip ends where the content
 * begins; z-index 0 with the content at `position: relative` keeps it behind
 * text without introducing a stacking context that would trap the chat rail.
 * -------------------------------------------------------------------------- */

@media (min-width: 900px) {
	body.single-post main.site-main {
		position: relative;
	}

	body.single-post main.site-main::before {
		content: "";
		position: absolute;
		top: 0;
		left: calc(50% - 50vw);
		width: 100vw;
		height: calc(var(--vnm-header-h) + 28px);
		background: var(--vnm-chrome-bg);
		z-index: 0;
		pointer-events: none;
	}

	body.single-post main.site-main > * {
		position: relative;
		z-index: 1;
	}
}

/* `main` carries `margin-top: var(--wp--preset--spacing--6)` from the template,
 * and the P4e strip is painted from main's BORDER box — so that margin showed as
 * a ~10px page-coloured sliver above the black, with the header's veil over it.
 * The clearance is the padding now, so the margin is redundant here. */
@media (min-width: 900px) {
	body.single-post main.site-main {
		margin-top: 0;
	}
}

/* Zeroing main's margin did not close it — roughly 8px of page colour still sat
 * above the strip, so the gap is coming from the wrapper above `main`, not from
 * main itself. Rather than hunt one more box, the strip is extended upward past
 * it; `.wp-site-blocks` already clips overflow (§4), so the overshoot is not
 * visible and cannot scroll. The BOTTOM edge is what has to be exact, and that
 * is unchanged. */
@media (min-width: 900px) {
	body.single-post main.site-main::before {
		top: -32px;
		height: calc(var(--vnm-header-h) + 60px);
	}
}

/* =============================================================================
 * P4f · SINGLE-POST PARITY PASS — pill, image breakout, vertical rhythm
 *                                                            (2026-08-16)
 * -----------------------------------------------------------------------------
 * Side-by-side geometry, /kant-main7-time-inner-sense/ at 1600 (top/width/left):
 *
 *     element    reference          here (before)
 *     --------   ----------------   ----------------
 *     category   present            ABSENT
 *     title      233 / 850 / 364    175 / 851 / 335
 *     desc       320 / 857 / 364    247 / 851 / 335
 *     meta       400 / 857 / 364    331 / 851 / 335
 *     image      485 / 1460 / 63    385 / 1276 / 123
 *     content   1567 /  827 / 143  1366 /  827 / 123
 *
 * Widths were already right (851 vs 850, 827 vs 827). Three things were not:
 * the missing category pill, the image not breaking out of the container's
 * padding, and everything sitting ~58px high because the clearance strip is
 * shorter than the reference's band.
 * ========================================================================== */

/* ---- 1. the category pill -------------------------------------------------- */

.vnm-post-cat {
	margin: 0 0 14px;
}

.vnm-post-cat__pill {
	display: inline-block;
	padding: 4px 14px;
	margin: 0 6px 6px 0;
	border-radius: 999px;
	background: var(--wp--preset--color--accent, #5b4bdb);
	color: #fff;
	font-family: var(--wp--preset--font-family--jost);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.vnm-post-cat__pill:hover,
.vnm-post-cat__pill:focus-visible {
	opacity: 0.85;
	color: #fff;
}

/* ---- 2. the featured image breaks out of the container padding ------------- */

/* The reference's image is 1460 wide inside a container whose INNER width is
   1300 — it spans the full outer box, padding included, while the head and the
   content columns stay inside it. `main` here carries 32px of root padding on
   each side, so the image cancels exactly that and no more. Deliberately not a
   viewport-width breakout: the reference stops at the container, not the edge
   of the screen. */
.vnm-single__feat {
	margin-inline: calc(-1 * var(--wp--style--root--padding-left, 32px));
	width: calc(100% + 2 * var(--wp--style--root--padding-left, 32px));
	max-width: none;
}

/* ---- 3. vertical rhythm ---------------------------------------------------- */

/* The reference's empty band is 220px (105 + 115) and its title lands at 233.
   The P4d clearance was header-height + 28 = 151, which put the title at 175.
   209 reproduces the reference's first-baseline without copying a band element
   this layout does not have. The P4e strip tracks the same value so the black
   still ends exactly where the content starts. */
@media (min-width: 900px) {
	body.single-post main.site-main {
		padding-top: 209px;
	}

	body.single-post main.site-main::before {
		top: -32px;
		height: calc(209px + 32px);
	}
}

/* -----------------------------------------------------------------------------
 * P4f-fix · two regressions from the parity pass, both measured  (2026-08-16)
 *
 * 1. THE IMAGE BREAKOUT COLLAPSED THE ARTICLE. `.vnm-single__feat` is a FLEX
 *    ITEM (P4c gives it `flex: 0 0 100%`), and widening a flex item past 100%
 *    over-fills its line: the article came out 48px wide and the rail was pushed
 *    ~10,000px down the page. The breakout has to happen INSIDE the item — the
 *    figure stays exactly 100%, the image overflows it.
 *
 * 2. THE PILL PUSHED EVERYTHING DOWN. The clearance was tuned to land the TITLE
 *    at the reference's 233 when the title was the first thing in the block.
 *    Adding the category pill above it moved the title to 284. The clearance is
 *    reduced by exactly that measured 51px so the pill now occupies the space
 *    the title used to, which is what the reference does.
 * -------------------------------------------------------------------------- */

.vnm-single__feat {
	/* undo the flex-item widening from P4f */
	margin-inline: 0;
	width: auto;
	max-width: 100%;
	overflow: visible;
}

.vnm-single__feat img {
	margin-inline: calc(-1 * var(--wp--style--root--padding-left, 32px));
	width: calc(100% + 2 * var(--wp--style--root--padding-left, 32px));
	max-width: none;
}

@media (min-width: 900px) {
	body.single-post main.site-main {
		padding-top: 158px;
	}

	body.single-post main.site-main::before {
		top: -32px;
		height: calc(158px + 32px);
	}
}

/* -----------------------------------------------------------------------------
 * P4g · the featured image is FULL-BLEED, not container-width   (2026-08-16)
 *
 * Measured properly this time — the earlier reading was of the <figure>, which
 * stays at its column width on both planes, not of the <img>:
 *
 *              figure            img
 *     ref      1460 @   63       1606 @ -10      (document 1585)
 *     here     1276 @  123       1340 @  91
 *
 * So the reference's image runs past BOTH viewport edges and is clipped — a true
 * full-bleed, not the container breakout P4f assumed. Matched with the same
 * technique §11 uses, and safe for the same reason: §4 puts `overflow-x: clip`
 * on `.wp-site-blocks`, so the overshoot cannot open a horizontal scrollbar.
 *
 * Applied to the IMG and not the <figure>: the figure is a flex item
 * (`flex: 0 0 100%` from P4c) and widening a flex item past 100% over-fills its
 * line — that is what collapsed the article to 48px in the first attempt.
 * -------------------------------------------------------------------------- */

.vnm-single__feat img {
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: none;
}

/* =============================================================================
 * P4h · THE WHITE SHEET — the reference's actual structure     (2026-08-16)
 * -----------------------------------------------------------------------------
 * Walked the reference's ancestor chain from the h1 upward, collecting anything
 * with a background or a radius. There are exactly two:
 *
 *     body                                   bg rgb(2,2,2)
 *     .container.pix-width-1300…             bg #fff, radius 8px,
 *                                            1460 wide @ left 63, top 121
 *
 * So a single post is NOT a dark strip above white content — it is a WHITE CARD
 * on a DARK PAGE. The masthead floats over the dark body above the card, and the
 * card holds everything else.
 *
 * P4d/P4e reproduced the visible result with `padding-top` plus a full-bleed
 * `::before` strip. That was an approximation of the wrong model: it painted a
 * dark band inside a white page instead of revealing a dark page around a white
 * card. Both of those are switched off here in favour of the real structure —
 * the strip is no longer needed because the darkness is the body.
 *
 * Numbers are the reference's, measured, not chosen:
 *     card top 121 · width 1460 · radius 8 · side padding 80
 *     pill 201 (=> 80 of padding above it) · title 233
 * ========================================================================== */

@media (min-width: 900px) {

	body.single-post {
		background-color: #020202;
	}

	body.single-post main.site-main {
		max-width: 1460px;
		margin-top: var(--vnm-header-h); /* 123px — the masthead height; was hard-coded 121 */
		margin-inline: auto;
		padding-top: 80px;
		--vnm-card-pad: 80px;
		padding-inline: var(--vnm-card-pad);
		padding-bottom: 110px;
		background: #fff;
		border-radius: 8px;
		box-shadow: 0 5px 30px 5px rgba(0, 0, 0, 0.1);
	}

	/* ---- the same card, on pages -------------------------------------- *
	 * The reference gives EVERY non-front template this container, not just
	 * posts: `.container.pix-width-1300.pix-container-boxed`, defined at
	 * solutech css/main.css:350 under the comment "Container Overlay".
	 * Measured on the surviving install, identical on /about/, /research/,
	 * /my-account/, /shop/ and a post:
	 *
	 *     max-width 1460 · padding 80px 80px 110px · #fff · radius 8
	 *     box-shadow 0 5px 30px 5px rgba(0,0,0,.1) · position relative · top -110px
	 *
	 * Ours had it on `body.single-post` alone, so a page rendered as bare
	 * content: `main` transparent, no cap, no radius, on a WHITE body. Two
	 * things therefore have to change together — a white card is invisible
	 * until the page behind it goes dark, which is why `background-color` is
	 * here and not left to the post rule.
	 *
	 * THE OVERLAY OFFSET IS DELIBERATELY NOT TAKEN. solutech calls this rule
	 * "Container Overlay" and pulls the card up with `top: -110px` so it bites
	 * into the page-header image above it. We sit at `top: 0` instead, by
	 * owner decision — the card begins where the band ends.
	 *
	 * Two things follow, and both are improvements rather than losses. The
	 * band is no longer cropped by 110px, so the header image is seen whole;
	 * and because a relatively-positioned box leaves its original space in
	 * flow, the reference's offset also left 110px of dark air above the
	 * footer, which is now gone. `position: relative` is kept: it costs
	 * nothing at `top: 0` and keeps the card a positioning context for
	 * anything inside it.
	 *
	 * `:not(.home)` because WordPress puts `home` on a static front page too,
	 * and the front page is the one template the reference does NOT box: its
	 * container is transparent and static, because the white-card rule is
	 * scoped `.blog > …` and the front page has no `section.blog` parent.
	 * Verified on the reference — front page container: transparent, no
	 * shadow, position static.
	 * ------------------------------------------------------------------- */

	/* `:root` is here to WIN A SPECIFICITY FIGHT, not for style. vnm-chrome.css
	   §21 carries `:root .wp-site-blocks:has(.vnm-page-header) main.site-main
	   { padding-top: 0 !important }` — it zeroes the spacing `main` opens above
	   the page-header band, and it is `!important` because the block templates
	   set that padding INLINE, which nothing but an important author rule
	   beats. At (0,4,1) it also outranked this rule at (0,3,2), so the card
	   rendered with no top padding at all: measured `0px 80px 110px` against
	   the reference's `80px 80px 110px`. `:root` takes this to (0,4,2).

	   Only `padding-top` is reclaimed. That rule's `margin-top: 0` is still
	   wanted — a top margin would push the card away from the band it is meant
	   to meet. */
	/* KEYED ON THE BAND, NOT ON A LIST OF BODY CLASSES.
	 *
	 * This enumerated `body.page:not(.home)` and `body.single-product` and
	 * missed three templates that the reference boxes exactly the same way —
	 * /blog/ is `body.blog`, a category is `body.archive`, results are
	 * `body.search`, and none of them is `body.page`. /shop/ was worse: its
	 * `main` carries no `.site-main` at all, so no body-class selector would
	 * have reached it.
	 *
	 * `:has(.vnm-page-header)` asks the question that actually decides it — does
	 * this template render the header band — and the answer partitions the site
	 * correctly on its own. Verified across nine URLs: band present on /blog/,
	 * /about/, /category/, search, /shop/ and the product; absent on the front
	 * page, on a single post (which is placed by `margin-top: var(--vnm-header-h)` — 123px — instead,
	 * below) and on 404. That is precisely the set that wants the card.
	 *
	 * The `:not(.home)` guards and the `padding-top: … !important` are gone with
	 * it. They were only ever there to out-count vnm-chrome.css §21's
	 * `padding-top: 0 !important`, which has now been deleted at source because
	 * every template it matched wants the card's 80px. */
	:root .wp-site-blocks:has(.vnm-page-header) main {
		position: relative;
		top: 0;
		max-width: 1460px;
		margin-inline: auto;
		--vnm-card-pad: 80px;
		padding: 80px var(--vnm-card-pad) 110px;
		/* The parent's archive template writes `padding-bottom` as an INLINE
		   style on <main> (`--wp--preset--spacing--80`, 91.08px), and inline is
		   beaten by nothing but `!important` — the category archive was the one
		   template closing at 91 where the reference closes every one of them at
		   110. This is a different case from the rule deleted in vnm-chrome.css
		   §21: that was a competing author rule that could simply go, this is a
		   value the block markup itself carries. Only the property that actually
		   loses is marked. */
		padding-bottom: 110px !important;
		background: #fff;
		border-radius: 8px;
		box-shadow: 0 5px 30px 5px rgba(0, 0, 0, 0.1);
	}

	/* P4e's strip belonged to the old model and would now paint a black bar
	   across the top of the white card. */
	body.single-post main.site-main::before {
		content: none;
	}

	/* The head column is 857 of the card's 1300 inner width on the reference,
	   centred — same proportion, now measured against the card rather than the
	   old 1300 container. */
	.vnm-single__head {
		max-width: 857px;
	}

	/* The featured image bleeds past the CARD on the reference too (img 1606 vs
	   card 1460), so the 100vw breakout from P4g stays correct — but it must not
	   escape the card's rounded corners, which would square them off. */
	.vnm-single__feat {
		overflow: hidden;
		border-radius: 4px;
	}

	.vnm-single__feat img {
		margin-inline: 0;
		width: 100%;
		max-width: 100%;
	}
}

/* The chat dock's own closing hairline ( owner, 2026-09-13 ) */
.wp-block-group.col-xl-4.vnm-chat-dock.d-xl-block {
	border-bottom: 1px solid #e8e8e8;
}

/* The dark stage is BREAKPOINT-INDEPENDENT ( moved out of the min-width:900
   block, 2026-09-13 ): the owner wants the container behind the card to be the
   band's own colour on mobile too — a white halo around a dark-band page
   breaks the illusion the card exists to create. */
body:has(.vnm-page-header) {
	background-color: #020202;
}

/* And the container BETWEEN body and main paints its own white ( found with a
   computed-style walk: .wp-site-blocks reported #fff while the body was dark ),
   which put a white halo behind the card's rounded corners. Transparented under
   the same band key: the body's stage colour is the single source. */
body:has(.vnm-page-header) .wp-site-blocks {
	background-color: transparent;
}

@media (max-width: 899px) {
	/* The card comes to mobile too ( owner request 2026-09-13 ). Below 900 the
	   desktop card rule above simply does not run, which left the band's dark
	   body against a transparent, square-cornered main. Same white sheet, same
	   8px radius, hand-friendly padding; the card still meets the band ( the
	   chrome §21 margin-top: 0 !important is breakpoint-independent ), and the
	   !important beats the inline padding-bottom the archive template writes. */
	:root .wp-site-blocks:has(.vnm-page-header) main {
		--vnm-card-pad: 24px;
		padding: 24px var(--vnm-card-pad) 40px !important;
		background: #fff;
		border-radius: 8px;
		box-shadow: 0 5px 30px 5px rgba(0, 0, 0, 0.1);
	}
}

/* `main` carried an INLINE `margin-top: var(--wp--preset--spacing--6)` from the
   template — inline beats any selector, so P4h's 121px offset never applied and
   the card sat at y=24 with the masthead on top of it instead of on the dark
   body. The inline style and its block attribute are removed from
   templates/single.html so the offset is owned here.

   `width` also has to be restated: ds.css:186 sets
   `width: min(100% - 2*var(--page-pad), var(--wp--style--global--wide-size))`,
   which capped the card at 1364 even with `max-width: 1460px` applied.

   ⚠ CORRECTION 2026-08-29 — the restatement kept ds.css's SHAPE (`100% - <side
   inset>`) when only its CAP needed overriding. `- 8vw` was never measured off
   the reference; the reference's card is simply `width: 100%` under a 1460 cap,
   and it goes FULL-BLEED whenever the viewport is under 1460. Measured on both
   planes at four widths:

       viewport   reference card    here (before)   article: ref / here
         1280        1280 @ x0       1177.6 @ x51      737 / 560
         1440        1440 @ x0       1324.8 @ x58      843 / 707
         1800        1460 @ x170     1460   @ x170     827 / 842
         2200        1460 @ x370     1460   @ x370     827 / 842

   At and above 1587 the cap binds on both planes and they already agreed — so
   every probe run at a wide viewport reported this as CORRECT. The defect only
   exists below the cap, which is where the site is actually read: at 1440 the
   card was 115px narrow, and because the rail is pinned at 413px the whole
   115px came out of the article column, which reflowed ~2000px taller.

   (At >=1587 the article reads 842 here against the reference's 827. That 15px
   is the owner's own 413px rail against the reference's 443 — a deliberate
   difference recorded on 08-25, not a defect, and NOT to be chased.) */
@media (min-width: 900px) {
	body.single-post main.site-main {
		width: min(100%, 1460px);
		margin-top: var(--vnm-header-h); /* 123px — the masthead height; was hard-coded 121 */
	}
}

/* =============================================================================
 * P4i · TWO ROWS, TWO RAILS — the reference's actual single.php  (2026-08-16)
 * -----------------------------------------------------------------------------
 * Read from `solutech/single.php` rather than inferred from markup:
 *
 *   ROW 1  .col-md-8.offset-md-2      pill · title · short desc · meta
 *          .col-md-12                 featured image
 *          .col-xl-8 …                section.blog-article  (post content)
 *          .col-xl-4 …d-xl-block      .pix-sidebar.pix-no-padding
 *                                       #pix-inline-login-widget · #block-4
 *   ROW 2  .col-xl-8 …                .blog-article__related (prev/next)
 *                                     comments_template()
 *          .col-xl-4 …d-xl-block      .pix-sidebar.text-left.pix-no-padding
 *                                       product-sidebar · #pix-mailchimp-widget
 *                                       · #pix-related-posts-widget   (:234)
 *
 * TWO rails, not one, and related posts is in the SECOND. My previous pass put
 * prev/next and comments in the row-1 article and related posts in the row-1
 * rail — which put related beside the article body instead of beside the
 * comments, and left row 2 non-existent.
 *
 * THE CHAT STILL WORKS ACROSS THIS SPLIT, and that is the reason row 2 is added
 * AFTER row 1 rather than the head being lifted into a new row above:
 * ai-chatboxes selects
 *   `.pix-container-boxed > .row:FIRST-CHILD > .col-xl-4.col-lg-4.col-md-12.d-xl-block`
 * so its mount must remain the FIRST row's rail. Row 2's rail carries the same
 * column classes for layout, and `:first-child` keeps the chat off it.
 * ========================================================================== */

/* vnm-chat.css already makes `.pix-container-boxed > .row` a flex row with
   `align-items: stretch`; row 2 inherits that. It only needs its own tracks. */
@media (min-width: 1200px) {
	.vnm-single__row2 > .vnm-single__article2 {
		flex: 1 1 0;
		min-width: 0;
	}

	.vnm-single__row2 > .vnm-single__rail2 {
		flex: 0 0 433px;
		max-width: 433px;
		min-width: 0;
	}
}

@media (max-width: 1199.98px) {
	/* Below xl the reference collapses the rail — `d-xl-block` is what encoded
	   that — so the related list follows the comments in one column. */
	.vnm-single__row2 {
		flex-wrap: wrap;
	}

	.vnm-single__row2 > .vnm-single__article2,
	.vnm-single__row2 > .vnm-single__rail2 {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

/* Row 2 sits under row 1 with the reference's own rhythm rather than the block
   gap, which would otherwise double up with the article's bottom margin. */
.vnm-single__row2 {
	margin-top: clamp(24px, 3vw, 48px);
}

/* -----------------------------------------------------------------------------
 * The featured image spans the CARD edge to edge — no side padding.
 *
 * The card carries 80px of horizontal padding (the reference's, measured), which
 * was insetting the image with it. On the reference the <figure> measures 1460 —
 * exactly the card's full outer width — so the image cancels that padding rather
 * than living inside it.
 *
 * Applied to the IMG and not the <figure>: the figure is a flex item
 * (`flex: 0 0 100%`), and widening a flex item past 100% over-fills its line —
 * that is what collapsed the article to 48px in an earlier attempt. The figure
 * keeps its box; the image overflows it, and `overflow: visible` lets it.
 * -------------------------------------------------------------------------- */

.vnm-single__feat {
	overflow: visible;
	border-radius: 0;
}

.vnm-single__feat img {
	margin-inline: calc(-1 * var(--vnm-card-pad, 80px));
	width: calc(100% + 2 * var(--vnm-card-pad, 80px));
	max-width: none;
	border-radius: 0;
}

@media (max-width: 899px) {
	/* the card has no 80px padding below the breakpoint */
	.vnm-single__feat img {
		margin-inline: 0;
		width: 100%;
	}
}

/* -----------------------------------------------------------------------------
 * The inner `.container.pix-container-boxed` is an ALIGNFULL block, so core gives
 * it `margin-left: -32px` to escape the root padding. Inside the P4h card that is
 * wrong twice over: the card's own 80px padding is the inset now, and the
 * negative margin is applied on ONE side only, so the container sat at
 * 112 → 1409 inside a card spanning 64 → 1521 — off-centre by 32px, which is why
 * the edge-to-edge image looked shifted left.
 *
 * Neutralised on single posts: the container simply fills the card's content box,
 * and the featured image then cancels exactly the card padding to reach its edges.
 * -------------------------------------------------------------------------- */

@media (min-width: 900px) {
	body.single-post main.site-main > .pix-container-boxed {
		margin-inline: auto;
		max-width: none;
		width: 100%;
		padding-inline: 0;
	}
}

/* =============================================================================
 * P4j · COMMENT BOX — the reference's collapsed control        (2026-08-17)
 * -----------------------------------------------------------------------------
 * Reference values, read from solutech/css/single.css:5701 and confirmed against
 * the logged-in page:
 *
 *     .reddit-comment-box            border 1px #ccc · radius 15px · bg #fff
 *     textarea.form-control          height/min-height 40px · border none ·
 *                                    padding 10px · overflow hidden ·
 *                                    transition height .3s
 *     .reddit-submit/.reddit-cancel  display:none · radius 999px · float right
 *
 * The control starts as one 40px line and grows once it is engaged. Here core's
 * block rendered an always-open 254px textarea with a permanent submit button.
 *
 * Growth is driven by `:focus-within` FIRST and by the `.is-open` class second.
 * That ordering is deliberate: focus-within alone would collapse the box the
 * moment the user tabs to the submit button, losing what they typed from view.
 * The class makes the open state persist; the pseudo-class means it still works
 * with JS disabled.
 * ========================================================================== */

.vnm-comment-box {
	border: 1px solid #ccc;
	border-radius: 15px;
	padding: 0;
	background-color: #fff;
	margin-bottom: 10px;
	overflow: hidden;
}

.vnm-comment-box__input {
	display: block;
	width: 100%;
	height: 40px;
	min-height: 40px;
	padding: 10px;
	border: none;
	border-radius: inherit;
	background: transparent;
	box-shadow: none;
	resize: none;
	overflow: hidden;
	font: inherit;
	transition: height 0.3s ease;
}

.vnm-comment-box__input:focus {
	outline: none;
	box-shadow: none;
}

/* grown state — pseudo-class for no-JS, class for persistence */
.vnm-comment-box:focus-within .vnm-comment-box__input,
form.is-open .vnm-comment-box__input {
	height: 140px;
	overflow: auto;
	resize: vertical;
}

/* ---- buttons: hidden until the box is engaged ----------------------------- */

.vnm-comment-actions {
	display: none;
}

form.is-open .vnm-comment-actions {
	display: block;
}

/* Core renders the submit as a block button; the reference is a pill on the
   right, revealed with the box. Both selectors are listed because the block
   editor's button class is what core actually emits here. */
.comment-form .form-submit,
.comment-form .wp-block-button {
	display: none;
	text-align: right;
}

form.is-open .form-submit,
form.is-open .wp-block-button {
	display: block;
}

.comment-form .form-submit input[type="submit"],
.comment-form .wp-block-button__link {
	border-radius: 999px;
	padding: 6px 16px;
	font-size: 14px;
	font-weight: 700;
	text-transform: none;
	border: none;
}

.vnm-comment-cancel {
	float: right;
	margin-right: 10px;
	padding: 6px 16px;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: #333;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.vnm-comment-cancel:hover,
.vnm-comment-cancel:focus-visible {
	background: #efefef;
}

/* the reference clears its floated buttons the same way */
.vnm-comment-actions::after,
.comment-form .form-submit::after {
	content: "";
	display: table;
	clear: both;
}

/* The "Comment *" label is redundant once the placeholder carries the prompt,
   which is what the reference does — it ships no label at all. */
.comment-form label[for="comment"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* -----------------------------------------------------------------------------
 * P4k · share icons revealed by CLICK on the share button      (2026-08-18)
 *
 * WHAT THE REFERENCE ACTUALLY DOES, stated because it differs from the brief:
 * the icons are NOT hidden on its posts generally. `solutech/js/theme.js:717`
 * reads
 *
 *     if ($('body').hasClass('postid-775')) {
 *         $('.pix-social-round-transparent').hide();
 *         $('.pix-post-socials').on('click', function () {
 *             $(this).siblings('.pix-social-round-transparent').fadeToggle();
 *         });
 *     }
 *
 * i.e. a CLICK toggle, scoped to ONE post (775). On every other post the row is
 * permanently visible — which is what its /kant-main7…/ page shows.
 *
 * Click-to-reveal on EVERY post is therefore a widening of that behaviour, not
 * parity: the reference scopes the same click toggle to post 775 alone. Hover is
 * deliberately NOT a trigger — it would open the row on a pointer passing over it
 *
 * `:focus-within` is in the selector so the row opens for keyboard users when a
 * link inside it takes focus — without it the icons would be tab-reachable but
 * invisible, which is worse than hidden.
 * -------------------------------------------------------------------------- */

.vnm-meta__share {
	position: relative;
}

.vnm-meta__share-icon {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
}

/* ⚠ 2026-09-11 — NARROWED TO THE REFERENCE'S OWN SCOPE. The note above already
   said it: solutech hides this row on POST 775 ONLY (js/theme.js:717) and leaves
   it permanently visible everywhere else, which is what its /kant-main7…/ page
   shows. Hiding it on every post was a widening of that, and on this post it
   read as the share icons simply being absent — measured, the four links were
   laid out at 48x48 and painted nothing until the glyph was clicked.

   So the row is visible by default now, and the disclosure survives on the one
   post the reference applies it to. The transition stays on the element rather
   than on the hidden state, so the toggle still animates there. */
.vnm-meta__links {
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

body.postid-775 .vnm-meta__links {
	opacity: 0;
	visibility: hidden;
	transform: translateX(-6px);
}

body.postid-775 .vnm-meta__share:has(:focus-visible) .vnm-meta__links,
body.postid-775 .vnm-meta__share.is-open .vnm-meta__links {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* The glyphs were also washed out against the reference's solid dark icons —
   0.65 at rest was too faint once they are only visible on demand. */
.vnm-meta__links a {
	opacity: 0.85;
}

.vnm-meta__links a:hover,
.vnm-meta__links a:focus-visible {
	opacity: 1;
}

/* =============================================================================
 * P5. Post page — two rules the reference has and this theme never got
 * -----------------------------------------------------------------------------
 * Both come from solutech, which dev does not load, so they were simply absent
 * rather than overridden. Measured on /kant-main7-time-inner-sense/:
 *
 *   .post-content                 reference  padding-bottom 20px + 1px bottom rule
 *                                 here       nothing
 *   .aic-vertical-tabs-container  reference  margin 20px 0 0 -65px
 *                                 here       margin 0 0 0 -65px
 *
 * The -65px left pull was already right; only the 20px top was missing, which is
 * what let the tab column sit flush against whatever precedes it.
 *
 * NOT INCLUDED, deliberately: the `border-color: #444` that the reference also
 * carries on the tab containers. Every one of those borders is ZERO WIDTH on
 * both sites, so the colour draws nothing — copying it would be cargo cult. The
 * one border that IS drawn, `.aic-horizontal-tab-link` at 1px, already matches.
 * ========================================================================== */

.blog-article .post-content {
	padding-bottom: 20px;
	border-bottom: 1px solid #e8e8e8;   /* owner colour 2026-09-13 ( the reference's own rule carried #444 ) */
}

.aic-vertical-tabs-container {
	margin-top: 20px;
}

/* The tab column is the FIRST child of the post content, and this theme resets
   the first child's top margin to 0 (ds.css, `.wp-block-post-content >
   :first-child`) so an article starts flush. That reset is 0-2-0 and beat the
   plain `.aic-vertical-tabs-container` rule above, which is 0-1-0 — the
   declaration was in the cascade and lost, which is why the measurement kept
   reading 0 while the rule was plainly there.

   The reference has no such reset, so its tab column does carry the 20px. Stated
   at 0-3-0 here so it wins outright rather than depending on which stylesheet
   happens to load last. */
:root .wp-block-post-content > .aic-vertical-tabs-container {
	margin-top: 20px;
}

/* =============================================================================
 * P6. Single post — column gap and sidebar width
 * -----------------------------------------------------------------------------
 * Asked for: 45px between the content and the sidebar, sidebar 413px.
 * Measured before, at 1600 (row spans 144 → 1441 = 1297):
 *
 *     article  x144  w848   ends 992
 *     sidebar  x1008 w433
 *     gap                    16px
 *
 * `column-gap`, NOT `gap`. The row is a wrapping flex container and the featured
 * image is one of its children, so the shorthand would also stretch the vertical
 * space between the image and the columns from 16px to 45px — a change nobody
 * asked for, in a rule about horizontal spacing.
 *
 * The sidebar is pinned and the article takes the remainder, rather than both
 * being given fixed widths: 1297 − 45 − 413 = 839 falls out on its own, so the
 * pair still adds up if the layout width ever changes. Pinning both would leave
 * a rounding gap the moment it did.
 * ========================================================================== */

@media (min-width: 992px) {

	.wp-block-group.row:has(> .vnm-single__article) {
		column-gap: 45px;
	}

	.wp-block-group.row > .vnm-single__article {
		/* zero basis: an auto basis sizes from CONTENT, which is wider than the
		   space left over, so the article claimed the whole row and pushed the
		   sidebar to the next line. min-width:0 stops a wide child re-breaking it. */
		flex: 1 1 0;
		min-width: 0;
		max-width: none;
	}

	.wp-block-group.row > .col-lg-4 {
		flex: 0 0 413px;
		max-width: 413px;
	}
}

/* =============================================================================
 * P7. Share buttons — the glyph box                            (2026-08-24)
 * -----------------------------------------------------------------------------
 * ⚠ CORRECTED 2026-09-11 — THIS PORTED THE WRONG ELEMENT. It took solutech's
 * `.pf-social a` (48x48, `background: rgba(90,40,160,.4)`), which is the
 * FOOTER social row, and applied it to the POST share row. The reference styles
 * that row as `ul.pix-social-round-transparent` instead, and the class name is
 * the giveaway — measured on its post page at 390px:
 *
 *     li  40x40 · background TRANSPARENT · 1px solid rgb(136,136,234) · radius 25px
 *     a   bare — no background, no border, colour rgb(68,68,68)
 *
 * So the row is four empty rings in the brand purple, not four filled lilac
 * discs. The size and fill declarations are gone; the ring is set once on the
 * base rule further up this file.
 *
 * What remains is the part that was right and is still needed.
 * ========================================================================== */

/* The glyph has to be given a box of its own: an <svg> with no intrinsic size
   collapses inside a flex parent, which is the other half of "the first icon is
   missing" — it was rendering at zero. */
.vnm-meta__links a svg,
.vnm-meta__links a img {
	display: block;
	width: 20px;
	height: 20px;
}

/* =============================================================================
 * P8. Sidebar link type — the reference's values          (2026-08-25)
 * -----------------------------------------------------------------------------
 * Measured on the post page, links inside the right rail:
 *
 *                prod            here (before)
 *   colour       rgb(2,2,2)      rgb(0,0,0)
 *   weight       400             600
 *   size         18px            20px
 *
 * Scoped to the single-post row rather than `.col-lg-4` globally: that grid class
 * is generic and is used elsewhere, so an unscoped rule would restyle links that
 * were never part of this comparison.
 *
 * Only the three measured properties are set. The rail's other link styling —
 * hover, spacing, decoration — already matched and is deliberately left alone.
 * ========================================================================== */

.vnm-single__nav-title a {
	color: rgb(2, 2, 2);
	font-weight: 400;
	font-size: 18px;
}

/* =============================================================================
 * P7b. Comment textarea — the reference's treatment            (2026-08-25)
 * -----------------------------------------------------------------------------
 * Measured LOGGED IN on both sites (the field does not render at all for a
 * logged-out visitor, which is why an anonymous probe finds no textarea on
 * either plane and reports a false difference):
 *
 *              prod                    here (before)
 *   border     none                    1px solid rgb(220,220,231)
 *   radius     15px                    6px
 *   background transparent             #fff
 *   colour     rgb(51,51,51)           rgb(0,0,0)
 *   padding    7.2px 18px              10.8px 16.2px
 *
 * The reference's field is borderless on a transparent ground — it reads as part
 * of the card rather than as an input sunk into it. Width is deliberately not set:
 * it follows the column, which is a separate difference (827 vs 868).
 * ========================================================================== */

#comment.form-control,
.comment-respond #comment {
	border: none;
	border-radius: 15px;
	background: transparent;
	color: rgb(51, 51, 51);
	padding: 7.2px 18px;
}

/* The SECOND single-post row (comments + related rail) was never covered: the
   §P6 gap rule is scoped `:has(> .vnm-single__article)`, which matches row one
   only. Row two therefore kept the default 16px column-gap, and since both
   articles are `flex: 1 1 0` against the same 413px rail, that 29px went
   straight into the article's width:
       row 1   839 + 45 + 413 = 1297
       row 2   868 + 16 + 413 = 1297
   Giving row two the same 45px gap makes both articles 839 — the reply
   container then lines up with .vnm-single__article exactly. */
.wp-block-group.row:has(> .vnm-single__article2) {
	column-gap: 45px;
}

.wp-block-group.row > .vnm-single__article2 {
	flex: 1 1 0;
	min-width: 0;
	max-width: none;
}

/* Comment form submit row. Measured LOGGED IN against the reference:
 *     text-align   prod left    here right
 *     margin-top   prod 0       here 18px
 * The buttons themselves are `display:none` until the composer expands (the
 * collapsed Reddit-style box), so the wrapper's alignment is what positions them
 * once it opens — which is why this reads as "the buttons are in the wrong place"
 * rather than as a missing style.
 */
.comment-respond .form-submit {
	text-align: left;
	margin-top: 0;
}

/* =============================================================================
 * P9. Prev/next post navigation — arrows, weight, hover        (2026-08-26)
 * -----------------------------------------------------------------------------
 * To the owner's spec: 600 weight, a colour change on hover, and a direction
 * arrow on each side.
 *
 * ⚠ THIS SUPERSEDES THE 400 SET ON 08-25. That value came from a probe that
 * grouped links by a guessed container label and reported these nav titles as
 * "sidebar" links; the 400 it measured was not this element. The owner's 600 is
 * the correct value and this rule is the single place it is set.
 *
 * Arrows are `content` on the CELL, not on the link, so they sit outside the
 * underline/hover target and do not become part of the link text for a screen
 * reader. `.is-prev` / `.is-next` are already on the cells.
 *
 * Plain characters rather than an icon font: vn-font carries no directional
 * glyph, and adding a font dependency for two arrows would be the heavier
 * choice.
 * ========================================================================== */

.vnm-single__nav-title a {
	font-weight: 600;
	transition: color .18s ease;
}

.vnm-single__nav-title a:hover,
.vnm-single__nav-title a:focus-visible {
	color: var(--pix-main-color, #8888ea);
}

/* =============================================================================
 * §P10 · the two composer buttons on ONE row                   (2026-08-26)
 *
 * `.vnm-comment-actions` and core's `.form-submit` were separate BLOCK-level
 * siblings, so Cancel sat on its own line above Comment no matter how either
 * one was aligned — that is why this read as "wrong position" rather than as a
 * missing style. `submit_field` now emits ONE wrapper carrying both classes, so
 * all that is left here is to make it a flex row and undo the float + clearfix
 * that only existed to cope with the old two-block layout.
 * ========================================================================== */

.comment-form .vnm-comment-actions.form-submit {
	display: none;
}

form.is-open .vnm-comment-actions.form-submit {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	margin-top: 0;
}

.vnm-comment-actions.form-submit .vnm-comment-cancel {
	float: none;
	margin-right: 0;
}

.vnm-comment-actions.form-submit::after {
	content: none;
}

/* =============================================================================
 * P4n · FEATURED IMAGE — SQUARE CORNERS                        (2026-09-03)
 * -----------------------------------------------------------------------------
 * Owner's call, and it deliberately does NOT match the reference: measured,
 * prod rounds its featured image 5px and this plane was rounding it 6px. The
 * instruction is 0, so 0 it is — noted here so a future parity pass does not
 * "restore" the 5px as a fix.
 *
 * ⚠ CORRECTED. My first guess was theme.json global styles; it was not. The 6px
 * was an INLINE STYLE on the img -- `style="border-radius:6px;object-fit:cover"`
 * -- emitted by a BLOCK ATTRIBUTE in templates/single.html:
 *     wp:post-featured-image {"style":{"border":{"radius":"6px"}}}
 * No stylesheet rule can beat an inline declaration, so all three selectors below
 * were losing silently while reading as correct in the file. The attribute is now
 * removed at source, which is why this needs no !important.
 *
 * DIAGNOSIS THAT WORKED: read `img.getAttribute('style')`. A specificity hunt
 * through document.styleSheets found my rules matching and still losing, which is
 * the tell for an inline style rather than a specificity loss.
 *
 * Kept as a guard: if the attribute is ever re-added in the editor, this at least
 * squares the FIGURE, and the rule documents the intent.
 *
 * Stated on the IMG and the figure both: the image is the full-bleed 100vw
 * breakout (P4g), so a radius on either would show at the viewport edges.
 * -------------------------------------------------------------------------- */

.vnm-single__feat,
.vnm-single__feat img,
.vnm-single__feat.wp-block-post-featured-image img {
	border-radius: 0;
}

/* =============================================================================
 * §P5. SINGLE POST ON MOBILE — the card, and where the gutters live
 * -----------------------------------------------------------------------------
 * The desktop card (§P4h) is inside `@media (min-width: 900px)`, so below that
 * a post had no card at all: white body, no radius, and gutters that did not
 * line up. MEASURED against the reference at 390px, whose chain is
 *
 *     section.blog                        [0..390]
 *       .container.pix-container-boxed    [0..390]  padding 0 0 30px   <- card
 *         .row                            [0..390]  padding 25px 0 0
 *           .col-md-8.offset-md-2         [0..390]  padding 0 15px     <- gutter
 *             .pix-header-title           [15..375]
 *
 * so the card is FULL-BLEED and the 15px gutters belong to the column inside
 * it, not to the card. The featured image sits outside that column and runs
 * edge to edge, which is why it is full width in the reference and inset here.
 *
 * Ours was:
 *     main.site-main            [0..390]  padding 0 16px 24px
 *       .alignfull.container    [0..358]  padding 0 12px  margin 0 -16px
 *         .row                  [12..346]
 *
 * The container is the 12px/44px asymmetry. `margin-inline: -16px` pulls it out
 * of main's padding on both sides, but `width: 100%` still resolves against
 * main's CONTENT box (390 - 32 = 358), so it shifts left without widening —
 * left edge 0, right edge 358, 32px of dead space on the right.
 * ========================================================================== */

@media (max-width: 899.98px) {

	/* The card needs a dark page behind it, exactly as on desktop. */
	body.single-post {
		background-color: #020202;
	}

	/* Full-bleed, so the gutters can come from the column instead.
	   `margin-top` clears the fixed 50px bar (vnm-mobile-header.css §15). The
	   reference's card starts at exactly top=50 for the same reason; ours
	   started at 0 and the category pill rendered UNDER the bar — the pill is
	   the card's first child, so nothing else showed the collision. */
	body.single-post main.site-main {
		margin-top: 50px;
		padding: 0 0 30px;
		background: #fff;
		border-radius: 8px;
	}

	/* Undo the alignfull breakout. With main no longer padded there is nothing
	   to break out of, and zeroing both the shift and the width fix together is
	   what squares the two edges. */
	body.single-post main.site-main > .container {
		width: 100%;
		max-width: none;
		margin-inline: 0;
		padding-inline: 0;
	}

	/* The reference's 25px above the title block — on the FIRST row only. Its
	   row2 carries no padding of its own, and this rule at (0,4,2) was quietly
	   out-specifying the `padding: 0` set on `.vnm-single__row2` below. */
	body.single-post main.site-main > .container > .row:not(.vnm-single__row2) {
		padding-top: 25px;
	}

	/* THE GUTTER, on the two blocks that take it in the reference — the header
	   column and the body copy. The featured image is deliberately not included:
	   it is a sibling of both and runs edge to edge there. */
	body.single-post .vnm-single__head,
	body.single-post .post-content {
		padding-inline: 15px;
	}

	/* ai-chatboxes adds `div.post-content { padding-bottom: 50vh !important }`
	   under 768px to keep an iOS keyboard off the last line — 450px of blank at
	   this viewport. solutech ships the same plugin and cancels it in
	   responsive.css:1777 with the identical selector and importance; this is
	   that cancellation, and it is why the reference measures no bottom padding
	   while ours measured 450. */
	body.single-post div.post-content {
		padding-bottom: 0 !important;
	}

	/* Edge to edge, as in the reference. */
	body.single-post .vnm-single__feat {
		margin-inline: 0;
	}

	/* ---- the three spacing values that were still off ------------------- *
	 * Measured, reference vs ours before this block:
	 *     article   margin 0            vs  margin-top 24px
	 *     h1        padding 20px 0 15px vs  padding 0, margin-bottom 6px
	 *     body p    margin 0 0 15px     vs  margin 18px 0
	 * The `.row` above already supplies the 25px over the title, so the
	 * article's own top margin is double-spacing it.
	 * -------------------------------------------------------------------- */

	body.single-post .vnm-single__article {
		margin-top: 0;
	}

	/* Same selector as the desktop rule further up — `body.single-post
	   .vnm-single__head h1.wp-block-post-title { margin: 0 0 6px; padding: 0 }`
	   at (0,3,2). A shorter selector here lost to it and the title kept its 6px
	   margin; this ties on specificity and wins on order. */
	body.single-post .vnm-single__head h1.wp-block-post-title {
		margin: 0;
		padding: 20px 0 15px;
		/* The reference drops to 26px/29.9 here; ours stayed on the desktop
		   ladder at 38px/45.6 and took 172px of the header for three lines
		   where the reference takes 95 for two. Both planes already agree at
		   1440 (44.8px), so this is the mobile step that was missing. */
		font-size: 26px;
		line-height: 29.9px;
	}

	body.single-post .post-content p {
		margin: 0 0 15px;
	}

	/* ---- the second row ------------------------------------------------- *
	 * MEASURED, reference vs ours:
	 *
	 *                    reference     ours
	 *     row2 padding   0             25px 0 0
	 *     row2 margin    0             24px 0 0
	 *     row2 gap       normal (0)    16px 45px
	 *     each column    0 15px        0
	 *     rail margin    0             24px 0 0
	 *
	 * The reference's row2 contributes NO spacing of its own — it is a bare
	 * wrapper, and the 15px gutters sit on the two columns inside it, exactly
	 * as row1 puts them on its own column. Ours was adding a 25px pad, a 24px
	 * margin and a 16px row-gap on top of that while the columns ran edge to
	 * edge, so the block sat too low and its text touched the card's sides.
	 *
	 * The gap is zeroed on BOTH rows: a `wp:group` with flow layout emits a
	 * block-gap that the reference's Bootstrap rows do not have, and on row1 it
	 * was adding 16px between the header, the featured image and the body.
	 * -------------------------------------------------------------------- */

	body.single-post main.site-main .row {
		gap: 0;
	}

	body.single-post .vnm-single__row2 {
		margin: 0;
		padding: 0;
	}

	body.single-post .vnm-single__article2,
	body.single-post .vnm-single__rail2 {
		margin: 0;
		padding-inline: 15px;
	}
}