/* The journal: a timeline of short posts on one page, so it reads as running
   text rather than as a poster. The site's body weight is bold; here it goes
   regular, the way the Wallflower pages do, because there is more of it. */
#main {
    font-weight: normal;
}

/* The heading, the notice and the first post are one block at the top of the
   page, so the heading gives up most of the air the site leaves under an h1. */
#main h1 {
    margin-bottom: 1.5em;
}

/* The notice above the timeline: what this page is, and that it is written in
   English however localized the page around it is. A box rather than a
   paragraph, since it is the page speaking about itself rather than one of the
   posts. Quiet: the secondary background the site already uses, and a size
   below the body.

   It claims its own ground, so it restates the ink on it, the way the trust
   panel on the product page does. The body grey is 2:1 on this box and the
   link colour 3.3:1, both of which are fine on the white page they were
   picked for and neither of which survives 18% of black under them. The
   emphasis ink clears 13:1 in both schemes, and the link keeps the underline
   it has everywhere. */
#main .notice {
    padding: .75em 1em;
    border-radius: .5em;
    background: var(--secondary-background);
    color: var(--emphasis-color);
    font-size: .8em;
}

#main .notice p {
    margin: 0;
}

#main .notice a {
    color: var(--emphasis-color);
}

#main .timeline {
    margin-top: 2.5em;
}

/* One post. The rule between two posts is what makes the page a timeline
   rather than one long article, so the first post does not get one — the
   heading above it is already a break. */
#main .timeline article + article {
    margin-top: 2.5em;
    padding-top: 2.5em;
    border-top: 1px solid var(--rule-color);
}

/* A post's title carries its date directly underneath, so it gives up the
   space the site otherwise leaves above and below a heading. */
#main .timeline h2 {
    margin-top: 0;
    margin-bottom: 0;
}

/* The date is the post's permalink: a fragment on the page it already is on,
   which is what the feed links to as well. Quiet, and marked as a link only
   where there is a pointer to hover it with — the whole line is a date, so
   nothing about it needs explaining. */
#main .dateline {
    margin: .4em 0 1.2em 0;
    font-size: .7em;
}

#main .dateline a {
    color: var(--main-color);
    text-decoration: none;
}

#main .dateline a:hover {
    text-decoration: underline;
}