/* ==========================================================================
   Base typography - Fresh Ground type scale.

   The defining move: headings are LIGHT SERIF (Playfair 400) and body copy is
   sans (DM Sans). Bold serif appears in exactly one place, inside article
   bodies, where h2 goes to 700. Everywhere else, size carries hierarchy.
   ========================================================================== */

body {
	background-color: var(--mx-site-bg);
	color: var(--mx-text-body);
	font-family: var(--mx-font-body);
	font-size: var(--mx-body);
	line-height: var(--mx-body-lh);
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.ast-archive-title {
	color: var(--mx-text-title);
	font-family: var(--mx-font-heading);
	font-weight: var(--mx-heading-weight);
	letter-spacing: var(--mx-heading-track);
	text-wrap: balance;
}

h1 {
	font-size: var(--mx-h1);
	line-height: var(--mx-heading-lh);
	margin: 0 0 1.25rem;
}

h2 {
	font-size: var(--mx-h2);
	line-height: 1.15;
	margin: 0 0 1.25rem;
}

h3 {
	font-size: var(--mx-h3);
	line-height: 1.2;
	margin: 0 0 1.25rem;
}

h4 {
	font-size: var(--mx-h4);
	line-height: 1.25;
	margin: 1.25rem 0 .625rem;
}

h5,
h6 {
	font-size: var(--mx-body);
	line-height: 1.3;
	margin: 1.25rem 0 .625rem;
}

p,
li {
	font-size: var(--mx-body);
	line-height: var(--mx-body-lh);
}

p {
	margin: 0 0 .625rem;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .18em;
	transition: color var(--mx-motion);
}

@media (hover: hover) {
	a:hover {
		color: var(--mx-grey-01);
	}
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: none;
	box-shadow: var(--mx-focus-ring);
}

::selection {
	background: rgba(196, 162, 127, .4);
}

img {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   Typography scale utilities (Fresh Ground's .typography--* family)
   -------------------------------------------------------------------------- */

.mx-typography > *:last-child {
	margin-bottom: 0;
}

.mx-typography--xsmall,
.mx-typography--xsmall p,
.mx-typography--xsmall li {
	font-size: var(--mx-text-xsmall);
	line-height: var(--mx-text-xsmall-lh);
}

.mx-typography--small,
.mx-typography--small p,
.mx-typography--small li {
	font-size: var(--mx-text-small);
	line-height: var(--mx-text-small-lh);
}

.mx-typography--medium,
.mx-typography--medium p,
.mx-typography--medium li {
	font-size: var(--mx-text-medium);
	line-height: var(--mx-text-medium-lh);
}

.mx-typography--large,
.mx-typography--large p,
.mx-typography--large li {
	font-size: var(--mx-text-large);
	line-height: var(--mx-text-large-lh);
}

/* Light typography - used on dark bands and over image backgrounds. */
.mx-typography--light,
.mx-typography--light h1,
.mx-typography--light h2,
.mx-typography--light h3,
.mx-typography--light h4,
.mx-typography--light h5,
.mx-typography--light h6,
.mx-typography--light p,
.mx-typography--light li,
.mx-typography--light label,
.mx-typography--light a {
	color: var(--mx-text-light);
}

.mx-typography--light a:focus-visible {
	box-shadow: var(--mx-focus-ring-dark);
}

@media (hover: hover) {
	.mx-typography--light a:hover {
		color: rgba(255, 255, 255, .75);
	}
}

.mx-typography--center {
	text-align: center;
}

/* --------------------------------------------------------------------------
   Prose / article bodies - the one context where serif goes bold.
   -------------------------------------------------------------------------- */

.mx-prose p,
.mx-prose li {
	color: var(--mx-text-body);
	font-size: var(--mx-prose);
	font-weight: 400;
	line-height: var(--mx-prose-lh);
	margin-bottom: 1.5rem;
}

.mx-prose h2 {
	font-size: var(--mx-prose-h2);
	font-weight: 700;
	margin: 2.5rem 0 1.25rem;
}

.mx-prose h3 {
	font-size: var(--mx-prose-h3);
	line-height: 1.2;
	margin: 2rem 0 1.25rem;
}

.mx-prose b,
.mx-prose strong {
	color: var(--mx-text-body);
	font-weight: 700;
}

.mx-prose ul,
.mx-prose ol {
	margin: 0 0 1.5rem 1.25rem;
}

.mx-prose blockquote {
	border-left: 2px solid var(--mx-text-title);
	margin: 2rem 0;
	padding-left: 1.875rem;
}

/* --------------------------------------------------------------------------
   Decorative helpers lifted from Fresh Ground
   -------------------------------------------------------------------------- */

/* Circular numeral badge used by the 1-2-3 process blocks. */
.mx-number-icon {
	align-items: center;
	display: flex;
	gap: .625rem;
}

.mx-number-icon > span {
	align-items: center;
	background-color: var(--mx-accent);
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	flex-shrink: 0;
	font-family: var(--mx-font-body);
	font-size: 1.125rem;
	height: 2.5rem;
	justify-content: center;
	min-width: 2.5rem;
	text-align: center;
	width: 2.5rem;
}

/* Oversized decorative quote marks. */
.mx-quotes::before,
.mx-quotes::after {
	color: var(--mx-accent);
	content: '"';
	font-family: var(--mx-font-heading);
	font-size: 3.75rem;
	line-height: 0;
	opacity: .5;
	vertical-align: -.25em;
}

/* Uppercase tracked eyebrow above section titles. */
.mx-overline {
	color: var(--mx-grey-01);
	display: block;
	font-family: var(--mx-font-body);
	font-size: var(--mx-text-xsmall);
	font-weight: 700;
	letter-spacing: .1em;
	margin-bottom: .75rem;
	text-transform: uppercase;
}

.mx-typography--light .mx-overline {
	color: rgba(255, 255, 255, .8);
}

/* Screen-reader-only. */
.mx-sr-only {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}