/* Incremental CEO — a plain black/white serif site.
   Dark mode is two token blocks and nothing else. */

:root {
    --ink: #101010;
    --ink-muted: #6b6b6b;
    --ink-faint: #a8a8a8;
    --paper: #fbfbf9;
    --rule: #101010;
    --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #e8e6e1;
        --ink-muted: #9a9892;
        --ink-faint: #5e5c58;
        --paper: #121211;
        --rule: #e8e6e1;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0 1.25rem;
    background: var(--paper);
    color: var(--ink);
    font-family: Iowan Old Style, Palatino, Palatino Linotype, Georgia, serif;
    font-size: 1.0625rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

main { max-width: var(--measure); margin: 0 auto; padding: 4rem 0 6rem; }

h1, h2, h3 { font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: 1.75rem; margin: 0 0 0.25rem; }
h2 { font-size: 1.25rem; margin: 2.5rem 0 0.5rem; }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-style: dotted; }

/* Dotted borders, used for every division on the site. */
.rule { border: 0; border-top: 1px dotted var(--rule); opacity: 0.45; margin: 2.5rem 0; }

blockquote {
    margin: 2.25rem 0;
    padding: 0.25rem 0 0.25rem 1.5rem;
    border-left: 1px dotted var(--rule);
    color: var(--ink-muted);
    font-style: italic;
}

.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.small { font-size: 0.875rem; }