@import 'library-vars.css';


/* temp resets */
.explore-panel {
    display: none;
}

main p.dm-sans-specimen {
    display: none;

    font-family: "DM Sans";
}

main p.dm-mono-specimen {
    display: none;
    
    font-family: "DM Mono";
}

body .locale {
    grid-column: 1 / 12;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 1em;
    width: 100%;
    padding: 1em var(--vocabulary-page-edges-space);
    box-sizing: border-box;

    background: #EFEFEF;
    text-align: right;
    font-family: "DM Sans";
    font-size: .8em;
    font-weight: 600;

    /* temp */
    display: none;
}

body .locale:before {
    font-size: 1.5em;
}



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


body > header .masthead {
    padding-top: 20px;
    align-items: center;
}

body > header .masthead h1 {
    position: relative;
}

@keyframes twenty-fifth {

    0% {
        background-color: #ADFF00;
    }

    25% {
        background-color:#FF9CFF
    }

    50% {
        background-color: #D9D9D9;
    }

    75% {
        background-color:#FF9CFF;
    }

    100% {
        background-color: #ADFF00;
    }

}

body > header .masthead h1:before {
    position: absolute;
    left: .2em;
    top: .4em;
    transition: .2s ease;
    /* animation: twenty-fifth 2s infinite; */

    display: block;
    content: '';
    height: .85em;
    width: .85em;
    /* font-size: ; */
    background-color: #ADFF00;
    background-color: #9EC846;
    filter: saturate(70%);
    opacity: .7;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url(../svg/25.svg);
    mask-image: url(../svg/25.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
}

body > header .masthead h1:has(a:hover):before {
    left: -.5em;
    top: -.2em;
    height: 2em;
    width: 2em;

    animation: twenty-fifth 10s infinite;
    /* filter: saturate(100%); */
}



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

body > header .masthead .identity-logo {
    position: relative;
    background-color: inherit;
    -webkit-mask-image: inherit;
    mask-image: inherit;

}

body > header .masthead .identity-logo:before {
    display: inline-block;
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    height: 50px;
    width: 191px;

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

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

body > header .masthead .identity-logo:hover:before {
    background:#2E1FB8;
}

/* drop down behavior */

body > header .masthead .primary-menu ul li {
    position: relative;
    margin-left: 40px;
    /* padding-bottom: 1em; */
}

body > header .masthead .primary-menu ul li:hover {
    cursor: pointer;
}

body > header .masthead .primary-menu > ul > li:hover > a {
    border-bottom: 2px solid #2E1FB8;
    color: #2E1FB8;
}

body > header .masthead .primary-menu ul ul {
    display: none;
    /* padding: 1em; */
    /* padding-right: 1em; */
    /* width: 110%; */
    /* width: 8.5em; */
    min-width: 11em;
    position: absolute;
    overflow: visible;
    top: 100%;
    left: 0;

    background: white;
    border: 1px solid black;
    border-right-width: 3px;
    border-bottom-width: 2px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;

    box-shadow: 2px 2px #ADFF00;
    z-index: 1000;
}

body > header .masthead .primary-menu ul ul ul {
    top: 100%;
    left: 30%;
    /* margin-top: 1em; */
    z-index: 1000;

    /* move elsewhere */
    background: white;

    box-shadow: 2px 2px #FF9CFF;
}

body > header .masthead .primary-menu ul ul ul:before {
    display: inline-block;
    height: 1em;
    width: 60%;
    content: '';
    position: absolute;
    left: -1px;
    top: -1em;

    /* background: white; */
    /* border: 1px solid black; */
    /* border-right-width: 2px; */
    /* border-bottom-width: 0; */

}

body > header .masthead .primary-menu ul ul li {
    margin: 0;
    padding: 0;

    padding-bottom: .7em;

    padding-bottom: 1em;
    /* margin-bottom: 1em; */
    border-bottom: 1px solid var(--vocabulary-neutral-color-lighter-gray);

    padding-top: 1em;
    padding-right: 1em;
    padding-left: 1em;
    border-left: 3px solid white;

    line-height: 1.5;

}

body > header .masthead .primary-menu ul ul li:last-child {
    border-bottom: none;
}


body > header .masthead .primary-menu ul ul li:last-child {
    /* padding-bottom: 0; */
}

/* body > header .masthead .primary-menu ul ul li a {
    width: 100%;
} */


body > header .masthead .primary-menu ul:has(ul) li:hover > ul {
    display: block;
}

body > header .masthead .primary-menu ul:has(ul) li:focus-within > ul {
    display: block;
}

body > header .masthead .primary-menu ul li a {
    font-family: "DM Mono";
    font-size: 1em;
    font-weight: 300;
    text-transform: capitalize;
    color: black;

    /* transition: .1s ease; */
}

body > header .masthead .primary-menu > ul > li > a:hover {
    border-bottom: 2px solid #2E1FB8;
}

body > header .masthead .primary-menu > ul ul > li > a:hover {
    /* border-left: 2px solid black; */
}

body > header .masthead .primary-menu > ul ul > li:hover {
    border-left: 3px solid #444242;

    background: black;
}

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

}

body > header .masthead .primary-menu ul ul:has(ul) > li:hover {
    border-bottom-color: black;
}

body > header .masthead .primary-menu ul li a.donate {
    border: 4px solid black;
    border-radius: 100px;
    padding: 1em 1.4em;

    transition: .2s ease;
}


@keyframes color-spin {

    0% {
        box-shadow: 2px 2px #ADFF00, -2px -2px #FF9CFF;
    }

    25% {
        box-shadow: -2px 2px #ADFF00, 2px -2px #FF9CFF;
    }

    50% {
        box-shadow: -2px -2px #ADFF00, 2px 2px #FF9CFF;
    }

    75% {
        box-shadow: 2px -2px #ADFF00, -2px 2px #FF9CFF;
    }

    100% {
        box-shadow: 2px 2px #ADFF00, -2px -2px #FF9CFF;
    }

}

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

    animation: color-spin 2s infinite;

}

body > main {
    margin-bottom: 0;
}


body > footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "logo search search"
        "contact nav subscribe"
        "contact nav subscribe"
        "license license license";
    padding-top: 55px;
    position: relative;
    overflow: hidden;
}

body > footer:before {
    position: absolute;
    bottom: -6em;
    right: -11em;
    z-index: 1;

    content: '';
    /* width: 30%; */
    /* height: 120%; */
    /* background: var(--vocabulary-neutral-color-lighter-gray); */
    /* border-radius: 16px; */

     display: block;
    content: '';
    height: 35em;
    width: 35em;
    /* font-size: ; */
    background-color:#FF9CFF;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url(../svg/repeat_c.svg);
    mask-image: url(../svg/repeat_c.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    transform: rotate(-225deg);
}

body > footer:after {
    position: absolute;
    bottom: -7em;
    right: -17em;
    z-index: 1;

    content: '';
    /* width: 30%; */
    /* height: 120%; */
    /* background: var(--vocabulary-neutral-color-lighter-gray); */
    /* border-radius: 16px; */

     display: block;
    content: '';
    height: 35em;
    width: 35em;
    /* font-size: ; */
    background-color:white;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url(../svg/repeat_c.svg);
    mask-image: url(../svg/repeat_c.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    transform: rotate(-190deg);
}

body > footer .identity-logo { 
    height: 82px;
    width: 340px;
    position: relative;

    background-color: black;
    mask-image: none;

}

body > footer .identity-logo:before {
    display: inline-block;
    /* text-indent: -1000px; */
    /* vertical-align: bottom; */
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    height: 82px;
    width: 340px;
    background-color: white;
    mask-image: url('../../vocabulary/svg/cc/logos/cc/logomark.svg');
    mask-repeat: no-repeat;
    cursor: pointer;
    grid-area: logo;
}

body > footer .identity-logo:hover {
    background-color: black;
}

body > footer .identity-logo:hover:before {
    background-color: #FF9CFF;
    /* background-color: white; */
}

body > footer .footer-menu ul {
    max-height: 8em;
    flex-direction: column;
    flex-wrap: wrap;

    font-family: "DM Sans";
    font-size: .9em;
}

body > footer .footer-menu ul li {
    margin-bottom: .8em;
}

body > footer .footer-menu ul li a {
    color: white;
}

body > footer .footer-menu ul li a:hover {
    /* 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%; */
    
    color:#FF9CFF;
}

body > footer .contact h2 {
    font-family: "DM Sans";
}

body > footer .contact p {
    font-family: "DM Sans";
    font-size: 1.1em;
}

body > footer .contact .social-menu ul {
    margin-top: 1.5em;
    padding-left: 1.2em;

    font-size: 1.1em;

}

body > footer .social-menu ul li a {
    color: #ADFF00;
}

body > footer .social-menu ul li a:hover:before {
    background-color:#FF9CFF;
}

body > footer a, body > footer p a {
    color: #ADFF00;
}

body > footer a:hover, body > footer p a:hover {
    color:#FF9CFF;
}

body > footer .search {
    width: 100%;
    grid-area: search;
    margin-top: 1.5em;
}

body > footer .search form {
    display: flex;
}

body > footer .search input:nth-of-type(1) {
    width: 90%;
    padding: .6em 1.5em;

    font-family: "DM Sans";
    font-size: 1.2em;
    border: none;
    border-radius: 60px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0; 
}

body > footer .search input:nth-of-type(2), body > footer .search button {
    
    border: none;
    border-radius: 60px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

    /* --icon-sprite-color: white; */
    /* background: white; */
    /* width: 1em; */
    /* height: 100%; */
    background: white;
    /* text-indent: 1000px; */
    color: white;
    /* overflow: hidden; */
    position: relative;
    cursor: pointer;
}

body > footer .search input:nth-of-type(2), body > footer .search button:before {
    top: 35%;
    right: 1.5em;
    position: absolute;
    transform: scaleX(-1);
}


body > footer .subscribe {
    grid-area: subscribe;
    padding: 2.5em .5em .5em .5em;
    width: 90%;
    height: 60%;
    margin-left: 5%;
    z-index: 2;
    

    font-family: "DM Sans";
    background: white;
    border-radius: 15px;
    text-align: center;

    color: black;
}

body > footer .subscribe h2 {
    margin-bottom: 1.5em;

    font-family: "DM Sans";
}

body > footer .subscribe a {
    padding: .8em 1.8em;
    
    font-family: "DM Sans";
    font-weight: 700;
    font-size: 1.2em;
    color: black;
    background:#ADFF00;
    border-radius: 60px;
}

body > footer .subscribe a:hover {

    background: black;
    color: white;
}

body > footer .license {
    text-align: center;
    width: 60%;
    justify-content: center;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 18fr;
    position: relative;
    z-index: 3;
}

body > footer .license svg {
    /* width: 1.5em;
    height: 1.5em; */
}


body > footer .license p {
    margin-top: 0;
    margin-left: .5em;

    font-family: "DM Mono";
    font-size: .8em;
    text-align: left;
}

body > footer .license p a:hover {
    color:#FF9CFF;
}




article.topic-summary {
    grid-column: 2 / 11;
    display: grid;
    grid-template-columns: 1fr 1fr;

    margin-bottom: 4em;
}

article.topic-summary .description {
    /* display: flex;
    flex-wrap: wrap;
    align-items: center; */
}

article.topic-summary h2 {
    font-family: "DM Sans";
}

article.topic-summary p {
    margin-bottom: 1.2em;

    font-family: "DM Sans";
    font-size: 1.2em;
    line-height: 1.4;
}

article.topic-summary a {
    --underline-background-color: black;
    display: inline-block;
    margin-top: 1em;
    padding: .6em 1.6em;

    font-family: "DM Sans";
    font-weight: 700;
    font-size: 1.2em;
    color: white;
    background:black;
    border-radius: 60px;
    text-transform: capitalize;
    box-sizing: border-box;
    border: 4px solid transparent;

}

article.topic-summary a:hover {
    --underline-background-color: white;
    background: white;
    color: black;
    border-color: black;

    border: 4px solid black;
    /* padding: .6em 1.6em; */
}

article.topic-summary figure {
    margin-bottom: 0;
}


article.topic-summary.highlight {
    grid-column: 2 / 11;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-areas: 
        "d d d d g g g"
        "d d d d g g g"
        "d d d d g g g"
        "c c c c g g g";
    /* display: grid; */
    /* grid-template-columns: repeat(9, 1fr); */
    /* grid-template-rows: repeat(5, 1fr); */
    position: relative;
}

article.topic-summary.highlight .description {
    /* grid-column: 1 / 6; */
    /* grid-row: 1 / 5; */
    /* position: absolute; */
    grid-area: d;
    /* top: 0;
    left: 0; */
    padding: 4em;
    box-sizing: border-box;
    /* width: 60%; */

    background: white;
    border: 4px solid black;
    border-radius: 20px;
    z-index: 10;
}

article.topic-summary.highlight .description h2 {
    margin: 0;
}

article.topic-summary.highlight .description a:hover {

}

article.topic-summary.highlight figure {
    /* grid-column: 5 / 10; */
    /* grid-row: 1; */
    grid-area: g;
    /* position: absolute;
    top: 0;
    right: 0; */
    margin-top: 2em;

    display: inline-block;
    background: var(--vocabulary-neutral-color-lighter-gray);
    border-radius: 16px;
    content: '';
    width: 120%;
    margin-left: -20%;
    height: 450px;
    z-index: -10; 
}


article:nth-child(even).topic-summary.highlight {
    grid-template-areas: 
        "g g g p p p p"
        "g g g d d d d"
        "g g g d d d d"
        "c c c e e e e";
}

article:nth-child(even).topic-summary.highlight figure { 
    margin-left: 0;
}


article:nth-child(odd of .topic-summary.highlight) {
    margin-bottom: 6em;
}

article:nth-child(odd of .topic-summary.highlight) .description {
    background: #FFD9CC;
    margin-bottom: -5%;
}

article:nth-child(odd of .topic-summary.highlight) figure {

}

article:nth-child(even of .topic-summary.highlight) .description {
    background: #E0FF00;
}


article.topic-summary.focus-area {
    grid-column: 2 / 11;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 3em;

}

article.topic-summary.focus-area .description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

article.topic-summary.focus-area .description h2 {
    margin: 0;
    margin-bottom: .3em;
}

article.topic-summary.focus-area .description p {
    margin: 0;
    margin-top: 1.1em;
}

article.topic-summary.focus-area .description a {
    margin-top: 2.1em;
}


article.topic-summary.focus-area figure {
    display: inline-block;
    background: var(--vocabulary-neutral-color-lighter-gray);
    border-radius: 16px;
    content: '';
    width: 100%;
    /* margin-left: -20%; */
    height: 450px;
    /* z-index: -10;  */
}

article.topic-summary.focus-area:nth-of-type(even) figure {
    order: -1;
}

article:nth-child(3n + 2 of .topic-summary.focus-area) a {
    --underline-background-color: #ADFF00;
    background:#ADFF00;
    color: black;
}

article:nth-child(3n + 3 of .topic-summary.focus-area) a {
    --underline-background-color: #2E1FB8;
    background:#2E1FB8;
    color: white;
}

article:nth-child(3n + 1 of .topic-summary.focus-area) a {
    --underline-background-color: #FF9CFF;
    background:#FF9CFF;
    color: black;
}

article.topic-summary.focus-area a:hover {
    --underline-background-color: #black;
    background:black;
    color: white;

    /* padding: .8em 1.8em; */

    /* border: none; */
}






body main article.topic-summary.intro {
    display: flex;
    grid-column: 2 / 11;

}

body main article.topic-wummary.intro .description {
    width: 2fr;
}

body main article.topic-summary.intro h2 {
    font-family: "DM Sans";
    font-size: 3.7em;
    /* width: 8em; */
    margin-top: 45%;
    margin-left: 5%;
   
}


body main article.topic-summary.intro figure {
    /* display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr; */
    position: relative;
    /* width: 100%; */
    /* height: 85vw; */
    z-index: -1;
}


body main article.topic-summary.intro figure img.photo {
    /* grid-column: 1 / 10;
    grid-row: 1 / 4; */
    margin-left: -2em;
    /* width: 100%; */
    object-fit: cover;



    mask-image: url('../svg/blob2.svg');
    mask-repeat: no-repeat;
    mask-position: top center;
    mask-size: 86% 100%;

    transition: .2s ease-in;
    margin-top: 2.5em;
}

body main article.topic-summary.intro figure img:hover {
    /* mask-size: 1000% 1000%; */
}

/* body main article.topic-summary.intro figure svg {
    width: 100%;
} */

body main article.topic-summary.intro figure img.shape1 {
   /* grid-column: 1 / 2;
   grid-row: 1 / 4; */
   width: 30%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 10;
}

body main article.topic-summary.intro figure img.shape2 {
   /* grid-column: 5 / 9;
   grid-row: 1; */

   width: 40%;
   position: absolute;
   bottom: 5%;
   right: 0;
   z-index: -10;
}

body main article.topic-summary.intro figure img.shape3 {
   /* grid-column: 5 / 9;
   grid-row: 1; */

   width: 66%;
   position: absolute;
   top: -10%;
   right: 0;
   z-index: 5;
}


body main article.topic-summary.about figure {
    order: -1;
}


body main article.topic-summary.newsletter {
    grid-column: 2 / 11;
    margin-top: 6em;
    padding: 4em;
    box-sizing: border-box;
    position: relative;

    background: white;
    background: #FF9CFF;
    border: 4px solid black;
    border-radius: 20px;
    /* z-index: 10; */
}

body main article.topic-summary.newsletter h2 {
    margin-top: 0;
}

body main article.topic-summary.newsletter figure {
    /* margin-left: 35%; */
    /* margin-top: -30%; */
    /* width: 74%; */
    /* height: 160%; */
    position: absolute;
    bottom: 2em;
    right: 2em;
    width: 375px;
    height: 500px;
    background: var(--vocabulary-neutral-color-lighter-gray);
    border-radius: 16px;
    z-index: 3;
}

body main article.topic-summary.newsletter:before {
    position: absolute;
    top: -4.5em;
    right: 16em;
    z-index: 1;

    content: '';
    /* width: 30%; */
    /* height: 120%; */
    /* background: var(--vocabulary-neutral-color-lighter-gray); */
    /* border-radius: 16px; */

     display: block;
    content: '';
    height: 20em;
    width: 20em;
    /* font-size: ; */
    background-color:#FFD9CC;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url(../svg/blob_c2.svg);
    mask-image: url(../svg/blob_c2.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    /* transform: rotateX(180deg) rotate(-90deg); */
}

body main article.topic-summary.newsletter figure:after {
    position: absolute;
    bottom: 3em;
    left: -6em;
    z-index: 1;

    content: '';
    /* width: 30%; */
    /* height: 120%; */
    /* background: var(--vocabulary-neutral-color-lighter-gray); */
    /* border-radius: 16px; */

     display: block;
    content: '';
    height: 9em;
    width: 9em;
    /* font-size: ; */
    background-color:#2E1FB8;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url(../svg/star_c.svg);
    mask-image: url(../svg/star_c.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    /* transform: rotateX(180deg) rotate(-90deg); */
}









.posts > h2 {
    font-family: "DM Sans";
}

.posts .post h2, .posts .post h3 {
    font-family: "DM Sans";
}


.post a {
    font-weight: 600;
}

.post .categories {
    font-family: "DM Mono";
}

.post .categories a {
    font-weight: 500;
}


.posts .post .byline {
    font-weight: 600;
}

.posts .post p {
    margin-top: 1em;

    font-size: 1.3em;
    line-height: 1.2;
}

.posts .post .byline {
    font-size: 1.2em;
    font-weight: 500;
}

.posts .post .byline a {
    font-family: "DM Sans";
    color: #2E1FB8;
}


.home-narrative article.posts {
    grid-column: 2/11;
}

article.posts h2 {
    font-weight: 600;
    margin-bottom: 1.5em;
}

article.posts a {
    color: black;
    /* font-weight: 600; */
}

article.posts .post a:hover {
    color:#FF0000;
}

article.posts a.more {
    /* padding: 12px;
    
    color: white;
    border-radius: 60px; */

    padding: .8em 1.8em;
    
    font-family: "DM Sans";
    font-weight: 700;
    font-size: 1.2em;
    color: white;
    background:#2E1FB8;
    border-radius: 60px;
    text-transform: capitalize;
}

article.posts a.more:hover {
    background: black;
}

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

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

article.posts ul li {
    grid-column: span 4;
 }

 .home-narrative article.posts ul li:nth-child(1) {
    grid-column: span 12;
 }

 .home-narrative article.posts ul li:nth-child(1) article, .blog-index article.post.featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 3em;
 }

 .home-narrative article.posts ul li:nth-child(1) article header, .blog-index article.post.featured header {
    grid-column: 2 / 3 ;
    grid-row-start: 1;
 }

  .home-narrative article.posts ul li:nth-child(1) article figure, .blog-index article.post.featured figure {
    grid-row-start: 1;
    width: 100%;

  }

article.posts .post h3 {
    font-size: 1.5em;
}

article.posts .post {
    margin-bottom: 1em;

    font-family: "DM Sans";
}

article.posts .post figure {
    order: -1;
}

article.posts .post figure img {
    border-radius: 16px;
}

article.posts .post figure figcaption {
    display: none;
}

article.posts footer {
    margin-top: 2em;
}

main a {
    color:#2E1FB8;
}

main ul, main ol {
    font-family: "DM Sans";
    font-size: 1.2em;
}

main figure {
    margin-bottom: 2em;
}
    
main > header {
    grid-column: 2 / 11;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

main > header div {
    display: flex;
    flex-direction: column;
    align-content: middle;
    justify-content: center;
    height: 100%; 

    text-align: left;
    font-family: "DM Sans";
}

main > header h1 {
    margin: 0;
    padding-left: 2em;
    display: inline-block;
    box-sizing: border-box;

    font-family: "DM Sans";
    font-size: 3.7em;
    text-align: left;
    text-align: left;
}

main > header a {
    --underline-background-color: white;

    color: black;
}

main > header .byline {
    margin-top: .5em;

    font-style: normal;
    font-size: 2.2em;
}

main > header .categories {
    margin-bottom: 1em;
}

main > header:before {
    display: none;
}

main > header figure {
    width: 100%;
    height: 600px;
    margin: 0;
    order: -1;

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

main > header figure img {
    width: 100%;
}

main .content h2 {
    font-family: "DM Sans";
}

main .content p {
    font-family: "DM Sans";
    font-size: 1.2em;
    line-height: 1.4;
}

main .content figure figcaption {
    font-family: "DM Mono";
    font-size: .8em;
}

main .content img {
    border-radius: 16px;
}

main .content ul li, main .content ol li {
    margin-bottom: 1em;

    line-height: 1.4;
}

main:has( > aside.sidebar) > aside.sidebar {
    padding-left: 1em;
    margin-left: 4.1em;
}

main aside.sidebar nav {
    margin-bottom: 6em;
    padding: 1em;

    font-family: "DM Sans";
    border: 4px solid #E0E0E0;
    border-radius: 16px;
}

main > aside.sidebar h2 {
    font-family: "DM Sans";
    font-weight: 600;
}

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

main > aside.sidebar nav ul li {
    font-family: "DM Sans";
    font-size: 1em;
    font-weight: 600;
}

main > aside.sidebar nav > ul > li {
    margin-bottom: 0;
    padding-top: .5em;
    padding-bottom: .5em;
    border-bottom: 1px solid var(--vocabulary-neutral-color-lighter-gray);
    
    position: relative;
}

main > aside.sidebar nav > ul > li:last-child {
    border-bottom: none;
}


main > aside.sidebar nav li:has(ul) button.expand {
    display: inline-block;

    background: transparent;
    border: none;
}

main > aside.sidebar nav li:has(ul) button.expand:before {
    display: inline-block;
    transform: rotate(180deg);
    /* padding-left: 1em; */
    margin-top: .5em;
}

main > aside.sidebar nav ul.hide {
    display: none;
}

main > aside.sidebar nav li:has(ul.hide) button.expand:before {
    transform: none;
}



/* main > aside.sidebar nav ul ul {
    display: none;
} */

/* temp testing */
/* main > aside.sidebar nav > ul > li:has(ul):after { 
    content: '^';
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
} */

main aside.opening, main aside.closing { 
    padding: 2.5em;
    box-sizing: border-box;

    border: 4px solid black;
    border-radius: 20px;
}

main aside.opening h2, main aside.closing h2 { 
    margin-top: 0;
}

main aside.opening a, main aside.closing a { 
    color: black;
}

main aside.opening {
    background:#FF9CFF;
} 

main aside.opening a {
    --underline-background-color:#FF9CFF;
} 

main aside.closing {
    background: #E0FF00;
} 

main aside.closing a {
    --underline-background-color:#E0FF00;
}

main aside.more-links {
    grid-column: 3 / 10;
    margin-bottom: 6em;
    padding: 1em;

    font-family: "DM Sans";
    border: 4px solid #E0E0E0;
    border-radius: 16px;
}

main aside.more-links h2 {
    margin-top: 0;

    font-family: "DM Sans";
    font-size: 1.7em;
}

main aside.more-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin: 0;
    padding: 0;

    list-style: none;
    line-height: 1.4;
    font-size: 1em;
    font-weight: 600;
}

main blockquote {
    grid-column: 2/8;
    padding: 5em;
    margin-bottom: 4em;
    position: relative;
    clear: both;

    font-family: "DM Sans";
    background: #F5F5F5;
    border: 4px solid black;
    border-radius: 16px;
}


main blockquote p {
    /* display: grid;
    grid-template-columns: 1fr 3fr; */
    margin: 0;
    position: relative;

    font-size: 1.4em;
    font-weight: 400;
    line-height: 1.4;
}

main blockquote p:before {
    /* grid-column-start: 1; */
    position: absolute;
    left: -5em;
    top: -2.4em;

    display: block;
    content: '';
    height: 4.8em;
    width: 4.8em;
    /* font-size: ; */
    background-color: black;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url(../svg/quote.svg);
    mask-image: url(../svg/quote.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
}

main blockquote p:after {
    position: absolute;
    right: -10em;
    bottom: -4em;
    z-index: -1;

    content: '';
    /* width: 30%; */
    /* height: 120%; */
    /* background: var(--vocabulary-neutral-color-lighter-gray); */
    /* border-radius: 16px; */

     display: block;
    content: '';
    height: 10em;
    width: 10em;
    /* font-size: ; */
    background-color:#ADFF00;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url(../svg/blob5.svg);
    mask-image: url(../svg/blob5.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    /* transform: rotate(90deg); */
}

main blockquote:after {
    position: absolute;
    right: -10em;
    bottom: -2em;
    z-index: -1;

    content: '';

    display: block;
    content: '';
    height: 20em;
    width: 20em;
    /* font-size: ; */
    background-color:black;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url(../svg/repeat_c.svg);
    mask-image: url(../svg/repeat_c.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    transform: rotate(25deg);
}

main div.highlight {
    margin-bottom: 2em;
    padding: 2em;
    clear: both;

    background: #F5F5F5;
    font-family: "DM Sans";
    border: 4px solid #D9D9D9;
    border-radius: 16px;
    font-family: "DM Sans";
}

main div.highlight p {
    margin: 0;
}

main nav.pagination {
    margin-bottom: 6em;
}

main nav.pagination ol li a {
    font-family: "DM Sans";
}

main nav.pagination ol li a {
    /* --underline-background-color: white; */
    /* background: none; */

    color:#2E1FB8;
    border-radius: 5px;

}

main nav.pagination ol li.current a {
    /* --underline-background-color: white; */
    /* background: none; */

    /* color:white; */
}


.legal-tools main > header h1 {
    padding-left: 0;
    order: 2;
}

.legal-tools main > header span.alt-titles > span.tool-icons {
    margin-right: .5em;
}

.legal-tools main > header span.alt-titles > span.tool-icons > span.cc-icon > svg {
    display: inline;
    height: .8em;
    width: .8em;
    vertical-align: center;
}

.legal-tools main > header span.alt-titles {
    display: flex;
    align-items: middle;
    font-size: 2.4em;
}

.legal-tools main > header h2 {
    order: 3;

    font-family: "DM Mono";
    font-size: 2.2em;
    font-weight: 400;
}

.legal-tools .tool-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin-bottom: 2em;
    padding: 2em;

    background: #F5F5F5;
    border: 4px solid #D9D9D9;
    border-radius: 16px;
}

.legal-tools .tool-meta h2 {
    font-size: 1em;
    margin: 0;
    /* font-family: "Source Sans Pro"; */
    font-weight: 400;
    margin-left: 0.6em;
    display: inline;
}

.legal-tools .tool-meta a {
    --underline-background-color: #F5F5F5;
}

.legal-tools div#deed-body ol > li {
    clear: both;
    list-style: none;
    margin-bottom: 2em;
    min-height: 2em;
}

.legal-tools .alt-view {
    align-self: center;
    margin-left: auto;
}

.legal-tools div.content div#deed-body {
    margin-bottom: 2em;
    padding: 4em;

    border: 4px solid #FF9CFF;
    border-radius: 16px;
}

.legal-tools div.content div#deed-body h2:nth-of-type(1) {
    margin-top: 0;
}

.legal-tools .notice-bottom {
    padding: 3em;

    background: rgba(224, 255, 0, 0.35);
    font-family: "DM Mono";
}

.legal-tools .notice-bottom h2:nth-of-type(1) {
    margin-top: 0;
}

.legal-tools .notice-bottom h2, .legal-tools .notice-bottom p {
    font-family: "DM Mono";
}

.legal-tools .notice-bottom p:last-child {
    margin-bottom: 0;
}

.legal-tools article.footnotes ul, .legal-tools article.footnotes h2, .legal-tools article.footnotes p {
    font-family: "DM Mono";
}

.legal-tools article.footnotes .icon-replace.fa-angle-up {
    --icon-sprite: var(--fa-angle-up);
    /* --icon-sprite-color: blue; */
    /* position: relative; */
}

.legal-tools article.footnotes ul {
    margin: 0 inherit;
    padding: 0;
    list-style: none;
    font-size: 1rem;
}

.legal-tools article.footnotes ul li a span {
    display: inline-block;
    text-indent: -3000px;
}



.blog-index header h1 {
    padding-left: 0;
}

.blog-index header figure {
    order: 1;
}

.blog-index main .post.featured {
    grid-column: 2 / 11;
    margin-top: 6em;
    margin-bottom: 8em;
    padding: 3em;

    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        'image title'
        'image teaser';

    position: relative;
    text-align: left;
    position: relative;
    text-align: left;

    background: #F5F5F5;
    font-family: "DM Sans";
    border: 4px solid black;
    border-radius: 16px;
    font-family: "DM Sans";
}

.blog-index main .post.featured a {
    --underline-background-color: #F5F5F5;

    color: black;
}

.blog-index main .post.featured h2 {
    font-family: "DM Sans";
    font-size: 1.5em;
}

.blog-index main .post.featured .byline {
    font-size: 1.2em;
}

.blog-index main .post.featured figure {
    grid-area: image;
    margin-bottom: 0;
}

.blog-index main .post.featured figure img {
    border-radius: 16px;
}

.blog-index main .post.featured figure figcaption {
    margin-top: 1em;

    font-family: "DM Mono";
    font-size: .7em;
}

.blog-index main .post.featured p {
    grid-column-start: 2;
    grid-area: teaser;
    margin-bottom: 0;

    font-size: 1.3em;
    line-height: 1.2;
}

.blog-index main .post.featured .byline a {
    color:#2E1FB8;
}

.blog-index main .posts h2 {

    text-align: left;

}



.blog-post header h1 {
    padding-left: 0;
}

.blog-post header figure {
    order: 1;
}


.events-index main article.topic-summary.about figure {
    order: 2;

}


.events-index .events {
    grid-column: 2/11;

    font-size: 13.4px;
}

.events-index .events h2 {
    margin-bottom: 2em;

    font-family: "DM Sans";
    font-size: 2.5em;
}

.events-index .events ul {
    margin: 0;
    padding: 0;

    list-style: none;

}

.events-index .event {
    grid-column: 2 / 11;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4em;
    margin-bottom: 4em;
}


.events-index .event .description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.events-index .event h3 {
    margin-top: 0;
    margin-bottom: 1em;
    order: 0;

    font-family: "DM Sans";
    font-size: 1.6em;
}

.events-index .event h4 {
    margin-top: 0;
    /* margin-bottom: 0; */
    margin-bottom: .3em;
    order: -1;

    font-family: "DM Sans";
    font-size: 3.2em;
    color:#2E1FB8;
}

.events-index .event .time {
    display: inline-block;
    margin-bottom: .3em;
    order: 2;

    font-family: "DM Mono";
    font-size: 1.2em;
}

.events-index .event .location {
    display: inline-block;
    margin-bottom: .3em;
    order: 1;

    font-family: "DM Mono";
    font-size: 1.2em;

}

.events-index .event p {
    margin-top: 1.1em;
    margin-bottom: .5em;
    order: 3;

    font-family: "DM Sans";
    font-size: 1.2em;
    line-height: 1.4;
}

.events-index .event a {
    --underline-background-color: black;
    display: inline-block;
    margin-top: 1em;
    /* margin-top: 2.1em; */
    padding: .6em 1.6em;
    order: 3;

    font-family: "DM Sans";
    font-weight: 700;
    font-size: 1.2em;
    color: white;
    background:black;
    border-radius: 60px;
    text-transform: capitalize;
    box-sizing: border-box;
    border: 4px solid transparent;

}

.events-index .event a:hover {
    --underline-background-color: white;
    background: white;
    color: black;
    border-color: black;

    border: 4px solid black;
    /* padding: .6em 1.6em; */
}

.events-index .event figure {
    margin-bottom: 0;
    display: inline-block;
    order: -1;

    background: var(--vocabulary-neutral-color-lighter-gray);
    border-radius: 16px;
    content: '';
    width: 100%;
    height: 450px;
}

.events ul li:nth-child(3n + 2) a {
    --underline-background-color: #ADFF00;
    background:#ADFF00;
    color: black;
}

.events ul li:nth-child(3n + 3) a {
    --underline-background-color:#E0FF00;
    background:#E0FF00;
    color: black;
}

.events ul li:nth-child(3n + 1) a {
    --underline-background-color: #FF9CFF;
    background:#FF9CFF;
    color: black;
}

/* 
.events-index .events li:nth-child(1) figure {
    order: -1;
}

.events-index .events li:nth-child(2) figure {
    order: -1;
} */

/* .casestudies-index .casestudies li:nth-child(3n+2) figure {
    order: -1;
} */
.events-index .events footer {
    margin-bottom: 6em;

    text-align: center;
}

.events-index .events a.more {
    display: inline-block;

    padding: .8em 1.8em;
    
    font-family: "DM Sans";
    font-weight: 700;
    font-size: 1.4em;
    color: white;
    background: black;
    border-radius: 60px;
    text-transform: capitalize;
    border: 4px solid transparent;
}

.events-index .events a.more:hover {
    background: white;
    color: black;
    border-color: black;
}


.event-post header h1 {
    padding-left: 0;
}

.event-post header figure {
    order: 1;
}

.event-post aside.sidebar .event-meta {
    margin-bottom: 6em;
    padding: 3em;

    background: #F5F5F5;
    font-family: "DM Sans";
    border: 4px solid black;
    border-radius: 16px;
}

.event-post aside.sidebar .event-meta h2 {
    margin-top: 0;
    margin-bottom: .8em;

    color:#2E1FB8;
    font-size: 1.4em;
}

.event-post aside.sidebar .event-meta p {
    margin: 0;
}

.event-post aside.sidebar .event-meta .date, 
.event-post aside.sidebar .event-meta .time, 
.event-post aside.sidebar .event-meta .location {
    font-family: "DM Mono";
}

.event-post aside.sidebar .event-meta .date {
    font-size: 1.8em;
}

.event-post aside.sidebar .event-meta .time {
    margin-bottom: 2em;

    font-size: 1.4em;
}

.event-post aside.sidebar .event-meta .location {
    margin-bottom: 1em;

    font-size: 1.4em;
}


.event-post aside.sidebar .event-meta a {
    --underline-background-color:#FF9CFF;
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    margin-top: 1em;
    padding: .8em 1.8em;
    
    
    font-family: "DM Sans";
    font-weight: 700;
    font-size: 1.2em;
    color: black;
    background:#FF9CFF;
    border-radius: 60px;
    text-transform: capitalize;
    text-align: center;
}

.event-post aside.sidebar .event-meta a:hover {
    --underline-background-color:black;

    color: white;
    background:black;
}

.event-post .content h2 {
    /* margin-top: 3em; */
}

.event-post .content a.files {
    --underline-background-color:black;
    display: inline-block;
    box-sizing: border-box;
    /* width: 100%; */
    margin-top: 1em;
    padding: .6em 1.6em;
    
    
    font-family: "DM Sans";
    font-weight: 700;
    font-size: 1.2em;
    color: white;
    background:black;
    border-radius: 60px;
    text-transform: capitalize;
    text-align: center;
    border: 4px solid transparent;
}

.event-post .content a.files:hover {
    --underline-background-color:white;

    color: black;
    background:white;
    border-color: black;
}

.event-post .content .speakers {
    margin-top: 6em;
}

.event-post .content .speakers ul {
    margin: 0;

    list-style: none;
}

.event-post .content .speakers .speaker {
    /* display: flex; */
    margin-bottom: 6em;
    position: relative;
}

.event-post .content .speakers h2 {
    margin-bottom: 1.5em;
}

.event-post .content .speakers .speaker h3 {
    width: 100%;
    margin: 0;
    margin-left: 20%;

    font-family: "DM Sans";
    font-size: 1.5em;
}

.event-post .content .speakers .speaker h4 {
    margin: 0;
    margin-left: 20%;
    /* width: 100%; */

    color:#2E1FB8;
    font-weight: 400;
    font-size: 1.3em;
}

.event-post .content .speakers .speaker p {
    margin-top: 4em;

    font-size: 1em;
}

.event-post .content .speakers .speaker figure {
    width: 120px;
    height: 120px;
    /* order: -1; */
    /* float: left; */
    position: absolute;
    top: 0;
    left: 0;

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

.event-post .content .speakers .speaker figure:before {
    position: absolute;
    top: -1em;
    left: -1em;
    z-index: -1;

    content: '';
    /* width: 30%; */
    /* height: 120%; */
    /* background: var(--vocabulary-neutral-color-lighter-gray); */
    /* border-radius: 16px; */

     display: block;
    content: '';
    height: 8em;
    width: 8em;
    /* font-size: ; */
    background-color:#E0FF00;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url(../svg/blob_c.svg);
    mask-image: url(../svg/blob_c.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    /* transform: rotate(-40deg); */
}

.event-post .content .speakers ul li:nth-child(even) figure:before {
    background-color:#FF9CFF;
}


.event-post main footer {
    grid-column: 2/11;
    margin-bottom: 6em;

    text-align: center;
}

.event-post main footer nav ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;

    list-style: none;
}

.event-post .more {
    --underline-background-color:black;
    display: inline-block;
    box-sizing: border-box;
    /* width: 100%; */
    margin-top: 1em;
    padding: .6em 1.6em;
    
    
    font-family: "DM Sans";
    font-weight: 700;
    font-size: 1.2em;
    color: white;
    background:black;
    border-radius: 60px;
    text-transform: capitalize;
    text-align: center;
    border: 4px solid transparent;
}

.event-post main .more:hover {
    --underline-background-color:white;

    color: black;
    background:white;
    border-color: black;
}

.event-post main .previous, .event-post main .next {
    font-weight: bold;
}

.event-post main .previous:hover, .event-post main .next:hover {
    color:#FF0000;

}

.event-post main .previous:before {
    content: '< ';
}

.event-post main .next:after {
    content: ' >';
}






.training-index header h1 {
    padding-left: 0;
}

.training-index header figure {
    order: 1;
}

.training-index article .topic-summary a {
    /* font-size: 1rem; */
}

.training-index article .topic-summary a:hover {
    /* font-size: 1rem; */
}

.training-index .topic-dive {
    grid-column: 2/11;
}

.training-index .topic-summary .trainings {
    grid-column: span 2;
    margin-top: 4em;

    font-size: 13.4px;
}

.training-index .topic-summary .trainings > ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;

    list-style: none;
    margin: 0;
    padding: 0;
}

.training-index .topic-summary .trainings > ul > li {
    padding: 2em;

    background: white;
    font-family: "DM Sans";
    border: 4px solid black;
    border-radius: 16px;
}

.training-index .topic-summary .trainings > ul > li:nth-child(1) {
    border-color:#FF9CFF;
}

.training-index .topic-summary .trainings > ul > li:nth-child(1) a {
    background-color:#FF9CFF;
}

.training-index .topic-summary .trainings > ul > li:nth-child(2) {
    border-color:#ADFF00
}

.training-index .topic-summary .trainings > ul > li:nth-child(2) a {
    --underline-background-color:#ADFF00;
    background-color:#ADFF00;
}

.training-index .topic-summary .trainings > ul > li:nth-child(3) {
    border-color:#FFD9CC;
    
}

.training-index .topic-summary .trainings > ul > li:nth-child(3) a {
    --underline-background-color:#FFD9CC;
    background-color:#FFD9CC; 
}

.training-index .topic-summary .trainings > ul > li:nth-child(4) {
    border-color:#E0FF00;
}

.training-index .topic-summary .trainings > ul > li:nth-child(4) a {
    --underline-background-color:#E0FF00;
    background-color:#E0FF00;
}

.training-index .topic-summary .training h3 {
    margin-top: 0;
}

.training-index .topic-summary .training h4 {
    font-family: "DM Mono";
    font-size: 1.2em;
    font-weight: 400;
}

.training-index .topic-summary .training ul li {
    line-height: 1.6;
}

.training-index .topic-summary .trainings > ul > li a:hover {
    --underline-background-color: black;
    border-color: transparent;
    background-color: black;
}


.casestudies-index header h1 {
    padding-left: 0;
}

.casestudies-index header figure {
    order: 1;
}

.casestudies-index .casestudies {
    grid-column: 2/11;

    font-size: 13.4px;
}

.casestudies-index .casestudies ul {
    margin: 0;
    padding: 0;

    list-style: none;

}

.casestudies-index .case-study {
    grid-column: 2 / 11;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4em;
    margin-bottom: 4em;
}


.casestudies-index .case-study .description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.casestudies-index .case-study h2 {
    margin-bottom: .3em;

    font-family: "DM Sans";
    font-size: 1.6em;
}

.casestudies-index .case-study p {
    margin-top: 1.1em;
    margin-bottom: .5em;

    font-family: "DM Sans";
    font-size: 1.2em;
    line-height: 1.4;
}

.casestudies-index .case-study a {
    --underline-background-color: black;
    display: inline-block;
    margin-top: 1em;
    /* margin-top: 2.1em; */
    padding: .6em 1.6em;

    font-family: "DM Sans";
    font-weight: 700;
    font-size: 1.2em;
    color: white;
    background:black;
    border-radius: 60px;
    text-transform: capitalize;
    box-sizing: border-box;
    border: 4px solid transparent;

}

.casestudies-index .case-study a:hover {
    --underline-background-color: white;
    background: white;
    color: black;
    border-color: black;

    border: 4px solid black;
    /* padding: .6em 1.6em; */
}

.casestudies-index .casestudies ul li:nth-child(3n + 2) a {
    --underline-background-color: #FF9CFF;
    background:#FF9CFF;
    color: black;
}

.casestudies-index .casestudies ul li:nth-child(3n + 3) a {
    --underline-background-color:#E0FF00;
    background:#E0FF00;
    color: black;
}

.casestudies-index .casestudies ul li:nth-child(3n + 1) a {
    --underline-background-color: #ADFF00;
    background:#ADFF00;
    color: black;
}

.casestudies-index .casestudies ul li a:hover {
    --underline-background-color: black;
    background: black;
    color: white;
    border-color: transparent;

    /* border: 4px solid transparent; */
    /* padding: .6em 1.6em; */
}

.casestudies-index .case-study figure {
    margin-bottom: 0;
    display: inline-block;
    background: var(--vocabulary-neutral-color-lighter-gray);
    border-radius: 16px;
    content: '';
    width: 100%;
    height: 450px;
}


.casestudies-index .casestudies li:nth-child(1) figure {
    order: -1;
}

.casestudies-index .casestudies li:nth-child(2) figure {
    order: -1;
}

/* .casestudies-index .casestudies li:nth-child(3n+2) figure {
    order: -1;
} */



.casestudies-index .casestudies footer {
    margin-bottom: 6em;

    text-align: center;
}

.casestudies-index .casestudies a.more {
    display: inline-block;

    padding: .8em 1.8em;
    
    font-family: "DM Sans";
    font-weight: 700;
    font-size: 1.4em;
    color: white;
    background: black;
    border-radius: 60px;
    text-transform: capitalize;
    border: 4px solid transparent;
}

.casestudies-index .casestudies a.more:hover {
    background: white;
    color: black;
    border-color: black;
}

.casestudy-post .content {
    grid-column: 2/11;

}

.casestudy-post .content > h2 {
    width: 60%;
}

.casestudy-post .content > p {
    width: 60%;
}

.casestudy-post .content > blockquote {
    width: 75%;
}

.casestudy-post .content > ul, .casestudy-post .content > ol {
    width: 60%;
}


.casestudy-post .content > .datapoints ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2em;
    margin: 0;

    list-style: none;
}

.casestudy-post .content > .datapoints .datapoint p {
    font-size: 1.4em;
    text-align: center;
}

.casestudy-post .content > .datapoints .datapoint .stat {
    display: block;

    font-size: 2em;
    color:#2E1FB8;
}

.casestudy-post aside.insights {
    width: 75%;
    margin-bottom: 6em;
    padding: 3em;

    color: white;
    background:#2E1FB8;
}

.casestudy-post aside.insights h2 {
    margin-top: 0;
}


.support-page .topic-summary footer {
    grid-column: 1 / 3;
    margin-top: 4em;
}

.support-page ul.payment-methods {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
    margin: 0;
    padding: 0;

    list-style: none;
}

.support-page ul.payment-methods li {
    padding: 2em;

    background: #F5F5F5;
    font-family: "DM Sans";
    border: 4px solid black;
    border-radius: 16px;
}

.support-page ul.payment-methods li:nth-child(1) {
    background: #E0FF00;
}

.support-page ul.payment-methods li:nth-child(2) {
    background:#FFD9CC;
}

.support-page ul.payment-methods li:nth-child(3) {
    background:#FF9CFF;
}

.support-page ul.payment-methods li h3 {
    margin-top: 0;
    margin-bottom: .8em;
}

.support-page ul.payment-methods li p {
    font-size: 1em;
}

.support-page .topic-summary.supporters {
    grid-template-columns: 1fr 1fr 1fr;
}

.support-page .topic-summary.supporters .description {
    grid-column: span 2;
}

.support-page .topic-summary.supporters ul {
    margin: 0;
    columns: 2;

    list-style: none;
    line-height: 1.4;
}

.archive-page h1 {
    padding-left: 0;
}

main > aside.sidebar nav.filter-menu ul li.current {
    background: var(--vocabulary-neutral-color-lighter-gray);
    border-radius: 10px;
}

.archive-page article.posts .post {
    margin-bottom: 4em;
    font-family: "DM Sans";
}

.archive-page .posts .post .type {
    top: -1em;

    background:#FFD9CC;
}

.archive-page article.posts .post h2 {
    margin-bottom: 1em;

    font-size: 1.5em;
}

.archive-page article.posts .post figure {
    order: inherit;
}

.archive-page article.posts .post figure figcaption {
    display: inherit;

    font-family: "DM Mono";
    font-size: .8em;
}

.archive-page article.posts .post p {
    margin-top: 0;

    font-family: "DM Sans";
    line-height: 1.4;
    font-size: 1.2em;
}


.team-index header figure {
    order: 1;
}

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

.team-index main .persons .person {
    font-family: "DM Sans";
    font-size: 1.5em;
}

.team-index main .persons .person h3 {
    font-family: "DM Sans";
}

.team-index main .persons .person a {
    color: #2E1FB8;
}

.team-index main .persons .person figure {
    position: relative;
}

.team-index main .persons .person figure:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    content: '';
    /* width: 30%; */
    /* height: 120%; */
    /* background: var(--vocabulary-neutral-color-lighter-gray); */
    /* border-radius: 16px; */

     display: block;
    content: '';
    height: 15em;
    width: 15em;
    /* font-size: ; */
    background-color:#ADFF00;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url(../svg/blob2.svg);
    mask-image: url(../svg/blob2.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    /* transform: rotate(90deg); */
}

.team-index main .persons ul li:nth-child(even) .person figure:before {
    background:#FF9CFF;
}


.team-index main .persons .person figure img {
    border-radius: 16px;
}

.person-page main > header h1 {
    padding-left: 0;
    font-size: 3.56em;
}

.person-page main > header .title, .person-page main > header .pronouns {
    font-weight: 400;
}

.person-page main > header .title {
    margin-bottom: .5em;
}

.person-page main > header .pronouns {
    font-size: 1.2em;
    font-family: "DM Mono";
}

.person-page main > header p {
    font-size: 1.2em;
}

.person-page main > header figure {
    width: auto;
    height: auto;
    position: inherit;

    background: none; 
} 

.person-page main > header figure:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    content: '';
    /* width: 30%; */
    /* height: 120%; */
    /* background: var(--vocabulary-neutral-color-lighter-gray); */
    /* border-radius: 16px; */

     display: block;
    content: '';
    height: 22em;
    width: 22em;
    /* font-size: ; */
    background-color:#ADFF00;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url(../svg/blob2.svg);
    mask-image: url(../svg/blob2.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    /* transform: rotate(90deg); */
}

.person-page main > header figure img {
    border: none;
    border-radius: 200px;
}

.person-page article.posts .post {
    margin-bottom: 4em;
    font-family: "DM Sans";
}

.person-page .posts .post .type {
    top: -1em;

    background:#FFD9CC;
}

.person-page article.posts .post h2 {
    margin-bottom: 1em;

    font-size: 1.5em;
}

.person-page article.posts .post figure {
    order: inherit;
}

.person-page article.posts .post figure figcaption {
    display: inherit;

    font-family: "DM Mono";
    font-size: .8em;
}

.person-page article.posts .post p {
    margin-top: 0;

    font-family: "DM Sans";
    line-height: 1.4;
    font-size: 1.2em;
}





.search-index h1 {
    padding-left: 0;
}

.search-index .search-form form input {

    font-family: "DM Sans";
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    border-width: 4px;

}

.search-index .search-form form button {
    position: relative;

    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
}

.search-index .search-form form button:after {
    position: absolute;
    top: -6em;
    right: 4em;
    z-index: -1;

    content: '';
    /* width: 30%; */
    /* height: 120%; */
    /* background: var(--vocabulary-neutral-color-lighter-gray); */
    /* border-radius: 16px; */

     display: block;
    content: '';
    height: 15em;
    width: 15em;
    /* font-size: ; */
    background-color:#FF9CFF;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url(../svg/blob2.svg);
    mask-image: url(../svg/blob2.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    transform: rotate(40deg);
}

.search-index .search-form form button:before {
    position: absolute;
    top: -6em;
    right: 4em;
    z-index: -1;

    content: '';
    /* width: 30%; */
    /* height: 120%; */
    /* background: var(--vocabulary-neutral-color-lighter-gray); */
    /* border-radius: 16px; */

     display: block;
    content: '';
    height: 15em;
    width: 15em;
    /* font-size: ; */
    background-color:#E0FF00;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url(../svg/blob5.svg);
    mask-image: url(../svg/blob5.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    transform: rotate(10deg);
}

.search-index article.posts .post {
    margin-bottom: 4em;
    font-family: "DM Sans";
}

.search-index .posts .post .type {
    top: -1em;

    background:#FFD9CC;
}

.search-index article.posts .post h2 {
    margin-bottom: 1em;

    font-size: 1.5em;
}

.search-index article.posts .post figure {
    order: inherit;
}

.search-index article.posts .post figure figcaption {
    display: inherit;

    font-family: "DM Mono";
    font-size: .8em;
}

.search-index article.posts .post p {
    margin-top: 0;

    font-family: "DM Sans";
    line-height: 1.4;
    font-size: 1.2em;
}

.licenses-page header h1 {
    padding-left: 0;
}

.licenses-page header figure {
    order: 1;
}

.licenses-page .content {
    grid-column: 2/11;

}

.licenses-page .content > h2 {
    width: 60%;
}

.licenses-page .content > p {
    width: 60%;
}

.licenses-page .content > blockquote {
    width: 75%;
}

.licenses-page .content > ul, .casestudy-post .content > ol {
    width: 60%;
}

/* .license-page article.topic-summary:has( .licenses) {
    display: block;
} */

.licenses-page .topic-summary footer.supporting:has(ul) {
    grid-column: span 2;
    display: grid;
    margin-top: 2em;
    
    grid-template-columns: 1fr 1fr;
}

.licenses-page .topic-summary footer.supporting:has(ul) h3 {
    font-family: "DM Sans";
    font-weight: normal;
    font-size: 1.2em;
}

.licenses-page .topic-summary footer.supporting:has(ul) ul li {
    line-height: 1.5;
}

/* .licenses-page main article.topic-summary.about figure {
    order: 1;
} */

.licenses-page article.topic-summary.focus-area:nth-of-type(even) figure {
    order: 0;
}

.licenses-page article.topic-summary.focus-area:nth-of-type(odd) figure {
    order: -1;
}



.licenses-page .topic-summary.highlight {
    display: block;
    width: 95%;
    margin-top: 6em;
    margin-bottom: 8em;
    margin-left: 5%;
    position: relative;
}

article:nth-child(odd of .topic-summary.highlight) {
    margin-bottom: 8em;
}

.licenses-page .topic-summary.highlight:before {
    position: absolute;
    top: -4em;
    left: -8em;
    z-index: -1;

    content: '';
    /* width: 30%; */
    /* height: 120%; */
    /* background: var(--vocabulary-neutral-color-lighter-gray); */
    /* border-radius: 16px; */

     display: block;
    content: '';
    height: 20em;
    width: 20em;
    /* font-size: ; */
    background-color:#ADFF00;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url(../svg/blob5.svg);
    mask-image: url(../svg/blob5.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    transform: rotateX(180deg) rotate(-90deg);
}

.licenses-page .topic-summary.highlight:after {
    position: absolute;
    top: 3em;
    left: -8em;
    z-index: -1;

    content: '';
    /* width: 30%; */
    /* height: 120%; */
    /* background: var(--vocabulary-neutral-color-lighter-gray); */
    /* border-radius: 16px; */

     display: block;
    content: '';
    height: 7em;
    width: 7em;
    /* font-size: ; */
    background-color:black;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url(../svg/star_c.svg);
    mask-image: url(../svg/star_c.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    /* transform: rotateX(180deg) rotate(-90deg); */
}

.licenses-page .topic-summary.highlight .description {
    padding: 3em;

    background: rgba(245, 245, 245, 1);
}

.licenses-page article:nth-child(odd of .topic-summary.highlight) .description {
    background: rgba(245, 245, 245, 1);
}

.licenses-page .topic-summary.highlight .description h2 {
    /* font-size: 1.6em; */
    margin-top: 0;
    margin-bottom: 1.5em;
}

.licenses-page .topic-summary.highlight .description {
    /* display: block; */
}

.licenses-page .topic-summary.newsletter.embed {
    margin-top: 10em;
    margin-left: 40%;
    width: 60%;
    
    background:#ADFF00;
}

.licenses-page .topic-summary.newsletter.embed figure {
    /* top: 0; */
    right: 0;
    left: -40%;
    z-index: -1;
}

.licenses-page .topic-summary.newsletter.embed:before {
    right: 0;
    top: -8em;
    left: -65%;
    z-index: -1;

    background:#FF9CFF;
}

.licenses-page .topic-summary.newsletter.embed .description {
    grid-column: span 2;
}

.licenses-page .topic-summary.newsletter.embed .description h2 {
    font-weight: 400;
}

.licenses-page .licenses {
    /* grid-column: span 2; */
    grid-column: 2/11;
    margin-top: 4em;

    font-size: 13.4px;
}

.licenses-page .licenses h2 {
    font-family: "DM Sans";
}

.licenses-page .licenses > ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
    margin: 0;
    margin-bottom: 6em;
    padding: 0;

    list-style: none;
}

.licenses-page .licenses > ul > li {
    padding: 2em;

    background: white;
    font-family: "DM Sans";
    border: 4px solid #FF0000;
    border-radius: 16px;
}

/* .licenses-page .topic-summary .licenses > ul > li:nth-child(1) {
    border-color:#FF9CFF;
} */

/* .licenses-page .topic-summary .licenses > ul > li:nth-child(1) a {
    background-color:#FF9CFF;
} */

/* .licenses-page .topic-summary .licenses > ul > li:nth-child(2) {
    border-color:#ADFF00
} */

/* .licenses-page .topic-summary .licenses > ul > li:nth-child(2) a {
    --underline-background-color:#ADFF00;
    background-color:#ADFF00;
} */

/* .licenses-page .topic-summary .licenses > ul > li:nth-child(3) {
    border-color:#FFD9CC;
    
} */

/* .licenses-page .topic-summary .licenses > ul > li:nth-child(3) a {
    --underline-background-color:#FFD9CC;
    background-color:#FFD9CC; 
} */

/* .licenses-page .topic-summary .licenses > ul > li:nth-child(4) {
    border-color:#E0FF00;
} */

/* .licenses-page .topic-summary .licenses > ul > li:nth-child(4) a {
    --underline-background-color:#E0FF00;
    background-color:#E0FF00;
} */
.licenses-page .license { 
    display: flex;
    flex-direction: column;
    /* justify-content: space-around; */
    height: 100%;
}

.licenses-page .license h3 {
    margin-top: 0;
    
    font-family: "DM Sans";
}

.licenses-page .license h4 {
    font-family: "DM Mono";
    font-size: 1.2em;
    font-weight: 400;
}

.licenses-page .license .badge {
    order: -1;
 }

.licenses-page main .license p {
    font-family: "DM Sans";
    font-size: 1.2em;
    line-height: 1.3;
}

.licenses-page .license dl {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1em;
    height: 100%;
}
.licenses-page .license dl div {
    display: flex;
    /* justify-content: flex-start; */
    align-items: center;
}

.licenses-page .license dt {
    min-width: 3em;
    color: white;
    font-size: 1.8em;
}

.licenses-page .license dd {
    margin: 0;
    /* margin-bottom: 1em; */
    line-height: 1.3;
}

.licenses-page .licenses ul li {
    line-height: 1.6;
}

.licenses-page .licenses > ul > li a {
    color:#FF0000;
}

.licenses-page .licenses footer {
    margin-top: 4em;
    margin-bottom: 6em;

    text-align: center;
}

.licenses-page .licenses a.more {
    display: inline-block;

    padding: .8em 1.8em;
    
    font-family: "DM Sans";
    font-weight: 700;
    font-size: 1.4em;
    color: black;
    background:#ADFF00;
    border-radius: 60px;
    text-transform: capitalize;
    border: 4px solid transparent;
}

.licenses-page .licenses a.more:hover {
    background: black;
    color: white;
    /* border-color: black; */
}

/* .licenses-page .licenses > ul > li a:hover {
    --underline-background-color: black;
    border-color: transparent;
    background-color: black;
} */



/* Classic Editor TinyMCE WYSIWYG editor image alignment, previous theme's markukp  */
/* presently <figure> */
div[id^="attachment_"] {
  width: 120%;
  margin: 0;
  margin-left: -10%;
  margin-bottom: 3em;
  padding: 0;
  float: none;
}

/* presently <img> */
div[id^="attachment_"] img[class^="wp-image"]:not([width]) {
  width: 100%;
}

/* presently <span class="attribution> */
div[id^="attachment_"] p[id^="caption-attachment-"] {
  display: block;
  margin-top: 1em;
  font-size: 1em;
}

div[id^="attachment_"].alignleft {
  margin-top: 2em;
  margin-right: 2em;
  margin-left: -10%;
  width: 50%;
  float: left;
}

div[id^="attachment_"].alignleft:after {
  display: block;
  content: '';
  height: 3em;
  clear: both;
}

div[id^="attachment_"].aligncenter {
  width: 100%;

  margin-left: 0;
}

div[id^="attachment_"].alignright {
  margin-top: 2em;
  margin-right: -10%;
  margin-left: 2em;
  width: 50%;
  float: right;
}

div[id^="attachment_"].alignright:after {
  display: block;
  content: '';
  height: 2em;
  clear: both;
}

main .content div[id^="attachment_"].alignleft {
  margin-left: 0;
  width: 40%;
}

main .content div[id^="attachment_"].alignright {
  margin-right: 0;
  width: 40%;
}

main .content figure:has(img.alignleft), .blog-post main figure:has(img.alignleft) {
  margin-right: 2em;
  margin-left: 0;
  width: 40%;
  float: left;
}

main .content figure:has(img.alignright), .blog-post main figure:has(img.alignright) {
  margin-right: 0;
  margin-left: 2em;
  width: 40%;
  float: right;
}




 .primary-menu ul button.expand {
    display: none;
}

 .primary-menu li:hover > button:before {
    transform: rotate(180deg);
}

/* test if user lacks pointer device (assuming touch device instead) */
@media (pointer: coarse) {

    .primary-menu ul button.expand {
        display: inline-block;
        background: transparent;
        border: none;
        margin-left: .5em;
        margin-top: 1em;
    }

    /* ul button.expand.icon-replace:before {
        width: 1em;
        height: 1em;
    } */
}

@media (max-width: 1170px) {
    
    article.posts ul {
        /* grid-template-columns: 1fr 1fr 1fr 1fr; */
        gap: 0 2em;
    }

    article.posts ul li  {
        grid-column: span 6;
    }
    .home-narrative article.posts ul li:nth-child(1) {
        /* grid-column: span 6; */
    }

    .home-narrative article.posts ul li:nth-child(1) article {
        /* grid-column: span 6; */
        /* gap: 2em; */
    }

    .home-narrative article.posts ul li:nth-child(1) article {
        display: flex;
        gap: 2em;
    }
    
}


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

@media (max-width: 1190px) {

    body main article.topic-summary.newsletter figure {
        position: relative;
        right: initial;
        bottom: initial;
        height: auto;

        display: none;
    }

    body main article.topic-summary.newsletter:before {
        display: none;
    }

    body > footer:before, body > footer:after {
        display: none;
    }

    .licenses-page .topic-summary.newsletter.embed {
        width: 100%;
        margin: 0;
        margin-bottom: 4em;
    }

}

@media (max-width: 979px) {

    .licenses-page .licenses > ul {
        grid-template-columns: 1fr 1fr;
    }

    .support-page ul.payment-methods {
        grid-template-columns: 1fr;
    }

    .events-index .events ul li article {
        display: flex;
        flex-wrap: wrap;
    }

    .training-index .topic-summary .trainings > ul {
        grid-template-columns: 1fr;
    }

    .casestudies-index .case-study {
        display: flex;
        flex-wrap: wrap;
    }

    .casestudy-post .content > .datapoints ul {
        grid-template-columns: 1fr;
    }

    .casestudy-post aside.insights {
        width: 85%;
    }

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


    body footer {
        display: flex;
        flex-wrap: wrap;
    }

    body > footer .footer-menu {
        width: 100%;
    }

    body > footer .footer-menu ul {
        flex-direction: row;
        /* justify-content: flex-end; */
    }

    body > footer .contact {
        width: 40%;
    }

    body > footer .subscribe {
        /* width: 50%; */
        width: inherit;
        height: inherit;
        box-sizing: border-box;
        margin-left: 0;
        flex-grow: 2;
    }
}

@media (max-width: 900px) {

    .blog-index main .post.featured {
        display: flex;
        flex-wrap: wrap;
    }

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

}


@media (max-width: 765px) {

    main {
        display: block;
        width: 100%;
        overflow: hidden;
        padding: 0 var(--vocabulary-page-edges-space);
        box-sizing: border-box;

    }

    main:has( > aside.sidebar) > aside.sidebar {
        /* padding-left: 0; */
        margin-left: 0;
        padding-right: 1em;
        margin-bottom: 4em;
    }

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

    main > header {
        /* display: flex; */
        grid-template-columns: 1fr 2fr;
    }

     .team-index main > header {
        /* display: flex; */
        grid-template-columns: 2fr 1fr;
    }

    

    main > header figure {
        height: auto;
    }

    main > header div {
    /* order: -1; */
    margin: 0;
    /* padding: 0; */
    } 

    main > header div h1 {
        padding: 0;
        padding-left: 1em;
    }

    article.topic-summary.focus-area, article.topic-summary.about  {
        display: flex;
        flex-wrap: wrap;
    }

    article.topic-summary.focus-area figure {
        order: -1;
        margin-bottom: 2em;
    }

    .licenses-page article.topic-summary.focus-area:nth-of-type(even) figure {
        order: -1;
    }

    article.topic-summary.highlight { 
        display: flex;
        flex-wrap: wrap;
    }

    article.topic-summary.highlight .description {
        /* margin-top: -5em; */
    }

    article.topic-summary.highlight figure {
        position: relative;
        order: -1;
        top: initial;
        right: initial;
        bottom: initial;
        left: initial;
        margin-left: 0;
        margin-right: 0; 
    }

    article.posts ul {
        display: block;
    }

    article.posts ul li {
        margin-bottom: 4em;
    }

    article.posts p {
        margin-bottom: 0;
    }

    .home-narrative article.posts ul li:nth-child(1) article {
        display: flex;
        gap: 2em;
    }

    .support-page .topic-summary.supporters {
        display: block;
    }

    .support-page .topic-summary.supporters ul {
        columns: 1;
    }

    body main article.topic-summary.newsletter {
        display: flex;
        text-align: center;
        margin: 0 2em;
        margin-bottom: 4em;
    }

    body > footer > nav {
        margin-bottom: .5em;
    }

    body > footer .footer-menu ul {
        display: flex;
        flex-direction: column;
    }

    body > footer .search {
        margin-bottom: .5em;
    }

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

    body > footer .subscribe {
        padding-bottom: 1.5em;
    }

    body > footer .subscribe a {
        display: inline-block;
    }

    body > footer .license {
        width: inherit;
    }
}


@media (max-width: 705px) {

    body main article.topic-summary.intro {
        flex-wrap: wrap;
    }

    body main article.topic-summary.intro h2 {
        margin-top: 1em;
    }

    body > header button.expand-menu {
        position: absolute;
        top: 1em;
        right: 1em;
        z-index: 1000;

        font-family: "DM Mono";
        text-transform: capitalize;
        border-radius: 40px;
        border: 4px solid black;
    }

    body > header .masthead .primary-menu ul ul { 
        /* display: block; */
        position: relative;

        border: none;
        box-shadow: none;
    }

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

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

    body > header .masthead .primary-menu ul li {
        display: block;
        z-index: 900;
        margin-left: 0;
    }

    body > header .primary-menu.expand ul > li:has(a.donate) {
        box-sizing: border-box;
        margin-top: 1em;
     }

    body > header .primary-menu.expand ul > li a.donate {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

     body > header .primary-menu.expand ul li {
        border-top: none;
     }


    body > header .masthead .primary-menu ul ul ul {
        position: relative;
        left: 0;
        top: 0;

        border: none;
        box-shadow: none;
    }

    

}

@media (max-width: 680px) {
    /* main {
        overflow: hidden;
    } */

    .licenses-page .licenses > ul {
        grid-template-columns: 1fr;
    }

    .licenses-page .topic-summary footer.supporting:has(ul) {
        display: block;
    }

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

    
}