Starter structures for generated pages.

<main class="loam-shell loam-main">
  <section class="loam-layout loam-layout--plan">
    <article class="loam-content loam-prose">
      <p class="loam-kicker">Implementation plan</p>
      <h1>Plan title</h1>
      <p class="loam-lead">One paragraph summary.</p>
      <section id="changes"><h2>Key changes</h2></section>
      <section id="tests"><h2>Test plan</h2></section>
    </article>
    <aside class="loam-sidebar">
      <nav class="loam-toc" data-loam-toc>
        <p class="loam-toc__title">Contents</p>
        <a href="#changes">Key changes</a>
        <a href="#tests">Test plan</a>
      </nav>
    </aside>
  </section>
</main>

<main class="loam-shell loam-main">
  <section class="loam-layout loam-layout--status">
    <article class="loam-content loam-prose">
      <p class="loam-kicker">Status report</p>
      <h1>Project or rollout status</h1>
      <p class="loam-lead">Lead with the current state, whether action is needed, and what changed since the last update.</p>

      <div class="loam-cluster" aria-label="Status summary">
        <span class="loam-status loam-status--green">On track</span>
        <span class="loam-badge loam-badge--blue">Week 4</span>
        <span class="loam-badge loam-badge--yellow">Needs review</span>
      </div>

      <section id="snapshot">
        <h2>Snapshot</h2>
        <div class="loam-metrics">
          <div class="loam-metric"><span class="loam-metric__value">82%</span><span class="loam-metric__label">Complete</span></div>
          <div class="loam-metric"><span class="loam-metric__value">3</span><span class="loam-metric__label">Open risks</span></div>
          <div class="loam-metric"><span class="loam-metric__value">Fri</span><span class="loam-metric__label">Next checkpoint</span></div>
        </div>
      </section>

      <section id="changes">
        <h2>What changed</h2>
        <ul class="loam-checklist">
          <li><input type="checkbox" checked aria-label="Completed migration dry run"><div class="loam-task__body"><p class="loam-task__title">Completed migration dry run</p><p class="loam-task__meta">Owner: platform. Evidence: PR linked below.</p></div></li>
          <li><input type="checkbox" aria-label="Finish rollout validation"><div class="loam-task__body"><p class="loam-task__title">Finish rollout validation</p><p class="loam-task__meta">Owner: release. Due: Friday.</p></div></li>
        </ul>
      </section>

      <section id="risks">
        <h2>Risks and decisions</h2>
        <div class="loam-callout loam-callout--risk">
          <span class="loam-callout__icon" aria-hidden="true">
            <svg class="loam-icon"><use href="/dist/loam-icons.svg#loam-icon-risk"></use></svg>
          </span>
          <div>
            <p class="loam-callout__title">Risk</p>
            <p>Name the risk, its current impact, owner, and mitigation.</p>
          </div>
        </div>
      </section>

      <section id="next">
        <h2>Next checkpoints</h2>
        <div class="loam-timeline">
          <div class="loam-timeline__item">
            <time class="loam-timeline__time">Today</time>
            <div class="loam-timeline__body"><p class="loam-timeline__title">Share current readout</p><p class="loam-timeline__meta">Audience: engineering leads.</p></div>
          </div>
          <div class="loam-timeline__item">
            <time class="loam-timeline__time">Friday</time>
            <div class="loam-timeline__body"><p class="loam-timeline__title">Confirm release readiness</p><p class="loam-timeline__meta">Output: go or hold decision.</p></div>
          </div>
        </div>
      </section>
    </article>
  </section>
</main>

<section class="loam-layout loam-layout--explainer">
  <article class="loam-content loam-prose">
    <p class="loam-kicker">Technical explainer</p>
    <h1>How the system works</h1>
    <p class="loam-lead">Explain the concept before the diagram.</p>
  </article>
  <aside class="loam-sidebar">
    <figure class="loam-diagram">
      <figcaption>
        <span>System flow</span>
        <button class="loam-diagram__action" type="button" data-loam-diagram-expand>Expand</button>
      </figcaption>
      ...inline SVG...
    </figure>
  </aside>
</section>