diff --git a/assets/static/vocabulary/css/vocabulary.css b/assets/static/vocabulary/css/vocabulary.css
new file mode 100644
index 00000000..678fe3b6
--- /dev/null
+++ b/assets/static/vocabulary/css/vocabulary.css
@@ -0,0 +1,2060 @@
+/*
+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 */
+
+.posts.related {
+    
+}
+
+/* <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%;
+
+    font-family: 'Roboto Condensed';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 2.1em;
+    text-transform: none;
+}
+
+main h3 {
+    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 {
+    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 {
+    content: ',';
+    margin-left: .1em;
+}
+
+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;
+
+    cursor: pointer;
+    border: 1px solid black;
+    border-radius: 3px;
+    padding: .5em;
+    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;
+    text-indent: 42px;
+    padding-top: 7px;
+    box-sizing: border-box;
+
+    text-decoration: none;
+    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 .ancilliary-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 .ancilliary-menu ul {
+    display: flex;
+    margin: 0;
+    padding: 0;
+
+    list-style: none;
+}
+
+body > header .ancilliary-menu ul li {
+    margin-left: 10px;
+}
+body > header .ancilliary-menu ul li a {
+    /* generalize this */
+    display: inline-block;
+}
+
+body > header .ancilliary-menu ul li a,
+.ancilliary-menu ul li button {
+    margin-top: 10px;
+}
+
+body > header .ancilliary-menu ul li button:hover {
+    cursor: pointer;
+}
+
+body > header .ancilliary-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 .ancilliary-menu button.locale.icon-attach:before {
+    --icon-sprite: var(--fa-globe);
+    --icon-sprite-size: .8em;
+
+    margin-right: .8em;
+
+    opacity: .3;
+}
+
+body > header .ancilliary-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;
+}
+
+.ancilliary-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 .ancilliary-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 .ancilliary-menu a.search.icon-attach:before {
+    --icon-sprite: var(--fa-search);
+     --icon-sprite-size: .8em;
+
+    margin-right: .8em;
+}
+
+body > header .ancilliary-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;
+    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 > 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 5%;
+
+    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 */
+.archive-page main {
+
+    
+}
+
+/* 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 5%;
+}
+
+.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%;
+
+    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;
+    }
+}
+
+@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: .3em .5em;
+        border: none;
+        border-radius: 5px;
+        background: #F5F5F5;
+        text-transform: uppercase;
+        font-family: 'Roboto Condensed';
+        font-style: normal;
+        font-weight: 700;
+        font-size: 1em;
+        padding: .5rem 1rem;
+    }
+
+    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 5%;
+    }
+
+    .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;
+    }
+
+    .posts article figure {
+        width: 100%;
+        flex: initial;
+    }
+
+    .team-index main > header {
+        padding: 0 5%;
+    }
+
+    .team-index main article.persons {
+        padding: 0 5%;
+    }
+
+    .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 {
+        width: 100%;
+    }
+
+    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;
+    }
+}
+
+@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 .ancilliary-menu button:before, body > header .ancilliary-menu a:before {
+        display: none;
+    }
+}