/* Editorial pages retain the approved draft's reading style. */
.home-page.blog-page {
    --bg: #fbfaf7;
    --paper: #fbfaf7;
    --text: #242422;
    --ink: #242422;
    --muted: #69685f;
    --line: #dad8d1;
    background: var(--bg);
    color: var(--text);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 19px;
    line-height: 1.75;
}

.blog-main {
    max-width: 760px;
    margin-inline: auto;
    padding: 48px 32px 90px;
}

.blog-article-header h1 {
    margin: 24px 0;
    font-size: clamp(38px, 6vw, 62px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.blog-meta,
.blog-back,
.blog-contents,
.blog-read-link {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.8;
}

.blog-meta { color: var(--muted); }
.blog-main a { color: inherit; text-underline-offset: 3px; }
.blog-main a:hover { text-decoration-thickness: 2px; }
.blog-main p { margin-bottom: 23px; }

.blog-contents {
    margin: 36px 0;
    padding-block: 14px;
    border-block: 1px solid var(--line);
}

.blog-contents summary { cursor: pointer; }
.blog-contents ul { list-style: none; margin-top: 12px; }
.blog-contents li { margin-block: 7px; }
.blog-contents a { text-decoration: none; }

.blog-prose h2 {
    margin: 64px 0 20px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: 29px;
    font-weight: 400;
    line-height: 1.25;
    scroll-margin-top: 24px;
}

.blog-prose code {
    font: 0.82em/1.6 ui-monospace, monospace;
    overflow-wrap: anywhere;
}

.blog-prose pre {
    margin-bottom: 23px;
    padding: 22px;
    overflow: auto;
    background: #f0eee8;
    line-height: 1.6;
}

.blog-prose pre code { white-space: pre; overflow-wrap: normal; }
.blog-prose a { overflow-wrap: anywhere; }
.blog-figure { margin: 36px 0; }
.blog-figure a { display: block; }
.blog-figure img { width: 100%; height: auto; display: block; }
.blog-prose hr { margin: 48px 0 28px; border: 0; border-top: 1px solid var(--line); }

.blog-entry {
    margin-top: 48px;
    padding-block: 32px;
    border-block: 1px solid var(--line);
}

.blog-entry h2 { margin-bottom: 20px; font-size: 34px; line-height: 1.2; font-weight: 400; }
.blog-entry h2 a { text-decoration: none; }
.blog-listing { min-height: 65vh; }

.blog-skip-link {
    position: absolute;
    top: 0;
    left: 16px;
    padding: 10px 16px;
    transform: translateY(-150%);
    background: var(--paper);
    color: var(--ink);
    z-index: 5;
}

.blog-skip-link:focus { transform: translateY(0); }

@media (max-width: 520px) {
    .home-page.blog-page { font-size: 17px; }
    .blog-main { padding: 28px 22px 65px; }
    .blog-prose h2 { font-size: 26px; }
    .blog-entry h2 { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

@media print {
    .blog-page .site-header,
    .blog-back,
    .blog-contents,
    .blog-skip-link { display: none; }
    .home-page.blog-page { background: white; font-size: 12pt; }
    .blog-main { max-width: none; padding: 0; }
    .blog-prose h2 { break-after: avoid; }
    .blog-figure { break-inside: avoid; }
}