/* ==================================================================
 * Pages, posts, archives, search, 404.
 *
 * The old templates had no container at all, which is why the blog ran
 * edge to edge and read as one unbroken column of text.
 * ================================================================ */

.je-page {
	max-width: 1220px;
	margin: 0 auto;
	padding: 40px 20px 72px;
}

.je-page--narrow {
	max-width: 820px;
}

.je-page__head {
	margin-bottom: 30px;
}

.je-page__title {
	font-size: clamp(27px, 3.4vw, 38px);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.015em;
	margin: 0 0 10px;
	color: var(--je-ink, #1a1a1a);
}

.je-page__sub {
	margin: 0;
	color: #6b7280;
	font-size: 16px;
	line-height: 1.6;
}

.je-empty {
	color: #6b7280;
	font-size: 16px;
}

/* ---- listing grid ---- */

.je-posts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.je-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e6e9ee;
	border-radius: 10px;
	overflow: hidden;
	transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}

.je-card:hover {
	box-shadow: 0 10px 26px rgba(17, 24, 39, 0.1);
	border-color: #d7dde6;
	transform: translateY(-2px);
}

.je-card__media {
	display: block;
	line-height: 0;
	background: #f2f4f7;
}

.je-card__media img {
	width: 100%;
	height: 196px;
	object-fit: cover;
	display: block;
}

.je-card__placeholder {
	display: block;
	height: 196px;
	background: linear-gradient(135deg, #eef2f7, #e3e9f1);
}

.je-card__body {
	padding: 16px 18px 20px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.je-card__cat {
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--je-accent, #1c6fc4);
	text-decoration: none;
	margin-bottom: 7px;
}

.je-card__title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 8px;
}

.je-card__title a {
	color: var(--je-ink, #1a1a1a);
	text-decoration: none;
}

.je-card__title a:hover {
	color: var(--je-accent, #1c6fc4);
}

.je-card__excerpt {
	margin: 0 0 14px;
	font-size: 14.5px;
	line-height: 1.6;
	color: #5b6672;
}

.je-card__more {
	margin-top: auto;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--je-accent, #1c6fc4);
}

/* ---- readable body copy ---- */

.je-prose {
	font-size: 17px;
	line-height: 1.75;
	color: #2b3440;
	max-width: 72ch;
}

.je-prose > * + * {
	margin-top: 1.05em;
}

.je-prose h2 {
	font-size: 25px;
	font-weight: 800;
	line-height: 1.28;
	margin-top: 1.9em;
	margin-bottom: 0.5em;
	color: var(--je-ink, #1a1a1a);
}

.je-prose h3 {
	font-size: 20px;
	font-weight: 700;
	margin-top: 1.6em;
	margin-bottom: 0.45em;
}

.je-prose h4 {
	font-size: 17.5px;
	font-weight: 700;
	margin-top: 1.4em;
}

.je-prose a {
	color: var(--je-accent, #1c6fc4);
	text-decoration: underline;
	text-underline-offset: 2px;
}

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

.je-prose li + li {
	margin-top: 0.4em;
}

.je-prose img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
}

.je-prose figure {
	margin: 1.6em 0;
}

.je-prose blockquote {
	border-left: 4px solid var(--je-accent, #1c6fc4);
	padding: 4px 0 4px 18px;
	margin-left: 0;
	color: #46505c;
	font-style: italic;
}

.je-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	display: block;
	overflow-x: auto;
}

.je-prose th,
.je-prose td {
	border: 1px solid #e3e8ee;
	padding: 10px 13px;
	text-align: left;
}

.je-prose th {
	background: #f7f9fb;
	font-weight: 700;
}

/* ---- single post ---- */

.je-single__head {
	margin-bottom: 22px;
}

.je-single__title {
	font-size: clamp(28px, 3.6vw, 40px);
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: -0.015em;
	margin: 6px 0 12px;
	color: var(--je-ink, #1a1a1a);
}

.je-single__meta {
	margin: 0;
	color: #7b8694;
	font-size: 14px;
	display: flex;
	gap: 9px;
	align-items: center;
}

.je-single__hero {
	margin: 0 0 30px;
}

.je-single__hero img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
}

.je-single__tags {
	margin-top: 34px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.je-single__tags a {
	font-size: 12.5px;
	background: #eef3fa;
	color: #2b5c93;
	padding: 6px 12px;
	border-radius: 99px;
	text-decoration: none;
}

.je-single__tags a:hover {
	background: var(--je-accent, #1c6fc4);
	color: #fff;
}

.je-single__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 44px;
	padding-top: 26px;
	border-top: 1px solid #e9edf2;
}

.je-single__nav-link {
	text-decoration: none;
	color: var(--je-ink, #1a1a1a);
	border: 1px solid #e6e9ee;
	border-radius: 10px;
	padding: 14px 16px;
	transition: border-color 0.15s;
}

.je-single__nav-link:hover {
	border-color: var(--je-accent, #1c6fc4);
}

.je-single__nav-link span {
	display: block;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: #98a1ad;
	margin-bottom: 4px;
	font-weight: 700;
}

.je-single__nav-link strong {
	font-size: 15px;
	line-height: 1.35;
	font-weight: 700;
}

.je-single__nav-link--next {
	text-align: right;
}

.je-related {
	margin-top: 56px;
}

.je-related__title {
	font-size: 22px;
	font-weight: 800;
	margin: 0 0 20px;
}

.je-posts--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---- pagination ---- */

.je-pagination {
	margin-top: 40px;
	text-align: center;
}

.je-pagination ul {
	display: inline-flex;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.je-pagination li {
	list-style: none;
}

.je-pagination a,
.je-pagination span {
	display: block;
	min-width: 42px;
	padding: 10px 13px;
	border: 1px solid #e2e6ec;
	border-radius: 6px;
	color: var(--je-ink, #1a1a1a);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}

.je-pagination .current,
.je-pagination a:hover {
	background: var(--je-accent, #1c6fc4);
	border-color: var(--je-accent, #1c6fc4);
	color: #fff;
}

/* ---- buttons / 404 ---- */

.je-btn {
	display: inline-block;
	background: var(--je-accent, #1c6fc4);
	color: #fff;
	padding: 13px 26px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
}

.je-btn:hover {
	background: var(--je-accent-dark, #14559b);
	color: #fff;
}

.je-btn--ghost {
	background: transparent;
	color: var(--je-accent, #1c6fc4);
	border: 1px solid #cfd8e3;
}

.je-btn--ghost:hover {
	background: #eef3fa;
	color: var(--je-accent-dark, #14559b);
}

.je-404 {
	text-align: center;
	padding: 30px 0 20px;
}

.je-404__code {
	font-size: 82px;
	font-weight: 900;
	line-height: 1;
	color: #e6ecf4;
	margin: 0 0 4px;
	letter-spacing: -0.03em;
}

.je-404__search {
	max-width: 520px;
	margin: 26px auto 22px;
}

.je-404__links {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ---- responsive ---- */

@media (max-width: 1000px) {
	.je-posts,
	.je-posts--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.je-page {
		padding: 28px 18px 54px;
	}

	.je-posts,
	.je-posts--3 {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.je-single__nav {
		grid-template-columns: 1fr;
	}

	.je-single__nav-link--next {
		text-align: left;
	}

	.je-prose {
		font-size: 16.5px;
	}
}

/* Admin-only notice on an empty imported page. */
.je-notice {
	background: #eef4fc;
	border-left: 4px solid var(--je-accent, #1c6fc4);
	border-radius: 0 8px 8px 0;
	padding: 16px 20px;
	margin: 0 0 26px;
	font-size: 15px;
	line-height: 1.6;
}

.je-notice p {
	margin: 0 0 10px;
}

.je-notice p:last-child {
	margin-bottom: 0;
}

/* ==================================================================
 * Imported page content
 *
 * Every page and post came through as frozen HTML with Elementor's class
 * names baked in — sections, containers, columns, widget wrappers — but
 * there is no Elementor here to lay any of it out. Left alone it renders
 * as unstyled text inside meaningless divs.
 *
 * This flattens that scaffolding back to ordinary blocks and applies the
 * same typographic treatment the blog posts get, so a policy page or an
 * about page reads properly.
 * ================================================================ */

/* 1. Flatten the scaffolding. */
.je-prose--imported .elementor,
.je-prose--imported .elementor-section,
.je-prose--imported .elementor-container,
.je-prose--imported .elementor-column,
.je-prose--imported .elementor-widget-wrap,
.je-prose--imported .elementor-element,
.je-prose--imported .elementor-widget,
.je-prose--imported .elementor-widget-container,
.je-prose--imported .e-con,
.je-prose--imported .e-con-inner {
	display: block;
	width: auto;
	max-width: none;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	flex: none;
	position: static;
}

/* Air between the original sections, so the page still has rhythm. */
.je-prose--imported > .elementor > .elementor-section + .elementor-section,
.je-prose--imported .elementor-section + .elementor-section {
	margin-top: 1.9em;
}

.je-prose--imported .elementor-widget + .elementor-widget {
	margin-top: 1.05em;
}

/* 2. Typography — the same scale the blog uses. */
.je-prose--imported p,
.je-prose--imported li {
	font-size: 17px;
	line-height: 1.75;
	color: #2b3440;
}

.je-prose--imported p {
	margin: 0 0 1.05em;
	max-width: 72ch;
}

.je-prose--imported h1,
.je-prose--imported h2,
.je-prose--imported h3,
.je-prose--imported h4,
.je-prose--imported .elementor-heading-title {
	color: var(--je-ink, #1a1a1a);
	font-weight: 800;
	line-height: 1.28;
	margin: 1.9em 0 0.5em;
	max-width: 62ch;
}

.je-prose--imported h1,
.je-prose--imported h1.elementor-heading-title {
	font-size: 30px;
}

.je-prose--imported h2,
.je-prose--imported h2.elementor-heading-title {
	font-size: 25px;
}

.je-prose--imported h3,
.je-prose--imported h3.elementor-heading-title {
	font-size: 20px;
	font-weight: 700;
}

.je-prose--imported h4,
.je-prose--imported h4.elementor-heading-title {
	font-size: 17.5px;
	font-weight: 700;
}

.je-prose--imported > .elementor > .elementor-section:first-child h1:first-child,
.je-prose--imported h2:first-child,
.je-prose--imported h3:first-child {
	margin-top: 0;
}

.je-prose--imported ul,
.je-prose--imported ol {
	margin: 0 0 1.05em;
	padding-left: 1.4em;
	max-width: 72ch;
}

.je-prose--imported li + li {
	margin-top: 0.4em;
}

.je-prose--imported a {
	color: var(--je-accent, #1c6fc4);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.je-prose--imported strong {
	color: var(--je-ink, #1a1a1a);
	font-weight: 700;
}

.je-prose--imported img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 1.4em 0;
}

.je-prose--imported table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	margin: 1.4em 0;
	display: block;
	overflow-x: auto;
}

.je-prose--imported th,
.je-prose--imported td {
	border: 1px solid #e3e8ee;
	padding: 10px 13px;
	text-align: left;
}

.je-prose--imported th {
	background: #f7f9fb;
	font-weight: 700;
}

/* 3. Bits of Elementor chrome that should still look like something. */
.je-prose--imported .elementor-divider {
	margin: 2em 0;
}

.je-prose--imported .elementor-divider-separator {
	display: block;
	height: 1px;
	background: #e6ebf1;
}

.je-prose--imported .elementor-spacer,
.je-prose--imported .elementor-widget-spacer {
	height: 18px;
}

.je-prose--imported .elementor-button,
.je-prose--imported .elementor-button-link {
	display: inline-block;
	background: var(--je-accent, #1c6fc4);
	color: #fff;
	padding: 13px 26px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	margin: 0.6em 0;
}

.je-prose--imported .elementor-button:hover {
	background: var(--je-accent-dark, #14559b);
	color: #fff;
}

/* Multi-column sections stack rather than collapse to slivers. */
@media (max-width: 860px) {
	.je-prose--imported .elementor-column {
		width: 100% !important;
	}
}

/* ==================================================================
 * PAGE DESIGN  (v2.2)
 *
 * Pages used to be a title and a column of text on white, which is why
 * they read as unstyled next to the blog. This gives them the same
 * structure a good article page has: a hero band, a contents list, a
 * measured reading column, a sidebar, and a closing call to action.
 * ================================================================ */

/* ---- hero band ---- */

.je-hero {
	background:
		radial-gradient(1200px 400px at 12% -40%, rgba(28, 111, 196, 0.16), transparent 62%),
		linear-gradient(180deg, #f6f8fb 0%, #eef2f7 100%);
	border-bottom: 1px solid #e2e8f0;
	padding: 40px 20px 44px;
}

.je-hero__inner {
	max-width: 1020px;
	margin: 0 auto;
}

.je-hero__title {
	font-size: clamp(30px, 4.2vw, 46px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.022em;
	margin: 0;
	color: var(--je-ink, #1a1a1a);
	max-width: 20ch;
}

.je-hero__lead {
	margin: 16px 0 0;
	font-size: clamp(16px, 1.5vw, 19px);
	line-height: 1.62;
	color: #4b5563;
	max-width: 62ch;
}

.je-hero__meta {
	margin: 18px 0 0;
	font-size: 13px;
	color: #7c8798;
}

/* A short accent rule under the title — cheap, and it stops the hero
   reading as a plain grey box. */
.je-hero__title::after {
	content: "";
	display: block;
	width: 62px;
	height: 4px;
	margin-top: 18px;
	border-radius: 3px;
	background: var(--je-accent, #1c6fc4);
}

/* ---- breadcrumbs ---- */

.je-crumbs {
	margin: 0 0 18px;
	font-size: 13px;
}

.je-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.je-crumbs li + li::before {
	content: "›";
	margin-right: 6px;
	color: #9aa4b2;
}

.je-crumbs a {
	color: #5b6675;
	text-decoration: none;
}

.je-crumbs a:hover {
	color: var(--je-accent, #1c6fc4);
	text-decoration: underline;
}

.je-crumbs [aria-current] {
	color: #1f2937;
	font-weight: 600;
}

/* ---- two-column layout ---- */

/*
 * The whole page hangs off one measure. .je-prose caps itself at 72ch, so if
 * the column were wider than that the text would stop short and leave a dead
 * band before the sidebar — which is exactly what the first cut did. Instead
 * the grid is sized so the column IS the measure, and the prose fills it.
 *
 *   640 column + 64 gutter + 316 sidebar = 1020
 */
.je-page--article {
	max-width: 1020px;
	margin: 0 auto;
	padding: 44px 20px 64px;
}

.je-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 316px;
	gap: 64px;
	align-items: start;
}

.je-layout--solo {
	grid-template-columns: minmax(0, 1fr);
	max-width: 720px;
	margin: 0 auto;
}

/* The column is the measure; do not cap it a second time. */
.je-layout__main .je-prose {
	max-width: none;
}

.je-layout__main {
	min-width: 0;
}

/* ---- contents list ---- */

.je-toc {
	border: 1px solid #e3e8ef;
	border-left: 4px solid var(--je-accent, #1c6fc4);
	border-radius: 10px;
	background: #fbfcfe;
	padding: 18px 22px 20px;
	margin: 0 0 34px;
}

.je-toc__title {
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: #6b7280;
	margin: 0 0 10px;
}

.je-toc__list {
	margin: 0;
	padding-left: 20px;
	columns: 2;
	column-gap: 30px;
}

.je-toc__list li {
	margin: 0 0 7px;
	font-size: 14.5px;
	line-height: 1.45;
	break-inside: avoid;
}

.je-toc__list a {
	color: #33415c;
	text-decoration: none;
}

.je-toc__list a:hover {
	color: var(--je-accent, #1c6fc4);
	text-decoration: underline;
}

/* Headings are anchor targets now — keep the sticky header off them. */
.je-prose h2[id],
.je-prose h3[id] {
	scroll-margin-top: 140px;
}

/* ---- sidebar ---- */

.je-side-sticky {
	position: sticky;
	top: 130px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.je-side-card {
	border: 1px solid #e3e8ef;
	border-radius: 12px;
	padding: 22px;
	background: #fff;
}

.je-side-card--contact {
	background: linear-gradient(170deg, #f7fafd 0%, #eef4fb 100%);
	border-color: #d8e4f2;
}

.je-side-card__title {
	font-size: 16px;
	font-weight: 800;
	margin: 0 0 8px;
	color: var(--je-ink, #1a1a1a);
	letter-spacing: -0.01em;
}

.je-side-card__text {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.6;
	color: #5b6675;
}

.je-side-card__link {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 0;
	font-size: 14.5px;
	font-weight: 600;
	color: #26364d;
	text-decoration: none;
	border-top: 1px solid rgba(23, 62, 110, 0.1);
	word-break: break-word;
}

.je-side-card__link:hover {
	color: var(--je-accent, #1c6fc4);
}

.je-side-card__link i {
	color: var(--je-accent, #1c6fc4);
	flex: 0 0 auto;
}

.je-side-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.je-side-list li + li {
	border-top: 1px solid #edf1f6;
}

.je-side-list a {
	display: block;
	padding: 11px 0;
	font-size: 14.5px;
	line-height: 1.45;
	color: #33415c;
	text-decoration: none;
}

.je-side-list a:hover {
	color: var(--je-accent, #1c6fc4);
}

.je-btn--block {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 16px;
}

/* ---- closing call to action ---- */

.je-cta {
	background:
		radial-gradient(900px 300px at 85% 120%, rgba(255, 255, 255, 0.14), transparent 60%),
		linear-gradient(135deg, var(--je-accent-dark, #14559b) 0%, var(--je-accent, #1c6fc4) 100%);
	color: #fff;
	padding: 44px 20px;
}

.je-cta__inner {
	max-width: 1020px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
}

.je-cta__title {
	margin: 0 0 6px;
	font-size: clamp(21px, 2.4vw, 27px);
	font-weight: 800;
	letter-spacing: -0.015em;
	color: #fff;
}

.je-cta__text p {
	margin: 0;
	color: rgba(255, 255, 255, 0.88);
	font-size: 16px;
	line-height: 1.55;
	max-width: 58ch;
}

.je-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.je-btn--light {
	background: #fff;
	color: var(--je-accent-dark, #14559b);
	border-color: #fff;
}

.je-btn--light:hover {
	background: #eef4fb;
	color: var(--je-accent-dark, #14559b);
}

.je-btn--outline-light {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.6);
}

.je-btn--outline-light:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
	color: #fff;
}

/* ---- richer prose inside the reading column ---- */

.je-prose > h2 {
	margin-top: 46px;
	padding-top: 4px;
}

.je-prose > h2:first-child {
	margin-top: 0;
}

/* The opening paragraph carries the page; size it like one. */
.je-prose > p:first-of-type {
	font-size: 18px;
	line-height: 1.72;
	color: #33415c;
}

.je-table-wrap {
	overflow-x: auto;
	margin: 26px 0;
	border: 1px solid #e3e8ef;
	border-radius: 10px;
	-webkit-overflow-scrolling: touch;
}

.je-table-wrap table {
	margin: 0;
	border: 0;
	min-width: 520px;
	width: 100%;
	border-collapse: collapse;
}

.je-table-wrap th {
	background: #f4f7fb;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #46566e;
}

.je-table-wrap th,
.je-table-wrap td {
	padding: 12px 16px;
	border-bottom: 1px solid #edf1f6;
	text-align: left;
	vertical-align: top;
}

.je-table-wrap tr:last-child td {
	border-bottom: 0;
}

.je-prose ul li::marker {
	color: var(--je-accent, #1c6fc4);
}

.je-prose blockquote {
	border-left: 4px solid var(--je-accent, #1c6fc4);
	background: #f7fafd;
	border-radius: 0 10px 10px 0;
	padding: 16px 22px;
	color: #33415c;
	font-style: normal;
}

.je-prose img {
	border-radius: 10px;
}

/* ---- responsive ---- */

@media (max-width: 1040px) {
	.je-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 44px;
	}

	.je-side-sticky {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

@media (max-width: 760px) {
	.je-hero {
		padding: 26px 18px 30px;
	}

	.je-hero__title {
		max-width: none;
	}

	.je-hero__title::after {
		margin-top: 14px;
	}

	.je-page--article {
		padding: 30px 18px 48px;
	}

	.je-toc__list {
		columns: 1;
	}

	.je-side-sticky {
		grid-template-columns: minmax(0, 1fr);
	}

	.je-cta {
		padding: 34px 18px;
	}

	.je-cta__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.je-prose > p:first-of-type {
		font-size: 17px;
	}
}

/* The imported articles lean on h3 for their numbered steps ("1 Oil and oil
   filter"). At the inherited size they read as bold paragraphs rather than
   headings, so the structure of a long page disappears. */
.je-layout__main .je-prose h3 {
	font-size: 19.5px;
	font-weight: 750;
	line-height: 1.35;
	margin-top: 32px;
	color: #16213a;
}

.je-layout__main .je-prose h2 + h3 {
	margin-top: 22px;
}

/* A wide table on a phone scrolls; say so, rather than letting it look cut off. */
.je-table-wrap {
	position: relative;
	background:
		linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left / 36px 100% no-repeat,
		linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right / 36px 100% no-repeat,
		radial-gradient(farthest-side at 0 50%, rgba(23, 62, 110, 0.14), transparent) left / 14px 100% no-repeat,
		radial-gradient(farthest-side at 100% 50%, rgba(23, 62, 110, 0.14), transparent) right / 14px 100% no-repeat;
	background-attachment: local, local, scroll, scroll;
}

/* ---- hero eyebrow (post category) ---- */

.je-hero__eyebrow {
	display: inline-block;
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--je-accent, #1c6fc4);
	text-decoration: none;
}

.je-hero__eyebrow:hover {
	text-decoration: underline;
}

/* ---- "More reading" band under a post ---- */

.je-related--band {
	background: #f6f8fb;
	border-top: 1px solid #e4e9f0;
	padding: 48px 20px 56px;
	margin: 0;
}

.je-related--band .je-related__inner {
	max-width: 1020px;
	margin: 0 auto;
}

.je-related--band .je-related__title {
	margin: 0 0 24px;
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.012em;
}

.je-related--band .je-posts--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 860px) {
	.je-related--band .je-posts--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.je-related--band .je-posts--3 {
		grid-template-columns: minmax(0, 1fr);
	}

	.je-related--band {
		padding: 34px 18px 40px;
	}
}

/* The post's own lead image sits above the contents list. */
.je-single__hero {
	margin: 0 0 30px;
}

.je-single__hero img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
}