.wedding-quick-actions {
      display: none;
      position: sticky;
      top: 0;
      z-index: 12;
      width: min(100%, 520px);
      margin: 0 auto;
      padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-left), env(safe-area-inset-right)) 8px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      background: #fff9f3;
      border-bottom: 1px solid #d9bf9b;
    }

    body.opened .wedding-quick-actions { display: grid; }

    @supports (overflow: clip) {
      body.opened { overflow-x: clip; }
    }

    .wedding-quick-actions button {
      min-height: 48px;
      padding: 8px;
      background: linear-gradient(145deg, #7f2145, #59152e);
      color: #fff7e6;
      border: 1px solid #d9bb88;
      border-radius: 8px;
      font: 600 16px Georgia, serif;
      cursor: pointer;
    }

    .wedding-quick-actions button:focus-visible,
    .wedding-dialog button:focus-visible,
    .wedding-rsvp a:focus-visible {
      outline: 2px solid #7f2145;
      outline-offset: 3px;
    }

    @media (min-width: 960px) {
      .wedding-quick-actions {
        position: fixed;
        top: max(20px, env(safe-area-inset-top));
        right: calc(50% + 280px);
        width: 180px;
        padding: 0;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        background: transparent;
        border: 0;
      }

      .wedding-quick-actions button { box-shadow: 0 5px 16px #4d082533; }
    }

/* Replace captions within the artwork without changing any panel heights. */
.artwork-panel { position: relative; }

.artwork-caption {
  position: absolute;
  top: var(--caption-top);
  left: var(--caption-left);
  width: var(--caption-width);
  height: var(--caption-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .24em;
  margin: 0;
  background: var(--caption-background, #fefefe);
  color: #082538;
  font: 400 3.35cqw/1.1 'Century Gothic', 'Trebuchet MS', Arial, sans-serif;
  white-space: nowrap;
}

.artwork-caption--haldi {
  --caption-top: 66.15%;
  --caption-left: 23%;
  --caption-width: 55%;
  --caption-height: 1.75%;
  font-size: 2.65cqw;
}

.artwork-caption--engagement {
  --caption-top: 56.51%;
  --caption-left: 28.06%;
  --caption-width: 45.28%;
  --caption-height: 1.80%;
  --caption-background: #fff;
}

.artwork-caption--pheras {
  --caption-top: 35.19%;
  --caption-left: 27.50%;
  --caption-width: 45%;
  --caption-height: 1.76%;
}

.wedding-rsvp {
  position: absolute;
  top: 73.8%;
  left: 12%;
  width: 76%;
  height: 13.1%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff9f1;
  background: #5e3501;
  font-family: 'Century Gothic', 'Trebuchet MS', Arial, sans-serif;
}

.wedding-rsvp h2 {
  margin: 0 0 .2em;
  font-size: clamp(13px, 3.8cqw, 20px);
  line-height: 1.1;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.wedding-rsvp ul {
  display: grid;
  width: min(100%, 30em);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(12px, 3.25cqw, 17px);
}

.wedding-rsvp li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65em;
  white-space: nowrap;
}

.wedding-rsvp a {
  display: inline-flex;
  align-items: center;
  min-height: max(24px, 5.7cqw);
  color: inherit;
  text-underline-offset: .18em;
}

.wedding-rsvp a:focus-visible { outline-color: #fff9f1; }

    body.jd-sheet-open { overflow: hidden; }

    .wedding-dialog {
      --jd-sheet-ink: #424833;
      --jd-sheet-muted: #687052;
      --jd-sheet-gold: #8e7646;
      --jd-sheet-serif: "Cormorant Garamond", Georgia, serif;
      --jd-sheet-sans: Jost, Arial, sans-serif;
      --jd-sheet-script: "Great Vibes", "Brush Script MT", cursive;
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      height: 100dvh;
      max-width: none;
      max-height: none;
      margin: 0;
      padding: 0;
      overflow: auto;
      overscroll-behavior: contain;
      border: 0;
      border-radius: 0;
      background: #fff;
      box-shadow: none;
      color: var(--jd-sheet-ink);
      font-family: var(--jd-sheet-serif);
    }

    .wedding-dialog::backdrop { background: #25271d55; }

    @media (prefers-reduced-motion: no-preference) {
      .wedding-dialog[open] { animation: jd-sheet-enter .28s cubic-bezier(.22, .61, .36, 1) both; }
    }

    @keyframes jd-sheet-enter {
      from { transform: translateX(100%); }
      to { transform: translateX(0); }
    }

    @supports (transition-behavior: allow-discrete) {
      @media (prefers-reduced-motion: no-preference) {
        .wedding-dialog {
          transform: translateX(100%);
          transition: transform .28s cubic-bezier(.22, .61, .36, 1),
            display .28s allow-discrete, overlay .28s allow-discrete;
        }
        .wedding-dialog[open] { transform: translateX(0); animation: none; }
        @starting-style {
          .wedding-dialog[open] { transform: translateX(100%); }
        }
      }
    }

    .wedding-dialog .jd-sheet-bar {
      position: sticky;
      top: 0;
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: max(12px, env(safe-area-inset-top))
        max(15px, calc(50% - 380px), env(safe-area-inset-left), env(safe-area-inset-right)) 12px;
      border-bottom: 1px solid #ded8c7;
      background: #faf8f0;
      color: #485238;
    }

    .wedding-dialog .jd-sheet-back {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      font: 400 14px/1.3 var(--jd-sheet-sans);
      text-align: left;
      cursor: pointer;
    }

    .wedding-dialog .jd-sheet-back svg { flex: none; }

    .wedding-dialog .jd-sheet-tools {
      display: flex;
      flex: none;
      align-items: center;
      gap: clamp(8px, 3vw, 16px);
    }

    .wedding-dialog .jd-sheet-music {
      display: grid;
      flex: none;
      place-items: center;
      width: 44px;
      height: 44px;
      padding: 0;
      border: 1px solid #d5c8a5;
      border-radius: 50%;
      background: transparent;
      color: inherit;
      font-size: 17px;
      cursor: pointer;
    }

    .wedding-dialog .jd-sheet-music[data-playing="true"] [data-music-icon="play"],
    .wedding-dialog .jd-sheet-music:not([data-playing="true"]) [data-music-icon="pause"] {
      display: none;
    }

    .wedding-dialog .jd-sheet-monogram {
      flex: none;
      color: var(--jd-sheet-gold);
      font: 500 18px/1 var(--jd-sheet-serif);
      text-decoration: none;
      white-space: nowrap;
    }

    .wedding-dialog .jd-sheet-heading {
      padding: 32px 20px 23px;
      color: var(--jd-sheet-ink);
      text-align: center;
    }

    .wedding-dialog .jd-sheet-heading h2 {
      margin: 0;
      font: 400 clamp(34px, 7vw, 48px)/1.1 var(--jd-sheet-serif);
      letter-spacing: -.02em;
    }

    .wedding-dialog .jd-sheet-eyebrow {
      margin: 0 0 6px;
      color: var(--jd-sheet-gold);
      font: 500 11px/1.4 var(--jd-sheet-sans);
      letter-spacing: .17em;
      text-transform: uppercase;
    }

    .wedding-dialog :is(.jd-sheet-back, .jd-sheet-music, .jd-sheet-monogram):focus-visible {
      outline: 2px solid #76613b;
      outline-offset: 3px;
    }

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/font-1-latin.woff') format('woff');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/font-0-latin.woff') format('woff');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/font-3-latin.woff') format('woff');
}
@font-face {
  font-family: 'Great Vibes';
  font-display: swap;
  src: url('assets/fonts/font-4-latin.woff') format('woff');
}
@font-face {
  font-family: 'Jost';
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/font-5-latin.woff') format('woff');
}
@font-face {
  font-family: 'Jost';
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/font-6-latin.woff') format('woff');
}

.jd-wardrobe {
  width: min(100%, 760px);
  margin: 0 auto;
  padding-bottom: clamp(42px, 8vw, 88px);
  color: #535b3d;
  font-family: 'Cormorant Garamond', Georgia, serif;
}

.jd-wardrobe-cover {
  padding: clamp(38px, 7vw, 86px) 24px clamp(48px, 8vw, 90px);
  text-align: center;
}

.jd-wardrobe-cover h2 {
  margin: 8px 0 14px;
  font-weight: 400;
  font-size: clamp(37px, 6vw, 55px);
  line-height: 1;
}

.jd-wardrobe-cover p { margin: 0 auto; }
.jd-wardrobe-cover p:not(.jd-sheet-eyebrow) { font-size: clamp(19px, 3vw, 25px); line-height: 1.28; }
.jd-wardrobe-cover .jd-wardrobe-lead { font-size: clamp(23px, 3.8vw, 33px); }
.jd-wardrobe-cover .jd-wardrobe-venue { margin-block: 24px 18px; }
.jd-wardrobe-cover .jd-wardrobe-hashtag { margin-top: 24px; font-size: clamp(17px, 2.6vw, 22px); }

.jd-wardrobe-look { margin-bottom: clamp(48px, 9vw, 94px); }
.jd-wardrobe-look:last-child { margin-bottom: 0; }

.jd-wardrobe-caption {
  padding: 0 clamp(20px, 5vw, 48px) 12px;
  color: #535b3d;
}

.jd-wardrobe-caption time { font-size: clamp(18px, 3vw, 25px); }

.jd-wardrobe-caption h3 {
  margin: 6px 0 2px;
  font-size: clamp(28px, 5.2vw, 48px);
  font-weight: 400;
  line-height: 1.06;
  text-transform: uppercase;
}

.jd-wardrobe-caption p { margin: 0; font-size: clamp(18px, 3vw, 24px); line-height: 1.22; }
.jd-wardrobe-caption .jd-wardrobe-theme {
  margin: 10px 0 9px;
  font-family: 'Great Vibes', 'Cormorant Garamond', Georgia, cursive;
  font-size: clamp(36px, 7vw, 65px);
  line-height: 1.07;
}

.jd-wardrobe-look img { display: block; width: 100%; height: auto; }

.jd-wardrobe-swatches {
  display: flex;
  gap: clamp(8px, 1.2vw, 12px);
  width: fit-content;
  padding: 12px clamp(24px, 5vw, 62px);
  border-radius: 0 999px 999px 0;
  background: #deddd3;
}

.jd-wardrobe-swatches span {
  width: clamp(23px, 4vw, 34px);
  height: clamp(28px, 5vw, 42px);
  border-radius: 100% 100% 0 0;
  background: var(--swatch);
}

.jd-itinerary {
  --jd-itinerary-serif: 'Cormorant Garamond', Georgia, serif;
  --jd-itinerary-sans: 'Jost', Arial, sans-serif;
  --jd-itinerary-names: 'Ballet Names', 'Great Vibes', Georgia, serif;
  width: min(100%, 1000px);
  margin: 0 auto;
  padding: 0 24px 32px;
  flex-shrink: 0;
  color: #424833;
}

.jd-itinerary .jd-itinerary-symbols {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}

.jd-itinerary .jd-itinerary-intro {
  margin: 0 0 34px;
  text-align: center;
  font: italic 24px/1.4 var(--jd-itinerary-serif);
  color: #687052;
}

.jd-itinerary .jd-itinerary-days {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}

.jd-itinerary .jd-itinerary-day {
  min-width: 0;
  padding: 30px 26px 12px;
  border: 1px solid #ded8c7;
  border-radius: 160px 160px 4px 4px;
  background: linear-gradient(180deg, #faf8f1 0, #fff 280px);
}

.jd-itinerary .jd-itinerary-date-header {
  margin-bottom: 25px;
  padding: 0 0 26px;
  border-bottom: 1px solid #ded8c7;
  text-align: center;
}

.jd-itinerary .jd-itinerary-day-label {
  margin: 0 0 10px;
  color: #7a6640;
  font: 10px/1.4 var(--jd-itinerary-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.jd-itinerary .jd-itinerary-date-header h3 {
  margin: 0;
  font-weight: 400;
}

.jd-itinerary .jd-itinerary-date-header time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.jd-itinerary .jd-itinerary-date-number {
  color: #8e7646;
  font: 86px/.95 var(--jd-itinerary-serif);
  letter-spacing: -.045em;
}

.jd-itinerary .jd-itinerary-date-month {
  font: 26px/1.1 var(--jd-itinerary-serif);
  text-align: left;
}

.jd-itinerary .jd-itinerary-date-month > span {
  display: block;
  margin-top: 7px;
  color: #70755f;
  font: 12px/1.4 var(--jd-itinerary-sans);
  letter-spacing: .2em;
}

.jd-itinerary .jd-itinerary-date-caption {
  margin: 17px 0 0;
  color: #70755f;
  font: italic 20px/1.4 var(--jd-itinerary-serif);
}

.jd-itinerary .jd-itinerary-events {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jd-itinerary .jd-itinerary-event {
  position: relative;
  display: grid;
  grid-template-columns: 51px 40px minmax(0, 1fr);
  gap: 12px;
  min-height: 91px;
  padding: 0 0 29px;
}

.jd-itinerary .jd-itinerary-event:not(:last-child)::before {
  position: absolute;
  top: 40px;
  bottom: 0;
  left: 82px;
  border-left: 1px solid #ded8c7;
  content: "";
}

.jd-itinerary .jd-itinerary-time {
  display: flex;
  flex-direction: column;
  padding-top: 4px;
  color: #4c553a;
  font-family: var(--jd-itinerary-sans);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.jd-itinerary .jd-itinerary-time > span:first-child {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

.jd-itinerary .jd-itinerary-time > span:nth-child(2) {
  margin-top: 4px;
  color: #7a6640;
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: .12em;
}

.jd-itinerary .jd-itinerary-qualifier {
  color: #70755f;
  font-size: 9px;
  line-height: 1.25;
}

.jd-itinerary .jd-itinerary-icon {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid #d5c8a5;
  border-radius: 50%;
  background: #faf8f1;
  color: #8e7646;
}

.jd-itinerary .jd-itinerary-icon svg,
.jd-itinerary .jd-itinerary-venue svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jd-itinerary .jd-itinerary-event-copy {
  min-width: 0;
  padding-top: 2px;
}

.jd-itinerary .jd-itinerary-ceremony {
  margin: 0 0 4px;
  color: #7a6640;
  font: 9px/1.4 var(--jd-itinerary-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.jd-itinerary .jd-itinerary-event-copy h4 {
  margin: 0;
  color: #424833;
  font: 600 26px/1.08 var(--jd-itinerary-serif);
  text-wrap: balance;
}

.jd-itinerary .jd-itinerary-venue {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 8px 0 0;
  color: #70755f;
  font: 12px/1.5 var(--jd-itinerary-sans);
}

.jd-itinerary .jd-itinerary-venue svg {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 3px;
  stroke-width: 1.5;
}

.jd-itinerary .jd-itinerary-signature {
  margin: 32px 0 0;
  color: #687052;
  font: italic 22px/1.3 var(--jd-itinerary-serif);
  text-align: center;
}

.jd-itinerary .jd-itinerary-signature span {
  display: block;
  margin-top: 2px;
  font: clamp(30px, 8vw, 38px)/1.4 var(--jd-itinerary-names);
}

@media (max-width: 799px) {
  .jd-itinerary {
    width: min(100%, 520px);
    padding-inline: 20px;
  }
  .jd-itinerary .jd-itinerary-days {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .jd-itinerary .jd-itinerary-intro {
    margin-bottom: 26px;
    font-size: 22px;
  }
  .jd-itinerary .jd-itinerary-day {
    padding-inline: 24px;
  }
}

@media (max-width: 374px) {
  .jd-itinerary {
    padding-inline: 12px;
  }
  .jd-itinerary .jd-itinerary-day {
    padding-inline: 17px;
  }
  .jd-itinerary .jd-itinerary-event {
    grid-template-columns: 45px 36px minmax(0, 1fr);
    gap: 10px;
  }
  .jd-itinerary .jd-itinerary-event:not(:last-child)::before {
    top: 36px;
    left: 72px;
  }
  .jd-itinerary .jd-itinerary-icon {
    width: 36px;
    height: 36px;
  }
  .jd-itinerary .jd-itinerary-event-copy h4 {
    font-size: 23px;
  }
  .jd-itinerary .jd-itinerary-venue {
    font-size: 11px;
  }
}

.jd-itinerary-signoff { margin: 6px auto 45px; text-align: center; color: #687052; font: 400 20px/1.4 "Cormorant Garamond", Georgia, serif; }

/* Bride's family edition. Coordinates follow the original 1069 × 2336 artwork. */
.bride-cover-message, .bride-cover-names, .bride-invocation,
.bride-family-name, .bride-family-details, .bride-family-signoff {
  position: absolute; margin: 0; text-align: center; box-sizing: border-box;
}
.bride-cover-message {
  left: 15%; top: 38.8%; width: 71%; height: 5.7%;
  display: flex; align-items: center; justify-content: center; padding: 0 1%;
  background: linear-gradient(#f0f3f3, #f6f8fa); color: #674109;
  font: 400 3.35cqw/1.24 Jost, Arial, sans-serif;
}
.bride-cover-names {
  left: 17%; top: 44.3%; width: 66%; height: 25%;
  display: flex; flex-direction: column; align-items: center; justify-content: space-around;
  background: linear-gradient(#f6f8fa, #fcfdfe); color: #bb202d;
  font: 400 23.7cqw/.95 'Great Vibes', cursive;
}
.bride-cover-names .bride-cover-amp { font-size: 12cqw; line-height: .8; }
.bride-invocation {
  left: 16.84%; top: 85.96%; width: 66.42%; height: 1.8%;
  display: grid; place-items: center; background: white; color: #b9202d;
  font: 400 3.25cqw/1.1 Jost, Arial, sans-serif;
}
.bride-family-name {
  display: flex; align-items: center; justify-content: center; padding-top: 1cqw;
  white-space: nowrap;
  background: #fff; color: #b9202d; font: 400 12.2cqw/1 'Great Vibes', cursive;
}
.bride-family-name--first { left: 13%; top: 92.25%; width: 74%; height: 7.07%; font-size: 10.8cqw; }
.bride-family-name--second { left: 15.44%; top: 13.06%; width: 67.35%; height: 6.21%; }
.bride-family-details {
  left: 13.56%; width: 72.97%; background: #fff; color: #12394d;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw;
  font: 400 3.35cqw/1.25 Jost, Arial, sans-serif;
}
.bride-family-details p { margin: 0; white-space: nowrap; }
.bride-family-details--first { top: 0; height: 8.35%; }
.bride-family-details--second { top: 19.48%; height: 8.78%; }
.engagement-artwork-tail, .pheras-artwork-trim { overflow: hidden; overflow: clip; }
.engagement-artwork-tail { height: calc(100cqw * 760 / 1069); }
.pheras-artwork-trim { height: calc(100cqw * (2336 - 210) / 1069); }
.pheras-artwork-trim > .artwork-panel { top: calc(-100cqw * 210 / 1069); }
.bride-family-signoff {
  left: 16.37%; top: 65.84%; width: 68.29%; height: 5.99%;
  display: flex; flex-direction: column; justify-content: center;
  background: #5e3501; color: #fff9f1; font: 400 3.65cqw/1.3 Jost, Arial, sans-serif;
}
.bride-family-signoff strong { font-weight: 400; }
.wedding-rsvp ul { gap: 1.1cqw; font-size: clamp(11px, 3.05cqw, 16px); }
.wedding-rsvp li { flex-direction: column; gap: 0; line-height: 1.25; }
.wedding-rsvp a { min-height: max(22px, 4.8cqw); }