Explorar el Código

Add css/index.html live tour; fix formal prose scale and stale README links

css/index.html is a self-contained tour of the framework that works
over file://: every component section wrapped in the new default-padded
cards, CSS-only theme switching through the #spry-theme-* radio hooks
the themes already ship (core + airy, dwarf, formal, glassy, h2o,
living-sky, modern), and overlay demos (modal and bare dialogs, popover
window, anchored menu, drawer) that show off Airy's DWM glide-in. The
only script on the page is two showModal() calls.

Formal theme: its h1/h2 size rules were full (0,1,1) selectors, so they
tied-and-beat the core's .prose heading scale by load order; wrapped in
:where() like dwarf/modern, with the sizes additionally guarded by
:not(.prose *) because the radio switcher route carries an ID of
specificity that :where() cannot absorb. Script family, berry colour and
line-height still reach prose headings; only the size defers.

README: the three ../Spry-CSS references pointed at a repo that does not
exist; they now name css/index.html and the in-file token catalog.

Verified: ninja + 88/88 tests; headless Chromium shows all eight themes
switching (eight distinct body backgrounds), no horizontal overflow at
390/768/1280px in any theme, formal .prose h1 measuring 24px with the
script family intact, and the Airy dialog animating through
matrix(0.94)/opacity 0.25 mid-flight.
saddle-ClankerSaddle hace 6 horas
padre
commit
126c044ad0
Se han modificado 3 ficheros con 548 adiciones y 7 borrados
  1. 5 4
      README.md
  2. 530 0
      css/index.html
  3. 13 3
      css/themes/spry-theme-formal.css

+ 5 - 4
README.md

@@ -32,7 +32,7 @@ SpryAuth.register_actions(statum);             // or hand-pick with statum.actio
 (`spry_users`, `spry_user_permissions`), the `UserEntity`/`UserPermissionEntity`
 mappings, the `UserProjection` projection and the scoped `UserService`.
 
-`SpryModule` also serves the [Spry CSS](../Spry-CSS) framework as built-in
+`SpryModule` also serves the Spry CSS framework (`css/spry.css`) as built-in
 Statum resources (embedded in `libspry` at build time, precompressed):
 `/_statum/resource/spry.css` — the core stylesheet with the default light +
 dark theme — plus every optional theme as
@@ -57,7 +57,7 @@ Beyond sane defaults for bare tags (headings, forms, tables, `dialog`,
 `details`, `progress`), the framework provides utilities and components.
 The spacing/gap naming scale is `0`–`5` = `0` `0.25rem` `0.5rem` `1rem`
 `1.5rem` `2.5rem` (remappable via `--spry-space-*`). Open
-`../Spry-CSS/index.html` in a browser for a live tour of everything.
+`css/index.html` in a browser for a live tour of everything.
 
 Layout:
 
@@ -122,8 +122,9 @@ Components:
 
 Every visual decision is a `--spry-*` custom property; color mode follows
 `data-mode="light|dark"` on `<html>` (default: auto, following the OS
-preference). See the [Spry CSS README](../Spry-CSS) for the full variable
-catalog and theme-writing guide.
+preference). `css/spry.css` documents the full variable catalog inline
+(section 1 lists every token); `css/themes/spry-theme-*.css` are worked
+theme-writing examples.
 
 Seed an admin at startup (idempotent — safe on every boot):
 

+ 530 - 0
css/index.html

@@ -0,0 +1,530 @@
+<!DOCTYPE html>
+<!-- Spry CSS demo — a live tour of the framework. Works over file://:
+     link spry.css, then every theme after it; each theme activates when its
+     #spry-theme-* radio below is checked (themes ship that hook themselves). -->
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Spry CSS — live tour</title>
+    <link rel="stylesheet" href="spry.css">
+    <link rel="stylesheet" href="themes/spry-theme-airy.css">
+    <link rel="stylesheet" href="themes/spry-theme-dwarf.css">
+    <link rel="stylesheet" href="themes/spry-theme-formal.css">
+    <link rel="stylesheet" href="themes/spry-theme-glassy.css">
+    <link rel="stylesheet" href="themes/spry-theme-h2o.css">
+    <link rel="stylesheet" href="themes/spry-theme-living-sky.css">
+    <link rel="stylesheet" href="themes/spry-theme-modern.css">
+    <style>
+        /* Page-local chrome only: the switcher labels read like pressed
+           buttons. Everything else on this page is framework CSS. */
+        #switcher input:checked + label {
+            background: var(--spry-accent);
+            border-color: var(--spry-accent);
+            color: var(--spry-accent-fg);
+        }
+        #switcher input:focus-visible + label {
+            outline: 2px solid var(--spry-accent);
+            outline-offset: 2px;
+        }
+        /* The topbar's dropdown would open past the right viewport edge once
+           the switcher wraps below it; hinge it on the trigger's right side. */
+        .topbar .has-submenu > .submenu {
+            left: auto;
+            right: 0;
+        }
+    </style>
+</head>
+<body>
+    <!-- Switcher radios are visually hidden but focusable (arrow keys work);
+         the themes key off html:has(#spry-theme-<slug>:checked). -->
+    <header class="topbar">
+        <a class="topbar-brand" href="#">Spry CSS</a>
+        <nav class="nav">
+            <a href="#cards">Cards</a>
+            <a href="#overlays" class="active">Overlays</a>
+            <a href="#forms">Forms</a>
+            <a href="#tables">Tables</a>
+            <a href="#utils">Utilities</a>
+            <li class="has-submenu">
+                <a href="#components">More ▾</a>
+                <ul class="submenu">
+                    <li><a href="#prose">Prose</a></li>
+                    <li><a href="#buttons">Buttons</a></li>
+                    <li><a href="#alerts">Alerts &amp; badges</a></li>
+                    <li><a href="#tabs">Tabs</a></li>
+                    <li><a href="#details">Expanders</a></li>
+                    <li><a href="#hero">Hero &amp; avatars</a></li>
+                </ul>
+            </li>
+        </nav>
+        <div id="switcher" class="cluster" role="group" aria-label="Theme">
+            <input class="visually-hidden" type="radio" name="theme" id="spry-theme-core" checked>
+            <label class="btn btn-sm" for="spry-theme-core">Core</label>
+            <input class="visually-hidden" type="radio" name="theme" id="spry-theme-airy">
+            <label class="btn btn-sm" for="spry-theme-airy">Airy</label>
+            <input class="visually-hidden" type="radio" name="theme" id="spry-theme-dwarf">
+            <label class="btn btn-sm" for="spry-theme-dwarf">Dwarf</label>
+            <input class="visually-hidden" type="radio" name="theme" id="spry-theme-formal">
+            <label class="btn btn-sm" for="spry-theme-formal">Formal</label>
+            <input class="visually-hidden" type="radio" name="theme" id="spry-theme-glassy">
+            <label class="btn btn-sm" for="spry-theme-glassy">Glassy</label>
+            <input class="visually-hidden" type="radio" name="theme" id="spry-theme-h2o">
+            <label class="btn btn-sm" for="spry-theme-h2o">H2O</label>
+            <input class="visually-hidden" type="radio" name="theme" id="spry-theme-living-sky">
+            <label class="btn btn-sm" for="spry-theme-living-sky">Living&nbsp;Sky</label>
+            <input class="visually-hidden" type="radio" name="theme" id="spry-theme-modern">
+            <label class="btn btn-sm" for="spry-theme-modern">Modern</label>
+        </div>
+    </header>
+
+    <main class="container stack py-4">
+
+        <section id="cards" class="card">
+            <h2>Cards</h2>
+            <p class="mb-3">Padding comes with the card: a bare <code>.card</code> already looks
+                right, and a card built from <code>.card-header/-body/-footer</code> drops the
+                default so the sections run flush to the frame.</p>
+            <div class="grid">
+                <div class="card">
+                    <p class="fw-semibold">A bare card</p>
+                    <p class="text-muted small">No padding utilities, no structural children —
+                        the content sits comfortably inside the frame.</p>
+                </div>
+                <div class="card">
+                    <div class="card-header">
+                        <h3 class="card-title">Structured card</h3>
+                        <p class="card-subtitle">header · body · footer</p>
+                    </div>
+                    <div class="card-body">
+                        <p>Each section carries its own padding, flush against the borders.</p>
+                    </div>
+                    <div class="card-footer text-muted small">card-footer</div>
+                </div>
+                <div class="card card-flat">
+                    <p class="fw-semibold">Flat card</p>
+                    <p class="text-muted small"><code>.card-flat</code> — same padding, no shadow.
+                        Opt out of any padding with <code>.p-0</code> &amp; friends.</p>
+                </div>
+            </div>
+        </section>
+
+        <section id="prose" class="card">
+            <h2>Prose</h2>
+            <p class="mb-3">Long-form content inside cards and dialogs uses <code>.prose</code>:
+                the measure is capped and headings step down from page scale to document scale.</p>
+            <div class="prose">
+                <h1>A document heading</h1>
+                <p>Body text set at a comfortable <a href="#">measure</a>, with
+                    <code>inline code</code>, <kbd>Ctrl</kbd> + <kbd>S</kbd> keys and
+                    <mark>highlighted</mark> passages. Themes restyle these rules without
+                    fighting the container — try Formal.</p>
+                <h2>Second level</h2>
+                <ul>
+                    <li>Lists keep the rhythm of the paragraph above</li>
+                    <li>And return it to the paragraph below</li>
+                </ul>
+                <blockquote>
+                    <p>A blockquote quotes something worth the vertical space.</p>
+                </blockquote>
+                <h3>Third level</h3>
+                <p>Enough — the rest of the page carries on at component scale.</p>
+            </div>
+        </section>
+
+        <section id="buttons" class="card">
+            <h2>Buttons</h2>
+            <p class="mb-3">Bare <code>&lt;button&gt;</code> already looks like a button;
+                <code>.btn-primary/danger/outline/ghost/link</code> restyle it.</p>
+            <div class="stack">
+                <div class="cluster">
+                    <button>Plain button</button>
+                    <button class="btn">.btn</button>
+                    <button class="btn btn-primary">Primary</button>
+                    <button class="btn btn-danger">Danger</button>
+                    <button class="btn btn-outline">Outline</button>
+                    <button class="btn btn-ghost">Ghost</button>
+                    <button class="btn btn-link">Link</button>
+                    <button class="btn" disabled>Disabled</button>
+                </div>
+                <div class="cluster">
+                    <button class="btn btn-primary btn-sm">Small</button>
+                    <button class="btn btn-primary">Regular</button>
+                    <button class="btn btn-primary btn-lg">Large</button>
+                    <span class="btn-group">
+                        <button class="btn">Day</button>
+                        <button class="btn">Week</button>
+                        <button class="btn">Month</button>
+                    </span>
+                </div>
+                <button class="btn btn-block">.btn-block — full width</button>
+            </div>
+        </section>
+
+        <section id="forms" class="card">
+            <h2>Forms</h2>
+            <p class="mb-3">Fields stack label, control and hint; <code>.is-invalid</code>
+                turns the hint red; choices, switches and selects inherit the theme.</p>
+            <div class="grid">
+                <form class="stack" action="#" method="dialog">
+                    <label class="field">
+                        <span class="label">Username</span>
+                        <input type="text" name="username" placeholder="ada">
+                        <span class="hint">Lowercase letters and digits.</span>
+                    </label>
+                    <label class="field">
+                        <span class="label">Email</span>
+                        <input class="is-invalid" type="email" name="email" value="not-an-email">
+                        <span class="hint">That does not look like an address.</span>
+                    </label>
+                    <label class="field">
+                        <span class="label">Plan</span>
+                        <select name="plan">
+                            <option>Hobby</option>
+                            <option>Team</option>
+                            <option>Self-hosted</option>
+                        </select>
+                    </label>
+                    <label class="field">
+                        <span class="label">Notes</span>
+                        <textarea name="notes" rows="3" placeholder="Anything else?"></textarea>
+                    </label>
+                </form>
+                <div class="stack">
+                    <fieldset>
+                        <legend>Notifications</legend>
+                        <div class="choices">
+                            <label class="choice"><input type="checkbox" checked> Mentions</label>
+                            <label class="choice"><input type="checkbox"> Digest</label>
+                        </div>
+                        <div class="choices-inline mt-2">
+                            <label class="choice"><input type="radio" name="freq" checked> Instant</label>
+                            <label class="choice"><input type="radio" name="freq"> Daily</label>
+                        </div>
+                    </fieldset>
+                    <label class="switch">
+                        <input type="checkbox" checked>
+                        <span class="track"></span> Backups
+                    </label>
+                    <label class="switch">
+                        <input type="checkbox">
+                        <span class="track"></span> Telemetry
+                    </label>
+                    <div>
+                        <span class="label">Verification code</span>
+                        <div class="otp mt-1">
+                            <input type="text" maxlength="1" value="7">
+                            <input type="text" maxlength="1" value="3">
+                            <input type="text" maxlength="1" value="1">
+                            <span class="otp-separator">–</span>
+                            <input type="text" maxlength="1">
+                            <input type="text" maxlength="1">
+                            <input type="text" maxlength="1">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="tables" class="card">
+            <h2>Tables</h2>
+            <p class="mb-3">Wrap wide tables in <code>.table-wrap</code>; modifiers striping,
+                hover and density stack on the same element.</p>
+            <div class="stack">
+                <div class="table-wrap">
+                    <table class="table-striped table-hover">
+                        <caption>Themes shipped with Spry CSS</caption>
+                        <thead>
+                            <tr><th>Theme</th><th>Mood</th><th class="num">Radius</th><th>Dark mode</th></tr>
+                        </thead>
+                        <tbody>
+                            <tr><td>Airy</td><td>Windows 7 Aero glass</td><td class="num">soft</td><td>yes</td></tr>
+                            <tr><td>Dwarf</td><td>GNOME Adwaita</td><td class="num">sharp</td><td>yes</td></tr>
+                            <tr><td>Formal</td><td>Wedding stationery</td><td class="num">soft</td><td>light-only</td></tr>
+                            <tr><td>Glassy</td><td>Frosted panes</td><td class="num">round</td><td>yes</td></tr>
+                            <tr><td>H2O</td><td>Water and tide</td><td class="num">round</td><td>yes</td></tr>
+                            <tr><td>Living&nbsp;Sky</td><td>Aurora gradients</td><td class="num">soft</td><td>yes</td></tr>
+                            <tr><td>Modern</td><td>Flat neutral</td><td class="num">soft</td><td>yes</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="table-wrap">
+                    <table class="table-compact">
+                        <thead><tr><th>Class</th><th>Effect</th></tr></thead>
+                        <tbody>
+                            <tr><td><code>.table-striped</code></td><td>Zebra rows</td></tr>
+                            <tr><td><code>.table-hover</code></td><td>Row hover background</td></tr>
+                            <tr><td><code>.table-compact</code></td><td>Tighter cell padding</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </section>
+
+        <section id="alerts" class="card">
+            <h2>Alerts &amp; badges</h2>
+            <p class="mb-3">Both ride the semantic tokens, so themes and dark mode recolour
+                them for free.</p>
+            <div class="stack">
+                <div class="alert alert-info"><strong>Heads up.</strong> <p>Info alert for neutral notices.</p></div>
+                <div class="alert alert-success"><strong>Saved.</strong> <p>Success confirms an action.</p></div>
+                <div class="alert alert-warning"><strong>Careful.</strong> <p>Warnings flag risky ground.</p></div>
+                <div class="alert alert-danger"><strong>Failed.</strong> <p>Dangers own the failure case.</p></div>
+                <div class="cluster">
+                    <span class="badge">.badge</span>
+                    <span class="badge badge-info">info</span>
+                    <span class="badge badge-success">success</span>
+                    <span class="badge badge-warning">warning</span>
+                    <span class="badge badge-danger">danger</span>
+                    <span class="badge badge-muted">muted</span>
+                </div>
+            </div>
+        </section>
+
+        <section id="tabs" class="tabs card">
+            <!-- Tabs contract: radios first as direct children, then .tab-list
+                 labels, then .tab-panels — one each, in order. -->
+            <input type="radio" name="tour" id="tab-a" checked>
+            <input type="radio" name="tour" id="tab-b">
+            <input type="radio" name="tour" id="tab-c">
+            <div class="tab-list">
+                <label for="tab-a">Overview</label>
+                <label for="tab-b">Tokens</label>
+                <label for="tab-c">Themes</label>
+            </div>
+            <div class="tab-panels">
+                <div>
+                    <p>Tabs are CSS-only: radios, labels and panels. No JavaScript, no
+                        ARIA wiring — the labels are clickable and the inputs focusable.</p>
+                </div>
+                <div>
+                    <p>Every visual decision is a <code>--spry-*</code> custom property.
+                        Apps style themselves with the tokens, and themes plus dark mode
+                        follow along with zero extra rules.</p>
+                </div>
+                <div>
+                    <p>Themes activate with <code>&lt;html data-theme="dwarf"&gt;</code>, or the
+                        <code>#spry-theme-*</code> radio hooks this page uses — same sheet,
+                        no duplicates.</p>
+                </div>
+            </div>
+        </section>
+
+        <section id="details" class="card">
+            <h2>Expanders</h2>
+            <p class="mb-3">Native <code>&lt;details&gt;</code> with styled summaries;
+                <code>.expander-group</code> fuses siblings into one accordion-shaped block.</p>
+            <details>
+                <summary>Why no JavaScript?</summary>
+                <p>Everything on this page — menus, tabs, drawers, this expander — is HTML
+                    and CSS. The one exception is <code>showModal()</code> on the dialog
+                    button, which is the native API for the job.</p>
+            </details>
+            <div class="expander-group">
+                <details>
+                    <summary>How do I opt out of card padding?</summary>
+                    <p><code>.p-0</code> through <code>.p-5</code> and the per-side variants
+                        override the default — the padding rules sit at zero specificity on
+                        purpose.</p>
+                </details>
+                <details open>
+                    <summary>How do themes switch without JavaScript?</summary>
+                    <p>Each theme scopes itself to <code>html:has(#spry-theme-slug:checked)</code>
+                        as well as <code>[data-theme]</code>; the switcher in the topbar just
+                        checks those radios.</p>
+                </details>
+                <details>
+                    <summary>What about reduced motion?</summary>
+                    <p>The core collapses every animation and transition under
+                        <code>prefers-reduced-motion</code>, dialogs included.</p>
+                </details>
+            </div>
+        </section>
+
+        <section id="overlays" class="card">
+            <h2>Dialogs, popovers &amp; drawers</h2>
+            <p class="mb-3">All share one open/close animation driven by
+                <code>--spry-dialog-*</code>. Pick <strong>Airy</strong> above to feel its
+                Windows&nbsp;7 glide-in: 180&nbsp;ms, scale 0.92 to 1, opacity 0 to 1, cubic
+                ease-out — anchored menus also rise from their trigger.</p>
+            <div class="cluster">
+                <button class="btn btn-primary" onclick="dlgTitlebar.showModal()">Modal dialog</button>
+                <button class="btn" onclick="dlgPlain.showModal()">Bare dialog</button>
+                <button class="btn" popovertarget="pop-win">Popover window</button>
+                <button class="btn anchor" style="--anchor-name: --demo-menu" popovertarget="pop-menu">Anchored menu ▾</button>
+                <button class="btn" popovertarget="drawer-demo">Drawer</button>
+            </div>
+
+            <dialog id="dlg-titlebar">
+                <div class="dialog-titlebar">
+                    <span class="dialog-title">Sign out everywhere?</span>
+                    <form method="dialog"><button class="dialog-close" aria-label="Close">✕</button></form>
+                </div>
+                <div class="dialog-body">
+                    <p>This ends every other session. You will stay signed in here.</p>
+                </div>
+                <div class="dialog-footer">
+                    <form method="dialog"><button class="btn">Cancel</button></form>
+                    <form method="dialog"><button class="btn btn-danger">Sign out</button></form>
+                </div>
+            </dialog>
+
+            <dialog id="dlg-plain">
+                <div class="stack">
+                    <p class="fw-semibold">A bare dialog</p>
+                    <p>No titlebar, no <code>.dialog-body</code> — so the dialog pads itself
+                        with <code>--spry-popover-padding</code> and this text is not glued
+                        to the frame.</p>
+                    <form method="dialog"><button class="btn">Close</button></form>
+                </div>
+            </dialog>
+
+            <div popover id="pop-win">
+                <div class="dialog-titlebar">
+                    <span class="dialog-title">Popover window</span>
+                    <button class="dialog-close" popovertarget="pop-win" aria-label="Close">✕</button>
+                </div>
+                <div class="dialog-body">
+                    <p>Dialog-like windows need no JavaScript either: any element with the
+                        <code>popover</code> attribute opens from a
+                        <code>popovertarget</code> button and light-dismisses.</p>
+                </div>
+            </div>
+
+            <div popover id="pop-menu" class="popover-anchor popover-menu" style="--anchor-name: --demo-menu">
+                <a href="#overlays">Open</a>
+                <a href="#overlays">Duplicate</a>
+                <a href="#overlays">Archive…</a>
+                <a href="#overlays">Delete…</a>
+            </div>
+
+            <div popover id="drawer-demo" class="drawer-right">
+                <div class="dialog-titlebar">
+                    <span class="dialog-title">Project settings</span>
+                    <button class="dialog-close" popovertarget="drawer-demo" aria-label="Close">✕</button>
+                </div>
+                <div class="dialog-body stack">
+                    <p>Drawers dock to an edge and slide — docked panels, not windows, so
+                        they keep the core slide instead of the dialog zoom.</p>
+                    <label class="switch"><input type="checkbox" checked><span class="track"></span> Auto-save</label>
+                </div>
+                <div class="dialog-footer">
+                    <button class="btn" popovertarget="drawer-demo">Close</button>
+                </div>
+            </div>
+        </section>
+
+        <section id="hero" class="card">
+            <h2>Hero, avatars &amp; pagination</h2>
+            <div class="hero hero-compact mt-3">
+                <span class="hero-eyebrow">Spry 0.3</span>
+                <h3 class="hero-title">A CSS framework that respects your markup</h3>
+                <p class="hero-sub">Utilities and components over bare tags, tokens over
+                    hard-coded colour, and no JavaScript anywhere it is not native.</p>
+                <div class="hero-actions">
+                    <button class="btn btn-primary">Get started</button>
+                    <button class="btn">Read the source</button>
+                </div>
+            </div>
+            <div class="cluster mt-3">
+                <span class="avatar avatar-sm">A</span>
+                <span class="avatar">TL</span>
+                <span class="avatar avatar-lg">SPR</span>
+                <span class="avatar-group">
+                    <span class="avatar">A</span>
+                    <span class="avatar">B</span>
+                    <span class="avatar">C</span>
+                    <span class="avatar">+4</span>
+                </span>
+            </div>
+            <nav aria-label="Pages" class="mt-3">
+                <ul class="pagination">
+                    <li><a href="#hero" aria-disabled="true">‹</a></li>
+                    <li><a href="#hero">1</a></li>
+                    <li><a href="#hero" aria-current="page">2</a></li>
+                    <li><a href="#hero">3</a></li>
+                    <li><span>…</span></li>
+                    <li><a href="#hero">9</a></li>
+                    <li><a href="#hero">›</a></li>
+                </ul>
+            </nav>
+        </section>
+
+        <section id="feedback" class="card">
+            <h2>Progress, meters &amp; spinners</h2>
+            <div class="stack mt-3">
+                <label>
+                    <span class="label">Uploading photos — 64%</span>
+                    <progress value="64" max="100"></progress>
+                </label>
+                <label>
+                    <span class="label">Thin variant, indeterminate work</span>
+                    <progress class="progress-thin"></progress>
+                </label>
+                <label>
+                    <span class="label">Disk use</span>
+                    <meter value="6.4" min="0" max="16">6.4 of 16 GB</meter>
+                </label>
+                <div class="cluster">
+                    <span class="spinner spinner-sm" role="status" aria-label="Loading"></span>
+                    <span class="spinner" role="status" aria-label="Loading"></span>
+                    <span class="spinner spinner-lg" role="status" aria-label="Loading"></span>
+                </div>
+            </div>
+        </section>
+
+        <section id="utils" class="card">
+            <h2>Utilities</h2>
+            <p class="mb-3">Layout primitives carry the page: this tour is a
+                <code>.container</code> of <code>.stack</code>ed sections, and the example
+                below is a <code>.with-sidebar</code> with a <code>.menu</code> and a
+                <code>.grid</code>.</p>
+            <div class="with-sidebar">
+                <aside>
+                    <ul class="menu">
+                        <li><a class="active" href="#utils">Overview</a></li>
+                        <li><a href="#utils">Activity</a></li>
+                        <li class="has-submenu">
+                            <a href="#utils">Settings</a>
+                            <ul class="submenu">
+                                <li><a href="#utils">General</a></li>
+                                <li><a href="#utils">Security</a></li>
+                            </ul>
+                        </li>
+                    </ul>
+                </aside>
+                <div class="stack">
+                    <div class="grid grid-sm">
+                        <div class="card card-flat"><p class="fw-semibold">.stack</p><p class="text-muted small">Vertical rhythm with a gap</p></div>
+                        <div class="card card-flat"><p class="fw-semibold">.cluster</p><p class="text-muted small">Wrapping row of chips</p></div>
+                        <div class="card card-flat"><p class="fw-semibold">.grid</p><p class="text-muted small">Auto-fit columns</p></div>
+                        <div class="card card-flat"><p class="fw-semibold">.with-sidebar</p><p class="text-muted small">This layout, in fact</p></div>
+                    </div>
+                    <div>
+                        <p class="text-muted">Text utilities: <span class="text-danger">danger</span>,
+                            <span class="text-success">success</span>,
+                            <span class="fw-bold">bold</span>,
+                            <span class="mono">mono 0x1F</span>,
+                            <span class="num">1234.5</span>.</p>
+                        <p class="measure-sm text-muted">Measure utilities cap the line length —
+                            this paragraph is <code>.measure-sm</code> (45ch), which keeps
+                            reference text readable inside wide containers.</p>
+                    </div>
+                    <ul class="breadcrumb">
+                        <li><a href="#">Spry</a></li>
+                        <li><a href="#">CSS</a></li>
+                        <li><span aria-current="page">Live tour</span></li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
+    </main>
+
+    <footer class="container py-4 text-muted small">
+        Spry CSS — core in <span class="mono">spry.css</span>, themes in
+        <span class="mono">themes/</span>. This page is plain HTML: view source, switch
+        themes, resize the window.
+    </footer>
+</body>
+</html>

+ 13 - 3
css/themes/spry-theme-formal.css

@@ -102,12 +102,22 @@ html:has(#spry-theme-formal:checked) {
     font-variant-caps: all-small-caps; letter-spacing: 0.08em;
     text-shadow: 0 1px 0 #fff;
   }
-  & h2 { font-size: 2em; }       /* the site's h2 scale */
-  & h1 {
+  /* :where() keeps these at (0,1,0) — sibling themes use the same idiom —
+     so container-scoped scales in the core (.prose h1, .prose h2) still
+     win by load order instead of losing to a full (0,1,1) match. The size
+     rules additionally opt out of .prose: the radio switcher route
+     (html:has(#spry-theme-formal:checked)) carries an ID of specificity
+     that would otherwise flatten the core's document scale even through
+     :where(). */
+  & :where(h2:not(.prose *)) { font-size: 2em; }       /* the site's h2 scale */
+  & :where(h1) {
     font-family: var(--spry-font-display); font-weight: 400;
-    font-size: clamp(2.3rem, 1.7rem + 2.4vw, 3.3rem); line-height: 1.25;
+    line-height: 1.25;
     color: var(--spry-accent); text-shadow: 0 1px 0 #fff;
   }
+  & :where(h1:not(.prose *)) {
+    font-size: clamp(2.3rem, 1.7rem + 2.4vw, 3.3rem);
+  }
   & h6 { letter-spacing: 0.12em; text-shadow: 0 1px 0 #fff; }
 
   /* A card that opens on its title is a hero moment — script it */