.blog-hero {
    padding: 160px var(--gutter) 80px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }
  .blog-hero-grid {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: end;
  }
  .blog-hero h1 { font-size: clamp(56px, 8vw, 132px); font-weight: 300; letter-spacing: -0.045em; line-height: 0.92; }
  .blog-hero h1 em { font-style: normal; color: var(--leaf); }

  .featured-post {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: center;
    background: var(--paper);
    padding: 0 0 80px;
    text-decoration: none;
    color: inherit;
  }
  .featured-post .visual {
    aspect-ratio: 16/10;
    background: var(--mist);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    transition: transform 300ms;
  }
  .featured-post:hover .visual { transform: translateY(-4px); }
  .featured-post .visual::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(132,212,154,0.2), transparent 60%);
  }

  .post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .post {
    cursor: pointer;
    transition: transform 250ms;
    text-decoration: none;
    color: inherit;
    display: block;
  }
  .post:hover { transform: translateY(-4px); }
  .post:hover .post-visual::after { opacity: 1; }
  .post-visual {
    aspect-ratio: 4/3;
    background: var(--mist);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
  }
  .post-visual::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(132,212,154,0.3), transparent);
    opacity: 0.5;
    transition: opacity 200ms;
  }
  .post-meta {
    display: flex; gap: 16px; align-items: center;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
  }
  .post-meta .cat { color: var(--leaf); }
  .post h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 10px; }
  .post p { font-size: 13px; color: var(--muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

  .filter-bar {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding: 24px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: 56px;
  }
  .filter-chip {
    padding: 8px 16px; border-radius: 999px;
    border: 1px solid var(--line);
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--muted); cursor: pointer; transition: all 180ms;
    background: none;
  }
  .filter-chip:hover, .filter-chip.active {
    background: var(--ink); color: var(--paper); border-color: var(--ink);
  }

  /* Empty state */
  .no-results {
    display: none;
    grid-column: 1/-1;
    text-align: center;
    padding: 80px 0;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.05em;
  }

  @media (max-width: 1024px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 880px) { .blog-hero-grid, .featured-post { grid-template-columns: 1fr; gap: 32px; } }
  @media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } }