/* Content elements shared by the frontend and both WordPress editors. */

:root {
	--ellery-paper: var(--wp--preset--color--base, #fbfaf6);
	--ellery-ink: var(--wp--preset--color--contrast, #172027);
	--ellery-ink-soft: var(--wp--preset--color--muted, #4f5957);
	--ellery-rule: rgba(23, 32, 39, 0.16);
	--ellery-accent: var(--wp--preset--color--accent, #4f6658);
	--ellery-accent-soft: rgba(79, 102, 88, 0.18);
	--ellery-font-body: var(--wp--preset--font-family--body, "Source Sans 3", "Segoe UI", Arial, sans-serif);
	--ellery-font-display: var(--wp--preset--font-family--display, "Newsreader", Georgia, "Times New Roman", serif);
	--ellery-text-xs: 0.8125rem;
	--ellery-text-sm: 0.9375rem;
	--ellery-text-base: 1.0625rem;
	--ellery-text-lg: 1.1875rem;
	--ellery-leading-body: 1.62;
	--ellery-leading-snug: 1.25;
	--ellery-leading-tight: 1.08;
	--ellery-measure: 66ch;
	--ellery-measure-wide: 78ch;
	--ellery-space-1: 0.375rem;
	--ellery-space-2: 0.625rem;
	--ellery-space-3: 1rem;
	--ellery-space-4: 1.5rem;
	--ellery-space-5: 2.25rem;
	--ellery-space-6: 3.25rem;
	--ellery-space-7: 4.75rem;
	--ellery-fast: 140ms;
}

:where(.entry-content, .editor-styles-wrapper, body#tinymce) > * {
	margin-block-start: 0;
}

:where(.entry-content, .editor-styles-wrapper, body#tinymce) > * + * {
	margin-block-start: var(--ellery-space-4, 1.5rem);
}

:where(.entry-content, .editor-styles-wrapper, body#tinymce) h1,
:where(.entry-content, .editor-styles-wrapper, body#tinymce) h2,
:where(.entry-content, .editor-styles-wrapper, body#tinymce) h3,
:where(.entry-content, .editor-styles-wrapper, body#tinymce) h4,
:where(.entry-content, .editor-styles-wrapper, body#tinymce) h5,
:where(.entry-content, .editor-styles-wrapper, body#tinymce) h6 {
	margin-block: var(--ellery-space-6, 3.25rem) 0;
	color: var(--ellery-ink, #172027);
	font-family: var(--ellery-font-display, "Newsreader", Georgia, "Times New Roman", serif);
	font-weight: 600;
	line-height: var(--ellery-leading-tight, 1.08);
	letter-spacing: -0.015em;
	text-wrap: balance;
}

:where(.entry-content, .editor-styles-wrapper, body#tinymce) h1 {
	font-size: clamp(2.45rem, 4.5vw, 3.55rem);
}

:where(.entry-content, .editor-styles-wrapper, body#tinymce) h2 {
	font-size: clamp(1.95rem, 3vw, 2.7rem);
}

:where(.entry-content, .editor-styles-wrapper, body#tinymce) h3 {
	font-size: clamp(1.45rem, 2vw, 1.8rem);
}

:where(.entry-content, .editor-styles-wrapper, body#tinymce) h4,
:where(.entry-content, .editor-styles-wrapper, body#tinymce) h5,
:where(.entry-content, .editor-styles-wrapper, body#tinymce) h6 {
	font-family: var(--ellery-font-body, "Source Sans 3", "Segoe UI", Arial, sans-serif);
	font-weight: 700;
	line-height: var(--ellery-leading-snug, 1.25);
	letter-spacing: 0;
}

:where(.entry-content, .editor-styles-wrapper, body#tinymce) h4 {
	font-size: 1.125rem;
}

:where(.entry-content, .editor-styles-wrapper, body#tinymce) h5,
:where(.entry-content, .editor-styles-wrapper, body#tinymce) h6 {
	font-size: 1rem;
}

:where(.entry-content, .editor-styles-wrapper, body#tinymce) > h1:first-child,
:where(.entry-content, .editor-styles-wrapper, body#tinymce) > h2:first-child,
:where(.entry-content, .editor-styles-wrapper, body#tinymce) > h3:first-child,
:where(.entry-content, .editor-styles-wrapper, body#tinymce) > h4:first-child {
	margin-block-start: 0;
}

:where(.entry-content, .editor-styles-wrapper, body#tinymce) p,
:where(.entry-content, .editor-styles-wrapper, body#tinymce) ul,
:where(.entry-content, .editor-styles-wrapper, body#tinymce) ol,
:where(.entry-content, .editor-styles-wrapper, body#tinymce) blockquote,
:where(.entry-content, .editor-styles-wrapper, body#tinymce) figure,
:where(.entry-content, .editor-styles-wrapper, body#tinymce) table {
	max-width: var(--ellery-measure, 66ch);
}

:where(.entry-content, .editor-styles-wrapper, body#tinymce) p {
	margin-block-end: 0;
}

:where(.entry-content, .editor-styles-wrapper, body#tinymce) a {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: color-mix(in srgb, currentColor 58%, transparent);
	transition:
		text-decoration-color var(--ellery-fast, 140ms) ease,
		color var(--ellery-fast, 140ms) ease;
}

:where(.entry-content, .editor-styles-wrapper, body#tinymce) a:hover {
	text-decoration-color: transparent;
}

:where(.entry-content, .editor-styles-wrapper, body#tinymce) ul,
:where(.entry-content, .editor-styles-wrapper, body#tinymce) ol {
	padding-inline-start: 1.35em;
}

:where(.entry-content, .editor-styles-wrapper, body#tinymce) li + li {
	margin-block-start: 0.4em;
}

:where(.entry-content, .editor-styles-wrapper, body#tinymce) li::marker {
	color: var(--ellery-accent, #4f6658);
}

:where(.entry-content, .editor-styles-wrapper, body#tinymce) blockquote {
	margin-inline: 0;
	padding-inline-start: var(--ellery-space-4, 1.5rem);
	border-inline-start: 2px solid var(--ellery-accent, #4f6658);
	color: var(--ellery-ink-soft, #4f5957);
	font-family: var(--ellery-font-display, "Newsreader", Georgia, "Times New Roman", serif);
	font-size: 1.25rem;
	font-style: italic;
	line-height: 1.45;
}

:where(.entry-content, .editor-styles-wrapper, body#tinymce) blockquote p {
	margin: 0;
}

:where(.entry-content, .editor-styles-wrapper, body#tinymce) hr {
	border: 0;
	height: 1px;
	margin-block: var(--ellery-space-6, 3.25rem);
	background: var(--ellery-rule, rgba(23, 32, 39, 0.16));
}

:where(.entry-content, .editor-styles-wrapper, body#tinymce) figure {
	margin-inline: 0;
}

:where(.entry-content, .editor-styles-wrapper, body#tinymce) figcaption,
:where(.entry-content, .editor-styles-wrapper, body#tinymce) .wp-caption-text {
	color: var(--ellery-ink-soft, #4f5957);
	font-size: var(--ellery-text-sm, 0.9375rem);
}

:where(.entry-content, .editor-styles-wrapper, body#tinymce) table {
	width: 100%;
	border-collapse: collapse;
}

:where(.entry-content, .editor-styles-wrapper, body#tinymce) th,
:where(.entry-content, .editor-styles-wrapper, body#tinymce) td {
	padding: 0.65rem;
	border: 1px solid var(--ellery-rule, rgba(23, 32, 39, 0.16));
	text-align: start;
	vertical-align: top;
}

:where(.entry-content, .editor-styles-wrapper, body#tinymce) pre {
	overflow: auto;
	padding: 1rem;
	background: var(--wp--preset--color--subtle, #f4f1ea);
}

:where(.entry-content, .editor-styles-wrapper, body#tinymce) code {
	font-size: 0.9em;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignleft {
	float: left;
	margin: 0.35rem 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0.35rem 0 1rem 1.5rem;
}

.alignwide {
	width: min(100vw - 2rem, var(--wp--style--global--wide-size, 68rem));
	max-width: var(--wp--style--global--wide-size, 68rem);
	margin-inline: calc((var(--wp--style--global--content-size, 44rem) - min(100vw - 2rem, var(--wp--style--global--wide-size, 68rem))) / 2);
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.wp-caption,
.wp-caption img {
	max-width: 100%;
}

.gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.gallery-item {
	flex: 1 1 12rem;
	margin: 0;
}

.entry-title,
.page-title {
	margin: 0 0 var(--ellery-space-5, 2.25rem);
	color: var(--ellery-ink, #172027);
	font-family: var(--ellery-font-body, "Source Sans 3", "Segoe UI", Arial, sans-serif);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.085em;
	text-transform: uppercase;
}

.entry-title::after,
.page-title::after {
	content: "";
	display: block;
	width: 3rem;
	height: 1px;
	margin-top: 1rem;
	background: var(--ellery-accent, #4f6658);
	opacity: 0.75;
}

.post-summary .entry-title {
	margin-bottom: var(--ellery-space-3, 1rem);
	font-family: var(--ellery-font-display, "Newsreader", Georgia, "Times New Roman", serif);
	font-size: clamp(1.45rem, 2vw, 1.8rem);
	font-weight: 600;
	line-height: var(--ellery-leading-tight, 1.08);
	letter-spacing: -0.015em;
	text-transform: none;
}

.post-summary .entry-title::after {
	content: none;
}

.post-summary .entry-title a {
	color: inherit;
	text-decoration: none;
}

.post-summary .entry-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

@media (max-width: 48rem) {
	.alignleft,
	.alignright {
		float: none;
		display: block;
		margin-inline: auto;
	}
}

@media (max-width: 42rem) {
	:where(.entry-content, .editor-styles-wrapper, body#tinymce) h1 {
		font-size: clamp(2.15rem, 11vw, 3rem);
	}

	:where(.entry-content, .editor-styles-wrapper, body#tinymce) h2 {
		font-size: clamp(1.75rem, 8vw, 2.25rem);
	}

	:where(.entry-content, .editor-styles-wrapper, body#tinymce) h3 {
		font-size: 1.4rem;
	}

	:where(.entry-content, .editor-styles-wrapper, body#tinymce) h1,
	:where(.entry-content, .editor-styles-wrapper, body#tinymce) h2,
	:where(.entry-content, .editor-styles-wrapper, body#tinymce) h3,
	:where(.entry-content, .editor-styles-wrapper, body#tinymce) h4 {
		margin-block-start: var(--ellery-space-5, 2.25rem);
	}

	.entry-title,
	.page-title {
		margin-bottom: var(--ellery-space-4, 1.5rem);
	}
}