.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 40px; }
  .filter-btn { font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--fg-muted);
    background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-pill); padding: 11px 22px; cursor: pointer;
    transition: all .2s var(--ease); }
  .filter-btn:hover { border-color: var(--accent); color: var(--forest); }
  .filter-btn.active { background: var(--forest); border-color: var(--forest); color: #fff; }
  .proj-masonry { display: grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: 320px; grid-auto-flow: dense; gap: 20px; }
  .pcard { position: relative; border-radius: var(--r-md); overflow: hidden; cursor: pointer; min-height: 0;
    transition: opacity .4s var(--ease), transform .4s var(--ease); }
  .pcard.big { grid-column: span 2; }
  .pcard.tall { grid-row: span 2; }
  .pcard-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(30,51,40,.05) 40%, rgba(30,51,40,.88) 100%); }
  .pcard-img { position: absolute; inset: 0; transition: transform .6s var(--ease); }
  .pcard:hover .pcard-img { transform: scale(1.06); }
  .pcard-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 26px; }
  .pcard-info h3 { color: #fff; font-size: 21px; font-weight: 700; margin: 10px 0 0; }
  .pcard-info p { color: rgba(255,255,255,.72); font-size: 14px; margin: 8px 0 0; }
  .pcard-arrow { position: absolute; right: 20px; top: 20px; z-index: 3; width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.16); color: #fff; display: flex; align-items: center; justify-content: center;
    transition: background .25s, transform .25s; backdrop-filter: blur(4px); }
  .pcard:hover .pcard-arrow { background: var(--accent); transform: rotate(-45deg); }
  .pcard.hide { display: none; }
  .pcard-meta { position: absolute; left: 20px; top: 20px; z-index: 3; }
  @media (max-width: 920px){ .proj-masonry { grid-template-columns: 1fr 1fr; } .pcard.big { grid-column: span 2; } }
  @media (max-width: 680px){ .proj-masonry { grid-template-columns: 1fr; } .pcard.big, .pcard.tall { grid-column: auto; grid-row: auto; min-height: 280px; } }