/* Native WordPress indices and Classic-authored articles share the SJ grid. */
.sj-blog {
	--sj-blog-muted: color-mix(in srgb, var(--color-navy) 78%, var(--color-offwhite));
	width: 100%;
	max-width: none;
	margin: 0;
	background: var(--color-surface);
	color: var(--color-navy);
	font-family: var(--font-body);
}
.sj-blog *, .sj-blog *::before, .sj-blog *::after { box-sizing: border-box; }
.sj-blog .sj-blog-hero { padding-block: 48px 56px; }
.sj-blog .sj-page-hero-inner { max-width: var(--sj-site-width); margin-inline: auto; }
.sj-blog .sj-page-title { max-width: 25ch; }
.sj-blog .sj-page-summary { max-width: 70ch; }
.sj-blog a:where(:not(.wp-element-button, .wp-block-button__link, .button)) {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}
.sj-blog :is(a, button, input, textarea, select, pre):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.sj-blog-listing { min-height: 320px; }
.sj-blog-frame,
.sj-post-shell {
	width: min(calc(100% - var(--sj-site-gutter) * 2), var(--sj-site-width));
	margin-inline: auto;
	border-inline: 1px solid var(--sj-rule-ink);
}
.sj-blog-index-heading {
	display: grid;
	grid-template-columns: var(--sj-grid-six);
	align-items: center;
	border-bottom: 1px solid var(--sj-rule-ink);
}
.sj-blog-label, .sj-blog-count {
	grid-column: span 3;
	margin: 0;
	padding: 16px var(--sj-cell-pad);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.6;
}
.sj-blog-label { letter-spacing: .06em; text-transform: uppercase; }
.sj-blog-count { text-align: right; color: var(--sj-blog-muted); }
.sj-post-grid { display: grid; grid-template-columns: var(--sj-grid-six); gap: 0; }
.sj-post-card {
	display: flex;
	flex-direction: column;
	grid-column: span 3;
	min-width: 0;
	margin: 0;
	border-bottom: 1px solid var(--sj-rule-ink);
	background: var(--color-white);
}
.sj-post-card:nth-child(even) { border-left: 1px solid var(--sj-rule-ink); }
.sj-post-card:last-child { border-bottom: 0; }
@media (min-width: 768px) {
	.sj-post-card:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}
.sj-post-card-image { display: block; }
.sj-post-card-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.sj-post-card-content { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; padding: 32px var(--sj-cell-pad); }
.sj-post-card-meta, .sj-post-card-terms { color: var(--sj-blog-muted); font-size: 12px; line-height: 1.7; }
.sj-post-card-meta { margin-bottom: 18px; }
.sj-post-card-title {
	margin: 0 0 20px;
	font-family: var(--font-secondary);
	font-size: clamp(26px, 2.5vw, 34px);
	font-weight: var(--font-weight-secondary);
	line-height: 1.15;
	letter-spacing: -.025em;
	overflow-wrap: anywhere;
}
.sj-blog .sj-post-card-title a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.sj-blog .sj-post-card-title a:is(:hover, :focus-visible) { text-decoration: underline; text-decoration-thickness: 1px; }
.sj-post-card-excerpt { width: 100%; margin-bottom: 24px; color: var(--sj-blog-muted); font-size: var(--font-size-body); line-height: 1.85; }
.sj-post-card-excerpt p { margin: 0; }
.sj-post-card-excerpt p + p { margin-top: 16px; }
.sj-post-card-terms { margin-top: auto; }
.sj-blog-empty { min-height: 280px; padding: 48px var(--sj-cell-pad); }
.sj-blog-empty h3 { margin: 0 0 20px; font-family: var(--font-secondary); font-size: 28px; font-weight: var(--font-weight-secondary); }
.sj-blog-empty p { max-width: 60ch; margin: 0; color: var(--sj-blog-muted); font-size: var(--font-size-body); line-height: 1.8; }
.sj-blog .pagination { margin: 0; padding: 24px var(--sj-cell-pad); border-top: 1px solid var(--sj-rule-ink); }
.sj-blog .pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sj-blog .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 12px; font-size: 14px; }
.sj-blog .page-numbers.current { background: var(--color-yellow); color: var(--color-navy); }
.sj-blog-search { display: flex; align-items: stretch; gap: 16px; margin: 0; padding: 24px var(--sj-cell-pad); border-bottom: 1px solid var(--sj-rule-ink); }
.sj-blog-search input[type="search"] { flex: 1 1 auto; min-width: 0; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--sj-rule-ink); border-radius: 0; background: var(--color-white); color: var(--color-navy); font: inherit; }

/* Open title above one quiet, readable column of native block content. */
.sj-article { margin: 0; }
.sj-post-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; color: color-mix(in srgb, var(--color-offwhite) 84%, var(--color-navy)); font-size: 12px; line-height: 1.8; }
.sj-post-shell { display: grid; grid-template-columns: var(--sj-grid-six); }
.sj-post-main { grid-column: 1 / span 4; min-width: 0; }
.sj-post-content, .sj-post-tail, .sj-post-comments { min-width: 0; width: 100%; max-width: none; margin-inline: auto; padding: 40px var(--sj-cell-pad); }
.sj-post-content { font-family: var(--font-body); font-size: var(--font-size-body); line-height: 1.85; overflow-wrap: break-word; }
.sj-post-content > * { margin-block: 0 24px; }
.sj-post-content > :last-child { margin-bottom: 0; }
.sj-post-content :is(h2, h3, h4, h5, h6) { margin-top: 44px; margin-bottom: 20px; font-family: var(--font-secondary); font-weight: var(--font-weight-secondary); line-height: 1.18; letter-spacing: -.025em; overflow-wrap: anywhere; }
.sj-post-content h2 { font-size: clamp(30px, 3vw, 40px); }
.sj-post-content h3 { font-size: 27px; }
.sj-post-content h4 { font-size: 23px; }
.sj-post-content :is(h5, h6) { font-size: 20px; }
.sj-post-content > :first-child { margin-top: 0; }
.sj-post-content :is(ul, ol) { padding-inline-start: 1.5em; }
.sj-post-content li + li { margin-top: 8px; }
.sj-post-content li :is(ul, ol) { margin-top: 12px; }
.sj-post-content blockquote { margin-inline: 0; padding: 8px 0 8px 24px; border-left: 1px solid var(--color-forest); }
.sj-post-content blockquote p { margin: 0 0 16px; font-family: var(--font-secondary); font-size: 25px; font-weight: var(--font-weight-secondary); line-height: 1.45; }
.sj-post-content blockquote p:last-child { margin-bottom: 0; }
.sj-post-content :is(blockquote cite, figcaption) { color: var(--sj-blog-muted); font-family: var(--font-body); font-size: var(--font-size-body); font-style: normal; line-height: 1.7; }
.sj-post-content :is(img, video, iframe) { max-width: 100%; }
.sj-post-content img { height: auto; }
.sj-post-content figure { margin-inline: 0; }
.sj-post-content figcaption { margin-top: 12px; }
.sj-post-content > :is(.alignwide, .alignfull) { width: calc(100% + var(--sj-cell-pad) * 2); max-width: none; margin-inline: calc(-1 * var(--sj-cell-pad)); }
.sj-post-content .wp-block-table { max-width: 100%; overflow-x: auto; }
.sj-post-content table { width: 100%; border-collapse: collapse; font-size: var(--font-size-body); }
.sj-post-content :is(th, td) { padding: 12px; border: 1px solid var(--sj-rule-ink); text-align: start; }
.sj-post-content th { background: var(--color-white); font-weight: 600; }
.sj-post-content hr { width: calc(100% + var(--sj-cell-pad) * 2); height: 0; margin-block: 36px; margin-inline: calc(-1 * var(--sj-cell-pad)); border: 0; border-top: 1px solid var(--sj-rule-ink); }
.sj-post-content :is(code, kbd, samp, pre) { font-family: var(--font-body); }
.sj-post-content :not(pre) > :is(code, kbd, samp) { padding: .1em .3em; background: color-mix(in srgb, var(--color-yellow) 22%, var(--color-white)); color: var(--color-navy); font-size: .9em; }
.sj-post-content pre {
	max-width: 100%;
	margin-block: 28px;
	padding: 24px;
	overflow-x: auto;
	border: 0;
	border-radius: 0;
	background: var(--color-navy);
	color: var(--color-offwhite);
	font-size: var(--font-size-body);
	line-height: 1.75;
	white-space: pre;
	overflow-wrap: normal;
	tab-size: 4;
}
.sj-post-content pre code { display: block; padding: 0; background: transparent; color: inherit; font: inherit; white-space: pre; overflow-wrap: normal; }
.sj-post-content pre:focus-visible {
	outline: 2px solid var(--color-navy);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--color-offwhite);
}
.sj-post-content .sj-code-block { margin-block: 28px; background: var(--color-navy); color: var(--color-offwhite); }
.sj-post-content .sj-code-block pre { margin: 0; }
.sj-code-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 4px 12px 4px 24px; border-bottom: 1px solid var(--sj-rule-on-dark); }
.sj-code-language { font-family: var(--font-body); font-size: 12px; line-height: 1.5; }
body .sj-post-content .sj-code-block button.sj-code-copy,
body .sj-post-content .sj-code-block button.sj-code-copy:is(:hover, :focus, :focus-visible, :active, :disabled) {
	min-height: 44px;
	padding: 8px 12px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--color-offwhite);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	box-shadow: none;
	transform: none;
}
body .sj-post-content .sj-code-block button.sj-code-copy:is(:hover, :focus-visible) { color: var(--color-yellow); }
body .sj-post-content .sj-code-block button.sj-code-copy:focus-visible {
	outline: 2px solid var(--color-yellow);
	outline-offset: 2px;
}
.sj-code-status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sj-post-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 24px; font-size: 14px; }
.sj-post-pages .post-page-numbers { min-width: 44px; min-height: 44px; padding: 8px 12px; }
.sj-post-tail { padding: 0; font-size: 13px; line-height: 1.8; }
.sj-post-topics { padding: 24px var(--sj-cell-pad) 12px; border-top: 1px solid var(--sj-rule-ink); }
.sj-post-topics p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.sj-post-topics p > span { color: var(--sj-blog-muted); }
.sj-blog .post-navigation { margin: 0; }
.sj-blog .post-navigation .nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--sj-rule-ink); }
.sj-blog .post-navigation .nav-links > div { min-width: 0; padding: 24px var(--sj-cell-pad); }
.sj-blog .post-navigation .nav-links > div + div { border-left: 1px solid var(--sj-rule-ink); }
.sj-blog .post-navigation .nav-links > div:only-child { grid-column: 1 / -1; }
.sj-blog .post-navigation a { display: flex; align-items: center; gap: 16px; min-height: 44px; }
.sj-post-nav-image { display: block; flex: 0 0 104px; width: 104px; aspect-ratio: 4 / 3; overflow: hidden; }
.sj-post-nav-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sj-post-nav-copy { display: flex; flex-direction: column; min-width: 0; gap: 8px; }
.sj-post-nav-title { overflow-wrap: anywhere; }
.sj-post-nav-label { color: var(--sj-blog-muted); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
@media (max-width: 1023px) { .sj-post-nav-image { flex-basis: 88px; width: 88px; } }
.sj-post-back { display: flex; align-items: center; min-height: 44px; padding: 24px var(--sj-cell-pad); }
.sj-post-topics + .sj-post-back { border-top: 1px solid var(--sj-rule-ink); }
.sj-post-comments { padding: 0; font-size: var(--font-size-body); line-height: 1.8; }
.sj-post-comments .comments-area { padding: 32px var(--sj-cell-pad); border-top: 1px solid var(--sj-rule-ink); }
.sj-post-comments :is(h2, h3) { font-family: var(--font-secondary); font-weight: var(--font-weight-secondary); }
.sj-post-comments .comment-list { width: calc(100% + var(--sj-cell-pad) * 2); margin-inline: calc(-1 * var(--sj-cell-pad)); padding: 0; list-style: none; }
.sj-post-comments .comment-body { padding: 24px var(--sj-cell-pad); border-bottom: 1px solid var(--sj-rule-ink); }
.sj-post-comments :is(input:not([type="submit"], [type="checkbox"]), textarea) { width: 100%; padding: 12px; border: 1px solid var(--sj-rule-ink); border-radius: 0; background: var(--color-white); color: var(--color-navy); font: inherit; }

/* One native Appearance > Widgets area, or the same useful defaults in PHP. */
.sj-post-sidebar {
	grid-column: 5 / span 2;
	min-width: 0;
	border-left: 1px solid var(--sj-rule-ink);
	background: transparent;
	color: var(--color-navy);
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1.8;
}
.sj-post-sidebar > .sj-sidebar-widget { min-width: 0; margin: 0; padding: 32px var(--sj-cell-pad); }
.sj-post-sidebar > .sj-sidebar-widget + .sj-sidebar-widget { border-top: 1px solid var(--sj-rule-ink); }
.sj-post-sidebar :is(.sj-sidebar-title, .widget-title, .wp-block-heading) {
	margin: 0 0 20px;
	font-family: var(--font-secondary);
	font-size: 23px;
	font-weight: var(--font-weight-secondary);
	line-height: 1.2;
	letter-spacing: -.02em;
}
.sj-post-sidebar p { margin: 0; }
.sj-post-sidebar form[role="search"], .sj-post-sidebar .wp-block-search__inside-wrapper { display: flex; flex-direction: row; align-items: stretch; flex-wrap: nowrap; gap: 8px; width: 100%; margin: 0; padding: 0; border: 0; }
.sj-post-sidebar form[role="search"] label { max-width: 100%; }
.sj-post-sidebar input[type="search"] { box-sizing: border-box; flex: 1 1 0; width: 0; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--sj-rule-ink); border-radius: 0; background: transparent; color: var(--color-navy); font: inherit; }
.sj-post-sidebar form[role="search"] :is(button, .search-submit) { flex: 0 0 auto; padding-inline: 16px; white-space: nowrap; }
.sj-post-sidebar :is(.search-submit, .wp-block-search__button) { margin-left: 0; }
.sj-post-sidebar :is(.sj-category-cloud, .tagcloud, .wp-block-tag-cloud, .wp-block-categories-list, .widget_categories ul) { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sj-post-sidebar :is(.sj-category-cloud, .wp-block-categories-list) li { margin: 0; padding: 0; }
.sj-blog .sj-post-topics a,
.sj-blog .sj-post-sidebar :is(.sj-category-cloud, .tagcloud, .wp-block-tag-cloud, .wp-block-categories-list, .widget_categories) a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	max-width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--sj-rule-ink);
	border-radius: 0;
	background: transparent;
	color: var(--color-navy);
	font-family: var(--font-body);
	font-size: 12px;
	line-height: 1.6;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	overflow-wrap: anywhere;
}
.sj-blog .sj-post-topics a:is(:hover, :focus-visible),
.sj-blog .sj-post-sidebar :is(.sj-category-cloud, .tagcloud, .wp-block-tag-cloud, .wp-block-categories-list, .widget_categories) a:is(:hover, :focus-visible) { background: var(--color-yellow); color: var(--color-navy); }
.sj-post-sidebar :is(.sj-sidebar-recent, .wp-block-latest-posts, .wp-block-latest-posts__list, .widget_recent_entries ul) { width: calc(100% + var(--sj-cell-pad) * 2); margin: 0 calc(-1 * var(--sj-cell-pad)); padding: 0; list-style: none; }
.sj-post-sidebar :is(.sj-sidebar-recent, .wp-block-latest-posts, .wp-block-latest-posts__list, .widget_recent_entries ul) > li { margin: 0; padding: 16px var(--sj-cell-pad); border-bottom: 1px solid var(--sj-rule-ink); }
.sj-post-sidebar :is(.sj-sidebar-recent, .wp-block-latest-posts, .wp-block-latest-posts__list, .widget_recent_entries ul) > li:first-child { padding-top: 0; }
.sj-post-sidebar :is(.sj-sidebar-recent, .wp-block-latest-posts, .wp-block-latest-posts__list, .widget_recent_entries ul) > li:last-child { padding-bottom: 0; border-bottom: 0; }
.sj-post-sidebar :is(.sj-sidebar-recent, .wp-block-latest-posts, .wp-block-latest-posts__list, .widget_recent_entries ul) a { display: flex; align-items: center; min-height: 44px; font-family: var(--font-secondary); font-size: 19px; font-weight: var(--font-weight-secondary); line-height: 1.35; overflow-wrap: anywhere; }
.sj-post-sidebar :is(time, .post-date, .wp-block-latest-posts__post-date) { display: block; margin-top: 8px; color: var(--sj-blog-muted); font-size: 11px; line-height: 1.7; }
/* Only illustrated rows reserve an image column; text-only posts keep the full width. */
.sj-post-sidebar :is(.sj-sidebar-recent, .wp-block-latest-posts) > li:has(.wp-block-latest-posts__featured-image) { display: grid; grid-template-columns: 80px minmax(0, 1fr); column-gap: 16px; row-gap: 8px; align-items: start; }
.sj-post-sidebar .wp-block-latest-posts__featured-image { grid-column: 1; grid-row: 1 / span 2; float: none; width: 80px; margin: 0; }
.sj-post-sidebar .wp-block-latest-posts__featured-image img { display: block; width: 80px; height: 80px; max-width: 100%; border-radius: 0; object-fit: cover; }
.sj-post-sidebar li:has(.wp-block-latest-posts__featured-image) > a { grid-column: 2; align-items: start; }
.sj-post-sidebar li:has(.wp-block-latest-posts__featured-image) > :is(time, .wp-block-latest-posts__post-date) { grid-column: 2; margin-top: 0; }

@media (max-width: 1000px) {
	.sj-post-main { grid-column: 1 / -1; }
	.sj-post-sidebar { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--sj-rule-ink); }
}
@media (max-width: 767px) {
	.sj-blog .sj-blog-hero { padding-block: 32px 40px; }
	.sj-blog-index-heading { grid-template-columns: minmax(0, 1fr) auto; }
	.sj-blog-label, .sj-blog-count { grid-column: auto; padding-block: 14px; font-size: 11px; }
	.sj-post-card:nth-child(n) { grid-column: 1 / -1; border-left: 0; }
	.sj-post-card-content { padding-block: 28px; }
	.sj-post-card-title { font-size: 28px; }
	.sj-post-card-excerpt { font-size: var(--font-size-body); }
	.sj-blog-search { flex-wrap: wrap; }
	.sj-blog-search input[type="search"] { flex-basis: 100%; }
	.sj-post-content { padding-block: 32px; font-size: var(--font-size-body); line-height: 1.85; }
	.sj-post-content h3 { font-size: 25px; }
	.sj-post-content pre { padding: 20px 16px; font-size: var(--font-size-body); }
	.sj-code-toolbar { padding-left: 16px; }
	.sj-blog .post-navigation .nav-links { grid-template-columns: minmax(0, 1fr); }
	.sj-blog .post-navigation .nav-links > div + div { padding: 24px var(--sj-cell-pad); border-left: 0; border-top: 1px solid var(--sj-rule-ink); }
}
@media (forced-colors: active) {
	.sj-post-content pre, .sj-post-content .sj-code-block { background: Canvas; color: CanvasText; }
	body .sj-post-content .sj-code-block button.sj-code-copy { color: ButtonText; }
}