/*
 * Folio Editorial — single article & page styles (loaded only on singular views)
 *
 * Grid on wide screens: [margin rail: TOC] [reading column] [breathing room / wide media]
 * Header, body and comments all start on the reading column so the left edge stays aligned.
 */

/* ==========================================================================
   Article grid
   ========================================================================== */

.article-head,
.article-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
	.article-head,
	.article-layout {
		grid-template-columns: var(--w-rail) minmax(0, var(--w-read)) minmax(0, 1fr);
		column-gap: var(--s-7);
	}

	.article-head > *,
	.article-main {
		grid-column: 2 / 3;
	}

	.article-head__text {
		grid-column: 2 / 4;
	}
}

/* ==========================================================================
   Header
   ========================================================================== */

.article-head {
	padding-top: clamp(1.25rem, 0.8rem + 2vw, 3rem);
	row-gap: var(--s-5);
}

.crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--f-display);
	font-size: var(--t-xs);
	color: var(--c-muted);
}

.crumbs li:not(:last-child)::after {
	content: "/";
	margin-inline: 0.55rem;
	color: var(--c-rule-strong);
}

.crumbs a {
	color: var(--c-muted);
	text-decoration: none;
}

.crumbs a:hover {
	color: var(--c-ink);
	text-decoration: underline;
}

/* Plugin breadcrumbs (Yoast / Rank Math) render as spans */
.crumbs > span,
.crumbs > p {
	font-family: var(--f-display);
	font-size: var(--t-xs);
	color: var(--c-muted);
}

.article-head__text {
	display: grid;
	gap: var(--s-4);
	justify-items: start;
}

.article-head__title {
	max-width: 24ch;
	font-size: var(--t-4xl);
	font-weight: 750;
	line-height: var(--lh-tight);
	letter-spacing: -0.03em;
	overflow-wrap: break-word;
}

.article-head__dek {
	max-width: 48ch;
	color: var(--c-text-2);
	font-size: var(--t-lg);
	line-height: 1.5;
}

.article-head--page {
	padding-bottom: var(--s-6);
}

.byline {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding-top: var(--s-4);
	border-top: 1px solid var(--c-rule);
}

.byline__avatar {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	flex-shrink: 0;
}

.byline__author {
	font-family: var(--f-display);
	font-size: var(--t-sm);
	font-weight: 500;
	line-height: 1.3;
}

.byline__author a {
	color: var(--c-ink);
	font-weight: 650;
	text-decoration: none;
}

.byline__author a:hover {
	text-decoration: underline;
}

.byline__meta,
.byline__updated {
	margin-top: 0.15rem;
}

/* Featured image */
.article-hero {
	margin-block: var(--s-6) 0;
}

.article-hero img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--ratio-wide);
	object-fit: cover;
	border-radius: var(--r-sm);
	background: var(--c-tint);
}

.article-hero figcaption {
	margin-top: var(--s-2);
	color: var(--c-muted);
	font-family: var(--f-display);
	font-size: var(--t-xs);
	line-height: 1.45;
}

@media (max-width: 759.98px) {
	.article-hero {
		width: 100%;
	}

	.article-hero img {
		border-radius: 0;
	}

	.article-hero figcaption {
		padding-inline: var(--gutter);
	}
}

@media (min-width: 1024px) {
	.article-hero figcaption {
		margin-left: calc(var(--w-rail) + var(--s-7));
		max-width: var(--w-read);
	}
}

/* ==========================================================================
   Layout and the table-of-contents rail
   ========================================================================== */

.article-layout {
	margin-top: clamp(1.75rem, 1.2rem + 2vw, 3rem);
	row-gap: var(--s-5);
}

.article-rail__inner {
	position: relative;
}

@media (min-width: 1024px) {
	.article-rail {
		grid-column: 1 / 2;
		grid-row: 1;
	}

	.article-rail__inner {
		position: sticky;
		top: calc(var(--admin-h) + var(--header-h-compact) + 1.75rem);
		max-height: calc(100vh - var(--admin-h) - var(--header-h-compact) - 3.5rem);
		overflow-y: auto;
		scrollbar-width: thin;
	}
}

/* TOC */
.toc {
	border: 1px solid var(--c-rule);
	border-radius: var(--r-md);
	background: var(--c-surface);
}

.toc__summary {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	min-height: 3rem;
	padding: 0.7rem 1rem;
	font-family: var(--f-display);
	font-size: var(--t-sm);
	font-weight: 650;
	cursor: pointer;
	list-style: none;
}

.toc__summary::-webkit-details-marker {
	display: none;
}

.toc__summary .icon--chevron {
	margin-left: auto;
	transition: transform var(--dur) var(--ease);
}

.toc[open] .toc__summary .icon--chevron {
	transform: rotate(180deg);
}

.toc__nav {
	padding: 0 1rem 1rem;
}

.toc__list,
.toc__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.toc__item a {
	display: block;
	padding: 0.4rem 0 0.4rem 0.85rem;
	border-left: 2px solid var(--c-rule);
	color: var(--c-text-2);
	font-family: var(--f-display);
	font-size: var(--t-sm);
	line-height: 1.35;
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.toc__item a:hover {
	color: var(--c-ink);
	border-left-color: var(--c-rule-strong);
}

.toc__item--sub a {
	padding-left: 1.6rem;
	font-size: var(--t-xs);
}

.toc__item a[aria-current="true"] {
	color: var(--c-ink);
	font-weight: 650;
	border-left-color: var(--c-primary);
}

@media (min-width: 1024px) {
	/* In the margin the TOC reads as marginalia, not a box. */
	.toc {
		border: 0;
		background: transparent;
	}

	.toc__summary {
		min-height: 0;
		padding: var(--s-3) 0 var(--s-3);
		border-top: 4px solid var(--c-ink);
		font-size: var(--t-sm);
	}

	.toc__nav {
		padding: 0;
	}
}

/* ==========================================================================
   Article content typography
   ========================================================================== */

.entry-content {
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	line-height: 1.72;
	color: var(--c-text);
	overflow-wrap: break-word;
	font-variant-numeric: oldstyle-nums proportional-nums;
}

.entry-content::after {
	content: "";
	display: table;
	clear: both;
}

.entry-content > * {
	margin-block: 0;
}

.entry-content > * + * {
	margin-top: 1.35em;
}

/* Introductory paragraph */
.entry-content > p:first-child {
	font-size: 1.12em;
	line-height: 1.62;
	color: var(--c-ink);
}

.entry-content .has-drop-cap:not(:focus)::first-letter {
	float: left;
	margin: 0.08em 0.12em 0 0;
	font-family: var(--f-display);
	font-size: 4.2em;
	font-weight: 800;
	line-height: 0.78;
	color: var(--c-ink);
}

/* Headings */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	color: var(--c-ink);
	font-variant-numeric: lining-nums;
}

.entry-content h2 {
	margin-top: 2.3em;
	font-size: clamp(1.5rem, 1.25rem + 1vw, 2.05rem);
	font-weight: 720;
	line-height: 1.14;
	letter-spacing: -0.024em;
}

.entry-content h3 {
	margin-top: 1.85em;
	font-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.45rem);
	font-weight: 680;
	line-height: 1.22;
}

.entry-content h4 {
	margin-top: 1.6em;
	font-size: 1.1rem;
	font-weight: 680;
}

.entry-content h5,
.entry-content h6 {
	margin-top: 1.5em;
	font-size: 1rem;
	font-weight: 680;
}

.entry-content :is(h2, h3, h4, h5, h6) + * {
	margin-top: 0.7em;
}

/* Links */
.entry-content a {
	color: var(--c-link);
	text-decoration-line: underline;
	text-decoration-color: color-mix(in srgb, var(--c-link) 40%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	overflow-wrap: anywhere;
	transition: text-decoration-color var(--dur-fast) var(--ease), text-decoration-thickness var(--dur-fast) var(--ease);
}

.entry-content a:hover {
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}

.entry-content strong,
.entry-content b {
	font-weight: 700;
	color: var(--c-ink);
}

.entry-content mark {
	background: color-mix(in srgb, var(--c-secondary) 45%, transparent);
	color: inherit;
	padding: 0 0.1em;
}

.entry-content small {
	font-size: 0.85em;
}

.entry-content abbr[title] {
	text-decoration: underline dotted;
	cursor: help;
}

.entry-content sup,
.entry-content sub {
	font-size: 0.72em;
	line-height: 0;
}

/* Lists */
.entry-content ul,
.entry-content ol {
	padding-left: 1.35em;
}

.entry-content li + li,
.entry-content li > ul,
.entry-content li > ol {
	margin-top: 0.45em;
}

.entry-content ul > li::marker {
	color: var(--c-primary);
}

.entry-content ol > li::marker {
	color: var(--c-muted);
	font-family: var(--f-display);
	font-weight: 650;
	font-size: 0.92em;
	font-variant-numeric: lining-nums tabular-nums;
}

.entry-content dl dt {
	font-family: var(--f-display);
	font-weight: 650;
}

.entry-content dl dd {
	margin: 0.25em 0 0.75em;
}

/* Quotes */
.entry-content blockquote,
.entry-content .wp-block-quote {
	margin-inline: 0;
	padding: 0.15em 0 0.15em 1.25em;
	border-left: 3px solid var(--c-secondary);
	font-size: 1.08em;
	font-style: italic;
	color: var(--c-ink);
}

.entry-content blockquote p + p {
	margin-top: 0.75em;
}

.entry-content blockquote cite,
.entry-content .wp-block-quote cite,
.entry-content .wp-block-pullquote cite {
	display: block;
	margin-top: 0.75em;
	color: var(--c-muted);
	font-family: var(--f-display);
	font-size: var(--t-xs);
	font-style: normal;
	font-weight: 550;
}

.entry-content .wp-block-quote.is-style-large,
.entry-content .wp-block-quote.is-large {
	border-left-width: 5px;
	font-size: 1.3em;
	line-height: 1.45;
}

.entry-content .wp-block-pullquote {
	margin-block: 2em;
	padding: 1.25em 0;
	border-block: 4px solid var(--c-ink);
	border-inline: 0;
	text-align: left;
}

.entry-content .wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--f-display);
	font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	font-style: normal;
	font-weight: 680;
	line-height: 1.22;
	letter-spacing: -0.02em;
}

/* Tables */
.entry-content .wp-block-table,
.entry-content .table-scroll {
	overflow-x: auto;
	margin-inline: 0;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.entry-content table {
	width: 100%;
	min-width: 32rem;
	border-collapse: collapse;
	font-family: var(--f-display);
	font-size: var(--t-sm);
	line-height: 1.45;
	font-variant-numeric: lining-nums tabular-nums;
}

.entry-content th,
.entry-content td {
	padding: 0.7em 0.9em;
	border: 0;
	border-bottom: 1px solid var(--c-rule);
	text-align: left;
	vertical-align: top;
}

.entry-content thead th,
.entry-content thead td {
	border-bottom: 2px solid var(--c-ink);
	font-weight: 700;
	color: var(--c-ink);
	white-space: nowrap;
}

.entry-content tbody tr:hover {
	background: var(--c-tint);
}

.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: var(--c-tint);
}

.entry-content .wp-block-table figcaption,
.entry-content .wp-element-caption {
	margin-top: 0.6em;
	color: var(--c-muted);
	font-family: var(--f-display);
	font-size: var(--t-xs);
	line-height: 1.45;
	text-align: left;
}

/* Images, figures, galleries */
.entry-content figure {
	margin-inline: 0;
}

.entry-content img {
	border-radius: var(--r-sm);
}

.entry-content .wp-block-image img,
.entry-content figure > img {
	display: block;
}

.entry-content figcaption {
	margin-top: 0.6em;
	color: var(--c-muted);
	font-family: var(--f-display);
	font-size: var(--t-xs);
	line-height: 1.45;
}

.entry-content .aligncenter {
	margin-inline: auto;
	text-align: center;
}

.entry-content .aligncenter figcaption {
	text-align: center;
}

@media (min-width: 760px) {
	.entry-content .alignleft {
		float: left;
		max-width: 45%;
		margin: 0.35em 1.75em 1em 0;
	}

	.entry-content .alignright {
		float: right;
		max-width: 45%;
		margin: 0.35em 0 1em 1.75em;
	}

	.entry-content .alignleft + *,
	.entry-content .alignright + * {
		margin-top: 0;
	}
}

@media (max-width: 759.98px) {
	.entry-content .alignleft,
	.entry-content .alignright {
		float: none;
		margin-inline: 0;
	}

	/* Full-width media on phones run edge to edge. */
	.entry-content > .alignfull,
	.entry-content > .alignwide.wp-block-image,
	.entry-content > .alignfull.wp-block-image {
		margin-inline: calc(-1 * var(--gutter));
		max-width: none;
	}

	.entry-content > .alignfull img,
	.entry-content > .alignwide.wp-block-image img {
		border-radius: 0;
	}

	.entry-content > .alignfull figcaption,
	.entry-content > .alignwide.wp-block-image figcaption {
		padding-inline: var(--gutter);
	}
}

@media (min-width: 1280px) {
	/* Wide and full media extend into the right-hand breathing room. */
	.entry-content > .alignwide,
	.entry-content > .alignfull {
		width: calc(100% + 12rem);
		max-width: none;
	}
}

.entry-content .wp-block-gallery {
	gap: var(--s-3);
}

.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	font-family: var(--f-display);
	font-size: var(--t-xs);
}

.entry-content .gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: var(--s-3);
}

.entry-content .gallery-item {
	margin: 0;
}

.entry-content .wp-caption {
	max-width: 100%;
}

/* Embeds */
.entry-content iframe {
	border: 0;
}

.entry-content iframe,
.entry-content embed,
.entry-content object,
.entry-content video {
	display: block;
	max-width: 100%;
}

.entry-content video {
	width: 100%;
	height: auto;
	border-radius: var(--r-sm);
}

.entry-content .wp-block-embed iframe {
	width: 100%;
	border-radius: var(--r-sm);
}

.entry-content .wp-block-embed__wrapper {
	position: relative;
}

/* Bare iframes pasted without an embed block */
.entry-content > iframe[src*="youtube"],
.entry-content > iframe[src*="vimeo"],
.entry-content p > iframe[src*="youtube"],
.entry-content p > iframe[src*="vimeo"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* Code */
.entry-content code,
.entry-content kbd,
.entry-content samp {
	font-family: var(--f-mono);
	font-size: 0.86em;
	font-variant-numeric: normal;
}

.entry-content :not(pre) > code {
	padding: 0.1em 0.35em;
	border-radius: var(--r-sm);
	background: var(--c-tint);
	color: var(--c-ink);
	overflow-wrap: anywhere;
}

.entry-content kbd {
	padding: 0.1em 0.4em;
	border: 1px solid var(--c-rule-strong);
	border-bottom-width: 2px;
	border-radius: var(--r-sm);
	background: var(--c-surface);
}

.entry-content pre,
.entry-content .wp-block-code {
	overflow-x: auto;
	padding: 1.1em 1.25em;
	border-radius: var(--r-md);
	background: var(--c-ink);
	color: var(--c-paper);
	font-family: var(--f-mono);
	font-size: 0.875rem;
	line-height: 1.6;
	tab-size: 4;
	white-space: pre;
	scrollbar-width: thin;
}

.entry-content pre code,
.entry-content .wp-block-code code {
	padding: 0;
	background: none;
	color: inherit;
	font-size: inherit;
	white-space: pre;
	overflow-wrap: normal;
}

.entry-content .wp-block-preformatted {
	white-space: pre-wrap;
}

/* Buttons */
.entry-content .wp-block-buttons {
	gap: var(--s-3);
}

.entry-content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 2.875rem;
	padding: 0.6rem 1.35rem;
	border-radius: var(--r-md);
	background: var(--c-primary);
	color: var(--c-on-primary);
	font-family: var(--f-display);
	font-size: var(--t-sm);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--dur-fast) var(--ease);
}

.entry-content .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--c-primary) 82%, #000);
	text-decoration: none;
}

.entry-content .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--c-ink);
	box-shadow: inset 0 0 0 1.5px currentColor;
}

.entry-content .is-style-outline .wp-block-button__link:hover {
	background: var(--c-ink);
	color: var(--c-paper);
}

/* Callouts: any group or paragraph given a background colour in the editor */
.entry-content .wp-block-group.has-background,
.entry-content p.has-background,
.entry-content .callout,
.entry-content .wp-block-columns.has-background {
	padding: 1.15em 1.4em;
	border-radius: var(--r-md);
}

.entry-content .wp-block-group.has-background > * + * {
	margin-top: 0.85em;
}

.entry-content .wp-block-group.has-border-color,
.entry-content .callout {
	border-left: 4px solid var(--c-primary);
}

.entry-content .callout {
	background: var(--c-tint-primary);
}

/* Separator */
.entry-content hr,
.entry-content .wp-block-separator {
	width: 5rem;
	height: 0;
	margin-block: 2.5em;
	margin-inline: 0;
	border: 0;
	border-top: 3px solid var(--c-ink);
	opacity: 1;
}

.entry-content .wp-block-separator.is-style-wide {
	width: 100%;
	border-top-width: 1px;
	border-top-color: var(--c-rule);
}

.entry-content .wp-block-separator.is-style-dots {
	width: auto;
	border: 0;
}

/* Columns, cover, media & text */
.entry-content .wp-block-columns {
	gap: var(--s-5);
}

.entry-content .wp-block-cover {
	border-radius: var(--r-sm);
}

.entry-content .wp-block-media-text {
	gap: var(--s-5);
}

/* FAQ: native details blocks, Yoast FAQ, Rank Math FAQ */
.entry-content details,
.entry-content .wp-block-details {
	padding-block: 0.25em;
	border-top: 1px solid var(--c-rule);
}

.entry-content details + details,
.entry-content .wp-block-details + .wp-block-details {
	margin-top: 0;
}

.entry-content details:last-of-type {
	border-bottom: 1px solid var(--c-rule);
}

.entry-content details > summary {
	position: relative;
	padding: 0.85em 2.5rem 0.85em 0;
	font-family: var(--f-display);
	font-size: 1.0625rem;
	font-weight: 650;
	line-height: 1.35;
	color: var(--c-ink);
	cursor: pointer;
	list-style: none;
}

.entry-content details > summary::-webkit-details-marker {
	display: none;
}

.entry-content details > summary::after {
	content: "";
	position: absolute;
	right: 0.5rem;
	top: 50%;
	width: 0.7rem;
	height: 0.7rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	transition: transform var(--dur) var(--ease);
}

.entry-content details[open] > summary::after {
	transform: translateY(-30%) rotate(225deg);
}

.entry-content details > :not(summary) {
	margin-top: 0.25em;
	margin-bottom: 1em;
}

.entry-content .schema-faq-section,
.entry-content .rank-math-list-item {
	padding-block: 1em;
	border-top: 1px solid var(--c-rule);
}

.entry-content .schema-faq-question,
.entry-content .rank-math-question {
	display: block;
	font-family: var(--f-display);
	font-size: 1.0625rem;
	font-weight: 680;
	color: var(--c-ink);
}

.entry-content .schema-faq-answer,
.entry-content .rank-math-answer {
	margin: 0.5em 0 0;
}

/* Footnotes */
.entry-content .wp-block-footnotes {
	padding-top: 1.25em;
	border-top: 1px solid var(--c-rule);
	font-size: 0.875em;
}

/* Paginated posts */
.page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2);
	margin-top: var(--s-6);
	font-family: var(--f-display);
	font-size: var(--t-sm);
}

.page-links__label {
	margin-right: var(--s-2);
	font-weight: 650;
}

.page-links .post-page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--c-rule-strong);
	border-radius: var(--r-md);
	color: var(--c-ink);
	text-decoration: none;
}

.page-links .post-page-numbers.current {
	background: var(--c-ink);
	color: var(--c-paper);
}

/* ==========================================================================
   Article footer: tags, share, author, prev/next
   ========================================================================== */

.article-foot {
	display: grid;
	gap: var(--s-6);
	margin-top: var(--s-8);
}

.tags__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tags__list a {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0.3rem 0.85rem;
	border-radius: var(--r-pill);
	background: var(--c-tint);
	color: var(--c-ink);
	font-family: var(--f-display);
	font-size: var(--t-xs);
	font-weight: 550;
	text-decoration: none;
	transition: background-color var(--dur-fast) var(--ease);
}

.tags__list a::before {
	content: "#";
	margin-right: 0.1em;
	color: var(--c-muted);
}

.tags__list a:hover {
	background: var(--c-rule);
}

.share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-3) var(--s-4);
	padding-block: var(--s-4);
	border-block: 1px solid var(--c-rule);
}

.share__title {
	font-size: var(--t-sm);
	font-weight: 650;
}

.share__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.7rem;
	border: 1px solid var(--c-rule-strong);
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--c-ink);
	font-family: var(--f-display);
	font-size: var(--t-xs);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.share__btn:hover {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: var(--c-paper);
}

.share__btn--copy {
	padding-inline: 0.95rem;
}

.share__btn.is-done {
	background: var(--c-secondary);
	border-color: var(--c-secondary);
	color: var(--c-on-secondary);
}

.author-box {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: var(--s-4);
	padding: var(--s-5);
	border-radius: var(--r-md);
	background: var(--c-tint);
}

.author-box__avatar {
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
}

.author-box__name {
	font-size: var(--t-md);
}

.author-box__name a {
	color: var(--c-ink);
	text-decoration: none;
}

.author-box__name a:hover {
	text-decoration: underline;
}

.author-box__bio {
	margin-top: var(--s-2);
	color: var(--c-text-2);
	font-size: var(--t-sm);
	line-height: 1.6;
}

.author-box__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
	margin-top: var(--s-3);
	font-family: var(--f-display);
	font-size: var(--t-xs);
	font-weight: 600;
}

@media (max-width: 479.98px) {
	.author-box {
		grid-template-columns: minmax(0, 1fr);
	}
}

.post-nav {
	display: grid;
	gap: var(--s-4);
	margin-top: var(--s-7);
}

@media (min-width: 600px) {
	.post-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.post-nav__link {
	display: grid;
	gap: var(--s-1);
	padding-top: var(--s-3);
	border-top: 1px solid var(--c-rule);
	color: var(--c-ink);
	text-decoration: none;
}

.post-nav__link--next {
	text-align: right;
}

@media (min-width: 600px) {
	.post-nav__link--next:only-child {
		grid-column: 2;
	}
}

.post-nav__dir {
	color: var(--c-muted);
	font-family: var(--f-display);
	font-size: var(--t-xs);
	font-weight: 550;
}

.post-nav__title {
	font-family: var(--f-display);
	font-size: var(--t-base);
	font-weight: 620;
	line-height: 1.3;
	overflow-wrap: break-word;
}

.post-nav__link:hover .post-nav__title {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Related: same band styles as the homepage */
.band--related {
	margin-top: var(--band-pad);
	border-top: 1px solid var(--c-rule);
}

.related {
	display: grid;
	gap: var(--s-6) var(--s-5);
}

@media (min-width: 600px) {
	.related {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 600px) and (max-width: 899.98px) {
	.related {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Comments
   ========================================================================== */

.comments {
	padding-block: var(--band-pad);
	border-top: 1px solid var(--c-rule);
}

.comments__inner {
	max-width: var(--w-read);
}

@media (min-width: 1024px) {
	.comments__inner {
		margin-left: calc(var(--w-rail) + var(--s-7));
	}
}

.comments__title {
	font-size: var(--t-xl);
	margin-bottom: var(--s-5);
}

.comment-list,
.comment-list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.comment-list .children {
	margin-left: clamp(0.75rem, 3vw, 2.5rem);
	padding-left: var(--s-4);
	border-left: 2px solid var(--c-rule);
}

.comment-body {
	padding-block: var(--s-5);
	border-top: 1px solid var(--c-rule);
}

.comment-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-1) var(--s-3);
	font-family: var(--f-display);
	font-size: var(--t-xs);
}

.comment-author {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	font-size: var(--t-sm);
}

.comment-author .avatar {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
}

.comment-author .fn {
	font-style: normal;
	font-weight: 650;
}

.comment-author .fn a {
	color: var(--c-ink);
}

.comment-author .says {
	display: none;
}

.comment-metadata a {
	color: var(--c-muted);
	text-decoration: none;
}

.comment-metadata .edit-link {
	margin-left: var(--s-2);
}

.comment-awaiting-moderation {
	flex-basis: 100%;
	color: var(--c-muted);
	font-style: italic;
}

.comment-content {
	margin-top: var(--s-3);
	font-size: var(--t-base);
	overflow-wrap: anywhere;
}

.comment-content > * + * {
	margin-top: 0.85em;
}

.reply {
	margin-top: var(--s-2);
	font-family: var(--f-display);
	font-size: var(--t-xs);
	font-weight: 600;
}

.comment-reply-link {
	color: var(--c-link);
}

.comment-respond {
	margin-top: var(--s-6);
}

.comment-reply-title {
	font-size: var(--t-lg);
	margin-bottom: var(--s-3);
}

.comment-reply-title small {
	margin-left: var(--s-3);
	font-size: var(--t-xs);
	font-weight: 500;
}

.comment-form {
	display: grid;
	gap: var(--s-4);
}

.comment-form > p {
	margin: 0;
}

.comment-notes,
.logged-in-as {
	color: var(--c-muted);
	font-size: var(--t-sm);
}

.comment-form label {
	display: block;
	margin-bottom: var(--s-1);
	font-family: var(--f-display);
	font-size: var(--t-sm);
	font-weight: 600;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1.5px solid var(--c-rule-strong);
	border-radius: var(--r-md);
	background: var(--c-surface);
	font-family: var(--f-display);
	font-size: var(--t-base);
	transition: border-color var(--dur-fast) var(--ease);
}

.comment-form textarea {
	min-height: 9rem;
	resize: vertical;
	line-height: 1.5;
}

.comment-form input:focus,
.comment-form textarea:focus {
	border-color: var(--c-primary);
	outline: 2px solid color-mix(in srgb, var(--c-primary) 30%, transparent);
	outline-offset: 0;
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--s-2);
}

.comment-form-cookies-consent input {
	margin-top: 0.3em;
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--c-primary);
}

.comment-form-cookies-consent label {
	margin: 0;
	font-weight: 450;
}

.comment-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	margin-top: var(--s-4);
	font-family: var(--f-display);
	font-size: var(--t-sm);
}

/* ==========================================================================
   Back to top
   ========================================================================== */

.to-top {
	position: fixed;
	right: max(1rem, env(safe-area-inset-right));
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 90;
	display: grid;
	place-items: center;
	width: 2.875rem;
	height: 2.875rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--c-ink);
	color: var(--c-paper);
	box-shadow: var(--shadow-pop);
	cursor: pointer;
	opacity: 0;
	transform: translateY(0.5rem);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.to-top.is-visible {
	opacity: 1;
	transform: none;
}

.to-top[hidden] {
	display: none;
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
	.article-rail,
	.share,
	.post-nav,
	.band--related,
	.comments,
	.to-top,
	.progress,
	.crumbs {
		display: none !important;
	}

	.article-head,
	.article-layout {
		display: block;
		width: auto;
	}

	.article-head__title {
		font-size: 24pt;
	}

	.entry-content {
		font-size: 11pt;
		line-height: 1.5;
	}

	.entry-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		color: #555;
		overflow-wrap: anywhere;
	}

	.entry-content pre {
		white-space: pre-wrap;
		background: #f4f4f4;
		color: #000;
	}

	.entry-content h2,
	.entry-content h3 {
		break-after: avoid;
	}

	.entry-content img,
	.entry-content figure,
	.entry-content table {
		break-inside: avoid;
	}
}

/* ==========================================================================
   Elementor-built articles: footer, share and related keep the reading column.
   ========================================================================== */

.article-layout--after-builder {
	margin-top: 0;
}

.article-layout--after-builder .article-foot {
	margin-top: var(--s-7);
}

.is-builder .article-hero {
	margin-bottom: var(--s-6);
}

/* ==========================================================================
   Article design: cover image (Template → Cover image article)
   ========================================================================== */

.article-cover {
	position: relative;
	display: grid;
	min-height: clamp(26rem, 72vh, 46rem);
	overflow: hidden;
	background: var(--c-ink);
	color: #fff;
}

.article-cover__media {
	position: absolute;
	inset: 0;
}

.article-cover__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.article-cover__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, color-mix(in srgb, var(--c-ink) 92%, transparent) 0%, color-mix(in srgb, var(--c-ink) 60%, transparent) 50%, color-mix(in srgb, var(--c-ink) 20%, transparent) 100%);
}

.article-cover__inner {
	position: relative;
	z-index: 1;
	display: grid;
	align-content: end;
	gap: var(--s-5);
	padding-block: clamp(4rem, 3rem + 6vw, 8rem) clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.article-cover__inner > * {
	grid-column: 1 / -1;
	max-width: 52rem;
}

.article-cover .article-head__title {
	max-width: 22ch;
}

.article-cover .crumbs ol,
.article-cover .crumbs a,
.article-cover .crumbs li::after,
.article-cover .label,
.article-cover .byline__author a,
.article-cover .meta {
	color: #fff;
}

.article-cover .crumbs a,
.article-cover .meta {
	opacity: 0.85;
}

.article-cover .article-head__dek {
	color: #fff;
	opacity: 0.9;
}

.article-cover .byline {
	border-top-color: color-mix(in srgb, #fff 30%, transparent);
}

.article-cover .meta > * + *::before {
	background: color-mix(in srgb, #fff 45%, transparent);
}

.article-cover :focus-visible {
	outline-color: #fff;
}

@media (min-width: 1024px) {
	.article-cover__inner {
		padding-left: calc(var(--w-rail) + var(--s-7));
	}
}

.article-cover + .article-layout {
	margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

/* ==========================================================================
   Article design: centered (Template → Centered article)
   ========================================================================== */

@media (min-width: 1024px) {
	.article-head.article-head--centered,
	.article-layout.article-layout--centered {
		grid-template-columns: minmax(0, 1fr) minmax(0, var(--w-read)) minmax(0, 1fr);
	}

	.article-head--centered > *,
	.article-head--centered .article-head__text,
	.article-layout--centered .article-main {
		grid-column: 2 / 3;
	}

	.article-layout--centered .entry-content > .alignwide,
	.article-layout--centered .entry-content > .alignfull {
		width: calc(100% + 8rem);
		margin-left: -4rem;
	}

	.article-page:has(.article-layout--centered) .comments__inner {
		margin-left: auto;
		margin-right: auto;
	}
}