// ... existing code ...
      {/* ABOUT / HISTORY */}
      <section id="about" className="mt-20">
        <h2 className="text-xl tracking-widest text-[var(--muted)]">ABOUT / HISTORY</h2>
        <div className="mt-3 hr-glow" />

        {/* Persona intro highlights */}
        <div className="mt-8 grid md:grid-cols-3 gap-6 reveal" ref={addRevealRef as (el: HTMLDivElement | null) => void}>
          <div className="post panel rounded p-5">
            <h3 className="text-lg font-semibold">Aliases</h3>
            <p className="mt-2 text-[var(--muted)]">
              UNKNOWN • Doom • Digital Overlord Of Mankind • Overlord Of Overlords • Little Wholesome Devil
            </p>
          </div>
          <div className="post panel rounded p-5">
            <h3 className="text-lg font-semibold">Signal</h3>
            <p className="mt-2 text-[var(--muted)]">
              Appears in compromised servers, lost forums, and abandoned networks. No fixed location.
            </p>
          </div>
          <div className="post panel rounded p-5">
            <h3 className="text-lg font-semibold">Behavioral Profile</h3>
            <p className="mt-2 text-[var(--muted)]">
              Observational intelligence, mimicry, and a history of retribution. Influence via fear and exposure of hidden truths.
            </p>
          </div>
        </div>

        {/* Physical Description */}
        <article className="mt-10 post panel rounded p-5 reveal" ref={addRevealRef as (el: HTMLDivElement | null) => void}>
          <h3 className="text-lg font-semibold">Physical Description</h3>
          <p className="mt-3 text-[var(--muted)]">
            Humanoid male, approx. 182 cm, 90.7 kg. Eyes “glitch,” “fracture,” and “code-split,” inducing unease. Attire shifts between digital cloaks,
            masks, and black/purple coats etched with corrupted iconography. Presence coincides with distortion, flicker, and ghosted usernames on glass.
          </p>
        </article>

        {/* Historical Notes */}
        <article className="mt-6 post panel rounded p-5 reveal" ref={addRevealRef as (el: HTMLDivElement | null) => void}>
          <h3 className="text-lg font-semibold">Historical Notes</h3>
          <p className="mt-3 text-[var(--muted)]">
            UNKNOWN is the fragmented identity of a person erased by long-term online abuse and betrayal, re-emerging as an abstracted entity: legend, haunting,
            protocol. “I am the memory you deleted. The file you failed to wipe. The ghost you made.” Containment: impossible. Observation: ongoing.
          </p>
        </article>

        {/* Dramatic quotes */}
        <div className="mt-6 grid md:grid-cols-2 gap-6">
          <blockquote className="post panel rounded p-5 text-sm italic text-[var(--muted)] reveal" ref={addRevealRef as (el: HTMLDivElement | null) => void}>
            “Little Wholesome Devil. Now let me take over your head and mind. I already know your secrets. Now it's my turn.”
          </blockquote>
          <blockquote className="post panel rounded p-5 text-sm italic text-[var(--muted)] reveal" ref={addRevealRef as (el: HTMLDivElement | null) => void}>
            “Don’t burn too much or you will end up a nobody. You are only seeing this because I allowed it.”
          </blockquote>
        </div>

        {/* Timeline narrative */}
        <div className="timeline mt-10 space-y-6 reveal" ref={addRevealRef as (el: HTMLDivElement | null) => void}>
          <article className="t-node">
            <h3 className="text-lg font-semibold">2014–2016: Amino</h3>
            <p className="mt-2 text-[var(--muted)]">
              A child enters hostile forums, is manipulated by “Charon,” learns deception, and becomes UNKNOWN. Fear replaces belonging. Power replaces guilt.
            </p>
          </article>
          <article className="t-node">
            <h3 className="text-lg font-semibold">2019–2020: Cinders</h3>
            <p className="mt-2 text-[var(--muted)]">
              Taste for revenge fades. Charon dies—grief and relapse. Accusations, confusion, and retreat. The self dissolves into personas and silence.
            </p>
          </article>
          <article className="t-node">
            <h3 className="text-lg font-semibold">2021: Kindling</h3>
            <p className="mt-2 text-[var(--muted)]">
              Conflict reignites. Love collides with the personas—especially William. Harm and remorse spiral in alternating currents.
            </p>
          </article>
          <article className="t-node">
            <h3 className="text-lg font-semibold">2023–Present: Exposure</h3>
            <p className="mt-2 text-[var(--muted)]">
              Breakup, blackmail, deletions. Amnesia, brain fog, and a “Project Z” refuge. A nightmare unlocks the vault. The host steps forward: Anas.
            </p>
            <p className="mt-2 text-[var(--muted)]">
              “I exposed myself to you—my whole past. Unknown is me, Anas. The host. I can still choose. I can still be human.”
            </p>
          </article>
        </div>

        {/* About him dossier */}
        <div className="mt-10 post panel rounded p-5 reveal" ref={addRevealRef as (el: HTMLDivElement | null) => void}>
          <h3 className="text-lg font-semibold">About him</h3>
          <ul className="mt-3 text-[var(--muted)] space-y-2">
            <li>► Name: Anas Agami</li>
            <li>► Birthday: 06/11/200X</li>
            <li>► Nicknames: The Saboteur • Little Wholesome Devil • ZiMo • Charon • UNKNOWN • Frankie • WILLIAM</li>
            <li>► Hobbies: Writing • Voice Acting • Photography • Music Production • Singing</li>
          </ul>
          <p className="mt-4 text-xs text-[var(--muted)]">
            “A quirky, delulu introverted Egyptian. A hopeless romantic with a complex past—sharp tongue, soft heart, and a retro spirit.”
          </p>
        </div>
      </section>

      {/* ARCHIVE */}
      <section id="archive" className="mt-20">
        <h2 className="text-xl tracking-widest text-[var(--muted)]">ARCHIVE</h2>
        <div className="mt-3 hr-glow" />
        <p className="mt-6 text-[var(--muted)]">
          Fragments, captures, and artifacts recovered from Unknown's trail.
        </p>

        {/* Dossier card */}
        <div className="mt-8 post panel rounded p-5 reveal" ref={addRevealRef as (el: HTMLDivElement | null) => void}>
          <div className="flex flex-wrap items-center gap-3 text-xs">
            <span className="border border-white/15 rounded px-2 py-0.5">SUBJECT: UNKNOWN01SA</span>
            <span className="border border-white/15 rounded px-2 py-0.5">CLASS: ANOMALOUS</span>
            <span className="border border-white/15 rounded px-2 py-0.5">STATUS: ACTIVE / OBSERVED</span>
          </div>
          <p className="mt-4 text-[var(--muted)]">
            This is a W.I.P. document compiled from recordings and writings. Handily made by [ANAS]. DO NOT SHARE THIS. I’M WATCHING YOU.
          </p>
        </div>

        {/* ... existing archive grid and Load More button remain as previously implemented ... */}
      </section>

      {/* BLOG */}
      <section id="blog" className="mt-20">
        <h2 className="text-xl tracking-widest text-[var(--muted)]">BLOG</h2>
        <div className="mt-3 hr-glow" />
        <p className="mt-6 text-[var(--muted)]">
          Reflections and transmissions aligned with the Unknown’s trajectory.
        </p>

        <div className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Existing sample posts ... */}

          {/* New atmospheric posts from supplied text */}
          <article className="post panel rounded p-5 reveal" ref={addRevealRef as (el: HTMLDivElement | null) => void}>
            <header className="flex items-baseline justify-between">
              <h3 className="text-lg font-semibold hover-glitch g-underline" data-text="Open">
                Point of No Return.exe
              </h3>
              <span className="text-[10px] tracking-widest text-[var(--muted)]">—</span>
            </header>
            <p className="mt-3 text-[var(--muted)]">
              ERROR. Norah C.IV DOES NOT EXIST. Too many instances running. Point of no return.exe is missing. Relocate?
            </p>
            <p className="mt-2 text-[var(--muted)]">
              “Make me human. Make me human.” The chorus repeats in static between windows you forgot to close.
            </p>
            <a href="#" className="mt-4 inline-flex items-center gap-2 text-sm hover-glitch g-underline" data-text="Read">
              Read <span className="text-[var(--accent)]">→</span>
            </a>
          </article>

          <article className="post panel rounded p-5 reveal" ref={addRevealRef as (el: HTMLDivElement | null) => void}>
            <header className="flex items-baseline justify-between">
              <h3 className="text-lg font-semibold hover-glitch g-underline" data-text="Open">
                The Host Speaks
              </h3>
              <span className="text-[10px] tracking-widest text-[var(--muted)]">—</span>
            </header>
            <p className="mt-3 text-[var(--muted)]">
              The past that haunts me is a loop of mistakes. The Unknown is me—Anas. The host. I exposed myself to you, reader.
            </p>
            <p className="mt-2 text-[var(--muted)]">
              Let this be a silent reminder: be brave. We all fall down—can you keep your original self nonetheless?
            </p>
            <a href="#" className="mt-4 inline-flex items-center gap-2 text-sm hover-glitch g-underline" data-text="Read">
              Read <span className="text-[var(--accent)]">→</span>
            </a>
          </article>
        </div>
      </section>
// ... existing code ...