.blog-hero {
      padding: 52px 0 40px;
      border-bottom: 1px solid var(--border);
    }
    .blog-hero-title {
      font-family: var(--font-head);
      font-size: clamp(40px,6vw,72px);
      font-weight: 800;
      letter-spacing: -0.04em;
      line-height: 1;
      color: var(--text);
    }
    .blog-hero-sub {
      font-size: 14px; color: var(--text-3);
      font-family: var(--font-head);
      margin-top: 6px;
    }

    /* Filter pills row */
    .blog-filter { padding: 20px 0; border-bottom: 1px solid var(--border); }

    /* Featured card */
    .blog-featured {
      display: grid;
      grid-template-columns: 1fr 420px;
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      overflow: hidden;
      transition: box-shadow .2s, border-color .2s;
      cursor: pointer;
      text-decoration: none; color: inherit;
    }
    .blog-featured:hover { box-shadow: var(--shadow-md); border-color: var(--border-2); color: inherit; }

    .bf-body {
      padding: 36px 36px;
      display: flex; flex-direction: column; gap: 12px;
      background: var(--bg-card);
      transition: background .25s;
    }

    .bf-num {
      font-family: var(--font-mono);
      font-size: 64px; font-weight: 500;
      color: var(--border);
      line-height: 1;
      transition: color .25s;
    }

    .bf-title {
      font-family: var(--font-head);
      font-size: 24px; font-weight: 800;
      line-height: 1.25;
      letter-spacing: -0.02em;
      color: var(--text);
    }

    .bf-excerpt {
      font-size: 14px;
      color: var(--text-2);
      line-height: 1.7;
      flex: 1;
    }

    .bf-meta {
      font-family: var(--font-mono);
      font-size: 11px; color: var(--text-3);
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    }

    .bf-img {
      background: var(--inv-bg);
      display: flex; align-items: center; justify-content: center;
      font-size: 80px;
      min-height: 260px;
      transition: background .25s;
    }

    /* Blog grid */
    .blog-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      overflow: hidden;
    }

    .bc {
      background: var(--bg-card);
      padding: 24px;
      cursor: pointer;
      transition: background .15s;
      display: flex; flex-direction: column; gap: 8px;
      text-decoration: none; color: inherit;
    }
    .bc:hover { background: var(--bg-2); color: inherit; }

    .bc-num {
      font-family: var(--font-mono);
      font-size: 36px; font-weight: 500;
      color: var(--border);
      line-height: 1;
      transition: color .25s;
    }

    .bc-title {
      font-family: var(--font-head);
      font-size: 15px; font-weight: 700;
      line-height: 1.35;
      color: var(--text);
    }

    .bc-excerpt {
      font-size: 13px;
      line-height: 1.6;
      color: var(--text-2);
    }

    .bc-meta {
      font-family: var(--font-mono);
      font-size: 11px; color: var(--text-3);
      display: flex; align-items: center; gap: 6px;
      margin-top: auto;
    }

    /* Sidebar */
    .sw { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; margin-bottom: 16px; transition: background .25s; }
    .sw-title { font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }

    .pop-item {
      display: flex; gap: 12px; align-items: start;
      padding: 12px 0; border-bottom: 1px solid var(--border);
      text-decoration: none; color: inherit;
      transition: opacity .15s;
    }
    .pop-item:last-child { border-bottom: none; }
    .pop-item:hover { opacity: .75; }
    .pop-num { font-family: var(--font-mono); font-size: 22px; font-weight: 500; color: var(--border); min-width: 32px; line-height: 1; transition: color .25s; }
    .pop-title { font-family: var(--font-head); font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.4; }

    @media(max-width:991px){
      .blog-featured { grid-template-columns: 1fr; }
      .bf-img { min-height: 180px; }
      .blog-grid { grid-template-columns: 1fr 1fr; }
    }
    @media(max-width:575px){
      .blog-grid { grid-template-columns: 1fr; }
    }