@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600&display=swap");

body {
}
:root {
    --bg: #111;
    --fg: #f0eee6;
    --muted: #b8b2a6;
    --muted2: #8f897f;
    --link: #c7d7ff;

    --max: 38em;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 118.75%;
}

body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);

    font-size: 1em;
    line-height: 1.75;
    font-family: "Libre Baskerville", Georgia, serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
}

a {
    color: var(--muted);
}
a:hover {
    color: var(--muted2);
    text-decoration: none;
}
a:focus-visible {
    outline: 0.125em solid rgba(199, 215, 255, 0.6);
    outline-offset: 0.1875em;
    border-radius: 0.25em;
}

.btn {
    display: inline-block;
    padding: 0.2rem 0.4rem;
    margin-top: 0.6rem;
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--muted);
    border-radius: 4px;
    font-size: 0.875rem;
    font-family: "Libre Baskerville", Georgia, serif;
    letter-spacing: 0.05em;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.btn:hover {
    background: var(--fg);
    color: var(--bg);
    border-color: var(--fg);
}

.top {
    max-width: var(--max);
    margin: 0 auto;
    padding: 1.125em 1.25em 0.625em;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1em;
}

.brand {
    font-size: 1.375em;
    color: var(--fg);
    font-weight: 600;
    font-family: "Libre Baskerville", Georgia, serif;
    text-decoration: none;
}

.nav a {
    color: var(--fg);
    opacity: 0.9;
    margin-left: 0.75em;
}

.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 1.125em 1.25em 4em;
}

/* Default paragraph rhythm inside the main column */
.wrap p {
    margin: 0 0 1.125em;
}

/* If you keep using .lede, keep it subtle */
.lede {
    margin: 0 0 0.75em;
    opacity: 0.95;
}

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

.block {
    margin-top: 1.75em;
}

h2 {
    font-size: 0.94em;
    margin: 0 0 0.75em;
    font-weight: 700;
    letter-spacing: 0.0125em;
}

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

.list li {
    margin: 0.5625em 0;
}

/* Post / project pages */
.page-title {
    font-size: 1.375em;
    line-height: 1.25;
    margin-top: 0;
}

.byline {
    color: var(--muted2);
    font-size: 0.875em;
    margin: 0 0 1.25em;
}

.prose p {
    margin: 0 0 1.125em;
}

.prose h3 {
    font-size: 1em;
    margin: 1.5em 0 0.625em;
    font-weight: 700;
}

.prose ul {
    margin: 0 0 1.125em 1.25em;
    padding: 0;
}

.prose li {
    margin: 0.375em 0;
}

.post-img {
    width: 100%;
}

.tag {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--muted);
    border-radius: 3px;
    font-size: 0.75rem;
    color: var(--muted);
    letter-spacing: 0.04em;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}

/* Small screens */
@media (max-width: 520px) {
    body {
        font-size: 0.9375em;
    }
    .top {
        padding-top: 0.875em;
    }
    .nav a {
        margin-left: 0.625em;
    }
    .note {
        display: block;
        margin-left: 0;
        white-space: normal;
    }
}