<commit_before>/*-

Form elements

-*/
.form-submit p,
.enhanced .form-phrase,
.msg-error,
textarea {
    max-width: 40em;
}
// error message
.msg-error {
    background-color: #FCC;
    border: 1px solid #A00;
}
p.msg-error {
    padding: 0.9em;
}
.enhanced input[size] {
    max-width: 100%;
}
.form-submit label,
.form-submit label + * {
    display: block;
}
.form-submit label {
    margin-bottom: 0.5em;
}
.enhanced p.form-phrase {
    width: 100%;
}
// On smaller screens, let’s hide (JS-inserted) placeholder text by default, and make labels appear as intended
@media (max-width: 29.99em) {
    .enhanced .form-submit ::-webkit-input-placeholder { /* WebKit browsers */
        color: #FFF;
    }
    .enhanced .form-submit :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
       color: #FFF;
       opacity: 1;
    }
    .enhanced .form-submit ::-moz-placeholder { /* Mozilla Firefox 19+ */
       color: #FFF;
       opacity: 1;
    }
    .enhanced .form-submit :-ms-input-placeholder { /* Internet Explorer 10+ */
       color: #FFF;
    }
    .enhanced .form-submit ::placeholder {
       color: #FFF;
       opacity: 1;
    }
    .enhanced .form-submit ::-webkit-input-placeholder { /* WebKit browsers */
        color: #FFF;
    }
    .enhanced .form-submit .msg-error:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
       color: #FCC;
       opacity: 1;
    }
    .enhanced .form-submit .msg-error::-moz-placeholder { /* Mozilla Firefox 19+ */
       color: #FCC;
       opacity: 1;
    }
    .enhanced .form-submit .msg-error:-ms-input-placeholder { /* Internet Explorer 10+ */
       color: #FCC;
    }
    .enhanced .form-submit .msg-error::placeholder {
       color: #FCC;
       opacity: 1;
    }
    .enhanced input[size],
    .enhanced .form-submit label.a11y {
        width: 100%;
    }
    .enhanced .form-submit label.a11y {
        clip: inherit;
        display: block;
        height: inherit;
        position: static;
        white-space: inherit;
    }
    .enhanced .form-submit .cue {
        display: none;
    }
}
@media (min-width: 30em) {
    .form-submit p {
        display: flex;
        justify-content: space-between;
    }
    .form-submit label {
        margin-bottom: 0;
        width: 25%;
    }
    .form-submit label + * {
        flex: 1;
    }
    .enhanced p.form-phrase,
    .enhanced .form-phrase p {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: bottom;
    }
    .enhanced .form-phrase {
        line-height: 1.5;
    }
    .enhanced .form-phrase .field-text {
        border-width: 0 0 1px;
    }
}

.form-chooser {
    display: flex;
    flex-wrap: wrap;
    max-width: 40em;
    zoom: 1;
}
.form-chooser > * {
    float: left;
    flex: 1 0 50%;
    margin: 0;
    width: 50%;
}
.form-chooser label {
    background-position: 50% 80%;
    background-size: 50% auto;
    border-radius: 1em;
    border: 1px solid #FFF;
    box-shadow: inset 0 0 1px #FFF;
    box-sizing: border-box;
    cursor: pointer;
    flex: 1;
    margin-bottom: 0;
    padding: 20% 0 80%;
    text-align: center;
    transition: background-position 0.2s, background-size 0.2s ease-in-out, box-shadow 0.2s;
    width: 100%;
}
.form-chooser label:hover,
.enhanced .form-chooser input:focus + label,
.enhanced .form-chooser input:checked + label {
    background-position: 50% 60%;
    background-size: 52% auto;
}
.enhanced .form-chooser input:focus + label {
    box-shadow: inset 0 0 0.25em #D8D8D8;
}
.enhanced .form-chooser input {
    position: absolute;
    left: -1000em;
}
.enhanced .form-chooser input:checked + label {
    box-shadow: inset 0 0 0.5em #5DC8D5;
    font-weight: 500;
}
@media (min-width: 40em) {
    .form-chooser {
        flex-wrap: nowrap;
    }
    .form-chooser > * {
        flex: 1 0 25%;
        margin: 0;
        width: 25%;
    }
}

// CC license link
.link-cc {
    display: inline-block;
    font-size: 0.8125em;    /* 13/16 */
    margin: 1em 0;
}
.link-cc img {
    vertical-align: -0.1em;
    margin-right: 1em;
}
// “CTA” link (has a » on the side)
.link-cta:after {
    content: " »";
    display: inline-block;
    padding-left: 0.3em;
    text-decoration: none;
}
// Container for “primary” CTA link
.cta-primary {
    margin: 3em 0;
    text-align: right;
}
.cta-primary .link-cta {
    font-size: 1.5em;
    font-weight: 700;
}



/*-

Macro-level structural elements

-*/
// If a browser doesn’t support media queries, they get a centered, 500px-wide design.
.page {
    margin: 0 auto;
    width: 500px;
}
/*
If a browser DOES support media queries, then the “proper” layout is restored.
*/
@media (min-width: 0) {
    .page {
        margin: 0 3.055555555555555555%;    /* 44/1440 */
        max-width: 87.5em;
        width: inherit;
    }
}
// .page-main is the white area where most of the design appears.
.page-main {
    background-color: #FFF;
    background-position: 100% 0;
    color: map-get( $colors, "src-text-default" );
    padding: 1em 4.758364312267657992%;    /* 64/1345 */
    padding-bottom: 4vw;
    padding-top: 4vw;
    position: relative;
    zoom: 1;
}
.page-main:after {
    content: "";
    display: table;
    clear: both;
}
.oldie .page-main {
    padding: 1em;
}
/*
On wider screens, let’s center the design
*/
@media (min-width: 90em) {
    .page {
        margin: 0 auto;
    }
    .page-main {
        padding-bottom: 4em;
        padding-top: 4em;
    }
}



/*-

Main section (in white)

-*/
.page-main {
}
.page-main,
.site-search {
    background-size: 30% auto;
}
@media (min-width: 60em) {
    .page-main,
    .site-search {
        background-size: 25% auto;
    }
}
.tmpl-article .page-main {
    background-position: -1000px 0;
}
@media (min-width: 60em) {
    .tmpl-article .page-main {
        background-position: 0 0;
        background-size: 20% auto;
    }
}

/*
.content-main and .content-aside are used for 2-col layouts on wider screens, at a 75/25 split
*/
.content-main {
    margin-bottom: 4em;
}
@media (min-width: 60em) {
    .content-main {
        float: left;
        margin-bottom: 0;
        max-width: 60em;
        width: 74.285714285714285714%;    /* 884/1190 */
    }
    .content-aside {
        float: right;
        width: 21.176470588235294117%;    /* 252/1190 */
    }
}



/*-

“Modules” - in-page section dividers

-*/
.page-main .mod {
    margin-bottom: 2em;
}
.page-main .mod .hed-label {
    margin-bottom: 4em;
}
@media (min-width: 60em) {
    .content-main .mod {
        margin-bottom: 4em;
    }
    .content-aside .mod {
        margin-bottom: 5em;
    }
}



/*-

Header

-*/
@media (min-width: 0) {
    .site-header {
        display: flex;
        flex-direction: column-reverse;
        flex-wrap: wrap;
    }
}
.site-header a {
    color: #FFF;
    text-decoration: none;
}
.header-main {
    display: flex;
    text-align: center;
    margin-bottom: 0.5em;
}
.enhanced .header-main {
    text-align: left;
    margin-bottom: 0;
}
.header-main > * {
    display: inline-block;
    margin: 0;
}
.site-logo {
    flex: 1;
}
.site-logo a {
    display: flex;
    justify-content: center;
    padding: 0.7em;
}
.site-logo img {
    display: block;
    height: 0.9em;
}
// Toggle links
.header-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 2em;
    position: relative;
}
.header-main .nav-toggle {
    -ms-flex-order: -1;
     -webkit-order: -1;
             order: -1;
}
// Inside each toggle link is an `.icon`, whose visibility gets toggled as menus open/close
.site-header .icon {
    background-position: -1000px 0;
    background-color: #001A33;
    background-size: auto 18px;
    display: inline-block;
    border-radius: 0.1875em;    /* 6/32 */
    padding: 0.5em;
    line-height: 1;
}
.enhanced .site-header .icon {
    background-position: 50% 50%;
    height: 2em;
    padding: 0;
    text-indent: -1000em;
    width: 4em;
}
.enhanced .site-header .icon-close {
    background-color: #2676A0;
    border-radius: 0;
    bottom: 100%;
    height: inherit;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: inherit;
    transition: bottom 0.2s, opacity 0.2s;
}
.is-site-nav-open .nav-toggle .icon-close,
.is-site-search-open .search-toggle .icon-close {
    bottom: 0;
    opacity: 1;
}
.nav-toggle .icon-menu {
    background-size: auto 9px;
}
// Primary navigation
.site-nav {
    background-color: #2676A0;
    line-height: 1.2;
    padding: 0 0.5em;
}
.site-nav-links {
    display: flex;
    flex-wrap: wrap;
}
.oldie .site-nav-links {
    display: block;
}
.site-nav-links li {
    border-bottom: 1px solid #FFF;
    flex: 1 0 50%;
}
.site-nav-links li:nth-last-child( 1 ),
.site-nav-links li:nth-last-child( 2 ) {
    border-bottom: none;
}
.site-nav-links a {
    display: block;
    padding: 1em;
}
@media (min-width: 0) {
    .site-nav-links a {
        padding: 2em 1em;
    }
}
.site-nav-links a.is-active {
    color: #47BFF8;
    cursor: text;
}
.site-nav.collapsible-enhanced {
    margin: 0 -3.055555555555555555%;        /* 44/1440 */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s, opacity 0.2s;
}
.site-nav.collapsible-enhanced .site-nav-links {
    display: flex;
    flex-wrap: wrap;
}
.site-nav.collapsible-enhanced.collapsible-expanded {
    max-height: 22em;
    opacity: 1;
}
.supports-flex .site-nav.collapsible-expanded {
    max-height: 11em;
}
// Move from a 2-up grid in the navigation menu to a centered, single row of links
// NOTE: This may change if the number of links in the menu needs to increase.
@media (min-width: 23em) {
    .site-nav-links {
        flex-wrap: nowrap;
    }
    .site-nav-links li {
        float: left;
        border-bottom: none;
        flex-basis: 25%;
    }
    .site-nav.collapsible-enhanced .site-nav-links {
        max-height: 5em;
    }
    .site-nav-links a {
        text-align: center;
        position: relative;
        padding: 2em 0.8em;
    }
}
// Move the nav toggle off to the right, and introduce border highlights to the primary navigation
@media (min-width: 25em) {
    // From this point on, we’ll use `.site-logo a` to shim the height of the masthead
    .site-logo a {
        display: block;
        justify-content: initial;
        padding: 0.8em 0;
    }
    // Move nav-toggle to the right, next to nav-search
    .header-toggle + .header-toggle {
        margin-left: 0.5em;
    }
    .header-main .nav-toggle {
        -ms-flex-order: initial;
         -webkit-order: initial;
                 order: initial;
    }
    // Navigation highlight bars
    .site-nav {
        padding: 0;
    }
    .site-nav-links a:after {
        background: #FFF;
        top: 0;
        content: "";
        height: 0;
        left: 5%;
        position: absolute;
        right: 5%;
        transition: height 0.2s;
        width: 90%;
        z-index: 1;
    }
    .site-nav-links a:focus:after,
    .site-nav-links a:hover:after,
    .site-nav-links a.is-active:after {
        height: 0.5em;
    }
    .site-nav-links a.is-active:after {
        background-color: #47BFF8;
    }
}
// Move toward the “full” masthead: make the navigation visible by default, hide the navigation toggle, and position the search toggle off to the right
@media (min-width: 45em) {
    .site-header {
        flex-direction: row;
        flex-wrap: nowrap;
        position: relative;
        margin: 0 4.758364312267657992%;    /* 64/1345 */
    }
    .header-main {
        margin-right: 2.857142857142857142%;    /* 34/1190 */
        width: 12.268907563025210084%;    /* 146/1190 */
    }
    .site-logo {
        display: flex;
    }
    .oldie .site-logo {
        display: block;
        text-align: center;
    }
    .site-logo a {
        padding: 1em 0;
    }
    .site-logo img {
        display: block;
        width: 100%;
    }
    .nav-toggle {
        display: none;
    }
    .search-toggle {
        bottom: 0;
        position: absolute;
        right: 0;
        top: 0;
    }
    .site-nav.collapsible-enhanced .site-nav-links {
        max-height: inherit;
    }
    // Restore search icon to full size
    .enhanced .search-toggle .icon {
        background-color: inherit;
        background-size: 33px 33px;
        height: 100%;
        transition: background-position 0.2s, background-size 0.4s ease-in-out, transform 0.2s, opacity 0.2s;
        width: 33px;
    }
    // Hide the close icon by default
    .search-toggle .icon-close {
        background-size: 30px auto;
        transform: scale( 0 );
        opacity: 0;
    }
    // Open/close states for the search toggle
    .is-site-search-open .search-toggle .icon-close {
        transition-delay: 0.3s;
        opacity: 1;
        transform: scale( 1 );
    }
    .is-site-search-open .search-toggle .icon-search {
        background-position: left 50% bottom -33px;
        background-size: 0 0;
        opacity: 0.1;
        transition-delay: 0.2s;
    }
    // Make the primary navigation visible by default
    .enhanced .site-nav {
        background: inherit;
        margin: 0;
        overflow: visible;
        max-height: inherit;
    }
    .site-nav,
    .site-nav-links,
    .site-nav-links li,
    .site-nav-links a {
        display: flex;
    }
    .site-nav {
        width: 50%;
    }
    .site-nav-links,
    .site-nav-links a {
        width: 100%;
    }
    .site-nav-links li,
    .site-nav-links a {
        justify-content: center;
    }
    .site-nav-links a {
        box-sizing: border-box;
        align-items: center;
        padding: 0;
    }
    .site-nav-links a:after {
        top: auto;
        bottom: 0;
    }
    .site-nav-links a.is-active:after {
        height: 1em;
        bottom: -0.5em;
    }
}
@media (min-width: 55em) {
    // Bump up the vertical height of the masthead row
    .site-logo a {
        padding: 1.5em 0;
    }
    // Vertical tweak to line .nav-toggle up with the search button
    .nav-toggle {
        margin-right: 0.9em;
    }
}
@media (min-width: 60em) {
    // Bump up the vertical height of the masthead row
    .site-logo a {
        padding: 2em 0;
    }
}

/*
IE 9 fixes (I know, I know.)
*/
@media (min-width: 30em) {
    .oldie {
        .site-header:after {
            content: "";
            clear: both;
            display: table;
        }
        .site-header .site-logo {
            margin: 0;
        }
        .site-header .site-logo img {
            width: 150px;
        }
        .site-header a {
            display: block;
            padding-top: 1em;
            padding-bottom: 1em;
            vertical-align: middle;
        }
        .site-header a.nav-toggle {
            display: none;
        }
        .site-header a.header-toggle {
            bottom: auto;
            height: 33px;
            position: absolute;
            right: 1em;
            top: 0;
        }
        .site-header .icon-search {
            background-color: inherit;
            background-position: 50% 50%;
            display: block;
        }
        .site-nav {
            background: inherit;
            margin: 0;
            overflow: visible;
            max-height: inherit;
            margin-left: -2em;
            width: 100%;
        }
        .site-nav li {
            float: left;
            margin-right: 1em;
        }
        .site-nav a {
            display: block;
            padding: 2em;
        }
    }
}


/*-

Site search

-*/
.site-search,
.site-search a {
    color: #FFF;
}
.site-search {
    background-color: #22759F;
    background-position: 100% 0;
    clear: both;
    margin: 3em -1em 0;
    zoom: 1;
}
.site-search:after {
    content: "";
    clear: both;
    display: table;
}
.hed-search {
    font-size: 1em;
    font-weight: normal;
    margin-bottom: 0;
}
.form-search .hed-search {
    display: block;
    margin-bottom: 0.5em;
}
.hed-article-tease-search {
    margin: 0;
    font-size: 1.25em;
    line-height: 1.2;
}
@media (min-width: 20em) {
    .hed-article-tease-search {
        font-size: 1.4em;
    }
}
@media (min-width: 25em) {
    .hed-article-tease-search {
        font-size: 1.7em;
    }
}
@media (min-width: 40em) {
    .hed-article-tease-search {
        font-size: 1.7em;
    }
}
@media (min-width: 60em) {
    .hed-article-tease-search {
        font-size: 2em;
    }
}
@media (min-width: 70em) {
    .hed-article-tease-search {
        font-size: 2.25em;
    }
}
.site-search img {
    float: right;
    margin-bottom: 0.5em;
    margin-left: 0.5em;
}
.fields-search {
    display: flex;
}
.fields-search input {
    -webkit-appearance: none;
    border: none;
}
.text-search {
    border-radius: 0.2rem 0 0 0.2rem;
    color: #5C5C5C;
    font-size: 26px;
    font-size: 1.625rem;
    line-height: 1.3;
    padding: 0.1em 0.2em;
    flex: 1 0 auto;
    width: 84%;
}
@media (min-width: 30em) {
    .text-search {
        font-size: 40px;
        font-size: 2.5rem;
    }
}
@media (min-width: 50em) {
    .text-search {
        font-size: 48px;
        font-size: 3rem;
    }
}
.btn-search {
    background-color: #00314A;
    background-position: 50% 50%;
    border-radius: 0 0.2rem 0.2rem 0;
    background-size: 20px auto;
    cursor: pointer;
    text-indent: -1000em;
    transition: background-color 0.2s, background-size 0.2s;
    flex: 0 1 16%;
}
.btn-search:hover,
.btn-search:focus {
    background-color: #1896D7;
    background-size: 24px auto;
}
@media (min-width: 50em) {
    .btn-search {
        background-size: 33px 33px;
    }
    .btn-search:hover,
    .btn-search:focus {
        background-size: 36px 36px;
    }
}
.site-search-inner > * {
    padding: 1em;
}
@media (min-width: 50em) {
    .site-search-inner {
        display: flex;
        flex-direction: row-reverse;
    }
    .site-search-inner > * {
        box-sizing: border-box;
        margin: 1.5em 0;
        padding: 0 2em;
        width: 50%;
    }
    .site-search .article-tease {
        border-right: 1px solid #FFF;
        padding-left: 4.758364312267657992%;    /* 64/1345 */
    }
}
/*
Enhanced version
*/
// Hide the search panel by default, and position it at the top of .page-main
.site-search.collapsible-enhanced {
    left: 0;
    margin: 0;
    margin-top: 0;
    max-height: 0;
    opacity: 0.5;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    transition: max-height 0.2s, opacity 0.2s;
    transform: translateZ( 0 );
    z-index: 1;
}
// Override “off” state for search collapsible’s content (our actual form)
.site-search.collapsible-enhanced.collapsible-collapsed .collapsible-content {
    display: flex;
}
.tmpl-article .page-main .site-search {
    margin-left: 0;
}
// Expanded/“open” state for the search panel
.site-search.collapsible-expanded {
    opacity: 1;
    max-height: 20em;
    transition: max-height 0.2s, opacity 0.2s;
    transition-delay: 0.3s;
}
.site-search.collapsible-enhanced .btn-search {
    background-size: 0 0;
    transition-delay: 0.5s;
}
.site-search.collapsible-enhanced.collapsible-expanded .btn-search {
    background-size: 20px auto;
    transition-delay: 0;
}
@media (min-width: 50em) {
    .site-search.collapsible-enhanced.collapsible-expanded .btn-search {
        background-size: 33px 33px;
    }
}



/*-

Landing page

-*/
.main-lead {
    font-size: 1.25em;    /* 20/16 */
    line-height: 1.5;
    max-width: 24.08333333333333333333em;    /* 578/24 */
}
@media (min-width: 40em) {
    .main-lead {
        font-size: 1.5em;    /* 24/16 */
        line-height: 1.20833333333333333333;    /* 29/24 */
    }
}



/*-

Content styles

-*/

/*
Headings
*/
.article-main h2,
.article-main h3,
.article-main h4,
.article-main h5,
.article-main h6 {
    font-family: map-get( $fonts, "sans-base" );
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 0.1em;
    margin-top: 1.5em;
}
.wf-active .article-main h2,
.wf-active .article-main h3,
.wf-active .article-main h4,
.wf-active .article-main h5,
.wf-active .article-main h6 {
    font-family: map-get( $fonts, "sans" );
}
.article-main h2 {
    color: #F7786B;
    font-size: 1.2em;    /* 24/20 */
}
.article-main h3 {
    color: #7C8A98;
    font-size: 1em;
}
.article-main h4 {
    font-size: 0.9em;
}
.article-main h5,
.article-main h6 {
    font-size: 0.8125em;    /* 13/16 */
}
// .hed-label - little red headlines, they look like labels, naming things is difficult
.hed-label {
    background-color: map-get( $colors, "src-red-dark" );
    color: #FFF;
    display: inline-block;
    font-size: 0.8125em;    /* 13/16 */
    font-weight: 700;
    line-height: 1;
    padding: 1em 1.2em;
    margin-bottom: 1em;
    text-transform: uppercase;
}
a.hed-label {
    background-color: map-get( $colors, "src-red" );
    text-decoration: none;
    transition: 0.2s background-color;
}
a.hed-label:after {
    content: " »";
}
a.hed-label:focus,
a.hed-label:hover {
    background-color: map-get( $colors, "src-red-dark" );
    color: #FFF;
}
// .page-title-lead is, well, the lead/primary hed on articles + landing pages
.page-title-lead {
    font-size: 2em;    /* 32/16 */
    font-weight: 500;
    line-height: 1;
    margin: 0 0 0.5em;
}
@media (min-width: 40em) {
    .page-title-lead {
        font-size: 3em;    /* 48/16 */
    }
}
.page-title-sub .has-icon {
    background-position: 0 0.45em;
}
.article-subtitle-lead {
    font-size: 1.5em;    /* 24/16 */
    font-family: map-get( $fonts, "serif" );;
    font-weight: normal;
    line-height: 1.21;    /* 29/24 */
}
.wf-active .article-subtitle-lead {
    font-family: map-get( $fonts, "serif" );;
}
// .hed-sub is the…subhed style look I know {
.hed-sub,
legend {
    color: #F7786B;
    font-size: 0.8125em;    /* 13/16 */
    font-weight: 700;
    text-transform: uppercase;
}

/*
Figure styles
*/
.figure {
    font-family: map-get( $fonts, "serif" );;
    margin-bottom: 2em;
}
.wf-active .figure {
    font-family: map-get( $fonts, "serif" );;
}
.figure img {
    display: block;
    margin-bottom: 1em;
    width: 100%;
}
.figure figcaption,
.figure .caption {
    border-bottom: 1.125em solid #D8D8D8;    /* 18/16 */
    font-size: 16px;
    font-size: 1rem;
    padding-bottom: 1em;
}
.figure p {
    margin: 0;
}
.figure p+p {
    margin-top: 1em;
}
@media (min-width: 30em) {
    .figure-article-minor {
        float: right;
        margin-left: 5%;    /* 34/680 */
        width: 40%;    /* 272/680 */
    }
    .figure-article-minor figcaption,
    .figure-article-minor .caption {
        border-bottom: none;
        margin-bottom: 1em;
    }
}
@media (min-width: 46em) {
    .figure-article-lead figcaption,
    .figure-article-lead .caption {
        width: 37.829614604462474645%;    /* 373/986 */
    }
    .figure-article-full figcaption,
    .figure-article-full .caption {
        width: 54.852941176470588235%;    /* 373/680 */
    }
}

/*
Lists!
*/
// Generic lists!
.list {
    margin: 2em 0;
}
.list {
    line-height: 1.4;
}
.list li {
    margin-bottom: 0.5em;
}
.wf-active .list .has-icon {
    background-position: 0 0.3em;
}
.hed-sub + .list {
    margin-top: 0;
}
.list + .hed-sub {
    margin-top: 4em;
}
// Article lists. Basically just a list of headlines, with associated thumbs on the right
.list-articles {
    margin: 2em 0;
    max-width: 50em;
}
.list-articles img {
    float: right;
    margin-left: 1em;
    margin-right: 0;
    width: 35%;
}
.list-articles li {
    border-bottom: 1px solid #D8D8D8;
    padding-bottom: 2em;
    margin-bottom: 2em;
    zoom: 1;
}
.list-articles li:after {
    clear: both;
    content: "";
    display: table;
}
.list-articles li:last-child {
    border-bottom: none;
}
.list-articles a {
    color: inherit;
    text-decoration: none;
}
.list-articles .hed-article-title {
    font-size: 1.4em;
    line-height: 1.3;
    margin: 0;
}
.list-articles a .hed-article-title,
.list-articles a .link-cta {
    color: map-get( $colors, "link-default" );
    text-decoration: underline;
    transition: color 0.2s;
}
.list-articles a:focus .hed-article-title,
.list-articles a:hover .hed-article-title,
.list-articles a:focus .link-cta,
.list-articles a:hover .link-cta {
    color: map-get( $colors, "link-on" );
    text-decoration: none;
}
.list-articles .hed-article-subhed {
    font-size: 1.25em;
    font-weight: normal;
    line-height: 1.25;
    margin: 0.3em 0 0.75em;
}
.list-articles .summary {
    font-family: map-get( $fonts, "serif-base" );
    position: relative;
    font-size: 1.1em;
}
.wf-active .list-articles .summary {
    font-family: map-get( $fonts, "serif" );
}
.list-articles .hed-article-subhed + .summary:before {
    content: "";
    display: block;
    height: 3px;
    margin: 1.5em 0 0.5em;
    max-width: 10em;
    width: 20%;
    background: #D8D8D8;
}
@media (min-width: 40em) {
    .list-articles a > * {
        margin-right: 30%;
    }
    .list-articles img {
        float: right;
        margin-left: 1em;
        margin-right: 0;
        width: 25%;
    }
}

/*
Lead promo
*/
.promo-lead {
    padding-bottom: 3em;
    margin-bottom: 3em;
}
.promo-main .hed-label {
    display: inline-flex;
    flex: 0 1 auto;
    margin-right: auto;
    max-width: 10em; /* BUGFIX: iOS Safari inline-flex bug */
}
.hed-promo-lead {
    font-size: 1.4em;
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 0.5em;
}
.promo-pic {
    display: block;
    float: right;
    margin: 0 0 1em 1em;
    width: 40%;
}
.hed-promo-lead a {
    text-decoration: none;
}
.hed-promo-lead a:focus,
.hed-promo-lead a:hover {
    text-decoration: underline;
}
.hed-promo-subhead {
    font-size: 1.2em;
    font-weight: normal;
    line-height: 1.3;
    flex: 1;
}
.promo-byline {
    clear: right;
    flex: 0 1 auto;
    margin-top: auto;
}
@media (min-width: 30em) {
    .hed-promo-lead {
        font-size: 1.8em;
    }
    .hed-promo-subhead {
        font-size: 1.5em;
    }
}
@media (min-width: 50em) {
    .promo-lead {
        display: flex;
        justify-content: space-between;
    }
    .promo-pic,
    .promo-main {
        flex: 0 0 47.5%;
    }
    .promo-pic {
        float: none;
        margin: 0;
    }
    .promo-main {
        display: flex;
        flex-direction: column;
        max-width: 100%;
    }
    .promo-main > * {
        flex: 0 1 auto;
    }
}
@media (min-width: 60em) {
    .hed-promo-lead {
        font-size: 2.4em;
    }
}

/*
“About Source” block
*/
.promo-src-about {
    background-color: #492350;
    background-position: 100% 100%;
    background-size: auto 40%;
    color: #FFF;
    font-size: 1.3em;
    margin: -3rem 0 3rem;
    padding: 2.3em 5.3%;
    transition: background-size 0.2s;
}
@media (min-width: 40em) {
    .promo-src-about {
        background-size: auto 70%;
    }
}
@media (min-width: 50em) {
    .promo-src-about {
        background-size: auto 100%;
    }
}
.promo-src-about > * {
    max-width: 40em;
}
.promo-src-about a {
    color: #FFF;
}
.promo-src-about a:focus,
.promo-src-about a:hover {
    color: #8CDBF0;
}
// “Promo” lists. Contains (at widescreen) a 3-up grid of elements
.list-promos {
    font-size: 1.0625em;    /* 27 / 16 */
    line-height: 1.25;      /* 25/20 */
}
.src-promo {
    margin-bottom: 2em;
}
.src-promo a {
    display: block;
    text-decoration: none;
    color: inherit;
}
.src-promo img {
    display: block;
    margin-bottom: 0.4em;
}
.label-promo {
    color: map-get( $colors, "src-red" );
    display: block;
    font-size: 0.75em;
    text-decoration: none;
    text-transform: uppercase;
    margin-bottom: 0.4em;
}
.hed-promo {
    font-weight: 500;
}
a .hed-promo {
    color: map-get( $colors, "link-default" );
    text-decoration: underline;
    transition: color 0.2s;
}
a:focus .hed-promo,
a:hover .hed-promo {
    color: map-get( $colors, "link-on" );
    text-decoration: none;
}
@media (min-width: 23em) and (max-width: 39.99em) {
    .src-promo {
        border-bottom: 1px solid #C6C6C6;
        flex: 1 0 100%;
        margin-bottom: 2em;
        padding-bottom: 2em;
        width: 100%;
    }
    .src-promo:after {
        content: "";
        display: table;
        clear: both;
    }
    .src-promo:last-child {
        border-bottom: none;
    }
    .src-promo img {
        float: left;
        width: 33%;
        margin-right: 5%;
    }
    .src-promo .hed-promo,
    .src-promo .list-tags-short {
        margin-left: 38%;
    }
    .src-promo .hed-promo {
        font-size: 1.25em;    /* 20 / 16 */
    }
}
@media (min-width: 40em) {
    .list-promos {
        display: flex;
        flex-wrap: wrap;
    }
    .list-promos:after {
        content: "";
        display: block;
    }
    .src-promo,
    .list-promos:after {
        flex: 0 1 30%;
        margin-right: 3%;
        margin-bottom: 0;
    }
    .src-promo:nth-child( 3n ) {
        margin-right: 0;
    }
    .src-promo:first-child {
        width: inherit;
    }
    .tmpl-home .src-promo {
        margin-bottom: 2em;
    }
}
@media (min-width: 50em) {
    .list-promos {
        font-size: 1.25em;    /* 20 / 16 */
    }
}
// “Long” (block) and “short” (inline) lists of hashtags
.list-tags li {
    margin-bottom: 0.4em;
}
.list-tags-short li {
    display: inline-block;
    margin-bottom: 0.2em;
    margin-right: 0.1em;
}
// Topic lists.
.list-topics .topic {
    margin-bottom: 2em;
}
.hed-topic {
    font-size: 1.5em;    /* 24 / 16 */
    line-height: 1.25;
    margin-bottom: 0.25em;
}
.list-topics .list-compact {
    font-size: 1.25rem;
    line-height: 1.25;    /* 25/20 */
}
.list-compact li {
    display: inline;
}
@media (min-width: 30em),
(min-width: 60em) and (max-width: 69.99em) {
    .list-topics {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .list-topics .topic,
    .list-topics:after {
        width: 46%;
    }
    .list-topics .topic {
        margin-bottom: 4em;
    }
    .list-topics:after {
        content: "";
    }
}
@media (min-width: 50em) and (max-width: 59.99em),
(min-width: 70em) {
    .list-topics .topic,
    .list-topics:after {
        width: 31%;
    }
}
// In-article lists
.article-main ol,
.article-main ul {
    padding-left: 1em;
}
.article-main ol ol {
    margin-left: 1.5em;
}
.article-main ol li {
    list-style: decimal;
}
.article-main ul li {
    list-style: disc;
}
@media (min-width: 40em) {
    .article-main ul,
    .article-main ol {
        padding-left: 0;
    }
}
// Social/share links
.links-article-social {
    margin: 1.5em 0;
    position: relative;
    text-align: center;
}
.links-article-social li {
    margin: 0 0.3em;
}
ul.links-article-social {
    padding-left: 0;
}
ul.links-article-social li {
    list-style: none;
    display: inline-block;
}
.links-article-social a {
    background-position: 50% 50%;
    display: block;
    height: 70px;
    text-align: left;
    text-decoration: none;
    text-indent: -1000em;
    transition: transform 0.2s;
    width: 70px;
}
.links-article-social a:hover,
.links-article-social a:focus {
    transform: scale( 1.2 );
    z-index: 1;
}
.links-article-social .icon-comments {
    background-color: #F14835;
    background-size: 90% auto;
    color: #F14835;
    font-family: map-get( $fonts, "sans-base" );
}
.wf-active .links-article-social .icon-comments {
    font-family: map-get( $fonts, "sans" );
}
.links-article-social .icon-comments.comments-loaded {
    display: block;
    text-indent: 0;
    text-align: center;
    line-height: 67px;
}
.links-article-social .icon-twitter {
    background-color: #47BFF8;
    background-size: 32px auto;
}
.links-article-social .icon-facebook {
    background-color: #2482AF;
}
@media (min-width: 65em) {
    .links-article-social {
        position: absolute;
        top: 0;
        margin: 0;
        left: -25.184094256259204712%;    /* 171/679 */
    }
    ul.links-article-social li {
        display: block;
        margin: 0 0 8px;
    }
}
@media (min-width: 90em) {
    .links-article-social .icon-comments,
    .links-article-social .icon-facebook {
        transform-origin: 100% 50%;
    }
    .links-article-social .icon-twitter {
        left: 70px;
        position: absolute;
        top: 38px;
        transform-origin: 0 50%;
    }
}
// Recently added items
.list-recently li {
    list-style: none;
}
.list-recently,
.item-recent {
    padding-left: 0;
}
.item-recent {
    border-bottom: 1px solid #C6C6C6;
    margin-bottom: 1em;
    padding-bottom: 1em;
}
.item-recent:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.item-recent li {
    margin-bottom: 0.5em;
}
.item-recent a {
    font-size: 0.8125em;    /* 13 / 16 */
}
.item-recent a:focus,
.item-recent a:hover {
    color: map-get( $colors, "link-on" );
}
.hed-aside {
    line-height: 1.15;
    margin-bottom: 0.5em;
}
.hed-aside a {
    font-size: 1em;
}
.item-recent .has-icon {
    background-position: 0 0.2em;
    color: inherit;
    display: block;
    text-decoration: none;
}
// At lower breakpoints, let’s move to 2- and 3-col layouts. (But not above 60em, because at that point, we’ll be in the sidebar.)
@media (min-width: 30em) and (max-width: 59.99em) {
    .list-recently {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}
@media (min-width: 30em) and (max-width: 49.99em) {
    .item-recent {
        border: none;
        width: 44%;
    }
}
@media (min-width: 50em) and (max-width: 59.99em) {
    .list-recently:after,
    .item-recent {
        border: none;
        width: 31%;
    }
    .list-recently:after {
        content: "";
    }
}



/*-

Structural elements for article

-*/

/*
Article front matter
*/
.article-matter-front .list-tags li {
    display: inline;
    margin-bottom: 0.1em;
}
// Article block - metadata
.article-meta {
    font-size: 1.125em;    /* 18/16 */
    line-height: 1.2;
    margin-bottom: 1em;
}
.article-byline {
    margin-right: 2em;
}
.article-date {
    color: #959595;
    margin-left: auto;
}
@media (min-width: 30em) {
    .article-meta {
        display: flex;
        font-size: 1.125em;    /* 18/16 */
        line-height: 1.2;
    }
    .article-matter-front .article-date {
        position: absolute;
        top: 0.5em;
        right: 0;
    }
}
@media (max-width: 64.99em) {
    // If a browser supports flexbox, visually reposition the list-tags to the bottom on smaller screens
    .article-matter-front {
        display: flex;
        flex-direction: column;
        position: relative;
    }
    .article-matter-front .hed-label {
        display: inline-flex;
        margin-right: auto;
        max-width: 10em; /* BUGFIX: iOS Safari inline-flex bug */
        -ms-flex-order: -1;
         -webkit-order: -1;
                 order: -1;
    }
    .article-matter-front .list-tags {
        margin-bottom: 1.5em;
        -ms-flex-order: 2;
         -webkit-order: 2;
                 order: 2;
    }
}
@media (min-width: 65em) {
    .tmpl-article .page-main > * {
        margin-left: 14.369747899%;    /* 171 / 1190 */
    }
    .article-matter-front .hed-label,
    .article-matter-front .list-tags {
        float: left;
        margin-left: -17.342799188640973630%;    /* 171 / 986 */
        max-width: 15%;
    }
    .article-matter-front .hed-label {
        margin-top: 0.9em;
    }
    .article-matter-front .page-title-lead {
        max-width: 15em;
    }
    .article-matter-front .article-subtitle-lead {
        float: right;
        margin-bottom: 2.5em;
        padding-right: 31.034482758620689655%;    /* 306 / 986 */
        width: 68.864097363083164300%;    /* 679 / 986 */
    }
    .article-matter-front .list-tags li {
        display: block;
    }
    .article-meta {
        clear: right;
        margin-bottom: 1em;
    }
    .article-subtitle-lead + .list-tags + .article-meta:before {
        border-top: 1px solid #D8D8D8;
        content: "";
        margin-top: -1.1em;
        position: absolute;
        width: 17.3427992%;
    }
    .article-matter-front .article-date {
        position: static;
    }
}
/*
Article block - MAIN CONTENT
*/
.article-main {
    font-family: map-get( $fonts, "serif-base" );;
    font-size: 1.25em;
    line-height: 1.5;
    border-bottom: 1.125rem solid #D8D8D8;    /* 18/16 */
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
}
.wf-active .article-main {
    font-family: map-get( $fonts, "serif" );;
}
// Article credits
.article-links-relevant {
    margin-bottom: 4em;
}
.article-links-relevant ul {
    line-height: 1.375;
    margin-bottom: 2em;
}
.article-links-relevant li {
    margin-bottom: 0.6em;
    hyphens: auto;
}
@media (min-width: 50em) {
    .article-links-relevant ul {
        margin-bottom: 5.75em;
    }
}
.article-links-relevant ul:last-child {
    margin-bottom: 0;
}
@media (min-width: 50em) {
    .article-main {
        float: left;
        width: 65%;
    }
    .article-links-relevant {
        float: right;
        width: 25%;
    }
}
@media (min-width: 65em) {
    .article-main {
        /* If there are any floats before .article-main—e.g., if there’s no lead figure, and the hashtag list is long—clear them. */
        clear: left;
        /* Positioning context needed for social links */
        position: relative;
        width: 57.058823529411764705%;    /* 679/1190 */
    }
    .article-links-relevant {
        width: 14.369747899159663865%;    /* 171/1190 */
    }
    .tmpl-article .page-main .article-links-relevant {
        margin-left: 0;
    }
}



/*-

Article back matter

-*/
/*
Profiles
*/
.profile {
    margin-bottom: 3em;
}
.profile-photo {
    border-radius: 50%;
    float: right;
    margin-bottom: 1em;
    margin-left: 1em;
    max-width: 130px;
    max-width: 8.125rem;
    width: 30%;
}
.profile-name {
    font-size: 1.5em;
    font-weight: normal;
    line-height: 1.2;
    margin-bottom: 0.3em;
}
.profile-name cite {
    font-style: normal;
}
.profile-links {
    clear: both;
    color: #777;
    font-size: 0.8125;    /* 13/16 */
}
.profile-links li {
    margin-bottom: 0.6em;
}
.profile-links a {
    background-position: 0 50%;
    color: inherit;
    padding-left: 28px;
}
.profile-links a:focus,
.profile-links a:hover {
    color: map-get( $colors, "link-on" );
}
// In-article variant
.tmpl-article .profile-bio {
    font-family: map-get( $fonts, "serif" );;
    font-size: 1.125em;    /* 18/16 */
    line-height: 1.4;    /* 30/18 */
    margin-bottom: 1.5em;
    hyphens: auto;
}
.wf-active .tmpl-article .profile-bio {
    font-family: map-get( $fonts, "serif" );;
}
@media (min-width: 40em) {
    .tmpl-article .profile-bio {
        line-height: 1.66666666666666666666;    /* 30/18 */
        hyphens: inherit;
        margin-bottom: 0;
    }
    .tmpl-article .profile-links {
        display: flex;
    }
    .tmpl-article .profile-links li {
        margin-bottom: 0;
        margin-right: 1.5em;
    }
    .tmpl-article .profile-links li.link-main {
        flex: 1;
        text-align: left;
    }
    .tmpl-article .profile-links li:last-child {
        margin-right: 0;
    }
}
// On profile pages, we’ll move to a 2-column layout on wider screens
.profile-lead .profile-bio {
    clear: right;
}
.profile-lead .page-title-lead {
    max-width: 18em;
}
@media (min-width: 30em) {
    .profile-lead .profile-bio {
        clear: none;
    }
}
@media (min-width: 40em) {
    .profile-links {
        display: flex;
        max-width: 40em;
    }
    .supports-flex .profile-links {
        border-top: 1px solid #D8D8D8;
        padding-top: 0.5em;
    }
    .supports-flex .hed-promo + .profile-links,
    .supports-flex .profile-name + .profile-links {
        border-top: none;
        margin-top: 0.5em;
    }
    .profile-links li {
        margin-right: 2em;
    }
}

/*
Hashtag: hashtags
*/
.tag {
    background-color: #D8D8D8;
    border-radius: 0.45em;
    color: map-get( $colors, "src-text-default" );
    display: inline-block;
    font-size: 13px;
    font-size: 0.8125rem;    /* 13/16 */
    line-height: 1.1;
    padding: 0.45em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.1s;
}
.tag:focus,
.tag:hover {
    background-color: #C8C8C8;
    color: #333;
}
.tag:before {
    content: "#";
    color: inherit;
}

/*
Comments
*/
.article-comments {
    margin-bottom: 2em;
}
.article-matter-back {
    clear: both;
}
.article-matter-back > * {
    border-bottom: 1.125rem solid #D8D8D8;    /* 18/16 */
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
}
.article-matter-back > :last-child {
    border-bottom: none;
    padding-bottom: 0;
}
@media (min-width: 65em) {
    .article-matter-back > * {
        width: 68.864097363083164300%;    /* 679/986 */
    }
    .article-matter-back .hed-label {
        float: left;
        margin-left: -25.184094256259204712%;    /* 171 / 679 */
        margin-top: -0.6em;
    }
    .article-matter-back .article-related {
        width: 100%;
    }
    .article-matter-back .article-related .hed-label {
        margin-left: -17.342799188640973630%;    /* 171 / 986 */
    }
}

/*
Repo metadata
*/
.repo-meta {
    border-top: 1px solid #D8D8D8;
    clear: both;
    margin-bottom: 4em;
    margin-top: 1em;
}
.repo-meta a,
.repo-meta span {
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    display: inline-block;
}
.repo-meta .has-icon,
.repo-meta span {
    background-position: 0 0.55em;
}
.repo-meta span {
    padding-left: 30px;
}
@media (min-width: 30em) {
    .repo-meta {
        display: flex;
        justify-content: space-between;
    }
    .repo-meta li {
        margin-right: 2em;
    }
    .repo-meta li:last-child {
        flex: 1;
        text-align: right;
        margin-right: 0;
    }
    .repo-meta a,
    .repo-meta span {
        padding-top: 0.6em;
        padding-bottom: 0.6em;
        display: inline-block;
    }
    .repo-meta .has-icon {
        background-position: 0 0.95em;
    }
    .repo-meta span {
        padding-left: 0;
    }
}


<commit_msg>form-phrase enhancement fix<commit_after>/*-

Form elements

-*/
.form-submit p,
.form-phrase[data-enhanced-form-phrase],
.msg-error,
textarea {
    max-width: 40em;
}
// error message
.msg-error {
    background-color: #FCC;
    border: 1px solid #A00;
}
p.msg-error {
    padding: 0.9em;
}
.enhanced input[size] {
    max-width: 100%;
}
.form-submit label,
.form-submit label + * {
    display: block;
}
.form-submit label {
    margin-bottom: 0.5em;
}
.enhanced p.form-phrase {
    width: 100%;
}
// On smaller screens, let’s hide (JS-inserted) placeholder text by default, and make labels appear as intended
@media (max-width: 29.99em) {
    .enhanced .form-submit ::-webkit-input-placeholder { /* WebKit browsers */
        color: #FFF;
    }
    .enhanced .form-submit :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
       color: #FFF;
       opacity: 1;
    }
    .enhanced .form-submit ::-moz-placeholder { /* Mozilla Firefox 19+ */
       color: #FFF;
       opacity: 1;
    }
    .enhanced .form-submit :-ms-input-placeholder { /* Internet Explorer 10+ */
       color: #FFF;
    }
    .enhanced .form-submit ::placeholder {
       color: #FFF;
       opacity: 1;
    }
    .enhanced .form-submit ::-webkit-input-placeholder { /* WebKit browsers */
        color: #FFF;
    }
    .enhanced .form-submit .msg-error:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
       color: #FCC;
       opacity: 1;
    }
    .enhanced .form-submit .msg-error::-moz-placeholder { /* Mozilla Firefox 19+ */
       color: #FCC;
       opacity: 1;
    }
    .enhanced .form-submit .msg-error:-ms-input-placeholder { /* Internet Explorer 10+ */
       color: #FCC;
    }
    .enhanced .form-submit .msg-error::placeholder {
       color: #FCC;
       opacity: 1;
    }
    .enhanced input[size],
    .enhanced .form-submit label.a11y {
        width: 100%;
    }
    .enhanced .form-submit label.a11y {
        clip: inherit;
        display: block;
        height: inherit;
        position: static;
        white-space: inherit;
    }
    .enhanced .form-submit .cue {
        display: none;
    }
}
@media (min-width: 30em) {
    .form-submit p {
        display: flex;
        justify-content: space-between;
    }
    .form-submit label {
        margin-bottom: 0;
        width: 25%;
    }
    .form-submit label + * {
        flex: 1;
    }
    [data-enhanced-form-phrase] p.form-phrase,
    .form-phrase[data-enhanced-form-phrase] p {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: bottom;
    }
    .form-phrase[data-enhanced-form-phrase] {
        line-height: 1.5;
    }
    .form-phrase[data-enhanced-form-phrase] .field-text {
        border-width: 0 0 1px;
    }
}

.form-chooser {
    display: flex;
    flex-wrap: wrap;
    max-width: 40em;
    zoom: 1;
}
.form-chooser > * {
    float: left;
    flex: 1 0 50%;
    margin: 0;
    width: 50%;
}
.form-chooser label {
    background-position: 50% 80%;
    background-size: 50% auto;
    border-radius: 1em;
    border: 1px solid #FFF;
    box-shadow: inset 0 0 1px #FFF;
    box-sizing: border-box;
    cursor: pointer;
    flex: 1;
    margin-bottom: 0;
    padding: 20% 0 80%;
    text-align: center;
    transition: background-position 0.2s, background-size 0.2s ease-in-out, box-shadow 0.2s;
    width: 100%;
}
.form-chooser label:hover,
.enhanced .form-chooser input:focus + label,
.enhanced .form-chooser input:checked + label {
    background-position: 50% 60%;
    background-size: 52% auto;
}
.enhanced .form-chooser input:focus + label {
    box-shadow: inset 0 0 0.25em #D8D8D8;
}
.enhanced .form-chooser input {
    position: absolute;
    left: -1000em;
}
.enhanced .form-chooser input:checked + label {
    box-shadow: inset 0 0 0.5em #5DC8D5;
    font-weight: 500;
}
@media (min-width: 40em) {
    .form-chooser {
        flex-wrap: nowrap;
    }
    .form-chooser > * {
        flex: 1 0 25%;
        margin: 0;
        width: 25%;
    }
}

// CC license link
.link-cc {
    display: inline-block;
    font-size: 0.8125em;    /* 13/16 */
    margin: 1em 0;
}
.link-cc img {
    vertical-align: -0.1em;
    margin-right: 1em;
}
// “CTA” link (has a » on the side)
.link-cta:after {
    content: " »";
    display: inline-block;
    padding-left: 0.3em;
    text-decoration: none;
}
// Container for “primary” CTA link
.cta-primary {
    margin: 3em 0;
    text-align: right;
}
.cta-primary .link-cta {
    font-size: 1.5em;
    font-weight: 700;
}



/*-

Macro-level structural elements

-*/
// If a browser doesn’t support media queries, they get a centered, 500px-wide design.
.page {
    margin: 0 auto;
    width: 500px;
}
/*
If a browser DOES support media queries, then the “proper” layout is restored.
*/
@media (min-width: 0) {
    .page {
        margin: 0 3.055555555555555555%;    /* 44/1440 */
        max-width: 87.5em;
        width: inherit;
    }
}
// .page-main is the white area where most of the design appears.
.page-main {
    background-color: #FFF;
    background-position: 100% 0;
    color: map-get( $colors, "src-text-default" );
    padding: 1em 4.758364312267657992%;    /* 64/1345 */
    padding-bottom: 4vw;
    padding-top: 4vw;
    position: relative;
    zoom: 1;
}
.page-main:after {
    content: "";
    display: table;
    clear: both;
}
.oldie .page-main {
    padding: 1em;
}
/*
On wider screens, let’s center the design
*/
@media (min-width: 90em) {
    .page {
        margin: 0 auto;
    }
    .page-main {
        padding-bottom: 4em;
        padding-top: 4em;
    }
}



/*-

Main section (in white)

-*/
.page-main {
}
.page-main,
.site-search {
    background-size: 30% auto;
}
@media (min-width: 60em) {
    .page-main,
    .site-search {
        background-size: 25% auto;
    }
}
.tmpl-article .page-main {
    background-position: -1000px 0;
}
@media (min-width: 60em) {
    .tmpl-article .page-main {
        background-position: 0 0;
        background-size: 20% auto;
    }
}

/*
.content-main and .content-aside are used for 2-col layouts on wider screens, at a 75/25 split
*/
.content-main {
    margin-bottom: 4em;
}
@media (min-width: 60em) {
    .content-main {
        float: left;
        margin-bottom: 0;
        max-width: 60em;
        width: 74.285714285714285714%;    /* 884/1190 */
    }
    .content-aside {
        float: right;
        width: 21.176470588235294117%;    /* 252/1190 */
    }
}



/*-

“Modules” - in-page section dividers

-*/
.page-main .mod {
    margin-bottom: 2em;
}
.page-main .mod .hed-label {
    margin-bottom: 4em;
}
@media (min-width: 60em) {
    .content-main .mod {
        margin-bottom: 4em;
    }
    .content-aside .mod {
        margin-bottom: 5em;
    }
}



/*-

Header

-*/
@media (min-width: 0) {
    .site-header {
        display: flex;
        flex-direction: column-reverse;
        flex-wrap: wrap;
    }
}
.site-header a {
    color: #FFF;
    text-decoration: none;
}
.header-main {
    display: flex;
    text-align: center;
    margin-bottom: 0.5em;
}
.enhanced .header-main {
    text-align: left;
    margin-bottom: 0;
}
.header-main > * {
    display: inline-block;
    margin: 0;
}
.site-logo {
    flex: 1;
}
.site-logo a {
    display: flex;
    justify-content: center;
    padding: 0.7em;
}
.site-logo img {
    display: block;
    height: 0.9em;
}
// Toggle links
.header-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 2em;
    position: relative;
}
.header-main .nav-toggle {
    -ms-flex-order: -1;
     -webkit-order: -1;
             order: -1;
}
// Inside each toggle link is an `.icon`, whose visibility gets toggled as menus open/close
.site-header .icon {
    background-position: -1000px 0;
    background-color: #001A33;
    background-size: auto 18px;
    display: inline-block;
    border-radius: 0.1875em;    /* 6/32 */
    padding: 0.5em;
    line-height: 1;
}
.enhanced .site-header .icon {
    background-position: 50% 50%;
    height: 2em;
    padding: 0;
    text-indent: -1000em;
    width: 4em;
}
.enhanced .site-header .icon-close {
    background-color: #2676A0;
    border-radius: 0;
    bottom: 100%;
    height: inherit;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: inherit;
    transition: bottom 0.2s, opacity 0.2s;
}
.is-site-nav-open .nav-toggle .icon-close,
.is-site-search-open .search-toggle .icon-close {
    bottom: 0;
    opacity: 1;
}
.nav-toggle .icon-menu {
    background-size: auto 9px;
}
// Primary navigation
.site-nav {
    background-color: #2676A0;
    line-height: 1.2;
    padding: 0 0.5em;
}
.site-nav-links {
    display: flex;
    flex-wrap: wrap;
}
.oldie .site-nav-links {
    display: block;
}
.site-nav-links li {
    border-bottom: 1px solid #FFF;
    flex: 1 0 50%;
}
.site-nav-links li:nth-last-child( 1 ),
.site-nav-links li:nth-last-child( 2 ) {
    border-bottom: none;
}
.site-nav-links a {
    display: block;
    padding: 1em;
}
@media (min-width: 0) {
    .site-nav-links a {
        padding: 2em 1em;
    }
}
.site-nav-links a.is-active {
    color: #47BFF8;
    cursor: text;
}
.site-nav.collapsible-enhanced {
    margin: 0 -3.055555555555555555%;        /* 44/1440 */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s, opacity 0.2s;
}
.site-nav.collapsible-enhanced .site-nav-links {
    display: flex;
    flex-wrap: wrap;
}
.site-nav.collapsible-enhanced.collapsible-expanded {
    max-height: 22em;
    opacity: 1;
}
.supports-flex .site-nav.collapsible-expanded {
    max-height: 11em;
}
// Move from a 2-up grid in the navigation menu to a centered, single row of links
// NOTE: This may change if the number of links in the menu needs to increase.
@media (min-width: 23em) {
    .site-nav-links {
        flex-wrap: nowrap;
    }
    .site-nav-links li {
        float: left;
        border-bottom: none;
        flex-basis: 25%;
    }
    .site-nav.collapsible-enhanced .site-nav-links {
        max-height: 5em;
    }
    .site-nav-links a {
        text-align: center;
        position: relative;
        padding: 2em 0.8em;
    }
}
// Move the nav toggle off to the right, and introduce border highlights to the primary navigation
@media (min-width: 25em) {
    // From this point on, we’ll use `.site-logo a` to shim the height of the masthead
    .site-logo a {
        display: block;
        justify-content: initial;
        padding: 0.8em 0;
    }
    // Move nav-toggle to the right, next to nav-search
    .header-toggle + .header-toggle {
        margin-left: 0.5em;
    }
    .header-main .nav-toggle {
        -ms-flex-order: initial;
         -webkit-order: initial;
                 order: initial;
    }
    // Navigation highlight bars
    .site-nav {
        padding: 0;
    }
    .site-nav-links a:after {
        background: #FFF;
        top: 0;
        content: "";
        height: 0;
        left: 5%;
        position: absolute;
        right: 5%;
        transition: height 0.2s;
        width: 90%;
        z-index: 1;
    }
    .site-nav-links a:focus:after,
    .site-nav-links a:hover:after,
    .site-nav-links a.is-active:after {
        height: 0.5em;
    }
    .site-nav-links a.is-active:after {
        background-color: #47BFF8;
    }
}
// Move toward the “full” masthead: make the navigation visible by default, hide the navigation toggle, and position the search toggle off to the right
@media (min-width: 45em) {
    .site-header {
        flex-direction: row;
        flex-wrap: nowrap;
        position: relative;
        margin: 0 4.758364312267657992%;    /* 64/1345 */
    }
    .header-main {
        margin-right: 2.857142857142857142%;    /* 34/1190 */
        width: 12.268907563025210084%;    /* 146/1190 */
    }
    .site-logo {
        display: flex;
    }
    .oldie .site-logo {
        display: block;
        text-align: center;
    }
    .site-logo a {
        padding: 1em 0;
    }
    .site-logo img {
        display: block;
        width: 100%;
    }
    .nav-toggle {
        display: none;
    }
    .search-toggle {
        bottom: 0;
        position: absolute;
        right: 0;
        top: 0;
    }
    .site-nav.collapsible-enhanced .site-nav-links {
        max-height: inherit;
    }
    // Restore search icon to full size
    .enhanced .search-toggle .icon {
        background-color: inherit;
        background-size: 33px 33px;
        height: 100%;
        transition: background-position 0.2s, background-size 0.4s ease-in-out, transform 0.2s, opacity 0.2s;
        width: 33px;
    }
    // Hide the close icon by default
    .search-toggle .icon-close {
        background-size: 30px auto;
        transform: scale( 0 );
        opacity: 0;
    }
    // Open/close states for the search toggle
    .is-site-search-open .search-toggle .icon-close {
        transition-delay: 0.3s;
        opacity: 1;
        transform: scale( 1 );
    }
    .is-site-search-open .search-toggle .icon-search {
        background-position: left 50% bottom -33px;
        background-size: 0 0;
        opacity: 0.1;
        transition-delay: 0.2s;
    }
    // Make the primary navigation visible by default
    .enhanced .site-nav {
        background: inherit;
        margin: 0;
        overflow: visible;
        max-height: inherit;
    }
    .site-nav,
    .site-nav-links,
    .site-nav-links li,
    .site-nav-links a {
        display: flex;
    }
    .site-nav {
        width: 50%;
    }
    .site-nav-links,
    .site-nav-links a {
        width: 100%;
    }
    .site-nav-links li,
    .site-nav-links a {
        justify-content: center;
    }
    .site-nav-links a {
        box-sizing: border-box;
        align-items: center;
        padding: 0;
    }
    .site-nav-links a:after {
        top: auto;
        bottom: 0;
    }
    .site-nav-links a.is-active:after {
        height: 1em;
        bottom: -0.5em;
    }
}
@media (min-width: 55em) {
    // Bump up the vertical height of the masthead row
    .site-logo a {
        padding: 1.5em 0;
    }
    // Vertical tweak to line .nav-toggle up with the search button
    .nav-toggle {
        margin-right: 0.9em;
    }
}
@media (min-width: 60em) {
    // Bump up the vertical height of the masthead row
    .site-logo a {
        padding: 2em 0;
    }
}

/*
IE 9 fixes (I know, I know.)
*/
@media (min-width: 30em) {
    .oldie {
        .site-header:after {
            content: "";
            clear: both;
            display: table;
        }
        .site-header .site-logo {
            margin: 0;
        }
        .site-header .site-logo img {
            width: 150px;
        }
        .site-header a {
            display: block;
            padding-top: 1em;
            padding-bottom: 1em;
            vertical-align: middle;
        }
        .site-header a.nav-toggle {
            display: none;
        }
        .site-header a.header-toggle {
            bottom: auto;
            height: 33px;
            position: absolute;
            right: 1em;
            top: 0;
        }
        .site-header .icon-search {
            background-color: inherit;
            background-position: 50% 50%;
            display: block;
        }
        .site-nav {
            background: inherit;
            margin: 0;
            overflow: visible;
            max-height: inherit;
            margin-left: -2em;
            width: 100%;
        }
        .site-nav li {
            float: left;
            margin-right: 1em;
        }
        .site-nav a {
            display: block;
            padding: 2em;
        }
    }
}


/*-

Site search

-*/
.site-search,
.site-search a {
    color: #FFF;
}
.site-search {
    background-color: #22759F;
    background-position: 100% 0;
    clear: both;
    margin: 3em -1em 0;
    zoom: 1;
}
.site-search:after {
    content: "";
    clear: both;
    display: table;
}
.hed-search {
    font-size: 1em;
    font-weight: normal;
    margin-bottom: 0;
}
.form-search .hed-search {
    display: block;
    margin-bottom: 0.5em;
}
.hed-article-tease-search {
    margin: 0;
    font-size: 1.25em;
    line-height: 1.2;
}
@media (min-width: 20em) {
    .hed-article-tease-search {
        font-size: 1.4em;
    }
}
@media (min-width: 25em) {
    .hed-article-tease-search {
        font-size: 1.7em;
    }
}
@media (min-width: 40em) {
    .hed-article-tease-search {
        font-size: 1.7em;
    }
}
@media (min-width: 60em) {
    .hed-article-tease-search {
        font-size: 2em;
    }
}
@media (min-width: 70em) {
    .hed-article-tease-search {
        font-size: 2.25em;
    }
}
.site-search img {
    float: right;
    margin-bottom: 0.5em;
    margin-left: 0.5em;
}
.fields-search {
    display: flex;
}
.fields-search input {
    -webkit-appearance: none;
    border: none;
}
.text-search {
    border-radius: 0.2rem 0 0 0.2rem;
    color: #5C5C5C;
    font-size: 26px;
    font-size: 1.625rem;
    line-height: 1.3;
    padding: 0.1em 0.2em;
    flex: 1 0 auto;
    width: 84%;
}
@media (min-width: 30em) {
    .text-search {
        font-size: 40px;
        font-size: 2.5rem;
    }
}
@media (min-width: 50em) {
    .text-search {
        font-size: 48px;
        font-size: 3rem;
    }
}
.btn-search {
    background-color: #00314A;
    background-position: 50% 50%;
    border-radius: 0 0.2rem 0.2rem 0;
    background-size: 20px auto;
    cursor: pointer;
    text-indent: -1000em;
    transition: background-color 0.2s, background-size 0.2s;
    flex: 0 1 16%;
}
.btn-search:hover,
.btn-search:focus {
    background-color: #1896D7;
    background-size: 24px auto;
}
@media (min-width: 50em) {
    .btn-search {
        background-size: 33px 33px;
    }
    .btn-search:hover,
    .btn-search:focus {
        background-size: 36px 36px;
    }
}
.site-search-inner > * {
    padding: 1em;
}
@media (min-width: 50em) {
    .site-search-inner {
        display: flex;
        flex-direction: row-reverse;
    }
    .site-search-inner > * {
        box-sizing: border-box;
        margin: 1.5em 0;
        padding: 0 2em;
        width: 50%;
    }
    .site-search .article-tease {
        border-right: 1px solid #FFF;
        padding-left: 4.758364312267657992%;    /* 64/1345 */
    }
}
/*
Enhanced version
*/
// Hide the search panel by default, and position it at the top of .page-main
.site-search.collapsible-enhanced {
    left: 0;
    margin: 0;
    margin-top: 0;
    max-height: 0;
    opacity: 0.5;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    transition: max-height 0.2s, opacity 0.2s;
    transform: translateZ( 0 );
    z-index: 1;
}
// Override “off” state for search collapsible’s content (our actual form)
.site-search.collapsible-enhanced.collapsible-collapsed .collapsible-content {
    display: flex;
}
.tmpl-article .page-main .site-search {
    margin-left: 0;
}
// Expanded/“open” state for the search panel
.site-search.collapsible-expanded {
    opacity: 1;
    max-height: 20em;
    transition: max-height 0.2s, opacity 0.2s;
    transition-delay: 0.3s;
}
.site-search.collapsible-enhanced .btn-search {
    background-size: 0 0;
    transition-delay: 0.5s;
}
.site-search.collapsible-enhanced.collapsible-expanded .btn-search {
    background-size: 20px auto;
    transition-delay: 0;
}
@media (min-width: 50em) {
    .site-search.collapsible-enhanced.collapsible-expanded .btn-search {
        background-size: 33px 33px;
    }
}



/*-

Landing page

-*/
.main-lead {
    font-size: 1.25em;    /* 20/16 */
    line-height: 1.5;
    max-width: 24.08333333333333333333em;    /* 578/24 */
}
@media (min-width: 40em) {
    .main-lead {
        font-size: 1.5em;    /* 24/16 */
        line-height: 1.20833333333333333333;    /* 29/24 */
    }
}



/*-

Content styles

-*/

/*
Headings
*/
.article-main h2,
.article-main h3,
.article-main h4,
.article-main h5,
.article-main h6 {
    font-family: map-get( $fonts, "sans-base" );
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 0.1em;
    margin-top: 1.5em;
}
.wf-active .article-main h2,
.wf-active .article-main h3,
.wf-active .article-main h4,
.wf-active .article-main h5,
.wf-active .article-main h6 {
    font-family: map-get( $fonts, "sans" );
}
.article-main h2 {
    color: #F7786B;
    font-size: 1.2em;    /* 24/20 */
}
.article-main h3 {
    color: #7C8A98;
    font-size: 1em;
}
.article-main h4 {
    font-size: 0.9em;
}
.article-main h5,
.article-main h6 {
    font-size: 0.8125em;    /* 13/16 */
}
// .hed-label - little red headlines, they look like labels, naming things is difficult
.hed-label {
    background-color: map-get( $colors, "src-red-dark" );
    color: #FFF;
    display: inline-block;
    font-size: 0.8125em;    /* 13/16 */
    font-weight: 700;
    line-height: 1;
    padding: 1em 1.2em;
    margin-bottom: 1em;
    text-transform: uppercase;
}
a.hed-label {
    background-color: map-get( $colors, "src-red" );
    text-decoration: none;
    transition: 0.2s background-color;
}
a.hed-label:after {
    content: " »";
}
a.hed-label:focus,
a.hed-label:hover {
    background-color: map-get( $colors, "src-red-dark" );
    color: #FFF;
}
// .page-title-lead is, well, the lead/primary hed on articles + landing pages
.page-title-lead {
    font-size: 2em;    /* 32/16 */
    font-weight: 500;
    line-height: 1;
    margin: 0 0 0.5em;
}
@media (min-width: 40em) {
    .page-title-lead {
        font-size: 3em;    /* 48/16 */
    }
}
.page-title-sub .has-icon {
    background-position: 0 0.45em;
}
.article-subtitle-lead {
    font-size: 1.5em;    /* 24/16 */
    font-family: map-get( $fonts, "serif" );;
    font-weight: normal;
    line-height: 1.21;    /* 29/24 */
}
.wf-active .article-subtitle-lead {
    font-family: map-get( $fonts, "serif" );;
}
// .hed-sub is the…subhed style look I know {
.hed-sub,
legend {
    color: #F7786B;
    font-size: 0.8125em;    /* 13/16 */
    font-weight: 700;
    text-transform: uppercase;
}

/*
Figure styles
*/
.figure {
    font-family: map-get( $fonts, "serif" );;
    margin-bottom: 2em;
}
.wf-active .figure {
    font-family: map-get( $fonts, "serif" );;
}
.figure img {
    display: block;
    margin-bottom: 1em;
    width: 100%;
}
.figure figcaption,
.figure .caption {
    border-bottom: 1.125em solid #D8D8D8;    /* 18/16 */
    font-size: 16px;
    font-size: 1rem;
    padding-bottom: 1em;
}
.figure p {
    margin: 0;
}
.figure p+p {
    margin-top: 1em;
}
@media (min-width: 30em) {
    .figure-article-minor {
        float: right;
        margin-left: 5%;    /* 34/680 */
        width: 40%;    /* 272/680 */
    }
    .figure-article-minor figcaption,
    .figure-article-minor .caption {
        border-bottom: none;
        margin-bottom: 1em;
    }
}
@media (min-width: 46em) {
    .figure-article-lead figcaption,
    .figure-article-lead .caption {
        width: 37.829614604462474645%;    /* 373/986 */
    }
    .figure-article-full figcaption,
    .figure-article-full .caption {
        width: 54.852941176470588235%;    /* 373/680 */
    }
}

/*
Lists!
*/
// Generic lists!
.list {
    margin: 2em 0;
}
.list {
    line-height: 1.4;
}
.list li {
    margin-bottom: 0.5em;
}
.wf-active .list .has-icon {
    background-position: 0 0.3em;
}
.hed-sub + .list {
    margin-top: 0;
}
.list + .hed-sub {
    margin-top: 4em;
}
// Article lists. Basically just a list of headlines, with associated thumbs on the right
.list-articles {
    margin: 2em 0;
    max-width: 50em;
}
.list-articles img {
    float: right;
    margin-left: 1em;
    margin-right: 0;
    width: 35%;
}
.list-articles li {
    border-bottom: 1px solid #D8D8D8;
    padding-bottom: 2em;
    margin-bottom: 2em;
    zoom: 1;
}
.list-articles li:after {
    clear: both;
    content: "";
    display: table;
}
.list-articles li:last-child {
    border-bottom: none;
}
.list-articles a {
    color: inherit;
    text-decoration: none;
}
.list-articles .hed-article-title {
    font-size: 1.4em;
    line-height: 1.3;
    margin: 0;
}
.list-articles a .hed-article-title,
.list-articles a .link-cta {
    color: map-get( $colors, "link-default" );
    text-decoration: underline;
    transition: color 0.2s;
}
.list-articles a:focus .hed-article-title,
.list-articles a:hover .hed-article-title,
.list-articles a:focus .link-cta,
.list-articles a:hover .link-cta {
    color: map-get( $colors, "link-on" );
    text-decoration: none;
}
.list-articles .hed-article-subhed {
    font-size: 1.25em;
    font-weight: normal;
    line-height: 1.25;
    margin: 0.3em 0 0.75em;
}
.list-articles .summary {
    font-family: map-get( $fonts, "serif-base" );
    position: relative;
    font-size: 1.1em;
}
.wf-active .list-articles .summary {
    font-family: map-get( $fonts, "serif" );
}
.list-articles .hed-article-subhed + .summary:before {
    content: "";
    display: block;
    height: 3px;
    margin: 1.5em 0 0.5em;
    max-width: 10em;
    width: 20%;
    background: #D8D8D8;
}
@media (min-width: 40em) {
    .list-articles a > * {
        margin-right: 30%;
    }
    .list-articles img {
        float: right;
        margin-left: 1em;
        margin-right: 0;
        width: 25%;
    }
}

/*
Lead promo
*/
.promo-lead {
    padding-bottom: 3em;
    margin-bottom: 3em;
}
.promo-main .hed-label {
    display: inline-flex;
    flex: 0 1 auto;
    margin-right: auto;
    max-width: 10em; /* BUGFIX: iOS Safari inline-flex bug */
}
.hed-promo-lead {
    font-size: 1.4em;
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 0.5em;
}
.promo-pic {
    display: block;
    float: right;
    margin: 0 0 1em 1em;
    width: 40%;
}
.hed-promo-lead a {
    text-decoration: none;
}
.hed-promo-lead a:focus,
.hed-promo-lead a:hover {
    text-decoration: underline;
}
.hed-promo-subhead {
    font-size: 1.2em;
    font-weight: normal;
    line-height: 1.3;
    flex: 1;
}
.promo-byline {
    clear: right;
    flex: 0 1 auto;
    margin-top: auto;
}
@media (min-width: 30em) {
    .hed-promo-lead {
        font-size: 1.8em;
    }
    .hed-promo-subhead {
        font-size: 1.5em;
    }
}
@media (min-width: 50em) {
    .promo-lead {
        display: flex;
        justify-content: space-between;
    }
    .promo-pic,
    .promo-main {
        flex: 0 0 47.5%;
    }
    .promo-pic {
        float: none;
        margin: 0;
    }
    .promo-main {
        display: flex;
        flex-direction: column;
        max-width: 100%;
    }
    .promo-main > * {
        flex: 0 1 auto;
    }
}
@media (min-width: 60em) {
    .hed-promo-lead {
        font-size: 2.4em;
    }
}

/*
“About Source” block
*/
.promo-src-about {
    background-color: #492350;
    background-position: 100% 100%;
    background-size: auto 40%;
    color: #FFF;
    font-size: 1.3em;
    margin: -3rem 0 3rem;
    padding: 2.3em 5.3%;
    transition: background-size 0.2s;
}
@media (min-width: 40em) {
    .promo-src-about {
        background-size: auto 70%;
    }
}
@media (min-width: 50em) {
    .promo-src-about {
        background-size: auto 100%;
    }
}
.promo-src-about > * {
    max-width: 40em;
}
.promo-src-about a {
    color: #FFF;
}
.promo-src-about a:focus,
.promo-src-about a:hover {
    color: #8CDBF0;
}
// “Promo” lists. Contains (at widescreen) a 3-up grid of elements
.list-promos {
    font-size: 1.0625em;    /* 27 / 16 */
    line-height: 1.25;      /* 25/20 */
}
.src-promo {
    margin-bottom: 2em;
}
.src-promo a {
    display: block;
    text-decoration: none;
    color: inherit;
}
.src-promo img {
    display: block;
    margin-bottom: 0.4em;
}
.label-promo {
    color: map-get( $colors, "src-red" );
    display: block;
    font-size: 0.75em;
    text-decoration: none;
    text-transform: uppercase;
    margin-bottom: 0.4em;
}
.hed-promo {
    font-weight: 500;
}
a .hed-promo {
    color: map-get( $colors, "link-default" );
    text-decoration: underline;
    transition: color 0.2s;
}
a:focus .hed-promo,
a:hover .hed-promo {
    color: map-get( $colors, "link-on" );
    text-decoration: none;
}
@media (min-width: 23em) and (max-width: 39.99em) {
    .src-promo {
        border-bottom: 1px solid #C6C6C6;
        flex: 1 0 100%;
        margin-bottom: 2em;
        padding-bottom: 2em;
        width: 100%;
    }
    .src-promo:after {
        content: "";
        display: table;
        clear: both;
    }
    .src-promo:last-child {
        border-bottom: none;
    }
    .src-promo img {
        float: left;
        width: 33%;
        margin-right: 5%;
    }
    .src-promo .hed-promo,
    .src-promo .list-tags-short {
        margin-left: 38%;
    }
    .src-promo .hed-promo {
        font-size: 1.25em;    /* 20 / 16 */
    }
}
@media (min-width: 40em) {
    .list-promos {
        display: flex;
        flex-wrap: wrap;
    }
    .list-promos:after {
        content: "";
        display: block;
    }
    .src-promo,
    .list-promos:after {
        flex: 0 1 30%;
        margin-right: 3%;
        margin-bottom: 0;
    }
    .src-promo:nth-child( 3n ) {
        margin-right: 0;
    }
    .src-promo:first-child {
        width: inherit;
    }
    .tmpl-home .src-promo {
        margin-bottom: 2em;
    }
}
@media (min-width: 50em) {
    .list-promos {
        font-size: 1.25em;    /* 20 / 16 */
    }
}
// “Long” (block) and “short” (inline) lists of hashtags
.list-tags li {
    margin-bottom: 0.4em;
}
.list-tags-short li {
    display: inline-block;
    margin-bottom: 0.2em;
    margin-right: 0.1em;
}
// Topic lists.
.list-topics .topic {
    margin-bottom: 2em;
}
.hed-topic {
    font-size: 1.5em;    /* 24 / 16 */
    line-height: 1.25;
    margin-bottom: 0.25em;
}
.list-topics .list-compact {
    font-size: 1.25rem;
    line-height: 1.25;    /* 25/20 */
}
.list-compact li {
    display: inline;
}
@media (min-width: 30em),
(min-width: 60em) and (max-width: 69.99em) {
    .list-topics {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .list-topics .topic,
    .list-topics:after {
        width: 46%;
    }
    .list-topics .topic {
        margin-bottom: 4em;
    }
    .list-topics:after {
        content: "";
    }
}
@media (min-width: 50em) and (max-width: 59.99em),
(min-width: 70em) {
    .list-topics .topic,
    .list-topics:after {
        width: 31%;
    }
}
// In-article lists
.article-main ol,
.article-main ul {
    padding-left: 1em;
}
.article-main ol ol {
    margin-left: 1.5em;
}
.article-main ol li {
    list-style: decimal;
}
.article-main ul li {
    list-style: disc;
}
@media (min-width: 40em) {
    .article-main ul,
    .article-main ol {
        padding-left: 0;
    }
}
// Social/share links
.links-article-social {
    margin: 1.5em 0;
    position: relative;
    text-align: center;
}
.links-article-social li {
    margin: 0 0.3em;
}
ul.links-article-social {
    padding-left: 0;
}
ul.links-article-social li {
    list-style: none;
    display: inline-block;
}
.links-article-social a {
    background-position: 50% 50%;
    display: block;
    height: 70px;
    text-align: left;
    text-decoration: none;
    text-indent: -1000em;
    transition: transform 0.2s;
    width: 70px;
}
.links-article-social a:hover,
.links-article-social a:focus {
    transform: scale( 1.2 );
    z-index: 1;
}
.links-article-social .icon-comments {
    background-color: #F14835;
    background-size: 90% auto;
    color: #F14835;
    font-family: map-get( $fonts, "sans-base" );
}
.wf-active .links-article-social .icon-comments {
    font-family: map-get( $fonts, "sans" );
}
.links-article-social .icon-comments.comments-loaded {
    display: block;
    text-indent: 0;
    text-align: center;
    line-height: 67px;
}
.links-article-social .icon-twitter {
    background-color: #47BFF8;
    background-size: 32px auto;
}
.links-article-social .icon-facebook {
    background-color: #2482AF;
}
@media (min-width: 65em) {
    .links-article-social {
        position: absolute;
        top: 0;
        margin: 0;
        left: -25.184094256259204712%;    /* 171/679 */
    }
    ul.links-article-social li {
        display: block;
        margin: 0 0 8px;
    }
}
@media (min-width: 90em) {
    .links-article-social .icon-comments,
    .links-article-social .icon-facebook {
        transform-origin: 100% 50%;
    }
    .links-article-social .icon-twitter {
        left: 70px;
        position: absolute;
        top: 38px;
        transform-origin: 0 50%;
    }
}
// Recently added items
.list-recently li {
    list-style: none;
}
.list-recently,
.item-recent {
    padding-left: 0;
}
.item-recent {
    border-bottom: 1px solid #C6C6C6;
    margin-bottom: 1em;
    padding-bottom: 1em;
}
.item-recent:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.item-recent li {
    margin-bottom: 0.5em;
}
.item-recent a {
    font-size: 0.8125em;    /* 13 / 16 */
}
.item-recent a:focus,
.item-recent a:hover {
    color: map-get( $colors, "link-on" );
}
.hed-aside {
    line-height: 1.15;
    margin-bottom: 0.5em;
}
.hed-aside a {
    font-size: 1em;
}
.item-recent .has-icon {
    background-position: 0 0.2em;
    color: inherit;
    display: block;
    text-decoration: none;
}
// At lower breakpoints, let’s move to 2- and 3-col layouts. (But not above 60em, because at that point, we’ll be in the sidebar.)
@media (min-width: 30em) and (max-width: 59.99em) {
    .list-recently {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}
@media (min-width: 30em) and (max-width: 49.99em) {
    .item-recent {
        border: none;
        width: 44%;
    }
}
@media (min-width: 50em) and (max-width: 59.99em) {
    .list-recently:after,
    .item-recent {
        border: none;
        width: 31%;
    }
    .list-recently:after {
        content: "";
    }
}



/*-

Structural elements for article

-*/

/*
Article front matter
*/
.article-matter-front .list-tags li {
    display: inline;
    margin-bottom: 0.1em;
}
// Article block - metadata
.article-meta {
    font-size: 1.125em;    /* 18/16 */
    line-height: 1.2;
    margin-bottom: 1em;
}
.article-byline {
    margin-right: 2em;
}
.article-date {
    color: #959595;
    margin-left: auto;
}
@media (min-width: 30em) {
    .article-meta {
        display: flex;
        font-size: 1.125em;    /* 18/16 */
        line-height: 1.2;
    }
    .article-matter-front .article-date {
        position: absolute;
        top: 0.5em;
        right: 0;
    }
}
@media (max-width: 64.99em) {
    // If a browser supports flexbox, visually reposition the list-tags to the bottom on smaller screens
    .article-matter-front {
        display: flex;
        flex-direction: column;
        position: relative;
    }
    .article-matter-front .hed-label {
        display: inline-flex;
        margin-right: auto;
        max-width: 10em; /* BUGFIX: iOS Safari inline-flex bug */
        -ms-flex-order: -1;
         -webkit-order: -1;
                 order: -1;
    }
    .article-matter-front .list-tags {
        margin-bottom: 1.5em;
        -ms-flex-order: 2;
         -webkit-order: 2;
                 order: 2;
    }
}
@media (min-width: 65em) {
    .tmpl-article .page-main > * {
        margin-left: 14.369747899%;    /* 171 / 1190 */
    }
    .article-matter-front .hed-label,
    .article-matter-front .list-tags {
        float: left;
        margin-left: -17.342799188640973630%;    /* 171 / 986 */
        max-width: 15%;
    }
    .article-matter-front .hed-label {
        margin-top: 0.9em;
    }
    .article-matter-front .page-title-lead {
        max-width: 15em;
    }
    .article-matter-front .article-subtitle-lead {
        float: right;
        margin-bottom: 2.5em;
        padding-right: 31.034482758620689655%;    /* 306 / 986 */
        width: 68.864097363083164300%;    /* 679 / 986 */
    }
    .article-matter-front .list-tags li {
        display: block;
    }
    .article-meta {
        clear: right;
        margin-bottom: 1em;
    }
    .article-subtitle-lead + .list-tags + .article-meta:before {
        border-top: 1px solid #D8D8D8;
        content: "";
        margin-top: -1.1em;
        position: absolute;
        width: 17.3427992%;
    }
    .article-matter-front .article-date {
        position: static;
    }
}
/*
Article block - MAIN CONTENT
*/
.article-main {
    font-family: map-get( $fonts, "serif-base" );;
    font-size: 1.25em;
    line-height: 1.5;
    border-bottom: 1.125rem solid #D8D8D8;    /* 18/16 */
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
}
.wf-active .article-main {
    font-family: map-get( $fonts, "serif" );;
}
// Article credits
.article-links-relevant {
    margin-bottom: 4em;
}
.article-links-relevant ul {
    line-height: 1.375;
    margin-bottom: 2em;
}
.article-links-relevant li {
    margin-bottom: 0.6em;
    hyphens: auto;
}
@media (min-width: 50em) {
    .article-links-relevant ul {
        margin-bottom: 5.75em;
    }
}
.article-links-relevant ul:last-child {
    margin-bottom: 0;
}
@media (min-width: 50em) {
    .article-main {
        float: left;
        width: 65%;
    }
    .article-links-relevant {
        float: right;
        width: 25%;
    }
}
@media (min-width: 65em) {
    .article-main {
        /* If there are any floats before .article-main—e.g., if there’s no lead figure, and the hashtag list is long—clear them. */
        clear: left;
        /* Positioning context needed for social links */
        position: relative;
        width: 57.058823529411764705%;    /* 679/1190 */
    }
    .article-links-relevant {
        width: 14.369747899159663865%;    /* 171/1190 */
    }
    .tmpl-article .page-main .article-links-relevant {
        margin-left: 0;
    }
}



/*-

Article back matter

-*/
/*
Profiles
*/
.profile {
    margin-bottom: 3em;
}
.profile-photo {
    border-radius: 50%;
    float: right;
    margin-bottom: 1em;
    margin-left: 1em;
    max-width: 130px;
    max-width: 8.125rem;
    width: 30%;
}
.profile-name {
    font-size: 1.5em;
    font-weight: normal;
    line-height: 1.2;
    margin-bottom: 0.3em;
}
.profile-name cite {
    font-style: normal;
}
.profile-links {
    clear: both;
    color: #777;
    font-size: 0.8125;    /* 13/16 */
}
.profile-links li {
    margin-bottom: 0.6em;
}
.profile-links a {
    background-position: 0 50%;
    color: inherit;
    padding-left: 28px;
}
.profile-links a:focus,
.profile-links a:hover {
    color: map-get( $colors, "link-on" );
}
// In-article variant
.tmpl-article .profile-bio {
    font-family: map-get( $fonts, "serif" );;
    font-size: 1.125em;    /* 18/16 */
    line-height: 1.4;    /* 30/18 */
    margin-bottom: 1.5em;
    hyphens: auto;
}
.wf-active .tmpl-article .profile-bio {
    font-family: map-get( $fonts, "serif" );;
}
@media (min-width: 40em) {
    .tmpl-article .profile-bio {
        line-height: 1.66666666666666666666;    /* 30/18 */
        hyphens: inherit;
        margin-bottom: 0;
    }
    .tmpl-article .profile-links {
        display: flex;
    }
    .tmpl-article .profile-links li {
        margin-bottom: 0;
        margin-right: 1.5em;
    }
    .tmpl-article .profile-links li.link-main {
        flex: 1;
        text-align: left;
    }
    .tmpl-article .profile-links li:last-child {
        margin-right: 0;
    }
}
// On profile pages, we’ll move to a 2-column layout on wider screens
.profile-lead .profile-bio {
    clear: right;
}
.profile-lead .page-title-lead {
    max-width: 18em;
}
@media (min-width: 30em) {
    .profile-lead .profile-bio {
        clear: none;
    }
}
@media (min-width: 40em) {
    .profile-links {
        display: flex;
        max-width: 40em;
    }
    .supports-flex .profile-links {
        border-top: 1px solid #D8D8D8;
        padding-top: 0.5em;
    }
    .supports-flex .hed-promo + .profile-links,
    .supports-flex .profile-name + .profile-links {
        border-top: none;
        margin-top: 0.5em;
    }
    .profile-links li {
        margin-right: 2em;
    }
}

/*
Hashtag: hashtags
*/
.tag {
    background-color: #D8D8D8;
    border-radius: 0.45em;
    color: map-get( $colors, "src-text-default" );
    display: inline-block;
    font-size: 13px;
    font-size: 0.8125rem;    /* 13/16 */
    line-height: 1.1;
    padding: 0.45em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.1s;
}
.tag:focus,
.tag:hover {
    background-color: #C8C8C8;
    color: #333;
}
.tag:before {
    content: "#";
    color: inherit;
}

/*
Comments
*/
.article-comments {
    margin-bottom: 2em;
}
.article-matter-back {
    clear: both;
}
.article-matter-back > * {
    border-bottom: 1.125rem solid #D8D8D8;    /* 18/16 */
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
}
.article-matter-back > :last-child {
    border-bottom: none;
    padding-bottom: 0;
}
@media (min-width: 65em) {
    .article-matter-back > * {
        width: 68.864097363083164300%;    /* 679/986 */
    }
    .article-matter-back .hed-label {
        float: left;
        margin-left: -25.184094256259204712%;    /* 171 / 679 */
        margin-top: -0.6em;
    }
    .article-matter-back .article-related {
        width: 100%;
    }
    .article-matter-back .article-related .hed-label {
        margin-left: -17.342799188640973630%;    /* 171 / 986 */
    }
}

/*
Repo metadata
*/
.repo-meta {
    border-top: 1px solid #D8D8D8;
    clear: both;
    margin-bottom: 4em;
    margin-top: 1em;
}
.repo-meta a,
.repo-meta span {
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    display: inline-block;
}
.repo-meta .has-icon,
.repo-meta span {
    background-position: 0 0.55em;
}
.repo-meta span {
    padding-left: 30px;
}
@media (min-width: 30em) {
    .repo-meta {
        display: flex;
        justify-content: space-between;
    }
    .repo-meta li {
        margin-right: 2em;
    }
    .repo-meta li:last-child {
        flex: 1;
        text-align: right;
        margin-right: 0;
    }
    .repo-meta a,
    .repo-meta span {
        padding-top: 0.6em;
        padding-bottom: 0.6em;
        display: inline-block;
    }
    .repo-meta .has-icon {
        background-position: 0 0.95em;
    }
    .repo-meta span {
        padding-left: 0;
    }
}



{'fraction_non_alphanumeric': 0.15055162861782406, 'fraction_numerical': 0.05050625656700736, 'mean_word_length': 1.9655477657389704, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 10, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5254965', 'n_tokens_mistral': 34345, 'n_tokens_neox': 30729, 'n_words': 7014}