:root{
  --bg:#090a0b;
  --text:#f4f1ea;
  --muted:#9b9b96;
  --accent:#e6bb22;
  --line:rgba(255,255,255,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
a{text-decoration:none}
.navbar{
  background:rgba(9,10,11,.80);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.brand{
  font-weight:700;
  letter-spacing:.20em;
  color:#fff;
  font-size:.95rem;
}
.brand span{color:var(--accent)}
.nav-link{color:#b8b8b4!important;font-size:.86rem}
.nav-link:hover{color:#fff!important}
.portfolio-hero{
  padding:160px 0 90px;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.30em;
  color:var(--accent);
  font-size:.70rem;
  font-weight:700;
}
.portfolio-title{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(4.2rem,8vw,8rem);
  line-height:.88;
  font-weight:600;
  letter-spacing:-.04em;
  margin:.4rem 0 1rem;
}
.portfolio-lead{
  max-width:650px;
  color:var(--muted);
  line-height:1.9;
  font-size:1.02rem;
}
.filters{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  margin-top:40px;
}
.filter-btn{
  appearance:none;
  border:0;
  background:transparent;
  color:#777;
  padding:0;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  cursor:pointer;
}
.filter-btn.active,
.filter-btn:hover{color:var(--text)}
.gallery{
  columns:3 340px;
  column-gap:24px;
  padding-bottom:120px;
}
.gallery-item{
  break-inside:avoid;
  margin:0 0 24px;
  display:block;
  position:relative;
  overflow:hidden;
  background:#111;
}
.gallery-item img{
  width:100%;
  height:auto;
  display:block;
  transition:transform .55s ease,filter .55s ease;
}
.gallery-item::after{
  content:attr(data-label);
  position:absolute;
  left:18px;
  bottom:16px;
  color:#fff;
  opacity:0;
  transform:translateY(8px);
  transition:.28s;
  font-size:.70rem;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.gallery-item:hover img{
  transform:scale(1.018);
  filter:brightness(.78);
}
.gallery-item:hover::after{
  opacity:1;
  transform:none;
}
.gallery-item.is-hidden{display:none}
.back-link{
  display:inline-block;
  color:var(--text);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.22);
  padding-bottom:7px;
}
.back-link:hover{color:var(--accent);border-color:var(--accent)}
footer{
  border-top:1px solid var(--line);
  color:#6f716f;
  padding:30px 0;
  font-size:.82rem;
}
.pswp__img{
  object-fit:contain !important;
}
@media(max-width:767.98px){
  .portfolio-hero{padding:125px 0 65px}
  .gallery{columns:1}
  .filters{gap:16px}
}