/* ============================================================
   BASE — reset, typography, and shared utilities (buttons,
   section containers, scroll-reveal states). Every section-
   specific CSS file builds on top of this.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}

img, video { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.rt-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.rt-section {
  padding: 90px 0;
}

.rt-section-dark {
  background: linear-gradient(160deg, var(--ink-deep) 0%, var(--ink) 55%, #240f3e 100%);
  color: var(--paper);
}

.rt-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 12px;
}

.rt-section-dark .rt-eyebrow { color: var(--gold); }

.rt-section-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 48px;
}

.rt-section-title {
  font-size: clamp(28px, 3.4vw, 38px);
  margin-bottom: 14px;
}

.rt-section-sub {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(27, 16, 48, 0.65);
}

.rt-section-dark .rt-section-sub { color: rgba(251, 249, 255, 0.7); }

/* ── Buttons ─────────────────────────────────────────────── */
.rt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.rt-btn:hover { opacity: 0.88; }
.rt-btn:active { transform: scale(0.98); }

.rt-btn-solid {
  background: var(--gold);
  color: #241505;
}

.rt-btn-outline {
  background: transparent;
  border: 1.5px solid currentColor;
  color: var(--paper);
}

.rt-btn-ghost {
  background: var(--lavender);
  color: var(--violet-deep);
}

/* ── Scroll reveal (used by js/scroll-reveal.js) ──────────── */
.rt-reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.rt-reveal.rt-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

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