:root {
    --ink: #1b1a17;
    --muted: #5f5c55;
    --rule: #d8d3c7;
    --paper: #fbf9f4;
    --accent: #7a2c1c;
    --link: #1f4e79;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
    line-height: 1.65;
}

a { color: var(--link); }

.masthead {
    border-bottom: 3px double var(--rule);
    padding: 22px 20px 14px;
    text-align: center;
}

.masthead .name {
    font-size: 2.1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}

.masthead .name a {
    color: var(--ink);
    text-decoration: none;
}

.masthead .tagline {
    color: var(--muted);
    font-size: 0.85rem;
    font-style: italic;
    margin: 6px 0 0;
}

.navbar {
    border-bottom: 1px solid var(--rule);
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 10px 20px;
    text-align: center;
}

.navbar a {
    color: var(--muted);
    margin: 0 10px;
    text-decoration: none;
}

.navbar a:hover { color: var(--accent); }

.wrap {
    margin: 0 auto;
    max-width: 720px;
    padding: 30px 20px 60px;
}

.wrap.wide { max-width: 940px; }

.kicker {
    color: var(--accent);
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

h1 {
    font-size: 2rem;
    line-height: 1.2;
    margin: 8px 0 10px;
}

h2 {
    font-size: 1.25rem;
    margin: 34px 0 8px;
}

h3 {
    font-size: 1.05rem;
    margin: 24px 0 6px;
}

.dek {
    color: var(--muted);
    font-size: 1.1rem;
    font-style: italic;
    margin: 0 0 18px;
}

.byline {
    border-bottom: 1px solid var(--rule);
    color: var(--muted);
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 0.8rem;
    padding-bottom: 14px;
}

.article p { margin: 0 0 1.1em; }

.article ol, .article ul { margin: 0 0 1.2em; padding-left: 1.3em; }

.article li { margin-bottom: 0.5em; }

blockquote {
    border-left: 3px solid var(--rule);
    color: var(--muted);
    margin: 0 0 1.2em;
    padding: 2px 0 2px 16px;
}

.article-footer {
    border-top: 1px solid var(--rule);
    color: var(--muted);
    font-size: 0.85rem;
    margin-top: 40px;
    padding-top: 14px;
}

.section-head {
    border-bottom: 2px solid var(--ink);
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    margin: 40px 0 4px;
    padding-bottom: 4px;
    text-transform: uppercase;
}

.section-head:first-of-type { margin-top: 10px; }

.subsection-head {
    color: var(--muted);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    margin: 26px 0 0;
    text-transform: uppercase;
}

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

.index-list li {
    border-bottom: 1px solid var(--rule);
    padding: 14px 0;
}

.index-list a {
    display: block;
    font-size: 1.15rem;
    text-decoration: none;
}

.index-list a:hover { text-decoration: underline; }

.index-list .summary {
    color: var(--muted);
    display: block;
    font-size: 0.95rem;
    margin-top: 3px;
}

.index-list .meta {
    color: var(--muted);
    display: block;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 0.75rem;
    margin-top: 5px;
}

.sitefoot {
    border-top: 1px solid var(--rule);
    color: var(--muted);
    font-size: 0.8rem;
    margin-top: 40px;
    padding: 18px 20px 40px;
    text-align: center;
}

@media (max-width: 520px) {
    .masthead .name { font-size: 1.5rem; }
    h1 { font-size: 1.55rem; }
}