/*
 * The WordPress base templates — FAVORIT Massivhaus Theme
 *
 * Everything core renders through the template hierarchy rather than through a
 * Beaver Builder layout: the head band shared by archive, search, 404 and the
 * written page; the listing card; pagination; long-form typography; the entry
 * page; and the comment thread.
 *
 * The design has no drawings for these views, so nothing here is transcribed
 * from a mockup. Instead every piece is assembled from the design's own parts —
 * the section header (eyebrow / .h-display / lead), the news card, the house
 * grid's pager, the CF7 field — so a category listing reads as the same site as
 * the homepage without inventing a second visual language.
 *
 * Tokens, .wrap, .btn, .eyebrow, .news-card and the other atoms come from
 * global.css. Only what these templates add lives here.
 */

/* =========================================================
   Page frame
   ========================================================= */

.fmt-main {
	padding-bottom: 96px;
}

/*
 * A page or post laid out in Beaver Builder. Its first section is its hero and
 * has to touch the header, and its last one carries its own closing space — so
 * the template frame contributes nothing at all.
 */
.fmt-main--flush {
	padding-bottom: 0;
}

/* =========================================================
   Page head band
   ========================================================= */

.fmt-page-head {
	padding: 72px 0 36px;
}

.fmt-page-head__eyebrow {
	margin-bottom: 14px;
}

/*
 * The headline is .h-display (64px). The width cap is what keeps a long post
 * title from running the full 1320px container, where a .98 line-height turns
 * into stripes rather than lines.
 */
/*
 * A search term is user input, so it can be one unbreakable 30-character word.
 * At display size that overflows the viewport and gives the whole document a
 * horizontal scrollbar unless it is allowed to break mid-word.
 */
.fmt-page-head__title {
	max-width: 900px;
	overflow-wrap: break-word;
}

.fmt-page-head__lead {
	margin-top: 20px;
	max-width: 620px;
	font-size: 16px;
	color: var(--ink-soft);
}

/* The lead arrives from wpautop() or a term description, so it is paragraphs. */
.fmt-page-head__lead > p {
	margin: 0 0 .8em;
}
.fmt-page-head__lead > p:last-child {
	margin-bottom: 0;
}

.fmt-page-head__meta {
	margin: 18px 0 0;
	font-size: 13px;
	color: var(--ink-mute);
	font-variant-numeric: tabular-nums;
}

/* =========================================================
   Search form
   ========================================================= */

/*
 * Field and button read as one control: the input has no frame of its own, the
 * wrapper carries it, and the submit sits inside on the right. Sizes follow the
 * CF7 text field in cf7.css so a search box and a contact field look related.
 */
.fmt-searchform__field {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 620px;
	padding: 6px 6px 6px 16px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-card);
	transition: border-color .15s ease;
}
.fmt-searchform__field:focus-within {
	border-color: var(--ink-2);
}

.fmt-searchform__field > .icon {
	flex: 0 0 auto;
	color: var(--ink-mute);
}

.fmt-searchform__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 0;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.45;
	color: var(--ink);
	background: none;
	border: 0;
	outline: none;
	/* Safari draws its own rounded, inset search field otherwise. */
	appearance: none;
}
.fmt-searchform__input::placeholder {
	color: var(--ink-mute);
}

.fmt-searchform__submit {
	flex: 0 0 auto;
}

/* The bar above the search results, and the one on the 404. */
.fmt-search-bar,
.fmt-404__search {
	margin-bottom: 40px;
}

/* =========================================================
   Listing grid and card
   ========================================================= */

.fmt-posts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

/* The card frame is the design's news card; .news-card in global.css already
   carries its hover. */
.fmt-post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

/*
 * min-height is the load-bearing line, not the ratio. The card is a column
 * flexbox, so this is a flex item, and a flex item's automatic minimum size is
 * its content — the image's own intrinsic height. That minimum wins over
 * aspect-ratio, which is why every card was as tall as the photo it happened to
 * hold until this was set to zero.
 */
.fmt-post-card__media {
	flex: none;
	min-height: 0;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--bg-3);
}
.fmt-post-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fmt-post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 16px 18px 18px;
}

/* A card with no featured image starts on text, which needs the breathing room
   the image would otherwise have given it. */
.fmt-post-card--textonly .fmt-post-card__body {
	padding-top: 22px;
}

.fmt-post-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.fmt-post-card__kind {
	overflow: hidden;
	font-size: 10px;
	color: var(--ink-mute);
	letter-spacing: .12em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.fmt-post-card__date {
	flex-shrink: 0;
	font-size: 11px;
	color: var(--red);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.fmt-post-card__title {
	margin: 0 0 8px;
	overflow-wrap: break-word;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
	text-wrap: pretty;
}

.fmt-post-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink-soft);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.fmt-post-card__go {
	margin-top: auto;
	color: var(--ink-mute);
	transition: color .15s ease;
}
.fmt-post-card:hover .fmt-post-card__go {
	color: var(--red);
}

/* =========================================================
   Entry — single post and written page
   ========================================================= */

.fmt-entry {
	margin: 0;
}

/*
 * The opening shot is wider than the text it introduces: capped well above the
 * reading column but short of the container, so it stays a photograph rather
 * than a banner.
 *
 * Two caps, not one. A landscape photo is limited by width and fills the box;
 * a portrait one — an event poster, say, which is what a news post often
 * carries — would be twice the height of the screen at that width, so it is
 * limited by height instead and centres in the leftover space.
 */
.fmt-entry__media {
	max-width: 900px;
	margin: 0 0 44px;
}

.fmt-entry__img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 620px;
	height: auto;
	border-radius: var(--radius-lg);
}

.fmt-entry__caption {
	padding-top: 10px;
	font-size: 12px;
	color: var(--ink-mute);
}

.fmt-entry__tags {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
	max-width: 760px;
	margin: 44px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.fmt-entry__tags-label {
	flex: 0 0 auto;
}

/* Tag links come out of get_the_tag_list() without a class of their own, so
   the pill is drawn on the anchor itself rather than reusing .pill. */
.fmt-entry__tags-list a {
	display: inline-block;
	margin: 0 4px 6px 0;
	padding: 5px 12px;
	font-size: 12px;
	color: var(--ink-soft);
	background: rgba(255, 255, 255, .6);
	border: 1px solid var(--line);
	border-radius: 999px;
	transition: all .15s ease;
}
.fmt-entry__tags-list a:hover {
	color: var(--ink);
	border-color: var(--ink-2);
}

/* Multi-page posts (<!--nextpage-->). */
.fmt-page-links {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 760px;
	margin: 40px 0 0;
	font-size: 13px;
}
.fmt-page-links__label {
	color: var(--ink-mute);
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 11px;
}
.fmt-page-links a,
.fmt-page-links > span:not(.fmt-page-links__label) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 8px;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	font-variant-numeric: tabular-nums;
}
.fmt-page-links > span:not(.fmt-page-links__label) {
	color: #fff;
	background: var(--ink-2);
	border-color: var(--ink-2);
}

/* =========================================================
   Prose — WYSIWYG content
   ========================================================= */

/*
 * The reading column. Only applied where the post's text really is a document
 * (see fmt_prose_class()) — a Beaver Builder layout brings its own type scale
 * and must not inherit any of this.
 */
/*
 * Left-aligned rather than centred. The design never centres a text block —
 * headline, eyebrow and lead all start at the container's left edge and let the
 * space fall to the right — and a centred column under a left-aligned H1 reads
 * as a mistake rather than as a choice.
 */
.fmt-prose {
	max-width: 760px;
	overflow-wrap: break-word;
	font-size: 17px;
	line-height: 1.7;
	color: var(--ink-soft);
}

/* Floated images inside the flow must not escape past the last paragraph. */
.fmt-prose::after {
	content: "";
	display: table;
	clear: both;
}

.fmt-prose > :first-child {
	margin-top: 0;
}
.fmt-prose > :last-child {
	margin-bottom: 0;
}

.fmt-prose p {
	margin: 0 0 1.35em;
}

.fmt-prose h2,
.fmt-prose h3,
.fmt-prose h4,
.fmt-prose h5,
.fmt-prose h6 {
	margin: 2em 0 .6em;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.fmt-prose h2 {
	font-size: 30px;
}
.fmt-prose h3 {
	font-size: 22px;
}
.fmt-prose h4 {
	font-size: 18px;
}
.fmt-prose h5,
.fmt-prose h6 {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.fmt-prose a {
	color: var(--red);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color .15s ease;
}
.fmt-prose a:hover {
	color: var(--red-ink);
}

.fmt-prose strong,
.fmt-prose b {
	font-weight: 600;
	color: var(--ink);
}

.fmt-prose ul,
.fmt-prose ol {
	margin: 0 0 1.35em;
	padding-left: 1.35em;
}
.fmt-prose li {
	margin-bottom: .45em;
}
.fmt-prose li > ul,
.fmt-prose li > ol {
	margin: .45em 0 0;
}
.fmt-prose ul > li::marker {
	color: var(--red);
}
.fmt-prose ol > li::marker {
	color: var(--ink-mute);
}

.fmt-prose blockquote {
	margin: 1.8em 0;
	padding: 2px 0 2px 26px;
	border-left: 2px solid var(--red);
	font-size: 20px;
	line-height: 1.5;
	font-style: italic;
	color: var(--ink);
}
.fmt-prose blockquote > :last-child {
	margin-bottom: 0;
}
.fmt-prose blockquote cite {
	display: block;
	margin-top: .8em;
	font-size: 13px;
	font-style: normal;
	color: var(--ink-mute);
}

.fmt-prose hr {
	margin: 2.6em 0;
	border: 0;
	border-top: 1px solid var(--line);
}

.fmt-prose img {
	height: auto;
	border-radius: var(--radius);
}

/* Anything embedded — an oEmbed iframe, a self-hosted video, a map — is sized
   by its own attributes and would otherwise reach past the reading column. */
.fmt-prose iframe,
.fmt-prose video,
.fmt-prose embed,
.fmt-prose object {
	max-width: 100%;
	border-radius: var(--radius);
}

.fmt-prose figure {
	margin: 1.8em 0;
}
.fmt-prose figcaption,
.fmt-prose .wp-caption-text {
	margin: 0;
	padding-top: 10px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--ink-mute);
}

.fmt-prose code,
.fmt-prose kbd {
	padding: 2px 6px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .88em;
	color: var(--ink);
	background: var(--bg-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}

.fmt-prose pre {
	overflow-x: auto;
	margin: 1.8em 0;
	padding: 18px 20px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--bg-2);
	background: var(--ink);
	border-radius: var(--radius);
}
.fmt-prose pre code {
	padding: 0;
	font-size: inherit;
	color: inherit;
	background: none;
	border: 0;
}

/*
 * Stays display:table. `display:block` with overflow-x looks like the way to
 * make a wide table scroll, but it drops the element out of the table
 * formatting context: the rows then build an anonymous table inside the block,
 * and that one shrinks to its content — a three-column table ends up a third of
 * the column wide. Squeezing the columns is the better failure.
 */
.fmt-prose table {
	width: 100%;
	max-width: 100%;
	margin: 1.8em 0;
	border-collapse: collapse;
	font-size: 15px;
}
.fmt-prose th,
.fmt-prose td {
	padding: 12px 14px;
	text-align: left;
	border-bottom: 1px solid var(--line);
}
.fmt-prose th {
	font-size: 11px;
	font-weight: 600;
	color: var(--ink);
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	border-bottom-color: var(--line-2);
}
.fmt-prose tbody tr:last-child td {
	border-bottom: 0;
}

.fmt-prose dt {
	margin-top: 1.2em;
	font-weight: 600;
	color: var(--ink);
}
.fmt-prose dd {
	margin: .3em 0 0;
}

/* Classic editor alignment classes. */
.fmt-prose .alignleft {
	float: left;
	margin: .3em 1.6em 1.2em 0;
}
.fmt-prose .alignright {
	float: right;
	margin: .3em 0 1.2em 1.6em;
}
.fmt-prose .aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
}
.fmt-prose .wp-caption {
	max-width: 100%;
}

/*
 * Block editor wide alignments. The reading column is narrower than the
 * container, so "wide" and "full" are expressed as a negative pull rather than
 * as a width — a width alone would only stretch to the column's own edge.
 */
/*
 * The reading column starts at the container's left edge, so a wide block has
 * nothing to pull into on that side — it grows to the right instead, up to the
 * container's own width.
 */
.fmt-prose .alignwide {
	width: auto;
	max-width: none;
	margin-right: -120px;
	margin-left: 0;
}
.fmt-prose .alignfull {
	width: auto;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
	max-width: 100vw;
}

/* =========================================================
   Pagination
   ========================================================= */

/*
 * Same control as the house grid's pager (modules/fmt-house-grid) — status on
 * the left, arrows and numbers on the right. That one builds its buttons in
 * JavaScript; this one styles what paginate_links() emits, which is why the
 * selectors hang off core's .page-numbers.
 */
.fmt-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--line);
}

.fmt-pagination__status {
	margin: 0;
	font-size: 13px;
	color: var(--ink-soft);
}
.fmt-pagination__status strong {
	font-weight: 500;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.fmt-pagination__nav {
	margin-left: auto;
}

/*
 * paginate_links( 'type' => 'list' ) puts .page-numbers on the <ul> as well as
 * on every link inside it, so the item rules are scoped through the <li>.
 */
.fmt-pagination ul.page-numbers {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fmt-pagination li > .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 6px;
	font-variant-numeric: tabular-nums;
	transition: all .15s ease;
}
.fmt-pagination li > a.page-numbers:hover {
	border-color: var(--ink-2);
}
.fmt-pagination li > .page-numbers.current {
	color: #fff;
	background: var(--ink-2);
	border-color: var(--ink-2);
}
.fmt-pagination li > .page-numbers.dots {
	min-width: 22px;
	padding: 0;
	color: var(--ink-mute);
	background: none;
	border-color: transparent;
}
.fmt-pagination li > .page-numbers.prev,
.fmt-pagination li > .page-numbers.next {
	padding: 0;
}

/* =========================================================
   Next / previous post
   ========================================================= */

.fmt-post-nav {
	margin-top: 72px;
	padding-top: 40px;
	border-top: 1px solid var(--line);
}

.fmt-post-nav__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.fmt-post-nav__item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 22px;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

/* Columns are assigned rather than flowed, so the newer post keeps the right
   half even when there is no older one to fill the left. */
.fmt-post-nav__item--prev {
	grid-column: 1;
}
.fmt-post-nav__item--next {
	grid-column: 2;
	text-align: right;
}

.fmt-post-nav__dir {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: var(--ink-mute);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.fmt-post-nav__item--next .fmt-post-nav__dir {
	justify-content: flex-end;
}

.fmt-post-nav__title {
	overflow-wrap: break-word;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
	text-wrap: pretty;
}

/* =========================================================
   Empty state
   ========================================================= */

.fmt-noresults {
	padding: 64px 24px 68px;
	text-align: center;
	background: var(--paper);
	border: 1px dashed var(--line-2);
	border-radius: var(--radius-lg);
}

.fmt-noresults__title {
	margin: 0 0 12px;
	font-size: 26px;
	font-weight: 500;
	letter-spacing: -0.02em;
}

.fmt-noresults__text {
	max-width: 460px;
	margin: 0 auto;
	color: var(--ink-soft);
}

.fmt-noresults__actions {
	display: flex;
	justify-content: center;
	margin: 24px 0 0;
}

/* =========================================================
   404
   ========================================================= */

/* auto-fit rather than a fixed count: the tiles are built from the post type
   archives that actually exist, so how many there are is not fixed. */
.fmt-404__links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
}

.fmt-404__card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px 26px 22px;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.fmt-404__card-icon {
	margin-bottom: 8px;
	color: var(--red);
}

.fmt-404__card-label {
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.fmt-404__card-text {
	font-size: 13px;
	color: var(--ink-soft);
}

.fmt-404__card-go {
	margin-top: 14px;
	color: var(--ink-mute);
	transition: color .15s ease;
}
.fmt-404__card:hover .fmt-404__card-go {
	color: var(--red);
}

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

.fmt-comments {
	margin-top: 72px;
	padding-top: 56px;
	border-top: 1px solid var(--line);
}

/* Narrower than .wrap — a thread is reading matter, like the prose above it.
   Two classes so the cap outranks .wrap regardless of load order. */
.fmt-comments .fmt-comments__inner {
	max-width: 840px;
}

.fmt-comments__title {
	margin: 0 0 24px;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -0.02em;
}

.fmt-comments__list,
.fmt-comments__list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}
.fmt-comments__list > li {
	margin-bottom: 16px;
}
.fmt-comments__list .children {
	margin: 16px 0 0 20px;
	padding-left: 20px;
	border-left: 1px solid var(--line);
}
.fmt-comments__list .children > li {
	margin-bottom: 16px;
}
.fmt-comments__list .children > li:last-child {
	margin-bottom: 0;
}

.fmt-comments .comment-body {
	padding: 20px 24px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.fmt-comments .comment-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.fmt-comments .comment-author {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--ink);
}
.fmt-comments .comment-author .avatar {
	border-radius: 50%;
}
.fmt-comments .comment-author .fn {
	font-style: normal;
	font-weight: 500;
}
/* The name is a link when the commenter left a URL, and style.css paints every
   bare link red — which read as a call to action rather than as a byline. */
.fmt-comments .comment-author a {
	color: inherit;
}
.fmt-comments .comment-author a:hover {
	color: var(--red);
}
/* "sagt:" — a leftover of the old comment markup, and noise next to a name. */
.fmt-comments .comment-author .says {
	display: none;
}

.fmt-comments .comment-metadata {
	margin-left: auto;
	font-size: 12px;
	color: var(--ink-mute);
}
.fmt-comments .comment-metadata a {
	color: inherit;
}
.fmt-comments .comment-metadata a:hover {
	color: var(--red);
}

.fmt-comments .comment-content {
	overflow-wrap: break-word;
	font-size: 15px;
	color: var(--ink-soft);
}
.fmt-comments .comment-content > :last-child {
	margin-bottom: 0;
}
.fmt-comments .comment-content a {
	color: var(--red);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fmt-comments .comment-awaiting-moderation {
	margin: 0 0 10px;
	font-size: 12px;
	color: var(--red);
}

.fmt-comments .reply {
	margin-top: 14px;
}
.fmt-comments .comment-reply-link {
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
}
.fmt-comments .comment-reply-link:hover {
	color: var(--red);
}

.fmt-comments__nav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 24px;
	font-size: 13px;
}
.fmt-comments__nav a {
	color: var(--ink);
}
.fmt-comments__nav a:hover {
	color: var(--red);
}

.fmt-comments__closed {
	margin: 24px 0 0;
	font-size: 13px;
	color: var(--ink-mute);
}

/* ---- Comment form ---------------------------------------------------- */

.fmt-comments .comment-respond {
	margin-top: 40px;
	padding: 28px 30px 30px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.fmt-comments .comment-reply-title {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.02em;
}
.fmt-comments .comment-reply-title small {
	margin-left: 10px;
	font-size: 13px;
	font-weight: 400;
}
.fmt-comments .comment-reply-title small a {
	color: var(--red);
}

.fmt-comments .comment-form {
	display: grid;
	gap: 16px;
	margin-top: 18px;
}
.fmt-comments .comment-form p {
	margin: 0;
}

.fmt-comments .comment-notes,
.fmt-comments .form-allowed-tags {
	font-size: 13px;
	color: var(--ink-mute);
}

.fmt-comments .comment-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	color: var(--ink-mute);
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* Field sizes match the CF7 text field in cf7.css. */
.fmt-comments .comment-form input[type="text"],
.fmt-comments .comment-form input[type="email"],
.fmt-comments .comment-form input[type="url"],
.fmt-comments .comment-form textarea {
	width: 100%;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.45;
	color: var(--ink);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	outline: none;
	transition: border-color .15s ease;
}
.fmt-comments .comment-form input[type="text"]:focus,
.fmt-comments .comment-form input[type="email"]:focus,
.fmt-comments .comment-form input[type="url"]:focus,
.fmt-comments .comment-form textarea:focus {
	border-color: var(--ink-2);
}
.fmt-comments .comment-form textarea {
	min-height: 120px;
	resize: vertical;
}
.fmt-comments .comment-form ::placeholder {
	color: var(--ink-mute);
}

/* The consent checkbox is a row, not a stacked field. */
.fmt-comments .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 9px;
}
.fmt-comments .comment-form-cookies-consent input {
	margin: 2px 0 0;
	accent-color: var(--red);
}
.fmt-comments .comment-form-cookies-consent label {
	margin: 0;
	font-size: 13px;
	color: var(--ink-soft);
	letter-spacing: normal;
	text-transform: none;
}

.fmt-comments .form-submit {
	margin: 0;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1100px) {
	.fmt-main {
		padding-bottom: 72px;
	}

	.fmt-page-head {
		padding: 56px 0 32px;
	}

	.fmt-posts {
		grid-template-columns: repeat(2, 1fr);
	}

	/* The reading column is now close to the container width, so the opening
	   image has nothing left to be wider than. */
	.fmt-entry__media {
		max-width: none;
	}

	/* No room left to grow into: the reading column now fills the container. */
	.fmt-prose .alignwide {
		margin-right: 0;
	}
}

@media (max-width: 900px) {
	.fmt-post-nav__inner {
		grid-template-columns: 1fr;
	}
	.fmt-post-nav__item--prev,
	.fmt-post-nav__item--next {
		grid-column: 1;
	}
	.fmt-post-nav__item--next {
		text-align: left;
	}
	.fmt-post-nav__item--next .fmt-post-nav__dir {
		justify-content: flex-start;
		/* The arrow led the row when it pointed at the right edge; with the card
		   left-aligned the label reads first again. */
		flex-direction: row-reverse;
	}

	.fmt-comments .comment-respond {
		padding: 24px 22px 26px;
	}
}

@media (max-width: 680px) {
	.fmt-page-head {
		padding: 40px 0 26px;
	}

	.fmt-page-head__lead {
		margin-top: 16px;
		font-size: 15px;
	}

	.fmt-posts,
	.fmt-404__links {
		grid-template-columns: 1fr;
	}

	/*
	 * Field first, arrow second: at this width the submit label is what pushes
	 * the input below a usable size. Hidden the screen-reader way rather than
	 * with display:none — the arrow beside it is aria-hidden, so dropping the
	 * label from the accessibility tree would leave the button unnamed.
	 */
	.fmt-searchform__field {
		padding-left: 14px;
	}
	.fmt-searchform__submit span {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		border: 0;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.fmt-prose {
		font-size: 16px;
	}
	.fmt-prose h2 {
		font-size: 25px;
	}
	.fmt-prose h3 {
		font-size: 20px;
	}
	.fmt-prose blockquote {
		padding-left: 18px;
		font-size: 18px;
	}

	.fmt-pagination {
		justify-content: flex-start;
	}
	.fmt-pagination__nav {
		margin-left: 0;
	}

	.fmt-comments__list .children {
		margin-left: 0;
		padding-left: 14px;
	}

	.fmt-comments .comment-body {
		padding: 18px 18px;
	}

	.fmt-comments .comment-metadata {
		margin-left: 0;
	}

	.fmt-noresults {
		padding: 44px 20px 48px;
	}
	.fmt-noresults__title {
		font-size: 22px;
	}
}