/* =====================================================================
   Cover as an invitation card: an ivory card with a double gold border
   and small gold corners, set on emerald, names and countdown on the
   left, the photo in a gold-lined frame on the right. No flowers.
   Loaded last, so these rules win.
   ===================================================================== */

/* No garden artwork anywhere. */
body::before,
body::after,
.nav::before,
.nav::after {
  display: none !important;
}

/* ---------- menu on the emerald ---------- */
.nav {
  min-height: 72px;
  padding: 14px clamp(24px, 5vw, 70px);
  background: #0f4a38;
  box-shadow: none;
}
.nav-links {
  max-width: 1160px;
  margin: 0 auto;
}
.nav-links a {
  color: rgb(247 245 236 / 0.86);
  border-bottom-color: transparent;
}
.nav-links a:hover {
  color: var(--ivory);
  border-color: var(--gold);
}
.nav-monogram {
  width: 54px;
  height: 54px;
  color: var(--ivory) !important;
  border-color: rgb(201 164 92 / 0.7) !important;
  box-shadow: inset 0 0 0 3px #0f4a38, inset 0 0 0 4px rgb(201 164 92 / 0.35);
}
.nav-rsvp {
  color: var(--gold) !important;
  border-color: var(--gold) !important;
}
.nav-rsvp:hover {
  background: var(--gold);
  color: var(--forest) !important;
}
.nav.pinned {
  background: var(--forest);
  box-shadow: 0 1px 0 rgb(201 164 92 / 0.35), 0 10px 24px rgb(0 0 0 / 0.18);
}
.nav.pinned .nav-monogram {
  box-shadow: inset 0 0 0 3px var(--forest), inset 0 0 0 4px rgb(201 164 92 / 0.35);
}
.nav-toggle {
  color: var(--ivory);
  border-color: rgb(201 164 92 / 0.5);
}
.nav-mark {
  color: var(--ivory);
}
@media (max-width: 760px) {
  .nav-links a,
  .nav-links a:hover,
  .nav-links .nav-rsvp,
  .nav-links .nav-rsvp:hover {
    color: var(--forest) !important;
  }
}

/* ---------- the emerald stage and the card ---------- */
.cover {
  padding: clamp(10px, 2vw, 22px) clamp(16px, 4vw, 60px) clamp(40px, 6vw, 70px);
  background:
    radial-gradient(70% 70% at 50% 0%, rgb(31 107 80 / 0.55), transparent 70%),
    linear-gradient(180deg, #0f4a38 0%, var(--forest) 100%);
}
.invite {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(28px, 5vw, 70px);
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(34px, 4.5vw, 56px) clamp(30px, 5.5vw, 72px);
  background: var(--paper);
  box-shadow: 0 30px 70px rgb(0 0 0 / 0.28);
}
/* Double gold border, like a printed invitation. */
.invite::before,
.invite::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.invite::before {
  inset: 12px;
  border: 1px solid rgb(201 164 92 / 0.75);
}
.invite::after {
  inset: 17px;
  border: 1px solid rgb(201 164 92 / 0.35);
}
/* Small gold corner brackets inside the border. */
.corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 0 solid var(--gold);
  pointer-events: none;
}
.corner.tl {
  top: 24px;
  left: 24px;
  border-top-width: 2px;
  border-left-width: 2px;
}
.corner.tr {
  top: 24px;
  right: 24px;
  border-top-width: 2px;
  border-right-width: 2px;
}
.corner.bl {
  bottom: 24px;
  left: 24px;
  border-bottom-width: 2px;
  border-left-width: 2px;
}
.corner.br {
  bottom: 24px;
  right: 24px;
  border-bottom-width: 2px;
  border-right-width: 2px;
}

/* ---------- left: names, date, countdown ---------- */
.invite-text {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}
.invite .kicker {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.invite .names {
  display: block;
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.8rem, 5.2vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--forest);
}
.invite .names span {
  display: block;
}
.invite .names em {
  font-style: italic;
  color: var(--gold);
  letter-spacing: 0;
  margin-right: 0.08em;
}
.invite .rule {
  width: 60px;
  height: 1px;
  background: var(--gold);
}
.invite-date {
  font-size: 0.74rem;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #314939;
}
.invite .countdown {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 0;
  margin: 2px 0 4px;
}
.invite .countdown div {
  display: grid;
  justify-items: center;
  min-width: 62px;
  padding: 0 12px;
  border-left: 1px solid rgb(201 164 92 / 0.55);
}
.invite .countdown div:first-child {
  border-left: 0;
}
.invite .countdown b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--forest);
}
.invite .countdown small {
  font-size: 0.54rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.invite-cta {
  display: inline-block;
  padding: 12px 26px;
  border: 1px solid var(--gold);
  color: var(--gold-deep);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.invite-cta:hover {
  background: var(--gold);
  color: #fff;
}

/* ---------- right: the photo in a gold-lined frame ---------- */
.invite-photo {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: min(100%, 360px);
  margin: 0;
  aspect-ratio: 4 / 5;
  outline: 1px solid rgb(201 164 92 / 0.85);
  outline-offset: 8px;
  box-shadow: 0 18px 40px rgb(11 61 46 / 0.18);
}
.invite-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

/* ---------- phones: stack, names first ---------- */
@media (max-width: 760px) {
  .nav {
    min-height: 64px;
    padding: 10px 22px;
  }
  .invite {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 58px 32px 50px;
  }
  .corner {
    width: 18px;
    height: 18px;
  }
  .corner.tl,
  .corner.tr {
    top: 22px;
  }
  .corner.bl,
  .corner.br {
    bottom: 22px;
  }
  .corner.tl,
  .corner.bl {
    left: 22px;
  }
  .corner.tr,
  .corner.br {
    right: 22px;
  }
  .invite .names {
    font-size: clamp(2.6rem, 12vw, 3.4rem);
  }
  .invite-date {
    font-size: 0.66rem;
    letter-spacing: 0.2em;
  }
  .invite .countdown div {
    min-width: 0;
    padding: 0 10px;
  }
  .invite .countdown b {
    font-size: 1.5rem;
  }
  .invite-photo {
    width: min(calc(100% - 24px), 300px);
  }
}

/* ---------- laptops: the whole cover (menu + card) always fits the window ---------- */
@media (min-width: 761px) {
  .nav {
    min-height: 64px;
    padding-block: 8px;
  }
  .nav-monogram {
    width: 48px;
    height: 48px;
  }
  .cover {
    padding-top: clamp(8px, 1.6vh, 18px);
    padding-bottom: clamp(18px, 4vh, 48px);
  }
  .invite {
    max-width: min(1080px, 150vh);
    padding: clamp(26px, 5vh, 52px) clamp(30px, 5.5vw, 72px);
    gap: clamp(24px, 4vw, 60px);
  }
  .invite-text {
    gap: clamp(8px, 1.7vh, 16px);
  }
  .invite .names {
    font-size: clamp(2.3rem, min(5vw, 8.4vh), 4.4rem);
  }
  .invite-date {
    font-size: clamp(0.64rem, 1.15vh, 0.74rem);
    line-height: 1.8;
  }
  .invite .countdown b {
    font-size: clamp(1.35rem, 3.6vh, 1.9rem);
  }
  .invite-cta {
    padding: clamp(9px, 1.5vh, 12px) 24px;
  }
  /* Photo height follows the window; width follows from the 4:5 shape. */
  .invite-photo {
    width: auto;
    height: clamp(250px, calc(100vh - 64px - 150px), 470px);
    aspect-ratio: 4 / 5;
  }
}
@media (min-width: 761px) {
  /* Keep the photo and its gold line clear of the card's border and corners. */
  .invite {
    padding-block: clamp(40px, 6.4vh, 60px);
  }
  .invite-photo {
    height: clamp(240px, calc(100vh - 64px - 215px), 450px);
    margin-right: 14px;
  }
}

/* =====================================================================
   Decoration: gold lattice on the emerald, ornate corners, a jewelled
   divider and a faint ampersand watermark. Engraved, not floral.
   ===================================================================== */

/* Faint gold lattice over the emerald, like damask wallpaper. */
.cover,
.nav {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23c9a45c' stroke-opacity='0.13' stroke-width='0.8'%3E%3Cpath d='M22 0 L44 22 L22 44 L0 22 Z'/%3E%3C/g%3E%3Cpath d='M22 25.2 C18 22.6 18.4 19 20.8 19.2 C21.5 19.3 22 20 22 20 C22 20 22.5 19.3 23.2 19.2 C25.6 19 26 22.6 22 25.2Z' fill='%23c9a45c' fill-opacity='0.16'/%3E%3Cpath d='M0 1.92 C-2.4 0.36 -2.16 -1.8 -0.72 -1.68 C-0.3 -1.62 0 -1.2 0 -1.2 C0 -1.2 0.3 -1.62 0.72 -1.68 C2.16 -1.8 2.4 0.36 0 1.92Z' fill='%23c9a45c' fill-opacity='0.12'/%3E%3Cpath d='M44 1.92 C41.6 0.36 41.84 -1.8 43.28 -1.68 C43.7 -1.62 44 -1.2 44 -1.2 C44 -1.2 44.3 -1.62 44.72 -1.68 C46.16 -1.8 46.4 0.36 44 1.92Z' fill='%23c9a45c' fill-opacity='0.12'/%3E%3Cpath d='M0 45.92 C-2.4 44.36 -2.16 42.2 -0.72 42.32 C-0.3 42.38 0 42.8 0 42.8 C0 42.8 0.3 42.38 0.72 42.32 C2.16 42.2 2.4 44.36 0 45.92Z' fill='%23c9a45c' fill-opacity='0.12'/%3E%3Cpath d='M44 45.92 C41.6 44.36 41.84 42.2 43.28 42.32 C43.7 42.38 44 42.8 44 42.8 C44 42.8 44.3 42.38 44.72 42.32 C46.16 42.2 46.4 44.36 44 45.92Z' fill='%23c9a45c' fill-opacity='0.12'/%3E%3C/svg%3E"),
    radial-gradient(70% 70% at 50% 0%, rgb(31 107 80 / 0.55), transparent 70%),
    linear-gradient(180deg, #0f4a38 0%, var(--forest) 100%);
  background-size: 44px 44px, auto, auto;
}
.nav.pinned {
  background-image: none;
}
/* The lattice fades out towards the card so it never fights the text. */
.cover {
  position: relative;
  isolation: isolate;
}
.cover::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 75% at 50% 50%, rgb(11 61 46 / 0.85), transparent 75%);
  pointer-events: none;
}

/* Ornate gold corners: a double rounded bracket ending in a small curl and a dot. */
.corner {
  width: 58px;
  height: 58px;
  border: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58' viewBox='0 0 58 58'%3E%3Cg fill='none' stroke='%23c9a45c' stroke-linecap='round'%3E%3Cpath d='M2 56 V16 Q2 2 16 2 H56' stroke-width='1.6'/%3E%3Cpath d='M8 56 V20 Q8 8 20 8 H56' stroke-width='0.8' stroke-opacity='0.6'/%3E%3Cpath d='M16 16 C24 16 28 22 26 28 C24 33 18 31 19 26' stroke-width='1.1'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='2.4' fill='%23c9a45c'/%3E%3C/svg%3E") no-repeat center / contain;
}
.corner.tl { top: 22px; left: 22px; }
.corner.tr { top: 22px; right: 22px; transform: scaleX(-1); }
.corner.bl { bottom: 22px; left: 22px; transform: scaleY(-1); }
.corner.br { bottom: 22px; right: 22px; transform: scale(-1, -1); }

/* Small gold diamonds in the middle of the top and bottom border. */
.edge-gem {
  position: absolute;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 0 3px var(--paper);
  pointer-events: none;
}
.edge-gem.top { top: 10px; }
.edge-gem.bottom { bottom: 10px; }

/* Jewelled divider under the names: line, diamond, line. */
.ornament {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ornament::before,
.ornament::after {
  content: '';
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.ornament::after {
  background: linear-gradient(90deg, var(--gold), transparent);
}
.ornament i {
  width: 7px;
  height: 7px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px rgb(201 164 92 / 0.35);
}

/* A large, very faint gold ampersand behind the names. */
.watermark {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 27%;
  transform: translate(-50%, -54%);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(14rem, 32vh, 22rem);
  line-height: 1;
  color: var(--gold);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
}
/* A soft warm glow on the card instead of flat ivory. */
.invite {
  background:
    radial-gradient(80% 90% at 28% 45%, #fffdf6 0%, transparent 70%),
    linear-gradient(135deg, #fbf8ef 0%, #f6f1e3 100%);
}
@media (max-width: 760px) {
  .corner {
    width: 40px;
    height: 40px;
  }
  .corner.tl, .corner.tr { top: 20px; }
  .corner.bl, .corner.br { bottom: 20px; }
  .corner.tl, .corner.bl { left: 20px; }
  .corner.tr, .corner.br { right: 20px; }
  .watermark {
    left: 50%;
    top: 28%;
    font-size: 15rem;
  }
}

/* =====================================================================
   Opening animation (about 1.8 s): the card rises, the gold border draws
   out from the centre, the photo settles, the corners and gems appear,
   then the text arrives line by line.
   ===================================================================== */
@keyframes inv-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
@keyframes inv-draw {
  from { clip-path: inset(0 50% 0 50%); opacity: 0.2; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes inv-pop {
  from { opacity: 0; scale: 0.5; }
  to { opacity: 1; scale: 1; }
}
@keyframes inv-fade-up {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes inv-photo {
  from { opacity: 0; scale: 1.06; }
  to { opacity: 1; scale: 1; }
}
@keyframes inv-glow {
  from { opacity: 0; }
  to { opacity: 0.07; }
}

.invite {
  animation: inv-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.invite::before,
.invite::after {
  animation: inv-draw 0.9s cubic-bezier(0.6, 0, 0.2, 1) 0.35s both;
}
.invite::after {
  animation-delay: 0.5s;
}
.invite-photo {
  animation: inv-photo 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both;
}
.corner,
.edge-gem {
  animation: inv-pop 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}
.corner.tl { animation-delay: 0.85s; }
.corner.tr { animation-delay: 0.95s; }
.corner.br { animation-delay: 1.05s; }
.corner.bl { animation-delay: 1.15s; }
.edge-gem.top { animation-delay: 1.1s; }
.edge-gem.bottom { animation-delay: 1.2s; }
.watermark {
  animation: inv-glow 1.6s ease 0.6s both;
}
.invite-text > * {
  animation: inv-fade-up 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.invite-text > :nth-child(1) { animation-delay: 0.55s; }
.invite-text > :nth-child(2) { animation-delay: 0.7s; }
.invite-text > :nth-child(3) { animation-delay: 0.9s; }
.invite-text > :nth-child(4) { animation-delay: 1s; }
.invite-text > :nth-child(5) { animation-delay: 1.1s; }
.invite-text > :nth-child(6) { animation-delay: 1.2s; }

/* No motion for people who ask for less, and none in the screenshot mode. */
@media (prefers-reduced-motion: reduce) {
  .invite, .invite::before, .invite::after, .invite-photo, .corner, .edge-gem, .watermark, .invite-text > * {
    animation: none !important;
  }
  .watermark { opacity: 0.07; }
}
.static .invite, .static .invite::before, .static .invite::after, .static .invite-photo,
.static .corner, .static .edge-gem, .static .watermark, .static .invite-text > * {
  animation: none !important;
}
.static .watermark { opacity: 0.07; }

/* Pinned menu: a clean gold hairline instead of a dark shadow. */
.nav.pinned {
  box-shadow: 0 1px 0 rgb(201 164 92 / 0.45);
}
/* RSVP: no big empty emerald band under the form. */
.rsvp {
  padding-bottom: clamp(36px, 4.5vw, 52px);
}
.rsvp-form {
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.18);
}
/* Contacts: snug under the RSVP, cards the same height, note without an extra rule. */
.contacts {
  padding: clamp(36px, 4.5vw, 52px) 0;
}
.contact-cards {
  align-items: stretch;
}
.contact-note {
  border-top: 0;
  padding-top: 4px;
}

/* "In their own words" quotes: a clear, open italic (Lora) instead of the calligraphic Garamond italic. */
.word blockquote,
.word blockquote p {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.85;
  letter-spacing: 0.005em;
  color: #24453a;
}
.word {
  padding: clamp(26px, 4vw, 40px) clamp(26px, 4vw, 44px);
}
.word-label {
  margin-bottom: 12px;
}

/* RSVP: hidden bot trap, and the thank-you card shown after sending. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.rsvp-done {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  padding: 34px 28px;
  background: var(--paper);
  border: 1px solid rgb(201 164 92 / 0.45);
  border-radius: 6px;
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.18);
}
.rsvp-done .lead {
  color: var(--forest);
}
.done-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--emerald);
  font-size: 1.5rem;
}
.done-note {
  color: var(--muted);
}