Writing Page — READING_ROOM.EXE Stacked Blog Cards

// For each card at index i, when NOT expanded:
const topOffset   = i * 40;   // px — each card is 40px lower than the one above
const leftOffset  = i * 20;   // px — each card is 20px to the right
const zIndex      = entries.length - i; // top card has highest z-index

// When expanded (active card):
const topOffset   = 50;  // pulls card near the top of the container
const leftOffset  = 0;
const zIndex      = 50;  // floats above all other cards

{entries.map((entry, i) => {
  const isExpanded = expandedId === entry.id;
  const zIndex    = isExpanded ? 50 : entries.length - i;
  const top       = isExpanded ? 0  : i * 40;
  const left      = isExpanded ? 0  : i * 20;

  return (
    <div
      key={entry.id}
      className={`absolute transition-all duration-300 ease-in-out ${
        isExpanded
          ? "inset-0"
          : "w-full md:w-3/4 h-64 cursor-pointer hover:-translate-y-2"
      }`}
      style={{ top: `${top}px`, left: `${left}px`, zIndex }}
      onClick={() => !isExpanded && setExpanded(entry.id)}
    >
      <WindowPanel title={entry.file} titleBarColor={entry.color} className="h-full shadow-2xl">
        {/* card contents */}
      </WindowPanel>
    </div>
  );
})}

<div className="relative h-full flex flex-col">
  {/* Tag badge */}
  <div className={`absolute top-0 right-0 font-mono text-[10px] px-2 py-1 border border-current text-y2k-${entry.color}`}>
    {entry.tag}
  </div>

  {/* Date + Title */}
  <div className="mt-6 mb-4">
    <div className="font-mono text-xs text-y2k-textMuted mb-2">{entry.date}</div>
    <h2 className="font-pixel text-3xl text-white">{entry.title}</h2>
  </div>

  {/* Body — line-clamped when collapsed, scrollable when expanded */}
  <div className={`font-sans text-sm leading-relaxed text-y2k-textMuted ${
    isExpanded ? "overflow-y-auto flex-1" : "line-clamp-3"
  }`}>
    {entry.content}
  </div>

  {/* Close button — only rendered when expanded */}
  {isExpanded && (
    <div className="mt-4 pt-4 border-t border-y2k-panelDark flex justify-end">
      <button
        onClick={(e) => { e.stopPropagation(); setExpanded(null); }}
        className="bevel-button px-4 py-1 font-pixel text-lg bg-y2k-panel text-white hover:text-y2k-magenta"
      >
        Close Window
      </button>
    </div>
  )}
</div>