/* ============================================================
   Mbilu and Soul Celebrations — Design Tokens
   Palette:  charcoal #2B2622 · cream #F7F2EC · white #FFFFFF
             blush #E3C9C7 · blush-deep #C08E88 · blush-pale #F3E4E1
   Display:  'Playfair Display'   Script accent: 'Cormorant Garamond' (italic)
   Labels:   'Jost' — wide-tracked uppercase, echoes the logo's "CELEBRATIONS"
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500;1,600&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --charcoal:#2B2622;
  --charcoal-soft:#4a423c;
  --cream:#F7F2EC;
  --white:#FFFFFF;
  --blush:#E3C9C7;
  --blush-deep:#B98B85;
  --blush-pale:#F4E6E3;
  --line: rgba(43,38,34,0.14);
  --shadow: 0 20px 60px rgba(43,38,34,0.10);
  --maxw: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html, body{
  overflow-x:hidden;
  width:100%;
}
body{
  margin:0;
  background:var(--cream);
  color:var(--charcoal);
  font-family:'Jost', sans-serif;
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}

h1,h2,h3{
  font-family:'Playfair Display', serif;
  font-weight:500;
  margin:0 0 0.4em 0;
  color:var(--charcoal);
  letter-spacing:0.01em;
}

.script{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-weight:500;
  color:var(--blush-deep);
}

.eyebrow{
  font-family:'Jost', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.32em;
  font-size:0.72rem;
  font-weight:500;
  color:var(--blush-deep);
}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 6vw;
}

/* -------- Powder-burst signature texture --------
   Layered soft radial blooms echoing the logo's dust explosion.
   Used sparingly, once per page, behind key moments. */
.powder{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.powder::before{
  content:"";
  position:absolute;
  inset:-10% -10% -10% -10%;
  z-index:-1;
  background:
    radial-gradient(ellipse 40% 55% at 22% 30%, rgba(227,201,199,0.55), transparent 60%),
    radial-gradient(ellipse 30% 40% at 75% 20%, rgba(184,143,133,0.35), transparent 60%),
    radial-gradient(ellipse 45% 60% at 60% 75%, rgba(244,230,227,0.65), transparent 65%),
    radial-gradient(ellipse 25% 35% at 15% 80%, rgba(227,201,199,0.4), transparent 60%);
  filter:blur(6px);
  pointer-events:none;
}

/* -------- Header / Nav -------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(247,242,236,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0.7rem 6vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.brand{
  display:flex;
  align-items:center;
  gap:0.7rem;
}
.brand img{
  height:52px;
  width:52px;
  object-fit:cover;
  border-radius:50%;
  box-shadow:0 4px 14px rgba(43,38,34,0.18);
}
.brand-text{
  font-family:'Playfair Display', serif;
  font-size:1rem;
  letter-spacing:0.02em;
  line-height:1.15;
}
.brand-text small{
  display:block;
  font-family:'Jost', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.28em;
  font-size:0.6rem;
  color:var(--blush-deep);
  margin-top:0.25em;
}
nav.links{
  display:flex;
  gap:2.2rem;
  align-items:center;
}
nav.links a{
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.2em;
  font-weight:400;
  color:var(--charcoal-soft);
  padding-bottom:6px;
  border-bottom:1px solid transparent;
  transition:border-color 0.25s ease, color 0.25s ease;
}
nav.links a:hover, nav.links a.active{
  color:var(--blush-deep);
  border-color:var(--blush-deep);
}
.nav-cta{
  font-size:0.72rem !important;
  text-transform:uppercase;
  letter-spacing:0.18em;
  background:var(--charcoal);
  color:var(--cream) !important;
  padding:0.7rem 1.4rem;
  border-radius:2px;
  border-bottom:none !important;
  transition:background 0.25s ease;
}
.nav-cta:hover{background:var(--blush-deep); color:var(--charcoal) !important;}

.nav-toggle{display:none;}

.nav-backdrop{
  position:fixed; inset:0;
  background:rgba(43,38,34,0.4);
  opacity:0; visibility:hidden;
  transition:opacity 0.3s ease;
  z-index:45;
}
.nav-backdrop.open{opacity:1; visibility:visible;}

@media (max-width: 860px){
  nav.links{
    position:fixed; top:64px; right:0; bottom:0;
    width:min(82vw, 360px);
    background:var(--cream);
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    padding:2.5rem 2rem;
    gap:1.6rem;
    overflow-y:auto;
    box-shadow:-10px 0 30px rgba(43,38,34,0.18);
    transform:translateX(100%);
    transition:transform 0.35s ease;
  }
  nav.links.open{transform:translateX(0);}
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px;
    background:none; border:none; cursor:pointer; padding:8px;
  }
  .nav-toggle span{width:22px; height:1.5px; background:var(--charcoal);}
}

/* -------- Buttons -------- */
.btn{
  display:inline-block;
  font-family:'Jost', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.2em;
  font-size:0.76rem;
  font-weight:500;
  padding:1rem 2.1rem;
  border-radius:2px;
  border:1px solid var(--charcoal);
  transition:all 0.3s ease;
  cursor:pointer;
}
.btn-dark{background:var(--charcoal); color:var(--cream); border-color:var(--charcoal);}
.btn-dark:hover{background:transparent; color:var(--charcoal);}
.btn-outline{background:transparent; color:var(--charcoal); border-color:var(--charcoal);}
.btn-outline:hover{background:var(--charcoal); color:var(--cream);}
.btn-blush{background:var(--blush-deep); color:var(--white); border-color:var(--blush-deep);}
.btn-blush:hover{background:transparent; color:var(--blush-deep);}

/* -------- Sections -------- */
section{padding:6.5rem 0;}
.section-tight{padding:4rem 0;}
.divider{
  width:64px; height:1px; background:var(--blush-deep);
  margin:1.4rem 0;
}
.center{text-align:center;}
.center .divider{margin-left:auto; margin-right:auto;}

/* -------- Footer -------- */
footer.site{
  background:var(--charcoal);
  color:var(--blush-pale);
  padding:4rem 0 2rem;
}
footer.site h3{color:var(--cream);}
footer.site a{color:var(--blush-pale);}
footer.site .foot-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:3rem;
}
footer.site .eyebrow{color:var(--blush);}
footer.site .divider{background:var(--blush);}
.social-row{display:flex; gap:1.1rem; margin-top:0.8rem;}
.social-row a{
  font-size:0.72rem; text-transform:uppercase; letter-spacing:0.14em;
  border:1px solid rgba(247,242,236,0.3);
  padding:0.55rem 0.9rem; border-radius:2px;
  transition:background 0.25s ease, border-color .25s ease;
}
.social-row a:hover{background:rgba(247,242,236,0.1); border-color:var(--blush);}
.foot-bottom{
  max-width:var(--maxw); margin:3rem auto 0; padding:1.6rem 6vw 0 6vw;
  border-top:1px solid rgba(247,242,236,0.15);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.8rem;
  font-size:0.75rem; letter-spacing:0.03em; color:rgba(247,242,236,0.65);
}
.foot-bottom a{color:var(--blush); border-bottom:1px solid rgba(227,201,199,0.4);}
.foot-bottom a:hover{color:var(--cream);}

@media (max-width: 760px){
  footer.site .foot-grid{grid-template-columns:1fr; gap:2.2rem;}
  .foot-bottom{flex-direction:column;}
}

/* -------- Hero with venue photo background -------- */
.hero-photo{
  background-image:
    linear-gradient(180deg, rgba(43,38,34,0.55), rgba(43,38,34,0.72) 60%, rgba(43,38,34,0.85)),
    linear-gradient(0deg, rgba(43,38,34,0.3), transparent 40%),
    var(--hero-image);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.hero-photo h1, .hero-photo .eyebrow, .hero-photo p:not(.script){color:var(--cream);}
.hero-photo .eyebrow{color:var(--blush);}
.hero-photo .script{color:var(--blush);}
.hero-photo .btn-outline{border-color:var(--cream); color:var(--cream);}
.hero-photo .btn-outline:hover{background:var(--cream); color:var(--charcoal);}

/* -------- Real-photo visuals grid (Welcome page) -------- */
.visuals-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.2rem;
}
.visuals-grid .vis-card{
  position:relative; overflow:hidden; border-radius:2px;
  min-height:150px; box-shadow:var(--shadow); cursor:pointer;
}
.visuals-grid .vis-card:nth-child(1),
.visuals-grid .vis-card:nth-child(4){grid-row:span 2;}
.visuals-grid .vis-card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.5s ease;
  position:absolute; inset:0;
}
.visuals-grid .vis-card:hover img{transform:scale(1.06);}
@media (max-width:760px){
  .visuals-grid{grid-template-columns:repeat(2,1fr);}
  .visuals-grid .vis-card:nth-child(1),
  .visuals-grid .vis-card:nth-child(4){grid-row:span 1;}
}
.slideshow{
  position:relative;
  max-width:940px;
  margin:3rem auto 0;
  border-radius:3px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--blush-pale);
  aspect-ratio:16/9;
}
.slideshow .slide{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity 0.9s ease;
}
.slideshow .slide.active{opacity:1;}
.slideshow .slide img{
  width:100%; height:100%; object-fit:cover;
}
.slideshow .slide-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.6rem 1.8rem 1.2rem;
  background:linear-gradient(0deg, rgba(43,38,34,0.72), transparent);
  color:var(--cream);
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:1.05rem;
}
.slideshow .slide-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(247,242,236,0.85);
  border:none; width:42px; height:42px; border-radius:50%;
  font-size:1.1rem; color:var(--charcoal); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.25s ease;
}
.slideshow .slide-arrow:hover{background:var(--blush-deep); color:var(--white);}
.slideshow .slide-prev{left:14px;}
.slideshow .slide-next{right:14px;}
.slideshow .slide-dots{
  position:absolute; bottom:14px; right:18px;
  display:flex; gap:0.4rem;
}
.slideshow .slide-dots button{
  width:8px; height:8px; border-radius:50%;
  background:rgba(247,242,236,0.55);
  border:none; padding:0; cursor:pointer;
}
.slideshow .slide-dots button.active{background:var(--cream);}
.slideshow-empty{
  display:flex; align-items:center; justify-content:center;
  height:100%; text-align:center; padding:2rem;
  font-family:'Playfair Display', serif; font-style:italic;
  color:var(--blush-deep); font-size:1rem;
}

/* -------- Gallery page grid -------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1rem;
}
.gallery-grid figure{
  margin:0; position:relative; overflow:hidden; border-radius:2px;
  aspect-ratio:1/1; box-shadow:var(--shadow); cursor:pointer;
}
.gallery-grid img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.5s ease;
}
.gallery-grid figure:hover img{transform:scale(1.06);}
.gallery-grid figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:0.8rem;
  background:linear-gradient(0deg, rgba(43,38,34,0.7), transparent);
  color:var(--cream); font-size:0.75rem; letter-spacing:0.03em;
  opacity:0; transition:opacity 0.3s ease;
}
.gallery-grid figure:hover figcaption{opacity:1;}
.gallery-empty{
  text-align:center; padding:3rem 1.5rem;
  font-family:'Playfair Display', serif; font-style:italic;
  color:var(--blush-deep); background:var(--white);
  border-radius:3px; box-shadow:var(--shadow);
}
@media (max-width:760px){
  .gallery-grid{grid-template-columns:repeat(2, 1fr);}
}

/* -------- Lightbox -------- */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(43,38,34,0.92);
  display:none; align-items:center; justify-content:center;
  padding:5vh 4vw;
}
.lightbox.open{display:flex;}
.lightbox img{
  max-width:100%; max-height:80vh; border-radius:2px;
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
}
.lightbox-caption{
  color:var(--blush-pale); font-family:'Cormorant Garamond', serif;
  font-style:italic; text-align:center; margin-top:1rem; font-size:1rem;
}
.lightbox-close{
  position:absolute; top:22px; right:26px;
  background:none; border:none; color:var(--cream);
  font-size:1.8rem; cursor:pointer; line-height:1;
}