/*
 * Text written in the block editor (inner pages, blog posts), in the design's type and colours. The compiled
 * Tailwind CSS only has the classes the Next.js design used, and its reset strips every heading and list, so the
 * editor's content gets its look here. Everything is scoped to .sst-prose.
 */

.sst-prose {
	color: rgb(12 11 10 / 0.8);
	font-size: 16px;
	line-height: 1.7;
}

.sst-prose > * + * {
	margin-top: 1.1em;
}

.sst-prose h2,
.sst-prose h3,
.sst-prose h4 {
	color: var(--color-ink, #0c0b0a);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	font-feature-settings: "case";
	text-wrap: balance;
}

.sst-prose h2 {
	margin-top: 2em;
	font-size: clamp(1.35rem, 4.2vw, 1.9rem);
}

.sst-prose h3 {
	margin-top: 1.7em;
	font-size: clamp(1.1rem, 3.2vw, 1.35rem);
}

.sst-prose h4 {
	margin-top: 1.5em;
	font-size: 1.05rem;
}

.sst-prose a {
	color: var(--color-forest, #154618);
	text-decoration: underline;
	text-decoration-color: var(--color-lime, #adee68);
	text-decoration-thickness: 0.18em;
	text-underline-offset: 0.18em;
	transition: text-decoration-color 150ms;
}

.sst-prose a:hover {
	text-decoration-color: var(--color-forest, #154618);
}

.sst-prose strong {
	color: var(--color-ink, #0c0b0a);
	font-weight: 600;
}

.sst-prose ul,
.sst-prose ol {
	padding-left: 1.4em;
}

.sst-prose ul {
	list-style: disc;
}

.sst-prose ol {
	list-style: decimal;
}

.sst-prose li + li {
	margin-top: 0.45em;
}

.sst-prose li::marker {
	color: var(--color-leaf, #36893b);
}

.sst-prose blockquote {
	border-radius: 1.5rem;
	background: var(--color-lilac, #dbb9f3);
	padding: 1.4rem 1.6rem;
	color: var(--color-ink, #0c0b0a);
	font-weight: 600;
}

.sst-prose img,
.sst-prose figure img {
	height: auto;
	max-width: 100%;
	border-radius: 1.5rem;
}

.sst-prose figcaption {
	margin-top: 0.6em;
	color: rgb(12 11 10 / 0.55);
	font-size: 13.5px;
	text-align: center;
}

.sst-prose hr {
	border: 0;
	border-top: 1px solid rgb(12 11 10 / 0.12);
	margin: 2.4em 0;
}

.sst-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.sst-prose th,
.sst-prose td {
	border-top: 1px solid rgb(12 11 10 / 0.08);
	padding: 0.7em 0.6em;
	text-align: left;
}

.sst-prose .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	border-radius: 9999px;
	background: var(--color-forest, #154618);
	padding: 0.85em 1.5em;
	color: var(--color-lime, #adee68);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	font-feature-settings: "case";
	text-decoration: none;
}

.sst-prose .wp-block-button__link:hover {
	background: var(--color-ink, #0c0b0a);
}

.sst-prose .alignwide {
	margin-inline: min(-8vw, -6rem);
}

.sst-post-cover {
	margin-bottom: 2em;
}

.sst-pager .page-numbers {
	display: grid;
	min-width: 2.5rem;
	height: 2.5rem;
	place-items: center;
	border-radius: 0.8rem;
	background: #fffdf8;
	padding-inline: 0.6rem;
	color: var(--color-ink, #0c0b0a);
	font-weight: 600;
}

.sst-pager .page-numbers.current {
	background: var(--color-lime, #adee68);
	color: var(--color-forest, #154618);
}