/* ==========================================================================
   Journal article (post detail). Depends on journal.css tokens.
   .prose follows the brief §4.2 typography spec exactly.
   ========================================================================== */

/* ---------- Reading progress (visible after 10%) ---------- */
.jr-progress {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 1001;
	height: 2px;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--t-base) var(--ease);
}
.jr-progress.is-visible { opacity: 1; }
.jr-progress-bar { display: block; height: 100%; background: var(--brand-text); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- Hero ---------- */
.jr-article-hero { max-width: 880px; padding-block: 28px 36px; }
.jr-article-hero .jr-chip { font-size: 11px; }
.jr-page .jr-article-title {
	margin-top: 18px;
	font-size: clamp(32px, 4.3vw, 54px);
	font-weight: 600;
	letter-spacing: -.038em;
	line-height: 1.06;
}
.jr-article-deck { max-width: 740px; margin-top: 18px; font-size: 20px; line-height: 1.55; color: var(--muted); }
.jr-byline--expanded { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.jr-byline-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.jr-byline--expanded .jr-byline-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.jr-byline--expanded a.jr-byline-name:hover { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
.jr-byline-role { font-size: 13.5px; color: var(--muted-2-text); }
.jr-byline-meta { display: flex; flex-wrap: wrap; margin-top: 3px; font-size: 13px; color: var(--muted-2-text); }
.jr-byline-meta > span + span::before { content: "·"; margin-inline: 8px; color: var(--muted-2); }

.jr-article-figure { margin-bottom: 40px; }
.jr-visual--article { aspect-ratio: 2.2 / 1; border-radius: var(--r-xl); }
.jr-article-figure figcaption { margin-top: 10px; font-size: 13px; font-style: italic; color: var(--muted-2-text); }

/* ---------- Two columns: body ≈68% | sidebar ≈32% ---------- */
.jr-article-layout {
	display: grid;
	grid-template-columns: minmax(0, 68fr) minmax(0, 32fr);
	gap: 64px;
	align-items: start;
	padding-bottom: 72px;
}
.jr-article-main { min-width: 0; }
.jr-article-side {
	position: sticky;
	top: var(--jr-sticky-top);
	max-height: calc(100vh - var(--jr-sticky-top) - 24px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--line) transparent;
	transition: top var(--t-base) var(--ease);
}
.jr-article-side-inner { display: flex; flex-direction: column; gap: 28px; padding: 2px 4px 4px 2px; }

/* ---------- TableOfContents ---------- */
.jr-toc--sidebar .jr-toc-list { border-left: 1px solid var(--line); }
.jr-toc-link {
	display: block;
	margin-left: -1px;
	padding: 6px 0 6px 14px;
	border-left: 2px solid transparent;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--muted);
	transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.jr-toc-link--sub { padding-left: 28px; font-size: 13px; color: var(--muted-2-text); }
.jr-toc-link:hover { color: var(--ink); }
.jr-toc-link.is-active { border-left-color: var(--brand-text); color: var(--brand-text); font-weight: 600; }

.jr-toc--disclosure { display: none; margin-bottom: 28px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.jr-page .jr-toc-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink);
}
.jr-toc-toggle > span:first-of-type { flex: 1; text-align: left; }
.jr-toc-toggle-count { padding: 2px 8px; border-radius: 999px; background: var(--line-soft); font-size: 12px; color: var(--muted); }
.jr-toc-toggle .jr-icon:last-child { transition: transform var(--t-base) var(--ease); }
.jr-toc-toggle[aria-expanded="true"] .jr-icon:last-child { transform: rotate(180deg); }
.jr-toc--disclosure .jr-toc-panel { padding: 0 16px 14px; }
.jr-toc--disclosure .jr-toc-panel[hidden] { display: none; }
.jr-toc--disclosure .jr-toc-link { border-left: 0; padding: 9px 0; border-top: 1px solid var(--line-faint); font-size: 14px; }
.jr-toc--disclosure .jr-toc-link--sub { padding-left: 16px; }

/* ---------- Sidebar blocks ---------- */
.jr-share { display: flex; align-items: center; gap: 8px; }
.jr-page .jr-share-btn {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--surface);
	color: var(--muted);
	transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.jr-page .jr-share-btn:hover { border-color: var(--brand-text); color: var(--brand-text); background: var(--surface); }
.jr-page .jr-share-btn.is-copied { border-color: var(--success-text); color: var(--success-text); }
.jr-author-mini-link { display: flex; align-items: center; gap: 12px; }
.jr-author-mini-link strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.jr-author-mini-link span span { display: block; font-size: 12.5px; line-height: 1.4; color: var(--muted-2-text); }
.jr-author-mini-link:hover strong { color: var(--brand-text); }
.jr-news-mini { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.jr-news-mini-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-text); }
.jr-page .jr-news-mini-title { margin-top: 12px; font-size: 16px; letter-spacing: -.02em; line-height: 1.3; }
.jr-news-mini-body { margin: 6px 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.jr-news-mini-cta { width: 100%; }

/* Sidebar: related articles */
.jr-side-posts { display: grid; gap: 14px; }
.jr-side-post { display: flex; align-items: flex-start; gap: 12px; }
.jr-side-post-thumb {
	flex: none;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: var(--r-sm);
}
.jr-side-post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.jr-side-post-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jr-side-post-title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	font-family: var(--font-display);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: -.012em;
	line-height: 1.35;
	color: var(--ink);
	transition: color var(--t-fast) var(--ease);
}
.jr-side-post:hover .jr-side-post-title { color: var(--brand-text); }
.jr-side-post-meta { font-size: 12px; font-weight: 500; color: var(--muted-2-text); }

/* Sidebar: explore categories */
.jr-side-cat-list { display: grid; gap: 2px; }
.jr-side-cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 10px;
	border-radius: var(--r-sm);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--muted);
	transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.jr-side-cat:hover { background: var(--line-soft); color: var(--ink); }
.jr-side-cat.is-current { background: var(--brand-tint); color: var(--brand-text); font-weight: 600; }
.jr-side-cat-count { flex: none; font-size: 12px; font-weight: 600; color: var(--muted); }
.jr-side-cat.is-current .jr-side-cat-count { color: var(--brand-text); }

/* ---------- .prose ---------- */
.prose {
	font-size: 17px;
	line-height: 1.75;
	color: var(--muted);
	overflow-wrap: break-word;
}
.jr-page .prose > * { margin-block: 0 22px; }
.prose p, .prose ul, .prose ol, .prose blockquote:not(.wp-block-pullquote blockquote), .prose dl, .prose .callout, .prose [class*="is-style-callout"] { max-width: 68ch; }
.prose > p:first-of-type { margin-bottom: 40px; font-size: 19px; line-height: 1.7; color: var(--muted); }
.prose h2, .prose h3, .prose h4 { max-width: 68ch; font-family: var(--font-display); font-weight: 600; color: var(--ink); scroll-margin-top: calc(var(--jr-sticky-top) + 12px); }
.jr-page .prose h2 { margin: 48px 0 20px; font-size: 28px; letter-spacing: -.026em; line-height: 1.2; }
.jr-page .prose h3 { margin: 36px 0 16px; font-size: 22px; letter-spacing: -.022em; line-height: 1.28; }
.jr-page .prose h4 { margin: 28px 0 12px; font-size: 18px; letter-spacing: -.02em; line-height: 1.35; }
.prose a { color: var(--brand-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--brand-text-hover); text-decoration-thickness: 2px; }
.prose strong, .prose b { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { padding-left: 24px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 12px; }
.prose li::marker { color: var(--brand-text); }
.prose li > ul, .prose li > ol { margin-top: 12px; }
.prose hr { margin: 48px 0; border: 0; border-top: 1px solid var(--line); }

.prose blockquote {
	margin: 32px 0;
	padding: 2px 0 2px 24px;
	border-left: 3px solid var(--brand-text);
	font-family: var(--font-display);
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
	letter-spacing: -.015em;
	line-height: 1.5;
	color: var(--ink);
}
.prose blockquote p { max-width: none; margin: 0; }
.prose blockquote p + p { margin-top: 12px; }
.prose blockquote cite { display: block; margin-top: 12px; font-family: var(--font-body); font-size: 13px; font-style: normal; font-weight: 600; color: var(--muted-2-text); }

/* Pull quote: full-bleed card. */
.prose .wp-block-pullquote {
	margin: 40px 0;
	padding: 40px;
	border: 0;
	border-radius: var(--r-lg);
	background: var(--tint-info);
	text-align: left;
}
.prose .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; font-size: 24px; line-height: 1.4; }
.prose .wp-block-pullquote p { font-size: inherit; }
.prose .wp-block-pullquote cite { color: var(--muted); }

.prose code {
	padding: 2px 6px;
	border-radius: 5px;
	background: var(--line-soft);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
	font-size: .88em;
	color: var(--ink);
}
.jr-code { position: relative; margin-block: 0 22px; }
.prose pre {
	overflow-x: auto;
	margin: 0;
	padding: 20px;
	border-radius: var(--r-md);
	background: var(--dark);
	color: var(--line-soft);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
	font-size: 14px;
	line-height: 1.6;
	tab-size: 4;
}
.prose pre code { padding: 0; background: none; color: inherit; font-size: inherit; }
.jr-page .jr-code-copy {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 6px 10px;
	border: 1px solid color-mix(in srgb, var(--on-fill) 22%, transparent);
	border-radius: var(--r-sm);
	background: color-mix(in srgb, var(--on-fill) 10%, transparent);
	color: var(--line-soft);
	font-size: 12px;
	font-weight: 600;
}
.jr-page .jr-code-copy:hover { background: color-mix(in srgb, var(--on-fill) 18%, transparent); }
.jr-page .jr-code-copy:focus-visible { outline-color: var(--brand-xl); }

/* Images and figures: full width of the prose column. */
.prose img { width: 100%; height: auto; border-radius: var(--r-md); }
.prose figure { margin: 32px 0; }
.prose figcaption, .prose .wp-element-caption { margin-top: 10px; font-size: 13px; font-style: italic; line-height: 1.5; color: var(--muted-2-text); }

/* DataTable */
.prose .wp-block-table, .prose figure[data-jr-table] { margin: 32px 0; }
.jr-table-scroll {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface);
}
.jr-table-scroll:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 3px; }
.prose table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.prose th, .prose td { padding: 12px; border: 0; border-top: 1px solid var(--line-faint); text-align: left; vertical-align: top; }
.prose thead th, .prose tr:first-child th { border-top: 0; background: var(--line-soft); font-weight: 600; color: var(--ink); }
.prose tbody tr:first-child td { border-top: 0; }
.prose td:first-child { color: var(--ink); font-weight: 500; }
.prose .is-style-data thead th { background: var(--brand-xd); color: var(--on-fill); }
.prose .is-style-data tbody tr:nth-child(even) td { background: var(--line-faint); }
.prose .is-style-data td:first-child { font-weight: 600; }

/* Callouts: .callout--info|data|warning, or the Group block styles. */
.callout, .prose .is-style-callout-info, .prose .is-style-callout-data, .prose .is-style-callout-warning {
	margin: 32px 0;
	padding: 20px 24px;
	border-radius: var(--r-md);
	font-size: 16px;
	line-height: 1.65;
}
.callout > :last-child, .callout-body > :last-child, .prose [class*="is-style-callout"] > :last-child { margin-bottom: 0; }
.callout-title { margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.callout-body p { max-width: none; margin: 0 0 10px; }
.callout--info, .prose .is-style-callout-info {
	border: 1px solid color-mix(in srgb, var(--brand-text) 25%, var(--tint-info));
	background: var(--tint-info);
	color: var(--ink);
}
.callout--info .callout-title { color: var(--brand-xd); }
.callout--data, .prose .is-style-callout-data {
	border: 1px solid var(--line);
	border-left: 3px solid var(--brand-text);
	background: var(--surface);
	color: var(--muted);
}
.callout--data .callout-title { color: var(--brand-text); }
.callout--data strong, .prose .is-style-callout-data strong { font-family: var(--font-display); font-size: 1.15em; letter-spacing: -.02em; color: var(--ink); }
.callout--warning, .prose .is-style-callout-warning {
	border: 1px solid color-mix(in srgb, var(--amber) 22%, var(--surface));
	border-left: 3px solid var(--amber-text);
	background: color-mix(in srgb, var(--amber) 7%, var(--surface));
	color: var(--ink);
}
.callout--warning .callout-title { color: var(--amber-text); }
.jr-tldr { margin-top: 0; margin-bottom: 36px; max-width: 68ch; }

/* Answer capsule (AEO): a self-contained answer right under a question heading. */
.prose .jr-answer-capsule, .prose .is-style-answer-capsule {
	padding: 18px 22px;
	border: 1px solid var(--line);
	border-left: 3px solid var(--brand-text);
	border-radius: var(--r-md);
	background: var(--surface);
	font-weight: 500;
	color: var(--ink);
}
.prose > p.jr-answer-capsule:first-of-type { margin-bottom: 22px; font-size: 17px; }

/* Yoast FAQ block inside articles. */
.prose .schema-faq { display: grid; gap: 12px; max-width: 68ch; }
.prose .schema-faq-section { padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.prose .schema-faq-question { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.015em; line-height: 1.35; color: var(--ink); }
.prose .schema-faq-answer { margin: 8px 0 0; font-size: 16px; }

/* ---------- AuthorBioCard ---------- */
.jr-bio {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	margin-top: 56px;
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
}
.jr-bio-body { flex: 1; min-width: 0; }
.jr-bio .jr-side-label { margin-bottom: 4px; }
.jr-page .jr-bio-name { font-size: 20px; letter-spacing: -.024em; }
.jr-bio-role { margin-top: 2px; font-size: 14px; color: var(--muted-2-text); }
.jr-bio-text { margin-top: 12px; font-size: 15px; line-height: 1.65; color: var(--muted); }
.jr-bio .jr-tags { margin-top: 14px; }
.jr-bio .jr-arrow-link { margin-top: 16px; }

/* ---------- Related ---------- */
.jr-related { padding-block: 64px; border-top: 1px solid var(--line); }

/* ---------- BackToTop (visible after 60%) ---------- */
.jr-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 900;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--brand-fill);
	color: var(--on-fill);
	box-shadow: var(--shadow-md);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), background-color var(--t-fast) var(--ease);
}
.jr-top[hidden] { display: none; }
.jr-top.is-visible { opacity: 1; transform: none; }
.jr-top:hover { background: var(--brand-fill-hover); }

/* ---------- ≤1080px: single column, TOC as a disclosure above the body ---------- */
@media (max-width: 1080px) {
	.jr-article-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.jr-article-side { position: static; max-height: none; overflow: visible; }
	.jr-toc--sidebar { display: none; }
	.jr-toc--disclosure { display: block; }
	.jr-article-side-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 0; }
	.jr-news-mini { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	.jr-article-deck { font-size: 17.5px; }
	.jr-visual--article { aspect-ratio: 1.4 / 1; border-radius: var(--r-lg); }
	.jr-article-figure { margin-bottom: 32px; }
	.prose { font-size: 16.5px; }
	.prose > p:first-of-type { font-size: 18px; margin-bottom: 32px; }
	.jr-page .prose h2 { font-size: 24px; }
	.jr-page .prose h3 { font-size: 20px; }
	.prose .wp-block-pullquote { padding: 28px 24px; }
	.prose .wp-block-pullquote blockquote { font-size: 20px; }
	.jr-article-side-inner { grid-template-columns: minmax(0, 1fr); }
	.jr-bio { flex-direction: column; padding: 22px; }
	.jr-top { right: 16px; bottom: 16px; }
}

/* ---------- Print: typography-forward, no chrome ---------- */
@media print {
	@page { margin: 18mm 16mm; }
	body { background: none; }
	.mrb-header, .site-header, .mrb-footer, .mrb-skip-link, .mrb-consent, .mrb-floating-tools, .mrb-inquiry,
	.jr-progress, .jr-top, .jr-article-side, .jr-toc, .jr-breadcrumbs, .jr-related, .jr-news, .jr-bio .jr-arrow-link, .jr-code-copy { display: none; }
	.jr-page { background: var(--surface); color: var(--ink); font-size: 11pt; }
	.jr-wrap { max-width: none; padding: 0; }
	.jr-article-layout { display: block; padding: 0; }
	.jr-article-hero { padding: 0 0 12pt; }
	.jr-page .jr-article-title { font-size: 26pt; }
	.jr-article-deck { font-size: 13pt; }
	.jr-article-figure { break-inside: avoid; margin-bottom: 16pt; }
	.jr-visual-knit, .jr-visual-vignette { display: none; }
	.prose { font-size: 11pt; line-height: 1.55; color: var(--ink); }
	.prose p, .prose li { max-width: none; orphans: 3; widows: 3; }
	.prose h2, .prose h3 { break-after: avoid; }
	.prose table, .prose figure, .callout, .prose pre { break-inside: avoid; }
	.prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: var(--muted); word-break: break-all; }
	.jr-table-scroll { overflow: visible; border-color: var(--muted-2); }
	.jr-bio { border-color: var(--muted-2); break-inside: avoid; }
}

/* ---------- Dark appearance (tokens in journal.css) ---------- */
[data-theme="night"] .prose pre { border: 1px solid var(--line); }