@import url(
    "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"
);


:root {
    --primary: #12bdff;

    --background: #0e1318;
    --background-light: #151b22;
    --background-lighter: #1c232c;

    --text: #f2f4f6;
    --text-secondary: #a7b0bb;

    --border: #2b3540;

    --content-width: 900px;
}


* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    background:
        var(--background);

    color:
        var(--text);

    font-family:
        "Inter",
        sans-serif;

    line-height: 1.8;
}


a {
    color: inherit;

    text-decoration: none;
}


/* =========================================================
   HEADER
   ========================================================= */

.blog-header {
    position: sticky;

    top: 0;

    z-index: 100;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding:
        20px
        max(5%, calc((100% - 1200px) / 2));

    background:
        rgba(14, 19, 24, 0.94);

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

    backdrop-filter:
        blur(12px);
}


.logo {
    color: var(--primary);

    font-weight: 700;

    letter-spacing: 1px;
}


.blog-header nav {
    display: flex;

    align-items: center;

    gap: 28px;
}


.blog-header nav a {
    color: var(--text-secondary);

    font-size: 0.85rem;

    font-weight: 500;
}


.blog-header nav a:hover {
    color: var(--primary);
}


/* =========================================================
   MAIN
   ========================================================= */

.blog-container {
    width:
        min(var(--content-width), 90%);

    margin:
        0 auto;
}


/* =========================================================
   INTRO
   ========================================================= */

.blog-intro {
    padding:
        120px 0
        100px;

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


.eyebrow,
.post-number {
    margin-bottom: 15px;

    color: var(--primary);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 0.74rem;

    font-weight: 600;

    letter-spacing: 2px;
}


.blog-intro h1 {
    max-width: 800px;

    margin-bottom: 25px;

    font-size:
        clamp(3rem, 7vw, 5.3rem);

    line-height: 1.05;

    letter-spacing: -3px;
}


.blog-intro h1 span {
    color: var(--primary);
}


.blog-intro > p:not(.eyebrow) {
    max-width: 700px;

    color: var(--text-secondary);

    font-size: 1.08rem;
}


.project-links {
    display: flex;

    flex-wrap: wrap;

    gap: 25px;

    margin-top: 35px;
}


.project-links a {
    color: var(--primary);

    font-size: 0.84rem;

    font-weight: 600;
}


/* =========================================================
   POSTS
   ========================================================= */

.blog-post {
    padding:
        100px 0;

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


.post-header {
    margin-bottom: 45px;
}


.post-header h2 {
    max-width: 800px;

    margin-bottom: 15px;

    font-size:
        clamp(2.3rem, 5vw, 4rem);

    line-height: 1.12;

    letter-spacing: -1.5px;
}


.post-date {
    color: var(--text-secondary);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 0.76rem;
}


/* =========================================================
   HERO IMAGE
   ========================================================= */

.post-hero-image {
    margin:
        0 0
        60px;
}


.post-hero-image img {
    display: block;

    width: 100%;

    max-height: 600px;

    object-fit: cover;

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

    border-radius: 7px;
}


.post-hero-image figcaption {
    margin-top: 10px;

    color: var(--text-secondary);

    font-size: 0.76rem;

    text-align: center;
}


/* =========================================================
   ARTICLE
   ========================================================= */

.post-content {
    max-width: 760px;

    margin:
        0 auto;

    font-size: 1.03rem;
}


.post-content p {
    margin-bottom: 25px;

    color: #ccd2d8;
}


.post-content .post-lead {
    margin-bottom: 32px;

    color: var(--text);

    font-size: 1.25rem;

    line-height: 1.75;
}


.post-content h3 {
    margin:
        65px 0
        20px;

    color: var(--text);

    font-size: 1.7rem;

    line-height: 1.3;
}


/* =========================================================
   CODE
   ========================================================= */

pre {
    overflow-x: auto;

    margin:
        32px 0;

    padding:
        25px;

    background:
        #080c10;

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

    border-radius: 6px;

    line-height: 1.6;
}


code {
    color: #dbe3eb;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 0.84rem;
}


/* =========================================================
   SIGNAL FLOW
   ========================================================= */

.signal-flow {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 15px;

    margin:
        45px 0;

    padding:
        30px;

    background:
        var(--background-light);

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

    border-radius: 6px;
}


.signal-flow div {
    display: flex;

    align-items: center;

    gap: 8px;

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 0.79rem;
}


.signal-flow div span {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 22px;

    height: 22px;

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

    border-radius: 50%;

    color: var(--primary);

    font-size: 0.62rem;
}


.signal-flow b {
    color: var(--primary);
}


/* =========================================================
   TECHNICAL NOTE
   ========================================================= */

.technical-note {
    margin:
        35px 0;

    padding:
        22px 25px;

    background:
        rgba(18, 189, 255, 0.05);

    border-left:
        3px solid var(--primary);

    border-radius:
        0 5px 5px 0;
}


.technical-note strong {
    display: block;

    margin-bottom: 7px;

    color: var(--primary);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 0.78rem;
}


.technical-note p {
    margin: 0;

    font-size: 0.9rem;
}


/* =========================================================
   VIDEO
   ========================================================= */

.post-video {
    display: block;

    width: 100%;

    margin:
        30px 0
        50px;

    background:
        #000;

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

    border-radius: 7px;
}


/* =========================================================
   SOURCE CARD
   ========================================================= */

.source-card {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 25px;

    margin:
        60px 0;

    padding:
        25px;

    background:
        var(--background-light);

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

    border-radius: 6px;
}


.source-card small {
    display: block;

    margin-bottom: 5px;

    color: var(--text-secondary);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 0.66rem;
}


.source-card strong {
    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 0.82rem;
}


.source-card a {
    color: var(--primary);

    font-size: 0.83rem;

    font-weight: 600;
}


/* =========================================================
   NEXT POST
   ========================================================= */

.next-post {
    margin-top: 80px;

    padding-top: 45px;

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


.next-post > p:first-child {
    margin-bottom: 7px;

    color: var(--primary);

    font-family:
        "JetBrains Mono",
        monospace;

    font-size: 0.69rem;

    letter-spacing: 1.5px;
}


.next-post h3 {
    margin:
        0 0 14px;

    font-size: 1.8rem;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    padding:
        45px
        max(5%, calc((100% - 900px) / 2));

    color: var(--text-secondary);

    font-size: 0.77rem;
}


footer span {
    margin:
        0 7px;
}


footer a {
    color: var(--primary);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .blog-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 14px;
    }


    .blog-header nav {
        flex-wrap: wrap;

        gap: 15px;
    }


    .blog-intro {
        padding:
            75px 0;
    }


    .blog-intro h1 {
        font-size: 3.2rem;

        letter-spacing: -2px;
    }


    .blog-post {
        padding:
            70px 0;
    }


    .post-header h2 {
        font-size: 2.3rem;
    }


    .signal-flow {
        align-items: stretch;

        flex-direction: column;

        text-align: center;
    }


    .signal-flow div {
        justify-content: center;
    }


    .signal-flow b {
        transform: rotate(90deg);
    }


    .source-card {
        align-items: flex-start;

        flex-direction: column;
    }


    footer {
        align-items: flex-start;

        flex-direction: column;
    }

}