/**
 * Studiolo — content templates
 * Handle: studiolo-content (after studiolo-layout, before studiolo-projects).
 *
 * Page header, journal cards (grid / list / feature), single article,
 * entry meta, tags, author bio, post navigation, comments, pagination,
 * search, 404, page templates (wide, canvas).
 *
 * Built only from --st-* design tokens and logical properties, so every
 * Customizer combination keeps working: dark presets, 0–40px corners,
 * uppercase headings, dense or airy spacing, 14–22px base sizes, any type
 * ratio, card styles flat / outline / elevated / filled, and RTL.
 * Shared components (.st-card, .st-card--link, .st-media, .st-chip, .st-btn,
 * .st-label, links, forms, reveal motion) come from base.css; this file
 * only lays them out for the content templates.
 *
 * Contents
 *  1. Shared voices (heading / interface)
 *  2. Page header
 *  3. Post listing: grid & list
 *  4. Post card (+ feature card, list rows)
 *  5. Entry meta & labels
 *  6. Single article
 *  7. Entry footer & tags
 *  8. Author bio
 *  9. Post navigation
 * 10. Pagination & paged-post links
 * 11. Comments
 * 12. Search form & search results
 * 13. No results
 * 14. 404
 * 15. Page templates (page, wide, canvas) & password form
 * 16. Motion
 * 17. RTL, forced colors & print
 */

/* ==========================================================================
   1. Shared voices
   ========================================================================== */

/* Heading voice for elements that are not h1–h6 (or need it restated). */
.st-page-header__title,
.st-article__title,
.st-post-card__title,
.st-post-card__initial,
.st-post-nav__title,
.st-author-bio__title,
.st-result__title,
.st-no-results__title,
.st-comments__title,
.st-comments__form-title,
.st-404__code,
.st-404__text {
	font-family: var(--st-font-heading);
	font-weight: var(--st-heading-weight);
	letter-spacing: var(--st-heading-tracking);
	text-transform: var(--st-heading-case);
	line-height: var(--st-heading-leading);
	font-synthesis-weight: none;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Interface voice: small UI text (numbers, comment meta, form labels). */
.st-pagination .page-numbers,
.st-comments-pagination .page-numbers,
.comments-pagination .page-numbers,
.st-page-links .post-page-numbers,
.st-sticky-label,
.st-edit-link,
.st-comment-list .comment-metadata,
.st-comment-list .reply,
.st-comment-list .comment-awaiting-moderation,
.st-comments__closed,
.st-comments__form-title small,
.st-comment-form label,
.st-comment-form .comment-notes,
.st-comment-form .logged-in-as {
	font-family: var(--st-font-ui);
	text-transform: var(--st-ui-case);
	letter-spacing: var(--st-ui-tracking);
}

/* ==========================================================================
   2. Page header
   ========================================================================== */

.st-page-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-block: calc(var(--st-section) * 0.75) calc(var(--st-section) * 0.5);
}

.st-page-header > * {
	margin: 0;
}

.st-page-header__eyebrow {
	margin-block-end: var(--st-space-s);
}

.st-page-header__title {
	max-inline-size: 22ch;
	font-size: var(--st-fs-6);
	text-wrap: balance;
}

.st-page-header__intro {
	max-inline-size: 34em;
	margin-block-start: var(--st-space-m);
	text-wrap: pretty;
}

.st-page-header__intro > * {
	margin-block: 0;
}

.st-page-header__intro > * + * {
	margin-block-start: var(--st-space-s);
}

.st-page-header--center {
	align-items: center;
	text-align: center;
}

.st-page-header--rule {
	margin-block-end: var(--st-space-xl);
	padding-block-end: var(--st-space-xl);
	border-block-end: var(--st-border-width) solid var(--st-color-border);
}

/* Long search queries without spaces must not overflow. */
.st-page-header--search .st-page-header__title {
	overflow-wrap: anywhere;
}

/* ==========================================================================
   3. Post listing: grid & list
   ========================================================================== */

.st-posts-section {
	padding-block-end: var(--st-section);
}

.st-posts {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--st-space-2xl) var(--st-space-xl);
}

/* Grid (default): 1 → 2 → 3 columns. */
@media (min-width: 40em) {
	body:not(.st-journal-list) .st-posts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 70em) {
	body:not(.st-journal-list) .st-posts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* List: one column of rows. */
.st-journal-list .st-posts {
	gap: var(--st-space-m);
}

/* Flat rows are separated by the card's own top rule; close the list. */
.st-journal-list.st-cards-flat .st-posts {
	gap: 0;
	border-block-end: var(--st-border-width) solid var(--st-color-border);
}

/* ==========================================================================
   4. Post card
   ========================================================================== */

/*
 * Card appearance (rule / border / background / shadow, padding, hover)
 * follows the Card style setting through base.css. The title link carries
 * .st-card__link, which base.css stretches over the whole card.
 */
.st-card.st-post-card {
	display: flex;
	flex-direction: column;
	gap: var(--st-space-m);
	min-inline-size: 0;
	overflow: visible;
}

/* Media */
.st-post-card__media {
	--st-ratio: 3 / 2;
	aspect-ratio: var(--st-ratio);
	margin: 0;
}

.st-post-card__media img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/*
 * Boxed cards (outline / elevated / filled) in the grid: the image bleeds to
 * the card edge (cancelling the card padding) and follows the card shape.
 */
:is(.st-cards-outline, .st-cards-elevated, .st-cards-filled):not(.st-journal-list) .st-posts .st-post-card__media {
	--st-post-card-corner: var(--st-radius-card);
	margin-block-start: calc(var(--st-space-l) * -1);
	margin-inline: calc(var(--st-space-l) * -1);
	border-start-start-radius: var(--st-post-card-corner);
	border-start-end-radius: var(--st-post-card-corner);
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

.st-cards-outline:not(.st-journal-list) .st-posts .st-post-card__media {
	--st-post-card-corner: max(0px, calc(var(--st-radius-card) - max(1px, var(--st-border-width))));
}

/* Placeholder when a post has no featured image. */
.st-post-card__media--placeholder {
	display: grid;
	place-items: center;
	color: var(--st-color-muted);
}

.st-cards-filled .st-post-card__media--placeholder {
	background-color: var(--st-color-surface-strong);
}

.st-post-card__initial {
	font-size: var(--st-fs-6);
	line-height: 1;
}

/* Body */
.st-post-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--st-space-xs);
	min-inline-size: 0;
}

.st-post-card__body > * {
	margin: 0;
}

.st-post-card__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--st-space-2xs) var(--st-space-xs);
}

.st-post-card__title {
	font-size: var(--st-fs-3);
	text-wrap: balance;
}

.st-post-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	text-wrap: pretty;
}

.st-post-card__excerpt > * {
	margin: 0;
}

.st-post-card__meta {
	margin-block-start: auto;
	padding-block-start: var(--st-space-2xs);
}

/* Feature card: the first post on page one of the journal. */
.st-card.st-post-card--feature {
	margin-block-end: var(--st-space-3xl);
}

.st-post-card--feature .st-post-card__title {
	font-size: var(--st-fs-5);
}

@media (min-width: 60em) {
	.st-card.st-post-card--feature {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: end;
		gap: var(--st-space-2xl);
	}

	.st-post-card--feature .st-post-card__excerpt {
		font-size: var(--st-fs-1);
		-webkit-line-clamp: 5;
		line-clamp: 5;
	}
}

/* List rows. */
.st-journal-list .st-posts .st-post-card__media--placeholder {
	display: none;
}

.st-journal-list.st-cards-flat .st-posts > .st-card.st-post-card {
	padding-block: var(--st-space-xl);
}

@media (min-width: 48em) {
	.st-journal-list .st-posts > .st-card.st-post-card--has-media {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		align-items: center;
		gap: var(--st-space-2xl);
	}

	.st-journal-list .st-posts .st-post-card__title {
		font-size: var(--st-fs-4);
	}

	.st-journal-list .st-posts .st-post-card__body {
		max-inline-size: 40em;
	}
}

/* ==========================================================================
   5. Entry meta & labels
   ========================================================================== */

/*
 * Meta row with separator dots. Every item carries its dot in its leading
 * padding; the row is pulled back by that padding and clipped inline, so
 * the dot before the first item of each line (also after wrapping) is
 * never shown.
 */
.st-entry-meta {
	--st-meta-sep: 1.6em;
	margin: 0;
	overflow-x: clip;
	overflow-y: visible;
}

.st-entry-meta__items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: var(--st-space-3xs);
	margin-inline-start: calc(var(--st-meta-sep) * -1);
}

.st-entry-meta__item {
	position: relative;
	display: inline-block;
	padding-inline-start: var(--st-meta-sep);
}

/* Separator dot; its shape follows the corner token (square → round). */
.st-entry-meta__item::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: calc(var(--st-meta-sep) / 2 - 0.15em);
	inline-size: 0.3em;
	block-size: 0.3em;
	margin-block-start: -0.15em;
	border-radius: var(--st-radius);
	background: currentColor;
	opacity: 0.55;
}

/* Centred meta (article header): no leading dot; stacks on phones instead of wrapping. */
.st-article__header .st-entry-meta__items {
	justify-content: center;
	margin-inline-start: 0;
}

.st-article__header .st-entry-meta__item:first-child {
	padding-inline-start: 0;
}

.st-article__header .st-entry-meta__item:first-child::before {
	display: none;
}

@media (max-width: 39.99em) {
	.st-article__header .st-entry-meta__items {
		flex-direction: column;
	}

	.st-article__header .st-entry-meta__item {
		padding-inline-start: 0;
	}

	.st-article__header .st-entry-meta__item::before {
		display: none;
	}
}

/* Small meta links: a 44px hit area without changing the layout. */
.st-entry-meta a,
.st-article__eyebrow a {
	display: inline-block;
	padding-block: 0.875rem;
	margin-block: -0.875rem;
}

.st-sticky-label {
	display: inline-flex;
	align-items: center;
	padding: 0.25em 0.7em;
	border-radius: var(--st-radius-button);
	background: var(--st-color-accent);
	color: var(--st-color-accent-contrast);
	font-size: max(0.6875rem, var(--st-fs--2));
	line-height: 1.4;
}

/* ==========================================================================
   6. Single article
   ========================================================================== */

.st-single {
	padding-block-end: var(--st-section);
}

.st-article__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--st-space-m);
	inline-size: min(100% - 2 * var(--st-gutter), calc(var(--st-content-width) + var(--st-space-3xl) * 2));
	margin-inline: auto;
	padding-block: calc(var(--st-section) * 0.75) var(--st-space-2xl);
	text-align: center;
}

.st-article__header > * {
	margin: 0;
}

.st-article__title {
	max-inline-size: 100%;
	font-size: var(--st-fs-6);
	text-wrap: balance;
}

.st-article__lead {
	max-inline-size: 34em;
}

.st-article__lead > * {
	margin: 0;
}

/* Featured image (wide) with caption. */
.st-entry-media {
	margin-block: 0;
}

.st-entry-media__frame img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	max-block-size: 88vh;
	object-fit: cover;
}

.st-entry-media__caption {
	max-inline-size: var(--st-content-width);
	margin-block-start: var(--st-space-xs);
}

.st-entry-media + .st-flow {
	padding-block-start: var(--st-space-2xl);
}

.st-article__footer,
.st-entry__footer {
	display: flex;
	flex-direction: column;
	gap: var(--st-space-xl);
	padding-block-start: var(--st-space-2xl);
}

/* ==========================================================================
   7. Entry footer & tags
   ========================================================================== */

.st-entry-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--st-space-s) var(--st-space-m);
	padding-block-start: var(--st-space-l);
	border-block-start: var(--st-border-width) solid var(--st-color-border);
}

.st-entry-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--st-space-xs) var(--st-space-s);
}

.st-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--st-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-tag-list li {
	margin: 0;
}

.st-edit-link {
	font-size: max(0.75rem, var(--st-fs--1));
}

.st-edit-link a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: var(--st-color-muted);
}

.st-edit-link a:hover {
	color: var(--st-color-text);
}

/* ==========================================================================
   8. Author bio
   ========================================================================== */

.st-card.st-author-bio {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--st-space-m);
}

.st-author-bio__avatar img {
	display: block;
	inline-size: 4.5rem;
	block-size: 4.5rem;
	border-radius: 50%;
	object-fit: cover;
}

.st-author-bio__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--st-space-2xs);
	min-inline-size: 0;
}

.st-author-bio__body > * {
	margin: 0;
}

.st-author-bio__title {
	font-size: var(--st-fs-2);
}

.st-author-bio__description {
	margin-block-start: var(--st-space-2xs);
}

.st-author-bio__description > * {
	margin: 0;
}

.st-author-bio__description > * + * {
	margin-block-start: var(--st-space-s);
}

.st-author-bio__link {
	margin-block-start: var(--st-space-xs);
}

@media (max-width: 29.99em) {
	.st-card.st-author-bio {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   9. Post navigation
   ========================================================================== */

.st-post-nav-wrap {
	margin-block-start: var(--st-space-3xl);
}

.st-post-nav .nav-links {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	border-block: var(--st-border-width) solid var(--st-color-border);
}

.st-post-nav .nav-previous + .nav-next {
	border-block-start: var(--st-border-width) solid var(--st-color-border);
}

.st-post-nav a {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--st-space-xs);
	min-block-size: 44px;
	padding-block: var(--st-space-l);
	padding-inline: 0 var(--st-space-l);
	color: inherit;
	text-decoration: none;
}

.st-post-nav .nav-next a {
	align-items: flex-end;
	padding-inline: var(--st-space-l) 0;
	text-align: end;
}

.st-post-nav__label {
	display: inline-flex;
	align-items: center;
	gap: var(--st-space-2xs);
}

.st-post-nav__label .st-icon {
	flex: none;
	inline-size: 1.15em;
	block-size: 1.15em;
}

.st-post-nav__title {
	max-inline-size: 24ch;
	font-size: var(--st-fs-3);
	text-wrap: balance;
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: max(1px, 0.04em);
	text-underline-offset: 0.12em;
}

.st-post-nav a:hover .st-post-nav__title,
.st-post-nav a:focus-visible .st-post-nav__title {
	text-decoration-color: currentColor;
}

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

	.st-post-nav .nav-next {
		grid-column: 2;
	}

	.st-post-nav .nav-previous + .nav-next {
		border-block-start: 0;
		border-inline-start: var(--st-border-width) solid var(--st-color-border);
	}
}

/* ==========================================================================
   10. Pagination & paged-post links
   ========================================================================== */

.st-pagination {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--st-space-xs);
	margin-block-start: var(--st-space-3xl);
	padding-block-start: var(--st-space-l);
	border-block-start: var(--st-border-width) solid var(--st-color-border);
}

.st-pagination__prev {
	justify-self: start;
}

.st-pagination__next {
	justify-self: end;
}

.st-pagination__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--st-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-pagination__item {
	margin: 0;
}

/* Chip-style page numbers, shared by posts, comments and paged posts. */
.st-pagination .page-numbers,
.st-comments-pagination .page-numbers,
.comments-pagination .page-numbers,
.st-page-links .post-page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--st-space-2xs);
	box-sizing: border-box;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding-inline: var(--st-space-xs);
	border: max(1px, var(--st-border-width)) solid var(--st-color-border);
	border-radius: var(--st-radius-button);
	color: inherit;
	font-size: max(0.75rem, var(--st-fs--1));
	line-height: 1;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.st-pagination a.page-numbers:hover,
.st-comments-pagination a.page-numbers:hover,
.comments-pagination a.page-numbers:hover,
.st-page-links a.post-page-numbers:hover {
	border-color: currentColor;
	color: inherit;
}

.st-pagination .page-numbers.current,
.st-comments-pagination .page-numbers.current,
.comments-pagination .page-numbers.current,
.st-page-links .post-page-numbers.current {
	border-color: var(--st-color-text);
	background: var(--st-color-text);
	color: var(--st-color-bg);
}

.st-pagination .page-numbers.dots,
.st-comments-pagination .page-numbers.dots,
.comments-pagination .page-numbers.dots {
	min-inline-size: 0;
	padding-inline: var(--st-space-3xs);
	border-color: transparent;
}

.st-pagination .prev,
.st-pagination .next {
	padding-inline: var(--st-space-s);
}

.st-pagination .st-icon,
.st-comments-pagination .st-icon,
.comments-pagination .st-icon {
	flex: none;
	inline-size: 1.15em;
	block-size: 1.15em;
}

@media (max-width: 39.99em) {
	/* Arrow-only prev / next on phones; the label stays for screen readers. */
	.st-pagination__label {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.st-pagination .prev,
	.st-pagination .next {
		padding-inline: var(--st-space-xs);
	}
}

/* Paged posts (<!--nextpage-->). */
.st-page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--st-space-2xs);
	margin-block-start: var(--st-space-xl);
}

.st-page-links__label {
	margin-inline-end: var(--st-space-xs);
}

/* ==========================================================================
   11. Comments
   ========================================================================== */

.st-comments {
	margin-block-start: var(--st-space-3xl);
}

.st-comments__title {
	margin: 0 0 var(--st-space-l);
	font-size: var(--st-fs-3);
}

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

.st-comment-list {
	border-block-end: var(--st-border-width) solid var(--st-color-border);
}

.st-comment-list li {
	margin: 0;
}

.st-comment-list .children {
	margin-inline-start: clamp(var(--st-space-s), 5vw, calc(48px + var(--st-space-s)));
}

.st-comment-list .comment-body {
	position: relative;
	padding-block: var(--st-space-l);
	padding-inline-start: calc(48px + var(--st-space-s));
	border-block-start: var(--st-border-width) solid var(--st-color-border);
}

.st-comment-list .pingback .comment-body,
.st-comment-list .trackback .comment-body {
	padding-inline-start: 0;
}

/* Comments by the post author get a stronger rule. */
.st-comment-list .bypostauthor > .comment-body {
	border-block-start-color: var(--st-color-text);
}

.st-comment-list .comment-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--st-space-3xs) var(--st-space-s);
}

.st-comment-list .comment-author {
	font-family: var(--st-font-heading);
	font-weight: var(--st-heading-weight);
	font-synthesis-weight: none;
}

.st-comment-list .comment-author .avatar {
	position: absolute;
	inset-block-start: var(--st-space-l);
	inset-inline-start: 0;
	inline-size: 48px;
	block-size: 48px;
	border-radius: 50%;
	object-fit: cover;
}

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

.st-comment-list .says {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.st-comment-list .comment-metadata {
	display: flex;
	flex-wrap: wrap;
	gap: var(--st-space-3xs) var(--st-space-s);
	color: var(--st-color-muted);
	font-size: max(0.75rem, var(--st-fs--1));
}

.st-comment-list .comment-metadata a {
	display: inline-block;
	padding-block: 0.75rem;
	margin-block: -0.75rem;
	color: inherit;
	text-decoration-color: transparent;
}

.st-comment-list .comment-metadata a:hover,
.st-comment-list .comment-metadata a:focus-visible {
	color: var(--st-color-text);
	text-decoration-color: currentColor;
}

.st-comment-list .comment-awaiting-moderation {
	display: block;
	margin-block-start: var(--st-space-xs);
	color: var(--st-color-muted);
	font-size: max(0.75rem, var(--st-fs--1));
	font-style: normal;
}

.st-comment-list .comment-content {
	margin-block-start: var(--st-space-xs);
	overflow-wrap: break-word;
}

.st-comment-list .comment-content > * {
	margin-block: 0;
}

.st-comment-list .comment-content > * + * {
	margin-block-start: var(--st-space-s);
}

.st-comment-list .comment-content img {
	max-inline-size: 100%;
	block-size: auto;
}

.st-comment-list .reply {
	margin-block-start: var(--st-space-2xs);
	font-size: max(0.75rem, var(--st-fs--1));
}

.st-comment-list .comment-reply-link {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
}

.st-comments__closed {
	margin: var(--st-space-l) 0 0;
	color: var(--st-color-muted);
	font-size: max(0.75rem, var(--st-fs--1));
}

/* Comments pagination (core markup). */
.st-comments-pagination,
.comments-pagination {
	margin-block: var(--st-space-m);
}

.st-comments-pagination .nav-links,
.comments-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--st-space-2xs);
}

/* Comment form. */
.st-comment-respond {
	container-type: inline-size;
	margin-block-start: var(--st-space-2xl);
}

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

/* Replying inline: the form moves under the comment it answers. */
.st-comment-list .st-comment-respond {
	margin-block: 0 var(--st-space-l);
	padding: var(--st-space-l);
	border-radius: var(--st-radius-card);
	background: var(--st-color-surface);
}

.st-comments__form-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--st-space-2xs) var(--st-space-m);
	margin: 0 0 var(--st-space-m);
	font-size: var(--st-fs-3);
}

.st-comments__form-title small {
	font-size: max(0.75rem, var(--st-fs--1));
	font-weight: normal;
}

.st-comments__form-title small a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
}

.st-comment-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--st-space-m) var(--st-space-s);
	margin: 0;
}

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

.st-comment-form label {
	display: block;
	margin-block-end: var(--st-space-2xs);
	font-size: max(0.75rem, var(--st-fs--1));
}

.st-comment-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
.st-comment-form textarea {
	box-sizing: border-box;
	inline-size: 100%;
}

.st-comment-form textarea {
	min-block-size: 10rem;
	resize: vertical;
}

.st-comment-form .comment-notes,
.st-comment-form .logged-in-as {
	color: var(--st-color-muted);
	font-size: max(0.75rem, var(--st-fs--1));
}

.st-comment-form .logged-in-as a {
	color: inherit;
}

.st-comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--st-space-xs);
}

.st-comment-form .comment-form-cookies-consent input {
	flex: none;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	margin: 0.15em 0 0;
}

.st-comment-form .comment-form-cookies-consent label {
	margin: 0;
	font-family: var(--st-font-body);
	text-transform: none;
	letter-spacing: normal;
}

.st-comment-form .required {
	color: inherit;
}

@container (min-width: 36rem) {
	.st-comment-form {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.st-comment-form > :is(.comment-form-author, .comment-form-email, .comment-form-url) {
		grid-column: auto;
	}
}

/* ==========================================================================
   12. Search form & search results
   ========================================================================== */

.st-search-form {
	display: flex;
	align-items: stretch;
	gap: var(--st-space-2xs);
	inline-size: 100%;
	margin: 0;
}

.st-search-form__input {
	flex: 1 1 auto;
	box-sizing: border-box;
	inline-size: auto;
	min-inline-size: 0;
	min-block-size: 44px;
	margin: 0;
}

.st-search-form__submit {
	flex: 0 0 auto;
	box-sizing: border-box;
	min-inline-size: 44px;
	min-block-size: 44px;
	margin: 0;
	padding-block: 0;
	padding-inline: var(--st-space-s);
}

.st-search-form__submit .st-icon {
	flex: none;
	inline-size: 1.25rem;
	block-size: 1.25rem;
}

.st-search-page {
	padding-block-end: var(--st-section);
}

.st-search-page__form {
	max-inline-size: 36rem;
	margin-block-end: var(--st-space-2xl);
}

.st-results {
	max-inline-size: calc(var(--st-content-width) + var(--st-space-3xl) * 2);
	border-block-end: var(--st-border-width) solid var(--st-color-border);
}

.st-result {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: var(--st-space-m);
	padding-block: var(--st-space-l);
	border-block-start: var(--st-border-width) solid var(--st-color-border);
}

.st-result--has-media {
	grid-template-columns: minmax(0, 1fr) clamp(4.5rem, 18vw, 10rem);
}

.st-result__body {
	display: flex;
	flex-direction: column;
	gap: var(--st-space-2xs);
	min-inline-size: 0;
}

.st-result__body > * {
	margin: 0;
}

.st-result__title {
	font-size: var(--st-fs-3);
	text-wrap: balance;
}

/* One link per row, stretched over the row. */
.st-result__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.st-result__link:focus-visible {
	outline: 0;
}

.st-result__link:focus-visible::after {
	outline: 2px solid var(--st-color-focus);
	outline-offset: 3px;
}

.st-result__excerpt {
	max-inline-size: 40em;
	margin-block-start: var(--st-space-2xs);
}

.st-result__excerpt > * {
	margin: 0;
}

.st-result__meta {
	margin-block-start: var(--st-space-2xs);
}

.st-result__media {
	aspect-ratio: 1;
}

.st-result__media img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* ==========================================================================
   13. No results
   ========================================================================== */

.st-no-results {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--st-space-m);
	padding-block: var(--st-space-xl) var(--st-section);
}

.st-no-results__title {
	margin: 0;
	font-size: var(--st-fs-3);
}

.st-no-results__body {
	max-inline-size: 38em;
}

.st-no-results__body > * {
	margin: 0;
}

.st-no-results__form {
	inline-size: 100%;
	max-inline-size: 36rem;
}

/* ==========================================================================
   14. 404
   ========================================================================== */

.st-404 {
	display: grid;
	gap: var(--st-space-2xl);
	padding-block: calc(var(--st-section) * 0.75) var(--st-section);
}

.st-404__title {
	display: flex;
	flex-direction: column;
	gap: var(--st-space-s);
	margin: 0;
	font-size: var(--st-fs-4);
}

.st-404__code {
	display: block;
	/* Huge, but always fits a 360px screen whatever the type settings. */
	font-size: min(calc(var(--st-fs-7) * 1.6), 34vw);
	line-height: 0.82;
	font-variant-numeric: lining-nums;
}

.st-404__text {
	display: block;
	font-size: var(--st-fs-4);
}

.st-404__body {
	display: grid;
	gap: var(--st-space-l);
	padding-block-start: var(--st-space-l);
	border-block-start: var(--st-border-width) solid var(--st-color-border);
}

.st-404__message {
	max-inline-size: 30em;
	margin: 0;
}

.st-404__actions {
	display: flex;
	flex-direction: column;
	gap: var(--st-space-m);
	min-inline-size: 0;
}

.st-404__actions .st-search-form {
	max-inline-size: 32rem;
}

.st-404__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--st-space-xs);
}

@media (min-width: 60em) {
	.st-404__body {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		column-gap: var(--st-space-2xl);
	}
}

/* ==========================================================================
   15. Page templates & password form
   ========================================================================== */

.st-page-wrap {
	padding-block-end: var(--st-section);
}

/* A page ending in a full-bleed block runs straight into the footer. */
.st-page-wrap:not(:has(.st-comments)):has(> .st-entry > .st-entry__content:last-child > .alignfull:last-child) {
	padding-block-end: 0;
}

/* Wide content template: default blocks use the wide width. */
.st-flow.st-flow--wide > :not(.alignfull, .alignleft, .alignright) {
	max-inline-size: var(--st-wide-width);
}

/* Canvas: patterns bring their own spacing. */
.st-canvas__content {
	padding-block: 0;
}

/* Password-protected content. */
.post-password-form {
	display: grid;
	gap: var(--st-space-s);
}

.post-password-form p {
	margin: 0;
}

.post-password-form p:last-child {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--st-space-xs);
}

.post-password-form label {
	display: flex;
	flex: 1 1 16rem;
	flex-direction: column;
	gap: var(--st-space-2xs);
	font-family: var(--st-font-ui);
	font-size: max(0.75rem, var(--st-fs--1));
	text-transform: var(--st-ui-case);
	letter-spacing: var(--st-ui-tracking);
}

.post-password-form input[type="password"] {
	box-sizing: border-box;
	inline-size: 100%;
}

/* ==========================================================================
   16. Motion (only with the Motion setting and no reduced-motion preference)
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.st-post-nav__title {
		transition: text-decoration-color var(--st-duration-fast) var(--st-ease);
	}

	.st-pagination .page-numbers,
	.st-comments-pagination .page-numbers,
	.comments-pagination .page-numbers,
	.st-page-links .post-page-numbers {
		transition:
			border-color var(--st-duration-fast) var(--st-ease),
			background-color var(--st-duration-fast) var(--st-ease),
			color var(--st-duration-fast) var(--st-ease);
	}

	.st-motion .st-result:hover .st-result__media img {
		scale: 1.03;
	}

	.st-motion .st-post-nav .st-icon,
	.st-motion .st-pagination .prev .st-icon,
	.st-motion .st-pagination .next .st-icon {
		transition: translate var(--st-duration-fast) var(--st-ease);
	}

	.st-motion .st-post-nav .nav-previous a:hover .st-icon,
	.st-motion .st-pagination .prev:hover .st-icon {
		translate: calc(-0.25em * var(--st-content-dir, 1)) 0;
	}

	.st-motion .st-post-nav .nav-next a:hover .st-icon,
	.st-motion .st-pagination .next:hover .st-icon {
		translate: calc(0.25em * var(--st-content-dir, 1)) 0;
	}
}

/* ==========================================================================
   17. RTL, forced colors & print
   ========================================================================== */

/* Arrow glyphs are mirrored globally in RTL (layout.css); hover nudges follow suit. */
.rtl {
	--st-content-dir: -1;
}

@media (forced-colors: active) {
	.st-pagination .page-numbers.current,
	.st-comments-pagination .page-numbers.current,
	.comments-pagination .page-numbers.current,
	.st-page-links .post-page-numbers.current {
		text-decoration: underline;
		text-decoration-thickness: 2px;
	}

	.st-sticky-label {
		border: 1px solid currentColor;
	}
}

@media print {
	.st-post-nav-wrap,
	.st-comments-pagination,
	.comments-pagination,
	.st-comment-list .reply,
	.st-search-form,
	.st-404__actions,
	.st-edit-link {
		display: none !important;
	}

	.st-page-header,
	.st-article__header,
	.st-404 {
		padding-block: 0 1.5rem;
	}

	.st-post-card,
	.st-result,
	.st-comment-list .comment-body,
	.st-author-bio {
		break-inside: avoid;
	}

	.st-card--link .st-card__link::after,
	.st-result__link::after {
		content: none;
	}

	.st-entry-media__frame img {
		max-block-size: 60vh;
	}
}