/* Blog reading pages — plain, readable, no flashlight, no dark veil. These pages are for reading, so we strip the signature interaction and give clean typography with a normal cursor. */ /* reading pages: normal cursor, no dark veil. The .reading class lives on the page's wrapper div (not ), so we also scope the body-level flashlight veil off via :has(). */ body.reading, body:has(.reading) { cursor: auto; } body.reading::after, body:has(.reading)::after { display: none !important; } body.reading .cursor-dot, body:has(.reading) .cursor-dot, body.reading .grain, body:has(.reading) .grain { display: none; } /* blog index */ .blog-main { max-width: 760px; } .blog-head { padding: 3.5rem 0 1.5rem; } .blog-head h1 { max-width: 18ch; } .post-list { padding: 1rem 0 2rem; } .post-card { padding: 1.75rem 0; border-bottom: 1px solid var(--line); } .post-card:first-child { border-top: 1px solid var(--line); } .post-meta { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 0.5rem; } .post-card h2 { margin: 0 0 0.6rem; font-size: clamp(1.3rem, 2.6vw, 1.7rem); } .post-card h2 a { color: var(--ink); text-decoration: none; } .post-card h2 a:hover { color: var(--c); } .post-excerpt { margin: 0; font-size: 1.02rem; color: var(--ink-soft); max-width: 60ch; } .blog-cta { padding: 2rem 0 3rem; font-size: 1.05rem; color: var(--ink); } .blog-cta a { font-family: var(--mono); } /* single post page */ .post-article { padding: 3rem 0 4rem; } .post-article .post-title { font-size: clamp(1.8rem, 4.5vw, 2.8rem); line-height: 1.1; max-width: 22ch; margin: 0 0 1rem; } .post-article .post-title::after { content: ""; } /* no caret on article titles */ .post-article .post-meta { margin-bottom: 2rem; } .post-article p { max-width: 62ch; font-size: 1.12rem; line-height: 1.7; color: var(--ink); margin: 0 0 1.4rem; } .post-article p:first-of-type::first-letter { font-family: var(--serif); font-size: 3.4rem; font-weight: 600; float: left; line-height: 0.85; margin: 0.12em 0.14em 0 0; color: var(--c); } .post-article h2 { font-size: 1.4rem; margin: 2rem 0 0.8rem; } .post-article h2::before { content: ""; } .post-article ul, .post-article ol { max-width: 60ch; font-size: 1.08rem; color: var(--ink); margin: 0 0 1.4rem; padding-left: 1.4rem; } .post-article li { margin-bottom: 0.5rem; } .post-back { display: inline-block; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c); text-decoration: none; margin-bottom: 2.5rem; } .post-back:hover { color: var(--a); } .post-back::before { content: "← "; } /* rendered post body (from the database) — same reading typography */ .post-body { margin-top: 2rem; } .post-body p { max-width: 62ch; font-size: 1.12rem; line-height: 1.7; color: var(--ink); margin: 0 0 1.4rem; } .post-body p:first-of-type::first-letter { font-family: var(--serif); font-size: 3.4rem; font-weight: 600; float: left; line-height: 0.85; margin: 0.12em 0.14em 0 0; color: var(--c); } .post-body h2 { font-size: 1.4rem; margin: 2rem 0 0.8rem; } .post-body ul, .post-body ol { max-width: 60ch; font-size: 1.08rem; color: var(--ink); margin: 0 0 1.4rem; padding-left: 1.4rem; } .post-body li { margin-bottom: 0.5rem; } .post-body strong { color: var(--ink); }