/* Blog reading type; established homepage lettering remains unchanged. */
@font-face { font-family: "DotGothic16"; src: url("../fonts/DotGothic16-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
.blog-page { font-family: "DotGothic16", monospace; font-size: 16px; line-height: 2; }
.blog-page button, .blog-page input, .blog-page select { font-family: inherit; }
.blog-copy, .blog-post { font-size: 16px; line-height: 2; max-width: 65ch; overflow-wrap: anywhere; }
.blog-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.blog-sort select { font: inherit; color: var(--white); background: var(--black); border: 2px solid var(--white); border-radius: 0; padding: 8px; min-height: 44px; max-width: 100%; }
.blog-sort option { color: var(--white); background: var(--black); }
.blog-post { padding: 24px 0; border-bottom: 1px solid var(--white); }

.home-blog { font: 16px/1.65 "DotGothic16", monospace; max-width: 44ch; margin-top: 28px; overflow-wrap: anywhere; }
.home-blog h2 { font-size: 16px; margin: 0 0 8px; }
.home-blog p { margin: 8px 0; }
.home-blog a { text-decoration: underline; text-underline-offset: 4px; }
.home-blog .blog-meta, .blog-meta { font-size: 14px; }
.blog-article { max-width: 68ch; margin: 0 auto; }
.blog-article h1 { font-size: clamp(28px, 5vw, 48px); line-height: 1.3; margin: 28px 0 16px; overflow-wrap: anywhere; }
.blog-article h2, .blog-post h2 { font-size: 24px; line-height: 1.4; }
.blog-copy a, .blog-post a { text-decoration: underline; text-underline-offset: 4px; }
.blog-copy blockquote { margin: 24px 0; padding-left: 20px; border-left: 2px solid var(--white); }
.blog-copy img { max-width: 100%; height: auto; }
.home-blog h3 { font-size: 16px; line-height: 1.5; margin: 20px 0 8px; }

.blog-article > header { margin-bottom: 24px; }
.blog-article .blog-copy p { margin: 0 0 1.2em; line-height: 1.8; }
.blog-article .blog-copy h2 { margin: 1.6em 0 .65em; }
.blog-article .blog-copy li { margin: 12px 0; }