:root {
  color-scheme: light;
  --ivory: #faf8f4;
  --page: #eeece7;
  --gold: #946721;
  --charcoal: #424244;
  --font-body: "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --layout-monogram-x: 0px;
  --layout-monogram-y: 0px;
  --layout-monogram-scale: 1;
  --layout-family-x: 0px;
  --layout-family-y: 0px;
  --layout-couple-x: 0px;
  --layout-couple-y: 0px;
  --layout-date-x: 0px;
  --layout-date-y: 0px;
  --layout-ceremony-spacing: 0px;
  --layout-reception-spacing: 0px;
  --layout-preparation-spacing: 0px;
  --layout-rsvp-spacing: 0px;
  --layout-content-top-padding: 0px;
  --layout-content-bottom-padding: 0px;
  --layout-main-font-adjust: 0px;
  --layout-small-font-adjust: 0px;
  --layout-letter-spacing: 0em;
  --layout-card-width: 620px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
[data-multiline-rendered="true"] {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--charcoal);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

p, h1, h2 { margin: 0; }

.invitation-stage {
  min-height: 100svh;
  padding: 36px 24px;
  display: grid;
  place-items: center;
}

.invitation {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: var(--layout-card-width);
  padding: calc(53px + var(--layout-content-top-padding)) 59px calc(33px + var(--layout-content-bottom-padding));
  background: var(--ivory);
  box-shadow: 0 3px 15px rgb(62 48 25 / 7%);
  text-align: center;
  overflow-wrap: anywhere;
}

.card-frame {
  position: absolute;
  inset: 23px;
  z-index: -1;
  pointer-events: none;
}

.card-frame span { position: absolute; background: var(--gold); opacity: .72; }
.frame-top { top: 0; left: 0; width: 100%; height: 1px; }
.frame-bottom { bottom: 0; left: 0; width: 100%; height: 1px; }
.frame-left { left: 0; top: 0; width: 1px; height: 100%; }
.frame-right { right: 0; top: 0; width: 1px; height: 100%; }

.card-frame span::after { content: ""; position: absolute; background: var(--ivory); }
.frame-top::after { top: 0; left: 63%; width: 20px; height: 1px; }
.frame-bottom::after { bottom: 0; left: 66%; width: 20px; height: 1px; }
.frame-left::after { top: 16%; left: 0; width: 1px; height: 20px; }
.frame-right::after { bottom: 18%; right: 0; width: 1px; height: 20px; }

.branding { position: relative; margin-bottom: 4px; }
.family-mark {
  position: absolute;
  top: -11px;
  right: 6px;
  max-width: 36%;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 300;
  letter-spacing: .32em;
  line-height: 1.4;
  transform: translate(var(--layout-family-x), var(--layout-family-y));
}

.family-mark::after {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  margin: 10px auto 0;
  background: var(--gold);
  opacity: .7;
}

.monogram {
  width: min(100%, 385px);
  margin: 0 auto;
  transform: translate(calc(-10px + var(--layout-monogram-x)), var(--layout-monogram-y)) scale(var(--layout-monogram-scale));
  color: var(--gold);
}

.monogram-art { display: block; width: 100%; height: auto; }
.monogram-text {
  padding: 54px 0 28px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(50px, 12vw, 86px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.04em;
}

.small-copy { font-size: calc(12px + var(--layout-small-font-adjust)); font-weight: 400; line-height: 1.85; letter-spacing: calc(.16em + var(--layout-letter-spacing)); }
.intro { white-space: pre-wrap; }
.couple-names {
  display: grid;
  justify-items: center;
  gap: 1px;
  margin-top: calc(14px + var(--layout-couple-y));
  transform: translateX(var(--layout-couple-x));
  color: var(--gold);
  font-family: var(--font-display);
  font-size: calc(clamp(27px, 5.2vw, 32px) + var(--layout-main-font-adjust));
  line-height: 1.3;
  font-weight: 300;
  letter-spacing: .3em;
}

.ampersand {
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  font-style: italic;
  line-height: 1.15;
  letter-spacing: 0;
}

.ampersand::before, .ampersand::after { content: ""; width: 76px; height: 1px; background: var(--gold); opacity: .65; }
.divided::before {
  content: "";
  display: block;
  width: 43px;
  height: 1px;
  margin: 0 auto 13px;
  background: var(--gold);
  opacity: .65;
}

.wedding-date { margin-top: calc(14px + var(--layout-date-y)); transform: translateX(var(--layout-date-x)); }
.wedding-date::before { margin-bottom: 11px; }
.weekday { margin-bottom: 5px; }
.date-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  max-width: 332px;
  margin: 0 auto;
  line-height: 1.2;
}

.date-line > span { min-width: 0; }
.month, .year {
  flex: 1 1 0;
  border-block: 1px solid color-mix(in srgb, var(--gold) 60%, transparent);
  padding-block: 8px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .08em;
}

.year { letter-spacing: .16em; }
.day {
  flex: 0 1 auto;
  border-inline: 1px solid color-mix(in srgb, var(--gold) 65%, transparent);
  padding-inline: 20px;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 49px;
  font-weight: 300;
  letter-spacing: .06em;
}

.ceremony { margin-top: calc(18px + var(--layout-ceremony-spacing)); }
.event-intro { text-wrap: balance; }
.event-time { white-space: nowrap; }
.venue-kind { margin-top: 2px; }
.venue-name { color: var(--gold); font-size: calc(18px + var(--layout-main-font-adjust)); font-weight: 400; line-height: 1.6; letter-spacing: calc(.15em + var(--layout-letter-spacing)); }
.ceremony .venue-name { margin-top: 2px; }
.reception { margin-top: calc(11px + var(--layout-reception-spacing)); }
.reception .venue-name { margin-top: 2px; }
.preparations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0;
  margin-top: calc(12px + var(--layout-preparation-spacing));
}

.preparations::before { grid-column: 1 / -1; margin-bottom: 15px; }
.preparation { padding-inline: 12px; }
.preparation + .preparation { border-left: 1px solid color-mix(in srgb, var(--gold) 65%, transparent); }
.preparations.single-preparation .preparation { grid-column: 1 / -1; border: 0; }
.preparation-label { font-size: 11.5px; letter-spacing: .12em; }
.people-label { margin-top: 2px; font-size: 11.5px; letter-spacing: .16em; }
.people { margin-top: 2px; font-size: 12px; letter-spacing: .14em; line-height: 1.8; }
.rsvp { margin-top: calc(17px + var(--layout-rsvp-spacing)); font-size: calc(11.5px + var(--layout-small-font-adjust)); letter-spacing: calc(.12em + var(--layout-letter-spacing)); }
.rsvp::before { margin-bottom: 13px; }
.rsvp-deadline { white-space: nowrap; }
.heart { display: block; width: 18px; height: 18px; margin: 10px auto 0; fill: var(--gold); stroke: none; }
.load-error { max-width: 38em; padding: 28px; background: var(--ivory); line-height: 1.8; }

@media (max-width: 600px) {
  .invitation-stage { padding: 16px 12px; }
  .invitation { padding: calc(54px + var(--layout-content-top-padding)) 29px calc(31px + var(--layout-content-bottom-padding)); }
  .card-frame { inset: 13px; }
  .frame-top::after, .frame-bottom::after { width: 15px; }
  .frame-left::after, .frame-right::after { height: 16px; }
  .branding { margin-bottom: 13px; }
  .family-mark { top: -15px; right: -1px; font-size: 19px; letter-spacing: .26em; }
  .family-mark::after { width: 22px; margin-top: 7px; }
  .monogram { width: 100%; transform: translate(calc(-7px + var(--layout-monogram-x)), var(--layout-monogram-y)) scale(var(--layout-monogram-scale)); }
  .small-copy { font-size: calc(12px + var(--layout-small-font-adjust)); letter-spacing: calc(.08em + var(--layout-letter-spacing)); }
  .couple-names { margin-top: calc(17px + var(--layout-couple-y)); letter-spacing: calc(.22em + var(--layout-letter-spacing)); }
  .ampersand::before, .ampersand::after { width: 60px; }
  .date-line { gap: 9px; }
  .month { font-size: 11px; letter-spacing: .01em; }
  .year { font-size: 11px; letter-spacing: .12em; }
  .day { font-size: 45px; padding-inline: 10px; }
  .venue-name { font-size: calc(16px + var(--layout-main-font-adjust)); letter-spacing: calc(.1em + var(--layout-letter-spacing)); }
  .ceremony { margin-top: calc(21px + var(--layout-ceremony-spacing)); }
  .reception { margin-top: calc(15px + var(--layout-reception-spacing)); }
  .preparations { margin-top: calc(15px + var(--layout-preparation-spacing)); }
  .preparation { padding-inline: 10px; }
  .preparation-label { text-wrap: balance; }
  .preparation-label, .people-label, .rsvp { font-size: 11px; letter-spacing: .04em; }
}

@media (max-width: 350px) {
  .invitation-stage { padding: 0; }
  .invitation { padding-inline: 27px; }
  .date-line { gap: 9px; }
  .day { padding-inline: 11px; }
  .preparations { grid-template-columns: 1fr; row-gap: 18px; }
  .preparations::before { margin-bottom: 0; }
  .preparation + .preparation { border: 0; }
}

.language-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 14px;
  max-width: var(--layout-card-width);
  width: 100%;
}

.language-btn {
  min-width: 44px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  background: var(--ivory);
  color: var(--charcoal);
  font: 600 11px var(--font-display);
  letter-spacing: .14em;
  cursor: pointer;
}

.language-btn.is-active {
  color: var(--gold);
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 8%, var(--ivory));
}

.language-sep {
  color: color-mix(in srgb, var(--gold) 55%, var(--charcoal));
  font-size: 11px;
  letter-spacing: .1em;
}

@media print {
  .language-switch { display: none; }
}

  .invitation-stage { min-height: 0; padding: 0; }
  .invitation { box-shadow: none; break-inside: avoid; }
  @page { margin: 10mm; }
}