/* Desktop vs Figma fixes: single-post template (Elementor 194, every blog
   post and case study). Figma frame 4:3 "Blog/Casestudy Page Templates",
   1512 wide. Verified at 1512 with compare/anchors_dk_post.py; the article
   copy in the frame is placeholder, so the article interior is matched by
   type system and rhythm, the components by position.

   Figma centres the 915px article furniture (meta, h1, TOC, hero image,
   newsletter card, author card) on x=747.5, not on the 756 page centre - every
   one of them sits at x=290 rather than 299. The share box and the body copy
   are on the true centre. Hence the -9px nudges below. */

@media (min-width: 768px) {

	/* ── Tail order ─────────────────────────────────────────────────────
	   Figma 4:3 runs: article -> newsletter card (y=3970) -> Radiance band
	   (4368) -> share box (5157) -> author card (5320), 91px apart. The build
	   ran newsletter -> author -> share -> prev/next -> Keep reading -> Radiance,
	   because the Radiance band is appended after the whole Elementor post
	   document (functions.php) and so is a sibling of it, not of its sections.
	   display:contents on the document lets its sections and the band be
	   ordered together as items of <body>. The document element carries no
	   box styling of its own (checked), so nothing is lost. */
	/* Cream behind the reordered bands: the 91px gaps between them are body,
	   which was white. */
	body.single-post {
		display: flex;
		flex-direction: column;
		background: #EAE4D8;
	}
	body.single-post > .elementor-location-single {
		display: contents;
	}
	body.single-post > .elementor-location-header           { order: 1; }
	body.single-post .elementor-194 > .elementor-element-b6ad464 { order: 2; }
	body.single-post .elementor-194 > .elementor-element-40bade2 { order: 3; }
	body.single-post .elementor-194 > .elementor-element-fc1c0de { order: 4; }
	body.single-post .sh-inline-cta                        { order: 5; }
	body.single-post .elementor-194 > .elementor-element-4b02aba { order: 6; }
	body.single-post .elementor-194 > .elementor-element-af2ed9e { order: 7; }
	body.single-post > .elementor-location-footer           { order: 8; }

	/* ── Hero ────────────────────────────────────────────────────────── */
	/* meta y=141 (70 under the 71px header), h1 y=192, byline 405, TOC 559,
	   image 773, first paragraph 1320 */
	body.single-post .elementor-element-b6ad464 {
		padding-top: 70px !important;
		padding-bottom: 62px !important;
	}
	/* One run of 20px caps: "JUL 2, 2026 | CONTENT, CREATORS, …". The tag
	   links carried a 24px tap-target box with 8px side padding, which spread
	   them into separate pills; inline links inside a sentence are exempt from
	   the target-size rule. */
	body.single-post .elementor-element-306a43d {
		gap: 0 !important;
		align-items: baseline !important;
		line-height: 18px !important;
	}
	body.single-post .elementor-element-306a43d > * {
		line-height: 18px !important;
	}
	body.single-post .elementor-element-306a43d > :nth-child(2) {
		white-space: pre;
	}
	body.single-post .elementor-element-306a43d a[rel="tag"] {
		display: inline !important;
		min-height: 0 !important;
		padding: 0 !important;
	}
	body.single-post .elementor-element-b6ad464 > h1 {
		margin-top: 33px !important;
		position: relative;
		left: -9px;
	}
	/* Figma's script is visibly heavier than the Small cut's hairline (the
	   design used the trial file's semibold); a thin stroke restores it. */
	body.single-post .sh-byline .e-paragraph-base {
		-webkit-text-stroke: 1.1px currentColor;
	}
	body.single-post .sh-toc-box {
		margin-top: 108px !important;
		padding: 29px 27px 28px !important;
		position: relative;
		left: -9px;
	}
	body.single-post .sh-toc-box > *:not(.sh-toc-links) {
		margin-top: 2px !important;
	}
	body.single-post .sh-toc-links {
		line-height: 35px !important;
		margin-top: -2px !important;
	}
	body.single-post .elementor-element-b6ad464 > img.e-image-base {
		margin-top: 58px !important;
		border: 1px solid #3B1919 !important;
		box-sizing: border-box !important;
		position: relative;
		left: -9px;
	}

	/* Share rail: Figma draws the share box turned 90 degrees and parked
	   against the left edge (x=-23, y=216, 72x378, square corners): icons at
	   the top reading FB, YouTube, Pinterest, Instagram, then "SHARE THIS POST"
	   in the 27px display face reading bottom to top. */
	body.single-post .sh-share-rail {
		inset-inline-start: -23px !important;
		top: 145px !important;
		border-radius: 0 !important;
		align-items: flex-end !important;
		padding: 25px 9px 0 0 !important;
		gap: 13px !important;
	}
	body.single-post .sh-share-rail .sh-rail-box {
		flex-direction: column-reverse !important;
		align-items: center !important;
		width: auto !important;
		gap: 13px !important;
	}
	body.single-post .sh-share-rail .sh-rail-icon {
		width: 23px !important;
		height: 23px !important;
		transform: rotate(-90deg);
	}
	body.single-post .sh-share-rail .sh-rail-icon svg {
		width: 23px;
		height: 23px;
	}
	body.single-post .sh-share-rail .sh-rail-label {
		font-family: 'Cepelin', sans-serif !important;
		font-weight: 400 !important;
		font-size: 27px !important;
		line-height: 20px !important;
		letter-spacing: 0 !important;
		transform: rotate(180deg);
		margin-top: 5px;
	}

	/* ── Article body: Figma's type system ──────────────────────────────
	   22/22 copy centred in an 834px measure with a blank line between
	   paragraphs; 50/45 h2 in a 767 measure (59 above, 37 below); 40/36 h3 in
	   851 (64 above, 22 below). Measured from the frame's ink rows. */
	body.single-post .sh-post-content p,
	body.single-post .sh-post-content li {
		line-height: 22px !important;
		margin: 0 auto 22px !important;
		max-width: 834px;
	}
	body.single-post .sh-post-content ul,
	body.single-post .sh-post-content ol {
		max-width: 834px;
		margin: 0 auto 22px !important;
	}
	body.single-post .sh-post-content h2 {
		max-width: 767px;
		margin: 59px auto 37px !important;
		position: relative;
		left: -9px;
	}
	body.single-post .sh-post-content h3 {
		max-width: 851px;
		margin: 64px auto 22px !important;
		position: relative;
		left: -9px;
	}
	body.single-post .elementor-element-40bade2 .elementor-widget-theme-post-content > :first-child,
	body.single-post .elementor-element-40bade2 .elementor-widget-theme-post-content > .elementor-widget-container > :first-child {
		margin-top: 0 !important;
	}

	/* ── Newsletter card: 915x307, eyebrow 55px in, heading 30px under it ── */
	body.single-post .elementor-element-fc1c0de {
		padding: 0 0 91px !important;
	}
	body.single-post .sh-post-newsletter {
		padding: 54px 32px 69px !important;
		gap: 29px !important;
		box-sizing: border-box !important;
		position: relative;
		left: -9px;
	}
	body.single-post .sh-post-news-eyebrow,
	body.single-post .sh-post-news-head {
		margin: 0 !important;
	}

	/* ── Radiance band (Figma y=4368, 698 tall) ─────────────────────────
	   Left 749px: maroon diamonds, closed by a 1px #462222 rule. Right: flat
	   maroon holding a 631x600 photo with a 1px rule, 49px down, 70px in from
	   the right edge. Stag 65x98 at x=72, 84px down; heading 187px down;
	   22/22 copy at 405; a cream 147x51 button at 515. The cream luggage tag
	   (274x283) hangs 61px above the band at x=1199; it was the pink tag,
	   clipped by the band's overflow. */
	body.single-post .sh-inline-cta {
		flex-wrap: nowrap !important;
		margin: 0 0 91px !important;
		width: 100% !important;
		max-width: none !important;
		background: #AF2A45 !important;
		overflow: visible !important;
	}
	body.single-post .sh-inline-cta .sh-inline-cta-text {
		flex: 0 1 749px !important;
		min-width: 0;
		box-sizing: content-box;
		justify-content: flex-start !important;
		padding: 84px 72px 0 !important;
		margin-right: 0;
		background: url('../../img/argyle-red.svg') left top / 76px 112px repeat; /* seamless tile, 2026-10-13 */
		border-right: 1px solid #462222;
		max-width: 605px;
	}
	body.single-post .sh-inline-cta .sh-inline-cta-text::before {
		width: 65px !important;
		height: 98px !important;
		margin-bottom: 5px !important;
	}
	body.single-post .sh-inline-cta .sh-inline-cta-text h3 {
		line-height: 59px !important;
		margin: 0 0 100px !important;
	}
	body.single-post .sh-inline-cta .sh-inline-cta-text p {
		line-height: 22px !important;
		margin: 0 0 22px !important;
	}
	body.single-post .sh-inline-cta .sh-inline-cta-btn {
		min-width: 147px !important;
		height: 51px !important;
		padding: 0 !important;
		background: #EAE4D8 !important;
		color: #3B1919 !important;
		font-size: 25px !important;
		line-height: 27px !important;
		letter-spacing: -0.25px !important;
		border-radius: 4px !important;
		box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.28) !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
	}
	body.single-post .sh-inline-cta .sh-inline-cta-photo {
		flex: 0 1 631px !important;
		min-width: 0;
		object-fit: cover;
		width: 631px !important;
		height: 600px !important;
		align-self: flex-start !important;
		margin: 49px 70px 0 auto !important;
		border: 1px solid #462222;
		box-sizing: border-box;
	}
	body.single-post .sh-inline-cta .sh-inline-cta-tag {
		content: url('../../../../../uploads/2026/08/tag_transparent.png');
		top: -61px !important;
		inset-inline-end: 39px !important;
		width: 274px !important;
		height: 283px !important;
		object-fit: contain;
	}

	/* ── Share box then author card, 91px apart ──────────────────────── */
	body.single-post .elementor-element-4b02aba > .sh-share-box {
		order: 1 !important;
		margin-bottom: 91px !important;
		justify-content: flex-start !important;
		gap: 28px !important;
		padding: 0 20px !important;
	}
	body.single-post .elementor-element-4b02aba {
		row-gap: 0 !important;
	}
	body.single-post .elementor-element-4b02aba > .sh-author-box {
		order: 2 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
	/* Icons: 34px glyphs on a 53px pitch. Each sat on a dark 33px disc the
	   same colour as the glyph, so all four read as blobs. Figma keeps a disc
	   only behind Instagram, with the camera cut out in cream. */
	body.single-post .sh-share-box > .e-flexbox-base {
		gap: 19px !important;
	}
	body.single-post .sh-share-box > .e-flexbox-base > .e-flexbox-base {
		background: transparent !important;
		width: 34px !important;
		height: 34px !important;
		padding: 0 !important;
		align-items: center;
		justify-content: center;
	}
	body.single-post .sh-share-box > .e-flexbox-base > .e-flexbox-base:has(a[href*="instagram"]) {
		background: #3B1919 !important;
		border-radius: 50% !important;
	}
	body.single-post .sh-share-box > .e-flexbox-base > .e-flexbox-base:has(a[href*="instagram"]) .sh-share-icon {
		color: #EAE4D8 !important;
	}
	body.single-post .sh-share-box > .e-flexbox-base > .e-flexbox-base:has(a[href*="instagram"]) svg {
		width: 20px;
		height: 20px;
	}
	body.single-post .sh-share-box .e-paragraph-base {
		line-height: 0 !important;
		display: flex !important;
	}

	/* Author card: 914x353 with a 1px rule, portrait 45/33 in, name 28px
	   right of it and 37 down, bio indented a further 20px, 32px under the
	   name. */
	body.single-post .sh-author-box {
		align-items: flex-start !important;
		border: 1px solid #462222;
		box-sizing: border-box !important;
		min-height: 353px;
		padding: 32px 23px 32px 44px !important;
		gap: 28px !important;
		position: relative;
		left: -8px;
	}
	body.single-post .sh-author-box > .e-flexbox-base {
		padding-top: 4px;
	}
	body.single-post .sh-author-box .e-heading-base {
		-webkit-text-stroke: 1.1px currentColor;
	}
	body.single-post .sh-author-box .e-paragraph-base {
		margin: 32px 0 0 20px !important;
	}
}

/* Post footer "content coal" band (desktop). The LIVE Figma frame 4:3,
   rendered at 100% on 2026-09-17, draws it as the same olive diamond band as
   the homepage (patch rgb 109/96/45) with a cream stag. On posts it was an
   85% dark-brown wash with a near-black stag: the wash was a contrast fix
   from before the band's backdrop image rendered (it had collapsed), and the
   stag caught the single-post deer-darkening filter. Now matches the
   homepage band (rgb 113/100/47), whose cream text already passes contrast. */
@media (min-width: 768px) {
	body.single-post .elementor-element-151b1d1 {
		background-color: rgba(119, 105, 52, 0.35) !important;
	}
	body.single-post .elementor-element-151b1d1 > img[src*="deer"] {
		filter: none !important;
	}
}

/* ── Post newsletter card: signup form ──────────────────────────────────────
   Figma 4:3 / 109:6 draw First Name + Email Address fields (1px #3B1919
   outline, 55px, Source Serif 20px) and a 281x51 "Subscribe to the
   newsletter" button inside the card. The form is the site's real Flodesk
   signup ([sh_newsletter_form], template 194 widget 5b1e7c2); Flodesk renders
   its own light-DOM markup, restyled here. Its hidden decoy fields are
   display:none from Flodesk, so no rule below touches field display.
   All widths (scoped to single posts); layout per breakpoint follows. */
body.single-post .sh-post-news-form [data-ff-el="root"] .fd-form-content,
body.single-post .sh-post-news-form [data-ff-el="root"] [data-ff-el="content"] {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
body.single-post .sh-post-news-form [data-ff-el="root"],
body.single-post .sh-post-news-form [data-ff-el="root"] [data-ff-el="form"],
body.single-post .sh-post-news-form [data-ff-el="root"] [class$="__container"] {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}
body.single-post .sh-post-news-form [data-ff-el="root"] [class*="__title"],
body.single-post .sh-post-news-form [data-ff-el="root"] [class*="__subtitle"] {
	display: none !important;
}
body.single-post .sh-post-news-form [data-ff-el="fields"] {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	gap: 13px !important;
	width: 100% !important;
	margin: 0 !important;
}
body.single-post .sh-post-news-form .fd-form-group {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 0 auto !important;
}
body.single-post .sh-post-news-form input.fd-form-control {
	width: 100% !important;
	height: 55px !important;
	margin: 0 !important;
	padding: 0 19px !important;
	border: 1px solid #3B1919 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: 'Source Serif Pro', Georgia, serif !important;
	font-size: 20px !important;
	letter-spacing: -0.6px !important;
	text-transform: none !important;
	color: #3B1919 !important;
}
body.single-post .sh-post-news-form label.fd-form-label {
	/* block, not flex: Flodesk splits the label into spans at random
	   points, and flex items drop the space between "First" and "name" */
	display: block !important;
	height: 55px !important;
	line-height: 55px !important;
	white-space: nowrap !important;
	padding: 0 20px !important;
	font-family: 'Source Serif Pro', Georgia, serif !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	letter-spacing: -0.6px !important;
	text-transform: none !important;
	color: #3B1919 !important;
}
body.single-post .sh-post-news-form [data-ff-el="footer"] {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
}
body.single-post .sh-post-news-form button.fd-btn {
	width: 281px !important;
	max-width: 100% !important;
	height: 51px !important;
	margin: 0 !important;
	padding: 0 20px !important;
	border: 0 !important;
	border-radius: 4px !important;
	background: #EAE4D8 !important;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.28) !important;
	color: #462222 !important;
	font-family: 'Sofia Sans Extra Condensed', sans-serif !important;
	font-size: 25px !important;
	font-weight: 700 !important;
	line-height: 27px !important;
	letter-spacing: -0.25px !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
	cursor: pointer;
}
/* Flodesk's form is configured with "Subscribe"; the design's label is
   longer. The real text stays in the DOM for assistive tech via aria-label
   (set in the widget script below is not possible - Flodesk renders late),
   so the visible label is swapped with generated content. */
body.single-post .sh-post-news-form button.fd-btn > span {
	font-size: 0 !important;
}
body.single-post .sh-post-news-form button.fd-btn > span::after {
	content: "Subscribe to the newsletter";
	font-size: 25px;
}
body.single-post .sh-post-news-form [data-ff-el="success"],
body.single-post .sh-post-news-form [data-ff-el="error"] {
	font-family: 'Source Serif Pro', Georgia, serif !important;
	color: #3B1919 !important;
	text-align: left !important;
}

/* Desktop: eyebrow + heading in a 429px left column, the form in the right
   column at x=+509 (fields 359x55 at +58 / +126, button at +199), card 307px. */
@media (min-width: 1025px) {
	body.single-post .sh-post-newsletter {
		display: grid !important;
		grid-template-columns: 429px minmax(0, 1fr) !important;
		grid-template-rows: auto 1fr !important;
		column-gap: 47px !important;
		height: 307px !important;
		padding: 54px 47px 0 33px !important;
		box-sizing: border-box !important;
		align-content: start !important;
	}
	body.single-post .sh-post-newsletter > .sh-post-news-eyebrow {
		grid-column: 1 !important;
		grid-row: 1 !important;
		width: auto !important;
	}
	body.single-post .sh-post-newsletter > .sh-post-news-head {
		grid-column: 1 !important;
		grid-row: 2 !important;
	}
	body.single-post .sh-post-newsletter > .sh-post-news-form {
		grid-column: 2 !important;
		grid-row: 1 / span 2 !important;
		align-self: start !important;
		margin-top: 3px !important;
		width: 100% !important;
	}
	body.single-post .sh-post-news-form [data-ff-el="footer"] {
		margin-top: 18px !important;
	}
}
/* The card eyebrow's ink is 166px wide in the live frame; the site-wide
   eyebrow tracking (1.2px) spread it to 203px. */
@media (min-width: 768px) {
	body.single-post .sh-post-newsletter .sh-post-news-eyebrow {
		letter-spacing: -0.2px !important;
	}
}

/* Post/case-study hero image (2026 client covers). The band was drawn for a
   1.89 image; the new covers are 9:8 (blog) and 16:9 (case studies), so a
   485px cover crop cut the headline off the top and the strapline off the
   bottom - "CRO", "HOW TO SET UP GOOGLE SEARCH CONSOLE" and the AEO mark all
   lost a line. Keep the 915px width and let the height follow the image so
   each cover is shown whole. */
@media (min-width: 1025px) {
	html body.single img.e-image-base.e-927b715-e3a7af {
		height: auto !important;
		object-fit: contain !important;
	}
}

/* ── Client QA #47, #48, #49 — the top of a post ───────────────────────────
   Asked for, and a deliberate move away from the Figma layout:

     #47  "In this article" should sit to the left so the reader goes
          straight into the content
     #48  the featured image should move to the top right (her reasoning:
          scroll depth - the full-width cover pushed the article down)
     #49  body copy reads oddly centred, bullets especially

   The contents list and the cover are siblings in the post's intro
   container, each previously 915px wide and stacked, which cost about
   1,350px of scrolling before the first paragraph. They now share one row -
   list left, cover right - inside the same 915px column the article uses,
   so the intro takes roughly 545px instead. */
@media (min-width: 1025px) {
	html body.single-post .elementor-element-b6ad464 {
		/* The article now sits in a [250 rail | 40 gap | 915 article] grid, so
		   the intro is padded by the same amount to keep the cover, the date
		   line and the byline aligned with the article column. */
		padding-left: 444px !important;
		padding-right: 153px !important;
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		justify-content: flex-end !important;
		align-items: flex-start !important;
		column-gap: 20px !important;
	}
	/* everything else in the intro keeps its own full-width row */
	html body.single-post .elementor-element-b6ad464 > *:not(.sh-toc-box):not(img.e-927b715-e3a7af) {
		flex: 1 1 100% !important;
	}
	/* The contents list is moved out of this container by mobile-nav.js and
	   becomes a rail beside the article (see .sh-post-has-rail below), so
	   only the cover shares the intro row. */
	html body.single-post .elementor-element-b6ad464 > img.e-927b715-e3a7af {
		flex: 0 0 425px !important;
		width: 425px !important;
		max-width: 425px !important;
		height: auto !important;
		object-fit: contain !important;
		align-self: flex-start !important;
	}
	/* Body copy left-aligned; the headings stay centred as drawn. */
	html body.single-post .sh-post-content :is(p, li, ul, ol, blockquote) {
		text-align: left !important;
	}
	html body.single-post .sh-post-content :is(ul, ol) {
		padding-left: 24px !important;
	}
	html body.single-post .sh-post-content li {
		list-style-position: outside !important;
	}
}

/* ── Contents rail (client QA #47) ─────────────────────────────────────────
   mobile-nav.js moves .sh-toc-box in beside the article on desktop and tags
   the container. Figma's version - a justified run of entries across a 643px
   measure with the label to its left - only works full width, so in the rail
   it becomes a plain vertical list. */
@media (min-width: 1025px) {
	html body.single-post .sh-post-has-rail {
		display: grid !important;
		grid-template-columns: 250px 915px;
		justify-content: center;
		align-items: start;
		column-gap: 40px;
	}
	html body.single-post .sh-toc-rail {
		position: sticky;
		top: 92px;                       /* clears the pinned nav */
		max-height: calc(100vh - 130px);
		overflow-y: auto;
		flex-direction: column !important;
		padding: 22px 20px !important;
		box-sizing: border-box;
	}
	html body.single-post .sh-toc-rail > *:not(.sh-toc-links) {
		flex: 0 0 auto !important;
		max-width: none !important;
		margin-bottom: 12px;
	}
	html body.single-post .sh-toc-rail .sh-toc-links {
		display: flex !important;
		flex-direction: column;
		gap: 8px;
		max-width: none;
		text-align: left;
		line-height: 1.3;
	}
	html body.single-post .sh-toc-rail .sh-toc-item {
		display: flex;
		gap: 7px;
		align-items: baseline;
		margin-inline-end: 0;
	}
	html body.single-post .sh-toc-rail .sh-toc-item a {
		font-size: 15px;
		line-height: 1.3;
	}
	html body.single-post .sh-toc-rail .sh-toc-num {
		flex: 0 0 auto;
		font-size: 14px;
	}
}

/* TOC: the post has one empty heading, which printed a bare "xiv." with no
   title. Skip entries with no link text (phones: mobile-pages/single-post.css). */
@media (min-width: 768px) {
	body.single-post .sh-toc-links .sh-toc-item:has(> a:empty) {
		display: none !important;
	}
}

/* Tablet TOC (full-width box, no rail): links are inline-block, so a title
   that does not fit the rest of the line dropped below its numeral, leaving
   "vii.", "x.", "xii." hanging at line ends. Let them flow inline. */
@media (min-width: 768px) and (max-width: 1024px) {
	body.single-post .sh-toc-links .sh-toc-item a {
		display: inline !important;
	}
}

/* ── Contents list: a short vertical list with the rest on demand ──────────
   (2026-10-05; meeting 2026-09-21: show the first five, open the rest.)
   mobile-nav.js marks entries after the fifth .sh-toc-extra and adds a
   .sh-toc-more button; .sh-toc-collapsed on the box hides the extras. The
   same list is used at every width: Figma's justified run of entries was
   unreadable once a post had fifteen sections, numerals stranded mid-line.
   This file loads at all widths, so these rules are not in a media query. */
body.single-post .sh-toc-box.sh-toc-collapsed .sh-toc-extra {
	display: none !important;
}
body.single-post .sh-toc-box .sh-toc-links {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	text-align: left !important;
	line-height: 1.3 !important;
}
body.single-post .sh-toc-box .sh-toc-item {
	display: flex !important;
	gap: 8px;
	align-items: baseline;
	margin: 0 !important;
}
body.single-post .sh-toc-box .sh-toc-item a {
	display: inline !important;
	text-align: left !important;
}
body.single-post .sh-toc-box .sh-toc-num {
	flex: 0 0 auto;
}
body.single-post .sh-toc-more {
	align-self: flex-start;
	margin: 10px 0 0;
	padding: 2px 14px 4px;
	background: transparent;
	border: 1px solid #462222;
	border-radius: 4px;
	color: #462222;
	font: 700 16px/1.2 'Sofia Sans Extra Condensed', sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
}
body.single-post .sh-toc-more:hover,
body.single-post .sh-toc-more:focus-visible {
	background: #462222;
	color: #EAE4D8;
}

@media (min-width: 1025px) {
	/* The rail starts level with the article; the box's own top margin,
	   meant for its place above the article, pushed it 108px down. */
	html body.single-post .sh-toc-rail {
		margin-top: 0 !important;
	}

}

/* Tablet: the box is a row (label | list). The "more" button was a third
   flex item and took its own column at the right; wrap it onto its own line
   under the list instead, indented to the list's left edge. */
@media (min-width: 768px) and (max-width: 1024px) {
	body.single-post .sh-toc-box {
		flex-wrap: wrap !important;
	}
	body.single-post .sh-toc-box .sh-toc-links {
		flex: 1 1 0 !important;
		min-width: 0;
	}
	body.single-post .sh-toc-box .sh-toc-more {
		flex: 0 0 auto;
		width: auto;
		margin: 4px 0 0 auto;
	}
	body.single-post .sh-toc-box::after {
		content: '';
		flex: 0 0 100%;
		order: 1;
		height: 0;
	}
	/* 213px is the label column, so the button lines up under the list. */
	body.single-post .sh-toc-box .sh-toc-more {
		order: 2;
		margin-left: 213px;
	}
}

/* ── Guest-written posts (2026-10-05) ──────────────────────────────────────
   mobile-nav.js adds a second byline line ("Edited By …") and the editor's
   author card after the writer's. The script face has long ascenders and
   swashes, so the second line needs clear air under the first; the editor's
   card sits above the writer's with a gap between them. */
body.single-post .sh-byline.sh-byline-editor {
	margin-top: 26px !important;
}
@media (max-width: 767px) {
	body.single-post .sh-byline.sh-byline-editor {
		margin-top: 16px !important;
	}
}
body.single-post .sh-author-box.sh-author-box-editor {
	margin-bottom: 24px !important;
}

/* ── Post layout, desktop (2026-10-05, replaces the floated cover) ─────────
   mobile-nav.js builds .sh-post-rail = [cover, contents list] to the left of
   the article.

   Header: the date line, title and byline were padded to sit over the
   article column, which is right of centre once the rail is beside it, so
   the title looked off-centre under the logo. They are centred on the page
   again; the rail and article form their own centred block below.

   Rail: 300px. The cover takes the rail's width at its own proportions
   (9:8 blog covers, 16:9 case studies) and scrolls with the page; the list
   is sticky under the pinned nav for the rest of the article. */
@media (min-width: 1025px) {
	html body.single-post .elementor-element-b6ad464 {
		padding-left: 153px !important;
		padding-right: 153px !important;
		justify-content: center !important;
	}
	html body.single-post .sh-post-has-rail {
		grid-template-columns: 300px 915px;
		column-gap: 44px;
	}
	html body.single-post .sh-post-rail {
		align-self: stretch;
		min-width: 0;
	}
	/* the cover at the top of the article column (mobile-nav.js) */
	html body.single-post .sh-post-content > img.sh-post-cover-top {
		display: block !important;
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 0 56px !important;
		object-fit: contain !important;
		border: 1px solid #462222;
		box-sizing: border-box;
	}
	html body.single-post .sh-post-rail > img.sh-post-cover-rail {
		display: block !important;
		float: none !important;
		flex: none !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 0 22px !important;
		object-fit: contain !important;
		border: 1px solid #462222;
		box-sizing: border-box;
	}
	html body.single-post .sh-post-rail > .sh-toc-rail {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		left: auto;
	}
}

/* ── Contents list in the rail: the whole list, no "•••", no inner scroll ──
   (client 2026-10-12: "now that it's on the side we don't need the dots and
   the scroll, let it free".) Desktop only; tablet and phone keep the first
   five entries and the "•••" button, where the list sits above the article.
   It travels with the reader (sticky) only when it fits the window
   (mobile-nav.js adds .sh-toc-tall otherwise); posts with no headings get
   no rail at all. */
@media (min-width: 1025px) {
	html body.single-post .sh-toc-rail {
		max-height: none !important;
		overflow: visible !important;
	}
	html body.single-post .sh-toc-rail.sh-toc-box .sh-toc-extra,
	html body.single-post .sh-toc-rail.sh-toc-collapsed .sh-toc-extra {
		display: flex !important;
	}
	html body.single-post .sh-toc-rail .sh-toc-more {
		display: none !important;
	}
}

/* ── One centre line for the whole post (2026-10-13) ───────────────────────
   With [rail | article] centred as a pair, the article sat 150px right of
   the page centre while the title, author card, newsletter and Keep Reading
   stayed centred: two axes, "too much space on the left". The article is
   centred on the page again, as in the Figma, and the rail sits in the left
   margin beside it (1fr | 915 | 1fr; the rail is 250 wide, 24px off the
   article). */
@media (min-width: 1025px) {
	html body.single-post .sh-post-has-rail {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) 915px minmax(0, 1fr) !important;
		column-gap: 0 !important;
		justify-content: stretch !important;
	}
	html body.single-post .sh-post-has-rail > .sh-post-rail {
		grid-column: 1 !important;
		justify-self: end !important;
		width: 250px !important;
		margin-right: 24px !important;
	}
	html body.single-post .sh-post-has-rail > .sh-post-content {
		grid-column: 2 !important;
	}
	html body.single-post .sh-post-has-rail > :not(.sh-post-rail):not(.sh-post-content):not(.sh-post-aside) {
		grid-column: 1 / -1 !important;
	}
	html body.single-post .sh-toc-rail.sh-toc-tall {
		position: static !important;
	}
}

/* ── Newsletter issues in the blog's type (client 2026-10-13) ──────────────
   The pasted e-mails set their copy in 16px grey Roboto, centred, line by
   line in <div>s. On posts in the Newsletter category (body class from
   functions.php) all of it takes the article's type: Source Serif 22/22,
   #462222, left, with the paragraph rhythm; the words are untouched. */
body.sh-newsletter-post .sh-post-content div,
body.sh-newsletter-post .sh-post-content td,
body.sh-newsletter-post .sh-post-content center {
	font-family: 'Source Serif Pro', Georgia, serif !important;
	font-size: 22px !important;
	line-height: 22px !important;
	letter-spacing: -0.66px !important;
	color: #462222 !important;
	text-align: left !important;
}
body.sh-newsletter-post .sh-post-content :is(div, td, center) :is(span, i, em, b, strong, u, a, font) {
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
}
/* each e-mail line is its own <div>; space them like paragraphs */
body.sh-newsletter-post .sh-post-content div:not(:has(div)) {
	margin: 0 0 22px !important;
}
body.sh-newsletter-post .sh-post-content div:not(:has(div)):empty {
	margin: 0 !important;
}
body.sh-newsletter-post .sh-post-content img {
	max-width: 100% !important;
	height: auto !important;
	margin-inline: auto;
}
body.sh-newsletter-post .sh-post-content .sh-blank-line {
	display: none !important;
}

/* ── Balanced three-column post (user's pick, 2026-10-13) ──────────────────
   contents (230) | article (915) | share + newsletter (230), 30px apart,
   centred as one block, so both margins carry something. Supersedes the
   1fr | 915 | 1fr grid above. The edge "Share this post" tab goes. */
@media (min-width: 1025px) {
	html body.single-post .sh-post-has-rail,
	html body.single-post .sh-post-has-aside {
		display: grid !important;
		grid-template-columns: 230px 915px 230px !important;
		column-gap: 30px !important;
		justify-content: center !important;
		align-items: start !important;
	}
	html body.single-post .sh-post-has-rail > .sh-post-rail {
		grid-column: 1 !important;
		justify-self: stretch !important;
		width: auto !important;
		margin-right: 0 !important;
	}
	html body.single-post .sh-post-content {
		grid-column: 2 !important;
	}
	html body.single-post .sh-post-aside {
		grid-column: 3 !important;
		grid-row: 1 !important;
		position: sticky;
		top: 92px;
		display: flex;
		flex-direction: column;
		gap: 22px;
	}
	html body.single-post .elementor-element-c61935f {
		display: none !important;
	}
	.sh-aside-card {
		padding: 22px 20px;
		border: 1px solid #462222;
		background: #DCC38B;
		color: #462222;
		text-align: left;
	}
	.sh-aside-label {
		margin: 0 0 12px !important;
		font-family: 'Sofia Sans Extra Condensed', sans-serif;
		font-size: 20px;
		font-weight: 700;
		line-height: 1;
		text-transform: uppercase;
		text-align: left !important;
	}
	.sh-aside-icons {
		display: flex;
		gap: 14px;
		align-items: center;
	}
	.sh-aside-icons a {
		color: #462222 !important;
		font-size: 24px;
		line-height: 1;
	}
	.sh-aside-news {
		background: #EAC8C6 url('../../img/stat-card-hover.webp') center / cover;
	}
	.sh-aside-title {
		margin: 0 0 16px !important;
		font-family: 'Cepelin', sans-serif;
		font-size: 28px;
		line-height: 26px;
		text-transform: uppercase;
		text-align: left !important;
	}
	.sh-aside-btn {
		display: inline-block;
		padding: 12px 18px;
		border-radius: 4px;
		background: #AF2A45;
		color: #EAE4D8 !important;
		font-family: 'Sofia Sans Extra Condensed', sans-serif;
		font-size: 20px;
		font-weight: 700;
		text-transform: uppercase;
		text-decoration: none !important;
	}
}