:root{
      --wine:#5a1f2d;
      --rose:#c8a7ac;
      --cream:#f8f3f1;
      --text:#3f2d30;
      --border:#d8c6c9;
    }

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

    body{
      font-family: 'Cormorant Garamond', serif;
      background: var(--cream);
      color: var(--text);
      line-height:1.6;
    }

    img{
      max-width:100%;
      display:block;
    }

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

    /* =========================
       NAVBAR
    ========================== */

    header{
      background: linear-gradient(to right, #4a1020, #6d2737);
      position: sticky;
      top:0;
      z-index:100;
    }

    .nav{
      max-width:1200px;
      margin:auto;
      display:flex;
      justify-content:center;
      gap:4rem;
      padding:1.2rem;
      color:white;
      letter-spacing:2px;
      text-transform:uppercase;
      font-size:0.95rem;
    }

    .nav a{
      position:relative;
    }

    .nav a::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-6px;
      width:0%;
      height:1px;
      background:white;
      transition:0.3s;
    }

    .nav a:hover::after{
      width:100%;
    }

    /* =========================
       HERO
    ========================== */

    .hero{
      border:1px solid var(--border);
      margin:2rem;
      padding:5rem 2rem;
      text-align:center;
      position:relative;
      background:white;
    }

    .hero-inner{
      max-width:900px;
      margin:auto;
    }

    .monogram{
      width:90px;
      height:90px;
      border:1px solid var(--rose);
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      margin:0 auto 2rem;
      font-size:2rem;
      color:var(--rose);
    }

    .welcome{
      letter-spacing:4px;
      text-transform:uppercase;
      margin-bottom:1rem;
      font-size:1rem;
    }

    .names{
      font-size:clamp(4rem, 10vw, 8rem);
      color:var(--wine);
      line-height:0.9;
      font-weight:400;
    }

    .ampersand{
      font-family:'Great Vibes', cursive;
      color:var(--rose);
      font-size:4rem;
      margin:1rem 0;
    }

    .date{
      margin-top:3rem;
      font-size:2rem;
      letter-spacing:4px;
    }

    .location{
      letter-spacing:3px;
      text-transform:uppercase;
      font-size:1rem;
      margin-top:0.5rem;
    }

    .btn{
      display:inline-block;
      margin-top:2rem;
      background:linear-gradient(to right, #5a1f2d, #7a3043);
      color:white;
      padding:1rem 3rem;
      border-radius:999px;
      letter-spacing:3px;
      text-transform:uppercase;
      transition:0.3s;
    }

    .btn:hover{
      transform:translateY(-2px);
      opacity:0.9;
    }

    /* =========================
       Venue
    ========================== */

    .venue{
      background:var(--cream);
    }

    .venue-grid{
      max-width:1100px;
      margin:auto;
      padding:2rem 3rem;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:4rem;
      align-items:center;
    }

    .venue-text h2{
      text-transform:uppercase;
      letter-spacing:3px;
      margin-bottom:1.5rem;
      font-size:2.5rem;
    }

    .venue-text p{
      font-size:1.3rem;
      margin-bottom:2rem;
    }

    .signature{
      font-family:'Great Vibes', cursive;
      color:var(--rose);
      font-size:2rem;
    }

    .venue-image img{
      border-radius:300px;
      border:8px solid white;
      box-shadow:0 10px 30px rgba(0,0,0,0.08);
    }

    /* =========================
       DETAILS
    ========================== */

    .details{
      padding:5rem 2rem;
      background:white;
    }

    .details h2{
      text-align:center;
      text-transform:uppercase;
      letter-spacing:3px;
      margin-bottom:4rem;
      font-size:2.5rem;
    }

    .details_body{
      max-width:1100px;
      margin:auto;
      display:grid;
      grid-template-columns: 350px 200px 600px;
      gap:2rem;
    }

    /* =========================
       FAQ
    ========================== */
/* =========================
   FAQ
========================== */

    .FAQ {
        padding: 5rem 2rem;
        background: var(--cream);
    }

    .FAQ h2 {
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 3px;
        margin-bottom: 3rem;
        font-size: 2.5rem;
        color: var(--wine);
    }

    .FAQ h3 {
        font-family: 'Montserrat', sans-serif;
        text-transform: none;
        letter-spacing: 0;
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 0.8rem;
        color: var(--wine);
    }

  .FAQ p{
  font-family:'Montserrat', sans-serif;
  text-align:left;
  letter-spacing:0;
  margin-bottom:2.5rem;
  font-size:0.95rem;
  line-height:1.7;
  color:var(--text);
}

    /* =========================
       FOOTER
    ========================== */

    footer{
      background:linear-gradient(to right, #4a1020, #6d2737);
      color:white;
      text-align:center;
      padding:1.5rem;
      letter-spacing:3px;
      text-transform:uppercase;
      font-size:0.9rem;
    }

    /* =========================
       RESPONSIVE
    ========================== */

    @media (max-width: 900px){

      .venue-grid{
        grid-template-columns:1fr;
      }

      .details-grid{
        grid-template-columns:1fr;
      }

      .nav{
        gap:1.5rem;
        font-size:0.8rem;
        flex-wrap:wrap;
      }

      .hero{
        margin:1rem;
        padding:3rem 1.5rem;
      }

      .date{
        font-size:1.5rem;
      }
    }