Editorial article

<div class="thin-page-shell">
  <header class="thin-container">
    <nav class="thin-breadcrumbs" aria-label="Breadcrumbs">
      <ol>
        <li><a href="/">Home</a></li>
        <li><a href="/notes/">Field notes</a></li>
        <li aria-current="page">Designing for content</li>
      </ol>
    </nav>
  </header>
  <div class="thin-sticky-sidebar">
    <aside aria-labelledby="article-contents">
      <nav class="thin-table-of-contents" aria-labelledby="article-contents">
        <h2 id="article-contents">On this page</h2>
        <ol>
          <li><a href="#overview" aria-current="location">Overview</a></li>
          <li><a href="#measure">Measure and rhythm</a></li>
          <li><a href="#series">Series navigation</a></li>
        </ol>
      </nav>
    </aside>
    <main id="content">
      <article class="thin-prose" aria-labelledby="article-title">
        <header>
          <p>
            <span class="thin-icon">
              <svg class="thin-icon" aria-hidden="true">
                <use href="/icons/sprite.svg#user">
                </use>
              </svg>
              <span>Ryan Baird</span>
            </span> · <time datetime="2026-08-01">August 1, 2026</time> · <span>8 min read</span>
          </p>
          <h1 id="article-title">Designing for content that refuses to be tidy</h1>
        </header>
        <p class="thin-lede">Editorial pages compose existing page-shell, prose, table-of-contents, and breadcrumb patterns. The server owns metadata, series links, and reading order.</p>
        <h2 id="overview">Overview</h2>
        <p>Start with semantic HTML, then add layout and prose skins when CSS is available.</p>
        <h2 id="measure">Measure and rhythm</h2>
        <p>Use <code>class="thin-flow"</code> inside prose sections when lists and paragraphs must keep block formatting context.</p>
        <section id="series" aria-labelledby="series-heading">
          <h2 id="series-heading">Series navigation</h2>
          <nav aria-label="Series">
            <ul class="thin-cluster">
              <li><a href="/notes/01/">← Previous</a></li>
              <li><a href="/notes/">All notes</a></li>
              <li><a href="/notes/03/">Next →</a></li>
            </ul>
          </nav>
        </section>
      </article>
    </main>
  </div>
  <footer class="thin-container">
    <p>Independent footer content</p>
  </footer>
</div>