@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

:root{
  --black:#030303;
  --soft-black:#080808;
  --ink:#111111;
  --white:#fbfaf7;
  --ivory:#f4f0e9;
  --gray:#c8c2b8;
  --silver:#e7e2d9;
  --line:rgba(255,255,255,.16);
  --line-dark:rgba(0,0,0,.13);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Poppins",sans-serif;
  background:var(--black);
  color:var(--white);
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:500;
  opacity:.12;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.18) 1px,transparent 1px),
    radial-gradient(circle,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:4px 4px,7px 7px;
  mix-blend-mode:overlay;
}
a{color:inherit;text-decoration:none}
img{display:block}

.site-shell{
  opacity:0;
  transform:translateY(12px);
  transition:opacity 1.2s ease, transform 1.2s ease;
}
body.revealed .site-shell{
  opacity:1;
  transform:translateY(0);
}

/* Premium cinematic intro */
.cinematic-intro{
  position:fixed;
  inset:0;
  z-index:9999;
  background:
    radial-gradient(circle at 50% 22%,rgba(255,255,255,.13),transparent 30%),
    radial-gradient(circle at 50% 62%,rgba(255,255,255,.05),transparent 46%),
    #000;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transition:opacity 1.6s ease, visibility 1.6s ease;
}
.cinematic-intro.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.intro-poster{
  position:absolute;
  inset:0;
  opacity:.24;
  filter:grayscale(1) contrast(1.1) brightness(.55);
  background-image:url("assets/hero3.png");
  background-size:cover;
  background-position:center;
  transform:scale(1.05);
  animation:posterZoom 9s ease forwards;
}
.intro-vignette{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 45%,transparent 0%,rgba(0,0,0,.3) 40%,rgba(0,0,0,.88) 100%),
    linear-gradient(to bottom,rgba(0,0,0,.35),rgba(0,0,0,.72));
  z-index:2;
}
.intro-light{
  position:absolute;
  width:70vw;
  height:70vw;
  max-width:780px;
  max-height:780px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 65%);
  filter:blur(14px);
  animation:breathLight 7s ease-in-out infinite;
  z-index:3;
}
.intro-grain{
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:none;
  opacity:.18;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.22) 1px,transparent 1px),
    radial-gradient(circle,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:4px 4px,7px 7px;
  mix-blend-mode:overlay;
  animation:grainMove .9s steps(2) infinite;
}
.veil{
  position:absolute;
  top:0;
  width:51%;
  height:100%;
  z-index:5;
  backdrop-filter:blur(4px);
  transition:transform 3s cubic-bezier(.77,0,.18,1);
}
.veil-left{
  left:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.025) 28%,rgba(0,0,0,.96) 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 8px),
    #050505;
  border-right:1px solid rgba(255,255,255,.12);
}
.veil-right{
  right:0;
  background:
    linear-gradient(270deg,rgba(255,255,255,.12),rgba(255,255,255,.025) 28%,rgba(0,0,0,.96) 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 8px),
    #050505;
  border-left:1px solid rgba(255,255,255,.12);
}
.cinematic-intro.open .veil-left{transform:translateX(-102%)}
.cinematic-intro.open .veil-right{transform:translateX(102%)}
.intro-stage{
  position:relative;
  z-index:8;
  text-align:center;
  color:var(--white);
  padding:28px;
  max-width:940px;
  animation:introArrival 2.8s ease both;
}
.cinematic-intro.open .intro-stage{
  animation:introExit 1.4s ease forwards;
}
.intro-kicker{
  text-transform:uppercase;
  letter-spacing:8px;
  font-size:11px;
  color:rgba(251,250,247,.72);
  margin-bottom:28px;
}
.intro-names{
  font-family:"Playfair Display",serif;
  display:grid;
  gap:8px;
  justify-items:center;
  line-height:.9;
  margin-bottom:28px;
}
.intro-names span{
  font-size:clamp(42px,7.6vw,114px);
  letter-spacing:-2px;
  font-weight:500;
  opacity:0;
  animation:nameReveal 2.6s ease forwards;
}
.intro-names span:last-child{animation-delay:.55s}
.intro-names em{
  font-size:clamp(34px,5vw,74px);
  font-weight:400;
  opacity:0;
  animation:nameReveal 2.6s ease .28s forwards;
}
.intro-quote{
  font-family:"Playfair Display",serif;
  font-style:italic;
  font-size:clamp(20px,2.4vw,34px);
  color:rgba(251,250,247,.88);
  margin-bottom:22px;
  opacity:0;
  animation:quoteReveal 2.2s ease 2.2s forwards;
}
.intro-request{
  text-transform:uppercase;
  letter-spacing:3px;
  line-height:2;
  font-size:11px;
  color:rgba(251,250,247,.68);
  margin-bottom:32px;
  opacity:0;
  animation:quoteReveal 2.2s ease 3.3s forwards;
}
.intro-enter{
  border:1px solid rgba(251,250,247,.72);
  background:rgba(251,250,247,.04);
  color:var(--white);
  padding:16px 34px;
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:11px;
  cursor:pointer;
  transition:.45s ease;
  font-family:"Poppins",sans-serif;
  opacity:0;
  animation:buttonReveal 1.6s ease 4.5s forwards;
}
.intro-enter:hover{
  background:var(--white);
  color:#000;
  transform:translateY(-2px);
}
.intro-note{
  margin-top:16px;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:10px;
  color:rgba(251,250,247,.42);
  opacity:0;
  animation:buttonReveal 1.6s ease 4.9s forwards;
}

/* Navigation */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:60;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:34px;
  padding:18px 16px;
  background:rgba(3,3,3,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  text-transform:uppercase;
  letter-spacing:2.6px;
  font-size:10px;
}
.nav a{opacity:.72;transition:.3s ease}
.nav a:hover,.nav a.active{opacity:1}
.nav-brand{
  position:absolute;
  left:24px;
  font-family:"Playfair Display",serif;
  text-transform:none;
  letter-spacing:0;
  font-size:22px;
  opacity:1;
}

/* Welcome */
.hero{
  min-height:100vh;
  padding:112px 20px 70px;
  display:grid;
  place-items:center;
  text-align:center;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(rgba(0,0,0,.26),rgba(0,0,0,.92)),
    radial-gradient(circle at 50% 8%,#444 0%,#121212 45%,#020202 100%);
}
.hero::before{
  content:"J";
  position:absolute;
  left:-3vw;
  top:-6vw;
  font-family:"Playfair Display",serif;
  font-size:min(56vw,760px);
  line-height:.75;
  color:rgba(255,255,255,.075);
  font-style:italic;
}
.hero::after{
  content:"H";
  position:absolute;
  right:-3vw;
  bottom:-10vw;
  font-family:"Playfair Display",serif;
  font-size:min(48vw,660px);
  line-height:.75;
  color:rgba(255,255,255,.07);
}
.hero-inner,.page-inner{
  width:min(1160px,100%);
  position:relative;
  z-index:2;
}
.eyebrow{
  color:var(--gray);
  text-transform:uppercase;
  letter-spacing:8px;
  font-size:12px;
  margin-bottom:22px;
}
h1,h2,h3{
  font-family:"Playfair Display",serif;
  font-weight:500;
}
h1{
  font-size:clamp(58px,11vw,148px);
  line-height:.84;
  letter-spacing:-4px;
  margin-bottom:30px;
}
.amp{
  font-style:italic;
  font-weight:400;
  color:var(--ivory);
}
.hero-date{
  margin-top:26px;
  text-transform:uppercase;
  letter-spacing:4px;
  color:var(--gray);
  font-size:13px;
}
.carousel{
  margin:0 auto;
  width:min(1040px,100%);
  height:min(70vh,720px);
  min-height:460px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 38px 110px rgba(0,0,0,.7);
  background:#101010;
}
.slide{
  position:absolute;
  inset:0;
  opacity:0;
  animation:fade 24s infinite;
}
.slide:nth-child(1){animation-delay:0s}
.slide:nth-child(2){animation-delay:8s}
.slide:nth-child(3){animation-delay:16s}
.slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:contrast(1.05) brightness(.92);
}
.carousel::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,transparent 35%,rgba(0,0,0,.34));
  pointer-events:none;
}
@keyframes fade{
  0%,27%{opacity:1;transform:scale(1)}
  34%,100%{opacity:0;transform:scale(1.045)}
}
.cta-row{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:38px;
}
.button{
  display:inline-block;
  padding:15px 28px;
  border:1px solid currentColor;
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:11px;
  transition:.3s ease;
}
.button:hover{
  background:var(--white);
  color:var(--black);
  transform:translateY(-2px);
}

/* Sections */
.section{padding:96px 22px;text-align:center}
.dark{background:#070707;color:var(--white)}
.light{background:var(--ivory);color:var(--ink)}
h2{
  font-size:clamp(38px,6vw,76px);
  letter-spacing:-1.5px;
  margin-bottom:18px;
}
.section-intro{
  max-width:800px;
  margin:0 auto 42px;
  line-height:1.9;
  font-weight:300;
  font-size:16px;
  opacity:.82;
}
.countdown{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  max-width:850px;
  margin:42px auto 0;
}
.time-box{
  padding:28px 10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.055);
}
.time-box span{
  display:block;
  font-family:"Playfair Display",serif;
  font-size:clamp(38px,6vw,72px);
  font-weight:600;
}
.time-box small{
  display:block;
  margin-top:8px;
  text-transform:uppercase;
  letter-spacing:2.4px;
  color:var(--gray);
  font-size:10px;
}
.page-hero{
  min-height:58vh;
  padding:128px 22px 70px;
  display:grid;
  place-items:center;
  text-align:center;
  background:
    linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.9)),
    radial-gradient(circle at 50% 0%,#3d3d3d 0%,#111 48%,#030303 100%);
  position:relative;
  overflow:hidden;
}
.page-hero::before{
  content:"JH";
  position:absolute;
  font-family:"Playfair Display",serif;
  font-size:min(35vw,430px);
  letter-spacing:-26px;
  color:rgba(255,255,255,.07);
}

/* Info */
.info-grid,.program-grid{
  max-width:1080px;
  margin:44px auto 0;
  display:grid;
  gap:16px;
}
.info-grid{grid-template-columns:repeat(4,1fr)}
.info-card,.program-card{
  padding:30px 20px;
  border:1px solid var(--line-dark);
  background:rgba(255,255,255,.42);
  text-align:left;
  min-height:190px;
}
.info-card h3,.program-card h3{
  font-size:30px;
  margin-bottom:14px;
}
.info-card p,.program-card p{
  line-height:1.8;
  font-weight:300;
  font-size:14px;
}
.program-grid{grid-template-columns:repeat(5,1fr)}
.program-card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:var(--white);
  text-align:center;
}
.program-card strong{
  display:block;
  font-size:18px;
  margin-bottom:10px;
  letter-spacing:1px;
}

/* Gallery */
.gallery-grid{
  max-width:1160px;
  margin:44px auto 0;
  columns:2 360px;
  column-gap:18px;
}
.gallery-grid img{
  width:100%;
  break-inside:avoid;
  margin:0 0 18px;
  object-fit:cover;
  filter:grayscale(1) contrast(1.12) brightness(.96);
  border:1px solid rgba(255,255,255,.13);
}

/* RSVP */
.rsvp-card{
  max-width:760px;
  margin:42px auto 0;
  padding:34px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.055);
  box-shadow:0 28px 80px rgba(0,0,0,.5);
  text-align:left;
}
form{display:grid;gap:18px}
label{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:2.4px;
  color:var(--gray);
}
input,select,textarea{
  width:100%;
  margin-top:9px;
  padding:16px 15px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.055);
  color:var(--white);
  font-family:"Poppins",sans-serif;
  font-size:15px;
  outline:none;
  transition:.25s ease;
  border-radius:0;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.08);
}
select option{color:#111}
textarea{min-height:120px;resize:vertical}
.submit{
  cursor:pointer;
  padding:17px 22px;
  border:none;
  background:var(--white);
  color:var(--black);
  text-transform:uppercase;
  letter-spacing:3px;
  font-weight:600;
  font-family:"Poppins",sans-serif;
  transition:.3s ease;
}
.submit:hover{
  transform:translateY(-2px);
  background:#d9d4cb;
}
.note{
  margin-top:18px;
  text-align:center;
  color:rgba(255,255,255,.62);
  font-size:13px;
  line-height:1.7;
}
footer{
  padding:46px 20px;
  text-align:center;
  background:#030303;
  color:var(--gray);
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:11px;
}
.reveal{animation:rise .85s ease both}

@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes posterZoom{from{transform:scale(1.08)}to{transform:scale(1.01)}}
@keyframes introArrival{from{opacity:0;transform:translateY(42px);filter:blur(16px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes nameReveal{from{opacity:0;transform:translateY(34px);filter:blur(18px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes quoteReveal{from{opacity:0;transform:translateY(16px);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes buttonReveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes introExit{from{opacity:1;filter:blur(0);transform:scale(1)}to{opacity:0;filter:blur(12px);transform:scale(1.03)}}
@keyframes grainMove{0%{transform:translate(0,0)}50%{transform:translate(-1px,1px)}100%{transform:translate(1px,-1px)}}
@keyframes breathLight{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.75;transform:scale(1.08)}}

@media(max-width:980px){
  .nav{gap:18px}
  .nav-brand{position:static;margin-right:10px}
  .program-grid{grid-template-columns:repeat(2,1fr)}
  .info-grid{grid-template-columns:repeat(2,1fr)}
  .countdown{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .nav{gap:12px;font-size:9px}
  .nav-brand{width:100%;text-align:center;font-size:20px;margin:0}
  .hero{padding-top:158px}
  h1{letter-spacing:-2px}
  .carousel{min-height:430px;height:56vh}
  .program-grid,.info-grid{grid-template-columns:1fr}
  .rsvp-card{padding:24px 18px}
  .intro-kicker{letter-spacing:5px;font-size:10px}
  .intro-request{letter-spacing:2px;font-size:10px}
  .intro-enter{padding:14px 24px}
}

/* Refined formal intro */
.intro-names.refined{
  display:grid;
  gap:10px;
  justify-items:center;
  margin-bottom:26px;
  line-height:.92;
}

.intro-names.refined span{
  font-size:clamp(48px,8.5vw,132px);
  text-transform:none;
  letter-spacing:-2px;
  animation:nameReveal 2s ease forwards;
}

.intro-names.refined em{
  font-size:clamp(38px,5.5vw,78px);
  animation:nameReveal 2s ease .25s forwards;
}

.intro-formal-line{
  font-family:"Poppins",sans-serif;
  text-transform:uppercase;
  letter-spacing:3px;
  line-height:2;
  font-size:11px;
  color:rgba(251,250,247,.72);
  margin-bottom:32px;
  opacity:0;
  animation:quoteReveal 1.8s ease 1.4s forwards;
}

@media(max-width:560px){
  .intro-names.refined span{
    font-size:clamp(42px,13vw,76px);
  }
  .intro-formal-line{
    letter-spacing:2px;
    font-size:10px;
  }
}

/* V5 simple premium intro */
.intro-kicker{
  margin-bottom:24px !important;
}

.intro-formal-line{
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
}

.cinematic-intro.open .intro-stage{
  animation:introExit 1.2s ease forwards;
}

.cinematic-intro.open .veil-left{
  transform:translateX(-102%);
}

.cinematic-intro.open .veil-right{
  transform:translateX(102%);
}


/* Final override: black & white carousel */
.carousel img,
.carousel .slide img,
.hero-carousel img{
    filter: grayscale(100%) contrast(1.15) brightness(.92) !important;
    -webkit-filter: grayscale(100%) contrast(1.15) brightness(.92) !important;
}