:root {
  --ink:       #0B1F3A;
  --gold:      #C9A84C;
  --bg:        #FFFFFF;
  --dark:      #060C12;
  --muted:     #8896A4;
  --fs-xl:     clamp(80px,  13vw, 180px);
  --fs-lg:     clamp(48px,  8vw,  96px);
  --fs-md:     clamp(28px,  5vw,  56px);
  --fs-sm:     clamp(18px,  3vw,  28px);
  --fs-body:   16px;
  --fs-caption:13px;
  --fs-label:  11px;
  --serif:     Georgia, "Times New Roman", serif;
  --sans:      system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
}

.about-stage {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}

.about-stage h1,
.about-stage h2,
.about-stage h3,
.about-stage h4,
.about-stage p,
.about-stage ul,
.about-stage li,
.about-stage blockquote,
.about-stage hr,
.about-stage em {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
  list-style: none;
  quotes: none;
  background: transparent;
}

.about-stage a {
  color: inherit;
  text-decoration: none;
}

.about-stage strong { font-weight: 500; }

.about-stage .serif { font-family: var(--serif); }
.about-stage .sans  { font-family: var(--sans); }

.about-stage .label {
  font-size: var(--fs-label);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--muted);
}

.about-stage .caption {
  font-size: var(--fs-caption);
  line-height: 2;
}

.about-stage .rule-gold {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--gold);
  border: 0;
}

.about-stage .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.about-stage .reveal.in {
  opacity: 1;
  transform: none;
}
.about-stage .reveal:nth-child(2) { transition-delay: 120ms; }
.about-stage .reveal:nth-child(3) { transition-delay: 240ms; }
.about-stage .reveal:nth-child(4) { transition-delay: 360ms; }

.about-stage .reveal-x {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.about-stage .reveal-x.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .about-stage .reveal,
  .about-stage .reveal-x {
    opacity: 1;
    transform: none;
    transition: none;
  }
}