(function() {
  const init = () => {
    const nav = document.querySelector('nav');
    let lastScroll = 0;
    
    window.addEventListener('scroll', () => {
      const currentScroll = window.pageYOffset;
      if (currentScroll > 100) {
        nav.classList.add('shadow-sm');
      } else {
        nav.classList.remove('shadow-sm');
      }
      lastScroll = currentScroll;
    }, { passive: true });
    
    const mobileBtn = nav.querySelector('button');
    const mobileMenu = document.createElement('div');
    mobileMenu.className = 'fixed inset-0 bg-white z-50 flex flex-col items-center justify-center gap-8 transform translate-x-full transition-transform duration-300';
    mobileMenu.innerHTML = `
      <button class="absolute top-4 right-4 p-2">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="18" y1="6" x2="6" y2="18"/>
          <line x1="6" y1="6" x2="18" y2="18"/>
        </svg>
      </button>
      <a href="#" class="font-heading text-3xl font-bold uppercase">Archive</a>
      <a href="#" class="font-heading text-3xl font-bold uppercase">Subscribe</a>
      <a href="#" class="font-heading text-3xl font-bold uppercase">About</a>
    `;
    document.body.appendChild(mobileMenu);
    
    mobileBtn.addEventListener('click', () => {
      mobileMenu.classList.remove('translate-x-full');
    });
    
    mobileMenu.querySelector('button').addEventListener('click', () => {
      mobileMenu.classList.add('translate-x-full');
    });
    
    mobileMenu.querySelectorAll('a').forEach(link => {
      link.addEventListener('click', () => {
        mobileMenu.classList.add('translate-x-full');
      });
    });
  };
  
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();