anchor.diff:      main.o-GoldenContainer__Content
         h1 Typographical Components
         p These are components of a typographical, static nature.
  -      section#c-Subhead.
  -        <h2>The <code>.c-Subhead</code> Component</h2>
  -        <p>Put a <code>.c-Subhead</code> sibling adjacent to a heading to create
  +      section#c-Subhead
  +        h2 The <code>.c-Subhead</code> Component
  +        p.
  +          Put a <code>.c-Subhead</code> sibling adjacent to a heading to create
             a subheading for a page. This can be thought of as a
  -          <i>tagline</i> or <i>subtitle</i> for the top-level heading.</p>
  -          <figure>
  -            <section>
  -              <h1>This is a Page Title</h1>
  -              <p class="c-Subhead">This is a subtitle.</p>
  -            </section>
  -          </figure>
  -          <p>Notice the differences between the title and subtitle. The title is in a sans-serif,
  -            monoweight type, in bold and small caps, which provides a very rigid and blocky look. The dark
  -            blue color itself contrasts the font and gives the title a cool and calming appearance. In
  -            great contrast, the subtitle is in a script italic type with a dramatic thick/thin transition,
  -            which looks fragile and dainty. The warmer color, however, gives it a strong pop.</p>
  -      section#c-FolioTitle.
  -        <h2>The <code>.c-FolioTitle</code> Component</h2>
  -        <p>On special pages, the top-level header may be a <code>.c-FolioTitle</code>. To add a little spice,
  -          use <code>.c-FolioTitle__Cap</code> on capital letters. The size will make them stand out.</p>
  -        <figure>
  -          <section>
  -            <h1 class="c-FolioTitle"><span class="c-FolioTitle__Cap">T</span>his is a <span class="c-FolioTitle__Cap">s</span>pecial page title.</h1>
  -          </section>
  -        </figure>
  +          <i>tagline</i> or <i>subtitle</i> for the top-level heading.
  +        figure
  +          h1 This is a Page Title
  +          p.c-Subhead This is a subtitle.
  +        p.
  +          Notice the differences between the title and subtitle. The title is in a sans-serif,
  +          monoweight type, in bold and small caps, which provides a very rigid and blocky look. The dark
  +          blue color itself contrasts the font and gives the title a cool and calming appearance. In
  +          great contrast, the subtitle is in a script italic type with a dramatic thick/thin transition,
  +          which looks fragile and dainty. The warmer color, however, gives it a strong pop.
  +      section#c-FolioTitle
  +        h2 The <code>.c-FolioTitle</code> Component
  +        p.
  +          On special pages, the top-level header may be a <code>.c-FolioTitle</code>. To add a little spice,
  +          use <code>.c-FolioTitle__Cap</code> on capital letters. The size will make them stand out.
  +        figure
  +          h1.c-FolioTitle #[span.c-FolioTitle__Cap T]his is a #[span.c-FolioTitle__Cap s]pecial page title.
         section
  -        table.c-TableBorderedRows(class="!w:1o1 !ta:c !bc:w").
  -          <thead>
  -            <tr>
  -              <th class="o-Box">Heading Level</th>
  -              <th class="o-Box"><code>font-style</code></th>
  -              <th class="o-Box"><code>font-variant</code></th>
  -              <th class="o-Box"><code>font-weight</code></th>
  -              <th class="o-Box"><code>font-size</code></th>
  -              <th class="o-Box"><code>color</code></th>
  -            </tr>
  -          </thead>
  -          <tbody>
  -            <tr>
  -              <th class="o-Box"><code>.c-Subhead</code></th>
  -              <td data-bool="1"><code>normal</code>
  -                <sup><a class="Rf" id="rf-hsubfontstyle" rel="this" href="#fn-hsubfontstyle">4</a></sup></td>
  -              <td data-bool="0"><code>normal</code></td>
  -              <td data-bool="0"><code>normal</code></td>
  -              <td data-bool="1"><code>2.0000rem</code></td>
  -              <td data-bool="1"><code>@color_accent</code></td>
  -            </tr>
  -            <tr>
  -              <th class="o-Box"><code>.c-FolioTitle</code></th>
  -              <td data-bool="1"><code>normal</code>
  -                <sup><a class="Rf" id="rf-hfoliofontstyle" rel="this" href="#fn-hfoliofontstyle">5</a></sup></td>
  -              <td data-bool="0"><code>normal</code></td>
  -              <td data-bool="0"><code>normal</code></td>
  -              <td data-bool="1"><code>3.0000rem</code>
  -                <sup><a class="Rf" id="rf-hfoliofontsize" rel="this" href="#fn-hfoliofontsize">6</a></sup></td>
  -              <td data-bool="1"><code>@color_h_major</code></td>
  -            </tr>
  -          </tbody>
  -        footer.
  -          <ul class="c-ListFootnotes">
  -            <li>
  +        table.c-TableBorderedRows(class="!w:1o1 !ta:c !bc:w")
  +          thead
  +            tr
  +              th.o-Box Heading Level
  +              th.o-Box <code>font-style</code>
  +              th.o-Box <code>font-variant</code>
  +              th.o-Box <code>font-weight</code>
  +              th.o-Box <code>font-size</code>
  +              th.o-Box <code>color</code>
  +          tbody
  +            tr
  +              th(class="o-Box") <code>.c-Subhead</code>
  +              td(data-bool="1") <code>normal</code><sup><a class="Rf" id="rf-hsubfontstyle" rel="this" href="#fn-hsubfontstyle">4</a></sup>
  +              td(data-bool="0") <code>normal</code>
  +              td(data-bool="0") <code>normal</code>
  +              td(data-bool="1") <code>2.0000rem</code>
  +              td(data-bool="1") <code>@color_accent</code>
  +            tr
  +              th(class="o-Box") <code>.c-FolioTitle</code>
  +              td(data-bool="1") <code>normal</code><sup><a class="Rf" id="rf-hfoliofontstyle" rel="this" href="#fn-hfoliofontstyle">5</a></sup>
  +              td(data-bool="0") <code>normal</code>
  +              td(data-bool="0") <code>normal</code>
  +              td(data-bool="1") <code>3.0000rem</code><sup><a class="Rf" id="rf-hfoliofontsize" rel="this" href="#fn-hfoliofontsize">6</a></sup>
  +              td(data-bool="1") <code>@color_h_major</code>
  +        footer
  +          ul.c-ListFootnotes
  +            li.
                 <sup><a class="Fn" id="fn-hsubfontstyle" rel="this" href="#rf-hsubfontstyle">4</a>
                   <a class="Fn" id="fn-hfoliofontstyle" rel="this" href="#rf-hfoliofontstyle">5</a></sup>
                 The <code>.c-Subhead</code> and <code>.c-FolioTitle</code> Elements do not have <code>font-style: italic;</code>
                 specified but is automatically italicized by the nature of the typeface.
  -            </li>
  -            <li>
  +            li.
                 <sup><a class="Fn" id="fn-hfoliofontsize" rel="this" href="#rf-hfoliofontsize">6</a></sup>
                 Font size is adjusted with JavaScript to fit entire heading on one line.
  -            </li>
  -          </ul>
  -      section#c-Lede.
  -        <h2>The <code>.c-Lede</code> Component</h2>
  -        <figure>
  -        <p class="c-Lede">A <code>.c-Lede</code> represents a <i>lede</i> paragraph (also
  -          referred to as a <i>standfirst</i> in the <abbr class="c-Acro" title="United Kingdom">UK</abbr>).
  -          The rest of the paragraph is text.
  -          The rest of the paragraph is text.
  -          The rest of the paragraph is text.
  -          The rest of the paragraph is text.
  -          The rest of the paragraph is text.</p>
  -        <p class="c-Lede  c-Lede--dropcap">Dropped capitals (<i>drop caps</i>) can be used for pure aesthetics
  -          in the first (and usually, only) lede paragraph. This is a <code>.c-Lede.c-Lede--dropcap</code>.
  -          Notice how the drop cap font complements the lede paragraph font.
  -          The rest of the paragraph is text.
  -          The rest of the paragraph is text.
  -          The rest of the paragraph is text.
  -          The rest of the paragraph is text.
  -          The rest of the paragraph is text.</p>
  -          <p><span class="c-Dropcap">You can also</span> manually use <code>.c-Dropcap</code> on
  -            the first <span class="M">n</span> characters of an element to provide the drop cap effect.
  +      section#c-Lede
  +        h2 The <code>.c-Lede</code> Component
  +        figure
  +          p.c-Lede.
  +            A <code>.c-Lede</code> represents a <i>lede</i> paragraph (also
  +            referred to as a <i>standfirst</i> in the <abbr class="c-Acro" title="United Kingdom">UK</abbr>).
  +            The rest of the paragraph is text.
  +            The rest of the paragraph is text.
  +            The rest of the paragraph is text.
  +            The rest of the paragraph is text.
  +            The rest of the paragraph is text.</p>
  +          p.c-Lede.c-Lede--dropcap.
  +            Dropped capitals (<i>drop caps</i>) can be used for pure aesthetics
  +            in the first (and usually, only) lede paragraph. This is a <code>.c-Lede.c-Lede--dropcap</code>.
  +            Notice how the drop cap font complements the lede paragraph font.
  +            The rest of the paragraph is text.
  +            The rest of the paragraph is text.
  +            The rest of the paragraph is text.
  +            The rest of the paragraph is text.
  +            The rest of the paragraph is text.</p>
  +          p.
  +            <span class="c-Dropcap"> You can also</span>
  +            manually use <code>.c-Dropcap</code> on
  +            the first few characters of an element to provide the drop cap effect.
               It need not be related to the Lede Component.
               The rest of the paragraph is text.
               The rest of the paragraph is text.
               The rest of the paragraph is text.
               The rest of the paragraph is text.
               The rest of the paragraph is text.</p>
  -        </figure>
  -      section#c-Caption.
  -        <h2>The <code>.c-Caption</code> Component</h2>
  -        <figure>
  -        <p class="c-Caption">This is a <code>.c-Caption</code>. It may be a table caption, a figure caption,
  -          or simply just a paragraph following an arbitrary Element.</p>
  -        <figure>
  -          <figcaption class="c-Caption c-Caption--before">.c-Caption.c-Caption--before</figcaption>
  -          The rest of the figure text.
  -          The rest of the figure text.
  -          The rest of the figure text.
  -          The rest of the figure text.
  -          The rest of the figure text.
  -        </figure>
  -        <figure>
  -          The rest of the figure text.
  -          The rest of the figure text.
  -          The rest of the figure text.
  -          The rest of the figure text.
  -          The rest of the figure text.
  -          <figcaption class="c-Caption c-Caption--after" >.c-Caption.c-Caption--after</figcaption>
  -        </figure>
  -        </figure>
  -      section.c-Document__Draft.u-bgc_aperture_white.
  -        <h2>crossgrid-lined</h2>
  -        <figure class="crossgrid-lined">
  -          <p>Some figures contain text and/or paragraphs.
  -            The optional class <code>.crossgrid-lined</code> is added.</p>
  -          <p>This <code>figure.crossgrid-lined</code> contains optional <code>p</code> Elements.</p>
  -          <p>This is another <code>figure.crossgrid-lined &gt; p</code>.</p>
  -        </figure>
  -        <blockquote class="crossgrid-lined">
  -          <p>Use <code>blockquote.crossgrid-lined</code> for an added background image.
  -            This is the rest of the text.</p>
  -          <p>
  -            This is the rest of the text.
  -            This is the rest of the text.
  -            This is the rest of the text.
  -            This is the rest of the text.
  -          </p>
  -        </blockquote>
  -      section#c-Pullquote.
  -        <h2>The <code>.c-Pullquote</code> Component</h2>
  -        <p class="o-Box  o-Box--island  c-Alert  c-Alert--cshn">
  +      section#c-Caption
  +        h2 The <code>.c-Caption</code> Component
  +        figure
  +          p.c-Caption.
  +            This is a <code>.c-Caption</code>. It may be a table caption, a figure caption,
  +            or simply just a paragraph following an arbitrary Element.
  +          figure.
  +            #[figcaption.c-Caption.c-Caption--before Use `.c-Caption.c-Caption--before` for a caption that precedes an element.]
  +            The rest of the figure text.
  +            The rest of the figure text.
  +            The rest of the figure text.
  +            The rest of the figure text.
  +            The rest of the figure text.
  +          figure.
  +            The rest of the figure text.
  +            The rest of the figure text.
  +            The rest of the figure text.
  +            The rest of the figure text.
  +            The rest of the figure text.
  +            #[figcaption.c-Caption.c-Caption--after  Use `.c-Caption.c-Caption--after` for a caption that follows an element.]
  +      section.c-Document__Draft.u-bgc_aperture_white
  +        h2 crossgrid-lined
  +        figure.crossgrid-lined
  +          p Some figures contain text and/or paragraphs. The optional class <code>.crossgrid-lined</code> is added.
  +          p This <code>figure.crossgrid-lined</code> contains optional <code>p</code> Elements.
  +          p This is another <code>figure.crossgrid-lined &gt; p</code>.
  +        blockquote.crossgrid-lined
  +          p.
  +            Use <code>blockquote.crossgrid-lined</code> for an added background image.
  +            This is the rest of the text.
  +          p.
  +            This is the rest of the text.
  +            This is the rest of the text.
  +            This is the rest of the text.
  +            This is the rest of the text.
  +      section#c-Pullquote
  +        h2 The <code>.c-Pullquote</code> Component
  +        p.o-Box.o-Box--island.c-Alert.c-Alert--cshn.
             <strong class="c-Alert__Title">Note:</strong>
  -          This component belongs in <strong>helpers</strong>.</p>
  -        <p>A <code>.c-Pullquote</code> tends to have a stronger effect than generic <code>blockquote</code> Elements.
  +          This component belongs in <strong>helpers</strong>.
  +        p.
  +          A <code>.c-Pullquote</code> tends to have a stronger effect than generic <code>blockquote</code> Elements.
             Use it when the original source is less than 40 words and contains no paragraph breaks.
             Do not include child <code>p</code> Elements. To cite the source, add a child
  -          <code>.c-Pullquote__Src</code> Component.</p>
  -        <figure>
  -        <blockquote class="c-Pullquote" cite="http://www.imdb.com/title/tt1648163/quotes">
  -          Look at you, soaring through the air like an eagle&hellip; piloting a blimp.
  -          <cite class="c-Pullquote__Src"><abbr title="Genetic Lifeform and Disk Operating System">GLaDOS</abbr></cite>
  -        </blockquote>
  -        </figure>
  -      section#c-ListAction.
  -        <h2>The <code>.c-ListAction</code> Component</h2>
  -        <p>The following is a <code>.c-ListAction</code>. Action lists are used
  -          specifically for short, one-line, textual hyperlinks.</p>
  -        <figure>
  -        <ul class="c-ListAction">
  -          <li class="c-ListAction__Item">                                                 .c-ListAction &gt; .c-ListAction__Item</li>
  -          <li class="c-ListAction__Item"><a>                                              .c-ListAction &gt; .c-ListAction__Item &gt; a</a></li>
  -          <li class="c-ListAction__Item"><a href="#lists">                                .c-ListAction &gt; .c-ListAction__Item &gt; a[href]</a></li>
  -          <li class="c-ListAction__Item"><a rel="external">                               .c-ListAction &gt; .c-ListAction__Item &gt; a[rel=&quot;external&quot;]</a></li>
  -          <li class="c-ListAction__Item"><a href="http://www.example.com/" rel="external">.c-ListAction &gt; .c-ListAction__Item &gt; a[href][rel=&quot;external&quot;]</a></li>
  -        </ul>
  -        </figure>
  -      section#c-ListFootnotes.
  -        <h2>The <code>.c-ListFootnotes</code> Component</h2>
  -        <p>In the <code>footer</code> of a document or section, insert a <code>.c-ListFootnotes</code>
  +          <code>.c-Pullquote__Src</code> Component.
  +        figure
  +          blockquote.c-Pullquote(cite="http://www.imdb.com/title/tt1648163/quotes").
  +            Look at you, soaring through the air like an eagle&hellip; piloting a blimp.
  +            <cite class="c-Pullquote__Src"><abbr title="Genetic Lifeform and Disk Operating System">GLaDOS</abbr></cite>
  +      section#c-ListAction
  +        h2 The <code>.c-ListAction</code> Component
  +        p.
  +          The following is a <code>.c-ListAction</code>. Action lists are used
  +          specifically for short, one-line, textual hyperlinks.
  +        figure
  +          ul.c-ListAction
  +            li.c-ListAction__Item                                                  .c-ListAction &gt; .c-ListAction__Item</li>
  +            li.c-ListAction__Item <a>                                              .c-ListAction &gt; .c-ListAction__Item &gt; a</a></li>
  +            li.c-ListAction__Item <a href="#lists">                                .c-ListAction &gt; .c-ListAction__Item &gt; a[href]</a></li>
  +            li.c-ListAction__Item <a rel="external">                               .c-ListAction &gt; .c-ListAction__Item &gt; a[rel=&quot;external&quot;]</a></li>
  +            li.c-ListAction__Item <a href="http://www.example.com/" rel="external">.c-ListAction &gt; .c-ListAction__Item &gt; a[href][rel=&quot;external&quot;]</a></li>
  +      section#c-ListFootnotes
  +        h2 The <code>.c-ListFootnotes</code> Component
  +        p.
  +          In the <code>footer</code> of a document or section, insert a <code>.c-ListFootnotes</code>
             for a Footnotes List Component.
             Read <a rel="external" href="https://github.com/chharvey/chharvey.github.io/wiki/Footnotes">my
  -          technical report on footnotes</a> for more information.</p>
  -        <figure>
  -          <p>Conversion gel is made with moon rocks.<sup><a class="Rf" id="rf-rocks" rel="this" href="#fn-rocks">1</a></sup>
  -            Some panels are made with conversion gel.<sup><a class="Rf" id="rf-panels" rel="this" href="#fn-panels">2</a></sup></p>
  -          <footer>
  -            <ul class="c-ListFootnotes">
  -              <li>
  +          technical report on footnotes</a> for more information.
  +        figure
  +          p.
  +            Conversion gel is made with moon rocks.<sup><a class="Rf" id="rf-rocks" rel="this" href="#fn-rocks">1</a></sup>
  +            Some panels are made with conversion gel.<sup><a class="Rf" id="rf-panels" rel="this" href="#fn-panels">2</a></sup>
  +          footer
  +            ul.c-ListFootnotes
  +              li.
                   <sup><a class="Fn" id="fn-rocks" rel="this" href="#rf-rocks">1</a>
                     <a class="Fn" id="fn-panels" rel="this" href="#rf-panels">2</a></sup>
                   Don&rsquo;t breathe in moon rocks; they will give you lung cancer.
                   This footnote contains a lot of text that goes on and on forever and ever until at some
                   point it reaches the next line.
  -              </li>
  -              <li>
  +              li.
                   <sup><a class="Fn" href="#">3</a></sup>
                   Another empty footnote. A footnote may include a citation, work cited, or simply a
                   parenthetical remark.
  -              </li>
  -            </ul>
  -          </footer>
  -        </figure>
  -      section#c-Table.u-bgc_aperture_white.
  -        <h2>The <code>.c-Table<span class="!va:st">*</span></code> Family of Components</h2>
  -        <p>Use the following Components for extra styles on <code>table</code> and <code>dl</code> Elements.</p>
  -        <form>
  -          <fieldset id="c-Table" style="margin-bottom:1.5rem;">
  -            <dl class="o-FlexContainer  !mb:0">
  -              <dt class="u-w_p2">
  -                <label>
  -                  <input type="checkbox" id="check-tb" name="tb" value="c-TableBordered"/>
  -                  <code>.c-TableBordered</code>
  -                </label>
  -              </dt>
  -              <dd class="u-w_p2c">border around the entire table</dd>
  -              <dt class="u-w_p2">
  -                <label>
  -                  <input type="checkbox" id="check-tbr" name="tbr" value="c-TableBorderedRows"/>
  -                  <code>.c-TableBorderedRows</code>
  -                </label>
  -              </dt>
  -              <dd class="u-w_p2c">borders in between rows</dd>
  -              <dt class="u-w_p2">
  -                <label>
  -                  <input type="checkbox" id="check-tbc" name="tbc" value="c-TableBorderedCols"/>
  -                  <code>.c-TableBorderedCols</code>
  -                </label>
  -              </dt>
  -              <dd class="u-w_p2c">borders in between cells in rows</dd>
  -              <dt class="u-w_p2">
  -                <label>
  -                  <input type="checkbox" id="check-ts" name="ts" value="c-TableShaded"/>
  -                  <code>.c-TableShaded</code>
  -                </label>
  -              </dt>
  -              <dd class="u-w_p2c">background shading to the entire table</dd>
  -              <dt class="u-w_p2">
  -                <label>
  -                  <input type="checkbox" id="check-tsr" name="tsr" value="c-TableShadedRows"/>
  -                  <code>.c-TableShadedRows</code>
  -                </label>
  -              </dt>
  -              <dd class="u-w_p2c">background shading to alternating rows</dd>
  -              <dt class="u-w_p2">
  -                <label>
  -                  <input type="checkbox" id="check-tsc" name="tsc" value="c-TableShadedCols"/>
  -                  <code>.c-TableShadedCols</code>
  -                </label>
  -              </dt>
  -              <dd class="u-w_p2c">background shading to alternating cells in rows</dd>
  -              <dt class="u-w_p2">
  -                <label>
  -                  <input type="checkbox" id="check-th" name="th" value="c-TableHover"/>
  -                  <code>.c-TableHover</code>
  -                </label>
  -              </dt>
  -              <dd class="u-w_p2c">background shading to a row on hover</dd>
  -            </dl>
  -          </fieldset>
  -          <input type="reset" id="reset-tables"/>
  -        </form>
  -        <p class="o-Box  o-Box--island  c-Alert  c-Alert--info">
  +      section#c-Table.u-bgc_aperture_white
  +        h2 The <code>.c-Table<span class="!va:st">*</span></code> Family of Components
  +        p Use the following Components for extra styles on <code>table</code> and <code>dl</code> Elements.
  +        form
  +          fieldset(style="margin-bottom:1.5rem;")
  +            dl.o-FlexContainer(class="!mb:0")
  +              dt.u-w_p2
  +                label
  +                  input(type="checkbox" name="tb" value="c-TableBordered")#check-tb
  +                  code .c-TableBordered
  +              dd.u-w_p2c border around the entire table
  +              dt.u-w_p2
  +                label
  +                  input(type="checkbox" name="tbr" value="c-TableBorderedRows")#check-tbr
  +                  code .c-TableBorderedRows
  +              dd.u-w_p2c borders in between rows
  +              dt.u-w_p2
  +                label
  +                  input(type="checkbox" name="tbc" value="c-TableBorderedCols")#check-tbc
  +                  code .c-TableBorderedCols
  +              dd.u-w_p2c borders in between cells in rows
  +              dt.u-w_p2
  +                label
  +                  input(type="checkbox" name="ts" value="c-TableShaded")#check-ts
  +                  code .c-TableShaded
  +              dd.u-w_p2c background shading to the entire table
  +              dt.u-w_p2
  +                label
  +                  input(type="checkbox" name="tsr" value="c-TableShadedRows")#check-tsr
  +                  code .c-TableShadedRows
  +              dd.u-w_p2c background shading to alternating rows
  +              dt.u-w_p2
  +                label
  +                  input(type="checkbox" name="tsc" value="c-TableShadedCols")#check-tsc
  +                  code .c-TableShadedCols
  +              dd.u-w_p2c background shading to alternating cells in rows
  +              dt.u-w_p2
  +                label
  +                  input(type="checkbox" name="th" value="c-TableHover")#check-th
  +                  code .c-TableHover
  +              dd.u-w_p2c background shading to a row on hover
  +          input#reset-tables(type="reset")
  +        p.o-Box.o-Box--island.c-Alert.c-Alert--info.
             <strong class="c-Alert__Title">Notice:</strong>
             These Components are all independent of each other, that is, the use of one does not require
             another. For example, a table may be classed <code>.c-TableBorderedRows</code> but may not
             necessarily be classed <code>.c-TableBordered</code>.
  -        </p>
  -        <figure>
  -          <table id="tabledemo1">
  -            <thead>
  -              <tr>  <th>thead tr 1 th 1</th>  <th>thead tr 1 th 2</th>  <th>thead tr 1 th 3</th>  <th>thead tr 1 th 4</th>  <th>thead tr 1 th 5</th>  </tr>
  -              <tr>  <td>thead tr 2 td 1</td>  <td>thead tr 2 td 2</td>  <td>thead tr 2 td 3</td>  <td>thead tr 2 td 4</td>  <td>thead tr 2 td 5</td>  </tr>
  -              <tr>  <td>thead tr 3 td 1</td>  <td>thead tr 3 td 2</td>  <td>thead tr 3 td 3</td>  <td>thead tr 3 td 4</td>  <td>thead tr 3 td 5</td>  </tr>
  -              <tr>  <td>thead tr 4 td 1</td>  <td>thead tr 4 td 2</td>  <td>thead tr 4 td 3</td>  <td>thead tr 4 td 4</td>  <td>thead tr 4 td 5</td>  </tr>
  -              <tr>  <td>thead tr 5 td 1</td>  <td>thead tr 5 td 2</td>  <td>thead tr 5 td 3</td>  <td>thead tr 5 td 4</td>  <td>thead tr 5 td 5</td>  </tr>
  -            </thead>
  -            <tfoot>
  -              <tr>  <th>tfoot tr 1 th 1</th>  <th>tfoot tr 1 th 2</th>  <th>tfoot tr 1 th 3</th>  <th>tfoot tr 1 th 4</th>  <th>tfoot tr 1 th 5</th>  </tr>
  -              <tr>  <td>tfoot tr 2 td 1</td>  <td>tfoot tr 2 td 2</td>  <td>tfoot tr 2 td 3</td>  <td>tfoot tr 2 td 4</td>  <td>tfoot tr 2 td 5</td>  </tr>
  -              <tr>  <td>tbody tr 3 td 1</td>  <td>tbody tr 3 td 2</td>  <td>tfoot tr 3 td 3</td>  <td>tfoot tr 3 td 4</td>  <td>tfoot tr 3 td 5</td>  </tr>
  -              <tr>  <td>tbody tr 4 td 1</td>  <td>tbody tr 4 td 2</td>  <td>tfoot tr 4 td 3</td>  <td>tfoot tr 4 td 4</td>  <td>tfoot tr 4 td 5</td>  </tr>
  -              <tr>  <td>tbody tr 5 td 1</td>  <td>tbody tr 5 td 2</td>  <td>tfoot tr 5 td 3</td>  <td>tfoot tr 5 td 4</td>  <td>tfoot tr 5 td 5</td>  </tr>
  -            </tfoot>
  -            <tbody>
  -              <tr>  <td>tbody tr 1 td 1</td>  <td>tbody tr 1 td 2</td>  <td>tbody tr 1 td 3</td>  <td>tbody tr 1 td 4</td>  <td>tbody tr 1 td 5</td>  </tr>
  -              <tr>  <td>tbody tr 2 td 1</td>  <td>tbody tr 2 td 2</td>  <td>tbody tr 2 td 3</td>  <td>tbody tr 2 td 4</td>  <td>tbody tr 2 td 5</td>  </tr>
  -              <tr>  <td>tfoot tr 3 td 1</td>  <td>tfoot tr 3 td 2</td>  <td>tbody tr 3 td 3</td>  <td>tbody tr 3 td 4</td>  <td>tbody tr 3 td 5</td>  </tr>
  -              <tr>  <td>tfoot tr 4 td 1</td>  <td>tfoot tr 4 td 2</td>  <td>tbody tr 4 td 3</td>  <td>tbody tr 4 td 4</td>  <td>tbody tr 4 td 5</td>  </tr>
  -              <tr>  <td>tfoot tr 5 td 1</td>  <td>tfoot tr 5 td 2</td>  <td>tbody tr 5 td 3</td>  <td>tbody tr 5 td 4</td>  <td>tbody tr 5 td 5</td>  </tr>
  -            </tbody>
  -          </table>
  -          <dl id="tabledemo2" class="o-FlexContainer">
  -            <dt class="o-Box u-w_p4 ">.u-w_p4  (&asymp; 14.590%)</dt>
  -            <dd class="o-Box u-w_p4c">.u-w_p4c (&asymp; 85.410%)</dd>
  -            <!---->
  -            <dt class="o-Box u-w_p3 ">.u-w_p3  (&asymp; 23.607%)</dt>
  -            <dd class="o-Box u-w_p3c">.u-w_p3c (&asymp; 76.393%)</dd>
  -            <!---->
  -            <dt class="o-Box u-w_p1c">.u-w_p1c (&asymp; 38.197%)</dt>
  -            <dd class="o-Box u-w_p1 ">.u-w_p1  (&asymp; 61.803%)</dd>
  -            <!---->
  -            <dt class="o-Box u-w_p1 ">.u-w_p1  (&asymp; 61.803%)</dt>
  -            <dd class="o-Box u-w_p1c">.u-w_p1c (&asymp; 38.197%)</dd>
  -            <!---->
  -            <dt class="o-Box u-w_p3c">.u-w_p3c (&asymp; 76.393%)</dt>
  -            <dd class="o-Box u-w_p3 ">.u-w_p3  (&asymp; 23.607%)</dd>
  -            <!---->
  -            <dt class="o-Box u-w_p4c">.u-w_p4c (&asymp; 85.410%)</dt>
  -            <dd class="o-Box u-w_p4 ">.u-w_p4  (&asymp; 14.590%)</dd>
  -          </dl>
  -        </figure>
  -      section#c-Document.
  -        <h2>The <code>.c-Document</code> Component</h2>
  -        <p>A <code>.c-Document</code> may take the form of a <code>body &gt; main</code> or
  +        figure
  +          table#tabledemo1
  +            thead
  +              tr #[th thead tr 1 th 1] #[th thead tr 1 th 2] #[th thead tr 1 th 3] #[th thead tr 1 th 4] #[th thead tr 1 th 5]
  +              tr #[td thead tr 2 td 1] #[td thead tr 2 td 2] #[td thead tr 2 td 3] #[td thead tr 2 td 4] #[td thead tr 2 td 5]
  +              tr #[td thead tr 3 td 1] #[td thead tr 3 td 2] #[td thead tr 3 td 3] #[td thead tr 3 td 4] #[td thead tr 3 td 5]
  +              tr #[td thead tr 4 td 1] #[td thead tr 4 td 2] #[td thead tr 4 td 3] #[td thead tr 4 td 4] #[td thead tr 4 td 5]
  +              tr #[td thead tr 5 td 1] #[td thead tr 5 td 2] #[td thead tr 5 td 3] #[td thead tr 5 td 4] #[td thead tr 5 td 5]
  +            tfoot
  +              tr #[th tfoot tr 1 th 1] #[th tfoot tr 1 th 2] #[th tfoot tr 1 th 3] #[th tfoot tr 1 th 4] #[th tfoot tr 1 th 5]
  +              tr #[td tfoot tr 2 td 1] #[td tfoot tr 2 td 2] #[td tfoot tr 2 td 3] #[td tfoot tr 2 td 4] #[td tfoot tr 2 td 5]
  +              tr #[td tbody tr 3 td 1] #[td tbody tr 3 td 2] #[td tfoot tr 3 td 3] #[td tfoot tr 3 td 4] #[td tfoot tr 3 td 5]
  +              tr #[td tbody tr 4 td 1] #[td tbody tr 4 td 2] #[td tfoot tr 4 td 3] #[td tfoot tr 4 td 4] #[td tfoot tr 4 td 5]
  +              tr #[td tbody tr 5 td 1] #[td tbody tr 5 td 2] #[td tfoot tr 5 td 3] #[td tfoot tr 5 td 4] #[td tfoot tr 5 td 5]
  +            tbody
  +              tr #[td tbody tr 1 td 1] #[td tbody tr 1 td 2] #[td tbody tr 1 td 3] #[td tbody tr 1 td 4] #[td tbody tr 1 td 5]
  +              tr #[td tbody tr 2 td 1] #[td tbody tr 2 td 2] #[td tbody tr 2 td 3] #[td tbody tr 2 td 4] #[td tbody tr 2 td 5]
  +              tr #[td tfoot tr 3 td 1] #[td tfoot tr 3 td 2] #[td tbody tr 3 td 3] #[td tbody tr 3 td 4] #[td tbody tr 3 td 5]
  +              tr #[td tfoot tr 4 td 1] #[td tfoot tr 4 td 2] #[td tbody tr 4 td 3] #[td tbody tr 4 td 4] #[td tbody tr 4 td 5]
  +              tr #[td tfoot tr 5 td 1] #[td tfoot tr 5 td 2] #[td tbody tr 5 td 3] #[td tbody tr 5 td 4] #[td tbody tr 5 td 5]
  +          dl#tabledemo2.o-FlexContainer
  +            dt.o-Box.u-w_p4  .u-w_p4  (&asymp; 14.590%)
  +            dd.o-Box.u-w_p4c .u-w_p4c (&asymp; 85.410%)
  +            <!---->
  +            dt.o-Box.u-w_p3  .u-w_p3  (&asymp; 23.607%)
  +            dd.o-Box.u-w_p3c .u-w_p3c (&asymp; 76.393%)
  +            <!---->
  +            dt.o-Box.u-w_p1c .u-w_p1c (&asymp; 38.197%)
  +            dd.o-Box.u-w_p1  .u-w_p1  (&asymp; 61.803%)
  +            <!---->
  +            dt.o-Box.u-w_p1  .u-w_p1  (&asymp; 61.803%)
  +            dd.o-Box.u-w_p1c .u-w_p1c (&asymp; 38.197%)
  +            <!---->
  +            dt.o-Box.u-w_p3c .u-w_p3c (&asymp; 76.393%)
  +            dd.o-Box.u-w_p3  .u-w_p3  (&asymp; 23.607%)
  +            <!---->
  +            dt.o-Box.u-w_p4c .u-w_p4c (&asymp; 85.410%)
  +            dd.o-Box.u-w_p4  .u-w_p4  (&asymp; 14.590%)
  +      section#c-Document
  +        h2 The <code>.c-Document</code> Component
  +        p.
  +          A <code>.c-Document</code> may take the form of a <code>body &gt; main</code> or
             <code>body &gt;&gt; article</code>. The said document should have a <b>status</b> and be marked up
  -          with metadata.
  -          Read <a rel="external"
  -          href="https://github.com/chharvey/chharvey.github.io/wiki/Document-Status">my
  -          technical report on document status</a> for more information.</p>
  -        <p>Any Element inside a <code>.c-Document</code> may be marked with classes indicating their status.
  +          with metadata. Read
  +          <a rel="external" href="https://github.com/chharvey/chharvey.github.io/wiki/Document-Status">my technical report on document status</a>
  +          for more information.
  +        p.
  +          Any Element inside a <code>.c-Document</code> may be marked with classes indicating their status.
             Notice we are separating semantics with presentation: the <code>[data-status]</code> attribute
  -          is unrelated to an Element&rsquo;s class.</p>
  -        <figure>
  -          <article class="c-Document">
  -            This is a <code>c.Document</code>.
  -            <p class="c-Document__Draft"    data-status="draft"   >This is a <code>.c-Document &gt;&gt; p.c-Document__Draft</code>.    It may be used on an Element with a status of <b>draft</b>    inside a document.</p>
  -            <p class="c-Document__Complete" data-status="complete">This is a <code>.c-Document &gt;&gt; p.c-Document__Complete</code>. It may be used on an Element with a status of <b>complete</b> inside a document.</p>
  -            <p class="c-Document__Released" data-status="released">This is a <code>.c-Document &gt;&gt; p.c-Document__Released</code>. It may be used on an Element with a status of <b>released</b> inside a document.</p>
  -            <p>This is another paragraph in the document.
  -              <span class="c-Document__Draft"    data-status="draft"   >This is a <code>.c-Document &gt;&gt; span.c-Document__Draft   </code>. It may be used on an Element with a status of <b>draft</b></span>    inside a document.
  -              <span class="c-Document__Complete" data-status="complete">This is a <code>.c-Document &gt;&gt; span.c-Document__Complete</code>. It may be used on an Element with a status of <b>complete</b></span> inside a document.
  -              <span class="c-Document__Released" data-status="released">This is a <code>.c-Document &gt;&gt; span.c-Document__Released</code>. It may be used on an Element with a status of <b>released</b></span> inside a document.
  -            </p>
  -          </article>
  -        </figure>
  -        <p>A Document is normative by default, but may also have
  -          informative (non-essential) Elements.</p>
  -        <figure>
  +          is unrelated to an Element&rsquo;s class.
  +        figure
  +          article.c-Document This is a <code>c.Document</code>.
  +            p.c-Document__Draft(data-status="draft")       This is a #[code .c-Document &gt;&gt; p.c-Document__Draft   ]. It may be used on an Element with a status of #[b draft   ] inside a document.
  +            p.c-Document__Complete(data-status="complete") This is a #[code .c-Document &gt;&gt; p.c-Document__Complete]. It may be used on an Element with a status of #[b complete] inside a document.
  +            p.c-Document__Released(data-status="released") This is a #[code .c-Document &gt;&gt; p.c-Document__Released]. It may be used on an Element with a status of #[b released] inside a document.
  +            p.
  +              This is another paragraph in the document.
  +              #[span.c-Document__Draft(data-status="draft")       This is a #[code .c-Document &gt;&gt; span.c-Document__Draft   ]. It may be used on an Element with a status of #[b draft   ]] inside a document.
  +              #[span.c-Document__Complete(data-status="complete") This is a #[code .c-Document &gt;&gt; span.c-Document__Complete]. It may be used on an Element with a status of #[b complete]] inside a document.
  +              #[span.c-Document__Released(data-status="released") This is a #[code .c-Document &gt;&gt; span.c-Document__Released]. It may be used on an Element with a status of #[b released]] inside a document.
  +        p.
  +          A Document is normative by default, but may also have informative (non-essential) Elements.
  +        figure.
             <article class="c-Document">
               <p class="c-Document__Informative" data-informative="">This is a
                 <code>.c-Document &gt;&gt; p.c-Document__Informative</code>.
  
positive.code:               </dl>
              </article>
            </figure>
          </section>
        section#text-level.
          <h2>Text-Level Components</h2>
          <section id="c-Acro">
            <h3>The <code>.c-Acro</code> Component</h3>
            <p>Use <span class="c-Acro">ACROnym</span> for a generic acronym.</p>
            <p>Use <span class="c-Acro"><span class="c-Acro__First">A</span>CROnym</span> for
              an acronym that begins a paragraph, sentence, or list item.</p>
          </section>
        section#breadcrumbs.
          <h2>Breadcrumbs</h2>
          <p>Read <a rel="external"
            href="https://github.com/chharvey/chharvey.github.io/wiki/Breadcrumbs">my
            technical report on breadcrumbs</a> for more information.</p>
          <ol class="Anc">
            <li><a class="Crumb" rel="top"     >.Anc .Crumb[rel="top"]</a></li>
            <li><a class="Crumb" rel="ancestor">.Anc .Crumb[rel="ancestor"]</a></li>
            <li><a class="Crumb" rel="parent"  >.Anc .Crumb[rel="parent"]</a></li>
          </ol>
          <ol class="Sib">
            <li><a class="Crumb" rel="sibling">.Sib .Crumb[rel="sibling"]</a></li>
            <li><a class="Crumb" rel="this"   >.Sib .Crumb[rel="this"]</a></li>
            <li><a class="Crumb" rel="sibling">.Sib .Crumb[rel="sibling"]</a></li>
          </ol>
          <ol class="Child">
            <li><a class="Crumb" rel="child">.Child .Crumb[rel="child"]</a></li>
            <li><a class="Crumb" rel="child">.Child .Crumb[rel="child"]</a></li>
            <li><a class="Crumb" rel="child">.Child .Crumb[rel="child"]</a></li>
          </ol>
      nav.Bc
        ol.Anc
          li: a.Crumb(rel="top"    href="../../index.html   ") Home
  
negative.code:                 <code>.c-Document &gt;&gt; span.c-Document__Informative</code>.</span>
                It may be used on an Element with the <code>[data-informative]</code> attribute.</p>
            </article>
          section#c-Document__Meta.
            <h3>The <code>.c-Document__Meta</code> Subcomponent</h3>
            <p><code>.c-Document__Meta</code> marks up meta-information about a document.</p>
            <p>Read <a rel="external"
  