/* ========================================
       CSS CUSTOM PROPERTIES
       ======================================== */
    :root {
      /* Colors */
      --color-void: #0a0a0f;
      --color-night: #1a1a2e;
      --color-ethereal: #2a1f4e;
      --color-gold: #C9A96E;
      --color-gold-muted: #8B7355;
      --color-parchment: #e8e4dc;
      --color-ivory: #f5f3ef;
      --color-ash: #8a8a9a;
      --color-blood: #6b2d2d;
      --color-starlight: #d4d0e8;
      
      /* Typography */
      --font-display: 'Cinzel', serif;
      --font-body: 'EB Garamond', serif;
      --font-accent: 'Cormorant Garamond', serif;
      
      /* Spacing */
      --space-xs: 8px;
      --space-sm: 16px;
      --space-md: 24px;
      --space-lg: 32px;
      --space-xl: 48px;
      --space-2xl: 64px;
      --space-3xl: 96px;
      --space-4xl: 128px;
      
      /* Layout */
      --content-width: 720px;
      --content-narrow: 600px;
      --content-wide: 960px;
    }
    
    /* ========================================
       RESET & BASE
       ======================================== */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    html {
      scroll-behavior: smooth;
    }
    
    body {
      font-family: var(--font-body);
      font-size: 18px;
      line-height: 1.75;
      color: var(--color-parchment);
      background-color: var(--color-void);
      overflow-x: hidden;
    }
    
    /* Noise overlay for texture */
    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
      opacity: 0.02;
      pointer-events: none;
      z-index: 9999;
    }
    
    /* ========================================
       TYPOGRAPHY
       ======================================== */
    h1, h2, h3 {
      font-family: var(--font-display);
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    
    h1 {
      font-size: clamp(2rem, 6vw, 3.5rem);
      color: var(--color-gold);
      text-shadow: 0 0 60px rgba(201, 169, 110, 0.3);
    }
    
    h2 {
      font-size: clamp(1.5rem, 4vw, 2rem);
      color: var(--color-gold);
      margin-bottom: var(--space-xl);
    }
    
    h3 {
      font-size: 1.25rem;
      color: var(--color-gold-muted);
      margin-bottom: var(--space-md);
    }
    
    p {
      margin-bottom: var(--space-lg);
    }
    
    p:last-child {
      margin-bottom: 0;
    }
    
    .text-accent {
      font-family: var(--font-accent);
      font-style: italic;
      color: var(--color-starlight);
    }
    
    .text-ash {
      color: var(--color-ash);
    }
    
    /* ========================================
       LAYOUT
       ======================================== */
    .container {
      width: 100%;
      max-width: var(--content-width);
      margin: 0 auto;
      padding: 0 var(--space-md);
    }
    
    .container--narrow {
      max-width: var(--content-narrow);
    }
    
    .container--wide {
      max-width: var(--content-wide);
    }
    
    section {
      padding: var(--space-4xl) 0;
      position: relative;
    }
    
    /* ========================================
       CHAPTER HEADER (Centered)
       ======================================== */
    .chapter-header {
      text-align: center;
      margin-bottom: var(--space-2xl);
    }
    
    .chapter-header h2 {
      margin-bottom: 0;
    }
    
    /* ========================================
       HERO SECTION
       ======================================== */
    .hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: relative;
      padding: var(--space-xl);
      overflow: hidden;
    }
    
    .hero__background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    
    .hero__stars {
      position: absolute;
      width: 100%;
      height: 100%;
      background: 
        radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 40% 70%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1.5px 1.5px at 50% 20%, rgba(201, 169, 110, 0.8), transparent),
        radial-gradient(1px 1px at 60% 50%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 70% 80%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1.5px 1.5px at 80% 40%, rgba(212, 208, 232, 0.6), transparent),
        radial-gradient(1px 1px at 90% 60%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 10% 90%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 30% 10%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(2px 2px at 15% 60%, rgba(201, 169, 110, 0.5), transparent),
        radial-gradient(1px 1px at 85% 25%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1.5px 1.5px at 25% 85%, rgba(212, 208, 232, 0.5), transparent),
        radial-gradient(1px 1px at 55% 45%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 75% 15%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(2px 2px at 45% 75%, rgba(201, 169, 110, 0.4), transparent);
      animation: twinkle 8s ease-in-out infinite;
    }
    
    @keyframes twinkle {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }
    
    .hero__gradient {
      position: absolute;
      width: 100%;
      height: 100%;
      background: 
        radial-gradient(ellipse at 50% 100%, rgba(42, 31, 78, 0.4) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 0%, rgba(201, 169, 110, 0.1) 0%, transparent 40%),
        linear-gradient(180deg, var(--color-void) 0%, var(--color-night) 50%, var(--color-void) 100%);
    }
    
    .hero__content {
      position: relative;
      z-index: 1;
      max-width: 700px;
    }
    
    .hero__eyebrow {
      font-family: var(--font-accent);
      font-size: 0.9rem;
      color: var(--color-ash);
      letter-spacing: 0.3em;
      text-transform: uppercase;
      margin-bottom: var(--space-md);
      opacity: 0;
      animation: fadeUp 1s ease forwards 0.5s;
    }
    
    .hero__title {
      margin-bottom: var(--space-md);
      opacity: 0;
      animation: fadeUp 1s ease forwards 0.8s;
    }
    
    .hero__subtitle {
      font-family: var(--font-accent);
      font-size: 1.25rem;
      color: var(--color-starlight);
      font-style: italic;
      margin-bottom: var(--space-xl);
      opacity: 0;
      animation: fadeUp 1s ease forwards 1.1s;
    }
    
    .hero__era {
      font-family: var(--font-display);
      font-size: 0.75rem;
      color: var(--color-gold-muted);
      letter-spacing: 0.4em;
      opacity: 0;
      animation: fadeUp 1s ease forwards 1.4s;
    }
    
    .hero__scroll {
      position: absolute;
      bottom: var(--space-xl);
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--color-ash);
      font-family: var(--font-accent);
      font-size: 0.8rem;
      letter-spacing: 0.2em;
      opacity: 0;
      animation: fadeUp 1s ease forwards 1.7s;
    }
    
    .hero__scroll-line {
      width: 1px;
      height: 40px;
      background: linear-gradient(180deg, var(--color-gold-muted), transparent);
      margin-top: var(--space-sm);
      animation: pulse 2s ease-in-out infinite;
    }
    
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scaleY(1); }
      50% { opacity: 0.5; transform: scaleY(0.8); }
    }
    
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    /* ========================================
       CHAPTER MARKERS
       ======================================== */
    .chapter-marker {
      display: inline-block;
      font-family: var(--font-display);
      font-size: 0.75rem;
      color: var(--color-gold);
      letter-spacing: 0.3em;
      padding: var(--space-xs) var(--space-md);
      border: 1px solid var(--color-gold-muted);
      border-radius: 20px;
      margin-bottom: var(--space-md);
      background: rgba(201, 169, 110, 0.05);
    }
    
    /* ========================================
       SECTION DIVIDERS
       ======================================== */
    .divider {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: var(--space-xl) 0;
    }
    
    .divider__line {
      width: 80px;
      height: 1px;
      background: var(--color-gold-muted);
    }
    
    .divider__symbol {
      width: 8px;
      height: 8px;
      background: var(--color-gold);
      transform: rotate(45deg);
      margin: 0 var(--space-md);
      flex-shrink: 0;
    }
    
    .divider--end {
      margin: var(--space-2xl) 0 var(--space-lg);
    }
    
    .divider--end .divider__symbol {
      width: 12px;
      height: 12px;
    }
    
    /* ========================================
       PULL QUOTES
       ======================================== */
    .pull-quote {
      position: relative;
      padding: var(--space-lg);
      padding-left: var(--space-xl);
      margin: var(--space-xl) 0;
      background: rgba(26, 26, 46, 0.5);
      border-left: 3px solid var(--color-gold);
      border-radius: 0 4px 4px 0;
    }
    
    .pull-quote__mark {
      position: absolute;
      top: var(--space-sm);
      left: var(--space-md);
      font-family: var(--font-accent);
      font-size: 3rem;
      color: var(--color-gold);
      line-height: 1;
      opacity: 0.5;
    }
    
    .pull-quote__text {
      font-family: var(--font-accent);
      font-size: 1.25rem;
      font-style: italic;
      color: var(--color-parchment);
      margin-bottom: var(--space-sm);
    }
    
    .pull-quote__text:last-child {
      margin-bottom: 0;
    }
    
    .pull-quote__attribution {
      font-family: var(--font-accent);
      font-size: 0.9rem;
      color: var(--color-ash);
      margin-bottom: 0;
    }
    
    /* ========================================
       DIALOGUE
       ======================================== */
    .dialogue {
      margin: var(--space-xl) 0;
    }
    
    .dialogue__line {
      display: flex;
      flex-direction: column;
      margin-bottom: var(--space-lg);
    }
    
    .dialogue__line:last-child {
      margin-bottom: 0;
    }
    
    .dialogue__speaker {
      font-family: var(--font-display);
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      padding: 4px 12px;
      border-radius: 12px;
      display: inline-block;
      margin-bottom: var(--space-xs);
      width: fit-content;
    }
    
    .dialogue__speaker--demon {
      background: var(--color-ethereal);
      color: var(--color-starlight);
    }
    
    .dialogue__speaker--boy {
      background: var(--color-gold-muted);
      color: var(--color-ivory);
    }
    
    .dialogue__speaker--narrator {
      background: transparent;
      border: 1px solid var(--color-ash);
      color: var(--color-ash);
    }
    
    .dialogue__text {
      font-family: var(--font-accent);
      font-size: 1.1rem;
      font-style: italic;
      padding-left: var(--space-sm);
      border-left: 2px solid var(--color-gold-muted);
      margin-left: var(--space-xs);
      margin-bottom: 0;
    }
    
    .dialogue__text--narrator {
      font-family: var(--font-body);
      font-style: normal;
      border-left-color: var(--color-ash);
      color: var(--color-ash);
    }
    
    /* ========================================
       ILLUSTRATIONS (Placeholder Styling)
       ======================================== */
    .illustration {
      position: relative;
      background: linear-gradient(135deg, var(--color-night), var(--color-ethereal));
      border-radius: 4px;
      overflow: hidden;
      margin: var(--space-xl) 0;
    }
    
    .illustration::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        radial-gradient(ellipse at 30% 20%, rgba(201, 169, 110, 0.2), transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(42, 31, 78, 0.4), transparent 50%);
    }
    
    .illustration__placeholder {
      aspect-ratio: 16/10;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--color-ash);
      font-family: var(--font-accent);
      position: relative;
      z-index: 1;
      padding: var(--space-md);
    }
    
    .illustration__placeholder svg {
      width: 60px;
      height: 60px;
      margin-bottom: var(--space-sm);
      opacity: 0.5;
    }
    
    .illustration--portrait {
      max-width: 360px;
      margin: 0;
    }
    
    .illustration--portrait .illustration__placeholder {
      aspect-ratio: 3/4;
    }
    
    .illustration--wide .illustration__placeholder {
      aspect-ratio: 16/9;
    }
    
    /* ========================================
       SPLIT LAYOUT
       ======================================== */
    .split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-2xl);
      align-items: center;
    }
    
    .split__content {
      display: flex;
      flex-direction: column;
    }
    
    .split__content .chapter-header {
      text-align: left;
    }
    
    @media (max-width: 768px) {
      .split {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
      }
      
      .split__content .chapter-header {
        text-align: center;
      }
      
      .illustration--portrait {
        max-width: 300px;
        margin: 0 auto;
      }
    }
    
    /* ========================================
       SCROLL REVEAL ANIMATIONS
       ======================================== */
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                  transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .reveal.revealed {
      opacity: 1;
      transform: translateY(0);
    }
    
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    
    /* ========================================
       SECTION BACKGROUNDS
       ======================================== */
    .section--gradient {
      background: linear-gradient(180deg, var(--color-void) 0%, var(--color-night) 50%, var(--color-void) 100%);
    }
    
    .section--ethereal {
      background: linear-gradient(180deg, var(--color-void) 0%, var(--color-ethereal) 50%, var(--color-void) 100%);
    }
    
    /* ========================================
       ENDING SECTION
       ======================================== */
    .ending {
      text-align: center;
      padding: var(--space-4xl) var(--space-md);
    }
    
    .ending__quote {
      font-family: var(--font-accent);
      font-size: clamp(1.25rem, 3vw, 1.5rem);
      font-style: italic;
      color: var(--color-starlight);
      max-width: 550px;
      margin: 0 auto var(--space-lg);
      padding: var(--space-xl);
      border: 1px solid var(--color-gold-muted);
      border-radius: 4px;
      background: rgba(42, 31, 78, 0.2);
      line-height: 1.8;
    }
    
    .ending__symbol {
      font-size: 2rem;
      color: var(--color-gold);
      margin: var(--space-lg) 0;
    }
    
    .ending__attribution {
      font-family: var(--font-display);
      font-size: 0.85rem;
      letter-spacing: 0.3em;
      color: var(--color-ash);
      margin-bottom: var(--space-4xl);
    }
    
    /* ========================================
       MOBILE ADJUSTMENTS
       ======================================== */
    @media (max-width: 640px) {
      body {
        font-size: 16px;
      }
      
      section {
        padding: var(--space-3xl) 0;
      }
      
      .pull-quote__text {
        font-size: 1.1rem;
      }
      
      .ending__quote {
        padding: var(--space-lg);
      }
      
      .hero__scroll {
        bottom: var(--space-lg);
      }
    }