:root {
  /* ==========================================================================
   * PALETTE: ROYAL OBSIDIAN, OXBLOOD CRIMSON, IMPERIAL GOLD & ARCHIVAL VELLUM
   * ========================================================================== */
  --bg-obsidian: #0c0907;
  --bg-obsidian-elevated: #17120e;
  --bg-obsidian-card: #211914;

  --parchment-light: #f7f1e5;
  --parchment-mid: #ede1ca;
  --parchment-deep: #dfd0b2;
  --parchment-gradient: linear-gradient(155deg, #faf5eb 0%, #efe4cf 55%, #e3d3b4 100%);

  --ink-black: #130f0c;
  --ink-charcoal: #28201b;
  --ink-muted: #57483d;

  --crimson-deep: #4c0f15;
  --crimson-rich: #7c1822;
  --crimson-bright: #a82431;
  --crimson-gradient: linear-gradient(135deg, #851b26 0%, #480c12 100%);

  --gold-bright: #f5d46e;
  --gold-imperial: #d4af37;
  --gold-leaf: #d4af37;
  --gold-antique: #9f7d36;
  --gold-bronze: #8c6a2b;
  --gold-dark: #634b18;
  --gold-gradient: linear-gradient(135deg, #f7da82 0%, #d4af37 50%, #9b7628 100%);
  --text-parchment-muted: #dfd0b2;

  /* ==========================================================================
   * TYPOGRAPHY: EXTRA-LARGE, BOLD, MOBILE-OPTIMIZED ("CHỮ LỚN, RÕ NÉT")
   * ========================================================================== */
  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --font-numeral: 'Cinzel', 'Playfair Display', serif;

  /* Generous minimum sizes so mobile screens have bold, commanding text */
  --text-hero: clamp(2.25rem, 5.4vw, 4.35rem);
  --text-h1: clamp(1.85rem, 4vw, 3.2rem);
  --text-h2: clamp(1.58rem, 3vw, 2.35rem);
  --text-h3: clamp(1.4rem, 2.4vw, 1.82rem);
  --text-body-xl: clamp(1.3rem, 2vw, 1.56rem);
  --text-body-lg: clamp(1.18rem, 1.6vw, 1.36rem);
  --text-body: clamp(1.08rem, 1.3vw, 1.22rem);
  --text-label: clamp(0.92rem, 1.1vw, 1.04rem);

  --shadow-stage: 0 24px 64px rgba(0, 0, 0, 0.82), 0 4px 18px rgba(0, 0, 0, 0.55);
  --shadow-wax: 0 8px 22px rgba(76, 15, 21, 0.7), inset 0 2px 4px rgba(255, 220, 150, 0.38);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: var(--bg-obsidian);
  color: var(--parchment-light);
  font-family: var(--font-sans);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg-obsidian);
  background-image:
    radial-gradient(circle at 50% 0%, rgba(124, 24, 34, 0.36) 0%, transparent 62%),
    radial-gradient(circle at 85% 85%, rgba(212, 175, 55, 0.16) 0%, transparent 52%),
    radial-gradient(circle at 15% 75%, rgba(76, 15, 21, 0.28) 0%, transparent 50%),
    linear-gradient(180deg, #0b0806 0%, #16110d 50%, #0b0806 100%);
  color: var(--parchment-light);
  overflow-x: hidden;
  position: relative;
}

.archival-engraving {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #f3efe6;
  filter: contrast(1.06) sepia(0.04);
  transition: transform 0.3s var(--ease-out-expo);
}