/* ============================================================
   SWITALSKI.LAW — single Insights post (Faza 5.1).
   Port of article.jsx inline styles. Loaded ONLY on single posts
   (inc/enqueue.php), AFTER hub.css — the post reuses the hub layer
   for its shared chrome (breadcrumb, sticky TOC + scroll-spy, mobile
   CTA bar, author strip, buttons). This file adds the post-specific
   hero, body typography for CORE Gutenberg block output (so ordinary
   writing looks right without any pattern), the seven authoring
   patterns (the seventh, FAQ, reuses hub.css's accordion rules
   rather than duplicating them — see PATTERN 7 below), and the
   related-posts strip. Dark (--ink) throughout.

   Anchors: injected H2 ids + in-copy headings get scroll-margin-top
   from --scroll-offset (Phase 3.1 sticky-header mechanism; base.css
   owns scroll-behavior + the reduced-motion kill switch).

   Breakpoints per tokens.css consolidation: 640 / 920.
   Tokens only — zero hardcoded values.
   ============================================================ */

/* ------------------------------------------------------------
   Hero — meta bar, H1, deck, author byline
   ------------------------------------------------------------ */
.sl-post-hero {
	position: relative;
	overflow: hidden;
	background: var(--bg-dark);
	color: var(--fg-inv);
	padding: var(--s-8) var(--s-6) var(--sp-88);
	border-bottom: var(--bw-1) solid var(--border-inv-faint);
}

.sl-post-hero__inner {
	position: relative;
	max-width: var(--container-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--sp-56);
	align-items: center;
}

/* Right plate: featured image (framed, hard gold shadow) or, as a
   fallback when no featured image is set, the generative category
   wordmark card. */
.sl-post-hero__media {
	position: relative;
	aspect-ratio: 4 / 5;
	border: var(--bw-2) solid var(--paper);
	box-shadow: var(--shadow-card-gold-xl);
	overflow: hidden;
	background: var(--ink-pure);
}

.sl-post-hero__media img,
.sl-post-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sl-post-hero__ph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background:
		radial-gradient(ellipse 80% 60% at 30% 40%, var(--insight-ph-glow) 0%, transparent 70%),
		linear-gradient(135deg, var(--insight-ph-bg) 0%, var(--ink) 70%);
}

.sl-post-hero__ph::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at center, var(--insight-ph-dot) 1px, transparent 1.4px);
	background-size: var(--hub-mesh-size) var(--hub-mesh-size);
	opacity: var(--hub-mesh-opacity);
}

.sl-post-hero__ph-tag {
	position: relative;
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-insight-ph);
	color: transparent;
	-webkit-text-stroke: var(--bw-2) var(--insight-ph-stroke);
	letter-spacing: -0.025em;
	line-height: 0.9;
}

.sl-post-meta {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	flex-wrap: wrap;
	margin-bottom: var(--sp-28);
}

.sl-post-meta__cat {
	font-family: var(--font-mono);
	font-size: var(--fs-11);
	padding: var(--sp-6) var(--s-3);
	background: var(--gold);
	color: var(--ink);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
}

.sl-post-meta__item {
	font-family: var(--font-mono);
	font-size: var(--fs-11);
	letter-spacing: 0.10em;
	color: var(--n-300);
	text-transform: uppercase;
}

.sl-post-meta__item--updated {
	color: var(--n-400);
}

.sl-post-meta__dot {
	width: var(--s-1);
	height: var(--s-1);
	border-radius: var(--r-pill);
	background: var(--n-500);
	flex-shrink: 0;
}

.sl-post-hero__h1 {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-post-h1);
	line-height: 0.92;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--paper);
}

.sl-post-hero__deck {
	font-family: var(--font-body);
	font-style: italic;
	font-size: var(--t-post-deck);
	line-height: 1.5;
	color: var(--gold);
	margin: var(--s-5) 0 0;
	max-width: var(--mw-640);
}

.sl-post-byline {
	margin-top: var(--sp-36);
	display: flex;
	align-items: center;
	gap: var(--sp-14);
}

.sl-post-byline__photo {
	width: var(--s-7);
	height: var(--s-7);
	border-radius: var(--r-pill);
	overflow: hidden;
	border: var(--bw-1-5) solid var(--gold);
	flex-shrink: 0;
	display: block;
}

.sl-post-byline__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 18%;
	display: block;
}

.sl-post-byline__meta {
	display: flex;
	flex-direction: column;
}

.sl-post-byline__name {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-14);
	color: var(--paper);
}

.sl-post-byline__role {
	font-family: var(--font-mono);
	font-size: var(--fs-11);
	letter-spacing: 0.06em;
	color: var(--n-300);
	text-transform: uppercase;
}

/* ------------------------------------------------------------
   Body grid — TOC rail | article | share rail (3 columns).
   Scoped to .sl-post so it beats hub.css's 2-column grid AND
   hub.css's own responsive rules at every width.
   ------------------------------------------------------------ */
.sl-post .sl-hub__grid {
	grid-template-columns: var(--mw-250) minmax(0, 1fr) var(--mw-share);
	gap: var(--sp-56);
}

.sl-post .sl-hub__grid--notoc {
	grid-template-columns: minmax(0, 1fr) var(--mw-share);
}

.sl-post .sl-hub__grid--notoc .sl-hub__col {
	margin-inline: 0;
}

/* Post TOC link — no leading number (article prototype), so the
   baseline row simply holds the label. */
.sl-post-toc__link {
	align-items: flex-start;
}

/* ------------------------------------------------------------
   Vertical share rail (right of the body). LinkedIn · X · copy ·
   email. Sticky like the TOC; hidden ≤1100 (design). The copy
   button is the only new JS (assets/js/post.js).
   ------------------------------------------------------------ */
.sl-post-share {
	position: sticky;
	top: calc(var(--header-h) + var(--s-5));
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-4);
}

.sl-post-share__label {
	font-family: var(--font-mono);
	font-size: var(--fs-10);
	letter-spacing: 0.18em;
	color: var(--gold);
	text-transform: uppercase;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.sl-post-share__items {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.sl-post-share__btn {
	width: var(--sp-40);
	height: var(--sp-40);
	padding: 0;
	border: var(--bw-1-5) solid var(--border-inv-ctl);
	background: transparent;
	color: var(--n-300);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-decoration: none;
	transition: color .15s ease, border-color .15s ease;
}

.sl-post-share__btn--x {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-15);
	line-height: 1;
}

.sl-post-share__btn:hover,
.sl-post-share__btn:focus-visible {
	border-color: var(--gold);
	color: var(--gold);
}

.sl-post-share__btn:focus-visible {
	outline: var(--bw-2) solid var(--gold);
	outline-offset: var(--sp-2);
}

.sl-post-share__ok {
	display: none;
}

.sl-post-share__btn.is-copied {
	border-color: var(--gold);
	color: var(--gold);
}

.sl-post-share__btn.is-copied .sl-post-share__ico {
	display: none;
}

.sl-post-share__btn.is-copied .sl-post-share__ok {
	display: inline-flex;
}

/* ------------------------------------------------------------
   Body typography — CORE block output. Scoped to .sl-post-body so
   ordinary writing (no pattern) already looks right.
   ------------------------------------------------------------ */
.sl-post-body p {
	font-family: var(--font-body);
	font-size: var(--fs-17);
	line-height: var(--lh-loose);
	color: var(--n-100);
	margin: 0 0 var(--sp-22);
}

.sl-post-body h2 {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-post-h2);
	line-height: 1.0;
	letter-spacing: -0.01em;
	color: var(--paper);
	margin: var(--s-8) 0 var(--sp-20);
	scroll-margin-top: var(--scroll-offset);
}

.sl-post-body h3 {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-post-h3);
	line-height: 1.12;
	letter-spacing: -0.005em;
	color: var(--gold);
	margin: var(--sp-40) 0 var(--s-4);
	scroll-margin-top: var(--scroll-offset);
}

.sl-post-body h4 {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--fs-18);
	line-height: 1.15;
	color: var(--paper);
	margin: var(--sp-28) 0 var(--s-3);
	scroll-margin-top: var(--scroll-offset);
}

.sl-post-body strong,
.sl-post-body b {
	color: var(--paper);
	font-weight: 700;
}

.sl-post-body a {
	color: var(--gold);
	text-decoration: none;
	border-bottom: var(--bw-1) solid var(--gold);
	padding-bottom: var(--sp-1);
	transition: color .15s ease, border-color .15s ease;
}

.sl-post-body a:hover {
	color: var(--paper);
	border-color: var(--paper);
}

/* Plain core lists (not the arrow-list pattern) */
.sl-post-body ul:not(.sl-post-arrowlist):not(.sl-post-takeaways__list),
.sl-post-body ol:not(.sl-post-takeaways__list) {
	font-family: var(--font-body);
	font-size: var(--fs-17);
	line-height: 1.65;
	color: var(--n-100);
	margin: 0 0 var(--sp-28);
	padding-left: var(--s-5);
	display: flex;
	flex-direction: column;
	gap: var(--sp-13);
}

.sl-post-body ul:not(.sl-post-arrowlist):not(.sl-post-takeaways__list) li::marker,
.sl-post-body ol:not(.sl-post-takeaways__list) li::marker {
	color: var(--gold);
}

/* Core image + caption */
.sl-post-body figure {
	margin: var(--s-6) 0;
}

.sl-post-body img {
	display: block;
	height: auto;
}

.sl-post-body figcaption {
	font-family: var(--font-mono);
	font-size: var(--fs-11);
	letter-spacing: 0.04em;
	color: var(--n-400);
	margin-top: var(--s-2);
	text-align: center;
}

/* Core separator */
.sl-post-body hr {
	border: none;
	border-top: var(--bw-1) dashed var(--border-inv-ctl);
	margin: var(--s-6) 0;
}

/* Generic core table (author drops a plain table, no pattern class) */
.sl-post-body .wp-block-table:not(.sl-post-table) table {
	width: 100%;
	border-collapse: collapse;
	border: var(--bw-1) solid var(--border-inv-row);
}

.sl-post-body .wp-block-table:not(.sl-post-table) td,
.sl-post-body .wp-block-table:not(.sl-post-table) th {
	padding: var(--sp-14) var(--sp-20);
	font-family: var(--font-body);
	font-size: var(--fs-15-5);
	color: var(--paper);
	border: var(--bw-1) solid var(--border-inv-soft);
	text-align: left;
	vertical-align: top;
}

/* ------------------------------------------------------------
   PATTERN 1 — Key takeaways (numbered 01…n, bordered box)
   ------------------------------------------------------------ */
.sl-post-takeaways {
	border: var(--bw-2) solid var(--gold);
	background: var(--gold-tint-05);
	box-shadow: var(--shadow-card-gold-md);
	padding: var(--sp-28) var(--s-6);
	margin: var(--sp-40) 0;
}

/* .sl-post-body prefix: these labels are core <p>/<h*> too, so single-
   class rules would lose to .sl-post-body p / h3. The prefix restores
   the gold small-caps label / white heading per design. */
.sl-post-body .sl-post-takeaways__label {
	font-family: var(--font-mono);
	font-size: var(--fs-10);
	letter-spacing: 0.18em;
	color: var(--gold);
	text-transform: uppercase;
	margin: 0 0 var(--sp-14);
	display: inline-flex;
	align-items: center;
	gap: var(--sp-10);
}

.sl-post-body .sl-post-takeaways__label::before {
	content: "";
	width: var(--sp-18);
	height: var(--sp-2);
	background: var(--gold);
	display: inline-block;
}

/* Block list with a hanging mono number — flows as one wrapping
   paragraph per item (no flex/columns). */
.sl-post-takeaways__list {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: sl-takeaway;
}

.sl-post-takeaways__list li {
	counter-increment: sl-takeaway;
	position: relative;
	padding-left: var(--sp-40);
	margin: 0 0 var(--s-3);
	font-family: var(--font-body);
	font-size: var(--fs-16);
	line-height: 1.55;
	color: var(--paper);
}

.sl-post-takeaways__list li:last-child {
	margin-bottom: 0;
}

.sl-post-takeaways__list li::before {
	content: counter(sl-takeaway, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-11);
	color: var(--gold);
	font-weight: 700;
}

/* ------------------------------------------------------------
   PATTERN 2 — Callout box (gold left rule, small-caps label)
   ------------------------------------------------------------ */
.sl-post-callout {
	margin: var(--s-6) 0;
	padding: var(--sp-20) var(--s-5);
	background: var(--ink-pure);
	border-left: var(--bw-4) solid var(--gold);
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.sl-post-body .sl-post-callout__label {
	font-family: var(--font-mono);
	font-size: var(--fs-10);
	letter-spacing: 0.16em;
	color: var(--gold);
	text-transform: uppercase;
	margin: 0;
}

.sl-post-body .sl-post-callout__body {
	font-family: var(--font-body);
	font-size: var(--fs-18);
	line-height: 1.5;
	font-weight: 500;
	color: var(--paper);
	margin: 0;
}

/* ------------------------------------------------------------
   PATTERN 3 — Pull quote with attribution (core/quote)
   ------------------------------------------------------------ */
.sl-post-quote {
	margin: var(--sp-40) 0;
	padding: 0 0 0 var(--s-6);
	border-left: var(--bw-4) solid var(--gold);
	display: flex;
	flex-direction: column;
	gap: var(--sp-10);
}

.sl-post-body .sl-post-quote p {
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: none;
	font-size: var(--t-post-quote);
	line-height: 1.25;
	letter-spacing: -0.005em;
	color: var(--paper);
	margin: 0;
	font-style: italic;
}

.sl-post-quote cite {
	font-family: var(--font-mono);
	font-size: var(--fs-11);
	letter-spacing: 0.10em;
	color: var(--gold);
	text-transform: uppercase;
	font-style: normal;
}

.sl-post-quote cite::before {
	content: "— ";
}

/* ------------------------------------------------------------
   PATTERN 4 — Data table (2-column). 1:1 with the article design
   (article.jsx BodyBlock 'table', Faza 5.1a fix): subtle white
   hairlines — 14% outer border, 10% row + header separators, 8%
   column separator — with a gold-tint header row carrying gold mono
   labels. It is NOT the gold-framed hub table (that gold 2px frame +
   offset shadow + gold header rule was the 5.1 over-styling the user
   flagged). ≤920 horizontal scroll preserved.
   ------------------------------------------------------------ */
.sl-post-table {
	margin: var(--s-2) 0 var(--sp-28);
}

.sl-post-table table {
	width: 100%;
	border-collapse: collapse;
	border: var(--bw-1) solid var(--border-inv);
}

/* Reset the wp-block-library default 1px currentColor cell borders;
   the design's hairlines are re-applied explicitly below. */
.sl-post-table td,
.sl-post-table th {
	border: 0;
}

/* WordPress core (wp-includes/.../block-library/style.min.css) applies
   `.wp-block-table thead { border-bottom: 3px solid }` and
   `.wp-block-table tfoot { border-top: 3px solid }` — with no colour,
   `solid` inherits currentColor = the white body text, drawing a heavy
   3px WHITE rule under the header. Cell resets never touch the thead
   element, so it survived earlier passes. Override it (higher specificity
   than core's `.wp-block-table thead`, and post.css loads after
   wp-block-library) to the SAME 1px hairline as every other line; with
   border-collapse on, this and the first body row's 1px top collapse to
   a single identical hairline. */
.sl-post-table table thead {
	border-bottom: var(--bw-1) solid var(--border-inv);
}

.sl-post-table table tfoot {
	border-top: var(--bw-1) solid var(--border-inv);
}

.sl-post-table thead th {
	font-family: var(--font-mono);
	font-size: var(--fs-11);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold);
	font-weight: 700;
	text-align: left;
	padding: var(--sp-14) var(--sp-20);
	background: var(--gold-tint-08);
}

.sl-post-table tbody td {
	vertical-align: top;
	padding: var(--sp-14) var(--sp-20);
	font-family: var(--font-body);
	font-size: var(--fs-15-5);
	line-height: 1.5;
	color: var(--paper);
	border-top: var(--bw-1) solid var(--border-inv);
}

.sl-post-table tbody td:first-child {
	font-weight: 600;
}

/* Vertical hairline between columns (header + body), non-first cells.
   Every line in the table — outer border, header rule, row dividers and
   this column divider — uses the SAME hairline (--border-inv) so they
   read as one uniform weight (per the Claude Design render). */
.sl-post-table td:not(:first-child),
.sl-post-table th:not(:first-child) {
	border-left: var(--bw-1) solid var(--border-inv);
}

/* ------------------------------------------------------------
   PATTERN 5 — In-article CTA box
   ------------------------------------------------------------ */
.sl-post-cta {
	margin: var(--s-7) 0;
	border: var(--bw-2) solid var(--gold);
	background: var(--ink-pure);
	box-shadow: var(--shadow-card-gold-lg);
	padding: var(--s-6) var(--sp-36);
}

/* .sl-post-body prefix: eyebrow (<p>) and heading (<h3>) would otherwise
   lose to .sl-post-body p / h3 — the eyebrow must be GOLD, the heading
   WHITE (not the gold that .sl-post-body h3 applies). */
.sl-post-body .sl-post-cta__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-10);
	letter-spacing: 0.16em;
	color: var(--gold);
	text-transform: uppercase;
	margin: 0 0 var(--sp-14);
}

.sl-post-body .sl-post-cta__heading {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-post-cta-h);
	line-height: 1.1;
	letter-spacing: -0.005em;
	color: var(--paper);
	margin: 0 0 var(--sp-14);
}

.sl-post-body .sl-post-cta__body {
	font-family: var(--font-body);
	font-size: var(--fs-16);
	line-height: 1.65;
	color: var(--n-100);
	margin: 0 0 var(--s-5);
	max-width: var(--mw-640);
}

.sl-post-cta__actions {
	margin: 0;
}

.sl-post-cta .wp-block-button__link {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-16);
	color: var(--ink);
	background: var(--gold);
	border-radius: var(--r-pill);
	padding: var(--s-4) var(--sp-28);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	transition: background-color .15s ease;
}

/* Filled primary button carries the arrow, matching the design Button. */
.sl-post-cta .wp-block-button__link::after {
	content: ">";
	font-weight: 700;
}

.sl-post-cta .wp-block-button__link:hover,
.sl-post-cta .wp-block-button__link:focus-visible {
	background: var(--gold-deep);
}

.sl-post-body .sl-post-cta__secondary {
	font-family: var(--font-body);
	font-size: var(--fs-14);
	font-weight: 600;
	color: var(--gold);
	margin: var(--s-4) 0 0;
}

.sl-post-cta__secondary a {
	color: var(--gold);
	text-decoration: none;
	border-bottom: var(--bw-1) solid transparent;
	transition: border-color .15s ease;
}

.sl-post-cta__secondary a:hover,
.sl-post-cta__secondary a:focus-visible {
	border-bottom-color: var(--gold);
}

/* ------------------------------------------------------------
   PATTERN 6 — Arrow list (">" bulleted body list)

   Each item is a BLOCK with a hanging gold marker, so it flows as
   ONE wrapping paragraph: the ">" hangs left, then the bold run-in
   lead and normal-weight continuation sit inline and wrap normally.
   No flex, grid, columns, or definition-list layout — a bold lead
   phrase can never push the body text into a second column.
   ------------------------------------------------------------ */
.sl-post-arrowlist {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--sp-28);
}

.sl-post-arrowlist li {
	position: relative;
	padding-left: var(--sp-28);
	margin: 0 0 var(--sp-14);
	font-family: var(--font-body);
	font-size: var(--fs-17);
	line-height: 1.65;
	color: var(--n-100);
}

.sl-post-arrowlist li:last-child {
	margin-bottom: 0;
}

.sl-post-arrowlist li::before {
	content: ">";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--gold);
	font-weight: 700;
}

/* ------------------------------------------------------------
   PATTERN 7 — FAQ accordion (Faza 5.3). Authoring-only wrapper
   spacing — the accordion ITSELF (item/question/button/icon/panel)
   is entirely hub.css's existing .sl-hub-faq__* rules, already
   loaded on every post (Faza 5.1 TOC/mobile-bar reuse) and applied
   unchanged here by switalski_post_process_faq() (inc/post.php),
   which swaps the pattern's sl-post-faq__* hook classes for the
   hub's sl-hub-faq__* markup at render time. Zero duplicated CSS.
   ------------------------------------------------------------ */
.sl-post-faq {
	margin: var(--s-7) 0;
}

/* ------------------------------------------------------------
   End-of-article marker
   ------------------------------------------------------------ */
.sl-post-end {
	margin-top: var(--s-8);
	padding-top: var(--s-6);
	border-top: var(--bw-2) solid var(--gold);
	display: flex;
	align-items: center;
	gap: var(--s-4);
}

.sl-post-end__mark {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-24);
	color: var(--gold);
	text-transform: uppercase;
	letter-spacing: -0.005em;
}

.sl-post-end__dot {
	color: var(--paper);
}

.sl-post-end__label {
	font-family: var(--font-mono);
	font-size: var(--fs-11);
	letter-spacing: 0.10em;
	color: var(--n-400);
	text-transform: uppercase;
}

/* ------------------------------------------------------------
   "Continue reading" — related posts strip
   ------------------------------------------------------------ */
.sl-post-related {
	background: var(--bg-dark);
	color: var(--fg-inv);
	padding: var(--sp-88) var(--s-6);
	border-top: var(--bw-1) solid var(--border-inv-faint);
}

.sl-post-related__inner {
	max-width: var(--container-max);
	margin: 0 auto;
}

.sl-post-related__h2 {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-post-related-h2);
	line-height: 0.98;
	letter-spacing: -0.01em;
	color: var(--paper);
	margin: var(--s-4) 0 var(--sp-40);
}

.sl-post-related__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--s-5);
}

.sl-post-related__card {
	display: grid;
	grid-template-columns: var(--mw-160) 1fr;
	border: var(--bw-1) solid var(--border-inv-mid);
	background: var(--surface-inv-card);
	box-shadow: var(--shadow-card-gold);
	text-decoration: none;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.sl-post-related__card:hover,
.sl-post-related__card:focus-visible {
	background: var(--surface-inv-card-hover);
	transform: translate(var(--s-1), var(--s-1));
	box-shadow: 0 0 0 0 var(--gold);
}

.sl-post-related__thumb {
	position: relative;
	min-height: var(--post-thumb-min);
	background:
		radial-gradient(ellipse 80% 60% at 30% 40%, var(--insight-ph-glow) 0%, transparent 70%),
		var(--insight-ph-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.sl-post-related__thumb-tag {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-post-ph);
	color: transparent;
	-webkit-text-stroke: var(--bw-2) var(--insight-ph-stroke);
	letter-spacing: -0.025em;
	line-height: 0.9;
}

.sl-post-related__card-body {
	padding: var(--sp-22) var(--s-5);
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

.sl-post-related__card-meta {
	display: flex;
	align-items: center;
	gap: var(--sp-10);
	flex-wrap: wrap;
}

.sl-post-related__card-tag {
	font-family: var(--font-mono);
	font-size: var(--fs-10);
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--gold);
	border: var(--bw-1) solid var(--gold-line-45);
	padding: var(--sp-2) var(--sp-6);
}

.sl-post-related__card-date {
	font-family: var(--font-mono);
	font-size: var(--fs-10);
	letter-spacing: 0.10em;
	color: var(--n-400);
	text-transform: uppercase;
}

.sl-post-related__card-title {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--fs-18);
	line-height: 1.15;
	color: var(--paper);
	letter-spacing: -0.005em;
}

.sl-post-related__card-more {
	margin-top: auto;
	font-family: var(--font-body);
	font-size: var(--fs-12);
	font-weight: 600;
	color: var(--gold);
	display: inline-flex;
	align-items: center;
	gap: var(--sp-6);
}

/* Keyboard visibility on the dark surface — parallels hub.css */
.sl-post-body a:focus-visible,
.sl-post-cta__secondary a:focus-visible,
.sl-post-related__card:focus-visible,
.sl-post-toc__link:focus-visible {
	outline: var(--bw-2) solid var(--gold);
	outline-offset: var(--sp-2);
}

/* ------------------------------------------------------------
   Responsive (design breakpoints: share hidden ≤1100, hero image
   hidden ≤920; body grid TOC|body|share → TOC|body → single).
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
	.sl-post-hero__inner {
		grid-template-columns: 1.4fr 1fr;
		gap: var(--sp-36);
	}

	/* Share rail collapses; body grid keeps TOC | article. */
	.sl-post .sl-hub__grid {
		grid-template-columns: var(--mw-200) minmax(0, 1fr) 0;
		gap: var(--sp-40);
	}

	.sl-post .sl-hub__grid--notoc {
		grid-template-columns: minmax(0, 1fr) 0;
	}

	.sl-post-share {
		display: none;
	}
}

@media (max-width: 920px) {
	/* Hero collapses to one column; the framed image drops out. */
	.sl-post-hero__inner {
		grid-template-columns: 1fr;
	}

	.sl-post-hero__media {
		display: none;
	}

	/* Body stacks: TOC (static, via hub.css) above the article. */
	.sl-post .sl-hub__grid,
	.sl-post .sl-hub__grid--notoc {
		grid-template-columns: 1fr;
		gap: var(--s-6);
	}

	.sl-post-table {
		overflow-x: auto;
	}
}

@media (max-width: 640px) {
	.sl-post-related__grid {
		grid-template-columns: 1fr;
	}

	.sl-post-related__card {
		grid-template-columns: 1fr;
	}

	.sl-post-related__thumb {
		min-height: var(--mw-160);
	}
}