/* About (/about/): editorial letter + side panel. Site tokens from design.css. */

body:not(.home) .entry-content > .jba2.jba2 { max-width: none; }
.jba2 { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; color: var(--cream-100); }
.jba2 a:focus-visible { outline: 2px solid var(--glow-500); outline-offset: 2px; }

.jba2-main { display: grid; gap: 40px; max-width: 820px; }
.jba2-main section { display: grid; gap: 14px; }
.entry-content .jba2 .jba2-h { margin: 0; font: 400 clamp(26px, 2.4vw, 32px)/1.2 'Lora', serif; color: var(--cream-100); }
.entry-content .jba2-main p { margin: 0; font-size: 18px; line-height: 1.7; color: var(--cream-100); }
.jba2-main a { color: var(--glow-300); }
.entry-content .jba2 .jba2-pull { padding: 6px 0 6px 24px; border-left: 2px solid var(--glow-500); font: 400 clamp(22px, 2vw, 26px)/1.4 'Lora', serif; color: var(--cream-100); }

.jba2-side { position: sticky; top: 24px; display: grid; gap: 16px; }
.jba2-box { padding: 20px 22px; background: var(--ink-900); border: 1px solid var(--ink-border); border-radius: var(--r-card); }
.entry-content .jba2 .jba2-box-h { margin: 0 0 8px; font: 400 12px/1.4 'Space Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--cream-400); }
.entry-content .jba2 ol, .entry-content .jba2 ul { margin: 0; padding: 0; list-style: none; }
.entry-content .jba2 li { margin: 0; }
.jba2-toc { counter-reset: t; }
.jba2-toc li { counter-increment: t; border-top: 1px solid var(--hairline); }
.jba2-toc li:first-child { border-top: 0; }
.jba2-toc a { display: grid; grid-template-columns: 28px minmax(0, 1fr); padding: 9px 0; font-size: 15px; line-height: 1.4; color: var(--cream-100) !important; text-decoration: none; }
.jba2-toc a::before { content: counter(t, decimal-leading-zero); font: 400 12px/1.9 'Space Mono', monospace; color: var(--glow-300); }
.jba2-toc a:hover { color: var(--glow-300) !important; }
.jba2-stats li + li { border-top: 1px solid var(--hairline); }
.jba2-stats a { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; font-size: 15px; color: var(--cream-400) !important; text-decoration: none; }
.jba2-stats b { min-width: 56px; font: 400 24px/1.1 'Lora', serif; color: var(--cream-100); }
.jba2-stats a:hover b { color: var(--glow-300); }
.jba2-cta { display: grid; gap: 6px; padding: 22px; border: 1px solid var(--glow-border); border-radius: var(--r-card); text-decoration: none; }
.jba2-cta:hover { border-color: var(--glow-500); }
.jba2-cta-t { font: 400 22px/1.25 'Lora', serif; color: var(--cream-100); }
.jba2-cta-d { font-size: 15px; line-height: 1.5; color: var(--cream-400); }
.jba2-btn { justify-self: start; margin-top: 6px; padding: 10px 20px; font-weight: 600; font-size: 15px; color: var(--ink-950); background: var(--glow-500); border-radius: var(--r-pill); }

@media (max-width: 1000px) { .jba2 { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; } }
@media (max-width: 900px) {
	.jba2 { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.jba2-main { max-width: none; }
	.jba2-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jba2-cta { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.jba2-side { grid-template-columns: minmax(0, 1fr); }
	.entry-content .jba2-main p { font-size: 17px; }
}