anchor.diff:            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
  +        h2 The #[code .c-Document] Component
  +        p.
  +          A #[code .c-Document] may take the form of a #[code body &gt; main] or
  +          #[code body &gt;&gt; article]. The said document should have a #[b status] 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>
  +          #[a(rel="external" href="https://github.com/chharvey/chharvey.github.io/wiki/Document-Status") my technical report on document status]
             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
  +          Any Element inside a #[code .c-Document] may be marked with classes indicating their status.
  +          Notice we are separating semantics with presentation: the #[code [data-status]] attribute
             is unrelated to an Element&rsquo;s class.
           figure
  -          article.c-Document This is a <code>c.Document</code>.
  +          article.c-Document This is a #[code .c-Document].
               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.
  
positive.code:             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.
            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.
          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.
          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.
                  <sup><a class="Fn" href="#">3</a></sup>
                  Another empty footnote. A footnote may include a citation, work cited, or simply a
                  parenthetical remark.
        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")
  
negative.code:       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] is added.
            p This #[code figure.crossgrid-lined] contains optional #[code p] Elements.
            p This is another #[code figure.crossgrid-lined &gt; p].
          blockquote.crossgrid-lined
            p.
              Use #[code blockquote.crossgrid-lined] for an added background image.
              This is the rest of the text.
            p.
              This is the rest of the text.
  