/* ============================================================
   Reading typography for posts and the home post list.
   Loaded after clean-blog.css / theme.css.
   ============================================================ */

/* ---------- Post body ---------- */

/* Lists use the same line height as paragraphs */
article li { line-height: 1.7; }

/* Section headings: clearly below the post title */
article h2 { font-size: 22px; line-height: 1.25; margin-top: 36px; }
article h3 { font-size: 19px; line-height: 1.3;  margin-top: 28px; }
article h4 { font-size: 17px; }

/* Phones: 18px body text keeps ~40 characters per line */
@media only screen and (max-width: 767px) {
    article p,
    article li { font-size: 18px; }
}

/* Code: blocks closer to body size, inline code a touch smaller than its sentence */
article pre,
article pre code { font-size: 14px; line-height: 1.55; }
article p code,
article li code,
article td code { font-size: 0.85em; }

/* Quotes: slightly smaller than body, same airy spacing */
article blockquote,
article blockquote p,
article blockquote li { font-size: 17px; line-height: 1.6; }

@media only screen and (min-width: 768px) {
    article pre,
    article pre code { font-size: 15px; }
    article blockquote,
    article blockquote p,
    article blockquote li { font-size: 19px; }
}

@media only screen and (min-width: 768px) {
    article h2 { font-size: 26px; margin-top: 44px; }
    article h3 { font-size: 21px; margin-top: 32px; }
    article h4 { font-size: 18px; }
}

/* ---------- Home post list ---------- */

.post-preview > a > .post-title    { font-size: 22px; line-height: 1.25; }
.post-preview > a > .post-subtitle { font-size: 17px; line-height: 1.4; }
.post-preview > .post-meta         { font-size: 15px; }

@media only screen and (min-width: 768px) {
    .post-preview > a > .post-title    { font-size: 30px; }
    .post-preview > a > .post-subtitle { font-size: 21px; }
    .post-preview > .post-meta         { font-size: 17px; }
}