<div class="ug-prose">
  <h1>The National Park Idea</h1>
  <p>The national park concept is generally credited to the artist George Catlin, who wrote in 1832 that the government should preserve nature "in a magnificent park... a nation's park."</p>
  <h2>Early History</h2>
  <p>In 1864, Congress granted Yosemite Valley to California for public use. Eight years later, Yellowstone became the first true national park, set aside by Congress "for the benefit and enjoyment of the people."</p>
  <p>The creation of the National Park Service in 1916 established a unified system for managing these protected areas.</p>
  <h3>The Organic Act</h3>
  <p>The founding legislation directed the Service to "conserve the scenery and the natural and historic objects and wildlife therein, and to provide for the enjoyment of the same."</p>
</div>

<div class="ug-prose">
  <p class="ug-prose__lead">This is a lead paragraph with slightly larger text to introduce an article or section. It draws the reader in with a more prominent visual weight.</p>
  <p>Regular body text follows at the standard size and weight.</p>
</div>

<div class="ug-prose">
  <p>Learn more about <a href="#">Yellowstone National Park</a> and its geothermal features. Visit the <a href="#">official park website</a> for current conditions and alerts.</p>
</div>

<div class="ug-prose">
  <p>Text can be <strong>bold</strong>, <em>italic</em>, or <mark>highlighted</mark>. Use <abbr title="National Park Service">NPS</abbr> abbreviations, <small>small text</small>, or <code>inline code</code>.</p>
  <p>Subscript H<sub>2</sub>O and superscript E=mc<sup>2</sup> are also supported.</p>
</div>

<div class="ug-prose">
  <blockquote>
    <p>In every walk with nature, one receives far more than he seeks.</p>
    <cite>John Muir</cite>
  </blockquote>
</div>

<div class="ug-prose">
  <h3>Things to Bring</h3>
  <ul>
    <li>Water (at least 1 liter per hour of hiking)</li>
    <li>Sun protection (hat, sunscreen, sunglasses)</li>
    <li>Navigation (map, compass, or GPS device)</li>
    <li>First aid kit</li>
  </ul>
  <h3>Trip Planning Steps</h3>
  <ol>
    <li>Choose your destination and research trail conditions</li>
    <li>Check weather forecasts and fire restrictions</li>
    <li>Make reservations if required</li>
    <li>Tell someone your itinerary</li>
  </ol>
</div>

<div class="ug-prose">
  <pre><code>&lt;div class="ug-prose"&gt;
  &lt;h1&gt;Your Content Here&lt;/h1&gt;
  &lt;p&gt;Just wrap your HTML in the prose class.&lt;/p&gt;
&lt;/div&gt;</code></pre>
</div>

<div class="ug-prose">
  <table>
    <thead>
      <tr><th>Park</th><th>State</th><th>Year</th></tr>
    </thead>
    <tbody>
      <tr><td>Yellowstone</td><td>Wyoming</td><td>1872</td></tr>
      <tr><td>Sequoia</td><td>California</td><td>1890</td></tr>
      <tr><td>Mount Rainier</td><td>Washington</td><td>1899</td></tr>
    </tbody>
  </table>
</div>

<div class="ug-prose">
  <p>Content before the divider.</p>
  <hr />
  <p>Content after the divider.</p>
  <hr class="ug-divider--bold" />
  <p>Content after a bold divider.</p>
</div>

<div class="ug-prose">
  <figure>
    <img src="https://placehold.co/700x400/e8e5e0/666?text=Landscape+Photo" alt="Landscape" />
    <figcaption>A scenic overlook in the park, showing the valley below and distant mountain peaks.</figcaption>
  </figure>
</div>

<div class="ug-prose ug-prose--indent">
  <p>The first paragraph is not indented, following traditional typographic convention.</p>
  <p>Subsequent paragraphs receive a first-line indent to signal a new paragraph without extra vertical space. This creates a denser, more book-like reading experience.</p>
  <p>This style is particularly effective for long-form narrative content where the extra vertical spacing between paragraphs would disrupt the flow.</p>
</div>

<div class="ug-prose ug-prose--debug">
  <h2>Debug Mode</h2>
  <p>Each element is highlighted with its type label, making it easy to verify that all elements snap correctly to the baseline grid.</p>
  <blockquote><p>Blockquotes are highlighted too.</p></blockquote>
</div>