anchor.diff:        $('#reset-pre').click(function () {
           pre.removeClass()
         })
  -      var fontdemo = $('.this-c-FontDemo')
  +      function fontdemo(self) {
  +        return $(self).closest('.o-FlexContainer').find('.c-FontSamp')
  +      }
         $('input[name="fs"]').change(function () {
  -        fontdemo.css('font-style', (this.checked) ? $(this).val() : '')
  +        fontdemo(this).css('font-style', (this.checked) ? $(this).val() : '')
         })
         $('input[name="fv"]').change(function () {
  -        fontdemo.css('font-variant', (this.checked) ? $(this).val() : '')
  -      })
  -      $('input[name="fw"]').change(function () {
  -        fontdemo.css('font-weight', (this.checked) ? $(this).val() : '')
  +        fontdemo(this).css('font-variant', (this.checked) ? $(this).val() : '')
         })
         $('input[name="fw"]').on('input change', function () {
           var val = $(this).val() // a string
  -        fontdemo.css('font-weight', val)
  +        fontdemo(this).css('font-weight', val)
           var norm = (+val == 400) ? ' (normal)' : ''
           var bold = (+val == 700) ? ' (bold)' : ''
  -        $('#js-text-fw').val(val + norm + bold)
  +        $(this).siblings('input[type="text"]').val(val + norm + bold)
         })
  -      $('#reset-fonts').click(function () {
  -        fontdemo.css('font-style', '').css('font-variant','').css('font-weight', '')
  +      $('.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)
  +      //- })
  
positive.code:     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.
        section
          h2 Portal Color Scheme
          footer.
  
negative.code:       .o-Cell {
          padding: 0.375rem 0.5rem;
        }
        .c-FontDescr {
          width: 61.803399%;
        }
        .c-FontSamp {
          width: 38.196601%;
        }
        .c-FontSamp__Letter {
          font-size: 6rem;
          line-height: 1;
          text-rendering: geometricPrecision;
        }
        .c-FontSamp__Sentence {
          font-size: 0.875rem;
          line-height: 1.71428571;
        }
        .c-FontForm {
          width: 38.196601%;
          margin-left: 61.803399%;
          margin-bottom: 1.5rem;
        }
        .c-FontForm > * {
          display: block;
        }
        .ColorTitle {
          font-style: inherit;
  