:root {
    --brand-corp: #444;
    --brand-primary: #459281;
    --brand-primary-contrast: #151918;
    --brand-primary-contrast-alt: rgba(30,37,35,0.85);
    --color-gray: #ccc;
    --color-background: #1d1d1d;
    --color-beyond: #aaa;
    --color-body-background: var(--brand-corp);
    --color-border: var(--brand-corp);
    --color-link: #d36731;
    --color-image-border: rgba(0,0,0,0.25);
    --color-text: #fcfcfc;
    --color-cover: rgba(20,42,37,0.9);
    --border-thickness: 0.5rem;
    --footer-size: 17rem;
    --logo-width: 12rem;
    --spacing: 1rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --connect-spacing: 2rem;
    --contact-width: 85vw;
    --some-width: 72vw
}

@media(min-width: 30rem) {
    :root {
        --contact-width: 18.5rem;
        --some-width: 16rem
    }
}

@media(min-width: 40rem) {
    :root {
        --footer-size: 18rem;
        --logo-width: 18rem;
        --spacing: 2rem;
        --spacing-sm: 1rem;
        --spacing-md: 3rem;
        --spacing-lg: 4rem
    }
}

@media(min-width: 70rem) {
    :root {
        --border-thickness: 0.75rem;
        --logo-width: 25rem;
        --contact-width: 21rem;
        --some-width: 18rem
    }
}

@media(prefers-color-scheme: light) {
    :root {
        --brand-primary-contrast: #eef7f5;
        --brand-primary-contrast-alt: rgba(223,236,233,0.85);
        --color-background: #fcfcfc;
        --color-beyond: #444;
        --color-body-background: #fcfcfc;
        --color-border: #ccc;
        --color-link: #c40;
        --color-image-border: hsla(0,0%,100%,0.3);
        --color-text: var(--color-beyond);
        --color-cover: rgba(69,146,129,0.72)
    }
}

strong {
    font-weight: 600
}

*, :after, :before {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    background-color: var(--brand-primary-contrast);
    display: table;
    font-size: 100%;
    width: 100%
}

body, html {
    height: 100%
}

body {
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    font-family: Baloo\ 2,Helvetica,Arial,sans-serif;
    font-size: 1.125em;
    line-height: 1.333
}

@media(min-width: 40rem) {
    body {
        font-size: 1.25em
    }
}

a {
    border-radius: .125rem;
    color: var(--color-link);
    margin-left: -.125rem;
    padding: 0 .125rem;
    transition: -webkit-text-decoration .15s;
    transition: text-decoration .15s;
    transition: text-decoration .15s,-webkit-text-decoration .15s
}

    a:focus {
        outline-color: var(--color-text);
        text-decoration: none
    }

    a:hover {
        -webkit-text-decoration-color: var(--color-gray);
        text-decoration-color: var(--color-gray)
    }

p code {
    font-family: inherit
}

abbr {
    text-decoration: none
}

b {
    font-weight: 600
}

address {
    font-style: normal
}

figure {
    margin-bottom: var(--spacing-sm);
    position: relative
}

h1, h2, h3 {
    font-weight: 400
}

h1 {
    font-size: 2rem
}

@media(min-width: 40rem) {
    h1 {
        font-size: 2.5rem
    }
}

main h1 {
    margin-bottom: var(--spacing)
}

h2 {
    font-size: 1.5rem;
    line-height: 1.125;
    margin-bottom: .5rem
}

@media(min-width: 40rem) {
    h2 {
        font-size: 1.75rem
    }
}

img {
    height: auto;
    max-width: 100%;
    vertical-align: top
}

    img.full {
        width: 100%
    }

main {
    padding: var(--spacing-lg) 0
}

    main ol, main p, main ul {
        margin-bottom: calc(var(--spacing)*1.5)
    }

    main li ul {
        margin-bottom: 0
    }

svg {
    vertical-align: middle
}

.page-boundary {
    margin: auto;
    max-width: 50rem;
    padding: 0 var(--spacing);
    position: relative;
    width: 100%
}

.page-boundary--wide {
    max-width: 65rem
}

.page-boundary--full {
    max-width: 100rem
}

.article-list__item {
    background-color: var(--color-background);
    border-radius: var(--spacing-lg);
    box-shadow: 0 0 0 var(--border-thickness) var(--brand-primary-contrast-alt) inset;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: calc(var(--spacing-lg)*2);
    min-height: calc(100vw - var(--spacing)*2);
    overflow: hidden;
    position: relative
}

@media(min-width: 40rem) {
    .article-list__item {
        border-radius: var(--spacing);
        flex-wrap: nowrap;
        margin-bottom: var(--spacing-lg);
        min-height: 15rem
    }
}

.article-list__item-heading {
    font-size: 1.375rem;
    margin-bottom: var(--spacing)
}

@media(min-width: 40rem) {
    .article-list__item-heading {
        margin-bottom: var(--spacing-sm)
    }
}

.article-list__item-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-lg);
    padding-bottom: calc(var(--spacing-lg)*1.5);
    position: relative;
    text-align: center;
    width: 100%
}

    .article-list__item-text p {
        margin-bottom: 0
    }

@media(min-width: 40rem) {
    .article-list__item-text {
        flex: 1;
        padding: var(--spacing-md) var(--spacing-lg);
        text-align: left;
        width: calc(100% - 15rem)
    }

        .article-list__item-text p {
            font-size: 90%
        }
}

.article-list__item-image {
    width: 100%
}

    .article-list__item-image figure {
        height: 100%;
        margin-bottom: 0;
        overflow: hidden
    }

    .article-list__item-image img {
        width: 100%
    }

@media(min-width: 40rem) {
    .article-list__item-image + .article-list__item-text {
        background-color: transparent;
        margin-top: 0;
        padding: var(--spacing)
    }
}

@media(min-width: 40rem) {
    .article-list__item-image {
        flex-shrink: 0;
        width: 15rem
    }

        .article-list__item-image img {
            height: 100%;
            left: 50%;
            max-width: none;
            width: auto;
            position: absolute;
            top: 0;
            transform: translateX(-50%)
        }
}

.connect {
    background-color: var(--color-background);
    border: var(--border-thickness) solid var(--color-border);
    border-radius: 50%;
    float: left;
    margin: 1rem 0;
    max-width: 100vw;
    overflow: hidden;
    position: relative
}

    .connect p {
        margin-bottom: 0
    }

.connect-wrapper {
    margin-bottom: calc(var(--spacing)*2)
}

    .connect-wrapper .page-boundary {
        overflow: hidden
    }

.connect + .connect {
    margin-left: var(--connect-spacing)
}

.connect.contact {
    height: var(--contact-width);
    width: var(--contact-width)
}

.connect.some {
    float: right;
    height: var(--some-width);
    margin-top: calc(1rem + (var(--contact-width) - var(--some-width))/2);
    width: var(--some-width)
}

.connect.contact-person {
    height: calc(var(--contact-width)*1.1);
    width: calc(var(--contact-width)*1.1)
}

.connect__inner {
    display: inline-block;
    left: 50%;
    padding: 0 1rem;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    max-width: 100%
}

.connect h2, .connect p {
    white-space: nowrap
}

.excerpt {
    border-bottom: var(--border-thickness) solid var(--brand-primary-contrast-alt);
    font-size: 125%;
    margin-bottom: var(--spacing-lg)
}

.article-image {
    margin-right: auto;
    margin-left: auto;
    max-width: calc(100vw - var(--spacing)*2);
    padding-bottom: var(--spacing);
    text-align: center;
    width: 24rem
}

@media(min-width: 40rem) {
    .article-image {
        float: right;
        margin-left: var(--spacing);
        max-width: 45%;
        padding-bottom: 0
    }
}

.circular-img {
    border-radius: 50%;
    height: 0;
    margin-bottom: var(--spacing);
    overflow: hidden;
    padding-top: 100%;
    position: relative
}

    .circular-img img {
        left: 0;
        position: absolute;
        top: 0;
        width: 100%
    }

    .circular-img:after {
        border: var(--border-thickness) solid var(--color-image-border);
        border-radius: 50%;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0
    }

.hero {
    border-radius: var(--spacing-lg);
    margin-top: calc(var(--spacing)*-1);
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
    position: relative
}

    .hero p {
        background: var(--color-background);
        bottom: 0;
        margin: 0;
        padding: var(--spacing);
        width: 100%
    }

    .hero:after {
        border: var(--border-thickness) solid var(--color-image-border);
        border-radius: var(--spacing-lg);
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0
    }

@media(min-width: 40rem) {
    .hero {
        margin-top: 0;
        min-height: 12em
    }

        .hero p {
            font-size: 1.25em
        }
}

main ol, main ul {
    margin-left: 1em
}

    main ol li::marker, main ul li::marker {
        color: var(--brand-primary);
        font-size: .875rem
    }

.multi-col-list {
    -moz-columns: 2;
    column-count: 2;
    -moz-column-gap: 2.5em;
    column-gap: 2.5em;
    padding: var(--spacing-sm);
    position: relative
}

    .multi-col-list:before {
        background: var(--brand-primary-contrast-alt);
        border-radius: var(--spacing-sm) var(--spacing-sm);
        content: "";
        position: absolute;
        top: 0;
        left: -1em;
        right: 0;
        bottom: 0;
        z-index: -1
    }

h2 + .multi-col-list:before, h3 + .multi-col-list:before, p + .multi-col-list:before {
    border-top-left-radius: 0
}

p + .multi-col-list {
    margin-top: calc(var(--spacing)*-1)
}

.multi-col-list > li {
    page-break-inside: avoid;
    -moz-column-break-inside: avoid;
    break-inside: avoid-column
}

@media(min-width: 40rem) {
    .multi-col-list {
        -moz-columns: 3;
        column-count: 3
    }
}

.main-menu {
    opacity: 0;
    visibility: hidden
}

    .main-menu.menu-ready {
        transition-delay: 0s,.5s;
        transition-duration: .5s,0s;
        transition-property: opacity,visibility
    }

.main-menu__cover {
    background-color: var(--color-cover);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.main-menu__nav {
    background-color: var(--color-background);
    border: var(--border-thickness) solid var(--color-link);
    border-radius: 50%;
    box-shadow: 0 0 10vmin var(--brand-primary);
    height: 1rem;
    right: var(--spacing);
    position: fixed;
    text-align: center;
    top: .5rem;
    transform: translate(0);
    transition-property: top,right,height,width,transform;
    transition-duration: .5s;
    width: 1rem
}

@media(min-width: 40rem) {
    .main-menu__nav {
        top: 2rem
    }
}

@media(min-width: 65rem) {
    .main-menu__nav {
        right: calc((100vw - 65rem)/2 + var(--spacing))
    }
}

.main-menu__list {
    height: 100%;
    list-style: none;
    overflow: hidden;
    padding: 0;
    position: relative;
    transition-property: padding;
    transition-duration: .5s;
    width: 100%
}

.main-menu-trigger, .main-menu__list {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.main-menu-trigger {
    background-color: var(--color-background);
    border-radius: 50%;
    font-size: 1rem;
    height: 3rem;
    margin: 0;
    position: absolute;
    right: var(--spacing);
    top: 50%;
    text-align: center;
    text-decoration: none;
    transform: translateY(-50%);
    width: 3rem;
    z-index: 2
}

@media(min-width: 40rem) {
    .main-menu-trigger {
        border: 2px solid var(--color-link);
        height: 3.5rem;
        width: 3.5rem
    }
}

.main-menu-close {
    background-color: var(--color-link);
    box-shadow: 0 0 .5em var(--brand-primary);
    color: var(--color-background);
    right: -.75rem;
    text-decoration: none;
    top: -.75rem
}

    .main-menu-close, .main-menu-close:before {
        border-radius: 50%;
        height: 3rem;
        position: absolute;
        width: 3rem
    }

        .main-menu-close:before {
            content: "×";
            display: block;
            font-size: 2em;
            left: 0;
            line-height: 1.45;
            text-align: center;
            top: 0
        }

@media(min-width: 30rem) {
    .main-menu-close:before {
        line-height: 1.3
    }
}

.main-menu.open, .main-menu:target {
    opacity: 1;
    transition-delay: 0s,0s;
    transition-duration: .25s,0s;
    visibility: visible
}

    .main-menu.open .main-menu__nav, .main-menu:target .main-menu__nav {
        height: 19rem;
        right: 50%;
        top: 40%;
        transform: translate(50%,-40%);
        transition-property: top,right,height,width;
        transition-duration: .5s;
        width: 19rem
    }

    .main-menu.open .main-menu__list, .main-menu:target .main-menu__list {
        padding: var(--spacing)
    }

.main-menu li {
    padding: calc(var(--spacing-sm)/3) 0
}

.main-menu a {
    text-decoration: none
}

.paginator {
    clear: both;
    margin-bottom: var(--spacing)
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.125rem;
    list-style: none;
    margin: 0 -1rem;
    padding: .5rem 0;
    position: relative
}

    .footer-nav li {
        margin: 0 1rem
    }

    .footer-nav a {
        display: inline-block;
        padding-top: .25rem;
        padding-bottom: .25rem
    }

.person-list__item {
    margin: 0 auto;
    max-width: 22rem;
    text-align: center;
    width: 100%
}

.person {
    border-bottom: 3px solid var(--brand-primary-contrast-alt);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg)
}

    .person img {
        width: 100%
    }

    .person p {
        margin-bottom: 0
    }

        .person p + p {
            margin-top: var(--spacing-sm)
        }

    .person .text {
        display: flex;
        flex-direction: column;
        justify-items: center
    }

.person-bio {
    padding-bottom: var(--spacing)
}

.person-bio__media {
    margin-bottom: var(--spacing)
}

@media(min-width: 30rem) {
    .person-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center
    }

    .person-list__item {
        width: 50%
    }

        .person-list__item:nth-child(odd) {
            margin-right: 0;
            padding-right: 5%
        }

        .person-list__item:nth-child(2n) {
            margin-left: 0;
            padding-left: 5%
        }

    .person-bio__media {
        float: right;
        margin-left: var(--spacing-lg);
        width: 40%
    }

    .person-bio .excerpt {
        margin-right: calc(40% + var(--spacing-lg))
    }
}

@media(min-width: 70rem) {
    .person-list__item:nth-child(n) {
        margin-right: 0;
        margin-left: 0;
        max-width: 100%;
        padding-right: 2.5%;
        padding-left: 2.5%;
        width: 25%
    }
}

.site-header {
    background-color: var(--color-background);
    border-bottom: calc(var(--border-thickness)/3) solid var(--brand-primary-contrast-alt);
    padding: var(--spacing) 0;
    position: -webkit-sticky;
    position: sticky;
    line-height: 1;
    top: 0;
    z-index: 1
}

.site-footer {
    background: var(--color-background);
    border-top: calc(var(--border-thickness)/3) solid var(--brand-primary-contrast-alt);
    bottom: 0;
    flex-direction: column;
    margin-top: auto;
    padding: calc(var(--spacing)/4) 0
}

.intro {
    border-bottom: calc(var(--border-thickness)/3) solid var(--brand-primary-contrast-alt);
    font-size: 1.125em;
    padding-bottom: calc(var(--spacing)*1.5)
}

.logo {
    height: calc(var(--logo-width)/2253*350);
    width: var(--logo-width)
}

.logo__corp {
    fill: var(--color-beyond)
}

.path {
    font-size: 1rem;
    margin-top: calc(var(--spacing-lg)*-1)
}

    .path a {
        background: var(--color-background);
        border-radius: 0 0 .5em .5em;
        display: inline-block;
        padding: .125rem .5rem;
        text-decoration: none
    }

        .path a:first-letter {
            padding-right: 4px
        }

.privacy {
    background-color: var(--color-background);
    border: 2px solid var(--brand-primary);
    border-radius: 1rem;
    bottom: .4rem;
    box-shadow: 0 0 .75rem rgba(0,0,0,.5);
    display: none;
    left: 0;
    padding: var(--spacing);
    position: absolute;
    width: 20rem;
    z-index: 1
}

    .privacy:target {
        display: block
    }

    .privacy a {
        bottom: 0;
        font-size: 1.5rem;
        padding: 0 .5rem;
        position: absolute;
        right: 0
    }

.sr-only {
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px
}

@media(min-width: 40rem) {
    body {
        line-height: 1.5
    }

    .privacy a {
        bottom: .5rem;
        right: .5rem
    }
}