/*
Theme Name: Iron Whiskers Foundry
Theme URI: https://lightgoldenrodyellow-beaver-835956.hostingersite.com
Description: Custom WordPress theme for The Iron Whiskers Foundry - A steampunk cat distribution system. Features include story archive with chapters, character profiles, blog, and e-commerce ready structure.
Version: 1.0
Author: The Iron Whiskers Foundry
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: iron-whiskers
Tags: steampunk, cats, storytelling, custom-design
*/

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', 'Comic Sans MS', 'Arial', sans-serif;
    background: linear-gradient(135deg, #1a0a2e 0%, #3d1f47 50%, #1a0a2e 100%);
    background-attachment: fixed;
    color: #f4e4d7;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Navigation */
nav {
    background: rgba(26, 10, 46, 0.95);
    border-bottom: 3px solid #d4a574;
    padding: 1.5rem 2rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.nav-section {
    display: flex;
    gap: 2rem;
    align-items: center;
    flex: 1;
}

.nav-section.left {
    justify-content: flex-end;
}

.nav-section.center {
    justify-content: center;
    flex: 0 0 auto;
}

.nav-section.right {
    justify-content: flex-start;
}

nav a {
    color: #d4a574;
    text-decoration: none;
    font-size: 1rem;
    font-weight: bold;
    transition: all 0.3s;
    text-shadow: 0 0 10px rgba(212, 165, 116, 0.5);
    cursor: pointer;
}

nav a:hover {
    color: #f4e4d7;
    text-shadow: 0 0 20px rgba(212, 165, 116, 0.8);
    transform: translateY(-2px);
}

.donate-button {
    background: linear-gradient(135deg, #d4a574, #b89968);
    color: #1a0a2e;
    padding: 0.6rem 1.5rem;
    border-radius: 25px;
    font-weight: bold;
    border: 2px solid #d4a574;
    box-shadow: 0 0 20px rgba(212, 165, 116, 0.6);
}

/* Content Sections */
.content-section {
    max-width: 1200px;
    margin: 3rem auto;
    padding: 2rem;
    background: rgba(61, 31, 71, 0.6);
    border: 2px solid #d4a574;
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

h1, h2, h3 {
    color: #d4a574;
    margin-bottom: 1rem;
}

/* WordPress Content */
.entry-content {
    padding: 2rem;
}

.entry-content p {
    margin-bottom: 1rem;
}

/* Responsive */
@media (max-width: 968px) {
    .nav-container {
        flex-direction: column;
        gap: 1rem;
    }
}
<div class="container">
<h1 style="text-align: center; margin-bottom: .5rem; color: #d4a574 !important;">CDS Tales</h1>
<p style="text-align: center; font-size: 1.2rem; margin-bottom: 1rem; color: #d4a574 !important;">Chronicles of the Cat Distribution System, as meticulously documented by Professor Pedantic P. Whiskers IV</p>
<div class="tales-layout">
<!-- SIDEBAR NAVIGATION -->
<div class="tales-sidebar">
<h3>📜 Story Archive</h3>
<div class="story-nav-item">
<div class="story-title active">The Origin of the Cat Distribution System</div>
<div class="chapter-list">
<div class="chapter-link active" data-chapter="foreword">Foreword</div>
<div class="chapter-link" data-chapter="chapter1">Chapter 1: The Mission</div>
<div class="chapter-link" data-chapter="chapter2">Chapter 2: The Incident</div>
<div class="chapter-link" data-chapter="chapter3">Chapter 3: The Recovery</div>
<div class="chapter-link" data-chapter="chapter4">Chapter 4: The Analysis</div>
<div class="chapter-link" data-chapter="chapter5">Chapter 5: Birth of the F.L.O.O.F.E.D.</div>
<div class="chapter-link" data-chapter="chapter6">Chapter 6: The Naming Controversy</div>
<div class="chapter-link" data-chapter="chapter7">Chapter 7: First Distribution</div>
<div class="chapter-link" data-chapter="chapter8">Chapter 8: The Modern Era</div>
<div class="chapter-link" data-chapter="chapter9">Chapter 9: Remote Network</div>
<div class="chapter-link" data-chapter="conclusion">Conclusion</div>
</div>
</div>

<div class="story-nav-item">
<div class="story-title" style="opacity: 0.6; cursor: default;">Story 2: Coming Soon</div>
</div>
</div>

<!-- MAIN CONTENT AREA -->
<div class="tales-content">

<!-- FOREWORD -->
<div id="foreword" class="story-chapter">
<h2 style="color: #d4a574; text-align: center;">The Origin of the Cat Distribution System</h2>
<h3 style="color: #b89968; text-align: center; font-style: italic; margin-bottom: 2rem;">The Pittsburgh Aether Incident of 1889</h3>
<p style="text-align: center; font-style: italic; color: #b89968; margin-bottom: 0rem;">As documented by <span style="color: #d4a574;">Professor Pedantic P. Whiskers IV</span>
Continuing 134 years of meticulous record-keeping begun by my great-great-grandfather</p>

<div style="margin: 2rem 0; text-align: center;">
    <video controls style="max-width: 100%; width: auto; height: 400px; border-radius: 10px; border: 2px solid #d4a574; box-shadow: 0 8px 30px rgba(212, 165, 116, 0.3);">
        <source src="https://lightgoldenrodyellow-beaver-835956.hostingersite.com/wp-content/uploads/2025/11/openart-video_W1aB3skgpy7RVqxfYOQA_1764512967447_1764512967652-1.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <p style="font-size: 0.9rem; color: #b89968; font-style: italic; margin-top: 0.5rem;">
        <span style="color: #d4a574;">Professor Pedantic P. Whiskers IV</span> reads the Foreword
    </p>
</div>

<h3 style="color: #d4a574;">Foreword from the Current Archivist</h3>
<p style="color: #d4a574 !important;">I am <span style="color: #f4e4d7; font-weight: bold;">Professor Pedantic P. Whiskers IV</span>, great-great-grandson of the original <span style="color: #f4e4d7;">Professor Pedantic P. Whiskers</span> who served as logistics coordinator aboard <em style="color: #f4e4d7;">The Magnificent Meower</em> on that fateful day in 1889. The account you are about to read has been passed down through four generations of my family, each of us serving as <span style="color: #f4e4d7;">Chief Archivist and Nomenclature Compliance Officer</span> at the <span style="color: #f4e4d7;">Iron Whiskers Foundry</span>.</p>

<p style="color: #d4a574 !important;">My great-great-grandfather began documenting these events immediately after the incident. His journals, complaint files, and meticulous records form the foundation of our family's ongoing work to preserve the true history of the <span style="color: #f4e4d7;">Cat Distribution System</span>-and to correct certain <em style="color: #f4e4d7;">nomenclature irregularities</em> that persist to this day.</p>

<p style="color: #d4a574 !important;">What follows is the complete historical account, compiled from eyewitness testimony, recovered documents, and 134 years of careful research.</p>

<p style="text-align: right; font-style: italic; margin-top: 2rem; color: #d4a574 !important;">-<span style="color: #f4e4d7;">Professor Pedantic P. Whiskers IV</span>, Current Chief Archivist</p>

<div class="chapter-nav">
    <a class="chapter-nav-btn" onclick="scrollToTop()">↑ Back to Top</a>
    <a class="chapter-nav-btn" onclick="scrollToChapter('chapter1')">Next Chapter →</a>
</div>
</div>

<!-- CHAPTER 1 -->
<div id="chapter1" class="story-chapter">
<h2 style="color: #d4a574;">Chapter One: The Mission</h2>
<p style="color: #d4a574 !important;">In the spring of 1889, the <span style="color: #f4e4d7;">Feline Distribution Cooperative</span> operated a fleet of steam-powered dirigibles to transport cats between cities, managing the global mouse population. The system worked flawlessly-until it didn't.</p>

<p style="color: #d4a574 !important;">On May 15th, 1889, <em style="color: #f4e4d7;">The Magnificent Meower</em> departed from the Philadelphia distribution center carrying 200 cats destined for various neighborhoods throughout Pittsburgh, Pennsylvania. The crew consisted of:</p>
<ul style="color: #d4a574 !important;">
 	<li style="color: #d4a574 !important;"><strong style="color: #f4e4d7;">Captain Whiskers Von Fluffingham</strong> - Commanded the dirigible, seventeen successful distribution missions</li>
 	<li style="color: #d4a574 !important;"><strong style="color: #f4e4d7;">Lieutenant Snuggles McMittens</strong> - Navigation specialist with an unfortunate allergy to catnip essence</li>
 	<li style="color: #d4a574 !important;"><strong style="color: #f4e4d7;">Professor Pedantic P. Whiskers</strong> - My great-great-grandfather, serving as logistics coordinator</li>
</ul>
<p style="color: #d4a574 !important;">The 200 cats in the cargo basket below were standard distribution subjects: tabbies, calicos, tuxedos, and various mixed breeds, all destined for specific addresses throughout Pittsburgh's neighborhoods.</p>

<div class="chapter-nav">
    <a class="chapter-nav-btn" onclick="scrollToTop()">↑ Back to Top</a>
    <a class="chapter-nav-btn" onclick="scrollToChapter('chapter2')">Next Chapter →</a>
</div>
</div>

<!-- CHAPTER 2 -->
<div id="chapter2" class="story-chapter">
<h2 style="color: #d4a574;">Chapter Two: The Incident</h2>
<p style="color: #d4a574 !important;">At approximately 2:47 PM, as the dirigible passed over the confluence of Pittsburgh's three rivers (the Allegheny, Monongahela, and Ohio), <span style="color: #f4e4d7;">Lieutenant Snuggles McMittens</span> experienced what would later be recorded in the official incident report as <em style="color: #f4e4d7;">"an unfortunate nasal event in proximity to volatile fuel reserves."</em></p>

<p style="color: #d4a574 !important;">In layman's terms: he sneezed near the catnip essence fuel tanks.</p>

<p style="color: #d4a574 !important;">The resulting explosion released a massive burst of what we now call <span style="color: #f4e4d7;">"Feline Aether"</span>-a previously unknown form of energy that exists in the space between cats and their destined humans. The purple and blue energy engulfed the cargo basket containing all 200 cats.</p>

<p style="color: #d4a574 !important;">My great-great-grandfather, <span style="color: #f4e4d7;">Professor Pedantic P. Whiskers</span>, documented the moment in his journal:</p>
<p style="font-style: italic; padding-left: 2rem; border-left: 3px solid #d4a574; margin: 1.5rem 0; color: #f4e4d7 !important;">"The cats did not fall. Instead, each became wrapped in a luminous cocoon of purple-blue light. One by one, they simply vanished-not with a sound, but with a soft 'floof' of displaced air. It was the most unscientific thing I had ever witnessed, and I immediately began taking notes for the official report."</p>
<p style="color: #d4a574 !important;">The crew survived, thanks to their safety harnesses and the dirigible's emergency flotation system. But the cats? Gone. Vanished into thin air.</p>

<div class="chapter-nav">
    <a class="chapter-nav-btn" onclick="scrollToTop()">↑ Back to Top</a>
    <a class="chapter-nav-btn" onclick="scrollToChapter('chapter3')">Next Chapter →</a>
</div>
</div>

<!-- CHAPTER 3 -->
<div id="chapter3" class="story-chapter">
<h2 style="color: #d4a574;">Chapter Three: The Recovery Operation</h2>
<p style="color: #d4a574 !important;">Within six hours, <span style="color: #f4e4d7;">Dame Fluffernutter McSnugglesworth</span> assembled the largest feline recovery operation in history. Using the brass chronometer tracking collars each cat wore, recovery teams fanned out across Pittsburgh.</p>

<p style="color: #d4a574 !important;">The results were unprecedented:</p>

<p style="color: #d4a574 !important;">Every single cat was found-but not where they were supposed to be.</p>
<ul style="color: #d4a574 !important;">
 	<li style="color: #d4a574 !important;"><strong style="color: #f4e4d7;">Madame Fluffsworth</strong>, destined for a wealthy family in Shadyside, was discovered in the lap of a lonely widow in Bloomfield</li>
 	<li style="color: #d4a574 !important;"><strong style="color: #f4e4d7;">Sir Reginald Mousesbane</strong>, assigned to a factory manager, appeared on the doorstep of a homesick Irish steelworker</li>
 	<li style="color: #d4a574 !important;"><strong style="color: #f4e4d7;">Princess Whiskers Malone</strong>, scheduled for delivery to a merchant, materialized in the kitchen of a struggling Italian family with six children</li>
</ul>
<p style="color: #d4a574 !important;">And here's what shocked the recovery teams: <span style="color: #f4e4d7; font-weight: bold;">None of the cats wanted to leave.</span></p>

<p style="color: #d4a574 !important;">Furthermore, none of the humans wanted to give them up. In every case, the cat and human seemed perfectly matched-as if they had been searching for each other their entire lives.</p>

<div class="chapter-nav">
    <a class="chapter-nav-btn" onclick="scrollToTop()">↑ Back to Top</a>
    <a class="chapter-nav-btn" onclick="scrollToChapter('chapter4')">Next Chapter →</a>
</div>
</div>

<!-- CHAPTER 4 -->
<div id="chapter4" class="story-chapter">
<h2 style="color: #d4a574;">Chapter Four: The Analysis</h2>
<p style="color: #d4a574 !important;"><span style="color: #f4e4d7;">Professor Calculon Von Whiskerbottom</span>, the Cooperative's chief analyst, spent three weeks running calculations on the Cooperative's massive <span style="color: #f4e4d7;">Difference Engine</span>. His findings revolutionized our understanding of feline-human relationships.</p>

<h3 style="color: #b89968;">The Discovery of Feline Aether:</h3>
<p style="color: #d4a574 !important;">Humans, it turns out, emit a form of emotional energy-particularly strong in moments of loneliness, grief, or longing for companionship. <span style="color: #f4e4d7;">Professor Mittens McWhiskers</span>, the brilliant scientist leading our research division, termed this <em style="color: #f4e4d7;">"Human Sad Juice"</em> in his preliminary notes, though I have been attempting to get this changed to <em style="color: #f4e4d7;">"Anthropogenic Emotional Aether Emissions"</em> for the past several decades.</p>

<p style="color: #d4a574 !important;">Cats, meanwhile, possess an extraordinary sensitivity to this energy. Each cat has specific preferences: some seek humans who need gentle companionship, others prefer active households, still others desire quiet book-readers or energetic children.</p>

<p style="color: #d4a574 !important;">The aether explosion had somehow perfectly matched each cat's preferences with each human's emotional signature-and delivered them with pinpoint accuracy.</p>

<div class="chapter-nav">
    <a class="chapter-nav-btn" onclick="scrollToTop()">↑ Back to Top</a>
    <a class="chapter-nav-btn" onclick="scrollToChapter('chapter5')">Next Chapter →</a>
</div>
</div>

<!-- CHAPTER 5 -->
<div id="chapter5" class="story-chapter">
<h2 style="color: #d4a574;">Chapter Five: The Birth of the F.L.O.O.F.E.D.</h2>
<p style="color: #d4a574 !important;">The Cooperative's leadership faced a critical decision: Could we replicate this phenomenon intentionally?</p>

<p style="color: #d4a574 !important;"><span style="color: #f4e4d7;">Professor Mittens McWhiskers</span> proposed harnessing the aether energy. <span style="color: #f4e4d7;">Lady Cogsworth Wilhelmina Fluffbottom III</span>-our <span style="color: #f4e4d7;">Director of Human Psychology</span>-provided the psychological framework. <span style="color: #f4e4d7;">Captain Horatio "One-Eye" Gearwhisker</span> contributed field operation expertise.</p>

<p style="color: #d4a574 !important;">But it was <span style="color: #f4e4d7;">Chief Engineer Isadora Ironforge</span> who made it possible.</p>

<p style="color: #d4a574 !important;"><span style="color: #f4e4d7;">Chief Ironforge</span> discovered that the old foundry at the Cooperative's Pittsburgh facility contained a massive iron fireplace with unique properties. The iron had been forged during a rare astronomical alignment, and the structure itself sat within a 10-mile radius of where Pittsburgh's three rivers' energy fields intersected.</p>

<p style="color: #d4a574 !important;">Over the next eight months, <span style="color: #f4e4d7;">Chief Ironforge</span> led a team of engineers in an ambitious conversion project. They installed:</p>
<ul style="color: #d4a574 !important;">
 	<li style="color: #d4a574 !important;">Copper aether collectors throughout the facility</li>
 	<li style="color: #d4a574 !important;">Steam purification columns to process cat breath into pure aether energy</li>
 	<li style="color: #d4a574 !important;">A 47-face chronometer system to track optimal distribution times</li>
 	<li style="color: #d4a574 !important;">Brass resonance chambers to attune the aether to specific human emotional signatures</li>
 	<li style="color: #d4a574 !important;">A complex network of pneumatic tubes and pressure gauges</li>
</ul>
<p style="color: #d4a574 !important;">The device was magnificent. It was revolutionary. It would change the course of feline-human relations forever.</p>

<p style="color: #d4a574 !important;">And then came time to name it.</p>

<div class="chapter-nav">
    <a class="chapter-nav-btn" onclick="scrollToTop()">↑ Back to Top</a>
    <a class="chapter-nav-btn" onclick="scrollToChapter('chapter6')">Next Chapter →</a>
</div>
</div>

<!-- CHAPTER 6 -->
<div id="chapter6" class="story-chapter">
<h2 style="color: #d4a574;">Chapter Six: The Naming Controversy</h2>
<p style="color: #d4a574 !important;">On February 3rd, 1890, the completed device was ready for its inaugural test. The Cooperative's board of directors gathered for the christening ceremony.</p>

<p style="color: #d4a574 !important;">My great-great-grandfather, <span style="color: #f4e4d7;">Professor Pedantic P. Whiskers</span>, had prepared a thorough proposal. He presented a 47-page document suggesting the name <em style="color: #f4e4d7;">"Precision-Calibrated Empathic Resonance Transportation Matrix and Feline Distribution Apparatus, Mark I."</em></p>

<p style="color: #d4a574 !important;"><span style="color: #f4e4d7;">Chief Engineer Isadora Ironforge</span> listened patiently to the entire presentation.</p>

<p style="color: #d4a574 !important;">Then she stood up, looked at the device, looked at the assembled directors, and said:</p>
<p style="font-style: italic; padding-left: 2rem; border-left: 3px solid #d4a574; margin: 1.5rem 0; color: #f4e4d7 !important;">"It's a fireplace that goes 'floof' when it sends out cats. I'm calling it the F.L.O.O.F.E.D.-Fireplace Logistics for Orderly Outbound Feline Expedited Deliveries."</p>
<p style="color: #d4a574 !important;">The entire process took her exactly fourteen minutes.</p>

<p style="color: #d4a574 !important;">The board approved it immediately.</p>

<p style="color: #d4a574 !important;">My great-great-grandfather filed his first official nomenclature complaint that very afternoon. Our family has continued the tradition ever since. I myself have contributed complaint numbers 48,000 through 52,847.</p>

<div class="chapter-nav">
    <a class="chapter-nav-btn" onclick="scrollToTop()">↑ Back to Top</a>
    <a class="chapter-nav-btn" onclick="scrollToChapter('chapter7')">Next Chapter →</a>
</div>
</div>

<!-- CHAPTER 7 -->
<div id="chapter7" class="story-chapter">
<h2 style="color: #d4a574;">Chapter Seven: The First F.L.O.O.F.E.D. Distribution</h2>
<p style="color: #d4a574 !important;">The inaugural distribution took place on February 10th, 1890.</p>

<p style="color: #d4a574 !important;">A small orange tabby named <span style="color: #f4e4d7;">Mr. Whiskers Von Fluffington</span> was selected for the test. The cat was placed near the <span style="color: #f4e4d7;">F.L.O.O.F.E.D.</span>'s warming platform, where he was exposed to carefully controlled aether energy. The system analyzed his preferences: he liked gentle petting, warm laps, and humans who read books aloud.</p>

<p style="color: #d4a574 !important;">The <span style="color: #f4e4d7;">F.L.O.O.F.E.D.</span>'s compatibility algorithm cross-referenced this with every lonely human within a 50-mile radius.</p>

<p style="color: #d4a574 !important;">Seventeen seconds later, <span style="color: #f4e4d7;">Mr. Whiskers Von Fluffington</span> vanished in a soft purple glow.</p>

<p style="color: #d4a574 !important;">He materialized on a park bench next to a 73-year-old librarian who had just been thinking about how quiet her house had become since her children moved away.</p>

<p style="color: #d4a574 !important;">The match was perfect.</p>

<div class="chapter-nav">
    <a class="chapter-nav-btn" onclick="scrollToTop()">↑ Back to Top</a>
    <a class="chapter-nav-btn" onclick="scrollToChapter('chapter8')">Next Chapter →</a>
</div>
</div>

<!-- CHAPTER 8 -->
<div id="chapter8" class="story-chapter">
<h2 style="color: #d4a574;">Chapter Eight: The Modern Era</h2>
<p style="color: #d4a574 !important;">In the 134 years since that first successful distribution, the <span style="color: #f4e4d7;">F.L.O.O.F.E.D.</span> has facilitated over 2.3 million perfect cat-human matches. The system has been refined, improved, and expanded-though my family notes that certain nomenclature issues remain stubbornly unresolved.</p>

<p style="color: #d4a574 !important;">The <span style="color: #f4e4d7;">Iron Whiskers Foundry</span> continues to operate at the original Pittsburgh location, still using <span style="color: #f4e4d7;">Chief Engineer Ironforge</span>'s converted fireplace. It remains the only operational <span style="color: #f4e4d7;">F.L.O.O.F.E.D.</span> in the world, as the unique combination of location, materials, and historical aether residue cannot be replicated.</p>

<p style="color: #d4a574 !important;">I now serve as <span style="color: #f4e4d7;">Chief Archivist</span>, continuing the work my great-great-grandfather began. Current operations are overseen by <span style="color: #f4e4d7;">Chief McGillicuddy</span>, a capable administrator who at least has the courtesy to acknowledge that the <span style="color: #f4e4d7;">F.L.O.O.F.E.D.</span>'s name is, shall we say, <em style="color: #f4e4d7;">informal</em>.</p>

<div class="chapter-nav">
    <a class="chapter-nav-btn" onclick="scrollToTop()">↑ Back to Top</a>
    <a class="chapter-nav-btn" onclick="scrollToChapter('chapter9')">Next Chapter →</a>
</div>
</div>

<!-- CHAPTER 9 -->
<div id="chapter9" class="story-chapter">
<h2 style="color: #d4a574;">Chapter Nine: The Remote Distribution Network</h2>
<p style="color: #d4a574 !important;">Of course, not all cats can physically visit the Foundry. In 1923, my grandfather, <span style="color: #f4e4d7;">Professor Pedantic P. Whiskers II</span>, helped develop the <span style="color: #f4e4d7;">Remote Aether Enhancement System</span> for shelter cats.</p>

<p style="color: #d4a574 !important;">Using a network of concealed aether amplification devices installed at partner shelters, the <span style="color: #f4e4d7;">F.L.O.O.F.E.D.</span> can remotely enhance a shelter cat's natural aether sensitivity. This creates an <em style="color: #f4e4d7;">"attraction field"</em> that draws the cat's perfect human directly to them.</p>

<p style="color: #d4a574 !important;">From the human's perspective, they simply felt an inexplicable urge to visit a particular shelter, walked past several cats, and then suddenly <em style="color: #f4e4d7;">knew</em>-this was their cat.</p>

<p style="color: #d4a574 !important;">From our perspective, the <span style="color: #f4e4d7;">F.L.O.O.F.E.D.</span> successfully matched another pair.</p>

<div class="chapter-nav">
    <a class="chapter-nav-btn" onclick="scrollToTop()">↑ Back to Top</a>
    <a class="chapter-nav-btn" onclick="scrollToChapter('conclusion')">Next Chapter →</a>
</div>
</div>

<!-- CONCLUSION -->
<div id="conclusion" class="story-chapter">
<h2 style="color: #d4a574;">Conclusion</h2>
<p style="color: #d4a574 !important;">The <span style="color: #f4e4d7;">Great Pittsburgh Aether Incident of 1889</span> revealed a truth that cat lovers have always suspected: there is no such thing as coincidence when it comes to cats choosing their humans.</p>

<p style="color: #d4a574 !important;">Every "stray" that appears on your doorstep, every shelter cat that reaches through the cage bars to touch your hand, every kitten that toddles out from under a porch at exactly the right moment-all of it is the work of the <span style="color: #f4e4d7;">Cat Distribution System</span>.</p>

<p style="color: #d4a574 !important;">The cats have been in charge all along. We just provide the infrastructure.</p>

<div style="margin-top: 3rem; padding-top: 2rem; border-top: 2px solid #d4a574;">
<p style="font-style: italic; color: #b89968 !important;"><strong style="color: #f4e4d7;">Archival Note:</strong> This document represents Official Historical Record #1-A in the <span style="color: #f4e4d7;">Iron Whiskers Foundry</span> archives. For information on the <span style="color: #f4e4d7;">F.L.O.O.F.E.D.</span>'s technical specifications, please refer to the Technical Manual (assuming one can overlook its regrettable title).</p>
<p style="font-style: italic; color: #b89968 !important;">For complaints regarding nomenclature irregularities, please submit forms in triplicate to <span style="color: #f4e4d7;">Professor Pedantic P. Whiskers IV</span>, Chief Nomenclature Compliance Officer.</p>
<p style="font-style: italic; color: #b89968 !important;">Current complaint count: 52,847 and rising.</p>
<p style="text-align: right; font-style: italic; margin-top: 2rem; color: #b89968 !important;">-<span style="color: #f4e4d7;">Professor Pedantic P. Whiskers IV</span>
<span style="color: #f4e4d7;">Iron Whiskers Foundry</span>, Pittsburgh, PA
Established 1889</p>
</div>

<div class="chapter-nav">
    <a class="chapter-nav-btn" onclick="scrollToTop()">↑ Back to Top</a>
    <span style="color: #b89968; font-style: italic;">~ The End ~</span>
</div>
</div>

</div>
</div>
</div>

<script>
// Scroll to a specific chapter
function scrollToChapter(chapterId) {
    const chapter = document.getElementById(chapterId);
    if (chapter) {
        const offset = 120;
        const top = chapter.getBoundingClientRect().top + window.pageYOffset - offset;
        window.scrollTo({ top: top, behavior: 'smooth' });
    }
}

// Scroll to top of page
function scrollToTop() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
}

// Highlight current chapter in sidebar as user scrolls
function highlightCurrentChapter() {
    const chapters = document.querySelectorAll('.story-chapter');
    const chapterLinks = document.querySelectorAll('.chapter-link');
    
    let currentChapter = null;
    
    chapters.forEach(chapter => {
        const rect = chapter.getBoundingClientRect();
        if (rect.top <= 150 && rect.bottom > 150) {
            currentChapter = chapter.id;
        }
    });
    
    if (currentChapter) {
        chapterLinks.forEach(link => {
            link.classList.remove('active');
            if (link.getAttribute('data-chapter') === currentChapter) {
                link.classList.add('active');
            }
        });
    }
}

// Add click handlers to sidebar links
document.querySelectorAll('.chapter-link').forEach(link => {
    link.addEventListener('click', function() {
        const chapterId = this.getAttribute('data-chapter');
        scrollToChapter(chapterId);
    });
});

// Listen for scroll events
window.addEventListener('scroll', highlightCurrentChapter);

// Run on page load
window.addEventListener('load', highlightCurrentChapter);
</script>