@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,600&family=Source+Sans+3:wght@300;400;500;600&family=Noto+Serif+SC:wght@400;600;700&display=swap');
:root {
  --color-bg: #080A0F;
  --color-surface: #0F1219;
  --color-surface-2: #161B24;
  --color-border: #1E2535;
  --color-gold: #B8923A;
  --color-gold-light: #D4AC5A;
  --color-gold-muted: #6B5228;
  --color-cream: #EDE8DF;
  --color-cream-muted: #9A9288;
  --color-text: #EDE8DF;
  --color-text-muted: #7A7268;

  --font-display: 'Playfair Display', 'Noto Serif SC', Georgia, serif;
  --font-body: 'Source Sans 3', 'Noto Serif SC', system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background-color: #080A0F;
}

body {
  font-family: var(--font-body);
  color: var(--color-cream);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #080A0F; }
::-webkit-scrollbar-thumb { background: #2A2010; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #B8923A; }

/* Gold rule */
.gold-rule {
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, #B8923A, transparent);
  display: block;
}

/* Marquee animation */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-inner {
  animation: marquee 32s linear infinite;
}

.marquee-inner:hover {
  animation-play-state: paused;
}

/* Fade in sections */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-up {
  animation: fadeUp 0.7s ease both;
}

/* Number label style */
.section-number {
  font-family: 'Source Sans 3', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--color-gold-muted);
}

/* Nav link hover */
.nav-link {
  position: relative;
  transition: color 0.2s;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: #B8923A;
  transition: width 0.3s ease;
}

.nav-link:hover::after { width: 100%; }
.nav-link:hover { color: #D4AC5A; }