From f8e484a91468ff7be1396f3bc6d3a99511b5074d Mon Sep 17 00:00:00 2001
From: Joy A <joy.gold13@gmail.com>
Date: Tue, 22 Oct 2024 11:41:34 +0100
Subject: [PATCH 1/4] added additional command to readme file

---
 README.md                                   | 6 ++++++
 assets/static/vocabulary/css/vocabulary.css | 4 ++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index edb540d0..c8c0b320 100644
--- a/README.md
+++ b/README.md
@@ -114,6 +114,12 @@ else fails, try removing the virtual environment and reinstalling:
     pipenv install --dev
     ```
 
+    - If there's no Python 3.11 on your system (or if pipenv can't find it), you may need to specify the Python location. For example:
+    ```
+    pipenv install --dev --python /opt/homebrew/bin/python3.11
+    ```
+
+
 [pipenverror]: https://github.com/pypa/pipenv/issues/1918
 
 
diff --git a/assets/static/vocabulary/css/vocabulary.css b/assets/static/vocabulary/css/vocabulary.css
index 678fe3b6..3ed67ed7 100644
--- a/assets/static/vocabulary/css/vocabulary.css
+++ b/assets/static/vocabulary/css/vocabulary.css
@@ -43,9 +43,9 @@ EX:
 /* typography */
 
 body {
-    display: grid;
+    /* display: grid;
     grid-template-columns: 5% 3% 6% 6% 15% 30% 15% 6% 6% 3% 5%;
-    overflow-x: hidden;
+    overflow-x: hidden; */
 
     font-weight: 400;
     -moz-osx-font-smoothing: grayscale;

From 39da64ddfe136c641776bcdb72a016833b45d18a Mon Sep 17 00:00:00 2001
From: Joy A <joy.gold13@gmail.com>
Date: Thu, 24 Oct 2024 16:56:35 +0100
Subject: [PATCH 2/4] removed unrealted file

---
 assets/static/vocabulary/css/vocabulary.css | 2060 -------------------
 1 file changed, 2060 deletions(-)
 delete mode 100644 assets/static/vocabulary/css/vocabulary.css

diff --git a/assets/static/vocabulary/css/vocabulary.css b/assets/static/vocabulary/css/vocabulary.css
deleted file mode 100644
index 3ed67ed7..00000000
--- a/assets/static/vocabulary/css/vocabulary.css
+++ /dev/null
@@ -1,2060 +0,0 @@
-/*
-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;
-    }
-}

From 6a6b48cf96a335441636f13cc42e6441e9edc1b0 Mon Sep 17 00:00:00 2001
From: Timid Robot Zehta <timid@creativecommons.org>
Date: Tue, 5 Nov 2024 08:06:07 -0800
Subject: [PATCH 3/4] restore vocabulary.css unchanged from main

---
 assets/static/vocabulary/css/vocabulary.css | 2060 +++++++++++++++++++
 1 file changed, 2060 insertions(+)
 create mode 100644 assets/static/vocabulary/css/vocabulary.css

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;
+    }
+}

From 336eafc9a0b03e4ce3833afac27562d91428ceac Mon Sep 17 00:00:00 2001
From: Timid Robot Zehta <timid@creativecommons.org>
Date: Tue, 5 Nov 2024 08:07:25 -0800
Subject: [PATCH 4/4] improve formatting

---
 README.md | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index c8c0b320..d528e14d 100644
--- a/README.md
+++ b/README.md
@@ -113,12 +113,11 @@ else fails, try removing the virtual environment and reinstalling:
     ```
     pipenv install --dev
     ```
-
-    - If there's no Python 3.11 on your system (or if pipenv can't find it), you may need to specify the Python location. For example:
-    ```
-    pipenv install --dev --python /opt/homebrew/bin/python3.11
-    ```
-
+    - If there's no Python 3.11 on your system (or if pipenv can't find it),
+      you may need to specify the Python location. For example:
+        ```
+        pipenv install --dev --python /opt/homebrew/bin/python3.11
+        ```
 
 [pipenverror]: https://github.com/pypa/pipenv/issues/1918