.blog-hero{ padding: 64px 0 40px; background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%); border-bottom: 1px solid var(--hairline);}
  .blog-hero h1{ font-size: clamp(48px, 7vw, 88px);}
  .blog-hero h1 .it{ font-style: italic; color: var(--brass); font-weight: 400;}
  .blog-hero .lead{ max-width: 60ch;}
  .blog-toolbar{ padding: 18px 0; border-bottom: 1px solid var(--hairline); position: sticky; top: 65px; background: var(--cream); z-index: 30;}
  .blog-toolbar .container{ display:flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;}
  .cats{ display:flex; gap: 6px; flex-wrap: wrap;}
  .cats button{ padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--hairline); background: var(--surface); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .2s ease; color: var(--ink); line-height: 1;}
  .cats button.is-on{ background: var(--ink); color: var(--cream); border-color: var(--ink);}
  .search{
    display:flex; align-items: center; gap: 8px;
    background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-pill);
    padding: 8px 16px; min-width: 280px;
  }
  .search input{ border: none; outline: none; background: none; flex: 1; font-size: 14px;}

  .featured{ padding: 56px 0;}
  .featured .grid{ grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center;}
  @media (max-width: 960px){ .featured .grid{ grid-template-columns: 1fr;} }
  .featured .image{
    aspect-ratio: 4/3; border-radius: var(--r-lg); overflow: hidden;
    background: linear-gradient(135deg, var(--moss-soft), var(--brass-soft));
    display:flex; align-items: center; justify-content: center;
    position: relative;
  }
  .featured .image img{ width: 100%; height: 100%; object-fit: cover; }
  .featured .image .chip{ position: absolute; top: 18px; left: 18px;}
  .featured h2{ font-size: clamp(32px, 4vw, 48px); }
  .featured .meta{ display:flex; gap: 16px; font-size: 13px; color: var(--slate); margin-bottom: 14px; flex-wrap: wrap;}
  .featured .meta b{ color: var(--ink);}

  .posts{ padding: 32px 0 80px; }
  .post-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px;}
  @media (max-width: 1000px){ .post-grid{ grid-template-columns: repeat(2,1fr);} }
  @media (max-width: 600px){ .post-grid{ grid-template-columns: 1fr;} }
  .post{
    background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg);
    overflow: hidden; transition: all .25s ease; display: flex; flex-direction: column;
  }
  .post:hover{ transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: transparent;}
  .post .img{ aspect-ratio: 4/3; display:flex; align-items:center; justify-content:center; position: relative; overflow: hidden;}
  .post .img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
  .post:hover .img img{ transform: scale(1.04); }
  .post .img .chip{ position: absolute; top: 14px; left: 14px; z-index: 1;}
  .post .body{ padding: 22px 24px 26px; flex: 1; display:flex; flex-direction: column;}
  .post .meta{ font-size: 12px; color: var(--slate); margin-bottom: 8px; display:flex; gap: 10px;}
  .post h3{ font-size: 20px; margin: 0 0 10px;}
  .post p{ color: var(--slate); font-size: 14px; flex: 1; margin: 0 0 18px; line-height: 1.55;}
  .post .read{ font-size: 13px; font-weight: 600; color: var(--brass-dk); display: inline-flex; align-items: center; gap: 6px;}

  .news{ padding: 72px 0; background: var(--ink); color: var(--cream);}
  .news .card-inner{
    background: linear-gradient(135deg, var(--brass) 0%, #6B7BD9 100%);
    border-radius: var(--r-xl); padding: 56px 48px;
    display:flex; justify-content: space-between; align-items: center; gap: 40px;
    color: #fff;
  }
  .news h2{ color: #fff; max-width: 16ch; margin: 0;}
  .news p{ color: rgba(255,255,255,.85); margin: 8px 0 0; max-width: 40ch;}
  .news form{ display:flex; gap: 8px; min-width: 360px;}
  .news input{
    flex: 1; padding: 14px 18px; border: none; border-radius: var(--r-pill);
    background: rgba(255,255,255,.95); color: var(--ink); font-size: 14px;
  }
  .news button{ background: var(--ink); color: #fff; padding: 14px 22px; border-radius: var(--r-pill); font-weight: 600; font-size: 14px;}
  @media (max-width: 800px){ .news .card-inner{ flex-direction: column; text-align: center; padding: 36px 28px;} .news form{ width: 100%; min-width: 0;} }