:root {
  --ink: #0d0d0b;
  --paper: #f5f1ec;
  --gold: #b8935a;
  --gold-light: #d4aa75;
  --mid: #7a7267;
  --line: rgba(184,147,90,0.22);
  --dark: #111009;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Barlow',sans-serif;font-weight:300;overflow-x:hidden}

.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.2rem clamp(1.5rem,4vw,4rem);
  background:rgba(245,241,236,0.92);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.nav-logo{height:52px;width:auto;object-fit:contain}
.nav-links{display:flex;gap:2.5rem;align-items:center}
.nav-link{font-size:0.65rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--mid);text-decoration:none;transition:color 0.2s}
.nav-link:hover{color:var(--gold)}
.nav-cta{font-size:0.65rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);padding:0.5rem 1.2rem;text-decoration:none;transition:all 0.2s}
.nav-cta:hover{background:var(--gold);color:#fff}

.hero{height:90vh;display:flex;align-items:center;padding:0 clamp(1.5rem,8vw,8rem);background:#f9f7f4}
.hero-inner{max-width:900px}
.hero-tag{display:block;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.4em;color:var(--gold);margin-bottom:1.5rem}
.hero-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2.5rem,6vw,5rem);font-weight:300;line-height:1.1;margin-bottom:2rem}
.hero-sub{font-size:1.1rem;color:var(--mid);max-width:500px;line-height:1.6}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(450px,1fr));gap:2px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.p-card{position:relative;aspect-ratio:1/1;overflow:hidden;cursor:none;background:var(--dark)}
.p-img-w{width:100%;height:100%;transition:transform 0.8s cubic-bezier(0.16,1,0.3,1)}
.p-card:hover .p-img-w{transform:scale(1.05)}
.p-img{width:100%;height:100%;object-fit:cover;opacity:0.85;transition:opacity 0.5s}
.p-card:hover .p-img{opacity:0.6}
.p-over{position:absolute;bottom:0;left:0;padding:2.5rem;color:#fff;z-index:2}
.p-cat{font-size:0.6rem;text-transform:uppercase;letter-spacing:0.3em;display:block;margin-bottom:0.8rem;color:var(--gold-light)}
.p-name{font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:300}

.f{padding:8rem 2rem 4rem;text-align:center;background:#fff}
.f-title{font-family:'Cormorant Garamond',serif;font-size:3rem;font-weight:300;margin-bottom:1.5rem}
.f-sub{color:var(--mid);margin-bottom:3rem}
.f-btn{display:inline-block;padding:1.2rem 3rem;background:var(--ink);color:#fff;text-decoration:none;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.2em;transition:opacity 0.2s}
.f-btn:hover{opacity:0.9}
.f-bottom{margin-top:6rem;padding-top:2rem;border-top:1px solid var(--paper);font-size:0.65rem;color:var(--mid);letter-spacing:0.1em}

.lb{position:fixed;inset:0;background:rgba(13,13,11,0.98);z-index:1000;display:none;opacity:0;transition:opacity 0.4s}
.lb.open{display:flex;align-items:center;justify-content:center}
.lb.vis{opacity:1}
.lb-c{position:relative;width:90%;height:85%;display:flex;align-items:center;justify-content:center}
#lb-img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 30px 60px rgba(0,0,0,0.5)}
.lb-x{position:fixed;top:2rem;right:2.5rem;color:#fff;font-size:2.5rem;cursor:pointer;z-index:1010;font-weight:200;transition:transform 0.3s}
.lb-x:hover{transform:rotate(90deg)}
.arr{position:fixed;top:50%;transform:translateY(-50%);color:#fff;font-size:2rem;cursor:pointer;width:4rem;height:4rem;display:flex;align-items:center;justify-content:center;transition:color 0.2s;z-index:1010}
.arr:hover{color:var(--gold)}
.arr-l{left:1rem}.arr-r{right:1rem}

@media(max-width:768px){
  .nav-links{display:none}
  .grid{grid-template-columns:1fr}
  .hero{padding:0 1.5rem}
}

.p-img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #1a1a18 0%, #2a2620 100%);
}

/* ── FILTERS ── */
.filters {
  display: flex;
  gap: 1rem;
  padding: 0.9rem clamp(1.5rem, 4vw, 4rem);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  align-items: center;
}
.f-select {
  font-family: 'Barlow', sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mid);
  background: transparent;
  border: 1px solid var(--line);
  padding: 0.45rem 2rem 0.45rem 0.9rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237a7267'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  transition: border-color 0.2s, color 0.2s;
}
.f-select:hover, .f-select:focus {
  border-color: var(--gold);
  color: var(--gold);
  outline: none;
}
.p-img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #1a1a18 0%, #2a2620 100%);
}