*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:#fff7ef;
  font-family:Georgia,"Times New Roman",serif;
  min-height:100vh;
  background:
    linear-gradient(180deg, rgba(24,15,30,.30) 0%, rgba(24,15,30,.44) 100%),
    radial-gradient(ellipse 72% 58% at 50% 50%, rgba(14,9,20,.46), rgba(14,9,20,0) 68%),
    url('/bg.jpg') center center / cover no-repeat fixed,
    #e9a86a;
}

.stage{
  position:relative;min-height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:6vh 8vw;gap:1.05rem;
  text-shadow:0 2px 24px rgba(20,10,24,.7), 0 1px 3px rgba(20,10,24,.5);
  animation:rise 1.7s ease-out both;
}
.eyebrow{
  margin:0;font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:.8rem;letter-spacing:.44em;text-transform:uppercase;
  opacity:.94;
}
.quote{
  margin:.2rem 0;font-style:italic;font-weight:400;
  font-size:clamp(1.55rem,4.6vw,3rem);line-height:1.34;
  max-width:20ch;
}
.attr{
  margin:0;font-size:1.02rem;letter-spacing:.05em;opacity:.96;
}
.note{
  margin-top:1.5rem;font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:.9rem;letter-spacing:.03em;opacity:.86;
}

@keyframes rise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.stage{animation:none}}