/* ---------- page intro ---------- */
.page-hero{ padding:170px 0 70px; }
.page-hero h1{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(42px,7vw,88px); line-height:0.98; max-width:820px;
}
.page-hero h1 em{ color:var(--olive); }
.page-hero p.lede{ margin-top:24px; max-width:480px; color:var(--ink-soft); font-size:16px; }

/* ---------- filters ---------- */
.filters{
  display:flex; gap:12px; flex-wrap:wrap;
  padding:30px 0 60px; border-bottom:1px solid var(--line);
}
.filter-btn {
    font-family: var(--ff-mono);
    font-size: 13px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 10px 20px;
    border: 1px solid var(--line-strong);
    background: #000000;
    color: #ffffff;
    cursor: pointer;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.filter-btn.active {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

.filter-btn:hover {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

/* ---------- grid ---------- */
.work-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:2px;
  background:var(--line); padding-top:2px;
}
.work-card{
  position:relative; background:var(--paper);
  aspect-ratio:4/3; overflow:hidden;
  transition:opacity .4s ease, transform .4s ease;
}
.work-card.hide{ display:none; }
.work-card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.16,1,.3,1), filter .5s ease;
  filter:saturate(0.9);
}
.work-card:hover img{ transform:scale(1.06); filter:saturate(1.05); }
.work-card .overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0) 55%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:30px; color:var(--paper);
  opacity:0; transition:opacity .4s ease;
}
.work-card:hover .overlay{ opacity:1; }
.work-card .overlay .tag{
  font-family:var(--f-mono); font-size:12px; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--gold);
}
.work-card .overlay h3{ font-family:var(--f-display); font-weight:500; font-size:18px; margin-top:8px; transform: translateY(6px); }
.work-card .overlay .meta{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; }
.work-card .overlay .meta span{ font-family:var(--f-mono); font-size:12.5px; color:rgba(244,244,240,0.75); }
.work-card .overlay .meta .arrow{ font-size:18px; transition:transform .35s ease; }
.work-card:hover .overlay .meta .arrow{ transform:translate(4px,-4px); }


.work-card .overlay h3{
    color: #ffffff !important;
}

@media(max-width:800px){
  .work-grid{ grid-template-columns:1fr; }
}

/* ---------- more grid / CTA below ---------- */
.load-more{ display:flex; justify-content:center; padding-top:60px; }
@media (max-width: 768px) {

  .site .wrap {
    position: relative;
  }

  .nav-toggle {
    display: block;
    position: relative;
    z-index: 9999;
    cursor: pointer;
  }

  .main-nav.mobile-open {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #111;
    padding: 25px;
    z-index: 9998;
  }

  .main-nav.mobile-open > ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

}