anchor.diff:            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>
  +              th.o-Box: code font-style
  +              th.o-Box: code font-variant
  +              th.o-Box: code font-weight
  +              th.o-Box: code font-size
  +              th.o-Box: code color
             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>
  +              th(class="o-Box") #[code .c-Subhead]
  +              td(data-bool="1") #[code normal]#[sup:a.Rf#rf-hsubfontstyle(rel="this", href="#fn-hsubfontstyle") 4]
  +              td(data-bool="0") #[code normal]
  +              td(data-bool="0") #[code normal]
  +              td(data-bool="1") #[code 2.0000rem]
  +              td(data-bool="1") #[code @color_accent]
               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>
  +              th(class="o-Box") #[code .c-FolioTitle]
  +              td(data-bool="1") #[code normal]#[sup:a.Rf#rf-hfoliofontstyle(rel="this", href="#fn-hfoliofontstyle") 5]
  +              td(data-bool="0") #[code normal]
  +              td(data-bool="0") #[code normal]
  +              td(data-bool="1") #[code 3.0000rem]#[sup:a.Rf#rf-hfoliofontsize(rel="this", href="#fn-hfoliofontsize") 6]
  +              td(data-bool="1") #[code @color_h_major]
           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>
  +              #[sup: a.Fn#fn-hsubfontstyle(rel="this", href="#rf-hsubfontstyle") 4]
  +              #[sup: a.Fn#fn-hfoliofontstyle(rel="this", href="#rf-hfoliofontstyle") 5]
  +              The #[code .c-Subhead] and #[code .c-FolioTitle] Elements do not have
  +              #[code font-style: italic;]
                 specified but is automatically italicized by the nature of the typeface.
               li.
  -              <sup><a class="Fn" id="fn-hfoliofontsize" rel="this" href="#rf-hfoliofontsize">6</a></sup>
  +              #[sup: a.Fn#fn-hfoliofontsize(rel="this", href="#rf-hfoliofontsize") 6]
                 Font size is adjusted with JavaScript to fit entire heading on one line.
         section#c-Lede
  -        h2 The <code>.c-Lede</code> Component
  +        h2 The #[code .c-Lede] 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>
  +            A #[code .c-Lede] represents a #[i lede] paragraph (also
  +            referred to as a #[i standfirst] in the #[abbr.c-Acro(title="United Kingdom") UK]).
  +            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.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>.
  +            Dropped capitals (#[i drop caps]) can be used for pure aesthetics
  +            in the first (and usually, only) lede paragraph. This is a #[code .c-Lede.c-Lede--dropcap].
               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 rest of the paragraph is text.
  +          p.
  +            #[span.c-Dropcap You can also]
  +            manually use #[code .c-Dropcap] 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>
  +            The rest of the paragraph is text.
         section#c-Caption
  -        h2 The <code>.c-Caption</code> Component
  +        h2 The #[code .c-Caption] Component
           figure
             p.c-Caption.
  -            This is a <code>.c-Caption</code>. It may be a table caption, a figure caption,
  +            This is a #[code .c-Caption]. 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.]
  
positive.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</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.
  
negative.code:           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] 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]
            for more information.
          p.
            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].
              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.
  