/* =========================
   Color System
   ========================= */

:root {
    --background: #faf9f6;
    --surface: #ffffff;

    --text: #2d3748;
    --muted: #718096;
    --border: #e2e8f0;

    --accent: #2563a8;
    --accent-hover: #1d4d7a;

    --code-bg: #f1f5f9;
    --code-dark: #1e293b;
}


/* =========================
   Global Layout
   ========================= */

body {

    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;

    background: var(--background);
    color: var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    line-height: 1.7;
}


/* =========================
   Typography
   ========================= */

h1,
h2,
h3,
h4 {

    line-height: 1.3;
    color: var(--text);

}


article {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.08rem;

}


/* =========================
   Header
   ========================= */

.site-header {

    padding-bottom: 25px;
    margin-bottom: 45px;

    border-bottom: 2px solid var(--accent);

}


.site-title {

    margin: 0;

    font-size: 2.8rem;
    font-weight: 800;

    letter-spacing: -1px;

}


.site-title a {

    color: var(--text);
    text-decoration: none;

}


.site-title a:hover {

    color: var(--accent);
    text-decoration: none;

}


.tagline {

    margin-top: .75rem;

    color: var(--muted);

    font-size: 1.15rem;

    font-style: italic;

}


.tagline::before {

    content: "// ";

    color: var(--accent);

}


/* =========================
   Footer
   ========================= */

.site-footer {

    margin-top: 60px;
    padding-top: 25px;

    border-top: 1px solid var(--border);

    color: var(--muted);

    font-size: .9rem;

    text-align: center;

}


.footer-nav {

    display: flex;

    justify-content: center;

    gap: 15px;

    align-items: center;

}


/* =========================
   Links
   ========================= */

a {

    color: var(--accent);

    text-decoration-thickness: 1px;

    text-underline-offset: 3px;

}


a:hover {

    color: var(--accent-hover);

}


/* =========================
   Blog Index
   ========================= */

.post-list-item {

    padding-bottom: 25px;

    margin-bottom: 35px;

    border-bottom: 1px solid var(--border);

}


.post-list-item h2 {

    margin-bottom: 5px;

    font-size: 1.55rem;

}


.post-list-item h2 a {

    color: var(--text);

    text-decoration: none;

}


.post-list-item h2 a:hover {

    color: var(--accent);

}


.post-date {

    color: var(--muted);

    font-size: .9rem;

    letter-spacing: .02em;

}


.post-description {

    margin-top: 12px;

    color: #4a5568;

}


/* =========================
   Article Content
   ========================= */

article h1 {

    margin-top: 0;

    font-size: 2.4rem;

}


article img {

    max-width: 100%;

    height: auto;

    border-radius: 6px;

}


article figure {

    margin: 35px 0;

    text-align: center;

}


article figcaption {

    margin-top: 8px;

    color: var(--muted);

    font-size: .9rem;

    font-style: italic;

}


/* =========================
   Quotes
   ========================= */

blockquote {

    margin: 30px 0;

    padding: 15px 20px;

    border-left: 5px solid var(--accent);

    background:
        rgba(37, 99, 168, .06);

    color: #4a5568;

    font-style: italic;

}


/* =========================
   Pagination
   ========================= */

.pagination {

    display: flex;

    justify-content: space-between;

    margin-top: 45px;

}


.pagination a {

    font-weight: 500;

}


/* =========================
   Code
   ========================= */

code {

    background: var(--code-bg);

    color: #b42318;

    padding: 3px 6px;

    border-radius: 4px;

    font-size: .9em;

}


pre {

    background: var(--code-dark);

    color: #e2e8f0;

    padding: 18px;

    overflow-x: auto;

    border-radius: 8px;

    line-height: 1.5;

}


pre code {

    background: none;

    color: inherit;

    padding: 0;

}


/* =========================
   Tables
   ========================= */

table {

    border-collapse: collapse;

    width: 100%;

    margin: 30px 0;

}


th,
td {

    border: 1px solid var(--border);

    padding: 12px;

    text-align: left;

}


th {

    background: #edf2f7;

    color: var(--text);

}


tr:nth-child(even) {

    background: #fafafa;

}


/* =========================
   Mobile
   ========================= */

@media (max-width: 600px) {


    body {

        margin: 20px auto;

        padding: 0 15px;

    }


    .site-title {

        font-size: 2rem;

    }


    article {

        font-size: 1rem;

    }


    article h1 {

        font-size: 2rem;

    }


    .pagination {

        flex-direction: column;

        gap: 15px;

    }


}