.project-hero{ position:relative; height:70svh; min-height:420px; overflow:hidden; }
.project-hero-frame{ position:absolute; inset:0; }
.project-hero-frame img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.08);
}
.project-hero::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,0.05) 0%, rgba(10,10,10,0.2) 50%, rgba(10,10,10,0.94) 100%);
}
.project-hero-cap{
  position:absolute; left:0; right:0; bottom:56px; z-index:2;
  text-shadow:0 2px 18px rgba(0,0,0,0.9);
}
.back-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(236,233,227,0.75); margin-bottom:26px;
}
.back-link:hover{ color:var(--bone); }
.project-hero-cap .eyebrow{ color:rgba(236,233,227,0.8); }
.project-hero-cap h1{ font-size:clamp(34px,6vw,72px); margin:14px 0; }
.project-cat{ font-size:12px; color:var(--smoke); }

.project-body{ max-width:760px; }
.project-desc{ font-size:clamp(18px,2.2vw,24px); line-height:1.5; color:var(--bone); margin-bottom:44px; }
.project-meta{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
.project-meta .row{ display:flex; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--line); }
.project-meta .row span:first-child{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; color:var(--smoke); }
.project-meta .row span:last-child{ font-size:14px; }

.project-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:40px;
}
.project-gallery img{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:4px;
  filter:grayscale(1) contrast(1.05);
}
.project-gallery figure:first-child{ grid-column:span 3; }
.project-gallery figure:first-child img{ aspect-ratio:16/9; }

.not-found{ min-height:100svh; display:flex; align-items:center; padding:0 56px; }
.not-found p{ color:var(--smoke); margin:18px 0 32px; }

@media (max-width:700px){
  .project-gallery{ grid-template-columns:repeat(2,1fr); }
  .project-gallery figure:first-child{ grid-column:span 2; }
  .project-hero{ height:56svh; min-height:320px; }
}