/**
 * Folio — front-end styles.
 *
 * Every rule here is built on the semantic tokens from tokens.css (colors,
 * type scale, spacing, widths, corners, shadows, motion), so each Customizer
 * setting — and every combination of them — restyles the whole theme. Layout
 * variants hang off body classes the Customizer sets (folio-blog-*,
 * folio-cards-*, folio-header-*, folio-links-*, folio-ui-uppercase …);
 * interactive states come from theme.js (is-open, is-scrolled, is-copied,
 * --folio-progress …).
 *
 * Breakpoints are in em, so they follow the visitor's default font size:
 *   40em  two-up details: list cards, post navigation, floats, comment form
 *   56em  desktop navigation, featured hero side by side, related posts grid
 *   64em  sidebar beside the content, full grid columns
 *
 * Contents
 *   1. Reset and base
 *   2. Typography
 *   3. Interface type (the UI font role)
 *   4. Accessibility utilities
 *   5. Icons, buttons and forms
 *   6. Layout
 *   7. Site header and navigation
 *   8. Search dialog
 *   9. Page headers
 *  10. Post feed and cards
 *  11. Single posts and pages
 *  12. Blocks in content
 *  13. Entry footer: tags, share links, edit link
 *  14. Author box, post navigation, related posts
 *  15. Comments
 *  16. Pagination
 *  17. Sidebar and widgets
 *  18. Site footer
 *  19. 404, search results and empty states
 *  20. WordPress core classes
 *  21. Reduced motion, print and forced colors
 *
 * @package Folio
 */

/* ==========================================================================
   1. Reset and base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* Anchor targets (skip link, footnotes, #comments) stop below the sticky header. */
	scroll-padding-top: calc(var(--folio-header-offset) + var(--folio-admin-bar) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/*
 * The WordPress toolbar: 32px, 46px on tablets, and below 600px it scrolls
 * away with the page, so nothing needs to clear it. <html> gets the value too
 * (via :has) for scroll-padding; the rules are separate so a browser without
 * :has() still applies the body one.
 */
.admin-bar {
	--folio-admin-bar: 32px;
}

:root:has(> body.admin-bar) {
	--folio-admin-bar: 32px;
}

@media (max-width: 782px) {
	.admin-bar {
		--folio-admin-bar: 46px;
	}

	:root:has(> body.admin-bar) {
		--folio-admin-bar: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar {
		--folio-admin-bar: 0px;
	}

	:root:has(> body.admin-bar) {
		--folio-admin-bar: 0px;
	}
}

body {
	/*
	 * Component values derived from the tokens. Interface labels shrink a
	 * touch when they are set in uppercase (see .folio-ui-uppercase below).
	 */
	--folio-ui-scale: 1;
	--folio-fs-ui: max(0.75rem, calc(var(--folio-fs-sm) * var(--folio-ui-scale)));
	--folio-fs-ui-xs: max(0.6875rem, calc(var(--folio-fs-xs) * var(--folio-ui-scale)));
	--folio-color-text-soft: color-mix(in srgb, var(--folio-color-text) 78%, var(--folio-color-muted));
	--folio-color-hover-tint: color-mix(in srgb, var(--folio-color-text) 7%, transparent);
	--folio-color-link-band: color-mix(in srgb, var(--folio-color-accent) 30%, transparent);
	--folio-hairline: 1px solid var(--folio-color-border);
	--folio-control-border: clamp(1px, var(--folio-border-width), 2px) solid var(--folio-color-border-strong);

	margin: 0;
	background-color: var(--folio-color-bg);
	color: var(--folio-color-text);
	font-family: var(--folio-font-body);
	font-size: var(--folio-fs-base);
	font-weight: var(--folio-fw-body);
	line-height: var(--folio-lh-body);
	font-optical-sizing: auto;
	font-kerning: normal;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

body.folio-ui-uppercase {
	--folio-ui-scale: 0.88;
}

::selection {
	background-color: var(--folio-color-selection);
	color: var(--folio-color-text);
}

img,
picture,
video,
canvas,
svg,
iframe,
embed,
object {
	max-width: 100%;
}

img,
video {
	height: auto;
}

img {
	vertical-align: middle;
}

button,
input,
select,
textarea {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
}

/* Margins are set per context (post content, widgets, comments …). */
:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, pre, hr) {
	margin: 0;
}

:where(ul, ol) {
	margin: 0;
	padding-inline-start: 1.25em;
}

/* Footer sits at the bottom of short pages. */
.site {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--folio-admin-bar));
	min-height: calc(100svh - var(--folio-admin-bar));
	/*
	 * Full-bleed blocks use 100vw, which includes a classic scrollbar. Clipping
	 * (not hidden) keeps that from scrolling sideways without breaking sticky
	 * positioning.
	 */
	overflow-x: clip;
}

.site-content {
	flex: 1 0 auto;
}

/* ==========================================================================
   2. Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--folio-font-heading);
	font-weight: var(--folio-fw-heading);
	line-height: var(--folio-lh-heading);
	letter-spacing: var(--folio-tracking-heading);
	text-wrap: balance;
}

h1 {
	font-size: var(--folio-fs-3xl);
}

h2 {
	font-size: var(--folio-fs-xl);
}

h3 {
	font-size: var(--folio-fs-lg);
}

h4 {
	font-size: var(--folio-fs-md);
	line-height: var(--folio-lh-snug);
}

h5 {
	font-size: var(--folio-fs-base);
	line-height: var(--folio-lh-snug);
}

h6 {
	font-family: var(--folio-font-ui);
	font-size: var(--folio-fs-sm);
	font-weight: var(--folio-fw-strong);
	line-height: var(--folio-lh-ui);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

p {
	text-wrap: pretty;
}

b,
strong {
	font-weight: var(--folio-fw-strong);
}

small {
	font-size: 0.85em;
}

:where(mark) {
	padding: 0.05em 0.2em;
	border-radius: 0.2em;
	background-color: var(--folio-color-selection);
	color: inherit;
}

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

sub,
sup {
	position: relative;
	font-size: 0.75em;
	line-height: 0;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

:where(code, kbd, samp, pre) {
	font-family: var(--folio-font-mono);
	font-size: 0.875em;
	font-variant-ligatures: none;
}

pre :where(code, kbd, samp) {
	font-size: 1em;
}

:where(:not(pre) > code) {
	padding: 0.1em 0.35em;
	border-radius: var(--folio-radius-sm);
	background-color: var(--folio-color-surface);
	overflow-wrap: anywhere;
}

kbd {
	display: inline-block;
	padding: 0.05em 0.4em;
	border: 1px solid var(--folio-color-border-strong);
	border-bottom-width: 2px;
	border-radius: var(--folio-radius-sm);
	background-color: var(--folio-color-surface);
	font-size: 0.8em;
	line-height: 1.4;
}

hr {
	height: 0;
	border: 0;
	border-top: var(--folio-hairline);
}

/*
 * Links. Every link is accent colored and underlined by default; interface
 * links (navigation, cards, buttons, pills, meta …) drop the underline in
 * their own sections.
 */
a {
	color: var(--folio-color-accent);
	text-decoration-line: underline;
	text-decoration-thickness: max(1px, 0.0625em);
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	text-underline-offset: 0.2em;
	transition:
		color var(--folio-duration) var(--folio-ease),
		text-decoration-color var(--folio-duration) var(--folio-ease),
		background-color var(--folio-duration) var(--folio-ease),
		background-size var(--folio-duration) var(--folio-ease);
}

a:hover {
	color: var(--folio-color-accent-hover);
	text-decoration-color: currentColor;
}

/*
 * Links in running text follow the "Links in text" setting:
 * folio-links-underline (the default above), -hover or -highlight. The
 * containers are wrapped in :where() so block and widget styles can still
 * override; buttons, tag clouds and page links are left alone.
 */
.folio-links-hover :where(.entry-content, .page-content, .no-results__content, .archive-description, .author-bio__description, .comment-content, .textwidget, .widget p, .site-info__text, .comment-notes, .logged-in-as) a:not([class*="button"], .tag-cloud-link, .post-page-numbers) {
	text-decoration-color: transparent;
}

.folio-links-hover :where(.entry-content, .page-content, .no-results__content, .archive-description, .author-bio__description, .comment-content, .textwidget, .widget p, .site-info__text, .comment-notes, .logged-in-as) a:not([class*="button"], .tag-cloud-link, .post-page-numbers):is(:hover, :focus-visible) {
	text-decoration-color: currentColor;
}

.folio-links-highlight :where(.entry-content, .page-content, .no-results__content, .archive-description, .author-bio__description, .comment-content, .textwidget, .widget p, .site-info__text, .comment-notes, .logged-in-as) a:not([class*="button"], .tag-cloud-link, .post-page-numbers) {
	margin-inline: -0.08em;
	padding-inline: 0.08em;
	background-image: linear-gradient(var(--folio-color-link-band), var(--folio-color-link-band));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 100% 0.42em;
	color: inherit;
	text-decoration-line: none;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.folio-links-highlight :where(.entry-content, .page-content, .no-results__content, .archive-description, .author-bio__description, .comment-content, .textwidget, .widget p, .site-info__text, .comment-notes, .logged-in-as) a:not([class*="button"], .tag-cloud-link, .post-page-numbers):is(:hover, :focus-visible) {
	background-size: 100% 100%;
	color: inherit;
}

/* Image links are not text links: no underline, no highlighter band. */
:where(.entry-content, .comment-content, .widget) :is(figure, .wp-block-image, .wp-block-gallery, .gallery, .wp-caption) a {
	background-image: none;
	text-decoration-line: none;
}

/* ==========================================================================
   3. Interface type (the UI font role)
   ========================================================================== */

/*
 * Navigation, buttons, meta, captions, labels, pills, pagination and the
 * footer share the interface font. Weight and size are set per component.
 */
.main-navigation,
.footer-navigation,
.site-description,
.entry-meta,
.page-header__kicker,
.search-count,
.post-card__badge,
.category-pill,
.read-more,
.entry-tags,
.share-links,
.edit-link,
.post-navigation__label,
.author-bio__link,
.comment-meta,
.comment-reply-link,
.comment-notes,
.logged-in-as,
.comment-form label,
.no-comments,
.pagination,
.posts-navigation,
.comment-navigation,
.page-links,
.widget-title,
.recent-posts__title,
.recent-posts-list__date,
.footer-menu,
.back-to-top,
label,
legend {
	font-family: var(--folio-font-ui);
	letter-spacing: var(--folio-tracking-ui);
}

/* Running text in the interface font: the footer and captions (no label tracking). */
.site-footer,
figcaption,
.wp-caption-text {
	font-family: var(--folio-font-ui);
}

/* "Uppercase interface labels": small caps-style labels, set slightly smaller via --folio-ui-scale. */
.folio-ui-uppercase :is(
	.main-navigation a,
	.footer-menu a,
	.entry-meta,
	.page-header__kicker,
	.search-count,
	.category-pill,
	.post-card__badge,
	.read-more,
	.entry-tags,
	.share-links__label,
	.share-links__copy,
	.edit-link,
	.post-navigation__label,
	.author-bio__link,
	.comment-metadata,
	.comment-reply-link,
	.comment-form label,
	.pagination,
	.posts-navigation a,
	.comment-navigation a,
	.page-links,
	.widget-title,
	.back-to-top,
	.recent-posts-list__date,
	.button,
	.wp-block-button__link,
	.wp-element-button,
	input[type="submit"],
	input[type="button"],
	input[type="reset"]
) {
	text-transform: uppercase;
}

/* ==========================================================================
   4. Accessibility utilities
   ========================================================================== */

/* Visually hidden, still announced. The WordPress standard, with a focusable variant. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	top: calc(var(--folio-admin-bar) + 0.75rem);
	left: 0.75rem;
	z-index: 100000;
	display: block;
	width: auto;
	height: auto;
	padding: 0.9rem 1.4rem;
	border-radius: var(--folio-radius-sm);
	background-color: var(--folio-color-surface);
	box-shadow: var(--folio-shadow-lg);
	clip: auto !important;
	clip-path: none;
	color: var(--folio-color-text);
	font-family: var(--folio-font-ui);
	font-size: var(--folio-fs-sm);
	font-weight: var(--folio-fw-strong);
	line-height: normal;
	text-decoration: none;
	white-space: normal;
}

/* The skip link must clear the sticky header and the toolbar. */
.skip-link:focus {
	position: fixed !important;
}

/* The hidden attribute always wins (the native share button relies on it). */
[hidden]:not([hidden="until-found"]) {
	display: none !important;
}

/* One focus ring for everything interactive, shown for keyboard use only. */
:focus-visible {
	outline: 2px solid var(--folio-color-focus);
	outline-offset: 2px;
}

:focus:not(:focus-visible) {
	outline: none;
}

/* Programmatic focus targets (skip link and back-to-top target) need no ring. */
[tabindex="-1"]:focus {
	outline: none;
}

/* ==========================================================================
   5. Icons, buttons and forms
   ========================================================================== */

.folio-icon {
	display: inline-block;
	flex-shrink: 0;
	width: 1.25em;
	height: 1.25em;
	vertical-align: middle;
}

/* Arrows and chevrons point the other way in right-to-left languages. */
[dir="rtl"] :is(.folio-icon--arrow-left, .folio-icon--arrow-right, .folio-icon--chevron-left, .folio-icon--chevron-right) {
	scale: -1 1;
}

/*
 * Buttons: plain <button>s (zero specificity, so components restyle them
 * freely), .button, form submits and the block editor's buttons share one
 * look: accent fill, interface font, the "Button shape" corners.
 */
:where(button, input[type="button"], input[type="reset"], input[type="submit"]),
.button,
.wp-block-button__link,
.wp-element-button,
.wp-block-file .wp-block-file__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	max-width: 100%;
	min-height: 2.75rem;
	padding: 0.7em 1.35em;
	border: 0;
	border-radius: var(--folio-radius-button);
	background-color: var(--folio-color-accent);
	color: var(--folio-color-accent-text);
	font-family: var(--folio-font-ui);
	font-size: var(--folio-fs-ui);
	font-weight: var(--folio-fw-ui);
	letter-spacing: var(--folio-tracking-ui);
	line-height: var(--folio-lh-ui);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--folio-duration) var(--folio-ease),
		border-color var(--folio-duration) var(--folio-ease),
		color var(--folio-duration) var(--folio-ease),
		box-shadow var(--folio-duration) var(--folio-ease);
}

:where(button, input[type="button"], input[type="reset"], input[type="submit"]):hover,
.button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
.wp-block-file .wp-block-file__button:hover {
	background-color: var(--folio-color-accent-hover);
	color: var(--folio-color-accent-text);
}

:where(button, input[type="button"], input[type="reset"], input[type="submit"]):disabled,
.button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Outline buttons: the accent as a line instead of a fill. */
.is-style-outline > .wp-block-button__link,
.wp-block-button__link.is-style-outline {
	padding-block: calc(0.7em - max(1px, var(--folio-border-width)));
	border: max(1px, var(--folio-border-width)) solid currentColor;
	background-color: transparent;
	color: var(--folio-color-accent);
}

.is-style-outline > .wp-block-button__link:hover,
.wp-block-button__link.is-style-outline:hover {
	background-color: color-mix(in srgb, var(--folio-color-accent) 10%, transparent);
	color: var(--folio-color-accent-hover);
}

/* Square-ish icon buttons in the header, dialog and elsewhere: 44px targets. */
.icon-button {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: var(--folio-radius-button);
	background-color: transparent;
	color: inherit;
}

.icon-button:hover {
	background-color: var(--folio-color-hover-tint);
	color: inherit;
}

.icon-button .folio-icon {
	width: 1.375rem;
	height: 1.375rem;
}

/* Text fields, text areas and selects. */
input:not([type]),
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
textarea,
select {
	width: 100%;
	max-width: 100%;
	min-height: 2.75rem;
	padding: 0.6em 0.85em;
	border: var(--folio-control-border);
	border-radius: var(--folio-radius-sm);
	background-color: color-mix(in srgb, var(--folio-color-surface) 40%, var(--folio-color-bg));
	color: var(--folio-color-text);
	font-family: var(--folio-font-ui);
	/* Never below 16px, so phones do not zoom in on focus. */
	font-size: max(1rem, var(--folio-fs-sm));
	line-height: var(--folio-lh-ui);
	-webkit-appearance: none;
	appearance: none;
	transition:
		border-color var(--folio-duration) var(--folio-ease),
		background-color var(--folio-duration) var(--folio-ease);
}

:is(input, textarea, select):focus {
	border-color: var(--folio-color-accent);
	background-color: var(--folio-color-bg);
}

/* Fields draw their ring against the accent border, so it reads as one outline. */
:is(input:not([type="checkbox"], [type="radio"]), textarea, select):focus-visible {
	outline-offset: 0;
}

::placeholder {
	color: var(--folio-color-muted);
	opacity: 1;
}

textarea {
	min-height: 9rem;
	resize: vertical;
}

/* A chevron drawn with two gradients in the text color, so it follows the palette. */
select {
	padding-inline-end: 2.5em;
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - 1.2em) 52%,
		calc(100% - 0.85em) 52%;
	background-repeat: no-repeat;
	background-size: 0.35em 0.35em;
	cursor: pointer;
}

[dir="rtl"] select {
	background-position:
		0.85em 52%,
		1.2em 52%;
}

select[multiple],
select[size]:not([size="1"]) {
	padding-inline-end: 0.85em;
	background-image: none;
}

input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/* At least 24px, the WCAG 2.2 minimum target size. */
input[type="checkbox"],
input[type="radio"] {
	width: max(1.5rem, 1.125em);
	height: max(1.5rem, 1.125em);
	margin: 0;
	accent-color: var(--folio-color-accent);
	cursor: pointer;
}

label {
	font-size: var(--folio-fs-ui);
	font-weight: var(--folio-fw-ui);
	line-height: var(--folio-lh-ui);
}

fieldset {
	margin: 0;
	padding: var(--folio-space-sm) var(--folio-space-md);
	border: var(--folio-hairline);
	border-radius: var(--folio-radius);
}

legend {
	padding-inline: 0.35em;
	font-size: var(--folio-fs-ui);
	font-weight: var(--folio-fw-strong);
}

/* The theme search form: field plus a square search button. */
.search-form {
	display: flex;
	align-items: stretch;
	gap: var(--folio-space-2xs);
	width: 100%;
	max-width: 34rem;
}

.search-form__input {
	flex: 1 1 auto;
	min-width: 0;
}

.search-form__submit {
	flex: none;
	width: 2.75rem;
	padding: 0;
}

.search-form__submit .folio-icon {
	width: 1.25rem;
	height: 1.25rem;
}

/* ==========================================================================
   6. Layout
   ========================================================================== */

/* The page column: site width plus the side gutters. */
.container {
	width: 100%;
	max-width: calc(var(--folio-wide-width) + 2 * var(--folio-gutter));
	margin-inline: auto;
	padding-inline: var(--folio-gutter);
}

/* Content and sidebar. Below 64em the sidebar drops under the content. */
.content-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: var(--folio-space-xl);
	align-items: start;
}

.site-main {
	min-width: 0;
	padding-block: var(--folio-space-xl) var(--folio-space-3xl);
}

@media (min-width: 64em) {
	.content-layout.has-sidebar {
		grid-template-columns: minmax(0, 1fr) var(--folio-sidebar-width);
	}

	.content-layout.sidebar-left {
		grid-template-columns: var(--folio-sidebar-width) minmax(0, 1fr);
	}

	.content-layout.sidebar-left > .site-main {
		grid-row: 1;
		grid-column: 2;
	}

	.content-layout.sidebar-left > .sidebar {
		grid-row: 1;
		grid-column: 1;
	}
}

/* ==========================================================================
   7. Site header and navigation
   ========================================================================== */

.site-header {
	position: relative;
	z-index: var(--folio-z-header);
	border-bottom: var(--folio-hairline);
	background-color: var(--folio-color-bg);
	transition:
		background-color var(--folio-duration) var(--folio-ease),
		border-color var(--folio-duration) var(--folio-ease),
		box-shadow var(--folio-duration) var(--folio-ease);
}

/* Sticky: translucent and blurred, with a hairline and shadow once the page scrolls. */
.folio-header-sticky .site-header {
	position: sticky;
	top: var(--folio-admin-bar);
	border-bottom-color: transparent;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.folio-header-sticky .site-header {
		background-color: var(--folio-color-header-bg);
		-webkit-backdrop-filter: saturate(1.6) blur(14px);
		backdrop-filter: saturate(1.6) blur(14px);
	}
}

.folio-header-sticky .site-header.is-scrolled {
	border-bottom-color: var(--folio-color-border);
	box-shadow: var(--folio-shadow-sm);
}

/* Grid areas: brand | actions on phones; brand | nav | actions from 56em. */
.site-header__inner {
	display: grid;
	grid-template-areas: "brand actions";
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--folio-space-md);
	max-width: calc(var(--folio-wide-width) + 2 * var(--folio-gutter));
	margin-inline: auto;
	padding: var(--folio-space-sm) var(--folio-gutter);
}

.site-branding {
	display: flex;
	flex-wrap: wrap;
	grid-area: brand;
	align-items: center;
	gap: 0.15rem var(--folio-space-xs);
	min-width: 0;
}

.custom-logo-link {
	display: inline-flex;
	flex-shrink: 0;
}

.custom-logo {
	display: block;
	width: auto;
	max-height: calc(2.75rem * var(--folio-density));
}

.site-title {
	margin: 0;
	font-family: var(--folio-font-heading);
	font-size: var(--folio-fs-lg);
	font-weight: var(--folio-fw-heading);
	line-height: var(--folio-lh-snug);
	letter-spacing: var(--folio-tracking-heading);
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.site-title a {
	color: var(--folio-color-text);
	text-decoration: none;
}

.site-title a:hover {
	color: var(--folio-color-accent);
}

.site-description {
	flex-basis: 100%;
	margin: 0;
	color: var(--folio-color-muted);
	font-size: var(--folio-fs-ui-xs);
	line-height: var(--folio-lh-ui);
}

.folio-hide-tagline .site-description {
	display: none;
}

.site-header__actions {
	display: flex;
	grid-area: actions;
	align-items: center;
	justify-self: end;
	gap: 0.125rem;
	/* Optically align the icons, not the 44px hit areas, with the gutter. */
	margin-inline-end: -0.6875rem;
}

/* The menu button shows "menu" or "close"; theme.js keeps aria-expanded in sync. */
.menu-toggle .folio-icon--close,
.menu-toggle[aria-expanded="true"] .folio-icon--menu {
	display: none;
}

.menu-toggle[aria-expanded="true"] .folio-icon--close {
	display: inline-block;
}

/*
 * The dark mode switch shows the moon in light mode and the sun in dark mode.
 * The effective scheme mirrors tokens.css: forced dark, the visitor's choice,
 * or the system preference when the site follows it.
 */
.theme-toggle .folio-icon--sun {
	display: none;
}

:root[data-folio-scheme="dark"] .theme-toggle .folio-icon--sun,
:root[data-theme="dark"] .theme-toggle .folio-icon--sun {
	display: inline-block;
}

:root[data-folio-scheme="dark"] .theme-toggle .folio-icon--moon,
:root[data-theme="dark"] .theme-toggle .folio-icon--moon {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root:is([data-folio-scheme="toggle"], [data-folio-scheme="auto"]):not([data-theme="light"]) .theme-toggle .folio-icon--sun {
		display: inline-block;
	}

	:root:is([data-folio-scheme="toggle"], [data-folio-scheme="auto"]):not([data-theme="light"]) .theme-toggle .folio-icon--moon {
		display: none;
	}
}

/* Menus. */
.main-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation a {
	display: block;
	color: var(--folio-color-text);
	font-weight: var(--folio-fw-ui);
	line-height: var(--folio-lh-ui);
	text-decoration: none;
}

.main-navigation a:hover,
.main-navigation :is(.current-menu-item, .current_page_item) > a {
	color: var(--folio-color-accent);
}

.submenu-toggle {
	display: inline-grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: var(--folio-radius-sm);
	background-color: transparent;
	color: var(--folio-color-muted);
}

.submenu-toggle:hover {
	background-color: var(--folio-color-hover-tint);
	color: var(--folio-color-text);
}

.submenu-toggle .folio-icon {
	width: 1rem;
	height: 1rem;
	transition: transform var(--folio-duration) var(--folio-ease);
}

.submenu-toggle[aria-expanded="true"] .folio-icon {
	transform: rotate(180deg);
}

/* Phones and tablets: the menu is a panel below the header, opened by the menu button. */
@media (max-width: 55.99em) {
	.main-navigation {
		position: absolute;
		top: 100%;
		inset-inline: 0;
		display: none;
		max-height: calc(100vh - var(--folio-header-offset) - var(--folio-admin-bar));
		max-height: calc(100dvh - var(--folio-header-offset) - var(--folio-admin-bar));
		padding: var(--folio-space-2xs) var(--folio-gutter) var(--folio-space-lg);
		overflow-y: auto;
		overscroll-behavior: contain;
		border-block: var(--folio-hairline);
		background-color: var(--folio-color-bg);
		box-shadow: var(--folio-shadow-lg);
	}

	.main-navigation.is-open {
		display: block;
		animation: folio-drop-in calc(var(--folio-duration) * 1.25) var(--folio-ease);
	}

	.main-navigation li {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}

	.main-navigation .menu > li {
		border-bottom: var(--folio-hairline);
	}

	.main-navigation .menu > li > a {
		padding-block: 0.8rem;
		font-size: var(--folio-fs-md);
	}

	.main-navigation .sub-menu {
		display: none;
		grid-column: 1 / -1;
		margin-block-end: var(--folio-space-xs);
		padding-inline-start: var(--folio-space-sm);
		border-inline-start: 2px solid var(--folio-color-border);
	}

	.main-navigation .is-open > .sub-menu {
		display: block;
	}

	.main-navigation .sub-menu a {
		padding-block: 0.55rem;
		font-size: var(--folio-fs-ui);
	}

	.main-navigation .submenu-toggle {
		width: 2.75rem;
		height: 2.75rem;
		border-radius: var(--folio-radius-button);
	}

	.main-navigation .submenu-toggle .folio-icon {
		width: 1.25rem;
		height: 1.25rem;
	}
}

/* Desktop: inline menu with dropdowns on hover, keyboard focus or the toggle. */
@media (min-width: 56em) {
	.site-header__inner {
		grid-template-areas: "brand nav actions";
		grid-template-columns: fit-content(40%) minmax(0, 1fr) auto;
	}

	.menu-toggle {
		display: none;
	}

	.main-navigation {
		grid-area: nav;
		justify-self: end;
		min-width: 0;
	}

	.main-navigation .menu {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		gap: 0 var(--folio-space-md);
	}

	.main-navigation li {
		position: relative;
		display: flex;
		align-items: center;
	}

	.main-navigation .menu > li > a {
		padding-block: 0.5rem;
		font-size: var(--folio-fs-ui);
	}

	/* The current section gets an accent underline rather than a color change alone. */
	.main-navigation .menu > :is(.current-menu-item, .current_page_item, .current-menu-ancestor, .current_page_ancestor) > a {
		color: var(--folio-color-text);
		text-decoration-line: underline;
		text-decoration-color: var(--folio-color-accent);
		text-decoration-thickness: 2px;
		text-underline-offset: 0.55em;
	}

	.main-navigation .menu > li > a:hover {
		color: var(--folio-color-accent);
	}

	.main-navigation .menu > li > .submenu-toggle {
		margin-inline-start: 0.125rem;
	}

	.main-navigation .menu > li:is(:hover, :focus-within, .is-open) > .submenu-toggle .folio-icon {
		transform: rotate(180deg);
	}

	/* A hairline between the menu and the icon buttons. */
	.main-navigation + .site-header__actions::before {
		content: "";
		width: 1px;
		height: 1.25rem;
		margin-inline: 0.25rem 0.5rem;
		background-color: var(--folio-color-border);
	}

	.main-navigation .sub-menu {
		position: absolute;
		top: 100%;
		inset-inline-start: 50%;
		z-index: 1;
		width: max-content;
		min-width: 12rem;
		max-width: 18rem;
		padding: var(--folio-space-3xs);
		border: var(--folio-border);
		border-radius: var(--folio-radius);
		background-color: var(--folio-color-surface);
		box-shadow: var(--folio-shadow-md);
		visibility: hidden;
		opacity: 0;
		transform: translate(-50%, 0.375rem);
		transition:
			opacity var(--folio-duration) var(--folio-ease),
			transform var(--folio-duration) var(--folio-ease),
			visibility 0s linear var(--folio-duration);
	}

	[dir="rtl"] .main-navigation .sub-menu {
		transform: translate(50%, 0.375rem);
	}

	.main-navigation li:is(:hover, :focus-within, .is-open) > .sub-menu {
		visibility: visible;
		opacity: 1;
		transform: translate(-50%, 0);
		transition-delay: 0s;
	}

	[dir="rtl"] .main-navigation li:is(:hover, :focus-within, .is-open) > .sub-menu {
		transform: translate(50%, 0);
	}

	/* Third level opens to the side; near the end of the menu it opens inward. */
	.main-navigation .sub-menu .sub-menu {
		top: calc(-1 * var(--folio-space-3xs) - var(--folio-border-width));
		inset-inline-start: 100%;
		transform: translate(0.375rem, 0);
	}

	.main-navigation .sub-menu li:is(:hover, :focus-within, .is-open) > .sub-menu {
		transform: none;
	}

	.main-navigation .menu > li:nth-last-child(-n+2) .sub-menu .sub-menu {
		inset-inline: auto 100%;
		transform: translate(-0.375rem, 0);
	}

	.main-navigation .menu > li:nth-last-child(-n+2) .sub-menu li:is(:hover, :focus-within, .is-open) > .sub-menu {
		transform: none;
	}

	.main-navigation .sub-menu a {
		flex: 1 1 auto;
		padding: 0.5rem 0.75rem;
		border-radius: var(--folio-radius-sm);
		font-size: var(--folio-fs-ui);
	}

	.main-navigation .sub-menu a:hover,
	.main-navigation .sub-menu :is(.current-menu-item, .current_page_item) > a {
		background-color: var(--folio-color-bg);
		color: var(--folio-color-accent);
	}

	.main-navigation .sub-menu .submenu-toggle {
		margin-inline-end: 0.25rem;
	}

	.main-navigation .sub-menu .submenu-toggle .folio-icon,
	.main-navigation .sub-menu .submenu-toggle[aria-expanded="true"] .folio-icon {
		transform: rotate(-90deg);
	}

	[dir="rtl"] .main-navigation .sub-menu .submenu-toggle .folio-icon,
	[dir="rtl"] .main-navigation .sub-menu .submenu-toggle[aria-expanded="true"] .folio-icon {
		transform: rotate(90deg);
	}

	/* Centered: actions overlay the right of row one, the menu is centered on row two. */
	.folio-header-centered .site-header__inner {
		grid-template-areas:
			". brand actions"
			"nav nav nav";
		grid-template-columns: 1fr auto 1fr;
		padding-block-end: 0;
	}

	.folio-header-centered .site-title {
		font-size: var(--folio-fs-xl);
	}

	.folio-header-centered .main-navigation {
		justify-self: stretch;
		margin-block-start: var(--folio-space-sm);
		padding-block: var(--folio-space-3xs);
		border-top: var(--folio-hairline);
	}

	.folio-header-centered .main-navigation .menu {
		justify-content: center;
	}

	.folio-header-centered .main-navigation + .site-header__actions::before {
		content: none;
	}
}

/* Centered on every screen size: the brand sits in the middle column. */
.folio-header-centered .site-branding {
	justify-content: center;
	text-align: center;
}

@media (max-width: 55.99em) {
	.folio-header-centered .site-header__inner {
		grid-template-areas: ". brand actions";
		grid-template-columns: 1fr auto 1fr;
	}
}

@media (max-width: 39.99em) {
	.site-title {
		font-size: var(--folio-fs-md);
	}
}

/*
 * Without JavaScript the menu, search and dark mode buttons cannot work, so
 * they are hidden and the menu is shown in full instead (theme.js's head
 * script adds .folio-js to <html>).
 */
html:not(.folio-js) :is(.menu-toggle, .theme-toggle, .header-search-toggle, .submenu-toggle) {
	display: none;
}

@media (max-width: 55.99em) {
	html:not(.folio-js) .main-navigation {
		position: static;
		display: block;
		grid-row: 2;
		grid-column: 1 / -1;
		max-height: none;
		margin-block-start: var(--folio-space-2xs);
		padding-inline: 0;
		border-bottom: 0;
		box-shadow: none;
	}

	html:not(.folio-js) .main-navigation .sub-menu {
		display: block;
	}
}

@keyframes folio-drop-in {
	from {
		opacity: 0;
		transform: translateY(-0.5rem);
	}
}

/* ==========================================================================
   8. Search dialog
   ========================================================================== */

.search-modal {
	position: fixed;
	inset: 0;
	z-index: var(--folio-z-modal);
	width: min(42rem, 100% - 2 * var(--folio-gutter));
	max-width: none;
	height: fit-content;
	max-height: calc(100% - 2 * var(--folio-gutter));
	margin: max(var(--folio-gutter), 12vh) auto auto;
	padding: 0;
	overflow: auto;
	border: var(--folio-border);
	border-radius: min(var(--folio-radius-lg), 2rem);
	background-color: var(--folio-color-surface);
	color: var(--folio-color-text);
	box-shadow: var(--folio-shadow-lg);
}

/* Also covers the no-<dialog> fallback, where theme.js toggles [open] itself. */
.search-modal:not([open]) {
	display: none;
}

.search-modal[open] {
	animation: folio-dialog-in calc(var(--folio-duration) * 1.4) var(--folio-ease);
}

.search-modal::backdrop {
	background-color: var(--folio-color-backdrop, rgb(0 0 0 / 0.45));
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.search-modal[open]::backdrop {
	animation: folio-fade-in calc(var(--folio-duration) * 1.4) var(--folio-ease);
}

.search-modal__inner {
	display: flex;
	align-items: center;
	gap: var(--folio-space-2xs);
	padding: var(--folio-space-sm);
}

.search-modal .search-form {
	flex: 1 1 auto;
	max-width: none;
}

.search-modal .search-form__input {
	min-height: 3.25rem;
	padding-inline: 1em;
	background-color: var(--folio-color-bg);
	font-family: var(--folio-font-body);
	font-size: max(1rem, var(--folio-fs-md));
}

.search-modal .search-form__submit {
	width: 3.25rem;
}

.search-modal__close {
	flex: none;
}

@keyframes folio-dialog-in {
	from {
		opacity: 0;
		transform: translateY(-0.75rem) scale(0.98);
	}
}

@keyframes folio-fade-in {
	from {
		opacity: 0;
	}
}

/* ==========================================================================
   9. Page headers
   ========================================================================== */

.page-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--folio-space-2xs);
	margin-block-end: var(--folio-space-xl);
	padding-block-end: var(--folio-space-lg);
	border-bottom: var(--folio-hairline);
}

.page-header__avatar {
	width: 4.5rem;
	height: 4.5rem;
	margin-block-end: var(--folio-space-2xs);
	border-radius: 50%;
}

/* A small label above the title: "Category", "Search results", "Error 404" … */
.page-header__kicker,
.recent-posts__title {
	color: var(--folio-color-accent);
	font-size: var(--folio-fs-ui-xs);
	font-weight: var(--folio-fw-strong);
	line-height: var(--folio-lh-ui);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.page-title {
	max-width: 100%;
	font-size: var(--folio-fs-3xl);
	overflow-wrap: anywhere;
}

.archive-description {
	max-width: var(--folio-measure);
	margin-block-start: var(--folio-space-2xs);
	color: var(--folio-color-text-soft);
	font-size: var(--folio-fs-md);
	line-height: var(--folio-lh-body);
}

.archive-description > * + * {
	margin-block-start: 0.75em;
}

.search-count {
	margin: 0;
	color: var(--folio-color-muted);
	font-size: var(--folio-fs-ui);
	line-height: var(--folio-lh-ui);
}

.page-header__search {
	width: 100%;
	margin-block-start: var(--folio-space-sm);
}

/* ==========================================================================
   10. Post feed and cards
   ========================================================================== */

/*
 * One card markup serves every layout. The blog layout (grid, list, classic,
 * minimal) is chosen by body classes and applies to the main feed only; the
 * featured hero and the related posts keep their own layouts.
 */
.post-feed {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--folio-space-xl) var(--folio-space-lg);
}

.post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--folio-space-sm);
	min-width: 0;
}

.post-card__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--folio-radius);
	background-color: var(--folio-color-surface);
	text-decoration: none;
}

.post-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform calc(var(--folio-duration) * 3) var(--folio-ease);
}

.post-card:hover .post-card__media img {
	transform: scale(1.035);
}

.post-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--folio-space-xs);
	min-width: 0;
}

.post-card__title {
	font-size: var(--folio-fs-lg);
	line-height: var(--folio-lh-snug);
	overflow-wrap: anywhere;
}

.post-card__title a {
	color: inherit;
	text-decoration-color: transparent;
	text-decoration-thickness: max(1px, 0.05em);
	text-underline-offset: 0.16em;
}

.post-card__title a:hover,
.post-card__media:hover + .post-card__body .post-card__title a {
	color: inherit;
	text-decoration-color: currentColor;
}

.post-card__excerpt {
	color: var(--folio-color-text-soft);
	font-size: var(--folio-fs-sm);
}

.post-card__excerpt > * + * {
	margin-block-start: 0.6em;
}

/* Category pills. */
.entry-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.category-pill {
	display: inline-flex;
	align-items: center;
	min-height: 1.5rem;
	padding: 0.2em 0.75em;
	border-radius: var(--folio-radius-pill);
	background-color: var(--folio-color-accent-soft);
	color: var(--folio-color-accent-hover);
	font-size: var(--folio-fs-ui-xs);
	font-weight: var(--folio-fw-ui);
	line-height: 1.3;
	text-decoration: none;
	transition:
		background-color var(--folio-duration) var(--folio-ease),
		color var(--folio-duration) var(--folio-ease);
}

.category-pill:hover {
	background-color: var(--folio-color-accent);
	color: var(--folio-color-accent-text);
}

/* Sticky ("Featured") and password-protected badges. */
.post-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.post-card__badge {
	display: inline-flex;
	align-items: center;
	padding: 0.2em 0.6em;
	border: 1px solid transparent;
	border-radius: var(--folio-radius-sm);
	font-size: var(--folio-fs-ui-xs);
	font-weight: var(--folio-fw-strong);
	line-height: 1.3;
	letter-spacing: 0.04em;
}

.post-card__badge--sticky {
	background-color: var(--folio-color-accent);
	color: var(--folio-color-accent-text);
}

.post-card__badge--protected {
	border-color: var(--folio-color-border-strong);
	color: var(--folio-color-muted);
}

/* Post meta: author · date · reading time · comments. Separators are drawn here. */
.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25em 1em;
	/*
	 * A separator that would start a wrapped line falls just outside the
	 * left edge and is clipped; the small padding keeps focus rings visible.
	 */
	margin-inline-start: -0.25rem;
	padding-inline-start: 0.25rem;
	clip-path: inset(-1rem -1rem -1rem 0);
	color: var(--folio-color-muted);
	font-size: var(--folio-fs-ui-xs);
	font-weight: var(--folio-fw-body);
	line-height: var(--folio-lh-ui);
}

[dir="rtl"] .entry-meta {
	clip-path: inset(-1rem 0 -1rem -1rem);
}

.entry-meta > span {
	position: relative;
}

.entry-meta > span:not(:first-child)::before {
	content: "·";
	content: "·" / "";
	position: absolute;
	inset-inline-start: -0.65em;
}

.entry-meta a {
	color: inherit;
	text-decoration-color: transparent;
}

.entry-meta a:hover {
	color: var(--folio-color-text);
	text-decoration-color: currentColor;
}

.read-more {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.4em;
	min-height: 1.5rem;
	color: var(--folio-color-accent);
	font-size: var(--folio-fs-ui);
	font-weight: var(--folio-fw-ui);
	line-height: var(--folio-lh-ui);
	text-decoration: none;
}

.read-more::after {
	content: "→";
	content: "→" / "";
	transition: translate var(--folio-duration) var(--folio-ease);
}

[dir="rtl"] .read-more::after {
	content: "←";
	content: "←" / "";
}

.read-more:hover::after {
	translate: 0.2em 0;
}

[dir="rtl"] .read-more:hover::after {
	translate: -0.2em 0;
}

/*
 * Card styles. Flat: no background, rounded media. Bordered and elevated:
 * surface panels with a padded body and the media flush with the top edge.
 */
:is(.folio-cards-bordered, .folio-cards-elevated) .post-card {
	gap: 0;
	overflow: hidden;
	border-radius: var(--folio-radius);
	background-color: var(--folio-color-surface);
}

.folio-cards-bordered .post-card {
	border: var(--folio-border);
}

.folio-cards-elevated .post-card {
	box-shadow: var(--folio-shadow-md);
	transition:
		transform calc(var(--folio-duration) * 1.5) var(--folio-ease),
		box-shadow calc(var(--folio-duration) * 1.5) var(--folio-ease);
}

.folio-cards-elevated .post-card:hover {
	box-shadow: var(--folio-shadow-lg);
	transform: translateY(-3px);
}

:is(.folio-cards-bordered, .folio-cards-elevated) .post-card__media {
	border-radius: 0;
}

:is(.folio-cards-bordered, .folio-cards-elevated) .post-card__body {
	padding: var(--folio-space-md);
}

/* Images switched off for the blog: hide them in the main feed and the hero. */
.folio-no-thumbs :is(.post-feed--main, .post-card--featured) .post-card__media {
	display: none;
}

/* Grid: one column, two from 40em, the "Grid columns" setting from 64em (two beside a sidebar). */
.folio-blog-grid .post-feed--main {
	gap: var(--folio-space-xl) var(--folio-space-lg);
}

@media (min-width: 40em) {
	.folio-blog-grid .post-feed--main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.folio-blog-grid .post-feed--main {
		grid-template-columns: repeat(var(--folio-grid-columns), minmax(0, 1fr));
	}

	.folio-blog-grid .has-sidebar .post-feed--main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Line the meta up along the bottom of each grid row. */
.folio-blog-grid .post-feed--main .entry-meta {
	margin-block-start: auto;
}

/*
 * Text-only cards beside image cards (flat style) become a quiet surface
 * tile, so the grid still reads as a grid. With images switched off
 * altogether, flat cards get a hairline above instead.
 */
.folio-cards-flat.folio-blog-grid:not(.folio-no-thumbs) .post-feed--main .post-card.no-thumbnail .post-card__body,
.folio-cards-flat .post-feed--related .post-card.no-thumbnail .post-card__body {
	justify-content: flex-start;
	padding: var(--folio-space-md);
	border-radius: var(--folio-radius);
	background-color: var(--folio-color-surface);
}

.folio-blog-grid:not(.folio-no-thumbs) .post-feed--main .post-card.no-thumbnail .post-card__title {
	font-size: var(--folio-fs-xl);
	line-height: var(--folio-lh-heading);
}

.folio-cards-flat.folio-no-thumbs.folio-blog-grid .post-feed--main .post-card {
	padding-block-start: var(--folio-space-md);
	border-top: var(--folio-hairline);
}

/* List: media beside the text from 40em, with hairlines between flat cards. */
.folio-cards-flat.folio-blog-list .post-feed--main .post-card:not(:last-child) {
	padding-block-end: var(--folio-space-xl);
	border-bottom: var(--folio-hairline);
}

@media (min-width: 40em) {
	.folio-blog-list:not(.folio-no-thumbs) .post-feed--main .post-card.has-thumbnail {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		align-items: center;
		column-gap: var(--folio-space-lg);
	}

	.folio-blog-list .post-feed--main .post-card__title {
		font-size: var(--folio-fs-xl);
		line-height: var(--folio-lh-heading);
	}

	.folio-blog-list .post-feed--main .post-card__excerpt {
		font-size: var(--folio-fs-base);
	}

	/* Panels: the image fills the left edge, full height. */
	:is(.folio-cards-bordered, .folio-cards-elevated).folio-blog-list:not(.folio-no-thumbs) .post-feed--main .post-card.has-thumbnail {
		align-items: stretch;
		column-gap: 0;
	}

	:is(.folio-cards-bordered, .folio-cards-elevated).folio-blog-list:not(.folio-no-thumbs) .post-feed--main .post-card__media {
		min-height: 12rem;
		aspect-ratio: auto;
	}

	:is(.folio-cards-bordered, .folio-cards-elevated).folio-blog-list:not(.folio-no-thumbs) .post-feed--main .post-card__media img {
		position: absolute;
		inset: 0;
	}

	:is(.folio-cards-bordered, .folio-cards-elevated).folio-blog-list .post-feed--main .post-card__body {
		justify-content: center;
		padding: var(--folio-space-lg);
	}
}

/* Classic: one centered column with large images and titles. */
.folio-blog-classic .post-feed--main {
	max-width: calc(var(--folio-measure) + var(--folio-space-3xl));
	margin-inline: auto;
	row-gap: var(--folio-space-2xl);
}

.folio-blog-classic .post-feed--main .post-card {
	gap: var(--folio-space-md);
}

.folio-cards-flat.folio-blog-classic .post-feed--main .post-card:not(:last-child) {
	padding-block-end: var(--folio-space-2xl);
	border-bottom: var(--folio-hairline);
}

.folio-blog-classic .post-feed--main .post-card__media {
	aspect-ratio: 16 / 9;
}

.folio-blog-classic .post-feed--main .post-card__title {
	font-size: var(--folio-fs-2xl);
	line-height: var(--folio-lh-heading);
}

.folio-blog-classic .post-feed--main .post-card__excerpt {
	font-size: var(--folio-fs-base);
}

:is(.folio-cards-bordered, .folio-cards-elevated).folio-blog-classic .post-feed--main .post-card {
	gap: 0;
}

:is(.folio-cards-bordered, .folio-cards-elevated).folio-blog-classic .post-feed--main .post-card__body {
	padding: var(--folio-space-lg);
}

/*
 * Minimal: rows of date and title separated by hairlines; no images,
 * excerpts, categories or read-more links. The meta wrapper steps aside
 * (display: contents) so the date can take its own column.
 */
.folio-blog-minimal .post-feed--main {
	row-gap: 0;
	max-width: calc(var(--folio-measure) + var(--folio-space-3xl));
	margin-inline: auto;
	border-top: var(--folio-hairline);
}

.folio-blog-minimal .post-feed--main .post-card,
.folio-blog-minimal .post-feed--main .post-card:hover {
	padding-block: var(--folio-space-md);
	overflow: visible;
	border: 0;
	border-bottom: var(--folio-hairline);
	border-radius: 0;
	background: none;
	box-shadow: none;
	transform: none;
}

.folio-blog-minimal .post-feed--main :is(.post-card__media, .post-card__excerpt, .entry-categories, .read-more) {
	display: none;
}

.folio-blog-minimal .post-feed--main .post-card__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0.25rem var(--folio-space-sm);
	padding: 0;
	border-radius: 0;
	background: none;
}

.folio-blog-minimal .post-feed--main .entry-meta {
	display: contents;
}

.folio-blog-minimal .post-feed--main .entry-meta > span {
	display: none;
}

.folio-blog-minimal .post-feed--main .entry-meta > .entry-meta__date {
	display: block;
	grid-row: 1;
	grid-column: 1 / -1;
	color: var(--folio-color-muted);
	font-variant-numeric: tabular-nums;
}

.folio-blog-minimal .post-feed--main .entry-meta__date::before {
	content: none;
}

.folio-blog-minimal .post-feed--main .post-card__title {
	grid-row: 2;
	grid-column: 1;
	font-size: var(--folio-fs-lg);
}

.folio-blog-minimal .post-feed--main .post-card__badges {
	grid-row: 2;
	grid-column: 2;
}

@media (min-width: 40em) {
	.folio-blog-minimal .post-feed--main .post-card__body {
		grid-template-columns: 9em minmax(0, 1fr) auto;
		column-gap: var(--folio-space-md);
	}

	.folio-blog-minimal .post-feed--main .entry-meta > .entry-meta__date {
		grid-row: 1;
		grid-column: 1;
	}

	.folio-blog-minimal .post-feed--main .post-card__title {
		grid-row: 1;
		grid-column: 2;
	}

	.folio-blog-minimal .post-feed--main .post-card__badges {
		grid-row: 1;
		grid-column: 3;
	}

	/* No dates shown: the titles take the date column too. */
	.folio-blog-minimal .post-feed--main .post-card__body:not(:has(.entry-meta__date)) {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.folio-blog-minimal .post-feed--main .post-card__body:not(:has(.entry-meta__date)) .post-card__title {
		grid-column: 1;
	}

	.folio-blog-minimal .post-feed--main .post-card__body:not(:has(.entry-meta__date)) .post-card__badges {
		grid-column: 2;
	}
}

/* Minimal with bordered or elevated cards: the whole list becomes one panel. */
:is(.folio-cards-bordered, .folio-cards-elevated).folio-blog-minimal .post-feed--main {
	padding-inline: var(--folio-space-md);
	border-top: 0;
	border-radius: var(--folio-radius);
	background-color: var(--folio-color-surface);
}

.folio-cards-bordered.folio-blog-minimal .post-feed--main {
	border: var(--folio-border);
}

.folio-cards-elevated.folio-blog-minimal .post-feed--main {
	box-shadow: var(--folio-shadow-md);
}

:is(.folio-cards-bordered, .folio-cards-elevated).folio-blog-minimal .post-feed--main .post-card:last-child {
	border-bottom: 0;
}

/* Featured hero: the newest post, large, above the feed. */
.post-card--featured {
	gap: var(--folio-space-md);
	margin-block-end: var(--folio-space-2xl);
}

.post-card--featured .post-card__media {
	aspect-ratio: 16 / 10;
}

.post-card--featured .post-card__title {
	font-size: var(--folio-fs-2xl);
	line-height: var(--folio-lh-heading);
}

.post-card--featured .post-card__excerpt {
	color: var(--folio-color-text-soft);
	font-size: var(--folio-fs-md);
}

:is(.folio-cards-bordered, .folio-cards-elevated) .post-card--featured .post-card__body {
	padding: var(--folio-space-lg);
}

@media (min-width: 56em) {
	.post-card--featured.has-thumbnail {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: center;
		column-gap: var(--folio-space-xl);
	}

	.post-card--featured .post-card__media {
		aspect-ratio: 3 / 2;
	}

	.folio-no-thumbs .post-card--featured.has-thumbnail {
		display: flex;
	}

	:is(.folio-cards-bordered, .folio-cards-elevated) .post-card--featured.has-thumbnail {
		align-items: stretch;
		column-gap: 0;
	}

	/* Panels: the image fills its column at the panel's full height. */
	:is(.folio-cards-bordered, .folio-cards-elevated) .post-card--featured .post-card__media {
		min-height: 20rem;
		aspect-ratio: auto;
	}

	:is(.folio-cards-bordered, .folio-cards-elevated) .post-card--featured .post-card__media img {
		position: absolute;
		inset: 0;
	}

	:is(.folio-cards-bordered, .folio-cards-elevated) .post-card--featured .post-card__body {
		justify-content: center;
		padding: var(--folio-space-xl);
	}
}

/* A hero without an image is a typographic panel. */
:is(.post-card--featured.no-thumbnail, .folio-no-thumbs .post-card--featured) .post-card__body {
	padding: var(--folio-space-xl);
}

.folio-cards-flat :is(.post-card--featured.no-thumbnail, .folio-no-thumbs .post-card--featured) .post-card__body {
	border-radius: var(--folio-radius);
	background-color: var(--folio-color-surface);
}

:is(.post-card--featured.no-thumbnail, .folio-no-thumbs .post-card--featured) .post-card__title {
	max-width: 24ch;
	font-size: var(--folio-fs-3xl);
}

/* Compact cards (related posts): image beside the title on small screens, a three-up grid from 56em. */
.post-feed--related {
	gap: var(--folio-space-md) var(--folio-space-lg);
}

.post-card--compact .post-card__title {
	font-size: var(--folio-fs-md);
}

:is(.folio-cards-bordered, .folio-cards-elevated) .post-card--compact .post-card__body {
	padding: var(--folio-space-sm) var(--folio-space-md) var(--folio-space-md);
}

@media (max-width: 55.99em) {
	.post-card--compact.has-thumbnail {
		display: grid;
		grid-template-columns: minmax(5.5rem, 32%) minmax(0, 1fr);
		align-items: start;
		column-gap: var(--folio-space-sm);
	}

	:is(.folio-cards-bordered, .folio-cards-elevated) .post-card--compact.has-thumbnail {
		align-items: stretch;
		column-gap: 0;
	}

	:is(.folio-cards-bordered, .folio-cards-elevated) .post-card--compact .post-card__media {
		min-height: 6.5rem;
		aspect-ratio: auto;
	}

	:is(.folio-cards-bordered, .folio-cards-elevated) .post-card--compact .post-card__media img {
		position: absolute;
		inset: 0;
	}

	:is(.folio-cards-bordered, .folio-cards-elevated) .post-card--compact .post-card__body {
		padding: var(--folio-space-sm);
	}
}

@media (min-width: 56em) {
	.post-feed--related {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ==========================================================================
   11. Single posts and pages
   ========================================================================== */

/* Reading progress: a hairline of accent across the top that fills as you read. */
.reading-progress {
	position: fixed;
	top: var(--folio-admin-bar);
	inset-inline: 0;
	z-index: var(--folio-z-progress);
	height: 3px;
	pointer-events: none;
}

.reading-progress__bar {
	display: block;
	height: 100%;
	background-color: var(--folio-color-accent);
	transform: scaleX(var(--folio-progress, 0));
	transform-origin: left center;
	will-change: transform;
}

[dir="rtl"] .reading-progress__bar {
	transform-origin: right center;
}

/* Entry header: centered, at the reading width. */
.entry-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--folio-space-sm);
	max-width: var(--folio-measure);
	margin-inline: auto;
	margin-block-end: var(--folio-space-xl);
	text-align: center;
}

.entry-header .entry-categories {
	justify-content: center;
}

/* Cards also carry .entry-title, so the big size is scoped to the article header. */
.entry-header .entry-title {
	font-size: var(--folio-fs-3xl);
	line-height: var(--folio-lh-heading);
	overflow-wrap: anywhere;
}

.entry-dek {
	max-width: 38em;
	margin: 0;
	color: var(--folio-color-text-soft);
	font-size: var(--folio-fs-md);
	line-height: var(--folio-lh-snug);
	text-wrap: balance;
}

.entry-header .entry-meta {
	justify-content: center;
	margin-inline-start: 0;
	padding-inline-start: 0;
	clip-path: none;
	font-size: var(--folio-fs-ui);
}

/* Narrow screens: the author (with avatar) gets its own line above the date. */
@media (max-width: 39.99em) {
	.entry-header .entry-meta__author {
		flex-basis: 100%;
	}

	.entry-header .entry-meta__author + span::before {
		content: none;
	}
}

.entry-meta__avatar {
	width: 2.25rem;
	height: 2.25rem;
	margin-inline-end: 0.5em;
	border-radius: 50%;
	vertical-align: middle;
}

.entry-meta__author a {
	color: var(--folio-color-text);
	font-weight: var(--folio-fw-ui);
}

.entry-meta__author a:hover {
	color: var(--folio-color-accent);
}

/* Featured image: the reading width ("standard") or the site width ("wide"). */
.entry-media {
	max-width: var(--folio-measure);
	margin-inline: auto;
	margin-block-end: var(--folio-space-xl);
}

.entry-media.alignwide {
	max-width: var(--folio-wide-width);
}

.entry-media img {
	display: block;
	width: 100%;
	max-height: 80vh;
	object-fit: cover;
	border-radius: var(--folio-radius);
}

/*
 * Cover: the title sits over the image, which spans the window when there is
 * no sidebar. The figure steps aside (display: contents) so the image, its
 * shade and the header share one grid cell, with the caption on the row
 * below where the header cannot cover it.
 */
.entry-hero {
	display: grid;
	grid-template-areas:
		"hero"
		"caption";
	grid-template-rows: minmax(clamp(22rem, 70vh, 52rem), auto) auto;
	grid-template-rows: minmax(clamp(22rem, 70svh, 52rem), auto) auto;
	grid-template-columns: minmax(0, 1fr);
	margin-block-end: var(--folio-space-xl);
}

.entry-hero__media {
	display: contents;
}

.entry-hero__media img {
	grid-area: hero;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The image must not size the row; the row sizes the image. */
	contain: size;
}

.entry-hero__media::after {
	content: "";
	grid-area: hero;
	background-image: linear-gradient(to top, rgb(0 0 0 / 0.78) 0%, rgb(0 0 0 / 0.5) 35%, rgb(0 0 0 / 0.14) 70%, rgb(0 0 0 / 0.22) 100%);
}

.entry-header--cover {
	position: relative;
	z-index: 1;
	grid-area: hero;
	align-self: end;
	width: 100%;
	max-width: calc(var(--folio-measure) + 2 * var(--folio-gutter));
	margin: 0 auto;
	padding: var(--folio-space-3xl) var(--folio-gutter) var(--folio-space-2xl);
	color: #fff;
	text-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
}

.entry-header--cover .entry-dek {
	color: rgb(255 255 255 / 0.9);
}

.entry-header--cover .entry-meta {
	color: rgb(255 255 255 / 0.86);
}

.entry-header--cover a,
.entry-header--cover .entry-meta__author a {
	color: #fff;
}

.entry-header--cover .category-pill {
	background-color: rgb(255 255 255 / 0.16);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3);
	color: #fff;
	text-shadow: none;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.entry-header--cover .category-pill:hover {
	background-color: rgb(255 255 255 / 0.3);
	color: #fff;
}

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

.entry-hero__caption {
	grid-area: caption;
	justify-self: center;
	width: min(100% - 2 * var(--folio-gutter), var(--folio-wide-width));
}

.no-sidebar .entry-hero {
	margin-inline: calc(50% - 50vw);
}

/* The hero meets the header directly. */
.folio-single-header-cover.no-sidebar .site-main {
	padding-block-start: 0;
}

.has-sidebar .entry-hero__media img,
.has-sidebar .entry-hero__media::after {
	border-radius: var(--folio-radius);
}

.has-sidebar .entry-hero__caption {
	width: 100%;
}

/*
 * Post content: every block is held to the reading width and centered;
 * wide blocks go to the site width, full blocks bleed to the window edges
 * (only without a sidebar). Vertical rhythm comes from --folio-flow, with
 * more room before headings and around large blocks.
 */
.entry-content {
	display: flow-root;
}

.entry-content > * {
	max-width: var(--folio-measure);
	margin-block: 0;
	margin-inline: auto;
}

.entry-content > * + * {
	margin-block-start: var(--folio-flow);
}

.entry-content > :where(.alignwide, .alignfull, .wp-block-image, .wp-block-gallery, .gallery, .wp-block-pullquote, .wp-block-cover, .wp-block-table, .wp-block-code, .wp-block-preformatted, .wp-block-media-text, .wp-block-embed, .wp-block-columns, .wp-block-group.has-background, .is-style-folio-card, .wp-block-separator, .wp-block-details, .wp-block-file, figure, pre, hr, table) {
	margin-block: calc(var(--folio-flow) * 1.75);
}

.entry-content > :where(h2, h3, h4, h5, h6) {
	margin-block-start: calc(var(--folio-flow) * 2);
}

.entry-content > :where(h2) {
	margin-block-start: calc(var(--folio-flow) * 2.5);
}

.entry-content > :where(h1, h2, h3, h4, h5, h6) + * {
	margin-block-start: calc(var(--folio-flow) * 0.6);
}

.entry-content > :first-child {
	margin-block-start: 0;
}

.entry-content > :last-child {
	margin-block-end: 0;
}

.entry-content > .alignwide {
	max-width: var(--folio-wide-width);
	clear: both;
}

.entry-content > .alignfull {
	max-width: none;
	clear: both;
}

.no-sidebar .entry-content > .alignfull {
	margin-inline: calc(50% - 50vw);
}

.entry-content > :is(.alignfull, .alignwide).wp-block-image img,
.entry-content > .alignfull img {
	width: 100%;
}

/* Floats only where there is room for text beside them. */
@media (min-width: 40em) {
	.entry-content > .alignleft {
		float: left;
		max-width: min(50%, var(--folio-measure) * 0.5);
		margin-block: 0.3em var(--folio-flow);
		margin-right: var(--folio-space-md);
		margin-left: max(0px, (100% - var(--folio-measure)) / 2);
	}

	.entry-content > .alignright {
		float: right;
		max-width: min(50%, var(--folio-measure) * 0.5);
		margin-block: 0.3em var(--folio-flow);
		margin-right: max(0px, (100% - var(--folio-measure)) / 2);
		margin-left: var(--folio-space-md);
	}
}

@media (max-width: 39.99em) {
	.entry-content > :is(.alignleft, .alignright) {
		float: none;
		margin-inline: auto;
	}
}

.entry-content > .aligncenter {
	margin-inline: auto;
}

/* Multi-page posts. */
.page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
}

.entry-content > .page-links {
	margin-block-start: calc(var(--folio-flow) * 2);
}

.page-links__label {
	margin-inline-end: 0.25rem;
	color: var(--folio-color-muted);
	font-size: var(--folio-fs-ui);
}

.page-links .post-page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding-inline: 0.6rem;
	border: var(--folio-hairline);
	border-radius: var(--folio-radius-button);
	color: var(--folio-color-text);
	font-size: var(--folio-fs-ui);
	font-weight: var(--folio-fw-ui);
	text-decoration: none;
}

.page-links a.post-page-numbers:hover {
	border-color: var(--folio-color-accent);
	color: var(--folio-color-accent);
}

.page-links .post-page-numbers.current {
	border-color: var(--folio-color-accent);
	background-color: var(--folio-color-accent);
	color: var(--folio-color-accent-text);
}

/* ==========================================================================
   12. Blocks in content
   ========================================================================== */

/* Images and captions. */
.entry-content :where(.wp-block-image, .wp-block-media-text__media, .wp-caption, .gallery-icon) img {
	border-radius: var(--folio-radius);
}

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

.entry-content figcaption,
.entry-content .wp-element-caption,
.entry-media__caption,
.wp-caption-text,
.gallery-caption {
	margin-block: var(--folio-space-2xs) 0;
	color: var(--folio-color-muted);
	font-size: var(--folio-fs-sm);
	line-height: var(--folio-lh-ui);
	text-align: start;
}

.entry-content .aligncenter > figcaption,
.entry-content .wp-block-image.aligncenter .wp-element-caption {
	text-align: center;
}

/* Galleries: rounded tiles; core keeps its caption overlays. */
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image {
	overflow: hidden;
	border-radius: var(--folio-radius);
}

.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image img {
	border-radius: 0;
}

/* Lists. */
.entry-content :is(ul, ol):where(:not([class]), .wp-block-list),
.comment-content :is(ul, ol) {
	padding-inline-start: 1.4em;
}

.entry-content :is(ul, ol):where(:not([class]), .wp-block-list) > li + li,
.entry-content :is(ul, ol):where(:not([class]), .wp-block-list) li > :is(ul, ol),
.comment-content li + li {
	margin-block-start: 0.35em;
}

.entry-content ul:where(:not([class]), .wp-block-list) > li::marker {
	color: var(--folio-color-accent);
}

.entry-content ol:where(:not([class]), .wp-block-list) > li::marker {
	color: var(--folio-color-muted);
	font-family: var(--folio-font-ui);
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
}

.entry-content dt {
	font-weight: var(--folio-fw-strong);
}

.entry-content dd + dt {
	margin-block-start: 0.6em;
}

.entry-content dd {
	margin-inline-start: 1.4em;
}

/* Block style: Checklist (core/list). A check in a soft accent circle. */
.is-style-folio-checklist {
	padding-inline-start: 0;
	list-style: none;
}

.entry-content .is-style-folio-checklist {
	padding-inline-start: 0;
}

.is-style-folio-checklist > li {
	position: relative;
	padding-inline-start: 1.9em;
}

.is-style-folio-checklist > li::before,
.is-style-folio-checklist > li::after {
	content: "";
	position: absolute;
}

.is-style-folio-checklist > li::before {
	top: 0.2em;
	top: calc((1lh - 1.25em) / 2);
	inset-inline-start: 0;
	width: 1.25em;
	height: 1.25em;
	border-radius: 50%;
	background-color: var(--folio-color-accent-soft);
}

.is-style-folio-checklist > li::after {
	top: 0.61em;
	top: calc((1lh - 1.25em) / 2 + 0.41em);
	left: 0.36em;
	width: 0.55em;
	height: 0.3em;
	border-bottom: 2px solid var(--folio-color-accent-hover);
	border-left: 2px solid var(--folio-color-accent-hover);
	transform: rotate(-45deg);
}

[dir="rtl"] .is-style-folio-checklist > li::after {
	right: 0.36em;
	left: auto;
}

/* Block style: Lead (core/paragraph). */
.is-style-folio-lead {
	color: var(--folio-color-text);
	font-size: var(--folio-fs-md);
	line-height: min(var(--folio-lh-body), 1.55);
}

/* Quotes. */
.entry-content blockquote,
.comment-content blockquote,
.entry-content .wp-block-quote {
	padding-inline-start: var(--folio-space-md);
	border-inline-start: 3px solid var(--folio-color-accent);
	font-family: var(--folio-font-heading);
	font-size: var(--folio-fs-md);
	font-style: italic;
	line-height: var(--folio-lh-snug);
	letter-spacing: var(--folio-tracking-heading);
}

:is(.entry-content, .comment-content) blockquote > * + * {
	margin-block-start: 0.6em;
}

:is(.entry-content, .comment-content) blockquote :is(cite, footer),
.entry-content .wp-block-quote cite {
	display: block;
	margin-block-start: var(--folio-space-xs);
	color: var(--folio-color-muted);
	font-family: var(--folio-font-ui);
	font-size: var(--folio-fs-ui);
	font-style: normal;
	letter-spacing: var(--folio-tracking-ui);
}

:is(.entry-content, .comment-content) blockquote cite::before {
	content: "— ";
	content: "— " / "";
}

.entry-content .wp-block-quote.is-style-plain {
	padding-inline-start: 0;
	border-inline-start: 0;
}

.entry-content .wp-block-quote:is(.is-style-large, .is-large) {
	padding-inline: 0;
	border-inline-start: 0;
	font-size: var(--folio-fs-lg);
	line-height: var(--folio-lh-heading);
}

.entry-content .wp-block-quote:is(.is-style-large, .is-large) p {
	font-size: inherit;
	line-height: inherit;
}

.entry-content .wp-block-quote:is(.is-style-large, .is-large) cite {
	text-align: start;
}

.entry-content .wp-block-quote.has-text-align-center {
	padding-inline: 0;
	border-inline-start: 0;
}

/* Pull quotes: a centered statement between two rules. */
.entry-content .wp-block-pullquote {
	padding: var(--folio-space-xl) var(--folio-space-md);
	border-top: 2px solid var(--folio-color-accent);
	border-bottom: var(--folio-hairline);
	font-size: var(--folio-fs-base);
	line-height: var(--folio-lh-snug);
	text-align: center;
}

.entry-content .wp-block-pullquote blockquote {
	padding: 0;
	border: 0;
	font-style: normal;
}

.entry-content .wp-block-pullquote p {
	font-family: var(--folio-font-heading);
	font-size: var(--folio-fs-xl);
	font-style: italic;
	font-weight: var(--folio-fw-heading);
	line-height: var(--folio-lh-heading);
	letter-spacing: var(--folio-tracking-heading);
	text-wrap: balance;
}

.entry-content .wp-block-pullquote cite {
	display: block;
	margin-block-start: var(--folio-space-sm);
	color: var(--folio-color-muted);
	font-family: var(--folio-font-ui);
	font-size: var(--folio-fs-ui-xs);
	font-style: normal;
	font-weight: var(--folio-fw-strong);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.entry-content .wp-block-pullquote cite::before {
	content: none;
}

.entry-content .wp-block-pullquote:is(.alignleft, .alignright) {
	padding-inline: 0;
	text-align: start;
}

.entry-content .wp-block-pullquote:is(.alignleft, .alignright) p {
	font-size: var(--folio-fs-lg);
}

/* Code, preformatted text and verse. */
.entry-content pre,
.comment-content pre {
	padding: var(--folio-space-sm) var(--folio-space-md);
	overflow-x: auto;
	border: var(--folio-border);
	border-radius: var(--folio-radius);
	background-color: var(--folio-color-surface);
	color: var(--folio-color-text);
	font-size: 0.85em;
	line-height: 1.65;
	white-space: pre;
	overflow-wrap: normal;
	tab-size: 4;
}

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

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

.entry-content .wp-block-verse {
	padding: 0 0 0 var(--folio-space-md);
	overflow: visible;
	border: 0;
	border-inline-start: 2px solid var(--folio-color-border);
	border-radius: 0;
	background: none;
	font-family: var(--folio-font-body);
	font-size: inherit;
	font-style: italic;
	line-height: var(--folio-lh-body);
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

/* Tables: hairlines, tabular figures; wide tables scroll inside their own box. */
.entry-content table,
.comment-content table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--folio-font-ui);
	font-size: var(--folio-fs-sm);
	font-variant-numeric: tabular-nums;
	line-height: var(--folio-lh-ui);
}

.entry-content > table {
	display: block;
	overflow-x: auto;
}

.entry-content .wp-block-table {
	overflow-x: auto;
}

:is(.entry-content, .comment-content) :is(th, td) {
	padding: 0.65em 0.85em;
	border: 0;
	border-bottom: var(--folio-hairline);
	text-align: start;
	vertical-align: top;
}

:is(.entry-content, .comment-content) th {
	font-weight: var(--folio-fw-strong);
}

:is(.entry-content, .comment-content) thead :is(th, td) {
	border-bottom: 2px solid var(--folio-color-border-strong);
}

:is(.entry-content, .comment-content) tfoot :is(th, td) {
	border-top: 2px solid var(--folio-color-border-strong);
	border-bottom: 0;
	font-weight: var(--folio-fw-strong);
}

.entry-content .wp-block-table :is(thead, tfoot) {
	border: 0;
}

.entry-content .wp-block-table.is-style-stripes {
	border-bottom: 0;
}

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

.entry-content .wp-block-table.is-style-stripes :is(th, td) {
	border-bottom-color: transparent;
}

.entry-content .wp-block-table.is-style-stripes thead :is(th, td) {
	border-bottom-color: var(--folio-color-border-strong);
}

/* Separators: a short rule, full width (wide), dots, or Folio's ornament. */
.entry-content hr,
.entry-content .wp-block-separator {
	width: 100%;
	border: 0;
	border-top: 1px solid currentColor;
	background: none;
	color: var(--folio-color-border-strong);
	opacity: 1;
}

.entry-content .wp-block-separator:not(.is-style-wide, .is-style-dots, .is-style-folio-ornament, .alignwide, .alignfull) {
	max-width: 6rem;
}

.entry-content .wp-block-separator.is-style-dots {
	color: var(--folio-color-muted);
}

.entry-content .wp-block-separator.is-style-dots::before {
	font-family: var(--folio-font-heading);
}

/* Block style: Ornament (core/separator). Two fine rules and an accent diamond, drawn in CSS. */
.wp-block-separator.is-style-folio-ornament {
	position: relative;
	width: min(14rem, 70%);
	height: 1rem;
	margin-inline: auto;
	border: 0;
	background:
		linear-gradient(currentColor, currentColor) left center / calc(50% - 1rem) 1px no-repeat,
		linear-gradient(currentColor, currentColor) right center / calc(50% - 1rem) 1px no-repeat;
	color: var(--folio-color-border-strong);
	opacity: 1;
}

.wp-block-separator.is-style-folio-ornament::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.45rem;
	height: 0.45rem;
	background-color: var(--folio-color-accent);
	transform: translate(-50%, -50%) rotate(45deg);
}

.entry-content .wp-block-separator.is-style-folio-ornament {
	width: min(14rem, 70%);
	border: 0;
}

/* Block style: Card (core/group). Follows the card style setting. */
.wp-block-group.is-style-folio-card {
	padding: var(--folio-space-lg);
	border: var(--folio-border);
	border-radius: var(--folio-radius);
	background-color: var(--folio-color-surface);
}

.folio-cards-elevated .wp-block-group.is-style-folio-card {
	border-color: transparent;
	box-shadow: var(--folio-shadow-md);
}

/* Colored groups, paragraphs and columns. */
.entry-content :where(.wp-block-group, .wp-block-columns, p).has-background:not(.alignfull) {
	border-radius: var(--folio-radius);
}

.has-accent-background-color {
	color: var(--folio-color-accent-text);
}

:is(.has-foreground-background-color, .has-muted-background-color) {
	color: var(--folio-color-bg);
}

:is(.has-accent-background-color, .has-foreground-background-color, .has-muted-background-color, .wp-block-cover) a:not([class*="button"]) {
	color: inherit;
}

/* Cover blocks. */
.entry-content .wp-block-cover:not(.alignfull) {
	overflow: hidden;
	border-radius: var(--folio-radius);
}

/* Media & text. */
.entry-content .wp-block-media-text.has-background {
	overflow: hidden;
	border-radius: var(--folio-radius);
}

/* Details. */
.entry-content details {
	padding: var(--folio-space-sm) var(--folio-space-md);
	border: max(1px, var(--folio-border-width)) solid var(--folio-color-border);
	border-radius: var(--folio-radius);
}

.entry-content details > summary {
	padding-block: 0.15em;
	font-family: var(--folio-font-ui);
	font-weight: var(--folio-fw-ui);
	letter-spacing: var(--folio-tracking-ui);
	cursor: pointer;
}

.entry-content details > summary::marker {
	color: var(--folio-color-accent);
}

.entry-content details[open] > summary {
	margin-block-end: var(--folio-space-xs);
}

.entry-content details > :not(summary) + * {
	margin-block-start: 0.75em;
}

/* File downloads. */
.entry-content .wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--folio-space-xs) var(--folio-space-sm);
	padding: var(--folio-space-sm) var(--folio-space-md);
	border: var(--folio-border);
	border-radius: var(--folio-radius);
	background-color: var(--folio-color-surface);
	font-family: var(--folio-font-ui);
	font-size: var(--folio-fs-ui);
}

.entry-content .wp-block-file > a:not(.wp-block-file__button) {
	color: var(--folio-color-text);
	font-weight: var(--folio-fw-ui);
	overflow-wrap: anywhere;
}

.entry-content .wp-block-file .wp-block-file__button {
	margin-inline-start: auto;
}

.entry-content .wp-block-file__embed {
	width: 100%;
	margin-block-end: var(--folio-space-xs);
	border-radius: var(--folio-radius-sm);
}

/* Search block (in posts and widgets). */
.wp-block-search__label {
	display: block;
	margin-block-end: var(--folio-space-2xs);
	font-size: var(--folio-fs-ui);
	font-weight: var(--folio-fw-ui);
}

.wp-block-search .wp-block-search__inside-wrapper {
	gap: var(--folio-space-2xs);
}

.wp-block-search .wp-block-search__button {
	margin: 0;
}

.wp-block-search__button.has-icon svg {
	width: 1.25rem;
	min-width: 0;
	height: 1.25rem;
	min-height: 0;
	fill: currentColor;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	gap: 0.25rem;
	padding: 0.25rem;
	border: var(--folio-control-border);
	border-radius: var(--folio-radius-sm);
	background-color: color-mix(in srgb, var(--folio-color-surface) 40%, var(--folio-color-bg));
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--folio-color-accent);
	outline: 2px solid var(--folio-color-focus);
	outline-offset: 2px;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__input {
	min-height: 2.25rem;
	padding-block: 0.3em;
	border: 0;
	background-color: transparent;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__input:focus-visible {
	outline: none;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__button {
	min-height: 2.25rem;
	padding-block: 0.4em;
}

/* Embeds keep their aspect ratio (core's responsive-embeds) and get the corner radius. */
.entry-content .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper {
	overflow: hidden;
	border-radius: var(--folio-radius);
}

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

/* Footnotes. */
.entry-content .wp-block-footnotes {
	padding-block-start: var(--folio-space-sm);
	padding-inline-start: 1.4em;
	border-top: var(--folio-hairline);
	color: var(--folio-color-text-soft);
	font-size: var(--folio-fs-sm);
	line-height: var(--folio-lh-snug);
}

.entry-content .wp-block-footnotes li + li {
	margin-block-start: 0.5em;
}

.entry-content .wp-block-footnotes li:target {
	border-radius: var(--folio-radius-sm);
	background-color: var(--folio-color-accent-soft);
}

/*
 * The accent alone is too light on accent-soft in some palettes (Paper: 4.34:1);
 * the hover shade passes.
 */
body:not(.folio-links-highlight) .entry-content .wp-block-footnotes li:target a {
	color: var(--folio-color-accent-hover);
}

/* Highlighter links use the full text color there, which stays above 4.5:1 on the filled band. */
.folio-links-highlight .entry-content .wp-block-footnotes li:target a {
	color: var(--folio-color-text);
}

.entry-content sup.fn a,
.entry-content sup[data-fn] a {
	padding-inline: 0.1em;
	font-family: var(--folio-font-ui);
	font-weight: var(--folio-fw-strong);
	text-decoration: none;
}

/* ==========================================================================
   13. Entry footer: tags, share links, edit link
   ========================================================================== */

.entry-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--folio-space-md) var(--folio-space-lg);
	max-width: var(--folio-measure);
	margin: var(--folio-space-xl) auto 0;
	padding-block-start: var(--folio-space-lg);
	border-top: var(--folio-hairline);
}

.entry-tags {
	display: flex;
	flex: 1 1 100%;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.entry-tags__label,
.share-links__label {
	margin-inline-end: 0.35rem;
	color: var(--folio-color-muted);
	font-size: var(--folio-fs-ui-xs);
	font-weight: var(--folio-fw-strong);
	line-height: var(--folio-lh-ui);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.entry-tags .tag {
	display: inline-flex;
	align-items: center;
	min-height: 1.75rem;
	padding: 0.2em 0.8em;
	border-radius: var(--folio-radius-pill);
	background-color: var(--folio-color-surface);
	color: var(--folio-color-text);
	font-size: var(--folio-fs-ui-xs);
	font-weight: var(--folio-fw-ui);
	line-height: 1.3;
	text-decoration: none;
}

.entry-tags .tag::before {
	content: "#";
	content: "#" / "";
	margin-inline-end: 0.1em;
	color: var(--folio-color-muted);
}

.entry-tags .tag:hover {
	background-color: var(--folio-color-accent-soft);
	color: var(--folio-color-accent-hover);
}

/* Share links: 40px circles, a "Copy link" pill and the native share button. */
.share-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.share-links__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* .share-links__item gets no display rule so its [hidden] attribute keeps working. */
.share-links__link,
.share-links__copy,
.share-links__native:not([hidden]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	width: 2.5rem;
	height: 2.5rem;
	min-height: 0;
	padding: 0;
	border: 1px solid var(--folio-color-border);
	border-radius: var(--folio-radius-pill);
	background-color: transparent;
	color: var(--folio-color-text);
	text-decoration: none;
	transition:
		background-color var(--folio-duration) var(--folio-ease),
		border-color var(--folio-duration) var(--folio-ease),
		color var(--folio-duration) var(--folio-ease);
}

.share-links__link:hover,
.share-links__copy:hover,
.share-links__native:hover {
	border-color: var(--folio-color-accent);
	background-color: var(--folio-color-accent);
	color: var(--folio-color-accent-text);
}

.share-links .folio-icon {
	width: 1.125rem;
	height: 1.125rem;
}

.share-links__copy {
	width: auto;
	padding-inline: 0.85rem 1rem;
	font-size: var(--folio-fs-ui-xs);
	font-weight: var(--folio-fw-ui);
	line-height: 1.2;
}

/* Copied: the link icon becomes a check (drawn with a mask in the text color). */
.share-links__copy.is-copied,
.share-links__copy.is-copied:hover {
	border-color: var(--folio-color-accent);
	background-color: var(--folio-color-accent-soft);
	color: var(--folio-color-accent-hover);
}

.share-links__copy.is-copied .folio-icon--link {
	display: none;
}

.share-links__copy.is-copied::before {
	content: "";
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.edit-link {
	font-size: var(--folio-fs-ui-xs);
	font-weight: var(--folio-fw-ui);
}

.edit-link a {
	color: var(--folio-color-muted);
}

.edit-link a:hover {
	color: var(--folio-color-accent);
}

.page-entry .entry-footer {
	justify-content: center;
}

/* ==========================================================================
   14. Author box, post navigation, related posts
   ========================================================================== */

/* Author box: avatar beside name, bio and link. Follows the card style. */
.author-bio {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--folio-space-2xs) var(--folio-space-md);
	max-width: var(--folio-measure);
	margin: var(--folio-space-2xl) auto 0;
	padding-block: var(--folio-space-lg);
	border-block: var(--folio-hairline);
}

.author-bio > :not(.author-bio__avatar) {
	grid-column: 2;
}

.author-bio:not(:has(.author-bio__avatar)) {
	grid-template-columns: minmax(0, 1fr);
}

.author-bio:not(:has(.author-bio__avatar)) > * {
	grid-column: 1;
}

.author-bio__avatar {
	grid-row: 1 / span 3;
	grid-column: 1;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
}

.author-bio__name {
	font-size: var(--folio-fs-lg);
	line-height: var(--folio-lh-snug);
	overflow-wrap: anywhere;
}

.author-bio__description {
	color: var(--folio-color-text-soft);
	font-size: var(--folio-fs-sm);
}

.author-bio__description > * + * {
	margin-block-start: 0.6em;
}

.author-bio__link {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	gap: 0.4em;
	min-height: 1.5rem;
	margin-block-start: 0.25rem;
	color: var(--folio-color-accent);
	font-size: var(--folio-fs-ui);
	font-weight: var(--folio-fw-ui);
	text-decoration: none;
}

.author-bio__link::after {
	content: "→";
	content: "→" / "";
	transition: translate var(--folio-duration) var(--folio-ease);
}

[dir="rtl"] .author-bio__link::after {
	content: "←";
	content: "←" / "";
}

.author-bio__link:hover::after {
	translate: 0.2em 0;
}

[dir="rtl"] .author-bio__link:hover::after {
	translate: -0.2em 0;
}

:is(.folio-cards-bordered, .folio-cards-elevated) .author-bio {
	padding: var(--folio-space-lg);
	border: 0;
	border-radius: var(--folio-radius);
	background-color: var(--folio-color-surface);
}

.folio-cards-bordered .author-bio {
	border: var(--folio-border);
}

.folio-cards-elevated .author-bio {
	box-shadow: var(--folio-shadow-md);
}

@media (max-width: 39.99em) {
	.author-bio__avatar {
		width: 3.5rem;
		height: 3.5rem;
	}
}

/* Previous / next: two columns from 40em, label above title. */
.post-navigation {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--folio-space-sm);
	max-width: var(--folio-measure);
	margin: var(--folio-space-xl) auto 0;
}

.post-navigation__link {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	height: 100%;
	padding: var(--folio-space-md);
	border: var(--folio-hairline);
	border-radius: var(--folio-radius);
	color: var(--folio-color-text);
	text-decoration: none;
	transition:
		border-color var(--folio-duration) var(--folio-ease),
		background-color var(--folio-duration) var(--folio-ease),
		box-shadow var(--folio-duration) var(--folio-ease);
}

.post-navigation__link:hover {
	border-color: var(--folio-color-border-strong);
	color: var(--folio-color-text);
}

.post-navigation__label {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.4em;
	color: var(--folio-color-muted);
	font-size: var(--folio-fs-ui-xs);
	font-weight: var(--folio-fw-strong);
	line-height: var(--folio-lh-ui);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.post-navigation__label .folio-icon {
	width: 1rem;
	height: 1rem;
	transition: translate var(--folio-duration) var(--folio-ease);
}

.post-navigation__link:hover .folio-icon--arrow-left {
	translate: -0.2rem 0;
}

.post-navigation__link:hover .folio-icon--arrow-right {
	translate: 0.2rem 0;
}

[dir="rtl"] .post-navigation__link:hover .folio-icon--arrow-left {
	translate: 0.2rem 0;
}

[dir="rtl"] .post-navigation__link:hover .folio-icon--arrow-right {
	translate: -0.2rem 0;
}

.post-navigation__title {
	font-family: var(--folio-font-heading);
	font-size: var(--folio-fs-md);
	font-weight: var(--folio-fw-heading);
	line-height: var(--folio-lh-snug);
	letter-spacing: var(--folio-tracking-heading);
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.post-navigation__link:hover .post-navigation__title {
	text-decoration-line: underline;
	text-decoration-thickness: max(1px, 0.05em);
	text-underline-offset: 0.16em;
}

.post-navigation__next .post-navigation__link {
	align-items: flex-end;
	text-align: end;
}

.post-navigation__next .post-navigation__label {
	align-self: flex-end;
}

:is(.folio-cards-bordered, .folio-cards-elevated) .post-navigation__link {
	background-color: var(--folio-color-surface);
}

.folio-cards-bordered .post-navigation__link {
	border: var(--folio-border);
}

.folio-cards-elevated .post-navigation__link {
	border-color: transparent;
	box-shadow: var(--folio-shadow-md);
}

.folio-cards-elevated .post-navigation__link:hover {
	box-shadow: var(--folio-shadow-lg);
}

@media (min-width: 40em) {
	.post-navigation {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.post-navigation__next {
		grid-column: 2;
	}
}

/* Related posts: a full-width band of compact cards. */
.related-posts {
	margin-block-start: var(--folio-space-2xl);
	padding-block-start: var(--folio-space-xl);
	border-top: var(--folio-hairline);
}

.related-posts__title {
	margin-block-end: var(--folio-space-lg);
	font-size: var(--folio-fs-xl);
}

/* ==========================================================================
   15. Comments
   ========================================================================== */

.comments-area {
	max-width: var(--folio-measure);
	margin: var(--folio-space-2xl) auto 0;
	padding-block-start: var(--folio-space-xl);
	border-top: var(--folio-hairline);
}

.comments-title,
.comment-reply-title {
	font-size: var(--folio-fs-xl);
	overflow-wrap: anywhere;
}

.comments-title {
	margin-block-end: var(--folio-space-lg);
}

.comments-title__post {
	font-style: italic;
}

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

.comment-list > li + li {
	border-top: var(--folio-hairline);
}

/* Each comment: the avatar hangs in the left margin of its text. */
.comment-body {
	padding-block: var(--folio-space-md);
	padding-inline-start: calc(2.75rem + var(--folio-space-sm));
}

.comment-list > li:first-child > .comment-body {
	padding-block-start: 0;
}

.comment-meta {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.1rem 0.75rem;
	margin-block-end: var(--folio-space-2xs);
	line-height: var(--folio-lh-ui);
}

.comment-author {
	font-size: var(--folio-fs-ui);
	font-weight: var(--folio-fw-strong);
}

.comment-author .avatar {
	position: absolute;
	top: 0;
	inset-inline-start: calc(-1 * (2.75rem + var(--folio-space-sm)));
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
}

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

.comment-author .fn a {
	color: var(--folio-color-text);
	text-decoration: none;
}

.comment-author .fn a:hover {
	color: var(--folio-color-accent);
}

/* "says:" is implied by the layout; keep it for screen readers only. */
.comment-author .says {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.comment-metadata {
	color: var(--folio-color-muted);
	font-size: var(--folio-fs-ui-xs);
}

.comment-metadata a {
	color: inherit;
	text-decoration-color: transparent;
}

.comment-metadata a:hover {
	color: var(--folio-color-text);
	text-decoration-color: currentColor;
}

.comment-metadata .edit-link::before {
	content: "·";
	content: "·" / "";
	margin-inline: 0.4em;
}

.comment-awaiting-moderation {
	flex-basis: 100%;
	margin: 0;
	color: var(--folio-color-muted);
	font-size: var(--folio-fs-ui-xs);
	font-style: italic;
}

.comment-content > * + * {
	margin-block-start: 0.8em;
}

.comment-content a {
	overflow-wrap: anywhere;
}

.reply {
	margin-block-start: var(--folio-space-xs);
}

.comment-reply-link {
	display: inline-flex;
	align-items: center;
	min-height: 1.75rem;
	padding: 0.15em 0.85em;
	border: var(--folio-hairline);
	border-radius: var(--folio-radius-button);
	color: var(--folio-color-text);
	font-size: var(--folio-fs-ui-xs);
	font-weight: var(--folio-fw-ui);
	text-decoration: none;
}

.comment-reply-link:hover {
	border-color: var(--folio-color-accent);
	color: var(--folio-color-accent);
}

/* Threads: indented with a guide line; the indent stops growing on phones. */
.comment-list .children {
	margin-inline-start: var(--folio-space-sm);
	padding-inline-start: var(--folio-space-md);
	border-inline-start: var(--folio-hairline);
}

@media (max-width: 39.99em) {
	.comment-body {
		padding-inline-start: calc(2.25rem + var(--folio-space-xs));
	}

	.comment-author .avatar {
		inset-inline-start: calc(-1 * (2.25rem + var(--folio-space-xs)));
		width: 2.25rem;
		height: 2.25rem;
	}

	.comment-list .children {
		margin-inline-start: 0.25rem;
		padding-inline-start: 0.75rem;
	}

	.comment-list .children .children .children {
		margin-inline-start: 0;
		padding-inline-start: 0;
		border-inline-start: 0;
	}
}

/* Replies by the post's author: an accent ring and a verified-style badge. */
.bypostauthor > .comment-body .comment-author .avatar {
	box-shadow:
		0 0 0 2px var(--folio-color-bg),
		0 0 0 4px var(--folio-color-accent);
}

.bypostauthor > .comment-body .comment-author .fn::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-inline-start: 0.35em;
	background-color: var(--folio-color-accent);
	vertical-align: -0.15em;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm4.7 7.3a1 1 0 0 1 0 1.4l-5 5a1 1 0 0 1-1.4 0l-2.5-2.5a1 1 0 1 1 1.4-1.4l1.8 1.8 4.3-4.3a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm4.7 7.3a1 1 0 0 1 0 1.4l-5 5a1 1 0 0 1-1.4 0l-2.5-2.5a1 1 0 1 1 1.4-1.4l1.8 1.8 4.3-4.3a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Pingbacks and trackbacks: one line, no avatar. */
.comment-list :is(.pingback, .trackback) .comment-body {
	padding-inline-start: 0;
	color: var(--folio-color-muted);
	font-family: var(--folio-font-ui);
	font-size: var(--folio-fs-ui);
}

.comment-list :is(.pingback, .trackback) .comment-body a {
	overflow-wrap: anywhere;
}

.comment-list :is(.pingback, .trackback) .edit-link::before {
	content: "·";
	content: "·" / "";
	margin-inline: 0.4em;
}

.no-comments {
	margin-block-start: var(--folio-space-md);
	color: var(--folio-color-muted);
	font-size: var(--folio-fs-ui);
}

/* The comment form. */
.comment-respond {
	margin-block-start: var(--folio-space-xl);
}

.comments-area > .comment-respond:first-child {
	margin-block-start: 0;
}

.comment-list .comment-respond {
	margin-block: var(--folio-space-sm) var(--folio-space-md);
	padding: var(--folio-space-md);
	border-radius: var(--folio-radius);
	background-color: var(--folio-color-surface);
}

.comment-reply-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	margin-block-end: var(--folio-space-sm);
}

.comment-reply-title small {
	font-family: var(--folio-font-ui);
	font-size: var(--folio-fs-ui);
	font-weight: var(--folio-fw-ui);
	letter-spacing: var(--folio-tracking-ui);
}

.comment-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--folio-space-sm) var(--folio-space-md);
}

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

.comment-form label {
	display: block;
	margin-block-end: 0.35rem;
}

.comment-form .required {
	color: var(--folio-color-accent);
}

.comment-notes,
.logged-in-as {
	color: var(--folio-color-muted);
	font-size: var(--folio-fs-ui);
	line-height: var(--folio-lh-ui);
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.comment-form-cookies-consent input {
	flex-shrink: 0;
	margin-block-start: 0;
}

.comment-form .comment-form-cookies-consent label {
	margin: 0;
	color: var(--folio-color-muted);
	font-weight: var(--folio-fw-body);
	text-transform: none;
}

.form-submit {
	margin-block-start: var(--folio-space-2xs);
}

@media (min-width: 40em) {
	.comment-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.comment-form > * {
		grid-column: 1 / -1;
	}

	.comment-form > .comment-form-author {
		grid-column: 1;
	}

	.comment-form > .comment-form-email {
		grid-column: 2;
	}
}

/* ==========================================================================
   16. Pagination
   ========================================================================== */

.pagination,
.posts-navigation,
.comment-navigation {
	margin-block-start: var(--folio-space-2xl);
}

.comment-navigation {
	margin-block: var(--folio-space-lg);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding-inline: 0.75rem;
	border: var(--folio-hairline);
	border-radius: var(--folio-radius-button);
	color: var(--folio-color-text);
	font-size: var(--folio-fs-ui);
	font-weight: var(--folio-fw-ui);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-decoration: none;
	transition:
		border-color var(--folio-duration) var(--folio-ease),
		background-color var(--folio-duration) var(--folio-ease),
		color var(--folio-duration) var(--folio-ease);
}

.pagination a.page-numbers:hover {
	border-color: var(--folio-color-accent);
	color: var(--folio-color-accent);
}

.pagination .page-numbers.current {
	border-color: var(--folio-color-accent);
	background-color: var(--folio-color-accent);
	color: var(--folio-color-accent-text);
}

.pagination .page-numbers.dots {
	min-width: 1.5rem;
	padding-inline: 0.25rem;
	border-color: transparent;
	color: var(--folio-color-muted);
}

.pagination :is(.prev, .next) .folio-icon {
	width: 1.125rem;
	height: 1.125rem;
}

/* Older / newer posts and comment pages: outline pills at either end. */
:is(.posts-navigation, .comment-navigation) .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem;
}

:is(.posts-navigation, .comment-navigation) .nav-next {
	margin-inline-start: auto;
}

:is(.posts-navigation, .comment-navigation) a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-height: 2.75rem;
	padding: 0.5rem 1.2rem;
	border: var(--folio-hairline);
	border-radius: var(--folio-radius-button);
	color: var(--folio-color-text);
	font-size: var(--folio-fs-ui);
	font-weight: var(--folio-fw-ui);
	line-height: var(--folio-lh-ui);
	text-decoration: none;
	transition:
		border-color var(--folio-duration) var(--folio-ease),
		color var(--folio-duration) var(--folio-ease);
}

:is(.posts-navigation, .comment-navigation) a:hover {
	border-color: var(--folio-color-accent);
	color: var(--folio-color-accent);
}

:is(.posts-navigation, .comment-navigation) .folio-icon {
	width: 1.1rem;
	height: 1.1rem;
}

/* ==========================================================================
   17. Sidebar and widgets
   ========================================================================== */

.sidebar {
	min-width: 0;
	padding-block: var(--folio-space-xl) var(--folio-space-2xl);
	border-top: var(--folio-hairline);
	font-size: var(--folio-fs-sm);
}

/* Beside the content it stays in view, scrolling on its own when taller than the window. */
@media (min-width: 64em) {
	.sidebar {
		position: sticky;
		top: calc(var(--folio-header-offset) + var(--folio-admin-bar) + var(--folio-space-lg));
		max-height: calc(100vh - var(--folio-header-offset) - var(--folio-admin-bar) - 2 * var(--folio-space-lg));
		margin-block: var(--folio-space-xl);
		margin-inline: -0.25rem;
		padding: 0 0.25rem;
		overflow-y: auto;
		overscroll-behavior: contain;
		border-top: 0;
		scrollbar-width: thin;
	}
}

.widget {
	min-width: 0;
}

.widget + .widget {
	margin-block-start: var(--folio-space-xl);
}

.widget > * + *,
.textwidget > * + * {
	margin-block-start: 0.85em;
}

/* Widget titles, classic or block (a heading opening the widget or its group). */
.widget-title,
.widget > :is(h2, h3, h4):first-child,
.widget > .wp-block-group > :is(h2, h3, h4):first-child,
.widget > .wp-block-group > .wp-block-group__inner-container > :is(h2, h3, h4):first-child,
.widget .wp-block-search__label {
	margin-block-end: var(--folio-space-sm);
	color: var(--folio-color-text);
	font-family: var(--folio-font-ui);
	font-size: var(--folio-fs-ui-xs);
	font-weight: var(--folio-fw-strong);
	line-height: var(--folio-lh-ui);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.widget img {
	height: auto;
}

/* Link lists: posts, categories, archives, pages, menus, comments, feeds. */
.widget :is(.wp-block-latest-posts__list:not(.is-grid), .wp-block-categories-list, .wp-block-archives-list, .wp-block-page-list, .wp-block-latest-comments, .wp-block-rss, .menu),
.widget:is(.widget_recent_entries, .widget_categories, .widget_archive, .widget_pages, .widget_meta, .widget_nav_menu, .widget_recent_comments, .widget_rss) ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget :is(.wp-block-latest-posts__list:not(.is-grid), .wp-block-categories-list, .wp-block-archives-list, .wp-block-page-list, .wp-block-latest-comments, .wp-block-rss, .menu) li,
.widget:is(.widget_recent_entries, .widget_categories, .widget_archive, .widget_pages, .widget_meta, .widget_nav_menu, .widget_recent_comments, .widget_rss) li {
	margin: 0;
	padding-block: 0.5em;
	color: var(--folio-color-muted);
}

.widget :is(.wp-block-latest-posts__list:not(.is-grid), .wp-block-categories-list, .wp-block-archives-list, .wp-block-page-list, .wp-block-latest-comments, .wp-block-rss, .menu) li + li,
.widget:is(.widget_recent_entries, .widget_categories, .widget_archive, .widget_pages, .widget_meta, .widget_nav_menu, .widget_recent_comments, .widget_rss) li + li {
	border-top: var(--folio-hairline);
}

.widget :is(.wp-block-categories-list, .wp-block-page-list, .menu) li > ul,
.widget:is(.widget_categories, .widget_pages, .widget_nav_menu) li > ul {
	margin-block: 0.5em -0.5em;
	padding-inline-start: 1em;
	border-top: var(--folio-hairline);
}

.widget :is(.wp-block-latest-posts__list, .wp-block-categories-list, .wp-block-archives-list, .wp-block-page-list, .wp-block-latest-comments, .wp-block-rss, .menu) a,
.widget:is(.widget_recent_entries, .widget_categories, .widget_archive, .widget_pages, .widget_meta, .widget_nav_menu, .widget_recent_comments, .widget_rss) li a {
	color: var(--folio-color-text);
	text-decoration-color: transparent;
}

.widget :is(.wp-block-latest-posts__list, .wp-block-categories-list, .wp-block-archives-list, .wp-block-page-list, .wp-block-latest-comments, .wp-block-rss, .menu) a:hover,
.widget:is(.widget_recent_entries, .widget_categories, .widget_archive, .widget_pages, .widget_meta, .widget_nav_menu, .widget_recent_comments, .widget_rss) li a:hover {
	color: var(--folio-color-accent);
	text-decoration-color: currentColor;
}

/* Latest posts. */
.wp-block-latest-posts__post-title {
	display: inline-block;
	font-weight: var(--folio-fw-ui);
	line-height: var(--folio-lh-snug);
}

.widget .wp-block-latest-posts__post-title {
	display: block;
	font-family: var(--folio-font-heading);
	font-size: var(--folio-fs-base);
	font-weight: var(--folio-fw-heading);
	letter-spacing: var(--folio-tracking-heading);
}

.wp-block-latest-posts__post-date,
.wp-block-latest-posts__post-author {
	display: block;
	margin-block-start: 0.15em;
	color: var(--folio-color-muted);
	font-family: var(--folio-font-ui);
	font-size: var(--folio-fs-ui-xs);
	letter-spacing: var(--folio-tracking-ui);
}

.wp-block-latest-posts__post-excerpt {
	margin-block-start: 0.35em;
	color: var(--folio-color-text-soft);
}

/* Latest comments. */
.wp-block-latest-comments__comment {
	line-height: var(--folio-lh-snug);
}

.wp-block-latest-comments__comment-meta {
	font-family: var(--folio-font-ui);
	font-size: var(--folio-fs-ui);
	letter-spacing: var(--folio-tracking-ui);
}

.wp-block-latest-comments__comment-date {
	color: var(--folio-color-muted);
	font-size: var(--folio-fs-ui-xs);
}

.wp-block-latest-comments__comment-excerpt p {
	margin-block: 0.25em 0;
	color: var(--folio-color-text-soft);
	font-size: var(--folio-fs-sm);
}

/* RSS. */
.wp-block-rss__item-title a {
	font-weight: var(--folio-fw-ui);
}

.wp-block-rss__item-publish-date,
.wp-block-rss__item-author {
	color: var(--folio-color-muted);
	font-family: var(--folio-font-ui);
	font-size: var(--folio-fs-ui-xs);
}

/* Tag clouds keep their own sizes; they just get the palette. */
.wp-block-tag-cloud,
.tagcloud {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.65rem;
	line-height: var(--folio-lh-snug);
}

.wp-block-tag-cloud a,
.tagcloud a {
	margin: 0;
	color: var(--folio-color-text);
	text-decoration-color: transparent;
}

.wp-block-tag-cloud a:hover,
.tagcloud a:hover {
	color: var(--folio-color-accent);
	text-decoration-color: currentColor;
}

.wp-block-tag-cloud.is-style-outline a {
	padding: 0.25em 0.8em;
	border: var(--folio-hairline);
	border-radius: var(--folio-radius-pill);
}

.wp-block-tag-cloud.is-style-outline a:hover {
	border-color: var(--folio-color-accent);
}

/* Calendar. */
:is(.wp-block-calendar, .widget_calendar) table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--folio-font-ui);
	font-size: var(--folio-fs-ui-xs);
	font-variant-numeric: tabular-nums;
	text-align: center;
}

:is(.wp-block-calendar, .widget_calendar) caption {
	margin-block-end: 0.5em;
	color: var(--folio-color-text);
	font-weight: var(--folio-fw-strong);
}

.wp-block-calendar table :is(th, td),
.widget_calendar table :is(th, td) {
	padding: 0.45em 0.15em;
	border: 0;
	background: none;
	color: inherit;
	text-align: center;
}

.wp-block-calendar table th,
.widget_calendar table th {
	color: var(--folio-color-muted);
	font-weight: var(--folio-fw-strong);
}

:is(.wp-block-calendar, .widget_calendar) #today {
	border-radius: var(--folio-radius-sm);
	background-color: var(--folio-color-accent-soft);
	color: var(--folio-color-accent-hover);
	font-weight: var(--folio-fw-strong);
}

:is(.wp-block-calendar, .widget_calendar) tbody a {
	font-weight: var(--folio-fw-strong);
	text-decoration-color: transparent;
}

.wp-calendar-nav {
	display: flex;
	justify-content: space-between;
	margin-block-start: 0.5em;
	font-family: var(--folio-font-ui);
	font-size: var(--folio-fs-ui-xs);
}

/* Social icons block: core draws the icons; keep the list reset. */
.widget .wp-block-social-links {
	padding-inline-start: 0;
}

/* ==========================================================================
   18. Site footer
   ========================================================================== */

.site-footer {
	border-top: var(--folio-hairline);
	background-color: var(--folio-color-surface);
	color: var(--folio-color-text);
	font-size: var(--folio-fs-ui);
	line-height: 1.55;
}

.footer-widgets__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--folio-space-xl) var(--folio-space-lg);
	max-width: calc(var(--folio-wide-width) + 2 * var(--folio-gutter));
	margin-inline: auto;
	padding: var(--folio-space-2xl) var(--folio-gutter);
}

.footer-widgets .widget :is(p, .textwidget) {
	color: var(--folio-color-text-soft);
}

@media (min-width: 40em) {
	.footer-widgets--cols-2 .footer-widgets__inner,
	.footer-widgets--cols-3 .footer-widgets__inner,
	.footer-widgets--cols-4 .footer-widgets__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 56em) {
	.footer-widgets--cols-3 .footer-widgets__inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.footer-widgets--cols-4 .footer-widgets__inner {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.footer-widgets + .site-info {
	border-top: var(--folio-hairline);
}

/* Social icons, footer menu, footer text and back to top on one wrapping row. */
.site-info__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--folio-space-sm) var(--folio-space-lg);
	max-width: calc(var(--folio-wide-width) + 2 * var(--folio-gutter));
	margin-inline: auto;
	padding: var(--folio-space-lg) var(--folio-gutter);
}

.social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 0 0 -0.5rem;
	padding: 0;
	list-style: none;
}

[dir="rtl"] .social-links {
	margin: 0 -0.5rem 0 0;
}

.social-links a {
	display: inline-grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--folio-radius-pill);
	color: var(--folio-color-text);
	text-decoration: none;
	transition:
		background-color var(--folio-duration) var(--folio-ease),
		color var(--folio-duration) var(--folio-ease);
}

.social-links a:hover {
	background-color: var(--folio-color-hover-tint);
	color: var(--folio-color-accent);
}

.social-links .folio-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-menu a {
	display: inline-block;
	padding-block: 0.3rem;
	color: var(--folio-color-text);
	font-weight: var(--folio-fw-ui);
	text-decoration-color: transparent;
}

.footer-menu a:hover {
	color: var(--folio-color-accent);
	text-decoration-color: currentColor;
}

.site-info__text {
	margin: 0;
	color: var(--folio-color-muted);
}

.site-info__text:empty {
	display: none;
}

.back-to-top {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: 2.5rem;
	color: var(--folio-color-text);
	font-weight: var(--folio-fw-ui);
	text-decoration: none;
}

.back-to-top .folio-icon {
	width: 1rem;
	height: 1rem;
	transition: translate var(--folio-duration) var(--folio-ease);
}

.back-to-top:hover {
	color: var(--folio-color-accent);
}

.back-to-top:hover .folio-icon {
	translate: 0 -0.15rem;
}

@media (min-width: 40em) {
	/* Text and back-to-top gather on the right, after the icons and menu. */
	.site-info__text {
		margin-inline-start: auto;
	}

	.site-info__text:first-child {
		margin-inline-start: 0;
	}

	.site-info__text:first-child + .back-to-top,
	.site-info__text:empty + .back-to-top {
		margin-inline-start: auto;
	}
}

@media (max-width: 39.99em) {
	.site-info__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==========================================================================
   19. 404, search results and empty states
   ========================================================================== */

.error-404 .page-content {
	max-width: var(--folio-measure);
}

.error-404 .page-content > * + * {
	margin-block-start: var(--folio-space-md);
}

.error-404 .page-content p {
	color: var(--folio-color-text-soft);
	font-size: var(--folio-fs-md);
	line-height: var(--folio-lh-snug);
}

.recent-posts {
	max-width: var(--folio-measure);
	margin-block-start: var(--folio-space-2xl);
}

.recent-posts__title {
	margin-block-end: var(--folio-space-sm);
	font-family: var(--folio-font-ui);
	letter-spacing: 0.08em;
}

.recent-posts-list {
	margin: 0;
	padding: 0;
	border-top: var(--folio-hairline);
	list-style: none;
}

.recent-posts-list__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem var(--folio-space-md);
	padding-block: var(--folio-space-sm);
	border-bottom: var(--folio-hairline);
}

.recent-posts-list__link {
	flex: 1 1 18rem;
	min-width: 0;
	padding-block: 0.15em;
	color: var(--folio-color-text);
	font-family: var(--folio-font-heading);
	font-size: var(--folio-fs-md);
	font-weight: var(--folio-fw-heading);
	line-height: var(--folio-lh-snug);
	letter-spacing: var(--folio-tracking-heading);
	text-decoration-color: transparent;
	overflow-wrap: anywhere;
}

.recent-posts-list__link:hover {
	color: var(--folio-color-text);
	text-decoration-color: currentColor;
}

.recent-posts-list__date {
	color: var(--folio-color-muted);
	font-size: var(--folio-fs-ui-xs);
	white-space: nowrap;
}

/* "Nothing found": a quiet panel. */
.no-results {
	max-width: var(--folio-measure);
	padding: var(--folio-space-xl);
	border-radius: var(--folio-radius);
	background-color: var(--folio-color-surface);
}

.no-results__title {
	margin-block-end: var(--folio-space-xs);
	font-size: var(--folio-fs-xl);
}

.no-results__content {
	color: var(--folio-color-text-soft);
}

.no-results__content > * + * {
	margin-block-start: var(--folio-space-md);
}

.no-results .search-form__input {
	background-color: var(--folio-color-bg);
}

/* ==========================================================================
   20. WordPress core classes
   ========================================================================== */

.alignleft {
	float: left;
	margin-right: var(--folio-space-md);
	margin-bottom: var(--folio-space-xs);
}

.alignright {
	float: right;
	margin-bottom: var(--folio-space-xs);
	margin-left: var(--folio-space-md);
}

.aligncenter {
	display: block;
	clear: both;
	margin-inline: auto;
}

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

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-inline: auto;
}

.gallery-caption {
	display: block;
}

/* Sticky posts are marked by their "Featured" badge; the class only anchors it. Post-author replies (.bypostauthor) are styled with the comments. */
.sticky {
	position: relative;
}

/* Classic [gallery] shortcode. */
.gallery {
	display: grid;
	grid-template-columns: repeat(var(--folio-gallery-columns, 3), minmax(0, 1fr));
	gap: var(--folio-space-xs);
}

.gallery-columns-1 {
	--folio-gallery-columns: 1;
}

.gallery-columns-2 {
	--folio-gallery-columns: 2;
}

.gallery-columns-4 {
	--folio-gallery-columns: 4;
}

.gallery-columns-5 {
	--folio-gallery-columns: 5;
}

.gallery-columns-6 {
	--folio-gallery-columns: 6;
}

.gallery-columns-7 {
	--folio-gallery-columns: 7;
}

.gallery-columns-8 {
	--folio-gallery-columns: 8;
}

.gallery-columns-9 {
	--folio-gallery-columns: 9;
}

.gallery-item {
	margin: 0;
}

.gallery-icon img {
	display: block;
	width: 100%;
}

@media (max-width: 39.99em) {
	.gallery[class*="gallery-columns-"]:not(.gallery-columns-1) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* The Customizer's edit shortcuts are buttons too; keep core's compact size. */
.customize-partial-edit-shortcut button {
	min-height: 0;
}

/* ==========================================================================
   21. Reduced motion, print and forced colors
   ========================================================================== */

/* tokens.css already sets --folio-duration to 0; also drop movement that is not a transition. */
@media (prefers-reduced-motion: reduce) {
	.post-card:hover .post-card__media img,
	.folio-cards-elevated .post-card:hover {
		transform: none;
	}

	.read-more:hover::after,
	.author-bio__link:hover::after,
	.post-navigation__link:hover .folio-icon,
	.back-to-top:hover .folio-icon {
		translate: none;
	}

	.search-modal[open],
	.search-modal[open]::backdrop,
	.main-navigation.is-open {
		animation: none;
	}

	.reading-progress__bar {
		will-change: auto;
	}
}

@media print {
	body {
		background: #fff;
		color: #000;
	}

	.site-header,
	.site-footer,
	.sidebar,
	.reading-progress,
	.search-modal,
	.skip-link,
	.share-links,
	.post-navigation,
	.related-posts,
	.comment-respond,
	.reply,
	.pagination,
	.posts-navigation,
	.comment-navigation,
	.edit-link,
	.read-more,
	.page-header__search {
		display: none;
	}

	.content-layout {
		display: block;
	}

	.container {
		max-width: none;
		padding-inline: 0;
	}

	.site-main {
		padding-block: 0;
	}

	.entry-content > *,
	.entry-header,
	.entry-media,
	.entry-footer,
	.author-bio,
	.comments-area {
		max-width: none;
	}

	.entry-content > .alignfull,
	.no-sidebar .entry-hero {
		margin-inline: 0;
	}

	a,
	.entry-header--cover a {
		color: #000;
		text-decoration-line: underline;
	}

	/* Show where content links lead. */
	.entry-content a[href^="http"]:not(:has(img))::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		overflow-wrap: anywhere;
	}

	/* The cover header prints as an ordinary title above the image. */
	.entry-hero {
		display: block;
		min-height: 0;
	}

	.entry-hero__media {
		display: block;
	}

	.entry-hero__media img {
		height: auto;
		max-height: 50vh;
		contain: none;
	}

	.entry-hero__media::after {
		content: none;
	}

	.entry-header--cover,
	.entry-header--cover .entry-dek,
	.entry-header--cover .entry-meta {
		padding: 0 0 1rem;
		color: #000;
		text-shadow: none;
	}

	.category-pill,
	.entry-header--cover .category-pill {
		border: 1px solid #000;
		background: none;
		color: #000;
	}

	img {
		break-inside: avoid;
	}

	:is(h2, h3, h4) {
		break-after: avoid;
	}

	:is(figure, pre, blockquote, table, .post-card, .comment-body) {
		break-inside: avoid;
	}

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

/* Windows High Contrast and other forced palettes. */
@media (forced-colors: active) {
	:focus-visible {
		outline: 2px solid Highlight;
	}

	.button,
	.wp-block-button__link,
	.wp-element-button,
	:where(button, input[type="button"], input[type="reset"], input[type="submit"]),
	.icon-button,
	.category-pill,
	.post-card__badge,
	.entry-tags .tag,
	.pagination .page-numbers,
	.page-links .post-page-numbers {
		border: 1px solid ButtonText;
	}

	.pagination .page-numbers.current,
	.page-links .post-page-numbers.current {
		border-width: 2px;
	}

	.reading-progress__bar,
	.share-links__copy.is-copied::before,
	.bypostauthor > .comment-body .comment-author .fn::after,
	.wp-block-separator.is-style-folio-ornament::before {
		background-color: CanvasText;
		forced-color-adjust: none;
	}

	.wp-block-separator.is-style-folio-ornament {
		border-top: 1px solid CanvasText;
	}

	.entry-hero__media::after {
		content: none;
	}

	.site-header {
		border-bottom: 1px solid CanvasText;
	}

	.search-modal {
		border: 1px solid CanvasText;
	}
}