body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 78% 12%, rgba(255, 255, 255, 0.045), transparent 27rem),
        var(--bg-paper);
}

.page-blog {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-blog::before {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.34) 0.55px, transparent 0.7px);
    background-size: 83px 79px;
    content: "";
    opacity: 0.22;
    pointer-events: none;
}

.header-blog {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 84px;
    padding: 0 clamp(24px, 4vw, 64px);
    border-bottom: 1px solid var(--hairline);
}

.header-blog .logo,
.header-blog .nav-link {
    min-height: 44px;
    color: var(--fg-ink);
    font-size: var(--text-xs);
    font-weight: 600;
}

.header-blog .nav-header {
    position: static;
    display: flex;
    gap: 26px;
    transform: none;
}

.header-blog .nav-link {
    color: var(--fg-muted);
}

.header-blog .nav-link:hover {
    color: var(--fg-ink);
    opacity: 1;
}

.blog-layout {
    position: relative;
    z-index: 2;
    flex: 1;
    width: min(100%, 1160px);
    margin: 0 auto;
    padding: clamp(72px, 10vw, 136px) clamp(24px, 4vw, 64px) 100px;
}

.section-title {
    margin: 0;
    color: var(--fg-ink);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(4rem, 10vw, 7.5rem);
    font-weight: 400;
    line-height: 0.9;
}

.section-subtitle {
    display: flex;
    align-items: center;
    max-width: 450px;
    margin: 28px 0 clamp(64px, 8vw, 94px);
    gap: 14px;
    color: var(--fg-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.section-subtitle::before {
    width: 28px;
    height: 1px;
    flex: none;
    background: var(--fg-muted);
    content: "";
}

.posts-list {
    display: flex;
    flex-direction: column;
    max-width: none;
    gap: 0;
    border-top: 1px solid var(--hairline);
    counter-reset: post;
}

.post-card {
    position: relative;
    display: grid;
    min-height: 270px;
    overflow: hidden;
    isolation: isolate;
    padding: 42px 42% 38px 60px;
    border: 0;
    border-bottom: 1px solid var(--hairline);
    background: transparent;
    counter-increment: post;
    transition: background 280ms ease;
}

.post-card::before {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: -2;
    width: 37%;
    background-image: var(--card-image, none);
    background-position: center;
    background-size: cover;
    content: "";
    opacity: 0.48;
    filter: grayscale(1) contrast(1.08);
    transform: scale(1.01);
    transition: filter 450ms ease, opacity 450ms ease, transform 650ms cubic-bezier(.2,.7,.2,1);
}

.post-card::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, var(--bg-paper) 0 58%, rgba(5, 5, 5, 0.86) 71%, rgba(5, 5, 5, 0.18));
    content: "";
    opacity: 1;
}

.post-card > * {
    position: relative;
    z-index: 1;
}

.post-card-header {
    display: block;
    margin: 0;
}

.post-card-header::before {
    position: absolute;
    top: 3px;
    left: -42px;
    color: var(--fg-faded);
    content: "0" counter(post);
    font: 500 var(--text-xxs)/1 "Inter", sans-serif;
}

.post-card-title {
    max-width: 620px;
    color: var(--fg-ink);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.8rem, 3.4vw, 2.65rem);
    font-weight: 400;
    line-height: 1.08;
    transition: transform 320ms cubic-bezier(.2,.7,.2,1);
}

.post-card-date {
    display: block;
    margin-top: 16px;
    color: var(--fg-faded);
    font-size: var(--text-xxs);
    font-weight: 600;
    text-transform: uppercase;
}

.post-card-excerpt {
    max-width: 560px;
    margin: 22px 0 20px;
    color: var(--fg-muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

.post-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.tag {
    padding: 0;
    background: none;
    color: var(--fg-faded);
    font-size: var(--text-xxs);
    font-weight: 600;
    text-transform: uppercase;
}

.tag + .tag::before {
    margin-right: 16px;
    color: var(--hairline);
    content: "/";
}

.post-card:hover {
    background: rgba(255, 255, 255, 0.025);
    transform: none;
}

.post-card:hover::before {
    opacity: 0.7;
    filter: grayscale(0.45) contrast(1.06);
    transform: scale(1.045);
}

.post-card:hover .post-card-title {
    transform: translateX(7px);
}

.footer-blog {
    position: relative;
    z-index: 2;
    padding: 28px clamp(24px, 4vw, 64px);
    border-top: 1px solid var(--hairline);
    text-align: left;
}

@media (max-width: 760px) {
    .header-blog { min-height: 70px; }
    .header-blog .nav-header { gap: 14px; }
    .blog-layout { padding-top: 72px; }
    .post-card { min-height: 360px; padding: 32px 24px 180px 42px; }
    .post-card::before { inset: auto 0 0; width: 100%; height: 190px; }
    .post-card::after { background: linear-gradient(180deg, var(--bg-paper) 0 53%, rgba(5, 5, 5, 0.82) 72%, rgba(5, 5, 5, 0.28)); }
    .post-card-header::before { left: -26px; }
    .post-card-title { font-size: 1.85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .post-card, .post-card::before, .post-card-title { transition: none; }
}