/* ============================================================
   BASE — Reset · Typography · Layout grid
   ============================================================ */

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--parchment);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font-family: inherit; color: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--gold); color: var(--navy); }

/* ── Layout Wrappers ────────────────────────────────────── */
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}

.uv-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.uv-page main { flex: 1; }

/* ── Typography Scale ────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--gold-deep);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--maroon);
}

.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--maroon);
}

.h3 {
  font-family: var(--font-grotesk);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.005em;
  color: var(--navy);
}

.h4 {
  font-family: var(--font-grotesk);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--maroon);
}

.body-lg { font-size: 17.5px; line-height: 1.7; color: var(--navy); }
.body    { font-size: 15px;   line-height: 1.65; color: var(--ink); }
.muted   { color: var(--muted); font-size: 13px; }

/* ── Gold Divider ────────────────────────────────────────── */
.gold-rule {
  width: 60px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
}

/* ── Section Spacing ─────────────────────────────────────── */
.section { padding: 80px 0; }

.section-deep  { background: var(--parchment-deep); }
.section-navy  { background: var(--navy); color: #fff; }
.section-navy .h2,
.section-navy .display { color: #fff; }
.section-navy .eyebrow { color: var(--gold); }

/* ── Flex/Grid Utilities ─────────────────────────────────── */
.flex    { display: flex; }
.col     { flex-direction: column; }
.center  { display: flex; align-items: center; justify-content: center; }
.between { display: flex; align-items: center; justify-content: space-between; }
.grow    { flex: 1; }

.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }

/* ── Animations ─────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.fade-up   { animation: fadeUp 700ms cubic-bezier(.2,.7,.2,1) both; }
.fade-up-2 { animation-delay: 120ms; }
.fade-up-3 { animation-delay: 240ms; }
.fade-up-4 { animation-delay: 360ms; }

@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(192,57,43,0); }
}
.live-dot {
  display: inline-block;
  width: 9px; height: 9px;
  background: var(--danger);
  border-radius: 50%;
  margin-right: 6px;
  animation: pulseDot 1.6s ease-out infinite;
  vertical-align: middle;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skel {
  background: linear-gradient(90deg, #F6F1E6 0%, #EFE7D5 50%, #F6F1E6 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

@keyframes bounceIn {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.bounce-in { animation: bounceIn 600ms cubic-bezier(.34,1.56,.64,1) both; }

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196,154,58,0.4); }
  50%       { box-shadow: 0 0 0 14px rgba(196,154,58,0); }
}
.glow { animation: glowPulse 2.4s ease-out infinite; }

/* ── Sticky Aside ────────────────────────────────────────── */
.aside-sticky { position: sticky; top: calc(var(--nav-h) + 24px); }