/* Developer writing uses the same type and reading measure as resident stories. */
.blog-main,.blog-index { max-width:var(--reading); padding-block:var(--page-top) var(--page-bottom); }
.blog-back { display:inline-block; margin-bottom:32px; font-size:16px; color:var(--muted); text-decoration:none; }
.blog-back:hover { color:var(--green); text-decoration:underline; }
.blog-lead .eyebrow { color:var(--rust); }
.blog-lead h1 { font-size:clamp(36px,4.5vw,50px); line-height:1.15; }
.blog-deck { font-size:22px; line-height:1.65; color:var(--muted); margin-top:24px; }
.blog-meta { color:var(--muted); font-size:15px; margin-top:24px; }
.blog-server-note { margin-top:28px; padding:20px 24px; background:var(--tint); border-left:3px solid var(--green); }
.blog-server-note p { font-size:19px; line-height:1.7; }
.blog-server-note strong { font-weight:650; }
.blog-contents { display:grid; grid-template-columns:1fr 1.1fr 1.5fr; gap:24px; margin-block:32px 40px; padding-block:20px; border-block:1px solid var(--line); }
.blog-contents a { font-size:16px; line-height:1.5; color:var(--muted); text-decoration:none; }
.blog-contents a:hover { color:var(--green); text-decoration:underline; }
.blog-contents span { display:block; color:var(--rust); font-size:14px; margin-bottom:7px; }
.blog-body p { font-size:21px; line-height:1.75; margin-bottom:22px; }
.blog-body h2 { font-size:34px; margin:48px 0 30px; padding-top:36px; border-top:1px solid var(--line); }
.blog-body h3 { font-size:27px; margin:34px 0 20px; }
.blog-body .table-scroll { margin-block:28px; }
.blog-body table { min-width:480px; font-variant-numeric:tabular-nums; }
.blog-body table td:not(:first-child),.blog-body table th:not(:first-child) { white-space:nowrap; }
.blog-entry { border-block:1px solid var(--line); margin-top:42px; padding-block:28px 34px; }
.blog-entry .blog-meta { margin:0 0 16px; }
.blog-entry h2 { font-size:32px; margin-bottom:20px; }
.blog-entry h2 a { text-decoration:none; }
.blog-entry h2 a:hover { text-decoration:underline; }
.blog-entry>p:not(.blog-meta) { font-size:20px; line-height:1.75; margin-bottom:24px; }
.blog-other { margin-top:30px; color:var(--muted); font-size:18px; }
@media(max-width:760px) {
 .blog-back { margin-bottom:24px; }
 .blog-lead h1 { font-size:36px; }
 .blog-deck { font-size:20px; margin-top:20px; }
 .blog-server-note { padding:18px 20px; }
 .blog-server-note p { font-size:18px; }
 .blog-contents { gap:14px; margin-block:28px; }
 .blog-contents a { font-size:15px; }
 .blog-body p { font-size:20px; }
 .blog-body h2 { font-size:29px; margin-top:36px; padding-top:30px; }
 .blog-body h3 { font-size:25px; }
 .blog-entry h2 { font-size:29px; }
 .blog-entry>p:not(.blog-meta) { font-size:19px; }
}
/* Retention tables need 480px, plus the mobile page's 40px gutters. */
@media(max-width:519px) {
 .blog-body .table-hint { display:block; font-size:15px; line-height:1.5; margin:28px 0 10px; }
 .blog-body .table-hint + .table-scroll { margin-top:0; }
}