:root {
  --bg: #faf6f4;
  --ink: #2b2320;
  --muted: #8a7a74;
  --accent: #b76e79; /* rose */
  --divider: #e6d7d3;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
  background-image: radial-gradient(circle at 50% 40%, rgba(183, 110, 121, 0.10), rgba(183, 110, 121, 0) 60%);
  color: var(--ink);
  font-family: "Georgia", "Iowan Old Style", "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.wrap {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 32px 24px;
  max-width: 560px;
}

/* Entrance animation */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--d, 0s);
}

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

/* Floating petals */
.petals {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.petal {
  position: absolute;
  top: -5vh;
  background: var(--accent);
  opacity: 0.28;
  border-radius: 100% 0 100% 0;
  animation-name: fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes fall {
  0% {
    transform: translate(0, -5vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.28;
  }
  90% {
    opacity: 0.28;
  }
  100% {
    transform: translate(var(--drift), 110vh) rotate(var(--spin));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .petal {
    display: none;
  }
}

.eyebrow {
  margin: 0 0 8px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

h1 {
  margin: 0;
  font-size: clamp(48px, 10vw, 84px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.tagline {
  margin: 20px auto 0;
  max-width: 420px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
}

.divider {
  width: 48px;
  height: 1px;
  background: var(--divider);
  margin: 32px auto;
}

.footnote {
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
}