anchor.diff:                #[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>.
  -              It may be used on an Element with the <code>[data-informative]</code> attribute.</p>
  -            <p>This is another paragraph in the document.
  -              <span class="c-Document__Informative" data-informative="">This is a
  -                <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"
  -            href="https://github.com/chharvey/chharvey.github.io/wiki/Document-Header">my
  -            technical report on document headers</a> for more information.</p>
  -          <figure>
  -            <article class="c-Document">
  -              <dl class="c-Document__Meta">
  -                <dt>Author</dt>
  -                <dd>Chris Harvey</dd>
  -                <dt>Description</dt>
  -                <dd>A summary of ordered and unordered lists.</dd>
  -                <dt>Keywords</dt>
  -                <dd>HTML</dd>
  -                <dd>semantic</dd>
  -                <dd>lists</dd>
  -                <dt>Version History</dt>
  -                <dd class="update" itemprop="dateCreated">
  -                  <time datetime="2013-07-16 15:18">Jul 16, 2013 <span class="tod">3:18 PM</span></time>
  -                  <span class="o-Textbox  c-Label  c-Label--cshn  !ml:1">Completed</span>
  -                </dd>
  -                <dd class="update">
  -                  <time datetime="2013-08-01">Aug 1, 2013</time>
  -                </dd>
  -                <dd class="update">
  -                  <time datetime="2014-03-08 01:47">Mar 8, 2013 <span class="tod">1:47 AM</span></time>
  -                </dd>
  -                <dd class="update" itemprop="datePublished">
  -                  <time datetime="2014-04-10 11:36">Apr 10, 2014 <span class="tod">11:36 AM</span></time>
  -                  <span class="o-Textbox  c-Label  c-Label--skss  !ml:1">Released</span>
  -                </dd>
  -                <dd class="update" itemprop="dateModified">
  -                  <time datetime="2014-05-08 14:53">May 8, 2013 <span class="tod">2:53 PM</span></time>
  -                  <span class="o-Textbox  c-Label  c-Label--dang  !ml:1">Latest</span>
  -                </dd>
  -              </dl>
  -            </article>
  -          </figure>
  +        figure
  +          article.c-Document
  +            p.c-Document__Informative(data-informative="").
  +              This is a
  +              #[code .c-Document &gt;&gt; p.c-Document__Informative].
  +              It may be used on an Element with the #[code [data-informative]] attribute.
  +            p.
  +              This is another paragraph in the document.
  +              #[span.c-Document__Informative(data-informative="") This is a #[code .c-Document &gt;&gt; span.c-Document__Informative].]
  +              It may be used on an Element with the #[code [data-informative]] attribute.
  +        section#c-Document__Meta
  +          h3 The #[code .c-Document__Meta] Subcomponent
  +          p #[code .c-Document__Meta] marks up meta-information about a document.
  +          p.
  +            Read
  +            #[a(rel="external" href="https://github.com/chharvey/chharvey.github.io/wiki/Document-Header") my technical report on document headers]
  +            for more information.
  +          figure: article.c-Document: dl.c-Document__Meta
  +            dt Author
  +            dd Chris Harvey
  +            dt Description
  +            dd A summary of ordered and unordered lists.
  +            dt Keywords
  +            dd HTML
  +            dd semantic
  +            dd lists
  +            dt Version History
  +            dd.update
  +              time(datetime="2013-07-16 15:18") Jul 16, 2013 #[span.tod 3:18 PM]
  +              span.o-Textbox.c-Label.c-Label--cshn(class="!ml:1") Completed
  +            dd.update
  +              time(datetime="2013-08-01") Aug 1, 2013
  +            dd.update
  +              time(datetime="2014-03-08 01:47") Mar 8, 2013 #[span.tod 1:47 AM]
  +            dd.update
  +              time(datetime="2014-04-10 11:36") Apr 10, 2014 #[span.tod 11:36 AM]
  +              span.o-Textbox.c-Label.c-Label--skss(class="!ml:1") Released
  +            dd.update
  +              time(datetime="2014-05-08 14:53") May 8, 2013 #[span.tod 2:53 PM]
  +              span.o-Textbox.c-Label.c-Label--dang(class="!ml:1") Latest
         section#text-level
           h2 Text-Level Components
           section#c-Acro
  -          h3 The <code>.c-Acro</code> Component
  -          p Use <span class="c-Acro">ACROnym</span> for a generic acronym.
  -          p.
  -            Use <span class="c-Acro"><span class="c-Acro__First">A</span>CROnym</span> for
  +          h3 The #[code .c-Acro] Component
  +          p Use #[span.c-Acro ACROnym] for a generic acronym.
  +          p.
  +            Use #[span.c-Acro #[span.c-Acro__First A]CROnym] for
               an acronym that begins a paragraph, sentence, or list item.
         section#breadcrumbs
           h2 Breadcrumbs
           p.
             Read
  -          <a rel="external" href="https://github.com/chharvey/chharvey.github.io/wiki/Breadcrumbs">my technical report on breadcrumbs</a>
  +          #[a(rel="external" href="https://github.com/chharvey/chharvey.github.io/wiki/Breadcrumbs") my technical report on breadcrumbs]
             for more information.
           ol.Anc
             li: a.Crumb(rel="top"     ) .Anc .Crumb[rel="top"]
  
positive.code:           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
  
negative.code:               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.c-Alert__Title Notice:]
            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] but may not
            necessarily be classed #[code .c-TableBordered].
          figure
            table#tabledemo1
              thead
  