/* =========================
DIVI HARD RESET
Prevents Divi wrappers from
breaking fixed fullscreen layers
========================= */
@font-face {
    font-family: "Sloop Script Pro";
    src: url("https://junxnina2026.com/wp-content/uploads/2026/06/Sloop-ScriptThree.ttf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "New Icon";
    src: url("https://junxnina2026.com/wp-content/uploads/2026/06/new-icon-serif-condensed_fontlotbb33.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}


html,
body,
#page-container,
.et-db #et-boc,
.et-l,
.et_pb_section,
.et_pb_row,
.et_pb_column,
.et_pb_code,
.et_pb_code_inner{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

.et_pb_section,
.et_pb_row,
.et_pb_column,
.et_pb_code{
  overflow:visible !important;
}

.et_pb_code_inner{
  position:relative !important;
}

/* remove divi spacing */
#main-content{
  margin-top:0 !important;
}

body{
  overflow:hidden;
}

/* =========================
RESET
========================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,
body{
  width:100%;
  min-height:100%;
  background:#f6f1ed;
  font-family:'Cormorant Garamond', serif;
}

/* =========================
MAIN WRAPPER
========================= */

#luxuryWedding{
  position:fixed;
  inset:0;
  width:100vw;
  min-height:100vh;
  height:auto;
  overflow:hidden;
  background:#000;
  z-index:999999;
}

/* =========================
HERO
========================= */
.hero-image{
  position:absolute;
  inset:0;

  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;

  transform:scale(1.05);

  will-change:transform;

  z-index:1;
}


.hero-screen{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  overflow:hidden;
  z-index:1;
}

.hero-wishes {
    position: absolute;
    left: 50%;
    bottom: 150px;
    transform: translateX(-50%);
    width: min(88vw, 520px);
    z-index: 15;

    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wish-card {
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 28px;
    padding: 24px 28px;
    text-align: center;
    color: white;
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
    opacity: 1;
    transform: translateY(0);
}

.wish-message {
    font-size: 18px;
    line-height: 1.8;
    font-style: italic;
}

.wish-author {
    display: block;
    margin-top: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 12px;
    opacity: .75;
}

/* subtle cinematic overlay */
.hero-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.12),
      rgba(0,0,0,.34)
    );

  z-index:2;
}
/* =========================
HERO TITLE
========================= */

.hero-title{
    position:absolute;
    left:50%;
    top:8%;
    transform:translateX(-50%);
    width:min(1100px,92vw);
    height:520px;

    z-index:30;
    color:#fff;
    text-shadow:0 5px 20px rgba(0,0,0,.28);
}

.hero-subtitle{
    text-align:center;

    font-family:'Playfair Display',serif;
    font-size:42px;

    font-weight:400;

    letter-spacing:2px;

    margin-bottom:70px;
}

.hero-names{
    position:relative;
    width:100%;
    height:420px;
}
.hero-jia{

    position:absolute;

    left:10%;
    top: 15%;

}

.hero-jia .initial{

    font-family:"Sloop Script Pro";
    font-size:250px;
    line-height:.75;

}

.hero-jia .rest{

    position:absolute;

    left:210px;
    top:72px;

    font-family:"New Icon";

    font-size:86px;
    white-space:nowrap;

}
.hero-ampersand{
    position:absolute;

    left:55%;
    top:35%;

    transform:translate(-50%,-50%);

    font-family:"Sloop Script Pro";

    font-size:155px;

    line-height:1;

    z-index:5;
}
.hero-karenina{
    position:absolute;
    right:20%;
    top:50%;
}

.hero-karenina .initial{

    font-family:"Sloop Script Pro";

    font-size:250px;

    line-height:.75;

}

.hero-karenina .rest{

    position:absolute;

    left:230px;
    top:75px;

    font-family:"New Icon";

    font-size:86px;

    white-space:nowrap;

}
/* =========================
RSVP BUTTON
========================= */

.hero-rsvp{
  position:absolute;
  left:50%;
  bottom:80px;
  transform:translateX(-50%);

  z-index:100;

  border:1px solid rgba(255,255,255,.72);
  background:rgba(255,255,255,.08);

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  color:#fff;

  /* Bigger desktop button */
  padding:22px 78px;
  font-size:18px;
  letter-spacing:6px;
  text-transform:uppercase;
  font-weight:500;
min-width:260px;
  text-align:center;
  border-radius:999px;

  cursor:pointer;

  transition:
    background .45s ease,
    color .45s ease,
    transform .45s ease;

  overflow:hidden;
}

.hero-rsvp:hover{
  background:#fff;
  color:#3d261d;

  transform:
    translateX(-50%)
    translateY(-3px);
}

/* floating glow */
.hero-rsvp::after{
  content:"";

  position:absolute;
  inset:-24px;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.24),
      transparent 68%
    );

  animation:luxGlow 3.5s ease-in-out infinite;

  opacity:.45;

  z-index:-1;
}

@keyframes luxGlow{

  0%,100%{
    transform:scale(1);
    opacity:.18;
  }

  50%{
    transform:scale(1.18);
    opacity:.55;
  }

}

/* =========================
INVITE PANEL
========================= */

.invite-panel{
  position:fixed;
  inset:0;
padding-bottom:0 !important;
  width:100%;
  height:100dvh;

  background:#f6f1ed;

  z-index:999999;

  overflow-y:auto;
  overflow-x:hidden;

  transform:translateY(100%);

  pointer-events:none;

  will-change:transform;

  -webkit-overflow-scrolling:touch;
}

/* =========================
INNER CONTENT
========================= */

.invite-inner{
  width:100%;
  position:relative;
  z-index:2;
}

/* =========================
DEAR SECTION
========================= */

.dear-wrap{
  text-align:center;
  padding:140px 30px 70px;
}

.eyebrow{
  letter-spacing:4px;
  text-transform:uppercase;
  font-size:14px;
  opacity:.7;
  margin-bottom:18px;
}

.guest-name{
  font-family:'Playfair Display', serif;
  font-size:58px;
  margin-bottom:30px;
  color:#3f2b23;
}

.invite-copy{
  max-width:760px;
  margin:auto;

  line-height:1.9;
  font-size:22px;

  color:#5d463e;
}

/* =========================
COUPLE
========================= */

.couple-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);

  gap:90px;

  max-width:1200px;

  margin:auto;

  padding:70px 50px 40px; 
}

.person-card{
  text-align:center;
}

.person-card img{
  width:260px;
  height:340px;              /* taller than width = oval portrait */

  object-fit:cover;

  border-radius:50% / 38%;  /* THIS creates the oval shape */

  display:block;
  margin:0 auto 30px;

  box-shadow:
    0 25px 60px rgba(0,0,0,.14)
}

.person-card h3{
  font-family:'Alex Brush', cursive;
  font-size:56px;
  font-weight:400;

  margin-bottom:16px;

  color:#3f2b23;
}

.family-text{
  line-height:1.9;
  font-size:19px;
  color:#5d463e;
}


/* =========================
REVEAL STATE
========================= */

.reveal{
  opacity:0;
  transform:translateY(60px);
}
/* =========================
DESKTOP TYPOGRAPHY TWEAKS
========================= */

@media (min-width: 1025px){

  /* Dear / The Groom / Ceremony / etc */
  .eyebrow{
    font-size:20px;          /* was 12px */
    letter-spacing:5px;
    margin-bottom:24px;
    opacity:.78;
  }

  /* Guest name */
  .guest-name{
    font-size:66px;          /* was 58px */
    margin-bottom:36px;
  }

  /* Invitation paragraph */
  .invite-copy{
    font-size:26px;          /* was 22px */
    line-height:1.85;
    max-width:900px;
  }

  /* Couple names */
  .person-card h3{
    font-size:64px;          /* was 56px */
    margin-bottom:22px;
  }

  /* Parents */
  .family-text{
    font-size:22px;          /* was 19px */
    line-height:2;
  }

  /* Date */
  .date-section h2{
    font-size:82px;          /* was 72px */
  }

  /* Bible verse */
  .verse{
    font-size:26px;          /* was 22px */
    max-width:900px;
  }

  .verse-ref{
    font-size:15px;
    letter-spacing:3px;
  }

 }
/* =========================
RESPONSIVE SYSTEM (CLEAN)
========================= */
.desktop-only{
  display:block;
}

.mobile-only{
  display:none;
}
/* =========================
MOBILE + TABLET (≤1024px)
========================= */
@media (max-width: 1024px) {

  /* ---------- GLOBAL FIXES ---------- */
  body{
    overflow:auto !important;
font-size:17px;
    line-height:1.75;
  }
.eyebrow{
    font-size:14px !important;
    letter-spacing:3px;
    margin-bottom:12px;
    opacity:.75;
  }

  h1, h2, h3{
    line-height:1.2;
  }
  #luxuryWedding{
    position:relative;
    height:auto;
    min-height:100vh;
  }

  .hero-screen{
    position:relative;
    height:100svh;
  }
.hero-image{

background-image:
url("https://junxnina2026.com/wp-content/uploads/2026/06/2X2A4127-scaled.jpg")
!important;

/* reduce zoom */
background-size:cover;

background-position:center 30%;

transform:scale(1);

}
.hero-overlay{
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.35),
    rgba(0,0,0,.65)
  ) !important;
}
  /* ---------- HERO ---------- */
  .hero-title{
    height:auto;
    top:16%;
    width:95%;
  }

  .hero-subtitle{
    font-size:20px;
    margin-bottom:18px;
  }

 .hero-names{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center;
    gap:8px;
    height:auto !important;
    text-align:center;
  }

  /* kill old positioning system */
  .hero-jia,
  .hero-karenina,
  .hero-ampersand{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
  }

  /* =========================
  NAME ROW STYLE (BIG INITIAL + SMALL REST)
  ========================= */

  .hero-jia,
  .hero-karenina{
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:10px;
  }

  /* BIG SCRIPT INITIALS */
  .hero-jia .initial,
  .hero-karenina .initial{
    font-size:80px !important;
    line-height:0.9;
  }

  /* SMALLER REST TEXT */
  .hero-jia .rest,
  .hero-karenina .rest{
    font-size:35px !important;
    line-height:1.1;
    white-space:nowrap;
    position:static !important;
    margin:0;
  }

  /* AMPERSAND LINE */
  .hero-ampersand{
    font-size:78px !important;
    margin:10px 0;
  }


.hero-rsvp{
left:50%;
top:auto !important;
/* move higher */
bottom:18svh;
transform:translateX(-50%);
padding:15px 46px;
font-size:14px;
letter-spacing:4px;
min-width:220px;
z-index:100;

}

  /* ---------- TYPOGRAPHY ---------- */
  .guest-name{
    font-size:42px;
  }

  .date-section h2{
    font-size:48px;
  }

  /* ---------- LAYOUT SECTIONS ---------- */
  .dear-wrap,
  .date-section,
  .dress-section,
  .rsvp-section{
    padding:70px 22px;
  }

  .couple-grid{
    grid-template-columns:1fr;
    gap:50px;
    padding:60px 22px;
  }

/* =========================
EVENT SECTION (FIXED OVERLAY MODEL)
========================= */

 .desktop-only{
    display:none !important;
  }

  .mobile-only{
    display:block !important;
  }

  /* force natural stacking */
  .event-section{
    display:block;
  }

  /* =========================
  HERO FIX (mobile readability)
  ========================= */

  .hero-subtitle{
    font-size:16px !important;
    letter-spacing:2px;
  }



.verse{
  font-size:16px !important;
}

}


/* kill last section bottom spacing */
.invite-inner > *:last-child{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}

@media (min-width: 1025px) {

  .hero-names {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 40px;
    height: auto;
  }
.hero-jia .rest{
    position: static !important;
    left: auto !important;
    top: auto !important;
margin-left: 6px;
  }
  .hero-karenina .rest {
    position: static !important;
    left: auto !important;
    top: auto !important;
margin-left: 0px;
  }
.hero-jia,
  .hero-karenina,
  .hero-ampersand {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
align-items: baseline;
  }
.hero-jia,
  .hero-karenina {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
  }
 .hero-ampersand {
    font-size: 140px;
    line-height: 1;
  }
.hero-jia .initial,
  .hero-karenina .initial {
    line-height: 0.8;
  }
}