Add 90s web whimsy: clipart decorations across all pages

- Add img/ folder with 224 transparent PNG clipart illustrations
- Add CSS classes for clipart placement (.clipart, .clipart-left,
  .clipart-right, .clipart-section, .clipart-divider, .clipart-wide,
  .clipart-inline) with hover rotation effect and responsive rules
- Decorate all 7 content pages + index + about with themed clipart:
  section headers, floating side images, wide section dividers,
  fact-box icons, and home page card icons
- Add AGENTS.md with project conventions and constraints

AGENTS.md

@@ -0,0 +1,45 @@
+# AGENTS.md
+
+## What this is
+
+Static HTML/CSS/JS website. No build tools, no npm, no frameworks, no templating. Every page is a standalone `.html` file at the root, sharing `css/style.css` and `js/main.js`.
+
+## Core constraints
+
+- **Factual accuracy is critical.** All real-world claims (dates, numbers, patent numbers, scientific facts) must be verifiable. When adding or editing content, verify specific claims — especially patent numbers, statistics, and historical details. Past sessions found 80+ factual errors across pages; assume any new content carries the same risk.
+- **`about.html` contains fictional lore** (site "founded in 1999 by librarian Marguerite Calef"). This is intentional. Do not "correct" it.
+- **Background must be `#ffffff`** (pure white), not cream or off-white. The owner has clipart/images that float on white backgrounds and look wrong on any other color.
+- **No comments in code** unless explicitly requested.
+
+## Style / aesthetic
+
+Late-90s/early-2000s "hidden gem" website styled like a DK reference book:
+- Georgia / Times New Roman serif fonts
+- Images with drop shadows (`box-shadow`)
+- Colored section bars (each topic has a distinct color)
+- Fake visitor counter (localStorage-based), "Best viewed at 1024×768" footer, "Last updated" timestamp
+- Konami code easter egg, double-click title reveals hidden text (`<span class="easter-egg">`), console tips
+- **Clipart decorations** — transparent PNGs from `img/` folder placed whimsically throughout articles using CSS classes: `.clipart` (centered), `.clipart-left` / `.clipart-right` (floating beside text), `.clipart-section` (top of page), `.clipart-divider` (between sections), `.clipart-inline` (within text). Clipart should feel like 90s web decoration — small, scattered, thematically matched to article content.
+
+## Known issues
+
+- **Saluting Device patent (US 656,278, 1900)** on `inventions.html` was NOT verified. It may be incorrect. Check Google Patents before assuming it's real.
+
+## Page structure
+
+| File | Topic | Body class |
+|---|---|---|
+| `index.html` | Home / card grid | (none) |
+| `natural-world.html` | Forests, oceans, symbiosis, extremophiles | `section-natural-world` |
+| `inventions.html` | Accidental inventions, printing press, strange patents | `section-inventions` |
+| `phenomena.html` | Ball lightning, placebo, synesthesia, Mpemba effect | `section-phenomena` |
+| `maps.html` | Cartography, phantom islands, Tristan da Cunha, Derinkuyu | `section-maps` |
+| `human-body.html` | Brain, gut, skeleton, eye, blood, phantom limbs | `section-human-body` |
+| `space.html` | Universe scale, neutron stars, dark matter, Voyager | `section-space` |
+| `about.html` | Fictional site lore | `section-about` |
+
+## Development
+
+No build or serve command needed — open any `.html` file directly in a browser. For local dev with live reload, any static server works (`python3 -m http.server`, etc.).
+
+No tests, no linting, no CI.

about.html

@@ -28,6 +28,8 @@
       </ul>
     </nav>
 
+    <img src="img/old-leather-book-illustration.png" alt="" class="clipart-section">
+
     <div class="section-bar">About This Site</div>
 
     <h2 class="section-header">About Dangerous Wonder</h2>
@@ -50,6 +52,9 @@
 
     <div class="content-section">
       <h2>The History of Dangerous Wonder</h2>
+
+      <img src="img/quill-and-ink-jar-clip.png" alt="" class="clipart-right">
+
       <p>The site has lived many lives across its quarter-century on the web. What follows is the true and occasionally embellished record of how it got here.</p>
 
       <h3>1999 — The Beginning</h3>
@@ -81,9 +86,13 @@
 
     <hr class="dk-rule">
 
+    <img src="img/medieval-leather-bound-book-illustration.png" alt="" class="clipart-wide">
+
     <div class="content-section">
       <h2>Key Milestones</h2>
 
+      <img src="img/ancient-egyptian-scroll-image.png" alt="" class="clipart-left">
+
       <ul class="fact-list">
         <li><strong>April 3, 1999</strong> — Dangerous Wonder launches on GeoCities with 14 pages</li>
         <li><strong>December 1999</strong> — First visitor from outside North America (Helsinki, Finland — they were reading about the aurora borealis)</li>
@@ -102,9 +111,13 @@
 
     <hr class="dk-rule-thin">
 
+    <img src="img/antique-leather-books-shelf-illustration.png" alt="" class="clipart-wide">
+
     <div class="content-section">
       <h2>Why "Dangerous Wonder"?</h2>
 
+      <img src="img/vintage-reading-glasses-on-book-image.png" alt="" class="clipart-right">
+
       <div class="figure-left">
         <img src="https://images.unsplash.com/photo-1473186509769-9c81ecead3f1?w=600&h=400&fit=crop" alt="A child gazing up at a towering forest">
         <p class="figure-caption">Wonder is not passive. It demands that you look closer, step further, ask one more question.</p>
@@ -123,6 +136,7 @@
     <hr class="dk-rule">
 
     <div class="did-you-know">
+      <img src="img/treasure-chest-clip-art.png" alt="" style="float:right; margin: 0 0 8px 12px; max-width:60px;" class="clipart">
       <h4>Did You Know?</h4>
       <p>Dangerous Wonder has been cited in three published academic papers, referenced by a BBC documentary on deep-sea vents, and once linked from a now-deleted tweet by a popular astrophysicist that sent 40,000 visitors to the site in a single afternoon. The server held. Barely. Marguerite celebrated by updating the page about tardigrades and going to bed early.</p>
     </div>
@@ -149,6 +163,7 @@
     <hr class="dk-rule-thin">
 
     <div class="fact-box">
+      <img src="img/antique-leather-books-shelf-illustration.png" alt="" style="float:right; margin: 0 0 8px 12px; max-width:60px;" class="clipart">
       <h4>Site Statistics</h4>
       <ul>
         <li><strong>Pages published:</strong> 743</li>
@@ -174,6 +189,8 @@
     <div class="content-section">
       <h2>How to Explore (and What You Might Find)</h2>
 
+      <img src="img/antique-golden-spine-book-image.png" alt="" class="clipart-divider">
+
       <p>Some things on Dangerous Wonder are easy to find. They are on the pages you'd expect, in the sections you'd look in first. But Marguerite and Solène have always believed that a good reference book rewards the careful reader — the one who reads footnotes, who notices the small print, who clicks on things just to see what happens.</p>
 
       <p>There are hidden pages on this site. There are Easter eggs in the source code. There are links that only appear if you look closely at the image captions. There is at least one page that can only be reached by visiting another page at a specific time of year. We are not going to tell you which one.</p>

css/style.css

@@ -567,6 +567,97 @@ p {
   .toc {
     columns: 1;
   }
+  
+  .clipart-left, .clipart-right {
+    float: none;
+    margin: 8px auto;
+    max-width: 80px;
+  }
+  
+  .clipart-section {
+    max-width: 100px;
+  }
+  
+  .clipart-wide {
+    max-width: 120px;
+  }
+}
+
+/* --- Clipart Decorations --- */
+.clipart {
+  display: block;
+  margin: 0 auto;
+  max-width: 120px;
+  opacity: 0.85;
+  image-rendering: auto;
+  transition: opacity 0.3s, transform 0.3s;
+}
+
+.clipart-left {
+  float: left;
+  margin: 6px 20px 10px 0;
+  max-width: 100px;
+  opacity: 0.85;
+  image-rendering: auto;
+  filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.15));
+  transition: opacity 0.3s, transform 0.3s;
+}
+
+.clipart-right {
+  float: right;
+  margin: 6px 0 10px 20px;
+  max-width: 100px;
+  opacity: 0.85;
+  image-rendering: auto;
+  filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.15));
+  transition: opacity 0.3s, transform 0.3s;
+}
+
+.clipart-inline {
+  display: inline;
+  vertical-align: baseline;
+  max-height: 1.4em;
+  margin: 0 0.15em;
+  image-rendering: auto;
+}
+
+.clipart-section {
+  display: block;
+  margin: 30px auto 0;
+  max-width: 140px;
+  opacity: 0.8;
+  image-rendering: auto;
+  filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.15));
+  transition: opacity 0.3s, transform 0.3s;
+}
+
+.clipart-divider {
+  display: block;
+  margin: 10px auto;
+  max-width: 100px;
+  opacity: 0.6;
+  image-rendering: auto;
+  transition: opacity 0.3s, transform 0.3s;
+}
+
+.clipart-wide {
+  display: block;
+  margin: 10px auto;
+  max-width: 180px;
+  opacity: 0.8;
+  image-rendering: auto;
+  filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.15));
+  transition: opacity 0.3s, transform 0.3s;
+}
+
+.clipart-left:hover,
+.clipart-right:hover,
+.clipart:hover,
+.clipart-section:hover,
+.clipart-divider:hover,
+.clipart-wide:hover {
+  opacity: 1;
+  transform: rotate(-3deg);
 }
 
 /* --- Utility --- */

human-body.html

@@ -28,6 +28,8 @@
       </ul>
     </nav>
 
+    <img src="img/brain-hemisphere-artwork.png" alt="" class="clipart-section">
+
     <div class="section-bar">Chapter Five</div>
 
     <h2 class="section-header">The Human Body</h2>
@@ -43,6 +45,8 @@
 
     <hr class="dk-rule">
 
+    <img src="img/classical-grecian-bust-silver.png" alt="" class="clipart-wide">
+
     <div class="content-section clearfix">
       <div class="figure figure-right">
         <img src="https://images.unsplash.com/photo-1559757175-5700dde675bc?w=600&h=400&fit=crop" alt="The human brain, exterior view" width="600" height="400">
@@ -51,6 +55,8 @@
 
       <h2>The Brain: A Universe in Three Pounds</h2>
 
+      <img src="img/antique-brass-microscope.png" alt="" class="clipart-left">
+
       <p>The human brain weighs roughly 1.4 kilograms &mdash; about the same as a bag of sugar &mdash; yet it consumes fully 20 percent of the body&rsquo;s total energy output. Its 86 billion neurons form something on the order of 100 trillion synaptic connections, a number so large it rivals the number of stars in the Milky Way. Each neuron can fire an electrical impulse up to 200 times per second, and a single cubic millimetre of cortical tissue contains roughly one kilometre of wiring.</p>
 
       <h3>Grey Matter vs White Matter</h3>
@@ -61,6 +67,7 @@
     </div>
 
     <div class="fact-box">
+      <img src="img/microscope-cartoon-image.png" alt="" style="float:right; margin: 0 0 8px 12px; max-width:60px;" class="clipart">
       <h4>Brain Facts at a Glance</h4>
       <ul class="fact-list">
         <li><strong>86 billion</strong> &mdash; approximate number of neurons in the adult human brain</li>
@@ -82,6 +89,8 @@
 
       <h2>Your Gut&rsquo;s Second Brain</h2>
 
+      <img src="img/herbal-extract-bottle-cartoon.png" alt="" class="clipart-right">
+
       <p>Tucked into the walls of your intestines lies a neural network so extensive that scientists have called it the &ldquo;second brain.&rdquo; The enteric nervous system (ENS) contains roughly 500 million neurons &mdash; more than the spinal cord, and more than the entire brain of many mammals. It operates largely independently of the brain in your skull, controlling the complex muscular contractions (peristalsis) that push food through roughly six to seven metres of winding gut, regulating blood flow to digestive organs, and managing the release of enzymes and hormones.</p>
 
       <p>The ENS produces an astonishing 95 percent of the body&rsquo;s serotonin, the neurotransmitter most associated with mood and well-being. This is not a coincidence. The gut and the brain are in constant dialogue via the vagus nerve, and the traffic is heavily one-sided: roughly 80 percent of the signals travel upward, from gut to brain, not the other way around. Your stomach has been telling your mind things for your entire life, and until very recently, science barely listened.</p>
@@ -98,9 +107,13 @@
 
     <hr class="dk-rule">
 
+    <img src="img/shark-tooth-anatomy-drawing.png" alt="" class="clipart-wide">
+
     <div class="content-section">
       <h2>The Skeleton That Replaces Itself</h2>
 
+      <img src="img/bone-skeleton-dino.png" alt="" class="clipart-left">
+
       <p>Your skeleton is not the fixed, inert scaffolding you might imagine. Every seven to ten years, through a process called bone remodelling, your entire skeleton is demolished and rebuilt &mdash; cell by cell &mdash; from scratch. Two types of cells do the work: osteoclasts, which dissolve old bone, and osteoblasts, which deposit new bone in its place. At any given moment, roughly a million of these tiny construction crews are at work somewhere in your body, dismantling and rebuilding in a continuous cycle that keeps your bones responsive to the stresses you place on them.</p>
 
       <p>This is why astronauts lose bone density in space: without the constant loading of gravity, the osteoclasts keep demolishing but the osteoblasts slow their rebuilding, and the skeleton gradually weakens. It is also why weight-bearing exercise builds stronger bones &mdash; the mechanical stress signals the osteoblasts to lay down denser, thicker tissue. Your skeleton is listening to what you do with it.</p>
@@ -109,6 +122,7 @@
     </div>
 
     <div class="fact-box">
+      <img src="img/prehistoric-fossil-drawing.png" alt="" style="float:right; margin: 0 0 8px 12px; max-width:60px;" class="clipart">
       <h4>The Skeleton in Numbers</h4>
       <ul class="fact-list">
         <li><strong>206</strong> &mdash; bones in the adult human body (babies are born with roughly 270; many fuse as they grow)</li>
@@ -119,7 +133,7 @@
       </ul>
     </div>
 
-    <div class="ornament">&loz; &loz; &loz;</div>
+    <img src="img/multicolored-dna-double-helix-image.png" alt="" class="clipart-wide">
 
     <div class="content-section clearfix">
       <div class="figure figure-right">
@@ -129,6 +143,8 @@
 
       <h2>Seeing Photons: The Eye as Particle Detector</h2>
 
+      <img src="img/antique-golden-round-glasses.png" alt="" class="clipart-right">
+
       <p>Inside each of your eyes, the retina holds two types of photoreceptor cells: rods, which detect dim light and movement, and cones, which detect colour. A human rod cell is sensitive enough to register a single photon &mdash; a single quantum of light, the smallest unit of electromagnetic energy that exists. In careful laboratory experiments, test subjects have been able to detect as few as five to nine photons striking the retina simultaneously. Your eyes are, by any reasonable definition, particle detectors.</p>
 
       <p>Light enters the cornea and passes through the pupil, whose diameter is adjusted by the iris in response to ambient brightness. It is then focused by the lens onto the retina at the back of the eye, where it triggers a cascade of chemical reactions in the photoreceptor cells. This cascade converts a particle of light into an electrical signal that travels along the optic nerve to the visual cortex at the back of the brain. The entire journey &mdash; photon to percept &mdash; takes roughly 13 milliseconds.</p>
@@ -141,6 +157,8 @@
     <div class="content-section">
       <h2>The Bizarre Journey of a Red Blood Cell</h2>
 
+      <img src="img/detailed-heart-anatomy-image.png" alt="" class="clipart-divider">
+
       <p>A red blood cell &mdash; an erythrocyte &mdash; is born in the bone marrow, squeezed out through the walls of a sinusoid like toothpaste from a tube. It enters the bloodstream bereft of a nucleus, bereft of mitochondria, bereft of DNA. It is, in fact, not really a cell at all anymore, but a ghost: a hollowed-out disc of membrane packed with 270 million molecules of haemoglobin, each one a precisely folded protein capable of seizing four molecules of oxygen and carrying them through the body like suitcases on a luggage carousel.</p>
 
       <p>The cell&rsquo;s journey is a relentless circuit. Pumped from the left ventricle of the heart into the aorta with each heartbeat &mdash; a pressure that would send a jet of blood six feet into the air if the vessel were open &mdash; it races through arteries that divide and subdivide until they become capillaries barely wide enough for the cell to squeeze through. It deforms, elongates, twists. In the capillaries of the lungs it picks up oxygen; in the capillaries of the muscles, the brain, the liver, it drops oxygen off and picks up carbon dioxide. The round trip takes roughly one minute. Over its lifespan of roughly 120 days, a single red blood cell will make the journey approximately 150,000 times, travelling a total distance of roughly 500 kilometres, before being engulfed and recycled by a macrophage in the spleen or the liver.</p>
@@ -149,6 +167,7 @@
     </div>
 
     <div class="did-you-know">
+      <img src="img/antique-gold-monocular-magnifying-glass.png" alt="" style="float:right; margin: 0 0 8px 12px; max-width:60px;" class="clipart">
       <h4>Did You Know?</h4>
       <p>If all the blood vessels in your body &mdash; arteries, veins, and capillaries &mdash; were laid end to end, they would stretch roughly 100,000 kilometres: more than twice around the Earth. The vast majority of that length is capillaries, each one narrower than a human hair, each one a place where oxygen and nutrients are exchanged for waste, cell by cell, breath by breath.</p>
     </div>
@@ -158,6 +177,8 @@
     <div class="content-section">
       <h2>Why We Blush: The Uniquely Human Flush</h2>
 
+      <img src="img/happy-mask-caricature.png" alt="" class="clipart-left">
+
       <p>Of all the body&rsquo;s involuntary responses, blushing may be the most peculiar &mdash; because humans are the only species known to do it. Darwin himself called blushing &ldquo;the most peculiar and most human of all expressions.&rdquo; Other primates reddened with rage; only humans redden with shame.</p>
 
       <p>The mechanism is straightforward: the sympathetic nervous system &mdash; part of the body&rsquo;s fight-or-flight system &mdash; triggers the release of adrenaline, which causes the blood vessels in the face, neck, and upper chest to dilate. Blood rushes to the skin&rsquo;s surface, producing the characteristic flush. What is not straightforward is why. Why should a social emotion &mdash; embarrassment, shame, the awareness of being judged &mdash; produce a visible, involuntary physical signal?</p>
@@ -170,6 +191,8 @@
     <div class="content-section">
       <h2>Phantom Limbs: The Body That Remembers</h2>
 
+      <img src="img/skeleton-cartoon-head-image.png" alt="" class="clipart-right">
+
       <p>After an amputation, something extraordinary often happens: the missing limb is still there. Not metaphorically. The patient can feel it, move it, sense temperature and pressure in it, even feel pain in it &mdash; pain in a hand that no longer exists, in a leg that has been buried for years. This is phantom limb syndrome, and it affects an estimated 80 percent of amputees.</p>
 
       <p>The explanation lies in the brain&rsquo;s body map &mdash; the somatosensory cortex, a strip of neural tissue across the top of the brain that corresponds point-by-point to the body&rsquo;s surface. When a limb is removed, the brain does not simply erase the map. The territory in the cortex that once received signals from the missing hand, for instance, is suddenly silent &mdash; but it does not stay silent. Neighbouring regions, starved for input, begin to encroach. In the classic demonstration, a patient whose arm had been amputated reported feeling a phantom hand when his face was touched, because the face&rsquo;s cortical territory had invaded the hand&rsquo;s abandoned real estate.</p>
@@ -178,6 +201,7 @@
     </div>
 
     <div class="fact-box">
+      <img src="img/shark-tooth-anatomy-drawing.png" alt="" style="float:right; margin: 0 0 8px 12px; max-width:60px;" class="clipart">
       <h4>Phantom Limb Syndrome &mdash; Key Facts</h4>
       <ul class="fact-list">
         <li><strong>80%</strong> &mdash; estimated proportion of amputees who experience phantom sensations</li>
@@ -192,6 +216,8 @@
     <div class="content-section">
       <h2>How the Ear Turns Air Into Electricity</h2>
 
+      <img src="img/colorful-double-helix-dna.png" alt="" class="clipart-divider">
+
       <p>Sound, at its most fundamental, is nothing more than air molecules pushing against one another in waves. A plucked string, a spoken word, a thunderclap &mdash; all are pressure waves rippling outward from their source at roughly 343 metres per second. The ear&rsquo;s task is to convert those ripples into the only language the brain understands: electricity.</p>
 
       <p>The journey begins at the outer ear &mdash; the cartilage funnel on the side of your head &mdash; which collects and focuses sound waves into the ear canal. At the end of the canal lies the tympanic membrane, or eardrum: a thin, taut cone of tissue that vibrates in sympathy with the incoming pressure waves. Attached to the eardrum are three bones &mdash; the malleus, incus, and stapes, collectively known as the ossicles &mdash; which form the smallest set of bones in the body and the only ones that are fully grown at birth. They act as a lever system, amplifying the vibration and transmitting it through the oval window into the fluid of the cochlea.</p>
@@ -217,12 +243,15 @@
     <div class="content-section">
       <h2>A Final Note on the Machine You Live In</h2>
 
+      <img src="img/antique-gold-eagle-emblem.png" alt="" class="clipart-right">
+
       <p>The human body contains roughly 37.2 trillion cells, organised into approximately 200 distinct types, arranged into 79 organs, supported by 206 bones, threaded with 100,000 kilometres of blood vessels, and governed by 86 billion neurons. It runs on roughly 100 watts of power. It self-repairs. It self-replicates. It maintains its own temperature within a fraction of a degree, its own pH within a few hundredths of a point, and its own structural integrity across decades of use. It does all of this without your conscious input. You do not tell your bones to remodel, or your hair cells to transduce, or your osteoclasts to dissolve old tissue. The machine runs itself.</p>
 
       <p>What is most remarkable, perhaps, is not any single system but their integration. The gut talks to the brain. The bones talk to the kidneys. The skin talks to the immune system. Every organ is in constant conversation with every other, through hormones, through nerve signals, through the shared medium of the bloodstream. The body is not a collection of parts. It is a community &mdash; and you are the community&rsquo;s only conscious witness.</p>
     </div>
 
     <div class="fact-box">
+      <img src="img/vintage-brass-microscope-icon.png" alt="" style="float:right; margin: 0 0 8px 12px; max-width:60px;" class="clipart">
       <h4>The Body by the Numbers</h4>
       <ul class="fact-list">
         <li><strong>37.2 trillion</strong> &mdash; estimated number of cells in the human body</li>