/*
 * sd-blog.css -- the reading layer for posts, the blog index and archives.
 *
 * Loaded ONLY on is_singular('post') || is_home() || is_archive() (see
 * functions.php). Scoped to body.single-post / body.blog / body.archive so
 * /legal and the three services pages, which share the .services-rich-text
 * container, are untouched.
 *
 * What this fixes, all measured on the live site 2026-08-27 at 1440px:
 *   - .services-rich-text set no width and inherited the 1280px marketing
 *     container, so a paragraph ran 98 characters. Butterick's range is 45-90.
 *   - Webflow exported .services-rich-text p with margin-top:-20px against
 *     margin-bottom:20px, so the two cancelled and the measured gap between
 *     paragraph boxes was 0px against a 30px line height.
 *   - .services-rich-text h2/h3 were centred inside left-aligned body copy.
 *   - Inline links were cyan at weight 700 with text-decoration:none.
 *   - Body copy was Exo, loaded upright only, so a post had no italic at all.
 *
 * Additive only: nothing here removes a theme rule, it overrides by specificity
 * inside the three body scopes above.
 */

/* --------------------------------------------------------------------------
   Source Serif 4, self-hosted.

   Downloaded from Google Fonts on 2026-08-27 and committed here, so a reader
   of the blog makes no request to fonts.googleapis.com or fonts.gstatic.com.
   Source Serif 4 is SIL Open Font Licence 1.1, which permits redistribution
   with the work; the licence travels in assets/fonts/SOURCE-SERIF-4-OFL.txt.

   These are the variable files: one face carries weight 400-700 plus an
   optical-size axis from 8pt to 60pt, so the same file sets a caption, the
   body and a pull quote with the right stroke contrast at each. The upright
   and italic are separate files because a variable font cannot interpolate
   between two different letterform designs.

   The unicode-range values are Google's own. latin-ext, and both italics, are
   only fetched if the page actually contains a character in their range, so
   an ordinary English post downloads one 122KB file.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/source-serif-4-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/source-serif-4-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Source Serif 4";
	font-style: italic;
	font-weight: 400 600;
	font-display: swap;
	src: url("../fonts/source-serif-4-latin-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Source Serif 4";
	font-style: italic;
	font-weight: 400 600;
	font-display: swap;
	src: url("../fonts/source-serif-4-latin-ext-italic.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * Fallback metrics. Georgia is wider and shorter than Source Serif 4, so a
 * swap from one to the other reflows the column and counts as layout shift.
 * 93.4% is measured, not guessed: the same string set at 40px renders 1220.1px
 * in Georgia against 1139.9px in Source Serif 4, and the adjusted fallback
 * lands within a pixel of the real face.
 */
@font-face {
	font-family: "Source Serif 4 fallback";
	src: local("Georgia"), local("Times New Roman");
	size-adjust: 93.4%;
	ascent-override: 100%;
	descent-override: 26%;
	line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   Tokens. Dark is the default because the site is black.
   -------------------------------------------------------------------------- */

body.single-post,
body.blog,
body.archive {
	--sd-measure: 66ch;
	--sd-body: "Source Serif 4", "Source Serif 4 fallback", Charter, Georgia, serif;
	--sd-display: Madenz, Anta, sans-serif;
	--sd-ui: Roboto, system-ui, -apple-system, sans-serif;

	--sd-ground: #0e0f11;
	--sd-raised: #17191c;
	--sd-ink: #c9cdd4;
	--sd-ink-strong: #e8eaee;
	--sd-ink-muted: #8d949e;
	--sd-accent: #7affff;
	--sd-rule: #282c31;
	--sd-rule-faint: #1d2023;
	--sd-lh: 1.66;
}

/*
 * The reader's system setting decides, unless they have picked a side with the
 * control in the post header, which puts .sd-dark or .sd-light on <html> -- set
 * by an inline script in the head so the page never paints the wrong theme
 * first. The :not() is what lets an explicit dark choice beat a light OS.
 */
@media (prefers-color-scheme: light) {
	html:not(.sd-dark) body.single-post,
	html:not(.sd-dark) body.blog,
	html:not(.sd-dark) body.archive {
		--sd-ground: #faf8f5;
		--sd-raised: #f2eee8;
		--sd-ink: #1c1e21;
		--sd-ink-strong: #000;
		--sd-ink-muted: #5b6068;
		--sd-accent: #08606a;
		--sd-rule: #ddd7cf;
		--sd-rule-faint: #e9e4dc;
		--sd-lh: 1.6;
	}
}

/* Explicit light choice. Same specificity as the rule above, declared after it,
   so it wins in a dark OS too. */
html.sd-light body.single-post,
html.sd-light body.blog,
html.sd-light body.archive {
	--sd-ground: #faf8f5;
	--sd-raised: #f2eee8;
	--sd-ink: #1c1e21;
	--sd-ink-strong: #000;
	--sd-ink-muted: #5b6068;
	--sd-accent: #08606a;
	--sd-rule: #ddd7cf;
	--sd-rule-faint: #e9e4dc;
	--sd-lh: 1.6;
}

/* --------------------------------------------------------------------------
   The reading surface.

   Light mode paints the article section, not the whole document: the site logo
   is an inline SVG with fill="white" hardcoded on all 24 paths, so a paper
   <body> would erase it. .navmenu-2 is position:absolute with a black-to-
   transparent gradient at z-index 99, so it keeps its own dark band over the
   paper and the logo stays legible. The footer stays dark for the same reason.
   -------------------------------------------------------------------------- */

body.single-post .section.header,
body.blog .section.header,
body.archive .section.header {
	background-color: var(--sd-ground);
	color: var(--sd-ink);
}

/* .background is the theme's fixed decorative layer at z-index 1. .section is
   z-index 2, so the paper covers it; this just stops it glowing through at the
   edges on light. */
html.sd-light body.single-post .background,
html.sd-light body.blog .background,
html.sd-light body.archive .background {
	opacity: 0;
}

@media (prefers-color-scheme: light) {
	html:not(.sd-dark) body.single-post .background,
	html:not(.sd-dark) body.blog .background,
	html:not(.sd-dark) body.archive .background {
		opacity: 0;
	}
}

/* --------------------------------------------------------------------------
   The column. This one rule is most of the win: 98 characters down to 66.
   -------------------------------------------------------------------------- */

body.single-post .services-rich-text,
body.blog .services-rich-text,
body.archive .services-rich-text {
	font-family: var(--sd-body);
	font-optical-sizing: auto;
	font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.25rem);
	line-height: var(--sd-lh);
	color: var(--sd-ink);
	text-align: left;
}

/*
 * The container carries the column, not the children. `ch` resolves against
 * whichever font the element itself uses, so setting max-width:66ch on every
 * child gave the Roboto meta line a narrower box than the Source Serif body
 * and the two did not line up. One constrained parent, children at 100%.
 */
body.single-post .services-rich-text,
body.blog .services-rich-text,
body.archive .services-rich-text {
	width: 100%;
	max-width: var(--sd-measure);
	align-self: center;
}

body.single-post .services-rich-text > *,
body.blog .services-rich-text > *,
body.archive .services-rich-text > * {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* The post title sits in its own block above the rich text. Left-align it onto
   the same column edge rather than centring it over a 1280px container. */
/*
 * .legal-content is a column flex container, so auto side margins on this
 * child make it shrink-to-fit and centre itself. That was invisible on a post,
 * where the title is long enough to hit the 66ch cap anyway, and obvious on
 * /blog/, where an h1 reading "BLOG" collapsed to 192px in the middle of the
 * page. width:100% + align-self keeps it on the column edge at any length.
 */
body.single-post .services-header-title,
body.blog .services-header-title,
body.archive .services-header-title {
	font-family: var(--sd-body);
	width: 100%;
	max-width: var(--sd-measure);
	align-self: center;
	justify-content: flex-start;
	text-align: left;
}

body.single-post .services-header-title h1,
body.blog .services-header-title h1,
body.archive .services-header-title h1 {
	font-family: var(--sd-display);
	color: var(--sd-ink-strong);
	text-align: left;
	line-height: 1.02;
	font-size: clamp(1.85rem, 1.35rem + 2.2vw, 3.15rem);
	text-wrap: balance;
}

/* Full-bleed elements opt out of the column: <figure class="sd-wide"> etc. */
body.single-post .services-rich-text > .sd-wide {
	max-width: min(1080px, 100%);
}

/* --------------------------------------------------------------------------
   Paragraphs. Undo the Webflow rule that made them touch.
   -------------------------------------------------------------------------- */

body.single-post .services-rich-text p,
body.blog .services-rich-text p,
body.archive .services-rich-text p,
body.single-post .services-rich-text li,
body.single-post .services-rich-text blockquote,
body.single-post .services-rich-text td,
body.single-post .services-rich-text figcaption {
	font-family: var(--sd-body);
	line-height: var(--sd-lh);
}

/* These are UI, not body copy, and keep their own tighter leading. */
body.single-post .sd-post-meta,
body.single-post .sd-toc li,
body.single-post .services-rich-text figcaption,
body.blog .sd-blog-item__meta,
body.archive .sd-blog-item__meta {
	line-height: 1.45;
}

body.single-post .services-rich-text p,
body.blog .services-rich-text p,
body.archive .services-rich-text p {
	margin-top: 0;
	margin-bottom: 1.35em;
	padding: 0;
	text-align: left;
	text-wrap: pretty;
}

body.single-post .services-rich-text > p:last-child {
	margin-bottom: 0;
}

/* Opening paragraph: one drop cap in the brand face, reusing a font the browser
   has already downloaded. p:nth-of-type(2) is the lede because p:nth-of-type(1)
   is the meta line -- done in CSS rather than JS so it cannot flash. Degrades to
   an ordinary first letter where initial-letter is unsupported. */
body.single-post .services-rich-text > p.sd-lede::first-letter,
body.single-post .services-rich-text > p:nth-of-type(2):not(.sd-post-pages)::first-letter {
	-webkit-initial-letter: 2.4 3;
	initial-letter: 2.4 3;
	font-family: var(--sd-display);
	color: var(--sd-accent);
	margin-right: 0.6rem;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   Headings. Madenz stops at h2; below that the body face carries it.
   Space above a heading, not below, at roughly four to one.
   -------------------------------------------------------------------------- */

body.single-post .services-rich-text h2,
body.blog .services-rich-text h2,
body.archive .services-rich-text h2 {
	font-family: var(--sd-display);
	color: var(--sd-ink-strong);
	text-align: left;
	text-transform: uppercase;
	font-weight: 400;
	font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
	line-height: 1.12;
	margin: 2.4em 0 0.35em;
	padding: 0;
	text-wrap: balance;
}

body.single-post .services-rich-text h3,
body.blog .services-rich-text h3,
body.archive .services-rich-text h3 {
	font-family: var(--sd-body);
	color: var(--sd-ink-strong);
	text-align: left;
	text-transform: none;
	font-weight: 600;
	font-size: 1.22em;
	line-height: 1.3;
	margin: 1.9em 0 0.4em;
	padding: 0;
	text-wrap: balance;
}

body.single-post .services-rich-text h4,
body.single-post .services-rich-text h5,
body.single-post .services-rich-text h6 {
	font-family: var(--sd-ui);
	color: var(--sd-ink-muted);
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 500;
	font-size: 0.78rem;
	line-height: 1.4;
	margin: 2em 0 0.6em;
}

/* Anchors land below the fixed navigation rather than under it. */
body.single-post .services-rich-text :is(h2, h3, h4)[id] {
	scroll-margin-top: 140px;
}

/* --------------------------------------------------------------------------
   Links. Underlined below the baseline at hairline thickness, at the weight of
   the surrounding text -- not bold cyan with no underline.
   -------------------------------------------------------------------------- */

body.single-post .services-rich-text a,
body.blog .services-rich-text a,
body.archive .services-rich-text a {
	color: var(--sd-accent);
	font-weight: inherit;
	font-size: inherit;
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.2em;
	text-decoration-color: color-mix(in srgb, var(--sd-accent) 45%, transparent);
}

body.single-post .services-rich-text a:hover,
body.blog .services-rich-text a:hover,
body.archive .services-rich-text a:hover {
	text-decoration-color: var(--sd-accent);
}

body.single-post .services-rich-text a:focus-visible,
body.blog .services-rich-text a:focus-visible,
body.archive .services-rich-text a:focus-visible {
	outline: 2px solid var(--sd-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

body.single-post .services-rich-text strong,
body.single-post .services-rich-text b {
	font-weight: 600;
	color: var(--sd-ink-strong);
}

body.single-post .services-rich-text em,
body.single-post .services-rich-text i {
	font-style: italic;
}

/* --------------------------------------------------------------------------
   Lists, quotes, figures, code, tables.
   -------------------------------------------------------------------------- */

body.single-post .services-rich-text ul,
body.single-post .services-rich-text ol {
	margin: 0 auto 1.35em;
	padding-left: 1.5em;
	text-align: left;
}

body.single-post .services-rich-text li {
	margin-bottom: 0.5em;
	padding-left: 0.2em;
}

body.single-post .services-rich-text li::marker {
	color: var(--sd-ink-muted);
}

body.single-post .services-rich-text li > ul,
body.single-post .services-rich-text li > ol {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

body.single-post .services-rich-text blockquote,
body.single-post .services-rich-text .w-richtext-figure-type-blockquote {
	margin: 2.25em auto;
	padding: 0 0 0 1.5rem;
	border-left: 2px solid var(--sd-accent);
	font-size: 1.12em;
	line-height: 1.45;
	font-style: italic;
	color: var(--sd-ink-strong);
}

body.single-post .services-rich-text blockquote p:last-child {
	margin-bottom: 0;
}

body.single-post .services-rich-text blockquote cite {
	display: block;
	margin-top: 0.75rem;
	font-family: var(--sd-ui);
	font-style: normal;
	font-size: 0.76rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sd-ink-muted);
}

body.single-post .services-rich-text figure {
	margin: 2.25em auto;
}

body.single-post .services-rich-text img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
}

body.single-post .services-rich-text figcaption,
body.single-post .services-rich-text .wp-caption-text {
	font-family: var(--sd-ui) !important;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--sd-ink-muted);
	margin-top: 0.75rem;
	text-align: left;
}

body.single-post .services-rich-text code,
body.single-post .services-rich-text kbd {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.85em;
	letter-spacing: -0.01em;
	color: var(--sd-accent);
}

body.single-post .services-rich-text pre {
	background: var(--sd-raised);
	border: 1px solid var(--sd-rule-faint);
	border-radius: 4px;
	padding: 1.25rem;
	overflow-x: auto;
	margin: 1.75em auto;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.8rem;
	line-height: 1.65;
	color: var(--sd-ink);
	text-align: left;
}

body.single-post .services-rich-text pre code {
	color: inherit;
	font-size: inherit;
	letter-spacing: normal;
}

/* Wide content scrolls inside its own box; the page never scrolls sideways. */
body.single-post .services-rich-text .sd-tablewrap {
	overflow-x: auto;
	margin: 1.75em auto;
}

body.single-post .services-rich-text table {
	border-collapse: collapse;
	width: 100%;
	font-family: var(--sd-ui);
	font-size: 0.9rem;
	text-align: left;
}

body.single-post .services-rich-text th,
body.single-post .services-rich-text td {
	text-align: left;
	padding: 0.7rem 1rem 0.7rem 0;
	border-bottom: 1px solid var(--sd-rule-faint);
	vertical-align: baseline;
}

body.single-post .services-rich-text thead th {
	font-size: 0.7rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--sd-ink-muted);
	font-weight: 500;
	border-bottom: 1px solid var(--sd-rule);
}

body.single-post .services-rich-text hr {
	border: 0;
	border-top: 1px solid var(--sd-rule);
	margin: 3em auto;
}

/* --------------------------------------------------------------------------
   Post furniture: meta line, theme control, table of contents, CTA, prev/next.
   -------------------------------------------------------------------------- */

body.single-post .sd-post-meta {
	font-family: var(--sd-ui);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	font-family: var(--sd-ui);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sd-ink-muted);
	text-align: left;
	opacity: 1;
	margin-bottom: 2.25em;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--sd-rule);
}

body.single-post .sd-post-meta a {
	color: var(--sd-ink-muted);
	font-weight: inherit;
	text-decoration: none;
}

body.single-post .sd-post-meta a:hover {
	color: var(--sd-accent);
}

body.single-post .sd-post-meta .sd-sep {
	color: var(--sd-rule);
}

body.single-post .sd-theme-toggle {
	margin-left: auto;
	appearance: none;
	border: 1px solid var(--sd-rule);
	background: transparent;
	color: var(--sd-ink-muted);
	font: inherit;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	cursor: pointer;
	line-height: 1.4;
}

body.single-post .sd-theme-toggle:hover {
	color: var(--sd-ink-strong);
	border-color: var(--sd-ink-muted);
}

body.single-post .sd-theme-toggle:focus-visible {
	outline: 2px solid var(--sd-accent);
	outline-offset: 2px;
}

body.single-post .sd-toc {
	margin: 0 auto 2.5em;
	padding: 1.25rem 1.5rem;
	border-left: 2px solid var(--sd-rule);
	background: var(--sd-raised);
	border-radius: 0 4px 4px 0;
}

body.single-post .sd-toc h2 {
	font-family: var(--sd-ui) !important;
	font-size: 0.7rem !important;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--sd-ink-muted);
	margin: 0 0 0.85rem !important;
	line-height: 1.4;
}

body.single-post .sd-toc ol {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--sd-ui);
	font-size: 0.88rem;
	line-height: 1.45;
}

body.single-post .sd-toc li {
	margin-bottom: 0.5rem;
	padding-left: 0;
}

body.single-post .sd-toc li:last-child {
	margin-bottom: 0;
}

body.single-post .sd-toc a {
	font-family: var(--sd-ui);
	color: var(--sd-ink);
	text-decoration: none;
}

body.single-post .sd-toc a:hover {
	color: var(--sd-accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

body.single-post .sd-post-cta {
	margin: 3.5em auto 0;
	padding: 1.75rem 0 0;
	border-top: 1px solid var(--sd-rule);
}

body.single-post .sd-post-cta h2 {
	font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem) !important;
	margin: 0 0 0.5em !important;
	padding-bottom: 0;
}

body.single-post .sd-post-cta p {
	margin-bottom: 0.9em;
}

body.single-post .sd-post-adjacent {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	font-family: var(--sd-ui);
	font-size: 0.85rem;
	text-align: left;
	margin-top: 2.5em;
	padding-top: 1.5rem;
	border-top: 1px solid var(--sd-rule);
}

body.single-post .sd-post-pages {
	font-family: var(--sd-ui);
	font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   The listing: /blog/ and the category, tag and date archives.
   -------------------------------------------------------------------------- */

body.blog .sd-blog-item,
body.archive .sd-blog-item {
	padding: 0 0 2.25rem;
	margin-bottom: 2.25rem;
	border-bottom: 1px solid var(--sd-rule);
	max-width: var(--sd-measure);
	margin-left: auto;
	margin-right: auto;
}

body.blog .sd-blog-item:last-of-type,
body.archive .sd-blog-item:last-of-type {
	border-bottom: 0;
	margin-bottom: 0;
}

body.blog .sd-blog-item h2,
body.archive .sd-blog-item h2 {
	font-family: var(--sd-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
	line-height: 1.15;
	text-align: left;
	margin: 0 0 0.5rem;
	padding: 0;
	text-wrap: balance;
}

body.blog .sd-blog-item h2 a,
body.archive .sd-blog-item h2 a {
	color: var(--sd-ink-strong);
	text-decoration: none;
}

body.blog .sd-blog-item h2 a:hover,
body.archive .sd-blog-item h2 a:hover {
	color: var(--sd-accent);
}

body.blog .sd-blog-item__meta,
body.archive .sd-blog-item__meta {
	font-family: var(--sd-ui);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sd-ink-muted);
	opacity: 1;
	text-align: left;
	margin: 0 0 0.75rem;
}

body.blog .sd-blog-item__more,
body.archive .sd-blog-item__more {
	font-family: var(--sd-ui);
	font-size: 0.85rem;
	color: var(--sd-accent);
}

body.blog .sd-archive-intro,
body.archive .sd-archive-intro {
	font-family: var(--sd-ui);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sd-ink-muted);
	margin-bottom: 2.5em;
}

body.blog .pagination,
body.archive .pagination {
	max-width: var(--sd-measure);
	margin: 3rem auto 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--sd-rule);
	font-family: var(--sd-ui);
	font-size: 0.85rem;
	text-align: left;
}

body.blog .pagination .page-numbers,
body.archive .pagination .page-numbers {
	padding: 0 0.6rem 0 0;
	color: var(--sd-ink-muted);
	text-decoration: none;
}

body.blog .pagination .page-numbers:hover,
body.archive .pagination .page-numbers:hover {
	color: var(--sd-accent);
}

body.blog .pagination .page-numbers.current,
body.archive .pagination .page-numbers.current {
	color: var(--sd-ink-strong);
}

/* --------------------------------------------------------------------------
   WCAG 1.4.12 leaves the page usable when a reader forces their own spacing,
   so nothing above sets a fixed height or clips overflow on text. This last
   rule keeps the toggle from jumping when the label changes length.
   -------------------------------------------------------------------------- */

body.single-post .sd-theme-toggle {
	min-width: 5.5rem;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	body.single-post *,
	body.blog *,
	body.archive * {
		scroll-behavior: auto;
	}
}

/* --------------------------------------------------------------------------
   Agent tabs (mu-plugins/sd-agent-tabs.php).

   Three snippets that are alternatives to each other, not steps. The markup is
   a real tablist: role=tablist / role=tab / role=tabpanel, one tab in the tab
   order at a time, arrows to move between them. That pattern is only honest if
   JavaScript is running, so the PHP renders the tablist with `hidden` and
   sd-blog.js removes it. Until then every panel shows under its own h3, which
   is what the PDF does and is a correct fallback rather than a degraded one.

   Nothing here sets a fixed height, so a reader who forces their own line
   spacing (WCAG 1.4.12) still sees the whole snippet.
   -------------------------------------------------------------------------- */

body.single-post .services-rich-text .sd-agent-tabs {
	margin: 1.75em auto;
}

body.single-post .services-rich-text .sd-agent-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	border-bottom: 1px solid var(--sd-rule);
	margin-bottom: -1px;
}

body.single-post .services-rich-text .sd-agent-tabs__tab {
	appearance: none;
	background: transparent;
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: 4px 4px 0 0;
	color: var(--sd-ink-muted);
	cursor: pointer;
	font-family: var(--sd-ui);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	/* 44px minimum tap area, the same target the 2026-09-03 tap-target work
	   settled on for the rest of the site. */
	padding: 0.85rem 1.15rem;
	min-height: 44px;
}

body.single-post .services-rich-text .sd-agent-tabs__tab:hover {
	color: var(--sd-ink-strong);
}

body.single-post .services-rich-text .sd-agent-tabs__tab[aria-selected="true"] {
	background: var(--sd-raised);
	border-color: var(--sd-rule-faint);
	color: var(--sd-ink-strong);
}

/* Focus is drawn on the element itself rather than suppressed, because the
   arrow keys move focus between tabs and a reader has to be able to see where
   it went. */
body.single-post .services-rich-text .sd-agent-tabs__tab:focus-visible {
	outline: 2px solid var(--sd-accent);
	outline-offset: -2px;
}

body.single-post .services-rich-text .sd-agent-tabs__panel:focus-visible {
	outline: 2px solid var(--sd-accent);
	outline-offset: 2px;
}

/* The panel's <pre> already inherits the code styling above. Only the corner
   radius changes, so the active tab and its panel read as one shape. */
body.single-post .services-rich-text .sd-agent-tabs--js .sd-agent-tabs__code {
	margin-top: 0;
	border-radius: 0 4px 4px 4px;
}

/* Once JS is running the tab button carries the name, so the h3 is hidden from
   sight but kept in the document outline and available to a screen reader. */
body.single-post .services-rich-text .sd-agent-tabs--js .sd-agent-tabs__heading {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

body.single-post .services-rich-text .sd-agent-tabs--js .sd-agent-tabs__panel[hidden] {
	display: none;
}