.blog-index,
.blog-post {
    --blog-ink: #201c2b;
    --blog-muted: #706b7d;
    --blog-line: #e8e3ed;
    --blog-accent: #7357d9;
    max-width: 1120px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
    color: var(--blog-ink);
}

.blog-index header {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 360px);
    gap: 1.5rem;
    align-items: end;
    margin-bottom: 1.5rem;
}

.blog-index header p,
.blog-post header p {
    color: var(--blog-accent);
    font-weight: 700;
    margin: 0 0 .5rem;
}

.blog-index h1,
.blog-post h1 {
    margin: 0;
    font-size: clamp(1.65rem, 2.7vw, 2.65rem);
    line-height: 1.2;
}

.blog-index-subtitle {
    display: block;
    color: var(--blog-muted);
    margin-top: .65rem;
    font-size: .98rem;
}

.blog-index form,
.blog-post form {
    display: grid;
    gap: .75rem;
}

.blog-index input,
.blog-post input,
.blog-post textarea {
    width: 100%;
    border: 1px solid var(--blog-line);
    border-radius: .5rem;
    padding: .75rem 1rem;
    background: #fff;
}

.blog-index button,
.blog-post button {
    border: 0;
    border-radius: .5rem;
    padding: .75rem 1rem;
    color: #fff;
    background: var(--blog-accent);
    cursor: pointer;
}

.blog-index > nav {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    border-block: 1px solid var(--blog-line);
    padding: 1rem 0;
    margin-bottom: 2rem;
}

.blog-index a { color: inherit; text-decoration: none; }
.blog-index > nav a:hover,
.blog-index article h2 a:hover { color: var(--blog-accent); }

.blog-index main {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.blog-index article {
    min-width: 0;
    border: 1px solid var(--blog-line);
    border-radius: .6rem;
    padding: 1rem;
    background: #fff;
    box-shadow: 0 8px 24px rgba(32, 28, 43, .05);
}

.blog-index article img,
.blog-post > img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: .5rem;
    margin-bottom: 1rem;
}

.blog-index article h2 { font-size: 1.35rem; line-height: 1.5; }
.blog-index article h2 { margin: .45rem 0; }
.blog-index article p,
.blog-index article time,
.blog-post time { color: var(--blog-muted); }

.blog-index main + nav {
    display: flex;
    gap: .5rem;
    margin-top: 2rem;
}

.blog-index main + nav a {
    border: 1px solid var(--blog-line);
    padding: .5rem .75rem;
    border-radius: .35rem;
}

.blog-post { max-width: 860px; }
.blog-post header { border-bottom: 1px solid var(--blog-line); padding-bottom: 1.5rem; margin-bottom: 2rem; }
.blog-post-body { font-size: 1.1rem; line-height: 2; }
.blog-post-body img, .blog-post-body video { max-width: 100%; height: auto; }
.blog-post #comments { border-top: 1px solid var(--blog-line); margin-top: 3rem; padding-top: 2rem; }
.blog-post #comments article { border-bottom: 1px solid var(--blog-line); padding: 1rem 0; }

@media (max-width: 800px) {
    .blog-index header { grid-template-columns: 1fr; }
    .blog-index main { grid-template-columns: 1fr; }
}