anchor.diff:      main.o-GoldenContainer__Content
         h1 Site-Wide Schemes
         section#fonts
  -        h2 Font Scheme
  -        form
  -          p Check the radio buttons to change the style, variant, and weight of the font demos below.
  -          fieldset
  -            ul.o-ListBare
  -              li
  -                input#check-fs(type="checkbox" name="fs" value="italic")
  -                label(for="check-fs") font-style: italic;
  -              li
  -                input#check-fv(type="checkbox" name="fv" value="small-caps")
  -                label(for="check-fv") font-variant: small-caps;
  -              li
  -                input#js-range-fw(type="range" name="fw" min="100" max="900" step="100" value="400")
  -                label(for="js-range-fw"): input#js-text-fw(class="!ml:1" type="text" value="400 (normal)" disabled="")
  -          p: input#reset-fonts(type="reset")
  -        section
  -          h3 Typefaces
  -          section.o-FlexContainer#ff-base
  -            h4(class="!w:1o1") Avenir Next
  -            p(class="!w:2o3").
  -              Used for the main body copy, Avenir Next
  -              is a sans-serif type with little to no thick/thin transition.
  -              Being a sans-serif, its #[i italic] is actually an oblique, which just slants the glyphs.
  -              #[br]
  -              Similar: #[b Helvetica Neue]
  -            figure(class="!w:1o3").u-ff_base
  -              div.c-FontSample Aa
  -              p The quick brown fox jumps over the lazy dog.
  -          section.o-FlexContainer#ff-heading
  -            h4(class="!w:1o1") Optima
  -            p(class="!w:2o3").
  -              Optima is used only for headings of body copy
  -              (not table headings, #[i(lang="la"): abbr(title="et cetera") etc.]).
  -              It is a sans-serif polyweight type with a moderate thick/thin transition.
  -              Because of this, it goes well with both monoweight types and serif types, which
  -              makes it perfect for headings.
  -              #[br]
  -              Similar: #[b Seravek], #[b Tahoma].
  -            figure(class="!w:1o3").u-ff_heading
  -              div.c-FontSample Aa
  -              p The quick brown fox jumps over the lazy dog.
  -          section.o-FlexContainer#ff-prose
  -            h4(class="!w:1o1") Baskerville
  -            p(class="!w:2o3").
  -              Baskerville is used for text in formal documents and articles.
  -              It is a serif oldstyle type, which is easy on the eyes and can be read at extensive length.
  -              Like the #[i heading] font family, it, too, has a moderate thick/thin transition, but has diagonal stress and
  -              serifs, and true italics, which means it uses a whole new set of glyphs.
  -              #[br]
  -              Similar: #[b Palatino], #[b Cochin]#[sup: a.Rf#rf-baskerville(rel="this" href="#fn-baskerville") 1]
  -            figure(class="!w:1o3").u-ff_prose
  -              div.c-FontSample Aa
  -              p The quick brown fox jumps over the lazy dog.
  -            footer(class="!w:1o1")
  -              ul.c-ListFootnotes
  -                li.
  -                  #[sup: a.Fn#fn-baskerville(rel="this" href="#rf-baskerville") 1]
  -                  #[b Baskerville], though considered an #[b oldstyle] type, actually has
  -                  a straight, vertical stress, which is typically a feature of #[b modern] types.
  -                  However #[b Palatino] and #[b Cochin] indeed have diagonal stresses.
  -          section.o-FlexContainer#ff-accent
  -            h4(class="!w:1o1") Helvetica Neue
  -            p(class="!w:2o3").
  -              Helvetica Neue is used for typographical and #[abbr(title="user interface") UI]
  -              components such as ledes, pull quotes, captions, alerts, labels, buttons, and keys.
  -              Like #[b Avenir], it is a monoweight sans-serif, yet slightly heavier.
  -              #[br]
  -              Similar: #[b Helvetica]
  -            figure(class="!w:1o3").u-ff_accent
  -              div.c-FontSample Aa
  -              p The quick brown fox jumps over the lazy dog.
  -          section.o-FlexContainer#ff-code
  -            h4(class="!w:1o1") Menlo
  -            p(class="!w:2o3").
  -              Menlo is a monospace type used for sample code on the site. Personally, I dislike
  -              monospace fonts with serifs, so I chose a sans-serif.
  -              #[br]
  -              Similar: #[b Monaco], #[b Andale Mono]
  -            figure(class="!w:1o3").u-ff_code
  -              div.c-FontSample Aa
  -              p The quick brown fox jumps over the lazy dog.
  -          section.o-FlexContainer#ff-math
  -            h4(class="!w:1o1") Didot
  -            p(class="!w:2o3").
  -              Didot is a serif modern type use for mathematical spans and spans in foreign
  -              languages. It has a radical thick/thin transition, vertical stress, and
  -              straight horizontal serifs. With a cold yet elegant look, this font family makes
  -              long spans of text hard to read, but that&rsquo;s okay because this font is
  -              used only for short expressions.
  -              #[br]
  -              Similar: #[b Bodoni 72], #[b Times]
  -            figure(class="!w:1o3").u-ff_math
  -              div.c-FontSample Aa
  -              p The quick brown fox jumps over the lazy dog.
  -          section.o-FlexContainer#ff-script
  -            h4(class="!w:1o1") Zapfino
  -            p(class="!w:2o3").
  -              Zapfino is used for very fancy elements such as drop-caps and subheadings.
  -              Use this font family sparingly.
  -            figure(class="!w:1o3").u-ff_script(style="line-height:3;")
  -              div.c-FontSample(style="line-height:2.4;") Aa
  -              p The quick brown fox jumps over the lazy dog.
  -        section
  -          h3 Headings and Paragraphs
  -          figure
  -            h1 Heading 1
  -            p(lang="la").
  -              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  -              Aliquam sagittis suscipit nunc, a cursus libero euismod at.
  -              Nulla placerat neque massa, quis interdum leo efficitur vel.
  -              Donec feugiat varius arcu non volutpat.
  -              Mauris eget mauris ut mauris auctor mattis id vel justo.
  -              Nulla dictum arcu nec suscipit mollis.
  -              Maecenas a iaculis nisl, ut pretium est. Nulla facilisi.
  -            h2 Heading 2
  -            p(lang="la").
  -              Suspendisse ut auctor enim.
  -              Aliquam viverra enim vitae ante aliquet venenatis.
  -              Sed vel nibh sit amet sapien fermentum mattis nec non arcu.
  -              Praesent dapibus velit quis lectus tempus, ut ullamcorper nibh facilisis.
  -              Aenean tincidunt ante risus, semper malesuada libero consectetur id.
  -              Praesent vel ligula ut enim porttitor porta. Aenean eu ullamcorper mi.
  -              Integer blandit est quam, eget mattis urna scelerisque quis.
  -              Maecenas sapien sapien, ornare nec lobortis eget, tincidunt sed ligula.
  -              Maecenas risus nibh, volutpat sed euismod non, semper eget neque.
  -              Integer varius egestas risus, volutpat sagittis turpis convallis eget.
  -              Vivamus pulvinar ligula eget mi tincidunt, eget faucibus justo laoreet.
  -              In sapien lacus, egestas faucibus laoreet eu, tempor sit amet lorem.
  -              Sed luctus congue tortor a scelerisque.
  -            h3 Heading 3
  -            p(lang="la").
  -              Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  -              Nunc sit amet scelerisque lectus. Cras cursus sed dui quis convallis.
  -              Quisque id justo elit.
  -              Fusce ut quam non sem efficitur accumsan sed id neque.
  -              Mauris finibus dignissim gravida.
  -              In dignissim mauris ac odio molestie volutpat.
  -              Nulla tellus justo, finibus sed volutpat sed, tristique ac lacus.
  -              Suspendisse sit amet fermentum sapien.
  -              Aliquam luctus laoreet iaculis.
  -              Proin lacinia orci vitae tellus pellentesque porttitor.
  -            h4 Heading 4
  -            p(lang="la").
  -              Aenean consectetur suscipit urna, non vehicula lacus blandit et.
  -              Integer at lacus et diam tristique suscipit.
  -              Ut cursus massa sit amet nisl convallis, elementum accumsan sapien mattis.
  -              Vestibulum vitae magna ac tellus accumsan pharetra vulputate vitae erat.
  -              Vestibulum est dui, elementum non sagittis ac, sagittis accumsan justo.
  -              Donec at vestibulum diam. Nam et volutpat dolor, at pulvinar nisi.
  -              Curabitur aliquam maximus nulla eu venenatis.
  -              Nam aliquam lorem non felis dignissim dictum.
  -              Pellentesque sagittis vehicula nisl non luctus.
  -              Pellentesque eget ligula hendrerit, blandit enim consequat, dictum sem.
  -              In quis lectus in lectus interdum laoreet eu quis quam.
  -              Fusce auctor posuere purus, quis semper libero dignissim euismod.
  -              Curabitur commodo mauris a sapien vulputate, eget pharetra urna facilisis.
  -            h5 Heading 5
  -            p(lang="la").
  -              Donec finibus ut lectus finibus pellentesque.
  -              Nulla euismod feugiat nulla nec posuere.
  -              Sed ac est id sem sagittis rhoncus eu ac neque.
  -              Aliquam eu metus sagittis, porta turpis id, scelerisque magna.
  -              Nulla venenatis elementum est, semper viverra felis tristique sit amet.
  -              Mauris nec ipsum id orci porttitor auctor sed sit amet sem.
  -              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  -              Etiam tellus leo, venenatis sit amet ipsum non, sagittis feugiat ante.
  -            h6 Heading 6
  -            p(lang="la").
  -              Donec vel dolor ut felis dapibus ultricies vitae a nibh.
  -              Ut semper odio est, sed lacinia ligula gravida ut.
  -              Vestibulum facilisis viverra pulvinar.
  -              Suspendisse maximus nisl sit amet augue vulputate, vel porta nunc molestie.
  -              Aliquam mauris diam, pharetra vel consectetur quis, rhoncus in risus.
  -              Donec ut quam massa.
  -              Vestibulum sapien justo, commodo a eros in, rhoncus interdum nisl.
  -              Etiam a porta lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  +        h2 Typeface Scheme
  +        section.o-FlexContainer#ff-base
  +          h3(class="!w:1o1") Avenir Next
  +          p.c-FontDescr.
  +            Used for the main body copy, Avenir Next
  +            is a sans-serif type with little to no thick/thin transition.
  +            Being a sans-serif, its #[i italic] is actually an oblique, which just slants the glyphs.
  +            #[br]
  +            Similar: #[b Helvetica Neue]
  +          figure.c-FontSamp.u-ff_base
  +            div.c-FontSamp__Letter Aa
  +            p.c-FontSamp__Sentence The quick brown fox jumps over the lazy dog.
  +          form.c-FontForm
  +            label
  +              input(type="checkbox" name="fs" value="italic")
  +              |  italic
  +            label
  +              input(type="checkbox" name="fv" value="small-caps")
  +              |  small-caps
  +            label
  +              input(type="range" name="fw" min="100" max="900" step="100" value="400")
  +              input(type="text" value="400 (normal)" disabled="" style="width:100px;")
  +            input(type="reset")
  +        section.o-FlexContainer#ff-heading
  +          h3(class="!w:1o1") Optima
  +          p.c-FontDescr.
  +            Optima is used only for headings of body copy
  +            (not table headings, #[i(lang="la"): abbr(title="et cetera") etc.]).
  +            It is a sans-serif polyweight type with a moderate thick/thin transition.
  +            Because of this, it goes well with both monoweight types and serif types, which
  +            makes it perfect for headings.
  +            #[br]
  +            Similar: #[b Seravek], #[b Tahoma].
  +          figure.c-FontSamp.u-ff_heading
  +            div.c-FontSamp__Letter Aa
  +            p.c-FontSamp__Sentence Oh, sphinx of black quartz, judge my vow.
  +          form.c-FontForm
  +            label
  +              input(type="checkbox" name="fs" value="italic")
  +              |  italic
  +            label
  +              input(type="checkbox" name="fv" value="small-caps")
  +              |  small-caps
  +            label
  +              input(type="range" name="fw" min="100" max="900" step="100" value="400")
  +              input(type="text" value="400 (normal)" disabled="" style="width:100px;")
  +            input(type="reset")
  +        section.o-FlexContainer#ff-prose
  +          h3(class="!w:1o1") Baskerville
  +          p.c-FontDescr.
  +            Baskerville is used for text in formal documents and articles.
  +            It is a serif oldstyle type, which is easy on the eyes and can be read at extensive length.
  +            Like the #[i heading] font family, it, too, has a moderate thick/thin transition, but has diagonal stress and
  +            serifs, and true italics, which means it uses a whole new set of glyphs.
  +            #[br]
  +            Similar: #[b Palatino], #[b Cochin]#[sup: a.Rf#rf-baskerville(rel="this" href="#fn-baskerville") 1]
  +          figure.c-FontSamp.u-ff_prose
  +            div.c-FontSamp__Letter Aa
  +            p.c-FontSamp__Sentence The five boxing wizards jump quickly.
  +          form.c-FontForm
  +            label
  +              input(type="checkbox" name="fs" value="italic")
  +              |  italic
  +            label
  +              input(type="checkbox" name="fv" value="small-caps")
  +              |  small-caps
  +            label
  +              input(type="range" name="fw" min="100" max="900" step="100" value="400")
  +              input(type="text" value="400 (normal)" disabled="" style="width:100px;")
  +            input(type="reset")
  +          footer(class="!w:1o1")
  +            ul.c-ListFootnotes
  +              li.
  +                #[sup: a.Fn#fn-baskerville(rel="this" href="#rf-baskerville") 1]
  +                #[b Baskerville], though considered an #[b oldstyle] type, actually has
  +                a straight, vertical stress, which is typically a feature of #[b modern] types.
  +                However #[b Palatino] and #[b Cochin] indeed have diagonal stresses.
  +        section.o-FlexContainer#ff-accent
  +          h3(class="!w:1o1") Helvetica Neue
  +          p.c-FontDescr.
  +            Helvetica Neue is used for typographical and #[abbr(title="user interface") UI]
  +            components such as ledes, pull quotes, captions, alerts, labels, buttons, and keys.
  +            Like #[b Avenir], it is a monoweight sans-serif, yet slightly heavier.
  +            #[br]
  +            Similar: #[b Helvetica]
  +          figure.c-FontSamp.u-ff_accent
  +            div.c-FontSamp__Letter Aa
  +            p.c-FontSamp__Sentence Heavy boxes perform quick waltzes and jigs.
  +          form.c-FontForm
  +            label
  +              input(type="checkbox" name="fs" value="italic")
  +              |  italic
  +            label
  +              input(type="checkbox" name="fv" value="small-caps")
  +              |  small-caps
  +            label
  +              input(type="range" name="fw" min="100" max="900" step="100" value="400")
  +              input(type="text" value="400 (normal)" disabled="" style="width:100px;")
  +            input(type="reset")
  +        section.o-FlexContainer#ff-code
  +          h3(class="!w:1o1") Menlo
  +          p.c-FontDescr.
  +            Menlo is a monospace type used for sample code on the site. Personally, I dislike
  +            monospace fonts with serifs, so I chose a sans-serif.
  +            #[br]
  +            Similar: #[b Monaco], #[b Andale Mono]
  +          figure.c-FontSamp.u-ff_code
  +            div.c-FontSamp__Letter Aa
  +            p.c-FontSamp__Sentence The quick brown fox jumps over the lazy dog.
  +          form.c-FontForm
  +            label
  +              input(type="checkbox" name="fs" value="italic")
  +              |  italic
  +            label
  +              input(type="checkbox" name="fv" value="small-caps")
  +              |  small-caps
  +            label
  +              input(type="range" name="fw" min="100" max="900" step="100" value="400")
  +              input(type="text" value="400 (normal)" disabled="" style="width:100px;")
  +            input(type="reset")
  +        section.o-FlexContainer#ff-math
  +          h3(class="!w:1o1") Didot
  +          p.c-FontDescr.
  +            Didot is a serif modern type use for mathematical spans and spans in foreign
  +            languages. It has a radical thick/thin transition, vertical stress, and
  +            straight horizontal serifs. With a cold yet elegant look, this font family makes
  +            long spans of text hard to read, but that&rsquo;s okay because this font is
  +            used only for short expressions.
  +            #[br]
  +            Similar: #[b Bodoni 72], #[b Times]
  +          figure.c-FontSamp.u-ff_math
  +            div.c-FontSamp__Letter Aa
  +            p.c-FontSamp__Sentence Sixty zippers were quickly picked from the woven jute bag.
  +          form.c-FontForm
  +            label
  +              input(type="checkbox" name="fs" value="italic")
  +              |  italic
  +            label
  +              input(type="checkbox" name="fv" value="small-caps")
  +              |  small-caps
  +            label
  +              input(type="range" name="fw" min="100" max="900" step="100" value="400")
  +              input(type="text" value="400 (normal)" disabled="" style="width:100px;")
  +            input(type="reset")
  +        section.o-FlexContainer#ff-script
  +          h3(class="!w:1o1") Zapfino
  +          p.c-FontDescr.
  +            Zapfino is used for very fancy elements such as drop-caps and subheadings.
  +            Use this font family sparingly.
  +          figure.c-FontSamp.u-ff_script
  +            div.c-FontSamp__Letter Aa
  +            p.c-FontSamp__Sentence The quick brown fox jumps over the lazy dog.
  +          form.c-FontForm
  +            label
  +              input(type="checkbox" name="fs" value="italic")
  +              |  italic
  +            label
  +              input(type="checkbox" name="fv" value="small-caps")
  +              |  small-caps
  +            label
  +              input(type="range" name="fw" min="100" max="900" step="100" value="400")
  +              input(type="text" value="400 (normal)" disabled="" style="width:100px;")
  +            input(type="reset")
  +      section
  +        h2 Headings and Paragraphs
  +        figure
  +          h1 Heading 1
  +          p(lang="la").
  +            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  +            Aliquam sagittis suscipit nunc, a cursus libero euismod at.
  +            Nulla placerat neque massa, quis interdum leo efficitur vel.
  +            Donec feugiat varius arcu non volutpat.
  +            Mauris eget mauris ut mauris auctor mattis id vel justo.
  +            Nulla dictum arcu nec suscipit mollis.
  +            Maecenas a iaculis nisl, ut pretium est. Nulla facilisi.
  +          h2 Heading 2
  +          p(lang="la").
  +            Suspendisse ut auctor enim.
  +            Aliquam viverra enim vitae ante aliquet venenatis.
  +            Sed vel nibh sit amet sapien fermentum mattis nec non arcu.
  +            Praesent dapibus velit quis lectus tempus, ut ullamcorper nibh facilisis.
  +            Aenean tincidunt ante risus, semper malesuada libero consectetur id.
  +            Praesent vel ligula ut enim porttitor porta. Aenean eu ullamcorper mi.
  +            Integer blandit est quam, eget mattis urna scelerisque quis.
  +            Maecenas sapien sapien, ornare nec lobortis eget, tincidunt sed ligula.
  +            Maecenas risus nibh, volutpat sed euismod non, semper eget neque.
  +            Integer varius egestas risus, volutpat sagittis turpis convallis eget.
  +            Vivamus pulvinar ligula eget mi tincidunt, eget faucibus justo laoreet.
  +            In sapien lacus, egestas faucibus laoreet eu, tempor sit amet lorem.
  +            Sed luctus congue tortor a scelerisque.
  +          h3 Heading 3
  +          p(lang="la").
  +            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  +            Nunc sit amet scelerisque lectus. Cras cursus sed dui quis convallis.
  +            Quisque id justo elit.
  +            Fusce ut quam non sem efficitur accumsan sed id neque.
  +            Mauris finibus dignissim gravida.
  +            In dignissim mauris ac odio molestie volutpat.
  +            Nulla tellus justo, finibus sed volutpat sed, tristique ac lacus.
  +            Suspendisse sit amet fermentum sapien.
  +            Aliquam luctus laoreet iaculis.
  +            Proin lacinia orci vitae tellus pellentesque porttitor.
  +          h4 Heading 4
  +          p(lang="la").
  +            Aenean consectetur suscipit urna, non vehicula lacus blandit et.
  +            Integer at lacus et diam tristique suscipit.
  +            Ut cursus massa sit amet nisl convallis, elementum accumsan sapien mattis.
  +            Vestibulum vitae magna ac tellus accumsan pharetra vulputate vitae erat.
  +            Vestibulum est dui, elementum non sagittis ac, sagittis accumsan justo.
  +            Donec at vestibulum diam. Nam et volutpat dolor, at pulvinar nisi.
  +            Curabitur aliquam maximus nulla eu venenatis.
  +            Nam aliquam lorem non felis dignissim dictum.
  +            Pellentesque sagittis vehicula nisl non luctus.
  +            Pellentesque eget ligula hendrerit, blandit enim consequat, dictum sem.
  +            In quis lectus in lectus interdum laoreet eu quis quam.
  +            Fusce auctor posuere purus, quis semper libero dignissim euismod.
  +            Curabitur commodo mauris a sapien vulputate, eget pharetra urna facilisis.
  +          h5 Heading 5
  +          p(lang="la").
  +            Donec finibus ut lectus finibus pellentesque.
  +            Nulla euismod feugiat nulla nec posuere.
  +            Sed ac est id sem sagittis rhoncus eu ac neque.
  +            Aliquam eu metus sagittis, porta turpis id, scelerisque magna.
  +            Nulla venenatis elementum est, semper viverra felis tristique sit amet.
  +            Mauris nec ipsum id orci porttitor auctor sed sit amet sem.
  +            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  +            Etiam tellus leo, venenatis sit amet ipsum non, sagittis feugiat ante.
  +          h6 Heading 6
  +          p(lang="la").
  +            Donec vel dolor ut felis dapibus ultricies vitae a nibh.
  +            Ut semper odio est, sed lacinia ligula gravida ut.
  +            Vestibulum facilisis viverra pulvinar.
  +            Suspendisse maximus nisl sit amet augue vulputate, vel porta nunc molestie.
  +            Aliquam mauris diam, pharetra vel consectetur quis, rhoncus in risus.
  +            Donec ut quam massa.
  +            Vestibulum sapien justo, commodo a eros in, rhoncus interdum nisl.
  +            Etiam a porta lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         section
           h2 Portal Color Scheme
           footer.
  
positive.code:       .o-Cell {
          padding: 0.375rem 0.5rem;
        }
        .c-FontSample {
          font-size: 5rem;
          line-height: 1.2;
          text-rendering: geometricPrecision;
        }
        .this-c-FontDemo {
          margin-bottom: 1.5rem;
        }
        .this-c-FontDemo::after {
          content: '';
          display: block;
          border-bottom: 0.25rem solid #cbcfd4;
          margin-top: -0.25rem;
          position: relative;
          top: 0.75rem;
        }
        .ColorTitle {
          font-style: inherit;
  
negative.code:       $('#reset-pre').click(function () {
          pre.removeClass()
        })
        function fontdemo(self) {
          return $(self).closest('.o-FlexContainer').find('.c-FontSamp')
        }
        $('input[name="fs"]').change(function () {
          fontdemo(this).css('font-style', (this.checked) ? $(this).val() : '')
        })
        $('input[name="fv"]').change(function () {
          fontdemo(this).css('font-variant', (this.checked) ? $(this).val() : '')
        })
        $('input[name="fw"]').on('input change', function () {
          var val = $(this).val() // a string
          fontdemo(this).css('font-weight', val)
          var norm = (+val == 400) ? ' (normal)' : ''
          var bold = (+val == 700) ? ' (bold)' : ''
          $(this).siblings('input[type="text"]').val(val + norm + bold)
        })
        $('.c-FontForm input[type="reset"]').click(function () {
          fontdemo(this).css('font-style', '').css('font-variant','').css('font-weight', '')
        })
        //- $('#ff-script .c-FontSamp, #ff-script .c-FontSamp *').each(function () {
        //-   var old_lh = parseInt($(this).css('line-height')) / parseInt($(this).css('font-size'))
        //-   $(this).css('line-height', 2 * old_lh)
        //- })
  