      <a href="/events.php"   class="<?= ($activePage==='events')    ? 'active':'' ?>">
        <span class="nav-icon">⚡</span> Significant Events
      </a>
      <a href="/people.php"   class="<?= ($activePage==='people')    ? 'active':'' ?>">
        <span class="nav-icon">👥</span> Significant People
      </a>
      <a href="/map.php"     class="<?= ($activePage==='map')       ? 'active':'' ?>">
        <span class="nav-icon">🗺</span> Interactive Map
      </a>
    </nav>

    <!-- Progress mini bar -->
    <div style="padding:0 1.25rem 0.75rem;">
      <div style="display:flex;justify-content:space-between;margin-bottom:0.3rem;">
        <span style="font-family:var(--font-sans);font-size:0.65rem;color:var(--color-muted);text-transform:uppercase;letter-spacing:0.08em;">Reading Progress</span>
        <span style="font-family:var(--font-sans);font-size:0.65rem;color:var(--color-gold);"><?= $overall['percentage'] ?>%</span>
