/* ============================================================
   The Wedding Party page (/wedding-party) — full lineup.
   Builds on the shared shell in invite.css (tokens, nav, footer,
   corner botanicals, Mayon body background).
   ============================================================ */

.party{
  position:relative;z-index:2;
  width:min(920px,100%);
  margin:0 auto;
  padding:3.4rem 1.4rem 4.5rem;
  text-align:center;
}

/* hero */
.party-hero{margin-bottom:1.4rem}
.party-heading{
  font-size:clamp(2.6rem,7vw,4rem);
  color:var(--olive-dark);
  line-height:1.12;
}
.party-blurb{max-width:52ch;margin:0 auto}
.party-loading{margin-top:2.4rem}

/* formal program sheet — flat parchment with a double gold hairline
   (seamless at any height) and hand-painted gold flourishes mirrored
   into the four corners (flourish.webp, generated via Higgsfield) */
.party-frame{
  position:relative;
  background:linear-gradient(180deg,rgba(255,253,248,.97),rgba(244,239,227,.94));
  border:1px solid rgba(184,147,74,.5);
  border-radius:4px;
  box-shadow:0 26px 64px rgba(62,66,31,.18),inset 0 1px 0 rgba(255,255,255,.75);
  padding:3.6rem clamp(1.6rem,6vw,4rem) 4rem;
  margin-top:1.6rem;
}
.party-frame::before{                    /* inner hairline of the double frame */
  content:"";position:absolute;inset:12px;
  border:1px solid rgba(184,147,74,.3);
  border-radius:2px;pointer-events:none;
}
.party-corner{
  position:absolute;
  width:clamp(72px,14vw,128px);
  aspect-ratio:360/368;
  background:url(/media/decor/flourish.webp) top left/contain no-repeat;
  opacity:.9;pointer-events:none;
}
.party-corner.tl{top:22px;left:22px}
.party-corner.tr{top:22px;right:22px;transform:scaleX(-1)}
.party-corner.bl{bottom:22px;left:22px;transform:scaleY(-1)}
.party-corner.br{bottom:22px;right:22px;transform:scale(-1,-1)}

/* section = one block of the lineup */
.party-section{margin-top:2.6rem}
.party-divider{
  height:26px;margin:2.6rem auto 0;width:min(300px,64%);
  background:url(/media/decor/divider.webp) center/contain no-repeat;
  opacity:.8;
}
.party-frame > #party-root > .party-divider:first-child{margin-top:0}
.party-title{
  font-family:var(--script);font-weight:400;
  font-size:clamp(1.7rem,4vw,2.2rem);
  color:var(--wax);line-height:1.2;
  margin-bottom:1.4rem;
}

/* column groups: 1–3 columns of role lists */
.party-cols{
  display:grid;gap:1.6rem 2.4rem;
  grid-template-columns:repeat(2,1fr);
  align-items:start;
}
.party-cols.one{grid-template-columns:1fr}
.party-cols.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){
  .party-cols,.party-cols.three{grid-template-columns:1fr;gap:1.5rem}
}

.party-role{
  display:block;
  font-family:var(--sans);font-size:.62rem;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-deep);
  margin-bottom:.6rem;
}
.party-role::after{                      /* short gold rule beneath each role */
  content:"";display:block;
  width:34px;height:1px;margin:.5rem auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.party-name{
  font-family:var(--serif);
  font-size:clamp(1.12rem,2.4vw,1.3rem);
  font-weight:500;letter-spacing:.015em;
  color:var(--ink);line-height:1.55;
  margin:.16rem 0;
}
.party-name.tba{color:var(--ink-soft);font-style:italic;font-weight:400;opacity:.75}

/* principal sponsors: names centred, flowing into balanced columns */
.party-sponsors{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.1rem 3.2rem;
  max-width:660px;margin:0 auto;
}
.party-sponsors .party-name{flex:0 0 auto}