<article class="prose">
            <h1>Brio in plain HTML</h1>

            <p>
                A small CSS library is mostly an opinionated stylesheet over semantic markup. The
                <code>.prose</code> class is the part that handles long-form content, the kind of
                writing where you'd otherwise reach for a CMS theme or a typography reset.
            </p>

            <h2>Why prose</h2>

            <p>
                Most pages in a docs site or knowledge base aren't single components. They're
                paragraphs, headings, code blocks, lists, occasional images, the rare blockquote.
                Each could be wired up with its own class, but the volume makes that tedious. Bare
                HTML inside a single <code>.prose</code> wrapper is faster to write, faster to read,
                and survives copy-paste from external sources.
            </p>

            <h2>Lists</h2>

            <h3>Unordered</h3>

            <ul>
                <li>Sets typography for headings, paragraphs, links, lists, blockquotes.</li>
                <li>Styles tables and definition lists when they aren't classed.</li>
                <li>
                    Adds visual chrome to <code>&lt;details&gt;</code>, <code>&lt;kbd&gt;</code>,
                    <code>&lt;abbr&gt;</code>, <code>&lt;mark&gt;</code>, and friends.
                </li>
                <li>
                    Survives nesting:
                    <ul>
                        <li>Indents naturally.</li>
                        <li>Uses muted markers.</li>
                        <li>
                            And nests further:
                            <ul>
                                <li>Three levels deep stays readable.</li>
                                <li>Each level inherits the rhythm.</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>

            <h3>Ordered</h3>

            <ol>
                <li>Author the markup.</li>
                <li>Wrap in <code>.prose</code>.</li>
                <li>Ship.</li>
            </ol>

            <h3>Task lists</h3>

            <ul>
                <li><input type="checkbox" checked /> Port v0.1 components to brio.</li>
                <li><input type="checkbox" checked /> Add the v0.2 extras layer.</li>
                <li><input type="checkbox" /> Write a real consumer site.</li>
                <li><input type="checkbox" /> Retire the transfer manifest.</li>
            </ul>

            <h2>Blockquotes</h2>

            <blockquote>
                <p>
                    The best way to predict the future is to invent it. Hype-driven front-end churn
                    invents it for us, in the worst possible direction.
                </p>
                <p>A small library you fully understand beats a large one you rent.</p>
                <cite>— Brio, internal philosophy notes</cite>
            </blockquote>

            <h2>Inline elements</h2>

            <p>
                Inline code is set in
                <code>--font-mono</code> with a quiet <code>--color-fill-subtle</code> background,
                so references like <code>--prose-margin-block</code> or
                <code>document.querySelector()</code> read distinctly without yelling.
            </p>

            <p>
                Press <kbd>Cmd</kbd> + <kbd>K</kbd> to open the command palette. The
                <kbd>Esc</kbd> key dismisses it.
            </p>

            <p>
                Abbreviations get a dotted underline and a help-cursor:
                <abbr title="Cascading Style Sheets">CSS</abbr> handles the visual layer,
                <abbr title="HyperText Markup Language">HTML</abbr> carries the structure, and
                <abbr title="JavaScript">JS</abbr>
                only enters where the platform falls short.
            </p>

            <p>
                Use <mark>highlighted text</mark> sparingly -- it's loud enough that one or two
                phrases per article register; more, and the eye stops noticing.
            </p>

            <p>
                Strikethrough text comes in two flavors:
                <del>deleted content</del> for editorial removal and <s>obsolete syntax</s> for
                things the language used to accept.
            </p>

            <h2>Tables</h2>

            <p>
                Bare tables get a quiet treatment -- no outer border, just header underline and row
                dividers. Use a classed
                <code>&lt;table class="table"&gt;</code> for the full component (with hover,
                striping, density, etc.).
            </p>

            <table>
                <thead>
                    <tr>
                        <th>Token</th>
                        <th>Default</th>
                        <th>Purpose</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>--prose-margin-block</code></td>
                        <td><code>--space-sm-md</code></td>
                        <td>Block-axis margin between direct children.</td>
                    </tr>
                    <tr>
                        <td><code>--prose-max-width</code></td>
                        <td><code>65ch</code></td>
                        <td>Readable line length for long-form content.</td>
                    </tr>
                    <tr>
                        <td><code>--prose-blockquote-border-color</code></td>
                        <td><code>--color-border-strong</code></td>
                        <td>Inline-start accent on blockquotes.</td>
                    </tr>
                    <tr>
                        <td><code>--prose-blockquote-border-width</code></td>
                        <td><code>3px</code></td>
                        <td>Width of the blockquote accent.</td>
                    </tr>
                </tbody>
            </table>

            <h2>Definition lists</h2>

            <dl>
                <dt>Atom</dt>
                <dd>
                    A small, self-contained component. <code>.button</code>, <code>.input</code>,
                    <code>.badge</code>.
                </dd>
                <dt>Composition primitive</dt>
                <dd>
                    Layout helper that arranges children. <code>.cluster</code>,
                    <code>.stack</code>, <code>.media</code>.
                </dd>
                <dt>Slotted container</dt>
                <dd>
                    A root with named child slots. <code>.tabs</code>, <code>.timeline</code>,
                    <code>.stat</code>.
                </dd>
            </dl>

            <h2>Disclosure</h2>

            <details>
                <summary>What's inside a bare <code>&lt;details&gt;</code>?</summary>
                <p>
                    Prose adds a quiet border, padding, and a custom rotating chevron via
                    <code>::before</code> on the summary. The expand-collapse animation comes from
                    brio's global <code>details.css</code> (which applies to every
                    <code>&lt;details&gt;</code>); prose only adds the visual chrome.
                </p>
                <p>
                    Reach for <code>&lt;details class="details"&gt;</code>
                    when you want brio's full component (richer chrome, token-driven theming, hover
                    states).
                </p>
            </details>

            <h2>Images and figures</h2>

            <figure>
                <img
                    src="https://picsum.photos/seed/prose-fig/800/360"
                    alt="Abstract textured rectangle, illustrative placeholder"
                />
                <figcaption>
                    A figure pairs an image with a caption. Prose styles the caption smaller and
                    muted so it reads as supporting text.
                </figcaption>
            </figure>

            <h2>Footnotes and rules</h2>

            <p>
                Inline references can point to numbered footnotes
                <sup><a href="#fn-1">1</a></sup> at the end of the article. Goldmark and other
                GFM-flavor markdown processors emit a <code>.footnotes</code> section automatically.
            </p>

            <hr />

            <p>
                Horizontal rules make natural breakpoints in long articles -- shifting topics,
                separating an aside from the main flow, marking the end of the body before
                footnotes. Prose gives them a quiet 1px line and generous block-margins.
            </p>

            <section class="footnotes">
                <hr />
                <ol>
                    <li id="fn-1">
                        Footnotes use <code>.footnotes</code> as the section wrapper. Prose drops
                        the font size a step so the metadata sits below the body without competing.
                        <a href="#" aria-label="Back to reference">↩</a>
                    </li>
                </ol>
            </section>
        </article>

<article class="prose">
            <h2>Inside a prose block</h2>

            <p>
                Sometimes you need to use styled elements, like <code>&lt;code&gt;</code> or
                <code>&lt;table&gt;</code>
                inside a prose container. For that, you can drop a classed element inside and it
                should work as expected, with it's original class-based styling.
            </p>

            <table class="table is-striped is-bordered">
                <thead>
                    <tr>
                        <th>Class</th>
                        <th>Wins</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>&lt;table class="table"&gt;</code></td>
                        <td>Brio's table component (this row).</td>
                    </tr>
                    <tr>
                        <td><code>&lt;table&gt;</code></td>
                        <td>Prose's quiet treatment (the table above).</td>
                    </tr>
                </tbody>
            </table>

            <p>
                Same rule for unordered lists. Aa classed
                <code>&lt;ul class="cluster"&gt;</code> stays a horizontal cluster instead of a
                vertical disc list.
            </p>

            <ul class="cluster">
                <li><span class="badge is-success">Composition wins</span></li>
                <li><span class="badge is-accent">Even inside prose</span></li>
                <li><span class="badge is-warning">No specificity conflict</span></li>
            </ul>

            <p>
                Code blocks pick up brio's
                <a href="{{.Site.BasePath}}/components/code">code component</a>, including header,
                syntax tokens, and copy button, when they have the class:
            </p>

            <div>
                <div class="code-header is-accent">button.css</div>
                <pre class="code"><code>export const version = "0.1.0";</code></pre>
            </div>
        </article>

<article class="prose is-wide">
            <h3>Wide prose</h3>
            <p>
                The <code>.is-wide</code> variant inherits all the same prose styling, but it
                doesn't clamp the <code>inline-size</code> values. It's useful on pages where the
                content has its own width or where the normal prose width isn't appropriate.
            </p>
        </article>