anchor.diff:          dd.o-Box.a-w-p3  .a-w-p3  (&asymp; 23.607%)
           dt.o-Box.a-w-p4c .a-w-p4c (&asymp; 85.410%)
           dd.o-Box.a-w-p4  .a-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
  +  section#document-component
  +    h2 The Document Component
  +    p.
  +      Use #[code .c-Document] to mark up a document such as an article or blog post.
  +      A #[dfn#dfn-document document] may take the form of a #[code body &gt; main] or
  +      #[code body #[abbr(title="descendant") &gt;&gt;] article].
  +      It 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.
  -        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.
  +      Any element inside a #[code .c-Document] may be marked with subcomponent classes indicating their status.
  +    p.
  +      A Document is normative by default, but may also have informative (non-essential) elements,
  +      which typically have the boolean #[code [data-informative]] attribute.
       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 Lorem ipsum dolor sit amet.
  +        p.c-Document__Draft Suspendisse ut auctor enim.
  +        p.c-Document__Complete Pellentesque habitant morbi tristique senectus.
  +        p.c-Document__Released Aenean consectetur suscipit urna.
  +        p.c-Document__Informative Donec finibus ut lectus finibus pellentesque.
  +      pre.
  +        &lt;article class="#[u c-Document]"&gt;
  +          &lt;p&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
  +          &lt;p class="#[u c-Document__Draft]"&gt;Suspendisse ut auctor enim.&lt;/p&gt;
  +          &lt;p class="#[u c-Document__Complete]"&gt;Pellentesque habitant morbi tristique senectus.&lt;/p&gt;
  +          &lt;p class="#[u c-Document__Released]"&gt;Aenean consectetur suscipit urna.&lt;/p&gt;
  +          &lt;p class="#[u c-Document__Informative]"&gt;Donec finibus ut lectus finibus pellentesque.&lt;/p&gt;
  +        &lt;/article&gt;
  +    section#document-meta(style="opacity: 0.3;")
  +      h3 Document Meta
         p #[code .c-Document__Meta] marks up meta-information about a document.
         p.
           Read
  
positive.code: block append vars
    - titles.push('Typographical Components')
  
  block append main
    p These are components of a typographical, static nature.
    section#c-Subhead
      h2 The #[code .c-Subhead] Component
      p.
        Put a #[code .c-Subhead] sibling adjacent to a heading to create
        a subheading for a page. This can be thought of as a
        #[i tagline] or #[i subtitle] for the top-level heading.
      figure
        h1 This is a Page Title
        p.c-Subhead This is a subtitle.
    section#c-FolioTitle
      h2 The #[code .c-FolioTitle] Component
      p.
        On special pages, the top-level header may be a #[code .c-FolioTitle]. To add a little spice,
        use #[code .c-FolioTitle__Cap] 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#c-Lede
      h2 The #[code .c-Lede] Component
      figure
        p.c-Lede.
          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]) 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.
          #[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.
    section#c-Caption
      h2 The #[code .c-Caption] Component
      figure
        p.c-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
            strong.c-Caption__Title Figure 1.
            | Use #[code .c-Caption.c-Caption--before] for a caption that precedes an element.
          | Use #[code .c-Caption__Title] for the title of the figure or table.
          |  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
          | Use #[code .c-Caption__Title] for the title of the figure or table.
          |  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
            strong.c-Caption__Title Figure 2.
            | Use #[code .c-Caption.c-Caption--after] for a caption that follows an element.
    section.c-Document__Draft.a-bc-aperturewhite
      h2 crossgrid-lined
      p.o-Box.c-Alert.c-Alert--cshn.
  
negative.code:         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.-ml-1 Latest
    section#text-level-components
      h2 Text-Level Components
      section#acronyms
        h3 Acronyms
        p.
          When an #[code abbr] element contains an acronym, with all caps,
          use class #[code .c-Acro] for a friendlier style.
          It lessens the harshness of sequential capital letters.
        figure
          p.
            The National Aeronautics and Space Administration, more commonly known as
            #[abbr.c-Acro(title="National Aeronautics and Space Administration") NASA],
            advocates a mission to Mars.
          pre.
            &lt;p&gt;... known as &lt;abbr class="#[u c-Acro]" title="National Aeronautics and Space Administration"&gt;NASA&lt;/abbr&gt;, advocates ...&lt;/p&gt;
        p.
          Use #[code .c-Acro__First] on the first letter of an #[code .c-Acro] that begins a paragraph,
          sentence, or list item. It simply reverts the font size.
        figure
          p.
            #[abbr.c-Acro(title="National Aeronautics and Space Administration") #[span.c-Acro__First N]ASA]
            strongly advocates a mission to Mars.
          pre.
            &lt;p&gt;&lt;abbr class="#[u c-Acro]" title="National Aeronautics and Space Administration"&gt;&lt;span class="#[u c-Acro__First]"&gt;N&lt;/span&gt;ASA&lt;/abbr&gt; strongly ...&lt;/p&gt;
      section#camo-links
        h3 Camo Links
        figure
          p.
            A #[code .c-Camo] is a #[a.c-Camo(href="") camouflaged hyperlink].
            Even though it&rsquo;s a link, it looks like normal text (until&nbsp;hover).
            It even works on #[a.c-Camo anchors without hrefs].
            Best used for printing.
          pre.
            &lt;p&gt;
              ... is a &lt;a class="#[u c-Camo]" href=""&gt;camouflaged hyperlink&lt;/a&gt;. ...
              ... works on &lt;a class="#[u c-Camo]"&gt;anchors without hrefs&lt;/a&gt;. ...
            &lt;/p&gt;
    section#breadcrumbs(style="opacity: 0.3;")
      h2 Breadcrumbs
      p.
        Read
  