/*!
 * Single blog post — premium reading experience.
 * Loaded only on single posts (see functions.php). Restyles Blocksy's rendered
 * post (hero-section + entry-content); the header/footer are untouched.
 * ================================================================== */

.single-post {
	--sp-accent: var(--palette-color-1, #FE4A22);
	--sp-ink: var(--palette-color-4, #111518);
	--sp-text: #313539;                 /* comfortable body ink */
	--sp-muted: #6f6a5e;
	--sp-peach: color-mix(in srgb, var(--palette-color-5, #FFE2C9) 62%, #fff);
	--sp-peach-2: color-mix(in srgb, var(--palette-color-5, #FFE2C9) 90%, #fff);
	--sp-hair: #e9e2da;
	--sp-table-line: #e6e7e9;           /* neutral hairline frame + dividers on tables */
	--sp-table-head: #f3f4f6;           /* neutral grey header row (body rows stay white) */
	--sp-read: 42rem;                   /* ~672px reading column (roomier column gaps) */
	--sp-hero: 50rem;                   /* wider title band so the headline isn't squeezed */
	--sp-body: "IBM Plex Sans", -apple-system, system-ui, sans-serif;

	/* Body-image drop shadow: a HARD offset shape, not a haze. Blur 0 and alpha 1
	   give a solid black silhouette sitting behind the image, which is the look
	   in the reference. The spread below is derived from the blur, so at blur 0
	   it is 0 too and the shadow keeps the image's exact rounded outline.
	   Raise the blur only if a softer edge is ever wanted. */
	--sp-img-shadow-x: 6px;
	--sp-img-shadow-y: 6px;   /* equal to x: the offset sits on the diagonal */
	--sp-img-shadow-blur: 0px;
	--sp-img-shadow-alpha: 1;
	--sp-display: "Bricolage Grotesque", "Momo Trust Display", var(--sp-body);
}

/* ---- One continuous peach canvas -----------------------------------
 * The peach + soft "bubbles" extend from the very top edge (behind the
 * floating header pill) down through the hero, then fade into the light
 * reading zone. Header and hero sit on it transparently. */
.single-post .site-main { overflow-x: clip; }
.single-post #main-container {
	position: relative;
	background: #fff;
	isolation: isolate;
}
.single-post #main-container > * { position: relative; z-index: 1; }
.single-post #main-container::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: clamp(30rem, 42vw, 35rem);
	z-index: 0;
	pointer-events: none;
	/* Base peach + five soft, premium bubbles of varied size and position. */
	background:
		radial-gradient(42rem 42rem at 4% 6%,   var(--sp-peach-2) 0%, transparent 46%),
		radial-gradient(24rem 24rem at 96% -5%, var(--sp-peach-2) 0%, transparent 44%),
		radial-gradient(32rem 32rem at 82% 94%, color-mix(in srgb, var(--sp-peach-2) 82%, #fff) 0%, transparent 46%),
		radial-gradient(16rem 16rem at 20% 98%, var(--sp-peach-2) 0%, transparent 50%),
		radial-gradient(13rem 13rem at 60% 26%, color-mix(in srgb, var(--sp-peach-2) 78%, #fff) 0%, transparent 52%),
		var(--sp-peach);
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
	        mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
}

/* Hero band — transparent; the peach comes from the canvas behind it. */
.single-post .hero-section {
	background: transparent !important;
	max-width: none !important;
	width: 100%;
	padding-block: clamp(1.5rem, 3.5vw, 2.75rem) clamp(2.25rem, 5vw, 4rem);
	text-align: center;
}
.single-post .hero-section .entry-header {
	max-width: var(--sp-hero);
	margin-inline: auto;
	padding-inline: 1.25rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.1rem;
}

/* Breadcrumbs above the title — small, muted, accent-dot separators. Styles
 * cover both the Rank Math markup (.rank-math-breadcrumb) and the fallback ol. */
.single-post .ld-breadcrumbs {
	max-width: var(--sp-read);
	margin: 0 auto 1.1rem;
	padding-inline: 1.25rem;
	font-family: var(--sp-body);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--sp-muted);
}
/* Shared row layout for both markups. */
.single-post .ld-breadcrumbs__list,
.single-post .ld-breadcrumbs--rm .rank-math-breadcrumb p {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .35rem .55rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.single-post .ld-breadcrumbs a { color: var(--sp-muted); text-decoration: none; }
.single-post .ld-breadcrumbs a:hover { color: var(--sp-accent); }

/* Fallback (ol) markup. */
.single-post .ld-breadcrumbs__list li { display: inline-flex; align-items: center; gap: .55rem; }
.single-post .ld-breadcrumbs__list li:not(:first-child)::before {
	content: "";
	width: 5px; height: 5px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--sp-accent) 55%, transparent);
}
.single-post .ld-breadcrumbs__list [aria-current="page"] { color: var(--sp-ink); }

/* Rank Math markup — replace its text separators with the same accent dot. */
.single-post .ld-breadcrumbs--rm .separator {
	display: inline-block;
	width: 5px; height: 5px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--sp-accent) 55%, transparent);
	font-size: 0; line-height: 0; overflow: hidden;
}
.single-post .ld-breadcrumbs--rm .last { color: var(--sp-ink); }

/* Keep the current-page crumb on one line on small screens. */
@media (max-width: 600px) {
	.single-post .ld-breadcrumbs--rm .last,
	.single-post .ld-breadcrumbs__list [aria-current="page"] {
		max-width: 16rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

/* Title — font, size, colour and line-height all follow the Blocksy Customizer
 * (Page Title / H1 typography), so changes there take effect. We only balance
 * the wrap and reset the margin. */
.single-post .page-title,
.single-post .entry-header .page-title {
	margin: 0;
	text-wrap: balance;
}

/* Hide Blocksy's default meta row — the custom byline below replaces it. */
.single-post .hero-section .entry-meta { display: none !important; }

/* Byline — avatar · "Written by <author>" · divider · "Last updated <date>",
 * a single centred row under the title (stacks beside the avatar on phones). */
.single-post .ld-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	margin-top: 1.4rem;
	font-family: var(--sp-body);
}
.single-post .ld-meta__avatar { flex: 0 0 auto; line-height: 0; }
.single-post .ld-meta__avatar img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 2px 8px rgba(17, 21, 24, .16);
}
.single-post .ld-meta__text {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .3rem .7rem;
	font-size: .9rem;
	line-height: 1.35;
	color: var(--sp-muted);
}
.single-post .ld-meta__by { color: var(--sp-muted); }
.single-post .ld-meta__by a { color: var(--sp-ink); font-weight: 600; text-decoration: none; }
.single-post .ld-meta__by a:hover { color: var(--sp-accent); text-decoration: underline; text-underline-offset: 2px; }
.single-post .ld-meta__date { color: var(--sp-muted); }
.single-post .ld-meta__sep {
	width: 1px;
	height: 1.1em;
	background: color-mix(in srgb, var(--sp-ink) 26%, transparent);
}

/* Phones: stack the two lines beside the avatar and drop the divider. */
@media (max-width: 520px) {
	.single-post .ld-meta__text { flex-direction: column; align-items: flex-start; gap: .12rem; }
	.single-post .ld-meta__sep { display: none; }
}

/* ---- Three-column reading layout -----------------------------------
 * On this theme the hero (title + meta) lives INSIDE <article>, alongside
 * .entry-content. We grid <article>: breadcrumbs + hero span the full width
 * across the top, then three columns below — a sticky ToC/share rail (left),
 * the reading column (centre), and a sticky newsletter card (right). The rails
 * are injected as siblings of .entry-content via Blocksy hooks (functions.php).
 * Below the breakpoint everything collapses to one centred column and the
 * rails stack (ToC/share above the article, newsletter after it). */
.single-post article {
	max-width: 44rem;            /* single-column default; widened by the grid */
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/* Smooth in-page jumps to headings. Honour prefers-reduced-motion, so users who
 * opt out get no animated anchor jumps. The landing offset is NOT set here: the
 * sticky header owns it globally via scroll-padding-top (--ld-header-clear in
 * style.css), so a heading clears the bar without a second number to keep in
 * sync. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* Hide Blocksy's built-in subscribe block on posts — the rail card replaces it. */
.single-post .ct-newsletter-subscribe-container { display: none !important; }

/* Hide the in-content Kadence Table of Contents block. On desktop the sticky
 * rail ToC replaces it (and reuses the heading IDs Kadence still emits); on
 * mobile the article stays clean and content-first. */
.single-post .wp-block-kadence-tableofcontents { display: none !important; }

.single-post .ld-rail { font-family: var(--sp-body); }
.single-post .ld-rail--left  { margin-bottom: 2.25rem; }
.single-post .ld-rail--right { margin-top: 2.75rem; }

@media (min-width: 1180px) {
	.single-post article {
		display: grid;
		grid-template-columns:
			minmax(0, 16rem)
			minmax(0, var(--sp-read))
			minmax(0, 16rem);
		justify-content: center;
		align-items: start;
		column-gap: clamp(2rem, 3.5vw, 3.5rem);
		max-width: 81rem;
		padding-inline: 1.5rem;
	}
	.single-post article > * { grid-column: 2; min-width: 0; }   /* default: centre */
	.single-post .ld-breadcrumbs,
	.single-post .hero-section { grid-column: 1 / -1; }
	.single-post .ld-rail--left  { grid-column: 1; }
	.single-post .ld-rail--right { grid-column: 3; }

	/* The rails stick under the sticky header, never behind it: the offset is
	 * the shared clearance token (style.css), plus a little air. */
	.single-post .ld-rail {
		position: sticky;
		top: calc(var(--ld-header-clear, 96px) + .5rem);
		align-self: start;
		margin: 0;
	}
	.single-post .entry-content { padding-inline: 0; }
}

/* Table of contents (left rail).
 * The list is the shared .ld-toc component (style.css) and is built client-side
 * from the post's <h2>s by single-post.js, which also marks the section being
 * read. Only the container is set here: at the three-column breakpoint the
 * mobile card is stripped to a hairline rule, matching the legal pages. */
@media (min-width: 1180px) {
	.single-post .ld-toc {
		margin: 0;
		padding: .25rem 0 .25rem 1.25rem;
		background: none;
		border: 0;
		border-left: 1px solid var(--sp-hair);
		border-radius: 0;
		/* A long post must not push its last entries past the viewport while the
		 * rail is stuck; single-post.js keeps the active item in view. */
		max-height: calc(100vh - 12rem);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
}

/* Share links (left rail, under the ToC). */
.single-post .ld-share { margin-top: 1.4rem; padding-left: .15rem; }
.single-post .ld-share__label {
	margin: 0 0 .6rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sp-muted);
}
.single-post .ld-share__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.single-post .ld-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	border: 1px solid var(--sp-hair);
	background: #fff;
	color: var(--sp-muted);
	transition: color .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.single-post .ld-share__link svg { width: 17px; height: 17px; }
.single-post .ld-share__link:hover {
	color: var(--sp-accent);
	border-color: color-mix(in srgb, var(--sp-accent) 40%, var(--sp-hair));
	transform: translateY(-2px);
	box-shadow: 0 8px 18px -8px rgba(17, 21, 24, .28);
}

/* ---- images in the post body -------------------------------------------
 * Rounded and lifted off the page with a soft shadow, so a screenshot reads as
 * an object rather than as part of the text.
 *
 * SCOPE, deliberately narrow: `.single-post .entry-content` only. That is the
 * article body and nothing else, so pages, the homepage, the header, the
 * footer, the byline avatar, the share icons and both rails are untouched. Do
 * not widen this selector to `.single-post img`.
 *
 * Table cells are excluded below: those images are product logos sitting inline
 * with text, where a drop shadow reads as a mistake rather than as depth.
 * ---------------------------------------------------------------------- */
.single-post .entry-content .wp-block-image img,
.single-post .entry-content figure.wp-block-image img {
	border-radius: 14px;
	border: 1px solid rgba(17, 21, 24, .08);
	/* A solid black shadow, offset down and right, with no blur and no spread:
	   the image reads as a card sitting on a flat black silhouette rather than
	   floating over a haze. Tuned by the four knobs on .single-post above. */
	box-shadow:
		var(--sp-img-shadow-x) var(--sp-img-shadow-y) var(--sp-img-shadow-blur)
		calc(var(--sp-img-shadow-blur) * -.38) rgba(0, 0, 0, var(--sp-img-shadow-alpha));
}

/* Inline furniture keeps its flat treatment. */
.single-post .entry-content table img,
.single-post .entry-content img.wp-smiley,
.single-post .entry-content .wp-block-image.is-style-flat img {
	border-radius: 0;
	border: 0;
	box-shadow: none;
}

/* Newsletter card (right rail) — the footer's black halftone treatment. */
.single-post .ld-nl-card {
	position: relative;
	overflow: hidden;
	/* Lets the wordmark below size itself from the CARD's width, so the same
	   card works in the narrow right rail and as the full-width mobile CTA. */
	container-type: inline-size;
	border-radius: 18px;
	/* The deep bottom padding is the wordmark's strip: without it the watermark
	   runs under the "no spam" line and the two fight each other. */
	padding: 1.5rem 1.4rem 3rem;
	background: #000;
	color: #f2f4f6;
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 0 20px 44px -26px rgba(17, 21, 24, .55);
}

/* Texture layer: the footer's dot grid plus its soft top wash, same values. */
.single-post .ld-nl-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	pointer-events: none;
	background-image:
		radial-gradient(circle at center, rgba(255, 255, 255, .04) 1px, transparent 1.15px),
		linear-gradient(to bottom, rgba(255, 255, 255, .05), transparent 22%);
	background-size: 6px 6px, 100% 100%;
}

/* The wordmark watermark, built exactly like the footer's: real text filled
   through a halftone dot grid. Sized in cqw so the whole word spans the card at
   any width, and cropped at the bottom edge by the card's overflow. */
.single-post .ld-nl-card::after {
	content: "LINODASH";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -.12em;   /* clipped at the card edge, as in the footer */
	z-index: 0;
	pointer-events: none;
	text-align: center;
	font-family: "Bricolage Grotesque", "Space Grotesk", var(--sp-body);
	font-weight: 700;
	font-size: 3rem;        /* fallback where container units are unsupported */
	font-size: 19cqw;
	line-height: 1;
	letter-spacing: -.012em;
	white-space: nowrap;
	color: rgba(255, 255, 255, .09);
	background-image: radial-gradient(
		circle at center,
		rgba(255, 255, 255, .22) max(1px, .0088em),
		transparent max(1.15px, .0101em)
	);
	background-size: max(5px, .05em) max(5px, .05em);
	background-size: max(5px, round(nearest, .05em, 1px)) max(5px, round(nearest, .05em, 1px));
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
	.single-post .ld-nl-card::after {
		-webkit-background-clip: text;
		        background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
	}
}

.single-post .ld-nl-card > * { position: relative; z-index: 1; }
.single-post .ld-nl-card__title {
	font-family: var(--sp-display);
	margin: 0 0 .55rem;
	font-size: 1.22rem;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: #fff;
}
.single-post .ld-nl-card__desc {
	margin: 0 0 1.1rem;
	font-size: .9rem;
	line-height: 1.55;
	color: color-mix(in srgb, #f2f4f6 78%, transparent);   /* 11:1 on black */
}

/* Newsletter form inside the light card (single.css ships its own form styling
 * since homepage.css isn't loaded here). Stacked: input over full-width CTA. */
.single-post .ld-nl-card .nlf { width: 100%; }
.single-post .ld-nl-card .nlf-form {
	display: flex;
	flex-direction: column;
	gap: .55rem;
}
.single-post .ld-nl-card .nlf-form .nlf-input {
	width: 100%;
	height: 46px;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, .14) !important;
	border-radius: 11px !important;
	background: #fff !important;
	box-shadow: none !important;
	color: var(--sp-ink);
	font: inherit;
	font-size: .95rem;
	padding: 0 14px;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.single-post .ld-nl-card .nlf-input::placeholder { color: var(--sp-muted); }
.single-post .ld-nl-card .nlf-form .nlf-input:focus {
	border-color: var(--sp-accent) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-accent) 20%, transparent) !important;
}
.single-post .ld-nl-card .nlf-form .nlf-btn {
	width: 100%;
	height: 46px;
	box-sizing: border-box;
	border: 0;
	border-radius: 11px;
	/* Same darkened accent as the homepage CTA: white on the raw brand orange is
	   only 3.38:1. See the note in homepage.css. */
	background: #D53E1D;
	background: color-mix(in srgb, var(--sp-accent) 84%, #000);
	color: #fff;
	font: inherit;
	font-size: .95rem;
	font-weight: 700;
	cursor: pointer;
	transition: filter .15s ease, transform .12s ease, box-shadow .15s ease;
}
.single-post .ld-nl-card .nlf-btn:hover {
	filter: brightness(1.05);
	transform: translateY(-1px);
	box-shadow: 0 10px 22px -12px rgba(254, 74, 34, .7);
}
.single-post .ld-nl-card .nlf-btn[disabled] { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.single-post .ld-nl-card .nlf-note { margin: .7rem 2px 0; font-size: .78rem; line-height: 1.4; color: color-mix(in srgb, #f2f4f6 62%, transparent); }
.single-post .ld-nl-card .nlf-status { margin: .6rem 2px 0; font-size: .85rem; display: none; }
/* The light-page greens and reds are unreadable on black (about 2:1), so the
   card uses lifted tints instead. */
.single-post .ld-nl-card .nlf-status[data-state="success"] { display: block; color: #7fe3a5; font-weight: 600; }
.single-post .ld-nl-card .nlf-status[data-state="error"] { display: block; color: #ffa79c; }
.single-post .ld-nl-card .nlf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The mobile bottom CTA is hidden on desktop — the sticky rail serves it. */
.single-post .ld-nl-cta { display: none; }

/* Below the three-column breakpoint the rails are dropped and the newsletter
 * reappears as a full-width CTA at the very bottom of the article. */
@media (max-width: 1179.98px) {
	.single-post .ld-rail { display: none !important; }
	.single-post .ld-nl-cta {
		display: block;
		max-width: var(--sp-read);
		margin: 2.75rem auto 0;
		padding-top: 2.25rem;
		border-top: 1px solid var(--sp-hair);
	}
}

/* ---- Reading area — clean, no background texture. The body font, size,
 * line-height and text colour all follow the Blocksy Customizer content
 * typography; the child theme only owns the vertical spacing here. */
.single-post .entry-content {
	position: relative;
	padding-block: clamp(2rem, 3.5vw, 3rem);
}

/* Narrow, centred reading column with breathing room between blocks. */
.single-post .entry-content > * {
	max-width: var(--sp-read);
	margin-inline: auto;
}
.single-post .entry-content > * { margin-block: 0; }
.single-post .entry-content > * + * { margin-top: 1.5rem; }
.single-post .entry-content p { max-width: var(--sp-read); }

/* Links — brand accent with a refined underline that thickens on hover. */
.single-post .entry-content a {
	color: var(--sp-accent);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--sp-accent) 45%, transparent);
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
	transition: text-decoration-color .15s ease;
}
.single-post .entry-content a:hover { text-decoration-color: var(--sp-accent); }

/* Headings — the child theme only adds generous top space before each heading
 * (reading rhythm). Font, size, colour, line-height all follow the Blocksy
 * Customizer heading typography, so H2/H3/H4 changes there take effect. */
.single-post .entry-content h2 { margin-top: 2.75rem; }
.single-post .entry-content h3 { margin-top: 2.25rem; }
.single-post .entry-content h4 { margin-top: 1.75rem; }

/* Lists */
.single-post .entry-content :where(ul, ol) { padding-left: 1.4rem; }
.single-post .entry-content li + li { margin-top: .5rem; }
.single-post .entry-content li { padding-left: .2rem; }

/* Images — the child theme NEVER forces a border, outline or shadow onto a
 * content image. A borderless image stays borderless; an image the author
 * bordered in the block editor keeps that border. Standalone image blocks get
 * a soft radius only; images inside tables are left completely untouched. */
.single-post .entry-content figure.wp-block-image { max-width: var(--sp-read); }
.single-post .entry-content figure.wp-block-image :where(img) { border-radius: 14px; }
.single-post .entry-content img { height: auto; }
/* Images inside tables: no radius, no size cap, no styling the child theme adds. */
.single-post .entry-content :where(td, th) img { border-radius: 0; max-width: 100%; box-shadow: none; }
.single-post .entry-content figcaption { font-size: .85rem; color: var(--sp-muted); text-align: center; margin-top: .6rem; }

/* Blockquotes — quiet accent-bordered block. */
.single-post .entry-content blockquote {
	border-left: 3px solid var(--sp-accent);
	background: color-mix(in srgb, var(--sp-accent) 5%, #fff);
	margin: 2rem auto;
	padding: 1rem 1.4rem;
	border-radius: 0 12px 12px 0;
	color: var(--sp-ink);
	font-size: 1.05em;
}
.single-post .entry-content blockquote p:last-child { margin-bottom: 0; }

/* Tables — the child theme ONLY frames them. It does not restructure a table:
 * no forced <thead>, no data-labels, no mobile card view. Tables render exactly
 * as authored in the block editor, so the theme never misreads or breaks them.
 *   - a hairline border + rounded corners around the whole table
 *   - a grey header row (native <thead>); body rows stay white
 * Wide tables scroll horizontally inside their figure rather than restructuring. */
.single-post .entry-content :where(figure.wp-block-table, .wp-block-table) {
	max-width: var(--sp-read);
	margin-inline: auto;
	overflow-x: auto;
}
.single-post .entry-content table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	/* Hairline frame + rounded corners. !important overrides any per-block
	 * colour (e.g. has-black-border-color) so the frame stays a light hairline. */
	border: 1px solid var(--sp-table-line) !important;
	border-radius: 14px;
	overflow: hidden;
}
.single-post .entry-content :where(th, td) {
	padding: .85rem 1rem;
	vertical-align: top;
	border-top: 1px solid var(--sp-table-line);
}
/* Body rows are WHITE. Many post tables use the block's "Stripes" style
 * (is-style-stripes), which paints grey zebra rows from WordPress core — this
 * neutralises it so only the header row is grey. */
.single-post .entry-content .wp-block-table.is-style-stripes tbody tr,
.single-post .entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: #fff;
}
/* Grey header row. Two cases, kept in separate rules so the :has() selector
 * degrading in an old browser can't drop the plain <thead> rule with it:
 *   1. a real <thead> (native header section), and
 *   2. the first row of a header-less table (these tables are all <td>). */
.single-post .entry-content thead th {
	background: var(--sp-table-head);
	color: var(--sp-ink);
	font-weight: 700;
	text-align: left;
}
.single-post .entry-content table:not(:has(thead)) > tbody > tr:first-child > :where(td, th) {
	background: var(--sp-table-head);
	color: var(--sp-ink);
	font-weight: 700;
	text-align: left;
}
/* No double hairline where the header meets the rounded top frame. */
.single-post .entry-content thead > tr:first-child > :where(th, td) { border-top: 0; }
.single-post .entry-content table:not(:has(thead)) > tbody > tr:first-child > :where(td, th) { border-top: 0; }

/* Code */
.single-post .entry-content :where(code, pre) { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.single-post .entry-content pre { background: var(--sp-ink); color: #f4f2ee; padding: 1rem 1.2rem; border-radius: 12px; overflow-x: auto; font-size: .9rem; }
.single-post .entry-content :not(pre) > code { background: #f1ece6; padding: .1em .4em; border-radius: .3em; font-size: .9em; }

/* ---- Scroll-to-top button (created in single-post.js) ---------------- */
.single-post .ld-totop {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 90;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sp-ink);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	box-shadow: 0 10px 26px -8px rgba(17, 21, 24, .5);
	transition: opacity .2s ease, transform .2s ease, background .15s ease;
}
.single-post .ld-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.single-post .ld-totop:hover { background: var(--sp-accent); transform: translateY(-3px); }
.single-post .ld-totop:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-accent) 45%, transparent); }
.single-post .ld-totop svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) {
	.single-post .ld-totop { transition: opacity .2s ease; }
	.single-post .ld-totop:hover { transform: none; }
}