@font-face {
  font-family: "OhWedding Brand";
  src: local("Snell Roundhand"), local("SnellRoundhand"), url("fonts/ohwedding-brand.7ab125ea898e.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Olive Display";
  src: url("fonts/olive-display-latin-cyrillic.611d763fc2e3.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Bad Script";
  src: url("fonts/bad-script-latin-cyrillic.2cd03b15eb54.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Slab";
  src: url("fonts/roboto-slab-200-latin-cyrillic.a2d0e28ea325.woff2") format("woff2");
  font-style: normal;
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Slab";
  src: url("fonts/roboto-slab-300-latin-cyrillic.bdda9898e444.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

:root {
  --olive: #636b2f;
  --olive-muted: #9da476;
  --ink: #151511;
  --white: #fff;
  --line: #d3d5bf;
  --serif: "Olive Display", Georgia, serif;
  --sans: "Roboto Slab", Georgia, serif;
  --initials-font: "Bad Script", cursive;
  /* The Figma canvas is 700px wide. Only decoration scales without a minimum. */
  --unit: min(.142857vw, 1px);
}

* { box-sizing: border-box; }
html { background: #f0f0e9; color: var(--ink); }
body { margin: 0; font-family: var(--sans); font-weight: 200; }
h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 5px;
}

.invitation-shell {
  width: 100%;
  max-width: 700px;
  margin-inline: auto;
  overflow: hidden;
  background: var(--white);
  font-size: max(16px, calc(25 * var(--unit)));
  line-height: 1.4;
  text-align: center;
}

.content { width: 83.15%; margin-inline: auto; overflow-wrap: anywhere; }
.editable-copy p + p { margin-top: calc(42 * var(--unit)); }
.script-caption { font-family: var(--initials-font); font-size: max(26px, calc(58 * var(--unit))); line-height: 1.6; text-transform: none; }
.hero .script-caption, .love-script.script-caption { color: var(--olive); }
.month-text { color: var(--olive); padding-inline: 16px; }
.dress-copy { margin-top: calc(24 * var(--unit)); }
.details-copy { margin-top: calc(35 * var(--unit)); }

h1, h2, h3, .closing-names {
  color: var(--olive);
  font-family: var(--serif);
  font-size: max(26px, calc(48 * var(--unit)));
  font-weight: 400;
  line-height: 1.15;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.hero { padding: calc(94 * var(--unit)) 16px 0; }
h1 { font-size: max(26px, calc(48 * var(--unit))); }
.wedding-script { margin: calc(8 * var(--unit)) auto 0; width: calc(393 * var(--unit)); }
.wedding-script img { width: 100%; height: auto; }
.hero-divider {
  width: 2px;
  height: calc(130 * var(--unit));
  margin: calc(14 * var(--unit)) auto calc(78 * var(--unit));
}

.intro-copy { margin-top: max(16px, calc(22 * var(--unit))); }
.wedding-calendar { margin-top: calc(72 * var(--unit)); }
.month-script { width: calc(var(--month-width, 202) * var(--unit)); height: auto; margin-inline: auto; }
.calendar-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 93.72%;
  min-height: calc(151 * var(--unit));
  margin: calc(32 * var(--unit)) auto 0;
  font-family: var(--serif);
  color: var(--olive);
}

.calendar-day {
  display: grid;
  width: calc(100 * var(--unit));
  height: calc(100 * var(--unit));
  flex: none;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: calc(14 * var(--unit));
  font-size: calc(58 * var(--unit));
  line-height: 1;
}

.calendar-day--far {
  width: calc(82 * var(--unit));
  height: calc(82 * var(--unit));
  color: var(--olive-muted);
  font-size: calc(38 * var(--unit));
  border-radius: calc(10 * var(--unit));
}

.calendar-day--selected {
  position: relative;
  width: calc(164 * var(--unit));
  height: calc(151 * var(--unit));
  border: 0;
  color: white;
  font-size: calc(78 * var(--unit));
}

.calendar-day--selected img { position: absolute; inset: 0; width: 100%; height: 100%; }
.calendar-day--selected span { position: relative; padding-bottom: calc(5 * var(--unit)); }
.introduction-after { margin-top: calc(64 * var(--unit)); }
.introduction-after p + p { margin-top: calc(46 * var(--unit)); }

/* Slice the original artwork so the lace retains its shape as the copy grows. */
.paper-section {
  background: var(--olive) padding-box;
  border: solid transparent;
  border-width: calc(155 * var(--unit)) 0 calc(135 * var(--unit));
  border-image-source: url("images/paper.d12f7e85a5ed.webp");
  border-image-slice: 250 140 270 100 fill;
  border-image-repeat: stretch;
  color: white;
}

.paper-section h2, .paper-section h3 { color: white; }
.paper-section :focus-visible { outline-color: white; }
.venue { margin-top: calc(85 * var(--unit)); }
.venue-script { width: min(100%, calc(496 * var(--unit))); margin: 0 auto calc(22 * var(--unit)); }
.venue-script img { width: 100%; height: auto; }
.venue-name { margin-bottom: calc(32 * var(--unit)); }
.venue-address { margin-top: calc(26 * var(--unit)); }

.outline-button {
  display: inline-flex;
  min-height: 44px;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  padding: max(10px, calc(12 * var(--unit))) max(20px, calc(40 * var(--unit)));
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.3;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.outline-button:disabled { opacity: 1; cursor: default; }
.venue .outline-button { margin-top: calc(38 * var(--unit)); }
.schedule { padding-top: calc(46 * var(--unit)); }
.schedule > h2 { padding-inline: 14px; }
.schedule-subtitle {
  margin-top: calc(15 * var(--unit));
  color: var(--olive);
  font-family: var(--serif);
  font-size: max(18px, calc(30 * var(--unit)));
}

.timeline { position: relative; width: 92%; margin: calc(14 * var(--unit)) auto 0; }
.timeline-stem {
  position: absolute;
  top: 0;
  left: 11.8%;
  width: 74.5%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.timeline-events {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: calc(70 * var(--unit)) 4.8% calc(45 * var(--unit));
  list-style: none;
}

.timeline-event {
  position: relative;
  width: 50%;
  min-width: 0;
  overflow-wrap: anywhere;
  min-height: max(140px, calc(224 * var(--unit)));
  padding-top: max(76px, calc(150 * var(--unit)));
}

.timeline-event--right { margin-left: auto; text-align: right; }
.timeline-event--left { margin-right: auto; text-align: left; }
.timeline-event h3 { font-size: max(16px, calc(30 * var(--unit))); }
.timeline-event p { margin-top: calc(12 * var(--unit)); font-size: max(14px, calc(25 * var(--unit))); line-height: 1.35; }
.event-icon { position: absolute; top: 0; width: calc(110 * var(--unit)); height: calc(118 * var(--unit)); object-fit: contain; }
.timeline-event--right .event-icon { right: 0; }
.timeline-event--left .event-icon { left: 0; }
.event-icon--ceremony { width: calc(120 * var(--unit)); height: calc(135 * var(--unit)); top: calc(-15 * var(--unit)); }
.event-icon--banquet { width: calc(145 * var(--unit)); height: calc(135 * var(--unit)); }
.event-icon--cake { width: calc(111 * var(--unit)); height: calc(134 * var(--unit)); }
.event-icon--camera { width: calc(145 * var(--unit)); height: calc(110 * var(--unit)); }
.event-icon--couple { width: calc(112 * var(--unit)); height: calc(134 * var(--unit)); }
.event-icon--disco { width: calc(122 * var(--unit)); height: calc(118 * var(--unit)); }
.event-icon--fireworks { width: calc(126 * var(--unit)); height: calc(122 * var(--unit)); }

.dress-code { margin-top: calc(66 * var(--unit)); padding-bottom: calc(60 * var(--unit)); }
.dress-code h2 + p { margin-top: calc(24 * var(--unit)); }
.dress-palette { width: min(100%, calc(471 * var(--unit))); height: auto; margin: calc(42 * var(--unit)) auto; }
.dress-code .outline-button { margin-top: calc(38 * var(--unit)); color: var(--olive); }
.dress-copy + .inspiration-invitation { margin-top: calc(36 * var(--unit)); }
.inspiration-modal-open, .inspiration-modal-open body { overflow: hidden; }
.inspiration-dialog {
  position: fixed;
  inset: 0;
  width: min(680px, calc(100% - 24px));
  max-height: 90vh;
  max-height: 90dvh;
  margin: auto;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--olive-muted);
  background: var(--white);
  color: var(--ink);
}
.inspiration-dialog::backdrop { background: rgb(21 21 17 / 62%); }
.inspiration-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.inspiration-header h2 { flex: 1; font-size: clamp(24px, 5vw, 34px); }
.inspiration-close {
  display: grid;
  flex: 0 0 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--olive);
  font: 32px/1 sans-serif;
  cursor: pointer;
}
.inspiration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.inspiration-photo { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: #f4f5ec; }
.details { border-top-width: calc(170 * var(--unit)); border-bottom-width: calc(155 * var(--unit)); }
.details h2 + p { margin-top: calc(35 * var(--unit)); }
.details p + p { margin-top: calc(42 * var(--unit)); }
.gift-icon { width: calc(137 * var(--unit)); height: calc(137 * var(--unit)); object-fit: contain; margin: calc(24 * var(--unit)) auto; }
.spoiler-heading { margin: calc(54 * var(--unit)) 0 calc(30 * var(--unit)); }
.couple-hearts {
  position: relative;
  width: calc(200 * var(--unit));
  aspect-ratio: 1427 / 1102;
  margin: calc(28 * var(--unit)) auto;
}

.couple-hearts-art {
  width: 100%;
  height: auto;
  /* Hide only the baked-in initials; keep the original artwork untouched. */
  -webkit-mask: url("images/hearts-initials-mask.68dbaed2181e.svg") center / 100% 100% no-repeat;
  mask: url("images/hearts-initials-mask.68dbaed2181e.svg") center / 100% 100% no-repeat;
}

.couple-initial {
  position: absolute;
  color: white;
  font-family: var(--initials-font, var(--serif));
  font-size: calc(24 * var(--unit));
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
}

.couple-initial--groom { left: 38%; top: 63.5%; transform: translate(-50%, -50%) rotate(-16deg); }
.couple-initial--bride { left: 64.5%; top: 56.5%; transform: translate(-50%, -50%) rotate(-10deg); }
.contact-copy { margin-top: calc(28 * var(--unit)); }
.contact-actions { display: flex; align-items: center; justify-content: center; margin-top: calc(36 * var(--unit)); }
.contact-link { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; text-decoration: none; }
.contact-link > img { width: 56px; height: 56px; }
.contact-actions button { padding: 0; border: 0; background: transparent; opacity: 1; }

.rsvp { padding-top: calc(72 * var(--unit)); }
.rsvp-script { width: min(100%, calc(468 * var(--unit))); margin-inline: auto; }
.rsvp-script img { width: 100%; height: auto; }
.rsvp > h2 + p { margin-top: calc(40 * var(--unit)); }
form { width: 92%; margin: calc(56 * var(--unit)) auto 0; text-align: left; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; }
.field-label { display: block; }
.spaced-field, .consent-block { margin-top: max(24px, calc(38 * var(--unit))); }
.rsvp-deadline { margin-top: 20px; color: var(--olive); }
.legal-copy, .choice.legal-copy { font-size: 12px; line-height: 1.6; }
.choice.legal-copy { align-items: flex-start; }
.choice.legal-copy input { margin-top: 3px; }
.consent-block p { margin-top: 12px; }
textarea.line-input { resize: vertical; }
.line-input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--olive);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: max(16px, calc(21 * var(--unit)));
  outline-offset: 5px;
}

.line-input::placeholder { color: #8b8b85; opacity: 1; }
.attendance-options { margin: calc(55 * var(--unit)) 0 calc(38 * var(--unit)); }
.attendance-options legend, .drink-options legend { margin-bottom: max(12px, calc(22 * var(--unit))); }
.choice {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-size: max(16px, calc(21 * var(--unit)));
  cursor: pointer;
}

.choice input { width: 17px; height: 17px; flex: 0 0 17px; margin: 0; accent-color: var(--olive); }
.choice span { min-width: 0; overflow-wrap: anywhere; }
.drink-options { margin-top: calc(46 * var(--unit)); }
#guest-preferences:disabled, #dietarySection:disabled { opacity: .45; }
#guest-preferences:disabled .choice { cursor: default; }
.submit-button { display: flex; margin: calc(54 * var(--unit)) auto 0; color: var(--olive); }
.form-status { margin-top: 20px; padding: 16px; background: #f4f5ec; color: var(--olive); font-size: 16px; text-align: center; }
.closing-copy { margin: calc(66 * var(--unit)) auto 0; }
.closing { padding-top: calc(82 * var(--unit)); padding-bottom: max(30px, env(safe-area-inset-bottom)); }
.countdown-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: calc(40 * var(--unit)); }
.countdown-value { display: block; color: var(--olive); font-family: var(--serif); font-size: max(32px, calc(68 * var(--unit))); line-height: 1; font-variant-numeric: tabular-nums; }
.countdown-label { display: block; margin-top: 10px; color: var(--olive); font-size: max(12px, calc(16 * var(--unit))); font-weight: 300; }
#countdown-fallback { margin-top: 20px; }
.love-script { width: calc(265 * var(--unit)); margin: calc(75 * var(--unit)) 0 0 calc(64 * var(--unit)); }
.love-script img { width: 100%; height: auto; }
.closing-names { margin-top: calc(4 * var(--unit)); font-size: max(22px, calc(38 * var(--unit))); text-align: right; }
.demo-note { margin-top: 32px; font-size: 12px; line-height: 1.6; color: #787966; }
.footer-brand {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  margin: 12px auto 0;
  padding: 8px 12px;
  color: var(--olive);
  font-family: "OhWedding Brand", cursive;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}
.footer-slogan {
  color: #787966;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 380px) {
  .content { width: 88%; }
  .wide-break { display: none; }
  .timeline-events { padding-inline: 0; }
  .timeline-event h3 { font-size: 15px; }
  h1 { font-size: 24px; }
  h2, h3 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
}