:root {
  --paper: #f7e9df;
  --paper-light: #fbf1e9;
  --wine: #8d2429;
  --wine-dark: #75191e;
  --green: #315f2d;
  --green-soft: #6d9863;
  --text: #315f2d;
  --font-playfair: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-bakinskay: "Wedding Bakinskay", "Bakinskay", "Bakinskay Regular", "Guardian Circus", "Segoe Script", cursive;
  --font-guardian: "Wedding Guardian", "mr_GuardianCircusG", "Guardian Circus", "GuardianCircus", "Segoe Script", cursive;
  --font-literaturnaya: "Wedding Literaturnaya", "Literaturnaya", "Literaturnaya Regular", Georgia, serif;
  --font-clickclack: "Wedding ClickClack", "ClickClack", "ClickClack Regular", "Courier New", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  font-family: var(--font-playfair);
  background:
    radial-gradient(circle at 22% 8%, rgba(255,255,255,.55), transparent 26rem),
    radial-gradient(circle at 83% 35%, rgba(255,255,255,.38), transparent 24rem),
    linear-gradient(115deg, #f4e2d5, #fbf0e7 48%, #f2dfd2);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

img { display: block; max-width: 100%; }

button, input, textarea { font: inherit; }

button { cursor: pointer; }

a { color: inherit; }

.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;
}

.invitation {
  position: relative;
  width: min(100%, 520px);
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 13%, rgba(255,255,255,.42), transparent 16rem),
    radial-gradient(circle at 82% 49%, rgba(255,255,255,.34), transparent 18rem),
    var(--paper);
  box-shadow: 0 0 0 1px rgba(107,55,39,.06), 0 20px 80px rgba(88,37,30,.15);
}

.section {
  position: relative;
  padding: 2.4rem 1.1rem;
  text-align: center;
}

.section.compact { padding-top: 1.2rem; padding-bottom: 1.8rem; }

h2 {
  margin: 0 0 1.1rem;
  font-family: var(--font-bakinskay);
  font-weight: 400;
  font-size: clamp(2.15rem, 11vw, 3.5rem);
  line-height: 1.05;
  color: var(--green);
  font-synthesis: none;
}

p {
  margin: .75rem auto;
  max-width: 38rem;
  font-size: 1.08rem;
  line-height: 1.35;
  font-weight: 600;
}

.hero {
  padding: 1rem .55rem 0;
}

.hero-title {
  width: 95%;
  margin: 0 auto -.4rem;
}

.hero-children {
  width: 97%;
  margin: 0 auto;
}

.date-ribbon {
  position: relative;
  z-index: 2;
  width: calc(100% + .55rem);
  margin: -1.8rem -.275rem 0;
  padding: .9rem 1rem .85rem;
  color: #f9eee8;
  background: var(--green);
  clip-path: polygon(0 22%, 5% 3%, 18% 8%, 31% 0, 43% 8%, 57% 2%, 72% 9%, 87% 0, 100% 19%, 98% 80%, 88% 92%, 73% 84%, 58% 100%, 43% 87%, 28% 96%, 14% 86%, 2% 98%);
  transform: rotate(-.4deg);
  filter: drop-shadow(0 .35rem .15rem rgba(75,38,28,.12));
}

.date-ribbon span {
  display: block;
  font-family: var(--font-guardian);
  font-size: clamp(1.65rem, 7.5vw, 2.35rem);
  line-height: 1;
  transform: rotate(.4deg);
  font-synthesis: none;
}

.intro h2 { font-size: clamp(2.2rem, 11.5vw, 3.6rem); }

.tiny-heart {
  color: var(--wine);
  font-size: .8rem;
  line-height: 1;
  margin: .65rem 0;
}

.calendar {
  width: min(100%, 680px);
  margin: 1.25rem auto 0;
}

.calendar picture,
.calendar img {
  display: block;
  width: 100%;
}

.calendar img {
  height: auto;
}

.program { padding-left: .55rem; padding-right: .55rem; }
.program h2 { white-space: nowrap; font-size: clamp(2.05rem, 9.6vw, 3.2rem); margin-bottom: .7rem; }
.program-grid { display: grid; gap: .55rem; }

.program-item {
  min-height: 8.9rem;
  display: grid;
  grid-template-columns: 32% 1fr 32%;
  align-items: center;
  padding: .1rem 0;
}

.program-item > div {
  grid-column: 2;
  text-align: center;
  z-index: 1;
}

.program-item img {
  position: static;
  width: 100%;
  max-width: 9rem;
  max-height: 8.2rem;
  object-fit: contain;
  justify-self: center;
  align-self: center;
}

.program-cupid img, .program-wine img { grid-column: 3; }
.program-letters img, .program-cake img { grid-column: 1; }

.program-item h3 {
  margin: 0;
  font-family: var(--font-bakinskay);
  font-size: clamp(1.2rem, 6.1vw, 1.8rem);
  line-height: 1.05;
  font-weight: 600;
}

.program-item time {
  display: block;
  margin-top: .14rem;
  font-family: var(--font-bakinskay);
  font-size: clamp(3rem, 16vw, 4.3rem);
  line-height: .95;
  color: var(--green);
}

.program-cupid img { max-width: 8.6rem; }
.program-letters img { max-width: 8.5rem; }
.program-wine img { max-width: 6.7rem; }
.program-cake img { max-width: 7.8rem; }

.locations { padding-bottom: 2.8rem; }
.locations-wrap { position: relative; min-height: 36rem; }

.heart-card {
  position: absolute;
  z-index: 2;
  width: 72%;
  aspect-ratio: 1.04;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f7e9df;
  background: var(--wine);
  filter: drop-shadow(.45rem .55rem 0 rgba(101,21,26,.82));
  clip-path: polygon(50% 96%, 7% 54%, 2% 39%, 3% 24%, 10% 11%, 22% 4%, 34% 5%, 44% 12%, 50% 20%, 56% 12%, 66% 5%, 79% 4%, 91% 11%, 98% 24%, 99% 39%, 94% 54%);
}

.heart-copy {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  transform: translateY(-8%);
}

.heart-card p, .heart-card strong, .heart-card span {
  display: block;
  margin: .22rem 0;
  font-family: var(--font-literaturnaya);
  font-size: clamp(.92rem, 3.65vw, 1.08rem);
  line-height: 1.18;
}

.heart-card p { margin-bottom: .45rem; }
.heart-card strong { font-weight: 700; }
.heart-card span { font-weight: 700; margin-top: .5rem; }
.heart-one { top: .2rem; left: -1%; transform: rotate(-1deg); }
.heart-two { top: 16rem; right: -1%; transform: rotate(1deg); }

.location-hand {
  position: absolute;
  z-index: 1;
  width: 30%;
  max-height: 13.5rem;
  object-fit: contain;
}
.hand-right { right: -8%; top: .1rem; }
.hand-left { left: -8%; top: 19.3rem; transform: scaleX(-1); }

.dress-code p { max-width: 30rem; }
.palette {
  display: flex;
  justify-content: center;
  gap: .58rem;
  margin: 1.7rem auto 1.1rem;
  flex-wrap: nowrap;
}
.palette span {
  display: inline-block;
  position: relative;
  width: clamp(2.25rem, 11vw, 3.2rem);
  aspect-ratio: 1;
  transform: rotate(-45deg) scale(.74);
  background: var(--heart);
  border-radius: 18% 0 16% 0;
}
.palette span::before,
.palette span::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: 50%;
}
.palette span::before { top: -50%; left: 0; }
.palette span::after { left: 50%; top: 0; }
.dress-note { font-weight: 700; }

.details { padding-top: 1.4rem; }
.details-grid { display: grid; gap: 1.65rem; }
.detail-shape {
  display: grid;
  place-items: center;
  margin: 0 auto;
  padding: 1.5rem 1.35rem;
  color: #fff8f2;
  background: var(--wine);
  border: 3px dashed var(--paper);
  outline: 4px solid var(--wine);
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
}
.detail-rounded { width: 92%; min-height: 10rem; border-radius: 2.2rem; }
.detail-circle { width: min(84vw, 22rem); aspect-ratio: 1; border-radius: 50%; padding: 2rem; }
.detail-half { width: 92%; min-height: 9.5rem; border-radius: .3rem .3rem 50% 50% / .3rem .3rem 85% 85%; padding-bottom: 2.5rem; }
.detail-half a { text-decoration: none; font-weight: 700; }

.rsvp { padding-top: 1.8rem; }
.rsvp-intro { margin-bottom: 2rem; }

form { text-align: left; }
.form-field { margin: 0 0 1.55rem; }
.form-field > label,
fieldset legend {
  display: block;
  color: var(--green);
  font-size: 1.22rem;
  font-weight: 700;
}

input[type="text"], textarea {
  width: 100%;
  border: 0;
  border-bottom: 1.5px solid rgba(49,95,45,.65);
  border-radius: 0;
  padding: .5rem .2rem .35rem;
  color: var(--green);
  background: transparent;
  outline: none;
}
textarea { border: 1.5px solid rgba(49,95,45,.5); margin-top: .55rem; resize: vertical; }
input[type="text"]:focus, textarea:focus { border-color: var(--wine); box-shadow: 0 1px 0 var(--wine); }

fieldset {
  margin: 0 0 1.45rem;
  padding: 0;
  border: 0;
}
fieldset legend { margin-bottom: .38rem; }

.choice {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin: .2rem 0;
  font-size: 1.03rem;
  line-height: 1.24;
  font-weight: 600;
  cursor: pointer;
}

.choice input {
  appearance: none;
  flex: 0 0 auto;
  width: 1.22rem;
  height: 1.22rem;
  margin: .05rem 0 0;
  border: 2px solid rgba(49,95,45,.65);
  background: transparent;
}
.choice input[type="radio"] { border-radius: 50%; }
.choice input:checked { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 3px var(--paper); }
.choice input:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }

fieldset.is-disabled { opacity: .43; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

#submit-button {
  display: block;
  font-family: var(--font-playfair);
  min-width: 9rem;
  margin: 1.1rem auto .7rem;
  padding: .75rem 1.6rem;
  border: 0;
  color: #f7e9df;
  background: var(--green);
  text-transform: lowercase;
  font-size: 1.1rem;
  font-weight: 700;
  box-shadow: 0 .2rem .6rem rgba(49,95,45,.18);
}
#submit-button:hover { filter: brightness(.94); }
#submit-button:disabled { cursor: wait; opacity: .65; }

.form-message {
  min-height: 1.5rem;
  margin-top: .55rem;
  text-align: center;
  font-weight: 700;
}
.form-message.success { color: var(--green); }
.form-message.error { color: var(--wine); }
.deadline { margin-top: 1rem; font-weight: 700; }
.optional-comment { margin-top: .3rem; }

.footer { padding-bottom: 0; }
.footer h2 { font-size: clamp(3rem, 15vw, 5rem); margin-bottom: .55rem; }
.footer p {
  font-family: var(--font-clickclack);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: .01em;
}
.footer img { width: calc(100% + 2.2rem); max-width: none; margin: 1.4rem -1.1rem 0; }

@media (max-width: 360px) {
  .section { padding-left: .8rem; padding-right: .8rem; }
  .program h2 { font-size: 1.95rem; }
  .program-item { min-height: 7.7rem; grid-template-columns: 30% 1fr 30%; }
  .program-item img { max-width: 6.5rem; max-height: 6.4rem; }
  .program-item h3 { font-size: 1.05rem; }
  .program-item time { font-size: 2.7rem; }
  .heart-card p, .heart-card strong, .heart-card span { font-size: .78rem; line-height: 1.15; }
  .heart-copy { width: 78%; transform: translateY(-9%); }
  .heart-two { top: 15.4rem; }
}

@media (min-width: 700px) {
  body { padding: 2rem; }
  .invitation { width: min(100%, 920px); border-radius: .2rem; }
  .section { padding: 3.6rem 4rem; }
  .hero { padding-top: 2rem; }
  .hero-title { width: 72%; }
  .hero-children { width: 67%; }
  .date-ribbon { width: 72%; margin: -2.6rem auto 0; }
  .intro { max-width: 760px; margin: 0 auto; }
  .calendar { width: min(100%, 760px); }
  .program h2 { white-space: normal; }
  .program-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.2rem 2.2rem; }
  .program-item { min-height: 12.3rem; grid-template-columns: 30% 1fr 30%; border-bottom: 1px solid rgba(49,95,45,.14); padding: .2rem 0; }
  .program-item img { max-height: 10.2rem; max-width: 9.2rem; }
  .program-item h3 { font-size: 1.5rem; }
  .program-item time { font-size: 4.15rem; }
  .locations-wrap { min-height: 29rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; align-items: start; }
  .heart-card { position: relative; inset: auto; width: 100%; max-width: 360px; margin: 0 auto; transform: none; }
  .heart-copy { width: 78%; transform: translateY(-10%); }
  .heart-two { margin-top: 3rem; }
  .location-hand { width: 19%; max-height: 12rem; }
  .hand-right { right: -2%; top: -1rem; }
  .hand-left { left: -2%; top: 12rem; }
  .palette { gap: .78rem; }
  .dress-code { max-width: 760px; margin: 0 auto; }
  .details-grid { grid-template-columns: repeat(3, minmax(0,1fr)); align-items: center; gap: 1.3rem; }
  .detail-rounded, .detail-circle, .detail-half { width: 100%; min-height: 18rem; aspect-ratio: auto; }
  .detail-circle { border-radius: 50%; padding: 2rem 1.2rem; }
  .detail-half { border-radius: 1rem 1rem 50% 50% / 1rem 1rem 45% 45%; }
  .rsvp { max-width: 680px; margin: 0 auto; }
  .footer img { width: 80%; margin: 1.4rem auto 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-title, .hero-children { animation: appear .75s ease both; }
  .date-ribbon { animation: ribbon-appear .75s ease both; }
  .hero-children { animation-delay: .08s; }
  .date-ribbon { animation-delay: .16s; }
  @keyframes appear {
    from { opacity: 0; transform: translateY(.8rem); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes ribbon-appear {
    from { opacity: 0; transform: translateY(.8rem) rotate(-.4deg); }
    to { opacity: 1; transform: translateY(0) rotate(-.4deg); }
  }
}