html, body{ 
  overflow-x: hidden; 
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Center clean page */
#page-frame{
    position: relative;
}

/* Soft fade from floral background to white frame */
#page-frame::before{
    content:"";
    position:absolute;
    inset: -40px; /* controls fade width */
    height: 100%;
    border-radius: 1.25rem;

    pointer-events:none;

    /* Rectangular fade (no oval vignette) */
    background: rgba(255,255,255,1);

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;

    /* Fade out on all 4 sides in straight lines */
    -webkit-mask-image:
      linear-gradient(to top,    rgba(0,0,0,0) 0%, rgba(0,0,0,1) 3%),
      linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 3%),
      linear-gradient(to left,   rgba(0,0,0,0) 0%, rgba(0,0,0,1) 15%),
      linear-gradient(to right,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 15%);
    mask-image:
      linear-gradient(to top,    rgba(0,0,0,0) 0%, rgba(0,0,0,1) 3%),
      linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 3%),
      linear-gradient(to left,   rgba(0,0,0,0) 0%, rgba(0,0,0,1) 15%),
      linear-gradient(to right,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 15%);

    -webkit-mask-composite: destination-in;
    mask-composite: intersect;
    z-index:-1;
}

/* Hero image */
#heroImg{
    width: 100%;
    height: auto;
    display: block;

    /* Slight transparency in the center */
    opacity: 0.80;

    /* Required for proper masking */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: auto;
    mask-size: auto;

    /* RECTANGULAR fade on all sides */
    -webkit-mask-image:
    linear-gradient(to top,    rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%),
    linear-gradient(to left,   rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%),
    linear-gradient(to right,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%);
    mask-image:
    linear-gradient(to top,    rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%),
    linear-gradient(to left,   rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%),
    linear-gradient(to right,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%);
    
    -webkit-mask-composite: destination-in;
    mask-composite: intersect;
}

/* HERO responsiveness: image + content stacked, section height grows with content */
.hero-stack{
  position: relative;
  display: grid;
  grid-template-areas: "stack";
}
.hero-media{
  grid-area: stack;
  width: 100%;
  height: auto;
  display: block;
}
.hero-content{
  grid-area: stack;
  position: relative;
  z-index: 1;
}

/* extra small screens */
@media (max-width: 380px){
  .hero-content{ padding-bottom: 3.5rem; }
  #countdown{ gap: .6rem; }
  #countdown .card{ padding: .75rem; }
}

/* Mobile*/
@media (max-width: 640px) {

  body {
    text-align: center;
  }

  section {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  section > * {
    width: 100%;
    max-width: 100%;
  }

  .hero-content,
  .card,
  .btn,
  .countdown,
  form {
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  .btn {
    justify-content: center;
  }
}


/* Consistent section spacing (smaller gaps) */
.section{padding-top:2.5rem; padding-bottom:2.5rem;}
@media (min-width: 768px){ .section{padding-top:3rem; padding-bottom:3rem;} }

/* Scroll margin for anchored sections */
section[id]{ scroll-margin-top: 90px; }
@media (min-width:768px){ section[id]{ scroll-margin-top: 110px; } }

#top, #schedule, #venue, #travel, #dress, #rsvp, #faq {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 420px){
  #heroImg{
    min-height: 520px;
    object-fit: cover;
  }
}

.button, .pill-btn{
  touch-action: manipulation;
}

.button::before, .pill-btn::before{
  content:"";
  position:absolute;
  inset:-8px; /* expands tap area invisibly */
}