/* =====================================================================
   Section content. Layout of the sections themselves (stacked vs. one
   page at a time) lives in modes.css.
   ===================================================================== */

/* ---------------------------------------------------------------------
   COVER — page 1 of the card
   --------------------------------------------------------------------- */
.cover__arabic{
  font-family:var(--font-arabic);
  font-weight:700;
  font-size:clamp(1.15rem, 5.6vw, 1.6rem);
  line-height:1.7;
}
.cover__tagline{
  margin:.2rem 0 1.2rem;
  font-family:var(--font-caps);
  font-size:clamp(.8rem, 3.8vw, .98rem);
  letter-spacing:.07em;
  text-transform:uppercase;
}
.cover__emblem{
  width:clamp(8rem, 40vw, 10.5rem);
  height:auto;
  margin:0 auto .4rem;
}
.names{
  margin:.2rem 0 .3rem;
  font-family:var(--font-script);
  font-weight:400;
  font-size:clamp(2.6rem, 12.5vw, 3.6rem);
  line-height:1.08;
  text-shadow:0 3px 10px rgba(30,0,0,.45);
}
.names__line, .names__amp{ display:block; }
.names__amp{ font-size:.9em; line-height:1; }
.cover__quote{ margin:0; }
.cover__quote p,
.cover__quote cite{
  display:block;
  font-family:var(--font-body);
  font-style:normal;
  font-weight:500;
  font-size:clamp(.64rem, 2.9vw, .75rem);
  line-height:1.95;
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
}

/* ---------------------------------------------------------------------
   INVITATION — top half of page 2
   --------------------------------------------------------------------- */
.formal__parents{
  margin:1rem 0 1.1rem;
  font-family:var(--font-caps);
  font-weight:700;
  font-size:clamp(1rem, 5vw, 1.3rem);
  line-height:1.3;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-shadow:0 2px 6px rgba(30,0,0,.35);
}
.formal__parents > span{ display:block; }
.formal__amp{ font-size:1.15em; margin:.1rem 0; }
.formal__name{
  font-family:var(--font-caps);
  font-weight:700;
  font-size:clamp(1.1rem, 5.6vw, 1.45rem);
  line-height:1.3;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-shadow:0 2px 6px rgba(30,0,0,.35);
}
.formal__name--script{       /* cursive names on the invitation card (Allura) */
  font-family:var(--font-allura);
  font-weight:400;
  font-size:clamp(1.9rem, 9vw, 2.5rem);
  line-height:1.15;
  letter-spacing:0;
  text-transform:none;
}
.caps-text--relation{ margin:.55rem 0; }

/* the card's emblem, ghosted behind the formal text */
.watermark{
  position:absolute; inset:0;
  z-index:-1;
  display:grid; place-items:center;
  overflow:hidden;
  pointer-events:none;
}
.watermark img{ width:min(115%, 26rem); max-width:none; opacity:.06; transform:translateY(calc(var(--parallax, 0) * 1px)); }

/* one blossom that drifts across while the card is in view (js) */
.drift-blossom{
  position:absolute;
  top:18%; left:-6%;
  width:26px; height:auto;
  opacity:0;
  pointer-events:none;
  filter:drop-shadow(0 3px 4px rgba(30,0,0,.3));
}

/* ---------------------------------------------------------------------
   DETAILS — lower half of page 2
   --------------------------------------------------------------------- */
.details{ margin:0; }
.details__item + .details__item{ margin-top:1.55rem; }
.details dt{ margin-bottom:.35rem; opacity:.92; }
.details dd{ margin:0; }
.details__value{
  display:block;
  font-family:var(--font-caps);
  font-weight:700;
  font-size:clamp(1rem, 5vw, 1.3rem);
  line-height:1.3;
  text-transform:uppercase;
  text-shadow:0 2px 6px rgba(30,0,0,.35);
}
.details__value--sm{ font-size:clamp(.92rem, 4.4vw, 1.1rem); }
.details__link{
  display:inline-block;
  margin-top:.55rem;
  padding:.35rem 0;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ivory-soft);
  border-bottom:1px solid rgba(255,250,243,.4);
}

/* ---------------------------------------------------------------------
   COUNTDOWN
   --------------------------------------------------------------------- */
.countdown{ display:flex; justify-content:center; }
.countdown__unit{ padding:0 clamp(.6rem, 3.5vw, 1rem); min-width:3.6rem; }
.countdown__unit + .countdown__unit{ border-left:1px solid var(--paper-edge); }
.countdown__num{
  display:block;
  font-family:var(--font-caps);
  font-weight:600;
  font-size:clamp(1.7rem, 8.5vw, 2.3rem);
  line-height:1.1;
  font-variant-numeric:tabular-nums;
  color:var(--maroon);
}
.countdown__label{
  display:block;
  margin-top:.25rem;
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.countdown__done{
  font-family:var(--font-caps);
  font-size:1.05rem;
  color:var(--maroon);
}

/* ---------------------------------------------------------------------
   VENUE
   --------------------------------------------------------------------- */
.map-frame{
  padding:5px;
  background:#fff;
  border:1px solid var(--paper-edge);
  box-shadow:0 8px 18px rgba(60,10,8,.1);
}
.map-frame iframe{ display:block; width:100%; height:clamp(13rem, 60vw, 17rem); border:0; }
.venue__address{ margin:1rem auto 1.2rem; max-width:28ch; font-size:.85rem; color:var(--ink-soft); }

/* the map-app choices inside the popup */
.map-choices{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.map-choices__btn{
  display:flex; align-items:center; justify-content:center;
  min-height:3rem;
  padding:.5rem .8rem;
  border:1px solid var(--maroon);
  border-radius:2px;
  font-family:var(--font-caps);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--maroon);
  background:transparent;
  transition:background-color .25s var(--ease-soft), color .25s var(--ease-soft), transform .15s var(--ease-soft);
}
.map-choices__btn:active{ transform:scale(.97); }
@media (hover:hover){ .map-choices__btn:hover{ background:var(--maroon); color:var(--ivory); } }

/* ---------------------------------------------------------------------
   CONTACTS
   --------------------------------------------------------------------- */
.contact-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0, 1fr); gap:.7rem; }
.contact{
  min-width:0;
  padding:.9rem .8rem;
  border:1px solid var(--paper-edge);
  background:rgba(255,255,255,.55);
}
.contact__info{ margin:0 0 .85rem; }
.contact__role{                          /* who it is: the main line */
  display:block;
  font-family:var(--font-caps);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--maroon);
}
.contact__phone{                         /* the number: small, soft, in brackets (the buttons do the work) */
  display:block;
  margin-top:.4rem;
  font-size:.78rem;
  font-weight:400;
  letter-spacing:.08em;
  color:var(--ink-soft);
}
.contact__phone::before{ content:"("; }
.contact__phone::after{ content:")"; }
.contact__actions{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.5rem; }
.contact__btn{
  min-width:0;
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  min-height:2.9rem;
  padding:.5rem .4rem;
  border:1px solid var(--maroon);
  border-radius:2px;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .25s var(--ease-soft), color .25s var(--ease-soft), transform .15s var(--ease-soft);
}
@media (max-width:359px){                      /* the smallest phones: tighten a little so nothing is cut off */
  .contact__btn{ gap:.3rem; letter-spacing:.05em; font-size:.68rem; }
}
.contact__btn:active{ transform:scale(.97); }
.contact__btn svg{ width:16px; height:16px; flex:none; }
.contact__btn--call{ color:var(--maroon); background:transparent; }
.contact__btn--whatsapp{ color:#fff; background:#1f9d55; border-color:#1f9d55; }
@media (hover:hover){
  .contact__btn--call:hover{ background:var(--maroon); color:var(--ivory); }
  .contact__btn--whatsapp:hover{ background:#187a43; border-color:#187a43; }
}

/* ---------------------------------------------------------------------
   RSVP
   --------------------------------------------------------------------- */
.rsvp-form{ display:grid; gap:1rem; }
.form-status{ min-height:1.3em; font-size:.85rem; text-align:center; }
.form-status[data-state="ok"]{ color:#2f6b3c; }
.form-status[data-state="error"]{ color:#a3242a; }

/* ---------------------------------------------------------------------
   GIFT
   --------------------------------------------------------------------- */
.gift-card{
  padding:1.6rem 1.2rem;
  color:var(--ivory);
  background:
    var(--tex-grain) 0 0 / 128px 128px,
    linear-gradient(180deg, var(--maroon), var(--maroon-deep));
  box-shadow:inset 0 0 0 1px rgba(255,250,243,.5), inset 0 0 0 5px var(--maroon);
}
.gift-card__bank{ font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.gift-card__acc{ margin:.5rem 0 .3rem; font-family:var(--font-caps); font-weight:600; font-size:1.35rem; letter-spacing:.08em; }
.gift-card__name{ margin-bottom:1.1rem; font-size:.85rem; opacity:.85; }

/* ---------------------------------------------------------------------
   CLOSING
   --------------------------------------------------------------------- */
.closing__thanks{
  max-width:30ch;
  margin:0 auto;
  font-size:.75rem;
  line-height:1.9;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.closing__names{
  margin:.6rem 0 0;
  font-family:var(--font-script);
  font-size:clamp(2.2rem, 10vw, 2.9rem);
  line-height:1.2;
  color:var(--maroon);
}
.closing__names > span{ display:block; }
.closing__names i{ font-style:normal; font-size:.8em; }