:root{
  --charcoal: #161513;
  --charcoal-2: #1e1b17;
  --brass: #a67c3d;
  --brass-dim: #6e572c;
  --bone: #e8e2d5;
  --muted: #8f887a;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--charcoal);
  color: var(--bone);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}
.serif{ font-family: 'Cormorant Garamond', serif; }
a{ color: inherit; }

/* ---------- Top nav ---------- */
.topnav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 1.6rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
}
.topnav .brand{
  font-family:'Cormorant Garamond', serif;
  font-size: 1.2rem;
  letter-spacing:.03em;
  text-decoration:none;
}
.topnav .back{
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--brass);
  text-decoration:none;
  border-bottom:1px solid var(--brass-dim);
  padding-bottom:2px;
}

/* ---------- Foyer (collections index) ---------- */
.foyer{
  text-align:center;
  padding: 3rem 2rem 4rem;
  max-width: 640px;
  margin: 0 auto;
}
.foyer h1{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size: clamp(2rem, 6vw, 3.2rem);
  margin:0 0 .5rem;
}
.foyer .years{
  color: var(--muted);
  font-size: .9rem;
  letter-spacing: .08em;
  margin-bottom: 1.6rem;
}
.foyer p{
  color: var(--bone);
  opacity:.8;
  line-height:1.7;
  font-size: .95rem;
}

/* ---------- Collections grid ---------- */
.collections{
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem 2rem 5rem;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem 2rem;
}
.collection-card{
  display:block;
  text-decoration:none;
  color: var(--bone);
}
.collection-card .cover{
  aspect-ratio: 4/5;
  background: var(--charcoal-2);
  border-radius: 2px;
  overflow:hidden;
  margin-bottom: .9rem;
  position:relative;
}
.collection-card .cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .6s ease;
}
.collection-card:hover .cover img{ transform: scale(1.03); }
.collection-card h2{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size: 1.35rem;
  margin: 0 0 .2rem;
}
.collection-card .sub{
  color: var(--muted);
  font-size:.82rem;
  letter-spacing:.03em;
}

/* ---------- Collection page header ---------- */
.collection-head{
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem 2rem 3rem;
  text-align:center;
}
.collection-head .num{
  color: var(--brass);
  font-size:.75rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  display:block;
  margin-bottom:.6rem;
}
.collection-head h1{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  margin: 0 0 .5rem;
}
.collection-head .sub{
  color: var(--muted);
  font-size:.85rem;
  margin-bottom: 1.4rem;
}
.collection-head p{
  color: var(--bone);
  opacity:.85;
  line-height:1.8;
  font-size:.98rem;
}

/* ---------- Masonry gallery ---------- */
.masonry{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem 5rem;
  column-count: 3;
  column-gap: 1.4rem;
}
.masonry figure{
  margin: 0 0 1.4rem;
  break-inside: avoid;
  cursor: pointer;
}
.masonry img{
  width:100%;
  display:block;
  border-radius: 2px;
  transition: opacity .3s ease;
}
.masonry figure:hover img{ opacity:.88; }
.masonry figcaption{
  font-size:.76rem;
  color: var(--muted);
  font-style: italic;
  margin-top:.5rem;
}
.masonry figcaption .year{ color: var(--brass); font-style: normal; }

@media (max-width: 900px){ .masonry{ column-count: 2; } }
@media (max-width: 560px){ .masonry{ column-count: 1; } }

/* ---------- Lightbox ---------- */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(12,11,10,0.97);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 1000;
  padding: 2rem;
}
.lightbox.active{ display:flex; }
.lightbox img{
  max-width: 88vw;
  max-height: 82vh;
  object-fit: contain;
  display:block;
}
.lightbox .lb-caption{
  position:absolute;
  bottom: 2rem;
  left:0; right:0;
  text-align:center;
  font-size:.82rem;
  color: var(--muted);
  font-style: italic;
}
.lightbox .lb-caption .year{ color: var(--brass); font-style: normal; }
.lb-btn{
  position:absolute;
  background:none;
  border:none;
  color: var(--bone);
  font-size: 2rem;
  cursor:pointer;
  opacity:.7;
  transition: opacity .2s;
  line-height:1;
}
.lb-btn:hover{ opacity:1; }
.lb-close{ top: 1.6rem; right: 1.8rem; font-size:1.6rem; }
.lb-prev{ left: 1.2rem; top:50%; transform: translateY(-50%); }
.lb-next{ right: 1.2rem; top:50%; transform: translateY(-50%); }

/* ---------- About / closing ---------- */
.about{
  max-width: 640px;
  margin: 0 auto;
  padding: 4rem 2rem;
  text-align:center;
}
.about h2{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size: 1.5rem;
  margin-bottom: 1.1rem;
}
.about p{
  line-height:1.8;
  color: var(--bone);
  opacity:.85;
  font-size:.95rem;
  margin-bottom: 1.2rem;
}
.about a{ color: var(--brass); text-decoration:none; border-bottom:1px solid var(--brass-dim); }
.closing{
  text-align:center;
  padding: 0 2rem 4rem;
  color: var(--muted);
  font-size: .85rem;
}
.closing a{ color: var(--brass); text-decoration:none; border-bottom:1px solid var(--brass-dim); }