:root{
  --cream:#fbf6f0; --blush:#f3e3dc; --rose:#c99a8e; --deep:#7a4f47;
  --gold:#b8956a; --ink:#4a3a36;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:Lato,sans-serif;font-weight:300;line-height:1.7}

/* Hero */
.hero{min-height:100svh;display:grid;place-items:center;text-align:center;padding:2rem;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(201,154,142,.35), transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(184,149,106,.25), transparent 55%),
    var(--blush);}
.hero-inner{animation:fade 1.6s ease both}
.eyebrow{font-family:'Cormorant Garamond',serif;letter-spacing:.35em;text-transform:uppercase;font-size:.95rem;color:var(--deep)}
.hero h1{font-family:'Great Vibes',cursive;font-weight:400;font-size:clamp(3.5rem,12vw,8rem);color:var(--deep);line-height:1.1;margin:.4rem 0}
.hero h1 em{font-family:'Cormorant Garamond',serif;font-size:.5em;color:var(--gold);vertical-align:middle}
.ornament{color:var(--gold);width:200px;margin:.5rem auto 1rem}
.date{font-family:'Cormorant Garamond',serif;letter-spacing:.25em;font-size:1.05rem}
.btn{display:inline-block;margin-top:2rem;padding:.8rem 2.2rem;border:1px solid var(--deep);color:var(--deep);
  text-decoration:none;font-family:'Cormorant Garamond',serif;letter-spacing:.2em;text-transform:uppercase;font-size:.9rem;transition:.3s}
.btn:hover{background:var(--deep);color:var(--cream)}

.intro{max-width:620px;margin:0 auto;padding:5rem 1.5rem 2rem;text-align:center;
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.45rem;color:var(--deep)}

/* Galerij */
main{max-width:1400px;margin:0 auto;padding:2rem 1rem 4rem}
main h2{font-family:'Great Vibes',cursive;font-weight:400;font-size:3.2rem;text-align:center;color:var(--deep)}
.count{text-align:center;font-size:.85rem;letter-spacing:.15em;color:var(--rose);margin-bottom:2rem}
.grid{columns:4 260px;column-gap:12px}
.grid figure{break-inside:avoid;margin-bottom:12px;overflow:hidden;border-radius:3px;cursor:zoom-in;
  background:var(--blush);opacity:0;transform:translateY(12px);transition:opacity .6s,transform .6s}
.grid figure.show{opacity:1;transform:none}
.grid img{display:block;width:100%;height:auto;transition:transform .6s ease;-webkit-user-drag:none;user-select:none}
.grid figure:hover img{transform:scale(1.03)}
.albums{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;
  margin:-1rem -1rem 1rem;padding:.8rem 1rem;background:rgba(251,246,240,.92);backdrop-filter:blur(6px)}
.albums a{border:1px solid var(--rose);color:var(--deep);padding:.35rem 1.1rem;border-radius:2rem;text-decoration:none;
  font-family:'Cormorant Garamond',serif;font-size:1rem;letter-spacing:.08em;transition:.3s}
.albums a:hover{background:var(--deep);border-color:var(--deep);color:var(--cream)}
.album{padding-top:3rem;scroll-margin-top:3.5rem}
.album h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-style:italic;font-size:2.2rem;text-align:center;color:var(--deep)}
.album .count{margin-bottom:1.5rem}

footer{text-align:center;padding:3rem 1rem;background:var(--blush);font-family:'Cormorant Garamond',serif;font-size:1.2rem;color:var(--deep)}
footer .small{font-family:Lato,sans-serif;font-size:.75rem;opacity:.7;margin-top:.4rem}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(38,26,24,.94);display:flex;align-items:center;justify-content:center;z-index:10}
.lightbox[hidden]{display:none}
.lightbox img{max-width:92vw;max-height:88vh;box-shadow:0 10px 40px rgba(0,0,0,.4);user-select:none;-webkit-user-drag:none}
.lightbox button{position:absolute;background:none;border:0;color:#f3e3dc;font-size:3rem;cursor:pointer;padding:1rem;line-height:1;opacity:.8}
.lightbox button:hover{opacity:1}
.lb-close{top:.5rem;right:1rem}
.lb-prev{left:.5rem}.lb-next{right:.5rem}
.lb-counter{position:absolute;bottom:1rem;color:#f3e3dc;font-size:.8rem;letter-spacing:.2em}

@keyframes fade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (max-width:600px){.grid{columns:2;column-gap:6px}.grid figure{margin-bottom:6px}.lb-prev,.lb-next{display:none}}