:root {
  --ivory: #fdfdf8;
  --paper: #ffffff;
  --sage: #60745d;
  --sage-dark: #4c6049;
  --sage-light: #a9b8a1;
  --ink: #33352f;
  --muted: #77786f;
  --gold: #c7a66a;
  --gold-soft: #e8dcc2;
  --shadow: 0 24px 70px rgba(54, 69, 49, 0.14);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 10%, rgba(194, 211, 186, 0.28), transparent 35%),
    radial-gradient(circle at 90% 85%, rgba(231, 218, 185, 0.30), transparent 34%),
    #f5f3ed;
  font-family: "Montserrat", Arial, sans-serif;
}

.page-shell {
  width: 100%;
  min-height: 100vh;
  padding: 24px 14px;
  display: grid;
  place-items: center;
}

.invitation-card {
  position: relative;
  isolation: isolate;
  width: min(100%, 520px);
  min-height: 900px;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.98), rgba(253,253,248,0.96)),
    var(--paper);
  border: 1px solid rgba(96, 116, 93, 0.12);
  border-radius: 34px;
  box-shadow: var(--shadow);
}

.invitation-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border: 1px solid rgba(199, 166, 106, 0.20);
  border-radius: 26px;
  z-index: 0;
}

.content {
  position: relative;
  z-index: 2;
  min-height: 900px;
  padding: 152px 34px 120px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.botanical {
  position: absolute;
  width: 210px;
  height: 210px;
  z-index: 1;
  opacity: 0.95;
  pointer-events: none;
  animation: floatLeaves 7s ease-in-out infinite;
}

.botanical-top-left {
  top: -20px;
  left: -28px;
  transform-origin: top left;
}

.botanical-top-right {
  top: -20px;
  right: -28px;
  transform-origin: top right;
  animation-delay: -2s;
}

.botanical-bottom-left {
  bottom: -22px;
  left: -28px;
  animation-delay: -1s;
}

.botanical-bottom-right {
  bottom: -22px;
  right: -28px;
  animation-delay: -3s;
}

.stem {
  stroke: rgba(101, 124, 95, 0.62);
  stroke-width: 2.1;
}

.leaf {
  stroke: rgba(86, 112, 82, 0.70);
  stroke-width: 1.8;
}

.leaf-1 { fill: rgba(155, 177, 146, 0.34); }
.leaf-2 { fill: rgba(175, 194, 165, 0.28); }
.leaf-3 { fill: rgba(126, 153, 119, 0.24); }
.leaf-4 { fill: rgba(181, 198, 171, 0.30); }
.leaf-5 { fill: rgba(143, 168, 135, 0.28); }
.leaf-6 { fill: rgba(191, 205, 184, 0.31); }

.gold-line {
  stroke: rgba(199, 166, 106, 0.78);
  stroke-width: 1.8;
}

.gold-dot {
  fill: rgba(199, 166, 106, 0.80);
  stroke: none;
}

.eyebrow {
  margin: 0 0 28px;
  max-width: 300px;
  color: var(--muted);
  font-size: 0.70rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.8;
}

.names {
  color: var(--sage);
}

.names h1 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(3.7rem, 15vw, 5.35rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 0.88;
}

.names span {
  display: block;
  margin: 8px 0 5px;
  color: var(--sage-dark);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.65rem;
  font-style: italic;
  font-weight: 500;
}

.invitation-copy {
  margin: 35px 0 23px;
  color: #62635d;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.065em;
  line-height: 1.52;
}

.date-block {
  margin-top: 4px;
}

.day-number {
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 3.1rem;
  font-weight: 600;
  line-height: 0.8;
}

.day-number span {
  margin-left: 3px;
  vertical-align: top;
  color: var(--sage);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
}

.month {
  margin-top: 7px;
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.70rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.year-line {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.13em;
}

.time {
  margin: 20px 0 22px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.10rem;
  font-weight: 500;
}

.venue {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.venue strong {
  color: var(--sage-dark);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.venue span {
  color: var(--muted);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.98rem;
  font-style: italic;
}

.divider {
  width: min(210px, 70%);
  margin: 25px 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gold);
}

.divider span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}

.divider i {
  font-size: 0.72rem;
  font-style: normal;
}

.countdown {
  width: 100%;
}

.countdown-title {
  margin: 0 0 13px;
  color: var(--sage-dark);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.11em;
}

.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.countdown-item {
  min-width: 0;
  padding: 13px 5px 11px;
  border: 1px solid rgba(96, 116, 93, 0.18);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 8px 24px rgba(79, 96, 74, 0.06);
  backdrop-filter: blur(6px);
}

.countdown-item strong {
  display: block;
  color: var(--sage-dark);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.42rem, 6vw, 1.85rem);
  font-weight: 600;
  line-height: 1;
}

.countdown-item span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.49rem;
  font-weight: 500;
  letter-spacing: 0.07em;
}

.countdown-message {
  min-height: 1.1em;
  margin: 11px 0 0;
  color: var(--sage);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
  font-style: italic;
}

.map-button {
  margin-top: 20px;
  padding: 12px 24px;
  color: white;
  background: var(--sage);
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  transition: transform 180ms ease, background 180ms ease;
}

.map-button:hover {
  transform: translateY(-2px);
  background: var(--sage-dark);
}

.closing {
  margin: 24px 0 0;
  color: var(--sage);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.18rem;
  font-style: italic;
}

.reveal {
  opacity: 0;
  transform: translateY(12px);
  animation: revealUp 700ms ease forwards;
}

.reveal-delay-1 { animation-delay: 100ms; }
.reveal-delay-2 { animation-delay: 180ms; }
.reveal-delay-3 { animation-delay: 260ms; }
.reveal-delay-4 { animation-delay: 340ms; }
.reveal-delay-5 { animation-delay: 420ms; }
.reveal-delay-6 { animation-delay: 520ms; }

@keyframes revealUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatLeaves {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 5px; }
}

@media (max-width: 420px) {
  .page-shell {
    padding: 0;
  }

  .invitation-card {
    min-height: 100vh;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  .invitation-card::before {
    inset: 8px;
    border-radius: 20px;
  }

  .content {
    min-height: 100vh;
    padding: 138px 24px 112px;
  }

  .botanical {
    width: 175px;
    height: 175px;
  }

  .eyebrow {
    font-size: 0.61rem;
  }

  .invitation-copy {
    font-size: 0.89rem;
  }

  .countdown-grid {
    gap: 6px;
  }

  .countdown-item {
    padding-inline: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}