/* Desirable Difficulties — shared stylesheet */

:root {
    --bg: #fffff8;
    --fg: #111111;
    --muted: #6b6b6b;
    --rule: #dddddd;
    --link: #3355aa;
    --link-visited: #55337a;
    --code-bg: #f2f2ea;
    --max-width: 46rem;
    --serif: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
}

.page {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2.5rem 1.25rem 6rem;
}

header.site-header {
    border-bottom: 1px solid var(--rule);
    margin-bottom: 2.25rem;
    padding-bottom: 1.1rem;
}

header.site-header .site-title {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}

header.site-header .site-title a {
    color: var(--fg);
    text-decoration: none;
}

header.site-header .site-tagline {
    color: var(--muted);
    font-style: italic;
    font-size: 1rem;
    margin: 0.3rem 0 0.75rem;
}

nav.site-nav {
    font-size: 0.92rem;
    font-variant: small-caps;
    letter-spacing: 0.02em;
}

nav.site-nav a {
    margin-right: 1.1rem;
    color: var(--fg);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
}

nav.site-nav a:hover { border-bottom-color: var(--link); }

a { color: var(--link); text-decoration-thickness: from-font; }
a:visited { color: var(--link-visited); }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3 { font-weight: 700; line-height: 1.25; }
h1 { font-size: 1.7rem; margin: 0 0 0.25rem; }
h2 { font-size: 1.3rem; margin: 2.2rem 0 0.75rem; }
h3 { font-size: 1.08rem; margin: 1.6rem 0 0.5rem; }

p { margin: 0 0 1.1rem; }

/* Gwern-style metadata line under post titles */
.post-meta {
    color: var(--muted);
    font-size: 0.88rem;
    font-variant: small-caps;
    letter-spacing: 0.01em;
    margin: 0.3rem 0 1.8rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--rule);
}

.post-meta span { margin-right: 1rem; display: inline-block; }
.post-meta .tags a {
    background: var(--code-bg);
    border-radius: 3px;
    padding: 0.05rem 0.4rem;
    margin-right: 0.35rem;
    text-decoration: none;
    font-variant: normal;
    font-size: 0.82rem;
    color: var(--fg);
}

/* drop cap on the opening paragraph (the one right after the metadata line) */
.post-meta + p::first-letter {
    float: left;
    font-size: 3.4rem;
    line-height: 0.82;
    padding: 0.05em 0.08em 0 0;
    font-weight: 700;
}

blockquote {
    margin: 1.4rem 0;
    padding: 0.1rem 1.1rem;
    border-left: 3px solid var(--rule);
    color: #333;
}

code, pre {
    font-family: var(--mono);
    font-size: 0.86em;
    background: var(--code-bg);
}
code { padding: 0.1em 0.3em; border-radius: 3px; }
pre { padding: 0.9rem 1rem; overflow-x: auto; border-radius: 4px; }
pre code { padding: 0; background: none; }

hr.section-break {
    border: none;
    text-align: center;
    margin: 2.4rem 0;
}
hr.section-break::after {
    content: "§";
    color: var(--muted);
}

/* footnotes, sidenote-style */
.footnote-ref { text-decoration: none; }
.footnote-ref sup { font-size: 0.75em; }

section.footnotes {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
    font-size: 0.92rem;
    color: #333;
}
section.footnotes ol { padding-left: 1.4rem; }
section.footnotes li { margin-bottom: 0.6rem; }
section.footnotes a.footnote-back { margin-left: 0.3rem; text-decoration: none; }

/* index / post list */
ul.post-list { list-style: none; padding: 0; margin: 0; }
ul.post-list li {
    margin-bottom: 1.6rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid var(--rule);
}
ul.post-list li:last-child { border-bottom: none; }

ul.post-list .entry-title {
    font-size: 1.18rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
}
ul.post-list .entry-title a { text-decoration: none; }
ul.post-list .entry-meta {
    color: var(--muted);
    font-size: 0.84rem;
    font-variant: small-caps;
    margin-bottom: 0.4rem;
}
ul.post-list .entry-abstract { margin: 0; color: #222; }

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

@media (max-width: 560px) {
    body { font-size: 17px; }
    .page { padding: 1.5rem 1rem 4rem; }
}