/* Gwern.net inspired typography — monochrome, strict serif, 150% line-height */
body {
    font-family: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
    font-size: 20px;
    line-height: 1.5;
    color: #000;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
    background-color: #fff;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1 {
    font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
    font-size: 2.2em;
    font-weight: 600;
    margin: 1.5em 0 0.8em 0;
    color: #000;
    line-height: 1.25;
}

h2 {
    font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
    font-size: 1.6em;
    font-weight: 600;
    margin: 1.8em 0 0.6em 0;
    color: #000;
    line-height: 1.3;
}

h3 {
    font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
    font-size: 1.3em;
    font-weight: 600;
    margin: 1.5em 0 0.5em 0;
    color: #000;
    line-height: 1.35;
}

p {
    margin-bottom: 1.4em;
    text-align: justify;
    hyphens: auto;
}

/* Automatic smallcaps for acronyms */
abbr, .smallcaps {
    font-variant: small-caps;
    letter-spacing: 0.05em;
    text-decoration: none;
    border-bottom: none;
}

blockquote {
    margin: 2em 0;
    padding: 0 2em;
    border-left: 2px solid #ccc;
    color: #333;
    font-style: italic;
    font-size: 0.95em;
    line-height: 1.5;
}

/* Monochrome link styling */
a {
    color: #000;
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.3);
    text-underline-offset: 2px;
}

a:hover {
    text-decoration-color: rgba(0, 0, 0, 0.8);
}

a:visited {
    color: #444;
}

small {
    font-size: 0.85em;
    color: #666;
    line-height: 1.5;
}

date {
    font-weight: 600;
    color: #333;
}

img {
    max-width: 100%;
    height: auto;
}

/* Sidenotes for wide screens (replaces footnotes) */
.sidenote {
    float: right;
    clear: right;
    width: 200px;
    margin-right: -240px;
    margin-bottom: 1em;
    font-size: 0.8em;
    line-height: 1.4;
    color: #555;
}

/* Subscribe form */
.subscribe-form {
    margin-top: 3em;
    padding-top: 1.5em;
    border-top: 1px solid #ccc;
}

/* The form is the last thing on the page, so on a phone there is nothing
   below it for the browser to scroll up and the keyboard covers it. While
   it has focus, add room underneath so it can sit above the keyboard. */
.subscribe-form:focus-within {
    padding-bottom: 60vh;
}

.subscribe-form input {
    scroll-margin-bottom: 2em;
}

.subscribe-form label {
    display: block;
    margin-bottom: 0.5em;
    font-size: 0.95em;
}

.subscribe-form input[type="email"] {
    font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
    font-size: 0.9em;
    padding: 6px 10px;
    border: 1px solid #999;
    margin-right: 8px;
}

.subscribe-form input[type="submit"] {
    font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
    font-size: 0.9em;
    padding: 6px 14px;
    background: #000;
    color: #fff;
    border: 1px solid #000;
    cursor: pointer;
}

.subscribe-form input[type="submit"]:hover {
    background: #333;
    border-color: #333;
}

.subscribe-form p {
    font-size: 0.8em;
    color: #999;
    text-align: left;
}

/* Math (KaTeX). A display equation is a block as wide as the text column
   (the full screen width minus the page gutter on phones); if the formula is
   wider, it scrolls sideways inside its own box. Same for code blocks. */
.math.display,
.math-wide,
.katex-display {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* .math-wide: an inline formula too long for the column; a script moves it
   onto its own line as a scrolling block instead of overflowing the page. */
.math-wide,
.katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.2em 0; /* room for tall glyphs, since overflow-y is hidden */
    -webkit-overflow-scrolling: touch;
}

pre {
    max-width: 100%;
    overflow-x: auto;
}

/* Last line of defence: nothing (an unbreakable inline formula, a wide
   image, a long URL) may make the whole page scroll sideways. */
html {
    overflow-x: hidden; /* fallback for browsers without clip */
    overflow-x: clip;
}

/* Responsive design */
@media (max-width: 600px) {
    body {
        font-size: 17px;
        padding: 20px 15px;
    }

    h1 {
        font-size: 1.9em;
        margin: 1.2em 0 0.6em 0;
    }

    h2 {
        font-size: 1.4em;
        margin: 1.5em 0 0.5em 0;
    }

    h3 {
        font-size: 1.2em;
        margin: 1.3em 0 0.4em 0;
    }

    blockquote {
        margin: 1.5em 0;
        padding: 0 1.5em;
        font-size: 0.93em;
    }

    p {
        text-align: left;
    }

    /* Sidenotes collapse to inline on mobile */
    .sidenote {
        float: none;
        width: auto;
        margin: 0.5em 0;
        padding: 0.5em 1em;
        border-left: 1px solid #ccc;
        display: block;
    }
}