/* ============================================================
   portfolio.css — Work grid, project cards, case study layout
   ============================================================ */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);}
.work-card{position:relative;background:var(--ink);overflow:hidden;aspect-ratio:4/3.13;display:block;}
.work-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease, opacity .3s ease;}
.work-card:hover img{transform:scale(1.06);opacity:0.35;}
.work-card-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;
  opacity:0;transition:opacity .3s ease;background:linear-gradient(180deg, rgba(30,20,23,0) 30%, rgba(30,20,23,0.9) 100%);
}
.work-card:hover .work-card-overlay{opacity:1;}
.work-card-tag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--mauve);margin-bottom:6px;}
.work-card-title{color:var(--white);font-family:var(--font-heading);font-weight:600;font-size:16px;}
.work-note{margin-top:24px;font-size:13px;color:var(--text-faint);}
.work-note a{font-weight:600;color:var(--wine);}
.work-note a:hover{text-decoration:underline;}
@media (max-width:860px){.work-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.work-grid{grid-template-columns:1fr;}}

/* filters (/work/) */
.work-filters{display:flex;gap:10px;margin-bottom:36px;flex-wrap:wrap;}
.work-filter{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:20px;padding:9px 18px;background:var(--white);cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.work-filter.active,.work-filter:hover{background:var(--wine);border-color:var(--wine);color:var(--white);}

/* case study */
.case-hero-meta{display:flex;gap:32px;flex-wrap:wrap;margin-top:18px;}
.case-hero-meta div{font-size:13px;}
.case-hero-meta span{display:block;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;color:var(--mauve);margin-bottom:4px;}
.case-gallery{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);border:1px solid var(--line);}
.case-gallery img{width:100%;height:100%;object-fit:cover;}
@media (max-width:700px){.case-gallery{grid-template-columns:1fr;}}