/*
Style rules are written with two sections
at current, separated by an empty line.

1. for layout, positioning, and related.

2. for visual configuration such
as color, font, background, etc.

EX:
.selector {
    layout style: rule here

    visual style: rule here
}

EX:
.article {
    position: relative;
    width: 100%;

    color: blue;
    text-decoration: none;
}

*/

@import 'vendor/normalize.css';
@import 'library-vars.css';

/* utilities */
.skip-to-content {
    position: absolute;
    top: 0;
    left: 0;
    margin: -1000px;
}

.skip-to-content:focus {
    margin: 0;
}

/* typography */

body {
    display: grid;
    grid-template-columns: 5% 3% 6% 6% 15% 30% 15% 6% 6% 3% 5%;
    overflow-x: hidden;

    font-weight: 400;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

a.more {
    padding: .4em .7em;

    background: black;
    color: white;
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    font-size: 1.2em;
    text-transform: none;
    text-decoration: none;
    text-shadow: none;
}


/* ************************* */

/* temp */

/* body > header {display: none;} */
/* body > footer {display: none;} */

/* components */

/* post component - singular */

.post header {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: baseline;
    width: 100%;
}

.post .categories {
    order: -1;

    font-family: 'Source Sans Pro';
}

/* post component - plural */

.posts {
    text-align: center;
}

.posts > h2 {
    margin-bottom: 2.1em;

    font-family: 'Roboto Condensed';
    /* font-size: 2.1em; */
    font-style: normal;
    font-weight: 700;
    text-transform: none;
    text-align: left;
}

.posts .post {
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    'title title'
    'image teaser';
    gap: 2em;
    margin-bottom: 8em;
    position: relative;

    text-align: left;
}

/* .posts .post header {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: baseline;
    width: 100%;
} */

.posts .post h2, .posts .post h3 {
    grid-area: title;
    width: 100%;
    margin-top: 0.83em;

    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    font-size: 2.1em;
    text-transform: none;
    text-transform: initial;
}

/* .posts .post .categories {
    order: -1;

    font-family: 'Source Sans Pro';
} */

.posts .post .byline {
    font-family: 'Source Sans Pro';
}

.posts .post .type {
    position: absolute;
    top: 0;
    right: 0;
    padding: .5em .7em;

    background: var(--vocabulary-brand-color-soft-turquoise);
    border-radius: 4px;
    font-family: 'Source Sans Pro';
}

.posts .post figure {
    display: inline-block;
    width: 50%;
    grid-area: image;
    margin: 0;
    padding: 0;
    flex: 1;
}

.posts .post img {
    width: 100%;
}

.posts .post p {
    flex: 1;
    display: inline-block;
    grid-area: teaser;
    margin-top: 0;
}

.posts a.more {
    display: inline-block;
    margin: 0 auto;
    margin-bottom: 4em;
}

.posts .attribution {
    display: inline-block;
    margin-top: 1em;

    font-family: 'Source Sans Pro';
}

/* contexts - in ascending order of specificity */

/* .posts .related variant context */

/* <main> level context */

main {
    display: grid;
    grid-template-columns: subgrid;
    width: 100%;
    margin: 0;
    margin-bottom: 8em;
    padding: 0;
    grid-column: 1 / 12;
}

main > * {
    grid-column: 5 / span 3;
}

main > header {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 4em;
    padding-top: 2em;
    padding-bottom: 1em;
    position: relative;
    grid-template-columns: subgrid;
    grid-column: 5 / span 3;

    text-align: center;
    color: #333; /* for testing */
}

main > header:before {
    width: 100vw;
    height: 100%;
    position: absolute;
    left: -33.333%;
    top: 0;
    z-index: -1;
    content: '';

    background: #F5F5F5;
}

main > header h1 {
    width: 100%;
    margin-top: .39em;
    margin-bottom: 0;
    grid: 0 / auto;

    font-family: 'Roboto Condensed';
    font-size: 3.56em;
    font-style: normal;
    font-weight: 700;
    /* text-transform: uppercase; */
}

main > header h2 {
    margin: 0;
    margin-top: .2em;
}

main > header a {
    color: var(--vocabulary-brand-color-dark-tomato);
    --underline-background-color: var(--vocabulary-neutral-color-lighter-gray);
}

main > header .categories {
    order: -1;

    font-family: 'Source Sans Pro';
    font-size: 1.2em;
    font-style: normal;
    font-weight: 400;
}

main > header .byline {
    display: block;
    width: 100%;
    margin-top: 2em;
    margin-bottom: 2em;

    font-family: 'Source Sans Pro';
    font-size: 1.2em;
    font-style: normal;
    font-weight: 400;
    font-style: italic;
}

/* if aside is present, split to two-col */
main:has( > aside.sidebar) > div { /* was '>  *' */
    grid-column: 2 / span 5;
}

main:has( > aside.sidebar) > article {
    grid-column: 2 / span 5;
}

main:has( > aside.sidebar) > aside.sidebar {
    grid-column: 7 / span 4;
    grid-row-start: 2;
    padding-left: 4.1em;
}

main > aside.sidebar h2 {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    font-size: 1.5em;
}

main > aside.sidebar nav {
    margin-bottom: 3em;
}

main > aside.sidebar nav.filter-menu ul li {
    margin-bottom: 0;
    padding: 1em;
}

main > aside.sidebar nav.filter-menu ul li.current {
    background: var(--vocabulary-brand-color-soft-tomato);
    /* padding: 1em; */
    font-weight: bold;
}

main > aside.sidebar nav.filter-menu ul li.current a {
    --underline-background-color: var(--vocabulary-brand-color-soft-tomato);
}

main > aside.sidebar nav ul {
    margin: 0;
    padding: 0;

    text-indent: none;
    list-style: none;
    font-size: 1rem;
    font-weight: 700;
}

main > aside.sidebar nav ul ul {
    margin-top: .8em;
    margin-left: 1em;
}

main > aside.sidebar nav ul li {
    margin-bottom: 1em;

    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    font-size: 1.1em;
    line-height: 150%;
}

main > aside.sidebar nav ul ul li {
    margin-bottom: .8em;
}

main > aside.sidebar nav ul ul {
    margin-left: 1em;
}

main > aside.sidebar nav ul ul li {
    margin-bottom: .8em;
}

main > aside.sidebar p {
    font-size: 1em;
}

main > aside.sidebar .attention {
    margin-top: 5em;
    padding: 1.5em;

    background: var(--vocabulary-brand-color-soft-turquoise);
}

main > aside.sidebar .attention a {
    --underline-background-color: var(--vocabulary-brand-color-soft-turquoise);
}

main h2 {
    width: 100%;
    box-sizing: border-box;

    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    font-size: 2.1em;
    text-transform: none;
}

main h3 {
    box-sizing: border-box;

    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    font-size: 1.75em;
    text-transform: none;
}

main aside.opening {
    display: inline-block;
    box-sizing: border-box;
    width: 25%;
    margin-bottom: 2em;
    padding: 2em;
    width: 100%;

    background: #FEEDE9;
}


main aside.opening a {
    color: var(--vocabulary-brand-color-dark-tomato);
    --underline-background-color: #FEEDE9;
}

main aside.opening p {
    margin :0;

    font-family: 'Source Sans Pro';
    font-size: 1.2em;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

main a {
     /* better hyperlink underline typesetting inspired by Tufte CSS */
     --underline-color: var(--vocabulary-brand-color-dark-tomato);
     --underline-background-color: white;
     color: var(--vocabulary-brand-color-dark-tomato);
     text-decoration: none;

     /* adapted from Tufte.css -- Copyright (c) 2014 Dave Liepmann -- https://github.com/edwardtufte/tufte-css -- https://github.com/edwardtufte/tufte-css/blob/gh-pages/LICENSE */
     background: -webkit-linear-gradient(var( --underline-color), var( --underline-color)), -webkit-linear-gradient(var( --underline-color), var( --underline-color)), -webkit-linear-gradient(currentColor, currentColor);
     background: linear-gradient(var( --underline-color), var( --underline-color)), linear-gradient(var( --underline-color), var( --underline-color)), linear-gradient(currentColor, currentColor);
     -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
     -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
     background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
     background-repeat: no-repeat, no-repeat, repeat-x;
     text-shadow: 0.03em 0 var(--underline-background-color), -0.03em 0 var(--underline-background-color), 0 0.03em var(--underline-background-color), 0 -0.03em var(--underline-background-color), 0.06em 0 var(--underline-background-color), -0.06em 0 var(--underline-background-color), 0.09em 0 var(--underline-background-color), -0.09em 0 var(--underline-background-color), 0.12em 0 var(--underline-background-color), -0.12em 0 var(--underline-background-color), 0.15em 0 var(--underline-background-color), -0.15em 0 var(--underline-background-color);
     background-position: 0% 93%, 100% 93%, 0% 93%;
     background-position-y: 90%, 90%, 90%;
}

main p {
    margin-bottom: 2em;

    font-family: 'Source Sans Pro';
    font-size: 1.5em;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

main ul, main ol {
    margin: 0 0 2em 1em;
    padding: 0;

    font-family: 'Source Sans Pro';
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    /* line-height: 150%; */
}

main ul ul, main ol ol {
    font-size: 1.2rem;
}

main blockquote {
    margin: 0;
    margin-bottom: 1.5em;
    padding: 0;
}

/* manually include quote icon to avoid extraneous html classes */
main blockquote p:before {
    --icon-sprite: var(--cc-quote);

    display: block;
    content: '';
    height: 1em;
    width: 1em;

    font-size: var(--icon-sprite-size);
    background-color: var(--icon-sprite-color);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--icon-sprite);
    mask-image: var(--icon-sprite);
    -webkit-mask-size: contain;
    mask-size: contain;
}

main blockquote p {
    font-family: 'Source Sans Pro';
    font-weight: bold;
    font-size: 1.9em;
    line-height: 105%;
}

main figure {
    margin: 0;
    margin-bottom: 3em;
    padding: 0;
}

main > article figure img, main > figure img, main > .content figure img {
    width: 100%;
}

main figure .attribution {
    display: block;
    margin-top: 1em;

    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

main figure:has(iframe) {
    grid-column: 4 / span 5;
    float: none;
}

main aside.closing {
    display: inline-block;
    box-sizing: border-box;
    width: 25%;
    margin-bottom: 2em;
    padding: 2em;
    width: 100%;

    background: var(--vocabulary-brand-color-soft-turquoise);
}

main aside.closing a {
    --underline-background-color: var(--vocabulary-brand-color-soft-turquoise);
    color: var(--vocabulary-brand-color-dark-tomato);
}

main aside.closing p {
    margin :0;

    font-family: 'Source Sans Pro';
    font-size: 1.2em;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

main .pub-date {
    display: inline-block;
    margin-bottom: 4em;

    font-family: 'Source Sans Pro';
    font-size: 1.5em;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

main article.tags {
    margin-bottom: 8em;
}

main article.tags ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    left: 0;

    list-style: none;
}

main article.tags ul li {
    margin-right: .5em;
}


main article.tags ul li:after {
    margin-left: .1em;

    content: ',';
}

main article.tags ul li:last-child:after {
    content: '';
}

main > footer {
    grid-column: 3 / span 7;
}

main article.posts.related {
    grid-column: 3 / span 7;
    padding: 2em 4em;
    box-sizing: border-box;

    background: var(--vocabulary-neutral-color-lighter-gray);
}

main article.posts.related > h2 {
    margin-bottom: 0.83em;
}

main article.posts.related ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin: 0 auto;
    margin-top: 0;
    gap: 2em;
    box-sizing: border-box;
    list-style: none;

    font-size: initial;
}

main article.posts.related ul li {
    margin-bottom: 3em;
}

main article.posts.related .post  {
    margin-bottom: 0;
}

main article.posts.related .post header {
    flex-direction: column;
    align-items: baseline;
}

main article.posts.related .post figure {
    display: none;
    order: -1;
}

main article.posts.related .post a {
    --underline-background-color: var(--vocabulary-neutral-color-lighter-gray);
}

main article.posts.related .post h2, main article.posts.related .post h3 {
    font-size: 1.4em;
}

main article.posts.related .post p {
    display: none;
}

main nav.pagination {
    margin: 0 auto;
}

main nav.pagination ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;

    text-indent: none;
    font-size: 1em;
    list-style: none;
}

main nav.pagination ol li {
    margin: 0 .5em;

    line-height: 250%;
}

main nav.pagination ol li a {
    padding: .4em .7em;

    background: #F5F5F5;
    --underline-background-color: #F5F5F5;
    color: black;
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    font-size: 1.2em;
    text-transform: none;
    text-decoration: none;
}

main nav.pagination ol li.current a {
    background: black;
    --underline-background-color: black;
    color: white;
}

main .attribution-list {
    grid-column: 3 / span 7;
    box-sizing: border-box;
    position: relative;
    padding: 4em;

    background: var(--vocabulary-neutral-color-lighter-gray);
    text-align: left;
}

main .attribution-list h2 {
    margin: 0;
}

main .attribution-list button.expand-attribution {
    position: absolute;
    top: 4.5em;
    right: 4em;
    padding: .5em;

    cursor: pointer;
    border: 1px solid black;
    border-radius: 3px;
    font-family: 'Source Sans Pro';
}

main .attribution-list button.expand-attribution.selected {
    background: black;
    color: white;
}

main .attribution-list ul {
    display: none;
}

main .attribution-list ul.expand {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin: 0;
    margin-top: 2em;
    padding: 0;
    gap: 2em;

    font-size: 1em;
    list-style: none;
}

main .attribution-list article {
    margin-bottom: 1em;
}

main .attribution-list article a {
    --underline-background-color: var(--vocabulary-brand-color-grey);
}

main .attribution-list article figure {
    display: flex;
    gap: 1em;
    margin-top: 1em;
}

main .attribution-list article img {
    object-fit: cover;
    width: 4em;
    height: 4em;
}

main .attribution-list article figure .attribution {
    margin-top: 0;
}

/* <body> general page-level context */

/* body-level context */

/* global header component */
body > header {
    grid-column: 1 / 12;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin-bottom: 2em;
    /* padding: 0 var(--vocabulary-page-edges-space); */
}

body > header .masthead {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: baseline;
    position: relative;
    width: 100%;
    /* padding-top: 3%; */
    padding-top: 40px;
    margin: 0 var(--vocabulary-page-edges-space);
}

body > header .masthead h1 {
    margin: 0;
}

/* allows the child identity-logo element to have a focus state */
body > header .identity-logo-wrapper {
    height: 50px;
    width: 191px;
    display: block;
    position: absolute;
}

body > header .masthead .identity-logo {
    display: inline-block;
    text-indent: -1000px;
    vertical-align: bottom;
    height: 50px;
    width: 191px;


    /* allows for color manipulation of svg */
    background-color: black;
    -webkit-mask-image: url('../svg/cc/logos/cc/logomark.svg');
    mask-image: url('../svg/cc/logos/cc/logomark.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    cursor: pointer;

    /* standard pattern for setting logo in lieu of background color manipulation */
    /* background: url('../svg/cc/logos/cc/logomark.svg') left top no-repeat; */
}

body > header .masthead .identity-logo:hover {
    background-color: var(--vocabulary-neutral-color-dark-gray);
}

/* TODO: needs focus outline to be fixed */
/* .masthead .identity-logo:focus {
    position: relative;
}

.masthead .identity-logo:focus:before {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    content: '';

    border: 60px solid purple;
    -webkit-mask-image: none;
    mask-image: none;
} */

/* style product identity typesetting */
body > header .masthead .identity-logo.product {
    width: initial;
    position: relative;
    padding-top: 7px;
    box-sizing: border-box;

    text-decoration: none;
    text-indent: 42px;
    font-family: 'CC Accidenz Commons';
    font-weight: normal;
    text-transform: lowercase;
    letter-spacing: -1px;
    line-height: 1em;
    -webkit-mask-image: none;
    mask-image: none;
    background: none;
    color: black;
}

/* style product identity mini-cc-logo */
body > header .masthead .identity-logo.product:before {
    position: absolute;
    width: 40px;
    height: 40px;
    content: '';
    left: 0;
    top: .176em;

    background-color: black;
    -webkit-mask-image: url('../svg/cc/logos/cc/lettermark.svg');
    mask-image: url('../svg/cc/logos/cc/lettermark.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    cursor: pointer;
}

/* .masthead .primary-menu {
    margin-top: 45px;
    vertical-align: bottom;

} */

body > header .masthead .primary-menu ul {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin: 0;
    padding: 0;

    list-style: none;
}

body > header .masthead .primary-menu ul li {
    display: flex;
    align-items: center;
    margin-top: 5px;
    margin-left: 20px;
}

body > header .masthead .primary-menu ul li a {
    text-decoration: none;
    text-transform: uppercase;
    font-family: var(--vocabulary-brand-typeset-nav-family);
    font-weight: var(--vocabulary-brand-typeset-nav-weight);
    font-size: 1.1em;
    letter-spacing: 0.02em;
    color: var(--vocabulary-brand-typeset-nav-color);
}

body > header .masthead .primary-menu ul li a:hover {
    color: black;
}

body > header .masthead .primary-menu ul li a.attention {
    display: inline-block;
    padding: 0.5em;

    background: var(--vocabulary-brand-color-turquoise);
    color: white;
    border-radius: 4px;
}

body > header button.expand-menu {
    display: none;
}

body > header .ancillary-menu {
    position: absolute;
    top: 0;
    /* right: var(--vocabulary-page-edges-space); */
    right: 0;

    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    font-size: .8em;
    /* font-size: 1em; */
}

body > header .ancillary-menu ul {
    display: flex;
    margin: 0;
    padding: 0;

    list-style: none;
}

body > header .ancillary-menu ul li {
    margin-left: 10px;
}
body > header .ancillary-menu ul li a {
    /* generalize this */
    display: inline-block;
}

body > header .ancillary-menu ul li a,
.ancillary-menu ul li button {
    margin-top: 10px;
}

body > header .ancillary-menu ul li button:hover {
    cursor: pointer;
}

body > header .ancillary-menu button.locale {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;

    background:  var(--vocabulary-neutral-color-lighter-gray);
    border: none;
    border-radius: 3px;
}

body > header .ancillary-menu button.locale.icon-attach:before {
    --icon-sprite: var(--fa-globe);
    --icon-sprite-size: .8em;

    margin-right: .8em;

    opacity: .3;
}

body > header .ancillary-menu a.donate {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;

    text-decoration: none;
    background: var(--vocabulary-brand-color-soft-tomato);
    color: var(--vocabulary-brand-color-dark-tomato);
    border-radius: 3px;
}

.ancillary-menu a.donate.icon-attach:before {
    --icon-sprite: var(--fa-heart);
    --icon-sprite-color: var(--vocabulary-brand-color-dark-tomato);
     --icon-sprite-size: .8em;

    margin-right: .8em;
}

body > header .ancillary-menu a.search {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;

    font-weight: normal;
    text-decoration: none;
    background:  var(--vocabulary-neutral-color-lighter-gray);
    color: #000;
    border: none;
    border-radius: 3px;
}

body > header .ancillary-menu a.search.icon-attach:before {
    --icon-sprite: var(--fa-search);
     --icon-sprite-size: .8em;

    margin-right: .8em;
}

body > header .ancillary-menu button.explore {
    margin-top: 0;
    padding-top: 16px;
    padding-bottom: 6px;
    padding-left: 10px;
    padding-right: 10px;

    background: black;
    color: white;
    border: none;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

body > header .explore-panel {
    order: -1;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 40px var(--vocabulary-page-edges-space) 60px var(--vocabulary-page-edges-space);

    background: black;
    color: white;
    display: none;
}

.explore-panel.expand {
    display: inherit;

    transition: display 2s ease-in-out;
}

body > header .explore-panel aside {
    margin-right: 20px;
}

body > header .explore-panel aside .identity-logo {
    display: inline-block;
    vertical-align: bottom;
    height: 50px;
    width: 191px;


    /* allows for color manipulation of svg */
    background-color: white;
    -webkit-mask-image: url('../svg/cc/logos/cc/logomark.svg');
    mask-image: url('../svg/cc/logos/cc/logomark.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    cursor: pointer;
    text-indent: -1000px;

    /* standard pattern for setting logo in lieu of background color manipulation */
    /* background: url('../svg/cc/logos/cc/logomark.svg') left top no-repeat; */
}

body > header .explore-panel aside h2 {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
}

body > header .explore-panel aside p {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
}

body > header .explore-panel .explore-menu {
    width: 100%;

    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
}

body > header .explore-panel .explore-menu ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin: 0;
    padding: 0;

    list-style: none;
}

body > header .explore-panel nav ul li a {
    display: block;

    color: var(--vocabulary-brand-color-turquoise);
    text-decoration: none;
    font-weight: 700;
    /* margin-bottom: .8em; */
}

body > header .explore-panel nav ul li p {
    font-weight: inherit;
    line-height: 1.5;
}

body > article.attention {
    grid-column: 1 / span 11;
    padding: 1em var(--vocabulary-page-edges-space);

    background: var(--vocabulary-brand-color-soft-green);
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    font-size: 1.2em;
    line-height: 150%;
    text-align: center;
    border-bottom: 3px solid white;
}

/* bottom page banner */
/* body > article.attention:nth-of-type(2) {
    background: var(--vocabulary-brand-color-soft-gold);
} */

body > article.attention a {
    color: var(--vocabulary-brand-color-dark-green);
    --underline-background-color: var(--vocabulary-brand-color-soft-green);
}

body > article.attention.low-importance a, body > article.attention.medium-importance a, body > article.attention.high-importance a {
    display: inline-flex;
    align-items: center;
    padding: 0.5em .8em;
    margin-left: .5em;

    text-transform: uppercase;
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    text-decoration: none;
    vertical-align: middle;
    background: var(--vocabulary-brand-color-turquoise);
    color: white;
    border-radius: 4px;
}

body > article.attention.low-importance a:before, body > article.attention.medium-importance a:before, body > article.attention.high-importance a:before {
    --icon-sprite: var(--cc-heart-filled);
    --icon-sprite-color: white;
    --icon-sprite-size: 1em;

    display: inline-block;
    content: '';
    height: 1em;
    width: 1em;
    margin-right: .2em;

    font-size: var(--icon-sprite-size);
    background-color: var(--icon-sprite-color);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--icon-sprite);
    mask-image: var(--icon-sprite);
    -webkit-mask-size: contain;
    mask-size: contain;
}

body > .attention.low-importance {
    background: var(--vocabulary-brand-color-soft-green);
    border-bottom: 8px solid var(--vocabulary-brand-color-green);
}

body > .attention.medium-importance {
    background: var(--vocabulary-brand-color-soft-gold);
    border-bottom: 8px solid var(--vocabulary-brand-color-gold);
}

body > .attention.high-importance {
    background: var(--vocabulary-brand-color-soft-tomato);
    border-bottom: 8px solid var(--vocabulary-brand-color-tomato);
}

/* global footer component */
body > footer {
    grid-column: 1 / 12;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
    'logo nav nav nav'
    'contact subscribe subscribe donate'
    'contact license license donate';
    gap: 40px;
    padding: 40px var(--vocabulary-page-edges-space);

    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    color: white;
    background: black;
}

body > footer h2 {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    font-size: 1.25em;
}

body > footer a {
    color: var(--vocabulary-brand-color-turquoise);
    text-decoration: none;
}

body > footer p {
    line-height: 1.5;
}

/* needs to be moved to be broader in general specificity scope */
body > footer p a {
    /* better hyperlink underline typesetting inspired by Tufte CSS */
    --underline-color: var(--vocabulary-brand-color-turquoise);
    --underline-background-color: black;
    color: var(--vocabulary-brand-color-turquoise);
    /* text-decoration: none; */

    /* adapted from Tufte.css -- Copyright (c) 2014 Dave Liepmann -- https://github.com/edwardtufte/tufte-css -- https://github.com/edwardtufte/tufte-css/blob/gh-pages/LICENSE */
    background: -webkit-linear-gradient(var( --underline-color), var( --underline-color)), -webkit-linear-gradient(var( --underline-color), var( --underline-color)), -webkit-linear-gradient(currentColor, currentColor);
    background: linear-gradient(var( --underline-color), var( --underline-color)), linear-gradient(var( --underline-color), var( --underline-color)), linear-gradient(currentColor, currentColor);
    -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    background-repeat: no-repeat, no-repeat, repeat-x;
    text-shadow: 0.03em 0 var(--underline-background-color), -0.03em 0 var(--underline-background-color), 0 0.03em var(--underline-background-color), 0 -0.03em var(--underline-background-color), 0.06em 0 var(--underline-background-color), -0.06em 0 var(--underline-background-color), 0.09em 0 var(--underline-background-color), -0.09em 0 var(--underline-background-color), 0.12em 0 var(--underline-background-color), -0.12em 0 var(--underline-background-color), 0.15em 0 var(--underline-background-color), -0.15em 0 var(--underline-background-color);
    background-position: 0% 93%, 100% 93%, 0% 93%;
    /* background-position-y: 87%, 87%, 87%; */

}

body > footer .identity-logo {
    grid-area: logo;
    display: inline-block;
    text-indent: -1000px;
    vertical-align: bottom;
    height: 50px;
    width: 191px;


    /* allows for color manipulation of svg */
    background-color: white;
    -webkit-mask-image: url('../svg/cc/logos/cc/logomark.svg');
    mask-image: url('../svg/cc/logos/cc/logomark.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    cursor: pointer;

    /* standard pattern for setting logo in lieu of background color manipulation */
    /* background: url('../svg/cc/logos/cc/logomark.svg') left top no-repeat; */
}

body > footer .identity-logo:hover {
    background-color: var(--vocabulary-brand-color-turquoise);
}

body > footer .footer-menu {
    grid-area: nav;

    font-size: 1.3em;
    font-weight: 700;
}

body > footer .footer-menu ul {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;

    list-style: none;
}

body > footer .footer-menu ul li a {
    text-decoration: none;
    color: var(--vocabulary-brand-color-turquoise);
}

body > footer .contact {
    grid-area: contact;
}

body > footer .contact .social-menu ul {
    display: flex;
    margin: 0;
    padding: 0;
    margin-top: 3em;

    list-style: none;
}

body > footer .contact .social-menu ul li {
    margin-right: 1.5em;
}

body > footer .social-menu li a {
    --icon-sprite-color: white;
    --icon-sprite-size: 1.9em;
}

body > footer .subscribe {
    grid-area: subscribe;
}

body > footer .subscribe form {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

body > footer .subscribe form input {
    display: inline-flex;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    vertical-align: top;
    box-sizing: border-box;

    -webkit-appearance: none;
    background-color: transparent;
    color: rgb(118, 118, 118);
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.3;
    border: 2px solid rgb(118, 118, 118);;
    /* border-radius: 4px; */
    box-shadow: none;
}

body > footer .subscribe form input.input {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    padding: .5em;
    width: 100%;
}

body > footer .subscribe form input.input:focus {
    color: white;
}

body > footer .subscribe form input.button {
    justify-content: center;
    padding: 1.1em;

    cursor: pointer;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.125rem;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 0;
    white-space: nowrap;
    background-color: rgb(118, 118, 118);
    border: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    color: rgb(255, 255, 255);
}

body > footer .donate {
    grid-area: donate;
}

body > footer .donate a.donate {
    display: inline-flex;
    align-items: center;
    padding: 1rem 1.5rem;

    text-transform: uppercase;
    font-family: 'Roboto Condensed';
    font-size: 1.5em;
    line-height: 1em;
    font-style: normal;
    font-weight: 700;
    border: none;
    border-radius: 4px;
    color: black;
    background: var(--vocabulary-brand-color-gold);
}

body > footer .donate a.donate:hover {
    cursor: pointer;
    background-color: rgb(248, 204, 44);
}

/* set the icon settings */
body > footer .donate a.donate.icon-attach:before {
    /* --icon-sprite: var(--cc-heart-filled); */
    --icon-sprite-color: black;
    --icon-sprite-size: 1.2em;

    margin-right: .3em;
}

body > footer .license {
    grid-area: license;
}

body > footer .license img path {
    fill: white;
    /* width: 1.2em; */
}

body > footer .license svg {
    display: inline;
    width: 1.9em;
    height: 1.9em;
    margin-right: .3em;
}

/* archive-page context */

/* blog-index context */

.blog-index main > header {
    margin-bottom: 0;
}

.blog-index main .posts {
    grid-column: 2 / span 9;
}

.blog-index main .posts h2 {
    text-align: center;
}

.blog-index main .posts ul {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    margin-top: 8em;
    /* padding: 0 4em; */
    gap: 2em;
    box-sizing: border-box;
    width:100%;
    margin: 0 auto;
    margin-top: 0;

    font-size: 1rem;
    list-style: none;
}

.blog-index main .posts ul li {
    grid-column: span 4;
 }

 .blog-index main .posts ul li h3 {
    font-size: 1.5em;
}

.blog-index main .posts .post figure {
    order: -1;
}


/* targets the featured posts section */
.blog-index main .posts.featured {
    grid-column: 1 / span 11;
    margin-bottom: 3em;

    background: var(--vocabulary-neutral-color-lighter-gray);
}

.blog-index main .posts.featured h2 {
    visibility: hidden;
    height: 0;
    margin: 0;
    padding: 0;
}

.blog-index main .posts.featured .post h3 {
    font-size: 1.4em;
}

.blog-index main .posts.featured ul li:nth-child(1) h3 {
    font-size: 2.1em;
}

.blog-index main .posts.featured .post a {
    --underline-background-color: var(--vocabulary-neutral-color-lighter-gray);
}

.blog-index main .posts.featured li:nth-of-type(1) .post a {
    --underline-background-color: white;
}

.blog-index main .posts.featured li:nth-of-type(1) .post figure {
    order: initial;
}

.blog-index main .posts.featured ul {
    padding: 0 var(--vocabulary-page-edges-space);
}

.blog-index main .posts.featured ul li {
    grid-column: span 3;
}

.blog-index main .posts.featured ul li:nth-of-type(1) {
    grid-column: span 12;

    background: white;
}

.blog-index main .posts.featured ul li:nth-of-type(1) article.post {
    margin-bottom: 1em;
    padding: 4em;
}


.blog-index main footer {
    grid-column: 2 / span 9;
}

/* search-index context */

.search-index main > header { /* generalize? */
    display: block;
    padding: 3.7em 0;
    /* text-align: left; */
}

.search-index .search-form form {
    display: flex;
    width: 100%;
    margin-top: 1em;
    margin-bottom: 1em;

    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 1em;
}

.search-index .search-form form input {
    flex: 1;
    width: 100%;
    height: 4em;
    padding: .2em 1em;

    outline: none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border: 2px solid black;
}

.search-index .search-form form button {
    width: 10%;

    cursor: pointer;
    background: black;
    color: white;
    border: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* team-index context */

.team-index main .persons {
    grid-column: 2 / 11;
    margin-bottom: 5em;
}

.team-index main .persons h2 {
    margin-top: 0;
    margin-bottom: 1.5em;

    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    font-size: 2.1em;
}

.team-index main .persons ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 4em;
    margin: 0;
    padding: 0;

    list-style: none;
}

.team-index main .persons .person {
    display: flex;
    flex-wrap: wrap;

    font-family: 'Source Sans Pro';
}

.team-index main .persons .person h3 {
    width: 100%;
    margin-top: .6em;
    margin-bottom: .5em;

    font-style: normal;
    font-weight: 700;
    font-size: 1em;
    /* line-height: 150%; */
}

.team-index main .persons .person .title {
    margin-bottom: .4em;

    font-style: normal;
    font-weight: 600;
    font-size: .7em;
    line-height: 150%;
}

.team-index main .persons .person figure {
    order: -1;
    margin: 0;
    padding: 0;

    font-size: .8em;
}

.team-index main .persons .person img {
    width: 100%;
    zoom: 10;
}

.team-index main .persons .person a {
     /* better hyperlink underline typesetting inspired by Tufte CSS */
     --underline-color: var(--vocabulary-brand-color-dark-tomato);
     --underline-background-color: white;
     color: var(--vocabulary-brand-color-dark-tomato);
     text-decoration: none;

     /* adapted from Tufte.css -- Copyright (c) 2014 Dave Liepmann -- https://github.com/edwardtufte/tufte-css -- https://github.com/edwardtufte/tufte-css/blob/gh-pages/LICENSE */
     background: -webkit-linear-gradient(var( --underline-color), var( --underline-color)), -webkit-linear-gradient(var( --underline-color), var( --underline-color)), -webkit-linear-gradient(currentColor, currentColor);
     background: linear-gradient(var( --underline-color), var( --underline-color)), linear-gradient(var( --underline-color), var( --underline-color)), linear-gradient(currentColor, currentColor);
     -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
     -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
     background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
     background-repeat: no-repeat, no-repeat, repeat-x;
     text-shadow: 0.03em 0 var(--underline-background-color), -0.03em 0 var(--underline-background-color), 0 0.03em var(--underline-background-color), 0 -0.03em var(--underline-background-color), 0.06em 0 var(--underline-background-color), -0.06em 0 var(--underline-background-color), 0.09em 0 var(--underline-background-color), -0.09em 0 var(--underline-background-color), 0.12em 0 var(--underline-background-color), -0.12em 0 var(--underline-background-color), 0.15em 0 var(--underline-background-color), -0.15em 0 var(--underline-background-color);
     background-position: 0% 93%, 100% 93%, 0% 93%;
     /* background-position-y: 87%, 87%, 87%; */
}

.team-index main .persons .person p {
    font-size: .75em;
}

.team-index main aside.closing {
    background: none;
}

.team-index main aside.closing p {
    font-style: italic;
}

/* person-page context */

.person-page main > header {
    grid-column: 2 / span 9;
    min-height: 410px;
    position: relative;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 3fr 7fr;
    /* grid-template-areas:
    'picture info'
    'picture info'
    'picture info'; */
    gap: 0 5em;
    padding: 3.7em 0;

    text-align: left;
}


.person-page main > header:before {
    left: -5.5%;
}

.person-page main > header h1 {
    grid-column-start: 2;
    margin-bottom: .1em;
}

.person-page main > header .title {
    grid-column-start: 2;
    margin-bottom: 1em;

    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 1.9em;
}

.person-page main > header .pronouns {
    grid-column-start: 2;
    margin-bottom: 1em;

    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 1.5em;
}

.person-page main > header figure {
    box-sizing: border-box;
    position: absolute;
    margin: 0;
    padding:0;
    top: 3.4em;
    left: 0;
    width: 30%;
}

.person-page main > header figure img {
    box-sizing: border-box;
    width: 100%;
    max-height: 21.8rem;

    border: 16px solid white;
}

.person-page main > header .bio {
    grid-column-start: 2;

    font-size: .9em;
}

.person-page main > header p {
    margin-bottom: .3em;
}

/* program-index context */

.program-index main > article.projects {
    grid-column: 3 / 10;
    margin-bottom: 8em;
}

.program-index main > article.projects ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2em;
    margin: 0;
    padding: 0;

    font-size: 1em;
    list-style: none;
}

.program-index main > article.projects article {
    padding: 2em;

    background: var(--vocabulary-brand-color-soft-turquoise);
    border-top: 3px solid black;
}

.program-index main > article.projects article a {
    --underline-background-color: var(--vocabulary-brand-color-soft-turquoise);
}

/* program-page context */


/* responsive contexts */

@media (min-width: 1500px) {
    body {
        width: 1500px;
        margin: 0 auto;
    }

    body > main {
        overflow-x: hidden;
    }

}

@media (max-width: 1140px) {
    .blog-index main footer .attribution-list ul.expand {
        grid-template-columns: 1fr 1fr;
    }

    .search-index main > header {
        grid-column: 3 / 10;
    }

    .search-index main > header:before {
        left: -9.3%;
    }
}

@media (max-width: 900px) {

    .blog-index main .posts ul {
        display: flex;
        flex-wrap: wrap;
    }

    main article.posts.related ul {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 705px) {

    body > header .masthead {
        padding-top: 60px;
        display: block;
    }

    body > header button.expand-menu {
        position: absolute;
        top: 4.5em;
        right: 0;
        display: inline-block;
        padding: .5rem 1rem;
        border: none;
        border-radius: 5px;
        background: #F5F5F5;
        text-transform: uppercase;
        font-family: 'Roboto Condensed';
        font-style: normal;
        font-weight: 700;
        font-size: 1em;
    }

    body > header .primary-menu {
        display: none;

    }

    body > header .primary-menu.expand {
        display: initial;
    }

    body > header .primary-menu.expand ul {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        margin-top: 1.5em;
    }

    body > header .primary-menu.expand ul li {
        margin: 0;
        padding: 1em 0;

        border-top: 1px solid rgba(1,1,1,.1);
    }

    main {
        width: 80%;
    }

    main article.posts.related {
        width: 100%;
        margin-left: 0;
    }

    main article.posts.related {
        display: block;
    }

    .blog-index main article.posts.featured > ul li:nth-child(1) {
        padding: 2em;
    }

    .blog-index main .posts {
        padding: 0 var(--vocabulary-page-edges-space);
    }

    .blog-index main footer .attribution-list ul.expand {
        display: block;
    }

    .search-index .search-form form button {
        width: 20%;
    }

}

@media (max-width: 680px) {

    body > header .explore-panel {
        flex-wrap: wrap;
    }

    body > footer {
        display: block;
    }

    body > footer > nav {
        margin-top: 1em;
        margin-bottom: 3em;
    }

    body > footer > nav ul li {
        margin-bottom: 1em;
    }

    body > footer > div {
        margin-bottom: 4em;
    }

    main {
        display: block;
        width: 100%;
    }

    main > aside .attention {
        margin-bottom: 5em;
    }

    main > header:before {
        left: 0;
    }

    main .content {
        padding: 0 var(--vocabulary-page-edges-space);
    }

    main:has( > aside.sidebar) > aside.sidebar {
        padding: 0 var(--vocabulary-page-edges-space);
    }

    main > *:not(header) {
        padding: 0 var(--vocabulary-page-edges-space);
    }

    main > .posts {
        padding: 0 var(--vocabulary-page-edges-space);
    }

    .posts article figure {
        width: 100%;
        flex: initial;
    }

    .person-page main > header {
        padding-left: var(--vocabulary-page-edges-space);
        padding-right: var(--vocabulary-page-edges-space);
    }

    .person-page main > header:before {
        left: 0;
    }

    .search-index main > header {
        padding-left: var(--vocabulary-page-edges-space);
        padding-right: var(--vocabulary-page-edges-space);
    }

    .search-index main > header:before {
        left: 0;
    }

    .team-index main > header {
        padding: 0 var(--vocabulary-page-edges-space);
    }

    .team-index main article.persons {
        padding: 0 var(--vocabulary-page-edges-space);
    }

    .team-index main article.persons ul {
        grid-template-columns: 1fr 1fr;
    }

    .person-page main > header {
        display: flex;
    }

    .person-page main > header figure {
        width: auto;
        margin-bottom: 3em;
        position: relative;

        order: -1;
    }

    main nav.pagination ol {
        /* width: 100%; */
        flex-wrap: wrap;
    }

    main nav.pagination ol li {
        line-height: 250%;
    }
}

@media (max-width: 580px) {
    body > header .explore-panel .explore-menu ul {
        grid-template-columns: 1fr 1fr;
    }

    body > footer .footer-menu ul {
        display: block;
    }

    main article.posts.related ul {
        grid-template-columns: 1fr;
    }

    .posts .post figure {
        width: 100%;
        flex: initial;
    }
}

@media (max-width: 425px) {

    .blog-index .attribution-list {
      padding: 2em;
    }

    .blog-index .attribution-list h2 {
      width: 50%;

      hyphens: auto;
      word-break: break-word;
    }

  }

  @media (max-width:400px) {

    body > header .explore-panel .explore-menu ul {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .team-index main article.persons ul {
        display: initial;
    }
}

@media (max-width:340px) {
    body > header .ancillary-menu button:before, body > header .ancillary-menu a:before {
        display: none;
    }
}