:root{
  --bg:#0c0c0d;--panel:#161618;--fg:#f2efe9;--muted:#8f8b84;--accent:#d8b27a;--line:#26262a;
  --serif:"Cormorant Garamond",Georgia,serif;--sans:Inter,system-ui,sans-serif;
}
@media (prefers-color-scheme:light){
  :root{--bg:#f6f3ee;--panel:#ebe7df;--fg:#1c1b19;--muted:#7a756c;--accent:#9a6b2f;--line:#dcd6ca}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* навігація */
nav{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;
  padding:18px clamp(16px,4vw,48px);backdrop-filter:blur(14px);background:color-mix(in srgb,var(--bg) 75%,transparent);
  border-bottom:1px solid var(--line)}
.brand{font-family:var(--serif);font-size:1.5rem;font-weight:600;letter-spacing:.5px}
.links{display:flex;gap:28px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase}
.links a{color:var(--muted);padding-bottom:4px;border-bottom:1px solid transparent;transition:.25s}
.links a:hover,.links a.active{color:var(--fg);border-color:var(--accent)}

/* hero */
#hero{text-align:center;padding:clamp(48px,9vw,110px) 20px clamp(28px,5vw,56px)}
#hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.4rem,7vw,5.2rem);line-height:1.05;margin:0}
#hero p{color:var(--muted);margin:14px 0 0;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem}
#hero .back{display:inline-block;margin-bottom:18px;color:var(--accent);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase}

main{padding:0 clamp(12px,4vw,48px) 40px;max-width:1700px;margin:auto}

/* картки колекцій */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(12px,2vw,26px)}
.card{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:14px;background:var(--panel);display:block;
  opacity:0;transform:translateY(18px);animation:rise .7s forwards}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.card:hover img{transform:scale(1.07)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78),transparent 55%)}
.card .info{position:absolute;left:22px;right:22px;bottom:20px;z-index:1;color:#fff}
.card h2{font-family:var(--serif);font-weight:500;font-size:1.9rem;margin:0}
.card span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
@keyframes rise{to{opacity:1;transform:none}}

/* фото-сітка */
.grid{column-count:4;column-gap:clamp(8px,1.2vw,16px)}
@media (max-width:1200px){.grid{column-count:3}}
@media (max-width:760px){.grid{column-count:2}}
.ph{margin:0 0 clamp(8px,1.2vw,16px);break-inside:avoid;border-radius:10px;overflow:hidden;background:var(--panel);
  cursor:zoom-in;position:relative;opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s}
.ph.in{opacity:1;transform:none}
.ph img{width:100%;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s}
.ph:hover img{transform:scale(1.05);filter:brightness(.85)}
.ph .tag{position:absolute;left:12px;bottom:10px;color:#fff;font-size:.8rem;opacity:0;transition:.3s;text-shadow:0 1px 6px #000}
.ph:hover .tag{opacity:1}

.empty{text-align:center;color:var(--muted);padding:60px 0}
footer{text-align:center;color:var(--muted);padding:40px;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}

/* lightbox */
#lightbox{position:fixed;inset:0;z-index:20;background:rgba(8,8,9,.96);display:flex;align-items:center;justify-content:center;animation:fade .25s}
#lightbox[hidden]{display:none}
@keyframes fade{from{opacity:0}}
#lightbox figure{margin:0;text-align:center}
#lb-img{max-width:92vw;max-height:84vh;object-fit:contain;border-radius:4px;box-shadow:0 20px 80px #000}
#lb-cap{color:#bbb;margin-top:14px;font-size:.9rem;min-height:1.2em}
#lightbox button{position:absolute;background:rgba(255,255,255,.06);border:0;color:#fff;cursor:pointer;border-radius:50%;
  width:48px;height:48px;font-size:22px;transition:.2s}
#lightbox button:hover{background:rgba(255,255,255,.18)}
#lb-close{top:18px;right:18px}
#lb-prev{left:18px;top:50%;margin-top:-24px;font-size:32px;padding-bottom:4px}
#lb-next{right:18px;top:50%;margin-top:-24px;font-size:32px;padding-bottom:4px}
#lb-count{position:absolute;top:28px;left:24px;color:#999;font-size:.8rem;letter-spacing:.2em}
@media (max-width:600px){#lb-prev,#lb-next{top:auto;bottom:18px;margin:0}}