/* ===== projects index ===== */
.proj-header{padding:48px 0 8px;}
.proj-header h1{font-size:34px; margin-bottom:10px;}
.proj-header p{font-size:14.5px; color:var(--slate); max-width:560px; margin:0;}

.filters{
  display:flex; gap:10px; flex-wrap:wrap;
  padding:24px 0 32px;
}
.filters button{
  font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
  background:#fff; border:1px solid var(--card-border); color:var(--slate);
  padding:8px 16px; border-radius:20px; cursor:pointer;
}
.filters button.active{background:var(--petrol); border-color:var(--petrol); color:#fff;}

.proj-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:16px; padding-bottom:64px;
}
.proj-card{
  background:#fff; border:1px solid var(--card-border); border-radius:14px;
  padding:20px; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:10px;
  overflow:hidden;
}
.proj-card .tag{
  font-size:12px; font-weight:600; color:var(--petrol);
}
.proj-card h3{font-family:'Fraunces',serif; font-weight:600; font-size:18px;}
.proj-card p{
  font-size:13.5px; color:var(--slate); margin:0;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
}
.proj-card .tag-row{margin-top:2px;}
.proj-card .card-link{margin-top:auto;}

/* card cover image with category pill */
.proj-card-img{
  position:relative; margin:-20px -20px 6px;
  aspect-ratio:16/10; background:#EFEBDD; overflow:hidden;
  border-bottom:1px solid var(--card-border);
}
.proj-card-img img{
  width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
}
.proj-card-img .tag{
  position:absolute; top:12px; right:12px;
  background:var(--petrol); color:#fff;
  padding:5px 12px; border-radius:20px; margin:0;
}

@media (max-width:820px){
  .proj-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .proj-grid{grid-template-columns:1fr;}
}

/* ===== project detail page ===== */
.proj-detail{padding:48px 0 64px; max-width:760px; margin:0 auto;}
.back-link{
  font-size:13.5px; color:var(--slate); text-decoration:none;
  display:inline-flex; align-items:center; gap:5px; margin-bottom:24px;
}

.proj-detail .tag{font-size:13px; font-weight:600; color:var(--petrol); margin-bottom:10px;}
.proj-detail h1{font-size:32px; margin-bottom:12px;}
.proj-detail .outcome{font-size:15.5px; color:var(--slate); max-width:60ch; margin-bottom:32px;}

.shot{
  background:#EFEBDD; border-radius:12px; aspect-ratio:16/10;
  display:flex; align-items:center; justify-content:center;
  color:var(--slate); font-size:13px; text-align:center; padding:12px;
  border:1px solid var(--card-border); overflow:hidden;
}
.shot img{width:100%; height:100%; object-fit:contain; object-position:center; border-radius:inherit; cursor:zoom-in;}

/* ===== lightbox ===== */
.lightbox{
  position:fixed; inset:0; background:rgba(15,46,46,0.92);
  display:none; align-items:center; justify-content:center;
  padding:32px; z-index:1000;
}
.lightbox.active{display:flex;}
.lightbox img{max-width:92vw; max-height:88vh; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,0.4);}
.lightbox-close{
  position:absolute; top:22px; right:28px;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,0.12); border:none; color:#fff;
  font-size:20px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-close:hover{background:rgba(255,255,255,0.22);}
.hero-shot{margin-bottom:36px;}

.proj-section{margin-bottom:36px;}
.proj-section h2{font-size:18px; margin-bottom:10px;}
.proj-section > p{font-size:14.5px; color:var(--ink); line-height:1.65; margin:0;}

.func h2{font-size:20px; margin-bottom:20px;}
.feature{
  display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:26px;
}
@media(min-width:640px){
  .feature{grid-template-columns:220px 1fr; align-items:center; gap:22px;}
}
.feature .shot{aspect-ratio:4/3; font-size:12px;}
.feature.no-image{grid-template-columns:1fr;}
/* phone screenshot entries (app projects) */
@media(min-width:640px){
  .feature.phone{grid-template-columns:150px 1fr; align-items:center; gap:22px;}
}
.feature.phone .shot{aspect-ratio:9/19; max-width:150px; padding:0; background:#fff;}

.feature h3{font-family:'Fraunces',serif; font-size:16px; font-weight:600; margin:0 0 6px;}
.feature p{font-size:13.5px; color:var(--slate); line-height:1.6; margin:0;}

.more-views{display:flex; gap:10px; overflow-x:auto; padding-bottom:6px;}
.more-views .shot{flex:0 0 140px; aspect-ratio:9/16; font-size:11.5px;}

.tag-row{display:flex; flex-wrap:wrap; gap:8px;}

.review{
  background:var(--petrol); color:#fff; border-radius:14px;
  padding:28px; margin-bottom:36px;
}
.review-head{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.avatar{
  width:46px; height:46px; border-radius:50%; object-fit:cover;
  border:2px solid var(--mango); flex-shrink:0;
}
.avatar-fallback{
  width:46px; height:46px; border-radius:50%; background:var(--petrol-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; color:#B9D2CF; flex-shrink:0; text-align:center;
}
.who-name{font-weight:600; font-size:14.5px; font-family:'Fraunces',serif;}
.who-role{font-size:12.5px; color:var(--mango);}
.review p{font-size:15px; line-height:1.65; margin:0; color:#EAF3EF;}