:root{
    --cream: #fbf3e4;
    --cream-card: #efe2c8;
    --tan: #ead3b4;
    --olive: #5f6b3f;
    --olive-dark: #3f4a24;
    --olive-darker: #333c1c;
    --text: #4a4232;
    --lavender: #a5a1ba;
    --rule: #b9a97e;
  }

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

  html{ scroll-behavior: smooth; }

  body{
    background: var(--cream);
    color: var(--text);
    font-family: 'EB Garamond', 'Cormorant Garamond', serif;
    overflow-x: hidden;
  }

  .wrap{
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
  }

  h1,h2,h3{ font-weight: 500; color: var(--olive-darker); }

  .eyebrow{
    letter-spacing: 3px;
    font-size: 13px;
    text-transform: uppercase;
    color: var(--olive);
    font-family: 'EB Garamond', serif;
  }

  .script{
    font-family: 'Parisienne', cursive;
    color: var(--olive-darker);
    line-height: 1.15;
  }

  a{ color: inherit; text-decoration: none; }

  /* ---------- NAV ---------- */
  header{
    position: sticky; top:0; z-index: 50;
    background: rgba(251,243,228,0.92);
    backdrop-filter: blur(4px);
    border-bottom: 1px solid rgba(95,107,63,0.15);
  }
  .navwrap{
    max-width: 1100px; margin: 0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px 40px;
  }
  .logo{
    font-size: 20px; letter-spacing: 2px; color: var(--olive-darker);
    display:flex; flex-direction: column; align-items:center; line-height:1;
  }
  nav ul{
    list-style:none; display:flex; gap: 34px;
  }
  nav a{
    font-size: 12.5px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--olive-darker); padding-bottom: 4px; border-bottom: 1px solid transparent;
  }
  nav a.active, nav a:hover{ border-bottom: 1px solid var(--olive-darker); }
  .navtoggle{ display:none; background:none; border:none; font-size: 26px; color:var(--olive-darker); cursor:pointer; }

  @media (max-width: 820px){
    nav ul{
      display:none; position:absolute; top:100%; left:0; right:0;
      background: var(--cream); flex-direction:column; align-items:center;
      gap: 22px; padding: 26px 0; border-bottom: 1px solid rgba(95,107,63,0.15);
    }
    nav ul.open{ display:flex; }
    .navtoggle{ display:block; }
  }

  /* ---------- HERO ---------- */
  .hero{
    position: relative;
    padding: 60px 40px 20px;
    max-width: 1100px; margin: 0 auto;
  }
  .hero-grid{
    display:grid; grid-template-columns: 1.15fr 1fr; gap: 50px; align-items:center;
  }
  .hero-grid img.villa{
    width:100%; border-radius: 4px; display:block;
  }
  .hero-text{ text-align:center; position:relative; z-index:2; }
  .hero-text .script{ font-size: 64px; margin: 18px 0 6px; }
  .hero-amp{ font-size: 40px; margin: -10px 0; }
  .rule{
    width: 90px; height: auto; margin: 18px auto; opacity: .9;
    display: block;
  }
  .date{ font-size: 20px; letter-spacing: 3px; margin-top: 14px; color: var(--olive-darker); }
  .venue{ font-size: 21px; margin-top: 16px; font-weight: 500; }
  .venue-sub{ font-size: 14px; letter-spacing: .5px; color: var(--text); margin-top: 4px; }

  .side-sprig{
    position:absolute; top: 0; right: 40px; width: 90px; opacity:.9; z-index:1;
    pointer-events:none;
  }
  .side-sprig2{ right: 0px; top: 10px; width: 85px; }
  .side-sprig3{ right: -30px; top: 20px; width: 100px; }
  @media (max-width: 900px){ .side-sprig{ display:none; } }

  @media (max-width: 800px){
    .hero-grid{ grid-template-columns: 1fr; }
    .hero-text .script{ font-size: 48px; }
  }

  /* ---------- BENVENUTI ---------- */
  .section-title{
    text-align:center; letter-spacing: 3px; font-size: 16px; text-transform: uppercase;
    color: var(--olive-darker); margin-bottom: 10px;
  }
  .section-title:after{
    content:''; display:block; width: 40px; height: 1px; background: var(--rule);
    margin: 14px auto 0;
  }
  .benvenuti{ padding: 70px 40px 30px; text-align:center; }
  .benvenuti p{
    max-width: 620px; margin: 24px auto 0; line-height: 2; font-size: 17px; color: var(--text);
  }

  .landscape-banner{
    width:100vw; position: relative; left: 50%; right: 50%;
    margin-left: -50vw; margin-right: -50vw;
    margin-top: 50px; margin-bottom: 50px;
    overflow: hidden;
  }
  .landscape-banner img{ width:100%; height: 300px; object-fit: cover; display:block; }
  @media (max-width: 700px){
    .landscape-banner img{ height: 180px; }
  }

  /* ---------- COUNTDOWN ---------- */
  .countdown{ text-align:center; padding: 10px 40px 60px; }
  .countdown-numbers{
    display:flex; justify-content:center; gap: 55px; margin-top: 30px; flex-wrap: wrap;
  }
  .countdown-numbers div{ min-width: 60px; }
  .countdown-numbers .num{ font-size: 42px; color: var(--olive-darker); font-weight: 500; }
  .countdown-numbers .lbl{ font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--olive); margin-top: 4px; }

  /* ---------- IL NOSTRO GIORNO ---------- */
  .giorno{ padding: 20px 40px 70px; text-align:center; }
  .giorno-grid{
    display:grid; grid-template-columns: repeat(4,1fr); margin-top: 40px;
  }
  .giorno-grid > div{ padding: 0 20px; border-left: 1px solid rgba(95,107,63,0.25); }
  .giorno-grid > div:first-child{ border-left: none; }
  .giorno-grid img{ height: 90px; object-fit: contain; margin-bottom: 18px; }
  .giorno-grid h3{ font-size: 16px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px; }
  .giorno-grid p{ font-size: 15px; color: var(--text); line-height: 1.5; }

  @media (max-width: 700px){
    .giorno-grid{ grid-template-columns: repeat(2,1fr); row-gap: 40px; }
    .giorno-grid > div{ border-left:none; }
  }

  /* ---------- INFO CARDS ---------- */
  .cards{ padding: 10px 40px 60px; }
  .cards-grid{
    display:grid; grid-template-columns: repeat(3,1fr); gap: 24px;
  }
  .card{
    background: var(--cream-card); border-radius: 6px; overflow:hidden;
    box-shadow: 0 6px 18px rgba(80,70,40,0.08);
  }
  .card img{ width:100%; height: 170px; object-fit: cover; display:block; mix-blend-mode: multiply; }
  .card-body{ padding: 22px 24px 26px; text-align:center; }
  .card-body h3{ font-size: 15px; letter-spacing: 1.5px; text-transform:uppercase; margin-bottom: 10px; }
  .card-body p{ font-size: 14.5px; color: var(--text); line-height: 1.5; }
  .card-body .link{
    display:inline-block; margin-top: 14px; font-size: 12.5px; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--olive-darker); border-bottom: 1px solid var(--olive-darker);
  }

  @media (max-width: 760px){ .cards-grid{ grid-template-columns: 1fr; } }

  /* ---------- RSVP ---------- */
  .rsvp-outer{ padding: 10px 40px 0; }
  .rsvp{
    background: var(--tan); border-radius: 6px; padding: 44px 40px;
    display:grid; grid-template-columns: 110px 1fr; gap: 30px; align-items:center;
    max-width: 900px; margin: 0 auto;
  }
  .rsvp img.envelope{ width: 100%; mix-blend-mode: multiply; }
  .rsvp-text{ text-align:center; }
  .rsvp-text .eyebrow{ display:block; margin-bottom: 6px; }
  .rsvp-text h2{ font-size: 26px; margin-bottom: 20px; }
  .btn{
    display:inline-flex; align-items:center; gap: 10px;
    background: var(--olive-darker); color: #f4ecd8;
    padding: 13px 30px; border-radius: 3px; font-size: 13px; letter-spacing: 2px;
    text-transform: uppercase; border: none; cursor: pointer;
  }
  .rsvp-text .deadline{ font-size: 13.5px; margin-top: 18px; color: var(--text); }
  .rsvp-text .deadline u{ text-decoration-color: var(--olive); }

  @media (max-width: 680px){
    .rsvp{ grid-template-columns: 1fr; text-align:center; }
    .rsvp img.envelope{ width: 90px; margin: 0 auto; }
  }

  /* ---------- FOOTER ---------- */
  footer{
    position: relative; margin-top: 60px; min-height: 340px;
    display:flex; align-items:flex-end; justify-content:space-between;
    padding: 0 60px 30px; overflow:hidden;
  }
  footer .bg{
    position:absolute; inset:0; background: linear-gradient(180deg, rgba(251,243,228,0) 0%, #e9dcc0 100%);
    z-index:0;
  }
  footer img.couple{ position:relative; z-index:2; height: 300px; object-fit: contain; object-position: bottom; }
  footer .monogram{ position:relative; z-index:2; text-align:center; padding-bottom: 30px; }
  footer .monogram .script{ font-size: 30px; }
  footer .heart{ font-size: 18px; color: var(--olive-darker); margin-bottom: 6px; }

  @media (max-width: 600px){
    footer{ justify-content:center; flex-direction:column; align-items:center; padding-bottom: 40px; }
    footer img.couple{ height: 220px; }
  }

  /* decorative divider image */
  .divider-img{ width: 260px; opacity:.9; margin: 10px auto; display:block; }


/* ---------- SUBPAGE SHARED STYLES ---------- */
.page-hero{
  padding: 70px 40px 30px; text-align:center; max-width: 800px; margin: 0 auto;
}
.page-hero .eyebrow{ display:block; margin-bottom: 10px; }
.page-hero h1{ font-family:'Parisienne', cursive; font-size: 52px; color: var(--olive-darker); margin: 6px 0 18px; }
.page-content{ max-width: 720px; margin: 0 auto; padding: 10px 40px 80px; }
.page-content h2{ font-size: 22px; margin: 40px 0 14px; }
.page-content h2:first-child{ margin-top: 0; }
.page-content p{ font-size: 16.5px; line-height: 1.9; color: var(--text); margin-bottom: 14px; }
.page-content .placeholder{
  background: rgba(95,107,63,0.08); border: 1px dashed rgba(95,107,63,0.4);
  border-radius: 6px; padding: 14px 18px; font-size: 14.5px; color: var(--olive);
  font-style: italic; margin: 10px 0 24px;
}
.info-block{
  background: var(--cream-card); border-radius: 6px; padding: 26px 28px; margin-bottom: 20px;
}
.info-block h3{ font-size: 16px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; color: var(--olive-darker); }
.back-link{ display:inline-block; margin-top: 10px; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; border-bottom: 1px solid var(--olive-darker); }

/* RSVP form */
.rsvp-form{ max-width: 560px; margin: 30px auto 0; text-align:left; }
.rsvp-form label{ display:block; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--olive-darker); margin: 18px 0 6px; }
.rsvp-form input, .rsvp-form select, .rsvp-form textarea{
  width: 100%; padding: 12px 14px; border: 1px solid rgba(95,107,63,0.3); border-radius: 4px;
  background: #fffdf8; font-family: 'EB Garamond', serif; font-size: 16px; color: var(--text);
}
.rsvp-form textarea{ min-height: 90px; resize: vertical; }
.rsvp-form .submit-row{ text-align:center; margin-top: 28px; }
.rsvp-form button{ font-family:'EB Garamond',serif; font-size: 13px; }

/* ---------- PASSWORD GATE ---------- */
#gateOverlay{
  position: fixed; inset: 0; z-index: 9999;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.gate-box{
  text-align: center; max-width: 360px; width: 100%;
}
.gate-box img{ width: 60px; height:auto; margin-bottom: 18px; }
.gate-box .gate-title{ font-family:'Parisienne', cursive; font-size: 34px; color: var(--olive-darker); margin-bottom: 8px; }
.gate-box .gate-sub{ font-size: 14.5px; color: var(--text); margin-bottom: 22px; line-height: 1.6; }
.gate-box input{
  width: 100%; padding: 12px 14px; border: 1px solid rgba(95,107,63,0.3); border-radius: 4px;
  background: #fffdf8; font-family: 'EB Garamond', serif; font-size: 16px; color: var(--text);
  text-align: center; margin-bottom: 14px;
}
.gate-box button{
  width: 100%; font-family:'EB Garamond',serif; font-size: 13px;
}
.gate-err{ color:#a14b3a; font-size: 13.5px; margin-top: 12px; display:none; }

/* ---------- GIFT / IBAN SECTION ---------- */
.gift-outer{ padding: 60px 40px 10px; }
.gift{
  max-width: 560px; margin: 0 auto; text-align:center;
  padding: 6px 20px 10px;
}
.gift h2{ font-size: 24px; margin: 8px 0 18px; }
.gift > p{ font-size: 16px; line-height: 1.9; color: var(--text); margin-bottom: 22px; }

.gift-toggle{
  background: none; border: none; cursor: pointer; font-family: 'EB Garamond', serif;
  font-size: 12.5px;
}

.gift-details{
  display: none; margin-top: 26px; padding: 26px 30px;
  background: var(--cream-card); border-radius: 6px;
}
.gift-details.open{ display: block; }
.gift-label{
  font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--olive);
  margin-bottom: 6px;
}
.gift-iban-row{
  display:flex; align-items:center; justify-content:center; gap: 12px; flex-wrap: wrap;
}
.gift-iban-row code{
  font-family: 'EB Garamond', serif; font-size: 17px; letter-spacing: 1px; color: var(--olive-darker);
  background: #fffdf8; border: 1px solid rgba(95,107,63,0.25); border-radius: 4px;
  padding: 8px 14px;
}
.gift-copy-btn{
  font-family: 'EB Garamond', serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  background: var(--olive-darker); color: #f4ecd8; border: none; border-radius: 3px;
  padding: 9px 16px; cursor: pointer;
}
.gift-copy-btn.copied{ background: var(--olive); }
.gift-names{ font-size: 17px; color: var(--olive-darker); font-weight: 500; }

@media (max-width: 600px){
  .gift-iban-row{ flex-direction: column; }
  .gift-iban-row code{ font-size: 14.5px; word-break: break-all; }
}