Literary Split Hero with Custom Cursor

<div
  style="--bg-tint: #e8e2d6; --ink: #2b2622; --paper-white: #fdfaf3; --accent-bound: #7d4f39; --font-display: 'Cormorant Garamond', serif; --font-ui: 'Inter', sans-serif;"
  class="min-h-screen w-full overflow-hidden bg-[var(--bg-tint)] text-[var(--ink)] font-['Cormorant_Garamond'] antialiased selection:bg-[var(--accent-bound)] selection:text-white">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=Inter:wght@400;500&display=swap');

    .noise-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 50;
      opacity: 0.12;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    .ghost-layer {
      position: absolute;
      top: 0;
      left: -10px;
      width: 100%;
      color: white;
      filter: blur(12px);
      opacity: 0.6;
      z-index: 1;
      user-select: none;
      pointer-events: none;
      mix-blend-mode: overlay;
    }

    .footer-nav a::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 1px;
      background: var(--ink);
      bottom: -4px;
      left: 0;
      transform: scaleX(0);
      transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .footer-nav a:hover::after {
      transform: scaleX(1);
    }

    #custom-cursor {
      position: fixed;
      top: 0;
      left: 0;
      width: 14px;
      height: 14px;
      background: var(--accent-bound);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%, -50%);
      mix-blend-mode: multiply;
      transition: transform 0.15s ease-out;
    }

    @keyframes bounce {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-8px);
      }
    }
  </style>

  <div id="custom-cursor"></div>
  <div class="noise-overlay"></div>

  <div class="grid lg:grid-cols-2 h-screen w-full">
    <!-- Left Column: The Narrative -->
    <section class="relative p-8 lg:p-12 flex flex-col justify-between border-r border-black/5 bg-[#f4f1ea]">
      <div class="text-2xl font-semibold tracking-tighter">L.</div>

      <div class="relative max-w-[85%] mx-auto z-10">
        <div class="ghost-layer text-6xl lg:text-8xl leading-[0.9]">
          Ink is the only<br>map to the<br>forgotten.
        </div>
        <h1 class="text-6xl lg:text-8xl font-light leading-[0.9] relative z-10 text-[var(--ink)]">
          Ink is the <br>only map to <br>the <em>forgotten</em>.
        </h1>
        <p class="mt-12 font-['Inter'] text-[10px] uppercase tracking-[0.2em] opacity-70 leading-relaxed max-w-xs">
          A book is more than paper and binding. It is the preservation of a soul's singular frequency, held in stasis
          until read.
        </p>
      </div>

      <nav class="footer-nav flex gap-8 font-['Inter'] text-[10px] uppercase tracking-widest font-medium">
        <a href="#" class="relative">Prologue</a>
        <a href="#" class="relative">The Archive</a>
        <a href="#" class="relative">Colophon</a>
      </nav>

      <div class="absolute bottom-8 left-8 text-xl animate-[bounce_2s_infinite]">↓</div>
    </section>

    <!-- Right Column: The Physicality -->
    <section class="relative bg-[#1a1816] overflow-hidden group">
      <div
        class="absolute top-8 right-8 flex gap-8 z-[100] mix-blend-difference text-white font-['Inter'] text-[10px] uppercase tracking-widest">
        <a href="#">Manuscripts</a>
        <a href="#">Folios</a>
        <a href="#">Essays</a>
      </div>

      <img src="https://images.unsplash.com/photo-1491843384429-30494622eb02?q=80&w=2670&auto=format&fit=crop"
           class="w-full h-full object-cover opacity-80 grayscale contrast-125 scale-105 group-hover:scale-110 transition-transform duration-[2s] ease-out"
           alt="Vintage open book with ink stains">

      <div
        class="absolute top-1/2 left-[10%] -translate-y-1/2 w-[320px] h-[460px] bg-[#7d4f39] p-10 flex flex-col justify-between shadow-[0_30px_60px_rgba(0,0,0,0.5)] transition-transform duration-700 ease-out group-hover:-translate-y-[52%] group-hover:translate-x-4 border border-white/10">
        <div class="flex justify-between font-['Inter'] text-[9px] tracking-widest uppercase text-black/40">
          <span>First Edition</span>
          <span>Circa 1892</span>
        </div>

        <div
          class="mt-auto mb-8 font-['Inter'] text-[11px] leading-relaxed uppercase tracking-wider text-black/70 italic">
          "A room without books is like a body without a soul."
          <br><br>
          — MARCUS TULLIUS CICERO
        </div>

        <div class="text-5xl leading-[0.85] tracking-tighter text-[#2b2622]">
          Faded<br>Prose
        </div>
      </div>
    </section>
  </div>

  <!-- Menu Trigger -->
  <div
    class="absolute top-8 left-[calc(50%+2rem)] lg:left-[calc(50%+3rem)] z-[100] w-8 h-5 flex flex-col justify-between mix-blend-difference cursor-none">
    <div class="w-full h-px bg-white"></div>
    <div class="w-2/3 h-px bg-white"></div>
    <div class="w-full h-px bg-white"></div>
  </div>

  <script>
    (function() {
      const cursor = document.getElementById('custom-cursor');
      document.addEventListener('mousemove', (e) => {
        cursor.style.left = e.clientX + 'px';
        cursor.style.top = e.clientY + 'px';
      });

      const interactives = document.querySelectorAll('a, .group, .footer-nav a');
      interactives.forEach(el => {
        el.addEventListener('mouseenter', () => {
          cursor.style.transform = 'translate(-50%, -50%) scale(3.5)';
          cursor.style.background = '#d4dad6';
        });
        el.addEventListener('mouseleave', () => {
          cursor.style.transform = 'translate(-50%, -50%) scale(1)';
          cursor.style.background = '#7d4f39';
        });
      });
    })();
  </script>
</div>