/* ============================================================ AUDHDSPACE — Article reading view ============================================================ */ .post-page { max-width: var(--max-prose-width); margin-inline: auto; padding-block: 1.5rem 2.5rem; } .post-title { font-size: 1.9rem; font-weight: 700; margin-block: 0.5em 1em; } .post-meta { color: var(--color-text-muted); font-size: 0.85rem; margin-block-end: 1em; } .post-meta a { color: var(--color-text-muted); } .post-meta a:hover { color: var(--color-accent); } .zen-toggle-btn { margin-block-end: 1.5em; } .post-tldr { background: var(--color-sidebar-bg); border-inline-start: 4px solid var(--color-accent); padding: 1rem 1.25rem; margin-block-end: 2em; border-radius: 6px; } .post-tldr-label { font-weight: 700; color: var(--color-accent); display: block; margin-block-end: 0.4em; } .post-body { font-size: 1.05rem; } .post-body h2 { font-size: 1.4rem; margin-block-start: 1.75em; } .post-body h3 { font-size: 1.2rem; margin-block-start: 1.5em; } .post-body ul, .post-body ol { margin-block-end: var(--space-paragraph); padding-inline-start: 1.5em; } .post-body figure { margin-block: 2em; } .post-body figcaption { color: var(--color-text-muted); font-size: 0.85rem; margin-block-start: 0.5em; text-align: center; } .post-body a { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; } .post-body a:hover { color: var(--color-accent-hover); } /* ── Zen Mode ────────────────────────────────────────────── Toggled by JS adding .zen-active to . Hides header/sidebar/footer, centers article on a deliberately muted background to reduce visual noise. */ body.zen-active .site-header, body.zen-active .site-footer { display: none !important; } body.zen-active { background: var(--color-sidebar-bg); } body.zen-active .post-page { max-width: 65ch; padding-block: 4rem; } body.zen-active .zen-toggle-btn { position: fixed; inset-block-start: 1rem; inset-inline-end: 1rem; z-index: 10; } /* ── Zen Mode on mobile: maximize the reading tunnel ── Bigger text, no side padding wasted on chrome, background pulled darker/muted. */ @media (max-width: 768px) { body.zen-active { background: var(--color-sidebar-bg); } body.zen-active .post-page { max-width: 100%; padding-inline: 1.25rem; padding-block: 3.5rem 2rem; } body.zen-active .post-body, body.zen-active .post-tldr { font-size: 1.25rem; line-height: 1.8; } body.zen-active .post-title { font-size: 1.6rem; } body.zen-active .zen-toggle-btn { inset-block-start: 0.75rem; inset-inline-end: 0.75rem; } }