/* Ileana + Chris — Wedding site */
:root{
  --bg:#000;
  --fg:#fff;
  --muted:rgba(255,255,255,.72);
  --line:rgba(255,255,255,.18);
  --gap:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-size:19px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 24px;
  overflow:hidden;
}
.hero__bg{
  position:absolute;
  inset:0;
  background-image:url("images/AdobeStock_360778532-scaled.jpeg");
  background-size:cover;
  background-position:center;
  filter:grayscale(15%);
  transform:scale(1.03);
}
.hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.65));
}
.hero__inner{position:relative;z-index:2;max-width:1000px}
.monogram{
  font-family:"Rock Salt",cursive;
  font-size:22px;
  letter-spacing:2px;
  margin:0 0 30px;
  opacity:.9;
}
.hero h1{
  font-family:"Italiana",serif;
  font-weight:400;
  font-size:clamp(38px,7vw,72px);
  line-height:1.08;
  letter-spacing:.03em;
  margin:0;
}
.hero__date{
  margin:22px 0 0;
  font-family:"Cormorant Garamond",serif;
  text-transform:uppercase;
  letter-spacing:.35em;
  font-size:clamp(14px,2.2vw,22px);
  color:var(--muted);
  font-weight:500;
}
.scroll-cue{
  position:absolute;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  font-size:12px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--muted);
  animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* ---------- Message ---------- */
.message{
  text-align:center;
  padding:90px 24px 70px;
  max-width:820px;
  margin:0 auto;
}
.message p{
  font-size:clamp(22px,3.2vw,30px);
  font-style:italic;
  line-height:1.5;
  margin:0 0 34px;
  color:#f2f2f2;
}
.signature{
  font-family:"Rock Salt",cursive;
  font-size:clamp(20px,3vw,28px);
  letter-spacing:1px;
}

/* ---------- Gallery ---------- */
.gallery{
  columns:4 260px;
  column-gap:var(--gap);
  padding:0 var(--gap) 80px;
  max-width:1500px;
  margin:0 auto;
}
.gallery figure{
  margin:0 0 var(--gap);
  break-inside:avoid;
  cursor:zoom-in;
  position:relative;
  background:#111;
  overflow:hidden;
}
.gallery img{
  width:100%;
  height:auto;
  transition:opacity .6s ease, transform .5s ease;
  opacity:0;
}
.gallery img.loaded{opacity:1}
.gallery figure:hover img{transform:scale(1.035)}

/* ---------- Footer ---------- */
.site-footer{
  text-align:center;
  padding:40px 24px 60px;
  border-top:1px solid var(--line);
  color:var(--muted);
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:13px;
}
.site-footer .amp{font-family:"Rock Salt",cursive;text-transform:none;letter-spacing:1px;font-size:16px;display:block;margin-top:10px;color:var(--fg)}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.94);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100;
  touch-action:none;
}
.lightbox.open{display:flex}
.lightbox img{
  max-width:92vw;
  max-height:88vh;
  width:auto;height:auto;
  box-shadow:0 10px 60px rgba(0,0,0,.6);
}
.lb-btn{
  position:absolute;
  background:none;border:none;color:#fff;
  cursor:pointer;
  opacity:.75;
  transition:opacity .2s;
  user-select:none;
}
.lb-btn:hover{opacity:1}
.lb-close{top:20px;right:26px;font-size:34px;line-height:1}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);font-size:52px;padding:10px 18px}
.lb-prev{left:10px}
.lb-next{right:10px}
.lb-count{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  color:var(--muted);letter-spacing:.2em;font-size:13px;
}

@media (max-width:600px){
  .gallery{columns:2 140px;--gap:8px}
  .lb-prev,.lb-next{font-size:38px;padding:8px 10px}
  .message{padding:64px 22px 50px}
}