section#features.flx.flx-col.flx-jc.bg-beluga(data-component="features")
  .container.pt4
    .row.flx.flx-col-sm
      .col-lg-3.col-md-4.hidden-sm.hidden-xs
        h2.ttu.fs2 Features
        p These features are available in applications with OpenType support.
        ul.list-bare.p0.fw600.feat-list
          li.active
            a(href="#feat-case" data-noscroll) Case sensitive forms
          li
            a(href="#feat-tnum" data-noscroll) Tabular numerals
          li
            a(href="#feat-sups" data-noscroll) Superscript and subscript
          li
            a(href="#feat-numr" data-noscroll) Numerators and denominators
          li
            a(href="#feat-frac" data-noscroll) Arbitrary fractions
          li
            a(href="#feat-ordn" data-noscroll) Ordinals
          li
            a(href="#feat-zero" data-noscroll) Slashed zero
          li
            a(href="#feat-ss04" data-noscroll) Circular zero
          li
            a(href="#feat-liga" data-noscroll) Ligatures
          li
            a(href="#feat-cpsp" data-noscroll) Capital spacing
          li
            a(href="#feat-ss01" data-noscroll) Stylistic set 1 – Chocolate
          li
            a(href="#feat-ss02" data-noscroll) Stylistic set 2 – Strawberry
          li
            a(href="#feat-ss03" data-noscroll) Stylistic set 3 – Fudge

      .col-lg-6.col-lg-o1.col-md-8.flx: .flx-grow.posr
        #feat-case.featureset.flx.flx-col.active
          h3.ttu.fs2 Case Sensitive Forms
          p.mb0
            | Alternate punctuation and ornaments that offer better alignment
            | with upper case characters and lining figures.
          .feature.flx.flx-wrap-sm.fs4.ma.ta-c
            samp.feat.ff-norm
              | email@address.com
              br
              | /slash \backslash
              br
              | (parentheses)
              br
              | [brackets]
              br
              | {curly braces}
              br
              | punctuation ·•-–—«‹›»
              br
              | arrows ↑↗→↘↓↙←↖↔↕
            samp.feat.ff-case
              | EMAIL@ADDRESS.COM
              br
              | /SLASH \BACKSLASH
              br
              | (PARENTHESES)
              br
              | [BRACKETS]
              br
              | {CURLY BRACES}
              br
              | PUNCTUATION ·•-–—«‹›»
              br
              | ARROWS ↑↗→↘↓↙←↖↔↕

          code.ff-mono.txt-muted.pt3.brt.hidden-xs.hidden-sm
            | font-feature-settings: "case";

        #feat-tnum.featureset.flx.flx-col
          h3.ttu.fs2 Tabular Numerals
          p.mb0
            | Tabular numerals have a fixed width for alignment across many rows
            | of numbers, such as in tables. The numerals are duplexed, so each
            | figure shares the same advance width across every weight.
          .feature.flx.flx-wrap-sm.fs4.ma.ta-c
            samp.feat.ff-norm
              span.fw300 123123123
              br
              span.fw400 234234234
              br
              span.fw600 345345345
              br
              span.fw700 456456456
              br
              span.fw800 678678678
            samp.feat.ff-tnum
              span.fw300 123123123
              br
              span.fw400 234234234
              br
              span.fw600 345345345
              br
              span.fw700 456456456
              br
              span.fw800 678678678

          code.ff-mono.txt-muted.pt3.brt.hidden-xs.hidden-sm
            | font-feature-settings: "tnum";

        #feat-sups.featureset.flx.flx-col
          h3.ttu.fs2 Superscript and Subscript
          p.mb0
            | Superscript characters sit above the caps height while subscript
            | figures sit below the baseline.
          .feature.flx.flx-wrap-sm.fs4.ma.ta-c.ls300
            samp.feat.ff-norm 123456789®†‡
            samp.feat
              span.ff-sups 123456789®†‡
              span.ff-subs 123456789
          code.ff-mono.txt-muted.pt3.brt.hidden-xs.hidden-sm
            | font-feature-settings: "sups";
            br
            | font-feature-settings: "subs";

        #feat-numr.featureset.flx.flx-col
          h3.ttu.fs2 Numerators and Denominators
          p.mb0
            | Numerator and denominator characters align with the caps height
            | and the baseline.
          .feature.flx.flx-wrap-sm.fs4.ma.ta-c.ls300
            samp.feat.ff-norm 123456789
            samp.feat
              span.ff-numr 123456789
              span.ff-dnom 123456789
          code.ff-mono.txt-muted.pt3.brt.hidden-xs.hidden-sm
            | font-feature-settings: "numr";
            br
            | font-feature-settings: "dnom";

        #feat-frac.featureset.flx.flx-col
          h3.ttu.fs2 Arbitrary Fractions
          p.mb0
            | Arbitrary fractions match up to ten figures before and after a
            | slash character, replacing them with numerators, denominators
            | and the fraction glyph. The feature code intelligently avoids
            | incorrect cases, such as dates.
          .feature.flx.flx-wrap-sm.fs4.ma.ta-c
            samp.feat.ff-norm
              | 123456789/987654321
              br
              | Founded on 06/23/2005
            samp.feat.ff-frac
              | 123456789/987654321
              br
              | Founded on 06/23/2005

          code.ff-mono.txt-muted.pt3.brt.hidden-xs.hidden-sm
            | font-feature-settings: "frac";

        #feat-ordn.featureset.flx.flx-col
          h3.ttu.fs2 Ordinals
          p.mb0
            | Masculine and feminine ordinal indicators for Western European
            | languages such as Spanish, Portuguese, Italian, and Galician.
          .feature.flx.flx-wrap-sm.fs4.ma.ta-c
            samp.feat.ff-norm 8o 9a
            samp.feat.ff-ordn 8o 9a

          code.ff-mono.txt-muted.pt3.brt.hidden-xs.hidden-sm
            | font-feature-settings: "ordn";

        #feat-zero.featureset.flx.flx-col
          h3.ttu.fs2 Slashed Zero
          p.mb0
            | Slashed zero unambiguously differentiates zero and O, for
            | stylistic or functional requirements.
          .feature.flx.flx-wrap-sm.fs4.ma.ta-c
            samp.feat.ff-norm 0
            samp.feat.ff-zero 0
          code.ff-mono.txt-muted.pt3.brt.hidden-xs.hidden-sm
            | font-feature-settings: "zero"; // or
            br
            | font-variant: slashed-zero;

        #feat-ss04.featureset.flx.flx-col
          h3.ttu.fs2 Alternate zero
          p.mb0
            | Stylistic alternative to zero with a circular form.
          .feature.flx.flx-wrap-sm.fs4.ma.ta-c
            samp.feat.ff-norm
              | 0
              br
              span.txt-muted 2020
            samp.feat.ff-ss04
              | 0
              br
              span.txt-muted 2020

          code.ff-mono.txt-muted.pt3.brt.hidden-xs.hidden-sm
            | font-feature-settings: "ss04";

        #feat-liga.featureset.flx.flx-col
          h3.ttu.fs2 Ligatures
          p.mb0
            | Substitution of the lower case r and slash with a wider form
            | and tighter spacing for reading as a single unit.
            | This is enabled by default.
          .feature.flx.flx-wrap-sm.fs4.ma.ta-c
            samp.feat.ff-none
              | r/
              span.txt-muted sub
            samp.feat.ff-dlig
              | r/
              span.txt-muted sub
          code.ff-mono.txt-muted.pt3.brt.hidden-xs.hidden-sm
            | font-feature-settings: "liga";
            br
            | font-feature-settings: "liga" 0; // Disables default ligatures

        #feat-cpsp.featureset.flx.flx-col
          h3.ttu.fs2 Capital spacing
          p.mb0
            | Slight increase in spacing when setting text in all upper case.
          .feature.flx.flx-wrap-sm.fs4.ma.ta-c
            samp.feat.ff-norm
              span.fw300 FUNAMBULISTS
              br
              span.fw400 INTRANSIGENT
              br
              span.fw600 OXYMORONIC
              br
              span.fw700 MISCHIEVOUS
              br
              span.fw800 CALCULATING
            samp.feat.ff-cpsp
              span.fw300 FUNAMBULISTS
              br
              span.fw400 INTRANSIGENT
              br
              span.fw600 OXYMORONIC
              br
              span.fw700 MISCHIEVOUS
              br
              span.fw800 CALCULATING

          code.ff-mono.txt-muted.pt3.brt.hidden-xs.hidden-sm
            | font-feature-settings: "cpsp";

        #feat-ss01.featureset.flx.flx-col
          h3.ttu.fs2 Flavor 1 – Chocolate
          p.mb0
            | Alternate lower case glyphs with straight legs and circular bowls.

          .feature.flx.flx-wrap-sm.fs4.ma.ta-c
            samp.feat.ff-norm
              span.ls300
                | aáăắặằẳẵǎâấậầẩ
                br
                | ẫȁäȧạàảȃāąåǻãb
                br
                | dďđḍḏǆgǵğǧĝģ
                br
                | ġḡlĺľļŀḷǉḻłpþqtŧť
                br
                | ţțẗṭṯuúŭûȕüụùủư
                br
                | ứựừửữűȗūṻųůũṹ
              br
              span.txt-muted big padded quilt
            samp.feat.ff-ss01
              span.ls300
                | aáăắặằẳẵǎâấậầẩ
                br
                | ẫȁäȧạàảȃāąåǻãb
                br
                | dďđḍḏǆgǵğǧĝģ
                br
                | ġḡlĺľļŀḷǉḻłpþqtŧť
                br
                | ţțẗṭṯuúŭûȕüụùủư
                br
                | ứựừửữűȗūṻųůũṹ
              br
              span.txt-muted big padded quilt

          code.ff-mono.txt-muted.pt3.brt.hidden-xs.hidden-sm
            | font-feature-settings: "ss01";
          small.txt-muted
            | You can activate individual characters using the specific codes
            | "cv01" through "cv11". Additional italic variants are included
            | from "cv19" through to "cv23".

            | Separate font files are available for contexts 
            | where support for OpenType features is limited.

        #feat-ss02.featureset.flx.flx-col
          h3.ttu.fs2 Flavor 2 – Strawberry
          p.mb0
            | Cursive lower case i and single-storey a
            | to match u and d leg terminals.

          .feature.flx.flx-wrap-sm.fs4.ma.ta-c
            samp.feat.ff-norm
              span.ls300
                | aáăắặằẳẵǎ
                br
                | âấậầẩẫȁäȧ
                br
                | ạàảȃāąåǻã
                br
                | iíĭǐîȉïịìỉȋīįĩ
              br
              span.txt-muted audacious
            samp.feat.ff-strawberry
              span.ls300
                | aáăắặằẳẵǎ
                br
                | âấậầẩẫȁäȧ
                br
                | ạàảȃāąåǻã
                br
                | iíĭǐîȉïịìỉȋīįĩ
              br
              span.txt-muted audacious

          code.ff-mono.txt-muted.pt3.brt.hidden-xs.hidden-sm
            | font-feature-settings: "ss02";
          small.txt-muted
            | You can activate individual characters using the specific codes
            | "cv12" and "cv13".

            | Separate font files are available for contexts
            | where support for OpenType features is limited.

        #feat-ss03.featureset.flx.flx-col
          h3.ttu.fs2 Flavor 3 – Fudge
          p.mb0
            | Two-storey g, capital I with barred serifs and raised central
            | apex on upper and lower case W to meet caps- and x-height.
          .feature.flx.flx-wrap-sm.fs4.ma.ta-c
            samp.feat.ff-norm
              span.ls300
                | gğǧĝģġḡ
                br
                | IÍĬǏÎȈÏİỊÌỈȊĪĮĨ
                br
                | WẂŴẄẀ
                br
                | wẃŵẅẁ
              br
              span.txt-muted I’m weighty
            samp.feat.ff-fudge
              span.ls300
                | gğǧĝģġḡ
                br
                | IÍĬǏÎȈÏİỊÌỈȊĪĮĨ
                br
                | WẂŴẄẀ
                br
                | wẃŵẅẁ

              br
              span.txt-muted I’m weighty

          code.ff-mono.txt-muted.pt3.brt.hidden-xs.hidden-sm
            | font-feature-settings: "ss03";
          small.txt-muted
            | You can activate individual characters using the specific codes
            | "cv14" through "cv17".

            | Separate font files are available for contexts where
            | support for OpenType features is limited.
