@layer pages {

    /* ════════════════════════════════════════════════════════
       BLOG INDEX — editorial list, no cards, hairline dividers
       ════════════════════════════════════════════════════════ */

    .blog-page {
        max-width: 720px;
        margin: 0 auto;
        padding: var(--space-12) var(--space-6) var(--space-12);
    }

    .blog-header {
        margin-bottom: var(--space-10);
        padding-bottom: var(--space-6);
        border-bottom: 1px solid var(--s2);
    }
    .blog-header .page-eyebrow {
        display: inline-block;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--signal-dim);
        font-family: var(--font-mono);
        margin-bottom: var(--space-3);
    }
    .blog-header .page-h1 {
        font-size: clamp(2rem, 4vw, 2.6rem);
        font-weight: 400;
        letter-spacing: -0.02em;
        line-height: 1.1;
        color: var(--ink);
        margin: 0 0 var(--space-3);
    }
    .blog-header .page-sub {
        font-size: 1.05rem;
        color: var(--dim);
        line-height: 1.5;
        margin: 0;
        max-width: 60ch;
    }

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

    .blog-card {
        border-bottom: 1px solid var(--s2);
    }
    .blog-card:last-child { border-bottom: 0; }

    .blog-card-link {
        display: block;
        padding: var(--space-7) 0;
        text-decoration: none;
        color: var(--ink);
        transition: opacity 0.12s;
    }
    .blog-card-link:hover { opacity: 0.7; }
    .blog-card-link:hover .blog-card-title { color: var(--signal-dim); }
    .blog-card-link:hover .blog-card-read { color: var(--signal); }

    .blog-card-meta {
        font-size: 0.7rem;
        font-family: var(--font-mono);
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--mid);
        margin-bottom: var(--space-3);
        display: flex;
        gap: var(--space-2);
        align-items: center;
    }
    .blog-card-sep {
        color: var(--s3);
        font-weight: 400;
    }

    .blog-card-title {
        font-size: clamp(1.4rem, 2.5vw, 1.65rem);
        font-weight: 600;
        color: var(--ink);
        letter-spacing: -0.018em;
        line-height: 1.2;
        margin: 0 0 var(--space-3);
        transition: color 0.12s;
    }

    .blog-card-excerpt {
        font-size: 1rem;
        color: var(--dim);
        line-height: 1.6;
        margin: 0 0 var(--space-4);
        max-width: 60ch;
    }

    .blog-card-read {
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--signal-dim);
        font-family: var(--font-mono);
        transition: color 0.12s;
    }

    .blog-empty {
        font-size: 0.95rem;
        color: var(--mid);
        padding: var(--space-10) 0;
        text-align: center;
        font-style: italic;
    }

    /* ════════════════════════════════════════════════════════
       BLOG ARTICLE — generous editorial typography
       ════════════════════════════════════════════════════════ */

    .blog-article {
        max-width: 680px;
        margin: 0 auto;
        padding: var(--space-8) var(--space-6) var(--space-12);
    }

    .blog-back {
        margin-bottom: var(--space-8);
    }
    .blog-back a {
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--mid);
        text-decoration: none;
        font-family: var(--font-mono);
        transition: color 0.12s;
    }
    .blog-back a:hover { color: var(--signal); }

    .blog-article-header {
        margin-bottom: var(--space-8);
        padding-bottom: var(--space-6);
        border-bottom: 1px solid var(--s2);
    }

    .blog-article-meta {
        font-size: 0.7rem;
        font-family: var(--font-mono);
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--mid);
        margin-bottom: var(--space-5);
        display: flex;
        gap: var(--space-2);
        align-items: center;
    }
    .blog-article-sep {
        color: var(--s3);
        font-weight: 400;
    }

    .blog-article-title {
        font-size: clamp(2rem, 4.5vw, 2.75rem);
        font-weight: 500;
        color: var(--ink);
        letter-spacing: -0.024em;
        line-height: 1.1;
        margin: 0 0 var(--space-4);
    }

    .blog-article-excerpt {
        font-size: 1.15rem;
        color: var(--dim);
        line-height: 1.55;
        margin: 0;
        font-weight: 400;
        max-width: 60ch;
    }

    /* Body — generous prose */

    .blog-article-body {
        font-size: 1.05rem;
        line-height: 1.75;
        color: var(--ink);
    }
    .blog-article-body p {
        margin: 0 0 1.5em;
    }

    .blog-article-body h1,
    .blog-article-body h2,
    .blog-article-body h3 {
        color: var(--ink);
        letter-spacing: -0.018em;
        line-height: 1.25;
        margin: 2.2em 0 0.6em;
    }
    .blog-article-body h1 { font-size: 1.7rem; font-weight: 600; }
    .blog-article-body h2 { font-size: 1.4rem; font-weight: 600; }
    .blog-article-body h3 { font-size: 1.15rem; font-weight: 600; }

    .blog-article-body ul,
    .blog-article-body ol {
        padding-left: 1.4em;
        margin: 0 0 1.5em;
    }
    .blog-article-body li {
        margin-bottom: 0.5em;
    }
    .blog-article-body li::marker {
        color: var(--mid);
    }

    .blog-article-body a {
        color: var(--signal-dim);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.22em;
        transition: color 0.12s;
    }
    .blog-article-body a:hover { color: var(--signal); }

    .blog-article-body strong { font-weight: 700; color: var(--ink); }
    .blog-article-body em { font-style: italic; }

    .blog-article-body code {
        background: var(--s1);
        padding: 0.12em 0.4em;
        border-radius: var(--r3);
        font-family: var(--font-mono);
        font-size: 0.88em;
        color: var(--ink);
    }

    .blog-article-body pre {
        background: var(--s1);
        border: 1px solid var(--s3);
        border-radius: var(--r3);
        padding: var(--space-5);
        overflow-x: auto;
        font-family: var(--font-mono);
        font-size: 0.85rem;
        line-height: 1.65;
        margin: 0 0 1.5em;
    }
    .blog-article-body pre code {
        background: transparent;
        padding: 0;
        border-radius: 0;
        font-size: inherit;
    }

    /* Responsive */

    @media (max-width: 640px) {
        .blog-page,
        .blog-article {
            padding-inline: var(--space-5);
        }
        .blog-card-link { padding: var(--space-5) 0; }
    }

}