@charset "UTF-8";
/**
 * Genie Theme — the blog: lists of posts and a single post
 * (template-parts/blog-*.php, Genie_Blog). Colors and fonts come from Site
 * Design and Site fonts; headings keep the site's heading color.
 * Flexbox only; every value is a token.
 *
 * Desktop, Tablet and Mobile (Genie_Devices: 1025px and wider, 768–1024px,
 * 767px and narrower) each have their own choices, as classes ending -d, -t
 * and -m and custom properties; "Screen sizes" at the end lays out each.
 */

.genie-blog {
	--genie-blog-gap: 1.75rem;
	--genie-blog-radius: 0.75rem;
	--genie-blog-line: var(--genie-border);
	--genie-blog-soft: color-mix(in srgb, var(--genie-border) 35%, var(--genie-surface));
	--genie-blog-ink: var(--genie-heading, var(--genie-text));
	--genie-blog-shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
	--genie-blog-shadow-hover: 0 12px 24px rgba(16, 24, 40, 0.12);
	--genie-blog-overlay: rgba(6, 22, 40, 0.58);
	--genie-blog-on-photo: #fff;
	--genie-blog-side: 20rem;
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* ── Header of a list of posts ── */
.genie-blog-hero {
	display: flex;
	justify-content: center;
	padding: 4.5rem var(--genie-gutter);
	text-align: center;
}

.genie-blog-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	max-width: 48rem;
}

.genie-blog-hero__title {
	margin: 0;
	font-size: var(--genie-h1-size, clamp(2rem, 1.5rem + 2vw, 2.75rem));
	line-height: var(--genie-h1-lh, 1.15);
}

.genie-blog-hero__intro {
	margin: 0;
	font-size: 1.0625rem;
}

.genie-blog-hero .mlsg-gb-breadcrumbs {
	justify-content: center;
}

/* ── Main column and sidebar ── */
.genie-blog__wrap {
	display: flex;
	align-items: flex-start;
	gap: 2.5rem;
	width: 100%;
	max-width: var(--genie-width);
	margin: 0 auto;
	padding: var(--genie-section, 3rem) var(--genie-gutter);
}

.genie-blog__main {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 2rem;
	min-width: 0;
}

.genie-blog__side {
	position: sticky;
	top: 1.5rem;
	display: flex;
	flex: 0 0 var(--genie-blog-side);
	flex-direction: column;
	gap: 1.5rem;
	min-width: 0;
}

/* ── Category buttons ── */
.genie-blog-filter,
.genie-post__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}

.genie-blog-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.875rem;
	border: 1px solid var(--genie-blog-line);
	border-radius: 999px;
	background: var(--genie-surface);
	color: var(--genie-blog-ink);
	font-size: 0.875rem;
	text-decoration: none;
	line-height: 1.4;
}

.genie-blog-chip:hover,
.genie-blog-chip:focus-visible {
	border-color: var(--genie-accent);
	color: var(--genie-accent);
}

.genie-blog-chip[aria-current="page"] {
	border-color: var(--genie-blog-ink);
	background: var(--genie-blog-ink);
	color: var(--genie-surface);
}

/* ── Badge, meta, avatar ── */
.genie-blog-badge {
	display: inline-flex;
	align-self: flex-start;
	padding: 0.25rem 0.625rem;
	border-radius: 0.375rem;
	background: var(--genie-accent);
	color: var(--genie-surface);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-decoration: none;
	text-transform: uppercase;
}

.genie-blog-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem 0.625rem;
	margin: 0;
	color: var(--genie-muted);
	font-size: 0.8125rem;
}

.genie-blog-meta__dot {
	width: 0.1875rem;
	height: 0.1875rem;
	border-radius: 50%;
	background: currentColor;
}

.genie-blog-avatar {
	display: block;
	flex: 0 0 auto;
	border-radius: 50%;
}

/* ── Cards ── */
.genie-blog--list {
	--genie-blog-cols: var(--genie-blog-cols-d, 2);
}

.genie-blog-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--genie-blog-gap);
}

.genie-blog-card {
	position: relative;
	display: flex;
	flex: 0 1 calc((100% - (var(--genie-blog-cols, 2) - 1) * var(--genie-blog-gap)) / var(--genie-blog-cols, 2));
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--genie-blog-line);
	border-radius: var(--genie-blog-radius);
	background: var(--genie-surface);
	box-shadow: var(--genie-blog-shadow);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.genie-blog-card:hover {
	box-shadow: var(--genie-blog-shadow-hover);
	transform: translateY(-3px);
}

.genie-blog-card:has(.genie-blog-card__link:focus-visible) {
	outline: 3px solid var(--genie-accent);
	outline-offset: 2px;
}

.genie-blog-card__media {
	position: relative;
	display: flex;
	aspect-ratio: 16 / 10;
	background: var(--genie-blog-soft);
	overflow: hidden;
}

.genie-blog-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.genie-blog-card:hover .genie-blog-card__img {
	transform: scale(1.04);
}

.genie-blog-card__badge {
	position: absolute;
	top: 0.875rem;
	left: 0.875rem;
}

.genie-blog-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.625rem;
	padding: 1.375rem 1.375rem 1.25rem;
}

.genie-blog-card__title {
	margin: 0;
	font-size: var(--genie-h3-size, 1.25rem);
	line-height: var(--genie-h3-lh, 1.3);
}

.genie-blog-card__link {
	color: inherit;
	text-decoration: none;
}

/* The title's link covers the card. */
.genie-blog-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.genie-blog-card__link:focus-visible {
	outline: none;
}

.genie-blog-card__excerpt {
	margin: 0;
	font-size: 0.9375rem;
}

.genie-blog-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: auto;
	color: var(--genie-accent);
	font-size: 0.875rem;
	font-weight: 600;
}

.genie-blog-card__author {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: auto 0 0;
	padding-top: 0.875rem;
	border-top: 1px solid var(--genie-blog-line);
	color: var(--genie-muted);
	font-size: 0.8125rem;
}

.genie-blog-card__more + .genie-blog-card__author {
	margin-top: 0.5rem;
}

/* The newest post, large: picture beside the words. */
.genie-blog-card--feature {
	flex: 0 0 auto;
	flex-direction: row;
}

.genie-blog-card--feature .genie-blog-card__media {
	flex: 1 1 55%;
	aspect-ratio: auto;
	min-height: 20rem;
}

.genie-blog-card--feature .genie-blog-card__body {
	flex: 1 1 45%;
	justify-content: center;
	padding: 2rem;
}

.genie-blog-card--feature .genie-blog-card__title {
	font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
}

/* Related posts: three across. */
.genie-blog-grid.genie-blog-grid--related {
	--genie-blog-cols: 3;
}

.genie-blog-grid--related .genie-blog-card__title {
	font-size: 1.0625rem;
}

/* ── Page numbers ── */
.genie-blog-pages .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.genie-blog-pages .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.625rem;
	height: 2.625rem;
	padding: 0 0.75rem;
	border: 1px solid var(--genie-blog-line);
	border-radius: 0.625rem;
	color: var(--genie-blog-ink);
	font-weight: 500;
	text-decoration: none;
}

.genie-blog-pages a.page-numbers:hover,
.genie-blog-pages a.page-numbers:focus-visible {
	border-color: var(--genie-accent);
	color: var(--genie-accent);
}

.genie-blog-pages .page-numbers.current {
	border-color: var(--genie-blog-ink);
	background: var(--genie-blog-ink);
	color: var(--genie-surface);
}

.genie-blog__empty {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* ── A post ── */
.genie-post__head {
	display: flex;
	justify-content: center;
	padding: 3.5rem var(--genie-gutter) 0;
}

.genie-post__head-inner {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
	width: 100%;
	max-width: var(--genie-width);
}

.genie-post__head .mlsg-gb-breadcrumbs {
	color: var(--genie-muted);
}

.genie-post__title {
	margin: 0;
	max-width: 54rem;
	font-size: var(--genie-h1-size, clamp(2rem, 1.4rem + 2.4vw, 2.875rem));
	line-height: var(--genie-h1-lh, 1.15);
}

.genie-post__meta {
	font-size: 0.9375rem;
}

.genie-post__author {
	color: var(--genie-blog-ink);
	font-weight: 600;
	text-decoration: none;
}

.genie-post__image {
	margin: 0.5rem 0 0;
}

.genie-post__img {
	display: block;
	width: 100%;
	max-height: 34rem;
	border-radius: 1rem;
	object-fit: cover;
}

/* The post itself: a comfortable line length. */
.genie-post__content,
.genie-post__toc,
.genie-post__share,
.genie-post__bio,
.genie-post__nav,
.genie-post__tags {
	width: 100%;
	max-width: 46rem;
}

.genie-post__content {
	font-size: var(--genie-body-size, 1.0625rem);
	line-height: var(--genie-body-lh, 1.8);
}

.genie-post__content > :first-child {
	margin-top: 0;
}

.genie-post__content h2 {
	margin: 2em 0 0.5em;
	font-size: var(--genie-h2-size, 1.625rem);
	line-height: var(--genie-h2-lh, 1.3);
	scroll-margin-top: 6rem;
}

.genie-post__content h3 {
	margin: 1.6em 0 0.4em;
	font-size: var(--genie-h3-size, 1.25rem);
	line-height: var(--genie-h3-lh, 1.35);
}

.genie-post__content p {
	margin: 0 0 1.2em;
}

.genie-post__content img {
	border-radius: 0.75rem;
}

.genie-post__content blockquote {
	margin: 1.6em 0;
	padding: 1.125rem 1.5rem;
	border-left: 4px solid var(--genie-accent);
	border-radius: 0 0.75rem 0.75rem 0;
	background: var(--genie-blog-soft);
	color: var(--genie-blog-ink);
	font-size: 1.125rem;
}

.genie-post__content blockquote > :last-child {
	margin-bottom: 0;
}

.genie-post__toc {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.125rem 1.375rem;
	border: 1px solid var(--genie-blog-line);
	border-radius: var(--genie-blog-radius);
	background: var(--genie-blog-soft);
}

.genie-post__toc-title {
	margin: 0;
	font-size: 1rem;
}

.genie-post__toc ol {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
	padding-left: 1.25rem;
}

.genie-post__toc a {
	color: var(--genie-blog-ink);
	text-decoration: none;
}

.genie-post__toc a:hover,
.genie-post__toc a:focus-visible {
	color: var(--genie-accent);
	text-decoration: underline;
}

.genie-post__share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem;
	padding: 1.125rem 0;
	border-top: 1px solid var(--genie-blog-line);
	border-bottom: 1px solid var(--genie-blog-line);
}

.genie-post__share-label {
	margin-right: 0.25rem;
	color: var(--genie-blog-ink);
	font-weight: 600;
}

.genie-post__share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid var(--genie-blog-line);
	border-radius: 50%;
	background: var(--genie-surface);
	color: var(--genie-blog-ink);
	font-size: 0.9375rem;
	text-decoration: none;
	cursor: pointer;
}

.genie-post__share-btn:hover,
.genie-post__share-btn:focus-visible {
	border-color: var(--genie-accent);
	background: var(--genie-accent);
	color: var(--genie-surface);
}

.genie-post__share-status {
	color: var(--genie-muted);
	font-size: 0.875rem;
}

.genie-post__bio {
	display: flex;
	align-items: flex-start;
	gap: 1.125rem;
	padding: 1.5rem;
	border: 1px solid var(--genie-blog-line);
	border-radius: var(--genie-blog-radius);
	background: var(--genie-surface);
	box-shadow: var(--genie-blog-shadow);
}

.genie-post__bio-text {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	min-width: 0;
}

.genie-post__bio-name {
	margin: 0;
	font-size: 1.125rem;
}

.genie-post__bio-text p {
	margin: 0;
	font-size: 0.9375rem;
}

.genie-post__bio-link {
	align-self: flex-start;
	font-weight: 600;
	font-size: 0.9375rem;
}

.genie-post__nav {
	display: flex;
	gap: 1rem;
}

.genie-post__nav-link {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
	padding: 1rem 1.125rem;
	border: 1px solid var(--genie-blog-line);
	border-radius: var(--genie-blog-radius);
	text-decoration: none;
}

.genie-post__nav-link:hover,
.genie-post__nav-link:focus-visible {
	border-color: var(--genie-accent);
}

.genie-post__nav-link--next {
	align-items: flex-end;
	margin-left: auto;
	text-align: right;
}

.genie-post__nav-dir {
	color: var(--genie-muted);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.genie-post__nav-title {
	color: var(--genie-blog-ink);
	font-weight: 500;
	font-size: 0.9375rem;
}

.genie-post__related {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
}

.genie-post__related-title {
	margin: 0;
	font-size: 1.5rem;
}

/* ── Comments ── */
.genie-blog .genie-comments {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	width: 100%;
	max-width: 46rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--genie-blog-line);
}

.genie-blog .genie-comments__title,
.genie-blog .comment-reply-title {
	margin: 0;
	font-size: 1.375rem;
}

.genie-blog .genie-comments__list,
.genie-blog .genie-comments__list .children {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.genie-blog .genie-comments__list .children {
	padding: 1rem 0 0 1.5rem;
}

.genie-blog .comment-body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.125rem 1.25rem;
	border: 1px solid var(--genie-blog-line);
	border-radius: var(--genie-blog-radius);
}

.genie-blog .comment-author {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--genie-blog-ink);
	font-weight: 600;
}

.genie-blog .comment-author .avatar {
	border-radius: 50%;
}

.genie-blog .comment-metadata,
.genie-blog .comment-notes,
.genie-blog .logged-in-as {
	margin: 0;
	color: var(--genie-muted);
	font-size: 0.8125rem;
}

.genie-blog .comment-metadata a {
	color: inherit;
}

.genie-blog .comment-content p {
	margin: 0 0 0.75em;
}

.genie-blog .comment-form {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.genie-blog .comment-form > p {
	display: flex;
	flex: 1 1 100%;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0;
}

.genie-blog .comment-form :is(.comment-form-author, .comment-form-email, .comment-form-url) {
	flex: 1 1 12rem;
}

.genie-blog .comment-form label {
	color: var(--genie-blog-ink);
	font-size: 0.9375rem;
	font-weight: 500;
}

.genie-blog .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
	width: 100%;
	min-height: var(--genie-field-h, auto);
	padding: 0.6875rem 0.875rem;
	border-style: solid;
	border-width: var(--genie-field-bwt, 1px) var(--genie-field-bws, 1px) var(--genie-field-bwb, 1px);
	border-color: var(--genie-field-bd, var(--genie-blog-line));
	border-radius: var(--genie-field-r, 0.625rem);
	background: var(--genie-field-bg, var(--genie-surface));
	color: var(--genie-text);
	font: inherit;
	font-size: var(--genie-field-size, 1rem);
}

.genie-blog .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea):focus {
	border-color: var(--genie-field-focus, var(--genie-accent));
	outline: 2px solid color-mix(in srgb, var(--genie-field-focus, var(--genie-accent)) 30%, transparent);
	outline-offset: 0;
}

.genie-blog .comment-form textarea {
	min-height: 8rem;
	resize: vertical;
}

.genie-blog .comment-form .comment-form-cookies-consent {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.875rem;
}

.genie-blog .comment-form .comment-form-cookies-consent label {
	font-weight: 400;
}

.genie-blog .comment-form .submit {
	padding: var(--genie-btn-py, 0.75rem) var(--genie-btn-px, 1.5rem);
	border: 0;
	border-radius: var(--genie-btn-r, 0.625rem);
	box-shadow: inset 0 0 0 2px var(--genie-btn1-bd, transparent);
	background: var(--genie-btn1-bg, var(--genie-accent));
	color: var(--genie-btn1-fg, var(--genie-surface));
	font: inherit;
	font-size: var(--genie-btn-size, 1em);
	font-weight: var(--genie-btn-w, 600);
	text-transform: var(--genie-btn-tt, none);
	cursor: pointer;
}

.genie-blog .comment-form .submit:is(:hover, :focus-visible) {
	box-shadow: inset 0 0 0 2px var(--genie-btn1-hbd, transparent);
	background: var(--genie-btn1-hbg, var(--genie-blog-ink));
	color: var(--genie-btn1-hfg, var(--genie-surface));
}

.genie-blog .required {
	color: var(--genie-accent);
}

@media (prefers-reduced-motion: reduce) {
	.genie-blog-card,
	.genie-blog-card__img {
		transition: none;
	}

	.genie-blog-card:hover,
	.genie-blog-card:hover .genie-blog-card__img {
		transform: none;
	}
}

/* ── Screen sizes ── */
/* Desktop */
@media (min-width: 1025px) {
	/* The header: photo banner or plain. */
	.genie-blog-hero-plain-d {
		background: var(--genie-blog-soft);
		padding: 3rem var(--genie-gutter);
	}

	.genie-blog-hero-photo-d {
		background: linear-gradient(var(--genie-blog-overlay), var(--genie-blog-overlay)), var(--genie-blog-hero-img) center / cover no-repeat;
		color: var(--genie-blog-on-photo);
	}

	.genie-blog-hero-photo-d :is(.genie-blog-hero__title, .mlsg-gb-breadcrumbs, .mlsg-gb-breadcrumbs a, .mlsg-gb-breadcrumbs__current, .mlsg-gb-breadcrumbs__sep) {
		color: var(--genie-blog-on-photo);
	}

	/* Columns, and the list layout: one post a row, picture beside the words. */
	.genie-blog--list {
		--genie-blog-cols: var(--genie-blog-cols-d, 2);
	}

	.genie-blog-grid--list-d {
		flex-direction: column;
	}

	.genie-blog-grid--list-d .genie-blog-card {
		flex: 0 0 auto;
		flex-direction: row;
	}

	.genie-blog-grid--list-d .genie-blog-card__media {
		flex: 0 0 38%;
		aspect-ratio: auto;
		min-height: 13rem;
	}

	/* A post's header: the title over its picture. */
	.genie-post__head-over-d {
		padding: 6rem var(--genie-gutter) 3.5rem;
		background: linear-gradient(var(--genie-blog-overlay), var(--genie-blog-overlay)), var(--genie-blog-hero-img) center / cover no-repeat;
		color: var(--genie-blog-on-photo);
		text-align: center;
	}

	.genie-post__head-over-d .genie-post__head-inner {
		align-items: center;
	}

	.genie-post__head-over-d :is(.genie-post__title, .genie-post__author, .genie-blog-meta, .mlsg-gb-breadcrumbs, .mlsg-gb-breadcrumbs a, .mlsg-gb-breadcrumbs__current, .mlsg-gb-breadcrumbs__sep) {
		color: var(--genie-blog-on-photo);
	}

	.genie-post__head-over-d .genie-post__cat {
		align-self: center;
	}

	.genie-post__head-over-d .mlsg-gb-breadcrumbs {
		justify-content: center;
	}

	/* No sidebar: a post's reading column sits in the middle. */
	.genie-blog--post.genie-blog--side-none-d .genie-blog__main,
	.genie-blog--post.genie-blog--side-below-d .genie-blog__main {
		align-items: center;
	}

	/* The sidebar: right (as drawn), left, or below. */
	.genie-blog--side-left-d .genie-blog__wrap {
		flex-direction: row-reverse;
	}

	.genie-blog--side-below-d .genie-blog__wrap {
		flex-direction: column;
		align-items: stretch;
	}

	.genie-blog--side-below-d .genie-blog__side {
		position: static;
		flex-basis: auto;
	}
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
	/* The header: photo banner or plain. */
	.genie-blog-hero-plain-t {
		background: var(--genie-blog-soft);
		padding: 3rem var(--genie-gutter);
	}

	.genie-blog-hero-photo-t {
		background: linear-gradient(var(--genie-blog-overlay), var(--genie-blog-overlay)), var(--genie-blog-hero-img) center / cover no-repeat;
		color: var(--genie-blog-on-photo);
	}

	.genie-blog-hero-photo-t :is(.genie-blog-hero__title, .mlsg-gb-breadcrumbs, .mlsg-gb-breadcrumbs a, .mlsg-gb-breadcrumbs__current, .mlsg-gb-breadcrumbs__sep) {
		color: var(--genie-blog-on-photo);
	}

	/* Columns, and the list layout: one post a row, picture beside the words. */
	.genie-blog--list {
		--genie-blog-cols: var(--genie-blog-cols-t, 2);
	}

	.genie-blog-grid--list-t {
		flex-direction: column;
	}

	.genie-blog-grid--list-t .genie-blog-card {
		flex: 0 0 auto;
		flex-direction: row;
	}

	.genie-blog-grid--list-t .genie-blog-card__media {
		flex: 0 0 38%;
		aspect-ratio: auto;
		min-height: 13rem;
	}

	/* A post's header: the title over its picture. */
	.genie-post__head-over-t {
		padding: 6rem var(--genie-gutter) 3.5rem;
		background: linear-gradient(var(--genie-blog-overlay), var(--genie-blog-overlay)), var(--genie-blog-hero-img) center / cover no-repeat;
		color: var(--genie-blog-on-photo);
		text-align: center;
	}

	.genie-post__head-over-t .genie-post__head-inner {
		align-items: center;
	}

	.genie-post__head-over-t :is(.genie-post__title, .genie-post__author, .genie-blog-meta, .mlsg-gb-breadcrumbs, .mlsg-gb-breadcrumbs a, .mlsg-gb-breadcrumbs__current, .mlsg-gb-breadcrumbs__sep) {
		color: var(--genie-blog-on-photo);
	}

	.genie-post__head-over-t .genie-post__cat {
		align-self: center;
	}

	.genie-post__head-over-t .mlsg-gb-breadcrumbs {
		justify-content: center;
	}

	/* No sidebar: a post's reading column sits in the middle. */
	.genie-blog--post.genie-blog--side-none-t .genie-blog__main,
	.genie-blog--post.genie-blog--side-below-t .genie-blog__main {
		align-items: center;
	}

	/* The sidebar: right (as drawn), left, or below. */
	.genie-blog--side-left-t .genie-blog__wrap {
		flex-direction: row-reverse;
	}

	.genie-blog--side-below-t .genie-blog__wrap {
		flex-direction: column;
		align-items: stretch;
	}

	.genie-blog--side-below-t .genie-blog__side {
		position: static;
		flex-basis: auto;
	}

	.genie-blog {
		--genie-blog-side: 16rem;
	}

	.genie-blog__wrap {
		gap: 1.75rem;
	}

	.genie-blog-grid.genie-blog-grid--related {
		--genie-blog-cols: 2;
	}
}

/* Mobile */
@media (max-width: 767px) {
	/* The header: photo banner or plain. */
	.genie-blog-hero-plain-m {
		background: var(--genie-blog-soft);
		padding: 3rem var(--genie-gutter);
	}

	.genie-blog-hero-photo-m {
		background: linear-gradient(var(--genie-blog-overlay), var(--genie-blog-overlay)), var(--genie-blog-hero-img) center / cover no-repeat;
		color: var(--genie-blog-on-photo);
	}

	.genie-blog-hero-photo-m :is(.genie-blog-hero__title, .mlsg-gb-breadcrumbs, .mlsg-gb-breadcrumbs a, .mlsg-gb-breadcrumbs__current, .mlsg-gb-breadcrumbs__sep) {
		color: var(--genie-blog-on-photo);
	}

	/* Columns, and the list layout: one post a row, picture beside the words. */
	.genie-blog--list {
		--genie-blog-cols: var(--genie-blog-cols-m, 2);
	}

	.genie-blog-grid--list-m {
		flex-direction: column;
	}

	.genie-blog-grid--list-m .genie-blog-card {
		flex: 0 0 auto;
		flex-direction: row;
	}

	.genie-blog-grid--list-m .genie-blog-card__media {
		flex: 0 0 38%;
		aspect-ratio: auto;
		min-height: 13rem;
	}

	/* A post's header: the title over its picture. */
	.genie-post__head-over-m {
		padding: 6rem var(--genie-gutter) 3.5rem;
		background: linear-gradient(var(--genie-blog-overlay), var(--genie-blog-overlay)), var(--genie-blog-hero-img) center / cover no-repeat;
		color: var(--genie-blog-on-photo);
		text-align: center;
	}

	.genie-post__head-over-m .genie-post__head-inner {
		align-items: center;
	}

	.genie-post__head-over-m :is(.genie-post__title, .genie-post__author, .genie-blog-meta, .mlsg-gb-breadcrumbs, .mlsg-gb-breadcrumbs a, .mlsg-gb-breadcrumbs__current, .mlsg-gb-breadcrumbs__sep) {
		color: var(--genie-blog-on-photo);
	}

	.genie-post__head-over-m .genie-post__cat {
		align-self: center;
	}

	.genie-post__head-over-m .mlsg-gb-breadcrumbs {
		justify-content: center;
	}

	/* No sidebar: a post's reading column sits in the middle. */
	.genie-blog--post.genie-blog--side-none-m .genie-blog__main,
	.genie-blog--post.genie-blog--side-below-m .genie-blog__main {
		align-items: center;
	}

	/* No room beside: the sidebar sits below. */
	.genie-blog__wrap {
		flex-direction: column;
		align-items: stretch;
		padding: 2rem var(--genie-gutter);
	}

	.genie-blog__side {
		position: static;
		flex-basis: auto;
	}

	.genie-blog-grid.genie-blog-grid--related {
		--genie-blog-cols: 1;
	}

	.genie-blog-card--feature {
		flex-direction: column;
	}

	.genie-blog-card--feature .genie-blog-card__media {
		flex-basis: auto;
		aspect-ratio: 16 / 10;
		min-height: 0;
	}

	.genie-blog-card--feature .genie-blog-card__body {
		padding: 1.375rem;
	}

	.genie-blog-grid--list-m .genie-blog-card__media {
		flex-basis: 36%;
		min-height: 8rem;
	}

	.genie-blog-grid--list-m .genie-blog-card__body {
		padding: 1rem;
	}

	.genie-blog-hero-photo-m {
		padding: 3rem var(--genie-gutter);
	}

	.genie-post__head {
		padding-top: 2rem;
	}

	.genie-post__head-over-m {
		padding: 4rem var(--genie-gutter) 2.5rem;
	}

	.genie-post__bio,
	.genie-post__nav {
		flex-direction: column;
	}

	.genie-post__nav-link--next {
		align-items: flex-start;
		margin-left: 0;
		text-align: left;
	}
}