:root {
  --paper: #ECE6D6;
  --ink: #2B2924;
  --ink-soft: #6B6656;
  --sprout: #5C6B4A;
}

* { box-sizing: border-box; }

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

body {
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Serif SC", serif;
}

.stage {
  text-align: center;
  padding: 0 24px;
}

.logo {
  font-family: "Cormorant Garamond", "Noto Serif SC", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(112px, 24vw, 192px);
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--ink);
  opacity: 0;
  transform: translateY(10px);
  animation: rise 1.1s ease-out forwards;
}

.stem {
  width: 1px;
  height: 56px;
  margin: 30px auto;
  background: var(--sprout);
  transform: scaleY(0);
  transform-origin: top;
  animation: grow 0.9s ease-out 0.7s forwards;
}

.tagline {
  font-size: 28px;
  letter-spacing: 0.4em;
  color: var(--ink-soft);
  margin: 0;
  opacity: 0;
  animation: fade-in 1s ease-out 1.3s forwards;
}

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

@keyframes grow {
  to { transform: scaleY(1); }
}

@keyframes fade-in {
  to { opacity: 1; }
}

.entry-links {
  margin-top: 56px;
  opacity: 0;
  animation: fade-in 1s ease-out 1.9s forwards;
}

.entry-links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 24px;
  letter-spacing: 0.1em;
  margin: 0 18px;
}

.entry-links a:hover {
  color: var(--sprout);
}

@media (prefers-reduced-motion: reduce) {
  .logo, .stem, .tagline, .entry-links {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}