/*
 * Styles for paulsbrookes.github.io
 * A narrow, lightweight reading column.
 */

body {
    max-width: 46em;
    margin: 50px auto;
    padding: 0 20px;
    font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 375;
    font-size: 17px;
    line-height: 1.65;
    color: #333;
}

nav ul, footer ul {
    font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
    padding: 0;
    list-style: none;
    font-weight: 500;
}
nav ul li, footer ul li {
    display: inline;
    margin-right: 20px;
}

a {
    text-decoration: none;
    color: #2a6db0;
}
a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 450;
    line-height: 1.25;
    color: #222;
}
h1 {
    font-size: 2rem;
    margin: 0.6em 0 0.4em;
}
h2 {
    font-size: 1.6rem;
    margin: 1.75em 0 0.4em;
}
h3 {
    font-size: 1.3rem;
    margin: 1.5em 0 0.4em;
}

p {
    margin: 1em 0;
}

p.meta {
    margin-top: -0.3em;
    color: #999;
    font-size: 0.9em;
}

.site-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0.5em 0 2em;
}
.site-header .avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    flex-shrink: 0;
}
.site-header h1 {
    margin: 0;
}
.site-header p.intro {
    margin: 0.2em 0 0;
    color: #555;
    font-size: 1.1em;
}

blockquote {
    margin: 1em 0;
    padding-left: 1.2em;
    border-left: 3px solid #ddd;
    color: #555;
    font-style: italic;
}

code {
    font-family: 'Inconsolata', 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 0.95em;
    background: #f4f4f4;
    padding: 0.1em 0.3em;
    border-radius: 0.2em;
}
pre {
    background: #f6f6f6;
    padding: 1em;
    border-radius: 0.4em;
    overflow-x: auto;
    font-size: 0.9rem;
    line-height: 1.5;
}
pre code {
    background: none;
    padding: 0;
    font-size: inherit;
}

footer {
    margin-top: 4em;
    padding-top: 1em;
    border-top: 1px solid #d5d5d5;
    font-size: 0.85em;
    color: #777;
}

ul.posts {
    margin: 20px 0 40px;
    padding: 0;
}
ul.posts li {
    list-style: none;
    margin-bottom: 0.5em;
}
ul.posts span {
    color: #999;
}

/*
 * Blog post layout: a left sidebar column beside the reading column.
 * The article keeps its readable width; the sidebar sits in the extra
 * space and sticks as you scroll. Stacks above the content on narrow screens.
 */
body.layout-post {
    max-width: 64em;
}
.post-layout {
    display: flex;
    align-items: flex-start;
    gap: 3.5em;
}
.post-layout .sidebar {
    flex: 0 0 11em;
    position: sticky;
    top: 50px;
    font-size: 0.9em;
    line-height: 1.5;
}
.post-layout .post-main {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 46em;
}
.sidebar-nav .sidebar-name {
    display: block;
    font-weight: 500;
    font-size: 1.05em;
    color: #222;
}
.sidebar-nav .sidebar-home {
    display: block;
    margin: 0.2em 0 1.3em;
}
.sidebar-nav ul.sidebar-links {
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: 500;
}
.sidebar-nav ul.sidebar-links li {
    display: block;
    margin: 0 0 0.4em;
}

@media (max-width: 62em) {
    body.layout-post {
        max-width: 46em;
    }
    .post-layout {
        display: block;
    }
    .post-layout .sidebar {
        position: static;
        margin-bottom: 2em;
        padding-bottom: 1em;
        border-bottom: 1px solid #e2e2e2;
    }
    .sidebar-nav .sidebar-home {
        margin-bottom: 0.6em;
    }
    .sidebar-nav ul.sidebar-links li {
        display: inline;
        margin-right: 18px;
    }
}