/* jbcom — the combined stream.
 *
 * Layered over commons.css, which owns structure. This file owns palette and
 * character, and deliberately stays a sibling of Crows rather than a fourth
 * personality: same paper, same serif, same column. The stream is a table of
 * contents for three publications, so it should feel like the doorway to them
 * and not like a fourth publication competing with them.
 */

body {
    margin: 0;
    padding: 2.75rem 1.5rem 4rem;

    background: #f8f5ef;
    color: #111;

    font-family: Georgia, serif;
    line-height: 1.6;
}

a {
    color: inherit;
}


/* -------------------------------------------------------------------------- */
/* Masthead                                                                   */
/* -------------------------------------------------------------------------- */

.masthead {
    margin-bottom: 2.25rem;
    padding-bottom: 1rem;

    border-bottom: 1px solid #ddd4c5;
}

.wordmark {
    text-transform: uppercase;
    letter-spacing: .18em;

    font-size: 1.55rem;
    font-weight: 700;

    color: #8a8176;
}

.masthead nav a {
    font-size: .95rem;
    color: #6f675c;
    text-decoration: none;
}

.masthead nav a:hover {
    color: var(--accent, #1f4e5f);
    text-decoration: underline;
}


/* -------------------------------------------------------------------------- */
/* Lede                                                                       */
/* -------------------------------------------------------------------------- */

.lede {
    margin: 0 0 2.5rem;

    font-size: .95rem;
    color: #6f675c;
}

.subscribe {
    margin-left: .5rem;
    white-space: nowrap;

    color: var(--accent, #1f4e5f);
}


/* -------------------------------------------------------------------------- */
/* Stream                                                                     */
/* -------------------------------------------------------------------------- */

.stream {
    margin: 0;
    padding: 0;
    list-style: none;
}

.entry {
    padding: 2rem 0;
    border-top: 1px solid #ddd4c5;
}

.entry:first-child {
    border-top: none;
    padding-top: 0;
}

/* Publication and date, above the work. Quiet: it answers "where is this from"
 * for a reader who wants to know, and stays out of the way of one who does not. */
.entry-meta {
    margin: 0 0 .5rem;

    font-size: .85rem;
    color: #6f675c;
}

.source {
    text-transform: uppercase;
    letter-spacing: .1em;

    color: var(--accent, #1f4e5f);
}

.source::after {
    content: "·";
    margin: 0 .5rem;
    color: #b9b0a4;
}

/* The whole row is the link, so a photograph with no caption is still reachable
 * without a label being invented to click on. */
.entry-link {
    display: block;
    text-decoration: none;
}

/* The work itself. Most of these have no title — a crow is a paragraph and a
 * photograph's caption is a sentence — so this reads as prose and not as a
 * headline. It is deliberately not a heading element: these are entries in a
 * list, not sections of this page. */
.entry-text {
    margin: 0;

    font-size: 1.05rem;
    line-height: 1.6;
}

.entry-link:hover .entry-text {
    text-decoration: underline;
    text-decoration-color: var(--accent, #1f4e5f);
    text-underline-offset: .15em;
}

/* A row with nothing to show is a dated link and no more. The publication name
 * carries the hover instead, so the row still answers when it is pointed at. */
.entry-link:hover .source {
    text-decoration: underline;
    text-underline-offset: .15em;
}


/* -------------------------------------------------------------------------- */
/* An incomplete page says so                                                 */
/* -------------------------------------------------------------------------- */

.incomplete {
    margin-top: 3rem;
    padding-top: 1.25rem;

    border-top: 1px solid #ddd4c5;

    font-size: .85rem;
    font-style: italic;
    color: #6f675c;
}


/* -------------------------------------------------------------------------- */
/* Footer                                                                     */
/* -------------------------------------------------------------------------- */

.footer-line {
    font-size: .85rem;
    color: #8a8176;
}