:root {
  --paper: #f5efe7;
  --paper-rgb: 245, 239, 231;
  --ink: #332d2a;
  --muted: #746961;
  --black: #090807;
  --line: rgba(51, 45, 42, 0.24);
  --white: #fffaf4;
  --shadow: 0 24px 80px rgba(10, 8, 7, 0.24);
  --invite-width: 80vw;
  --invite-max-width: none;
  --content-width: min(100%, 680px);
  --section-x-padding: clamp(18px, 5vw, 72px);
  --dark-section-height: 580px;
  --paper-surface:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.5), transparent 12rem),
    radial-gradient(circle at 86% 78%, rgba(116, 105, 97, 0.08), transparent 10rem),
    linear-gradient(90deg, rgba(51, 45, 42, 0.07), transparent 18px, transparent calc(100% - 18px), rgba(51, 45, 42, 0.07)),
    var(--paper);
  --paper-grain:
    linear-gradient(90deg, rgba(0, 0, 0, 0.11), transparent 16px, transparent calc(100% - 16px), rgba(0, 0, 0, 0.09)),
    repeating-linear-gradient(112deg, rgba(51, 45, 42, 0.025) 0 1px, transparent 1px 9px);
  --torn-depth: 24px;
  --clip-top: polygon(
    0 18px, 2.6% 17px, 5.2% 19px, 8.3% 17px, 11.3% 18px, 14.3% 16px,
    17.4% 18px, 20.4% 17px, 23.5% 19px, 26.5% 16px, 29.6% 18px, 32.6% 17px,
    35.7% 19px, 38.7% 17px, 41.7% 18px, 44.8% 16px, 47.8% 17px, 50.9% 19px,
    53.9% 17px, 57% 18px, 60% 16px, 63% 18px, 66.1% 17px, 69.1% 19px,
    72.2% 16px, 75.2% 18px, 78.3% 17px, 81.3% 19px, 84.3% 17px, 87.4% 18px,
    90.4% 16px, 93.5% 18px, 96.5% 17px, 100% 18px, 100% 100%, 0 100%
  );
  --clip-top-bottom: polygon(
    0 18px, 2.6% 17px, 5.2% 19px, 8.3% 17px, 11.3% 18px, 14.3% 16px,
    17.4% 18px, 20.4% 17px, 23.5% 19px, 26.5% 16px, 29.6% 18px, 32.6% 17px,
    35.7% 19px, 38.7% 17px, 41.7% 18px, 44.8% 16px, 47.8% 17px, 50.9% 19px,
    53.9% 17px, 57% 18px, 60% 16px, 63% 18px, 66.1% 17px, 69.1% 19px,
    72.2% 16px, 75.2% 18px, 78.3% 17px, 81.3% 19px, 84.3% 17px, 87.4% 18px,
    90.4% 16px, 93.5% 18px, 96.5% 17px, 100% 18px,
    100% calc(100% - 18px), 96.5% calc(100% - 17px), 93.5% calc(100% - 18px),
    90.4% calc(100% - 16px), 87.4% calc(100% - 18px), 84.3% calc(100% - 17px),
    81.3% calc(100% - 19px), 78.3% calc(100% - 17px), 75.2% calc(100% - 18px),
    72.2% calc(100% - 16px), 69.1% calc(100% - 19px), 66.1% calc(100% - 17px),
    63% calc(100% - 18px), 60% calc(100% - 16px), 57% calc(100% - 18px),
    53.9% calc(100% - 17px), 50.9% calc(100% - 19px), 47.8% calc(100% - 17px),
    44.8% calc(100% - 16px), 41.7% calc(100% - 18px), 38.7% calc(100% - 17px),
    35.7% calc(100% - 19px), 32.6% calc(100% - 17px), 29.6% calc(100% - 18px),
    26.5% calc(100% - 16px), 23.5% calc(100% - 19px), 20.4% calc(100% - 17px),
    17.4% calc(100% - 18px), 14.3% calc(100% - 16px), 11.3% calc(100% - 18px),
    8.3% calc(100% - 17px), 5.2% calc(100% - 19px), 2.6% calc(100% - 17px),
    0 calc(100% - 18px)
  );
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 0%, rgba(173, 155, 137, 0.34), transparent 28rem),
    linear-gradient(135deg, #332721, #a08b78 45%, #ebe4da);
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  letter-spacing: 0;
}

a {
  color: inherit;
}

.invite {
  width: var(--invite-width);
  max-width: var(--invite-max-width);
  margin: 0 auto;
  background: var(--paper);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.section-dark {
  position: relative;
  min-height: 620px;
  color: var(--white);
  background: var(--black);
  isolation: isolate;
  z-index: 0;
}

.hero__image,
.photo-break__image {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -2;
}

.hero__image {
  background:
    radial-gradient(ellipse at 50% 58%, rgba(255, 255, 255, 0.34), transparent 0.5rem, transparent 9rem),
    radial-gradient(ellipse at 72% 44%, rgba(255, 255, 255, 0.15), transparent 13rem),
    radial-gradient(ellipse at 34% 38%, rgba(255, 255, 255, 0.11), transparent 12rem),
    linear-gradient(114deg, transparent 0 32%, rgba(255, 255, 255, 0.32) 33% 42%, transparent 43%),
    linear-gradient(71deg, transparent 0 48%, rgba(255, 255, 255, 0.18) 49% 55%, transparent 56%),
    linear-gradient(180deg, #1b1918 0%, #050505 74%, #0d0c0b 100%);
}

.hero__image::before,
.hero__image::after,
.photo-break__image::before,
.photo-break__image::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hero__image::before {
  left: -18%;
  top: -8%;
  width: 64%;
  height: 118%;
  background:
    repeating-linear-gradient(82deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 18px),
    linear-gradient(103deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.02) 58%, transparent);
  transform: rotate(-8deg);
  filter: blur(0.4px);
}

.hero__image::after {
  right: -16%;
  top: 8%;
  width: 58%;
  height: 104%;
  border-radius: 48% 0 0 42%;
  background:
    repeating-linear-gradient(96deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 24px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.08));
  opacity: 0.86;
}

.shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.48)),
    radial-gradient(circle at center 46%, transparent 0 36%, rgba(0, 0, 0, 0.34));
  z-index: -1;
}

.hero__content {
  min-height: 620px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 52px var(--section-x-padding) 88px;
  text-align: center;
}

.hero__content > * {
  max-width: var(--content-width);
}

.monogram {
  margin: 0 0 18px;
  color: #fff;
  font-family: "Great Vibes", cursive;
  font-size: clamp(7.5rem, 32vw, 10.5rem);
  line-height: 0.55;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
}

.names {
  margin: 16px 0 8px;
  font-size: 1.45rem;
  font-weight: 600;
  text-transform: uppercase;
}

.date {
  margin: 0;
  font-family: "Great Vibes", cursive;
  font-size: 2rem;
}

.paper {
  position: relative;
  z-index: 2;
  background: var(--paper-surface);
  padding: var(--paper-top-padding, 78px) var(--section-x-padding) var(--paper-bottom-padding, 82px);
  text-align: center;
}

.paper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--paper-grain);
  mix-blend-mode: multiply;
}

.paper > * {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

.paper--torn-top {
  margin-top: calc(-1 * var(--torn-depth));
  padding-top: calc(var(--paper-top-padding, 78px) + var(--torn-depth));
  clip-path: var(--clip-top);
}

.paper--torn-top.paper--torn-bottom {
  margin-bottom: calc(-1 * var(--torn-depth));
  padding-bottom: calc(var(--paper-bottom-padding, 82px) + var(--torn-depth));
  clip-path: var(--clip-top-bottom);
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2 {
  margin: 0 auto 24px;
  font-size: clamp(1.65rem, 5vw, 2.45rem);
  font-weight: 500;
  text-transform: uppercase;
}

h3 {
  margin: 0 0 10px;
  font-size: 1.72rem;
  font-weight: 500;
}

.intro p,
.wishes p,
.form-lead,
.timeline p,
.location p {
  margin: 0 auto;
  font-size: 1.16rem;
  line-height: 1.45;
}

.photo-break {
  min-height: var(--dark-section-height);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.photo-break__image {
  background:
    radial-gradient(ellipse at 50% 58%, rgba(255, 255, 255, 0.2), transparent 9rem),
    linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0 26%, rgba(0, 0, 0, 0.58) 43%, transparent 44%),
    linear-gradient(100deg, transparent 0 48%, rgba(255, 255, 255, 0.38) 49% 68%, transparent 69%),
    linear-gradient(180deg, #242322 0%, #0c0b0b 100%);
}

.photo-break__image::before {
  left: 7%;
  bottom: -18%;
  width: 44%;
  height: 72%;
  border-radius: 46% 46% 0 0;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.13), transparent 42%),
    #050505;
  transform: rotate(-6deg);
}

.photo-break__image::after {
  right: -13%;
  top: -5%;
  width: 56%;
  height: 112%;
  border-radius: 48% 0 0 38%;
  background:
    repeating-linear-gradient(88deg, rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 22px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.1));
  transform: rotate(3deg);
}

.big-date {
  position: relative;
  margin: 0;
  padding: 0 24px;
  font-family: "Great Vibes", cursive;
  font-size: clamp(9.5rem, 22vw, 15.5rem);
  line-height: 0.72;
  text-align: center;
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}

.schedule {
  --paper-top-padding: 84px;
}

.timeline {
  display: grid;
  gap: 52px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: left;
}

.timeline li {
  display: grid;
  grid-template-columns: 78px 1fr;
  align-items: start;
  gap: 18px;
}

.timeline time {
  padding-top: 9px;
  font-family: "Great Vibes", cursive;
  font-size: 2rem;
  color: #111;
}

.location {
  --section-top-padding: 72px;
  min-height: var(--dark-section-height);
  display: grid;
  align-items: center;
  padding: var(--section-top-padding) var(--section-x-padding) 56px;
  text-align: center;
}

.section-dark--torn-top {
  z-index: 2;
  margin-top: calc(-1 * var(--torn-depth));
  padding-top: calc(var(--section-top-padding) + var(--torn-depth));
  clip-path: var(--clip-top);
}

.location::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(255, 255, 255, 0.2), transparent 13rem),
    repeating-linear-gradient(90deg, transparent 0 29px, rgba(255, 255, 255, 0.2) 30px 31px, transparent 32px 56px),
    linear-gradient(168deg, transparent 0 42%, rgba(255, 255, 255, 0.22) 43% 44%, transparent 45%),
    linear-gradient(12deg, transparent 0 48%, rgba(255, 255, 255, 0.16) 49% 50%, transparent 51%),
    linear-gradient(180deg, #050505 0%, #1d1b1a 58%, #080808 100%);
  z-index: -2;
}

.location::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58%;
  background:
    radial-gradient(ellipse at 18% 100%, rgba(255, 255, 255, 0.22), transparent 5rem),
    radial-gradient(ellipse at 68% 100%, rgba(255, 255, 255, 0.16), transparent 8rem),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
  z-index: -1;
}

.location__inner {
  position: relative;
  display: grid;
  justify-items: center;
  max-width: var(--content-width);
  margin: 0 auto;
  color: var(--white);
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.script-title {
  font-family: "Great Vibes", cursive;
  font-size: clamp(4rem, 18vw, 6.6rem);
  line-height: 0.9;
}

.muted {
  color: rgba(255, 250, 244, 0.76);
}

.location .muted {
  font-family: "Great Vibes", cursive;
  font-size: clamp(1.75rem, 4.4vw, 2.6rem);
  line-height: 1;
  color: rgba(255, 250, 244, 0.9);
}

.location__title {
  max-width: min(100%, 720px);
  margin: 16px 0 16px;
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
}

.location__title span {
  display: block;
}

.location__title span:first-child {
  margin-bottom: 8px;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.location__title span:last-child {
  font-size: clamp(2.55rem, 5.1vw, 4.25rem);
  letter-spacing: 0;
}

.location__title + p {
  font-family: "Great Vibes", cursive;
  font-size: clamp(1.9rem, 4.8vw, 3rem);
  line-height: 1;
  color: rgba(255, 250, 244, 0.95);
}

.restaurant-note {
  --section-top-padding: 68px;
  min-height: var(--dark-section-height);
  display: grid;
  align-items: center;
  padding: var(--section-top-padding) var(--section-x-padding) 58px;
  text-align: center;
}

.restaurant-note::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 58%, rgba(255, 255, 255, 0.22), transparent 9rem),
    repeating-linear-gradient(88deg, transparent 0 29px, rgba(255, 255, 255, 0.2) 30px 31px, transparent 32px 56px),
    linear-gradient(112deg, transparent 0 44%, rgba(255, 255, 255, 0.18) 45% 46%, transparent 47%),
    linear-gradient(180deg, #090909 0%, #1c1a19 56%, #070707 100%);
  z-index: -2;
}

.restaurant-note::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 56%;
  background:
    radial-gradient(ellipse at 30% 100%, rgba(255, 255, 255, 0.18), transparent 7rem),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.68));
  z-index: -1;
}

.restaurant-note__inner {
  position: relative;
  display: grid;
  justify-items: center;
  max-width: min(100%, 620px);
  margin: 0 auto;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
}

.restaurant-note__eyebrow {
  margin-top: -26px;
  margin-bottom: 42px;
  color: rgba(255, 250, 244, 0.92);
  font-size: clamp(2rem, 4.4vw, 2.7rem);
  font-weight: 500;
  line-height: 1.05;
  text-transform: uppercase;
}

.restaurant-note h2 {
  max-width: 620px;
  margin: 0 0 24px;
  color: rgba(255, 250, 244, 0.9);
  font-size: clamp(1.35rem, 2.8vw, 1.8rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
}

.restaurant-note__subline {
  max-width: 620px;
  margin: 0 0 20px;
  color: rgba(255, 250, 244, 0.88);
  font-size: clamp(1.28rem, 2.45vw, 1.55rem);
  line-height: 1.44;
}

.restaurant-note__text {
  max-width: 620px;
  margin: 0;
  color: rgba(255, 250, 244, 0.88);
  font-size: clamp(1.28rem, 2.45vw, 1.55rem);
  line-height: 1.44;
}

.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  border-radius: 4px;
  padding: 0 20px;
  background: var(--ink);
  color: var(--white);
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
}

.button--light {
  margin-top: 30px;
  border-color: rgba(255, 250, 244, 0.82);
  background: rgba(255, 250, 244, 0.96);
  color: var(--black);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.button--outline {
  background: transparent;
  color: var(--ink);
}

.wishes {
  --paper-top-padding: 78px;
}

.wishes h3 {
  max-width: min(100%, 620px);
  margin: 0 auto 24px;
  font-size: clamp(1.45rem, 3vw, 1.9rem);
  font-weight: 700;
  line-height: 1.25;
}

.wishes p + p {
  margin-top: 24px;
}

.ampersand {
  font-family: "Great Vibes", cursive;
  font-size: 2rem;
  line-height: 1;
}

.questionnaire {
  --paper-top-padding: 72px;
  --paper-bottom-padding: 78px;
  text-align: left;
  overflow: hidden;
}

.questionnaire h2,
.questionnaire .form-lead {
  text-align: center;
}

.guest-form {
  display: grid;
  gap: 22px;
  margin-top: 34px;
}

.field span,
fieldset legend {
  display: block;
  margin-bottom: 12px;
  font-size: 1.08rem;
  font-weight: 600;
}

.field input[type="text"] {
  width: 100%;
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  padding: 8px 0;
  background: transparent;
  color: var(--ink);
  font: 1.2rem "Cormorant Garamond", Georgia, serif;
  outline: none;
}

fieldset {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

fieldset label {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: center;
  font-size: 1.08rem;
  line-height: 1.2;
}

.drink-options {
  display: grid;
  gap: 8px;
  margin: -2px 0 4px 34px;
  color: var(--muted);
}

.drink-options[hidden] {
  display: none;
}

fieldset > label:has(input[data-drink-toggle]:checked) + .drink-options {
  display: grid;
}

.drink-options label {
  font-size: 1rem;
}

fieldset .field--other-drink {
  display: block;
  margin-top: 4px;
}

.field--other-drink[hidden] {
  display: none;
}

input[type="radio"],
input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--ink);
}

.button--submit {
  width: min(100%, 320px);
  justify-self: center;
  margin-top: 4px;
  border-radius: 999px;
  cursor: pointer;
}

.form-status {
  min-height: 1.2em;
  margin: -8px 0 0;
  color: var(--muted);
  font-size: 0.98rem;
  text-align: center;
}

@media (min-width: 700px) {
  body {
    padding: 28px 0;
  }

  .invite {
    border-radius: 26px;
  }
}

@media (max-width: 699px) {
  :root {
    --invite-width: 100%;
    --dark-section-height: clamp(620px, 74vh, 700px);
  }

  body {
    background: var(--paper);
  }

  .invite {
    box-shadow: none;
  }

  .big-date {
    font-size: clamp(13.5rem, 29vh, 17rem);
    line-height: 0.68;
  }

  .restaurant-note__subline,
  .restaurant-note__text {
    max-width: 34rem;
  }

  .location__title span:first-child {
    font-size: clamp(1.9rem, 8vw, 2.8rem);
  }

  .location__title span:last-child {
    font-size: clamp(2.35rem, 10vw, 3.55rem);
  }
}

@media (max-width: 360px) {
  .paper,
  .location,
  .restaurant-note {
    padding-left: 18px;
    padding-right: 18px;
  }

  .questionnaire {
    padding-left: 18px;
    padding-right: 18px;
  }

  .timeline li {
    grid-template-columns: 64px 1fr;
    gap: 12px;
  }
}