/* ============================================================
   components/invitation.css — Revealed invitation header.
   ============================================================ */
#stdContent{display:none;}
/* Simple, compositor-friendly fade-in for the whole invitation. This replaces
   the old JS height animation — the browser handles it, so it can't glitch.
   position+z-index:2 lifts this stacking context above .gate (z-index:1) so
   the gate's overflowing children (flowers, date card) don't paint on top. */
#stdContent.revealed{display:block;position:relative;z-index:2;animation:invite-reveal .85s cubic-bezier(.2,.8,.2,1) both;}
@keyframes invite-reveal{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}

.open-announcement{
  text-align:center;
  padding:clamp(72px,10vh,100px) var(--space-5) 0;
  /* keep the heading clear of the sticky nav when scrolled into view */
  scroll-margin-top:calc(var(--nav) + 14px);
}
.save-our-date{
  font-family:Jost, system-ui, sans-serif;
  font-size:80px;
  line-height:1.1;
  color:#111;
  margin-top:4.5rem;
}
.getting-married{
  margin-top:.4rem;
  font-family:var(--display);
  font-size:clamp(1.55rem,5.6vw,2.6rem);
  line-height:1;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#111;
}

.invite{
  /* --d is the Details button diameter; flower = 1.2×, RSVP col = 1.5× */
  --d: clamp(118px, 16vw, 166px);
  display:grid;
  grid-template-columns:calc(var(--d) * 1.5) 1fr calc(var(--d) * 1.5);
  align-items:center;
  column-gap:clamp(1rem,3vw,2rem);
  padding:clamp(42px,6vh,68px) var(--space-5) clamp(42px,6vh,68px);
  max-width:min(80vw,1200px);
  margin:0 auto;
  /* the envelope-open scroll lands here; keep the heading clear of the nav */
  scroll-margin-top:calc(var(--nav) + 16px);
}
.invite-content{grid-column:2;text-align:center;}
.invite .save-our-date{margin-top:0;margin-bottom:0;}
.invite-content .save-our-date:first-child{font-family:'WindSong',cursive;margin-top:3.0rem;}
.invite-content .save-our-date:nth-child(2){font-family:'Monsieur La Doulaise',cursive;margin-bottom:1.2rem;}
.invite .eyebrow{margin-bottom:2.2rem;font-size:15px;}
.invite .names{font-family:'Alex Brush',cursive;font-size:clamp(3.6rem,15vw,6.4rem);margin:.1em 0 .15em;line-height:1;}
.invite .when{font-family:var(--ui);letter-spacing:.4em;text-transform:uppercase;font-size:1.3rem;margin:1.8rem 0 1rem;}
.invite .venue{font-style:italic;font-size:1.75rem;color:var(--ink-soft);}
.invite .sprig{margin:4vh auto 0;}

/* Details + flower — col 3, padding-top positions the combo at ~2/5 from section top */
.invite-btn-wrap{
  grid-column:3;
  align-self:start;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  position:relative;
  padding-top:clamp(60px,8vh,100px);
}

.invite-flower{
  position:relative;
  display:block;
  width:calc(var(--d) * 1.18);
  height:auto;
  margin-left:calc(var(--d) * 0.45);
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  z-index:2;
}
.invite .suite-details{
  position:relative;
  z-index:1;
  margin:0;
  font-size:1em;
  margin-top:calc(var(--d) / -1.19);
}
.invite .suite-details small{font-size:.7rem;}
.invite .suite-details span{font-size:clamp(1.875rem,4.375vw,2.75rem);}

/* RSVP paper card — col 1, aligned to the bottom of the grid track */
.invite-rsvp-wrap{
  grid-column:1;
  grid-row:1;
  align-self:end;
  display:flex;
  flex-direction:column;
  margin-bottom:clamp(20px,3vh,40px);
}

.invite-rsvp{
  position:relative;
  z-index:0; /* stacking context so children z-indexes are self-contained */
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform var(--dur-fast) ease,filter var(--dur-fast) ease;
}
.invite-rsvp:hover{
  transform:translateY(-4px) scale(1.02);
  filter:brightness(1.03);
}
/* sunset behind the paper: 92% wide, 30% sticks out to the right */
.invite-rsvp-sunset{
  position:absolute;
  z-index:1;
  width:92%;
  height:auto;
  right:-27.6%; /* 30% × 92% = 27.6% visible past right edge */
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
/* paper sits in flow (defines button height) and above the sunset */
.invite-rsvp-paper{
  width:100%;
  display:block;
  position:relative;
  z-index:2;
  filter:drop-shadow(0 10px 20px rgba(60,52,38,.22));
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
/* sticker: 3/5 on paper left side, 2/5 hangs off; vertically at 2/5 of paper */
.invite-rsvp-sticker{
  position:absolute;
  z-index:3;
  width:26%;
  left:2.4%;
  top:28%;     /* 6% transparent margin + 2/5 × 88% paper − ½ sticker ≈ 28% */
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.invite-rsvp-label{
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#3a2e1e;
  pointer-events:none;
  gap:.3em;
}
.invite-rsvp-label small{
  font-family:var(--ui);
  font-size:.88rem;
  line-height:1.15;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.invite-rsvp-label em{
  font-family:'Italianno',cursive;
  font-style:normal;
  font-weight:700;
  font-size:clamp(1.875rem,4.375vw,2.75rem);
  line-height:1.0;
  margin-bottom:-.25em;
}

/* ----- Mobile invite: a compact, scaled 3-column layout --------------------
   Mirrors the desktop arrangement — RSVP card on the LEFT, the names/details
   text in the CENTRE, the flower + "Details" button on the RIGHT — but scaled
   down for a phone and vertically centred (align-items:center), so the two
   buttons FLANK the middle box rather than stacking underneath it. Side columns
   are sized off --d; the centre column is a flexible 1fr with min-width:0 so the
   names can wrap instead of forcing the track wider. Applied via BOTH the width
   media query and the load-time .is-mobile class (so it works without JS). */
@media(max-width:768px){
  .open-announcement{padding:clamp(36px,5vh,52px) clamp(12px,4vw,20px) 0;}

  .invite{
    --d:clamp(60px,16vw,80px);
    display:grid;
    grid-template-columns:calc(var(--d) * 1.4) minmax(0,1fr) calc(var(--d) * 1.4);
    align-items:center;
    column-gap:clamp(4px,1.5vw,8px);
    width:100%;
    max-width:480px;
    margin:0 auto;
    padding:clamp(28px,5vh,46px) clamp(6px,2vw,14px);
  }
  .invite-content{grid-column:2;grid-row:1;min-width:0;text-align:center;}
  .invite .save-our-date{font-size:clamp(1.5rem,6.5vw,2.2rem);}
  .invite .eyebrow{margin-bottom:.8rem;font-size:.58rem;}
  .invite .names{font-size:clamp(1.7rem,7.5vw,2.4rem);}
  .invite .when{margin:.7rem auto .4rem;font-size:clamp(.55rem,2.4vw,.72rem);line-height:1.5;letter-spacing:.12em;}
  .invite .venue{font-size:clamp(.8rem,3.6vw,1rem);line-height:1.3;}
  .invite .sprig{margin:1.2vh auto 0;width:clamp(50px,15vw,80px);}

  /* RSVP — left column, scaled, vertically centred beside the text */
  .invite-rsvp-wrap{grid-column:1;grid-row:1;align-self:end;width:100%;margin:0;margin-bottom:clamp(10px,2vh,20px);}
  .invite-rsvp-sunset{right:-4%;width:74%;}
  .invite-rsvp-label em{font-size:clamp(.9rem,4.4vw,1.3rem);font-weight:700;}
  .invite-rsvp-label small{font-size:.6rem;letter-spacing:.12em;}

  /* Details + flower — right column. Flower offset right (margin-left) then
     circle sits flush-left beneath it, mirroring the desktop composition. */
  .invite-btn-wrap{grid-column:3;grid-row:1;align-self:center;align-items:flex-start;width:100%;padding-top:0;margin:0;}
  .invite-flower{margin-left:calc(var(--d) * 0.45);width:calc(var(--d) * 1.2);}
  /* Reset collage.css offsets and match the desktop overlap ratio (d / 1.19). */
  .invite .suite-details{
    right:auto;
    left:auto;
    top:auto;
    align-self:start;
    width:calc(var(--d) * 1.3);
    height:calc(var(--d) * 1.3);
    margin-top:calc(var(--d) / -1.19);
  }
  .invite .suite-details span{font-size:clamp(.85rem,3.8vw,1.15rem);}
  .invite .suite-details small{font-size:.46rem;}
}

/* Same compact 3-column layout keyed off the load-time class (covers coarse-
   pointer tablets and guards against any iOS media-query timing quirks). */
.is-mobile .invite{
  --d:clamp(60px,16vw,80px);
  display:grid;
  grid-template-columns:calc(var(--d) * 1.4) minmax(0,1fr) calc(var(--d) * 1.4);
  align-items:center;
  column-gap:clamp(4px,1.5vw,8px);
  width:100%;
  max-width:480px;
  margin:0 auto;
}
.is-mobile .invite-content{grid-column:2;grid-row:1;min-width:0;text-align:center;}
.is-mobile .invite .save-our-date{font-size:clamp(1.5rem,6.5vw,2.2rem);}
.is-mobile .invite .eyebrow{margin-bottom:.8rem;font-size:.58rem;}
.is-mobile .invite .names{font-size:clamp(1.7rem,7.5vw,2.4rem);}
.is-mobile .invite .when{margin:.7rem auto .4rem;font-size:clamp(.55rem,2.4vw,.72rem);line-height:1.5;letter-spacing:.12em;}
.is-mobile .invite .venue{font-size:clamp(.8rem,3.6vw,1rem);line-height:1.3;}
.is-mobile .invite .sprig{margin:1.2vh auto 0;width:clamp(50px,15vw,80px);}
.is-mobile .invite-rsvp-wrap{grid-column:1;grid-row:1;align-self:end;width:100%;margin:0;margin-bottom:clamp(10px,2vh,20px);}
.is-mobile .invite-rsvp-sunset{right:-4%;width:74%;}
.is-mobile .invite-rsvp-label em{font-size:clamp(.9rem,4.4vw,1.3rem);font-weight:700;}
.is-mobile .invite-rsvp-label small{font-size:.6rem;letter-spacing:.12em;}
.is-mobile .invite-btn-wrap{grid-column:3;grid-row:1;align-self:center;align-items:flex-start;width:100%;padding-top:0;margin:0;}
.is-mobile .invite-flower{margin-left:calc(var(--d) * 0.45);width:calc(var(--d) * 1.2);}
.is-mobile .invite .suite-details{right:auto;left:auto;top:auto;align-self:start;width:calc(var(--d) * 1.3);height:calc(var(--d) * 1.3);margin-top:calc(var(--d) / -1.19);}
.is-mobile .invite .suite-details span{font-size:clamp(.85rem,3.8vw,1.15rem);}
.is-mobile .invite .suite-details small{font-size:.46rem;}

@media(prefers-reduced-motion:reduce){ #stdContent.revealed{animation:none;} }