/* ==========================================================================
   Wedding invitation — navy / blush theme
   ========================================================================== */

.theme-wedding {
  --navy: #0c2a5b;
  --navy-2: #3a5189;
  --blue: #6787a5;
  --blush: #efd9d8;
  --cream: #fff0e4;
  --rose: #a55a73;
  --sky: #85aae5;

  --ink: var(--navy);
  --accent: var(--rose);
  --danger: #b03a3a;
  --paper: var(--blush);
  --stage-bg: #0a1f45;

  --line: rgba(12, 42, 91, 0.42);
  --line-alt: rgba(12, 42, 91, 0.42);

  --pill-line: rgba(12, 42, 91, 0.45);
  --pill-bg: rgba(255, 255, 255, 0.35);
  --pill-bg-on: var(--navy);
  --pill-line-on: var(--navy);
  --pill-ink-on: var(--cream);

  --map-stroke: var(--navy);
  --map-bg: #dfe6ef;

  --nav-bg: rgba(12, 42, 91, 0.94);
  --nav-ink: var(--cream);
  --fab-bg: var(--navy);
  --fab-ink: var(--cream);
  --toast-bg: var(--navy);
  --toast-ink: var(--cream);

  --tex: url('../img/wedding/tex-dark.webp');
  --tex-opacity: 0.17;
}

.tex::before { background-image: var(--tex); background-size: 210px; }

/* sections drawn on navy flip the texture and the form colours */
.theme-wedding .on-navy,
.theme-wedding .rsvp,
.theme-wedding .wishes-read {
  --tex: url('../img/wedding/tex-light.webp');
  --tex-opacity: 0.1;
  --ink: var(--cream);
  --line: rgba(255, 240, 228, 0.5);
  --line-alt: rgba(255, 240, 228, 0.38);
  --pill-line: rgba(255, 240, 228, 0.55);
  --pill-bg: rgba(255, 255, 255, 0.12);
  --pill-bg-on: var(--sky);
  --pill-line-on: var(--sky);
  --pill-ink-on: var(--navy);
  --accent: var(--sky);
  --danger: #ffb3b3;
  color: var(--cream);
  background: var(--navy);
}

/* ==========================================================================
   Gate
   ========================================================================== */
.theme-wedding .gate { color: var(--cream); }
.theme-wedding .gate__media img { object-position: 50% 22%; }
.theme-wedding .gate__veil {
  background:
    radial-gradient(120% 80% at 50% 40%, rgba(12, 42, 91, 0.55) 0%, rgba(12, 42, 91, 0.88) 70%),
    linear-gradient(to bottom, rgba(10, 31, 69, 0.7), rgba(10, 31, 69, 0.95));
}
.theme-wedding .gate__monogram { filter: brightness(1.6); }
.theme-wedding .gate__guest { color: var(--cream); }
.theme-wedding .btn--gate {
  margin-top: 8px;
  background: var(--cream);
  color: var(--navy);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.86rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   1. Cover
   ========================================================================== */
.theme-wedding .cover {
  --cover-focus: 46%;
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  background: var(--navy);
}
.cover .cover__photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cover__photo > img:first-child {
  width: 100%; height: 100%;
  object-fit: cover;
  /* --par is driven by the parallax engine; object-fit:cover means sliding the
     crop window can never expose an edge */
  object-position: 50% calc(var(--cover-focus, 50%) - var(--par, 0px));
}
.theme-wedding .cover__cue { color: var(--cream); }
.theme-wedding .navbar__brand {
  -webkit-mask: url('../img/wedding/monogram.webp') center / contain no-repeat;
  mask: url('../img/wedding/monogram.webp') center / contain no-repeat;
}

.cover__card {
  position: relative;
  z-index: 3;
  container-type: inline-size;
  width: min(76%, 380px);
  margin-top: clamp(20px, 9vh, 96px);
  aspect-ratio: 912 / 812;
  background: url('../img/wedding/cover-card.webp') center / 100% 100% no-repeat;
  filter: drop-shadow(0 18px 40px rgba(8, 22, 48, 0.35));
}
.cover__card::before { content: none; }

.cover__bloom { z-index: 2; }
.cover__bloom--tl { left: -7.5%; top: -8.9%; width: 23.2%; }
.cover__bloom--br { left: 77.6%; top: 61.6%; width: 37.3%; }

.cover__eyebrow {
  position: absolute;
  left: 0; right: 0;
  top: 7%;
  margin: 0;
  text-align: center;
  color: var(--navy);
  font-size: 5.1cqw;
  letter-spacing: 0.02em;
}
.cover__names { margin: 0; }
.cover__names img { position: absolute; }
.cover__billy    { left: 28.5%; top: 22.4%; width: 44.1%; }
.cover__amp      { left: 44.1%; top: 50.2%; width: 7.3%; }
.cover__clarrisa { left: 14.5%; top: 43.4%; width: 67%; }

.cover__date {
  position: absolute;
  left: 0; right: 0;
  bottom: 8%;
  margin: 0;
  text-align: center;
  color: var(--navy);
  font-size: 5.6cqw;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   2. The couple
   ========================================================================== */
.theme-wedding .couple { background: var(--navy); padding: 0; }

.person {
  position: relative;
  container-type: inline-size;
  width: 100%;
}
.person__bg { width: 100%; height: auto; }
.person__text { position: absolute; inset: 0; }

.person__name { position: absolute; margin: 0; }
.person__name img { width: 100%; }
.person__rel,
.person__parents {
  position: absolute;
  left: 0; right: 0;
  margin: 0;
  text-align: center;
  color: var(--navy);
  white-space: nowrap;
}
.person__rel { font-size: 3.1cqw; letter-spacing: 0.01em; }
.person__parents { font-size: 4.2cqw; font-weight: 500; }
.person__parents em { font-style: italic; padding: 0 0.15em; }

/* groom card — artboard group 1564 x 1328 */
.couple .person:nth-child(1) .person__name  { left: 25.7%; top: 65.9%; width: 48.2%; }
.couple .person:nth-child(1) .person__rel   { top: 79.7%; }
.couple .person:nth-child(1) .person__parents { top: 85.5%; }

/* bride card — artboard group 1672 x 1377 */
.couple .person:nth-child(2) .person__name  { left: 38%; top: 66.7%; width: 23.1%; }
.couple .person:nth-child(2) .person__rel   { top: 79.9%; }
.couple .person:nth-child(2) .person__parents { top: 85.4%; }

/* ==========================================================================
   3. Date band
   ========================================================================== */
.theme-wedding .dateband {
  container-type: inline-size;
  background: var(--navy);
  color: var(--cream);
  padding: 0;
}
.dateband__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.4cqw;
  padding: 5.6cqw 4cqw;
}
.dateband__rule {
  flex: 1 1 0;
  height: 1.5px;
  background: currentColor;
  opacity: 0.9;
}
.dateband p { margin: 0; }
.dateband__day { font-size: 4.1cqw; letter-spacing: 0.01em; }
.dateband__dm { text-align: center; line-height: 1; }
.dateband__dm b { display: block; font-size: 5.9cqw; font-weight: 600; }
.dateband__dm span { display: block; font-size: 3.1cqw; margin-top: 0.15em; }
.dateband__year { font-size: 4.4cqw; letter-spacing: 0.02em; }

/* ==========================================================================
   4. Events
   ========================================================================== */
.theme-wedding .events { background: var(--blush); padding-bottom: 30px; }
.events__deco--l { left: 0; top: 15%; width: 18%; }
.events__deco--r { right: -8%; bottom: 8%; width: 54%; opacity: 0.85; }

.event { text-align: center; margin-bottom: 44px; }
.event .rule { margin: 0 0 18px; }
/* heading widths are the artboard's share of the rule span */
.event .rule__head--matrimony { width: 44.6%; }
.event .rule__head--reception { width: 23.3%; }
.event__venue {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.event__time {
  margin: 4px 0 14px;
  font-size: 1.3rem;
  color: var(--blue);
}
.event__address { margin: 0; font-size: 0.96rem; line-height: 1.6; }

.theme-wedding .btn--solid {
  background: var(--navy);
  color: var(--cream);
  min-width: 190px;
}
.theme-wedding .btn--ghost {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
  min-width: 190px;
}

.countdown-wrap {
  display: grid;
  gap: 18px;
  justify-items: center;
  margin-top: 8px;
}

/* ==========================================================================
   5. RSVP
   ========================================================================== */
.theme-wedding .rsvp { padding-top: 54px; padding-bottom: 74px; }
.rsvp .rule { margin: 0 0 22px; }
.rsvp .rule__head { width: 19.8%; }
.rule--light { filter: brightness(0) invert(1); opacity: 0.85; }
.rsvp__bloom { width: 42%; opacity: 0.6; }
.rsvp__bloom--l { left: -9%; bottom: -3%; }
.rsvp__bloom--r { right: -9%; bottom: -3%; transform: scaleX(-1); }
.rsvp__deadline { font-size: 1.02rem; line-height: 1.5; }
.rsvp .field__label { color: var(--cream); }
.theme-wedding .btn--submit {
  justify-self: center;
  background: var(--sky);
  color: var(--navy);
  min-width: 190px;
}
.rsvp .form { margin-top: 6px; }
fieldset.field { border: 0; margin: 0; padding: 0; }
fieldset.field[hidden] { display: none; }

/* ==========================================================================
   6. Gift
   ========================================================================== */
.theme-wedding .gift { background: var(--blush); text-align: center; }
.gift__bloom--l { left: -16%; top: 3%; width: 28%; transform: scaleX(-1); opacity: 0.7; }
.gift .rule { margin: 0 0 20px; }
.gift .rule__head { width: 12%; min-width: 46px; }
.gift__note { font-size: 0.98rem; line-height: 1.6; max-width: 40ch; margin-inline: auto; }

.account { margin: 26px 0 22px; }
.account p { margin: 0 0 6px; }
.account__bank { color: var(--rose); font-size: 1.12rem; letter-spacing: 0.04em; }
.account__holder { font-size: 1.12rem; }
.account__number {
  color: var(--rose);
  font-size: 1.42rem;
  letter-spacing: 0.06em;
  margin-bottom: 16px !important;
  font-variant-numeric: tabular-nums;
}
.flourish { width: 64%; margin: 8px auto 0; }

/* ==========================================================================
   7. Wishes
   ========================================================================== */
.theme-wedding .wishes-write { background: var(--blush); padding-top: 46px; }
.wishes__title { margin: 0 0 12px; }
.wishes__title img { height: 46px; width: auto; }
.wishes__bloom { left: -16%; bottom: -12%; width: 40%; opacity: 0.95; }
.wishes__submit { justify-self: end; }
.wishes-write .field__label { color: var(--navy); }
.input--left { text-align: left; padding-left: 2px; }

.theme-wedding .wishes-read { padding-top: 40px; padding-bottom: 46px; }
.wishes-read__bloom { right: -12%; top: 6%; width: 36%; opacity: 0.5; }
.wishes-read .wish__name { color: var(--cream); }

/* ==========================================================================
   8. Gallery
   ========================================================================== */
.theme-wedding .gallery { padding: 0; background: var(--navy); }
.gallery__item { margin: 0; }
.gallery__item img { width: 100%; }

/* ==========================================================================
   9. Closing
   ========================================================================== */
.theme-wedding .closing {
  background: var(--blush);
  padding: 0 0 0;
  text-align: center;
}
.theme-wedding .closing::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--tex);
  background-size: 210px;
  opacity: var(--tex-opacity);
  pointer-events: none;
}
.closing__photo { margin: 0; padding: 4% 15% 0; }
.closing__note {
  padding: 30px var(--pad) 26px;
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.7;
}
.closing__thanks { position: relative; }
.closing__bg { width: 100%; }
.closing__ty {
  position: absolute;
  left: 0; right: 0;
  bottom: 12%;
  margin: 0;
  display: grid;
  place-items: center;
}
.closing__ty img {
  grid-area: 1 / 1;
  width: 44%;
  filter: drop-shadow(0 0 14px rgba(255, 208, 158, 0.85));
}

.closing__foot {
  padding: 34px var(--pad) 90px;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  opacity: 0.85;
}
.closing__foot p { margin: 4px 0; }

/* the monogram artwork is white line art — mask it so it can take the ink colour */
.closing__monogram {
  display: block;          /* a span is inline, and inline boxes ignore width */
  width: 84px;
  aspect-ratio: 359 / 328;
  margin: 0 auto 12px;
  background: var(--navy);
  -webkit-mask: url('../img/wedding/monogram.webp') center / contain no-repeat;
  mask: url('../img/wedding/monogram.webp') center / contain no-repeat;
  opacity: 0.8;
}
.closing__foot a { text-decoration: none; border-bottom: 1px solid currentColor; }

/* ==========================================================================
   Small-phone tuning
   ========================================================================== */
@media (max-width: 360px) {
  body { font-size: 15px; }
  .choice span { padding: 8px 14px; font-size: 0.98rem; }
  .countdown li { min-width: 60px; }
}