/**
 * common.css
 *
 * Common across the site.
 * Examples drawn from: https://www.squarespace.com/templates/corrigan-fluid-demo?_gl=1*rbec9n*_up*MQ..&gclid=Cj0KCQjwvpy5BhDTARIsAHSilynt0menPWaLMsXhv031eTj8DXkyDogI05R4RWpnHNqkOs17qoJL-BkaApBrEALw_wcB&gclsrc=aw.ds
 */

:root {
    --light-accent: rgb(244, 244, 243);
    --accent: rgb(255, 199, 0);
    --dark-accent: rgb(56, 56, 56);
    --site-color: rgb(255, 255, 255);
    --site-background: rgb(56, 56, 56);
    --normal-text-size: 1.1rem;
    --normal-text-size-value: 1.1;
    --body-font-font-family: "Neue Haas Grotesk Display Pro";
    --body-font-font-style: normal;
    --body-font-font-weight: 400;
    --body-font-line-height: 1.8em;
    --body-font-letter-spacing: .05em;
    --body-font-text-transform: none;
    --content-standout-value: 2.8;
    --site-title-font-font-family: var(--heading-font-font-family);
    --site-title-font-font-style: var(--heading-font-font-style);
    --site-title-font-font-weight: var(--heading-font-font-weight);
    --site-title-font-text-transform: var(--heading-font-text-transform);
    --site-title-font-letter-spacing: var(--heading-font-letter-spacing);
    --site-title-font-line-height: var(--heading-font-line-height);
    --site-title-font-font-size: 2rem;
    --site-title-font-font-size-value: 2;
    --site-navigation-font-font-family: var(--body-font-font-family);
    --site-navigation-font-font-style: var(--body-font-font-style);
    --site-navigation-font-font-weight: var(--body-font-font-weight);
    --site-navigation-font-text-transform: var(--body-font-text-transform);
    --site-navigation-font-letter-spacing: var(--body-font-letter-spacing);
    --site-navigation-font-line-height: var(--body-font-line-height);
    --site-navigation-font-font-size: var(--normal-text-size);
    --site-navigation-font-font-size-value: var(--normal-text-size-value);
    --white-hsl: 0, 0%, 100%;
    --navigation-link-color: hsla(var(--white-hsl), 1);
}

body {
    display: block;
    width: 100%;
    margin: 0;
    background-color: var(--site-background);
    color: var(--site-color);
    font: inherit;
    font-family: "Clarkson", Helvetica, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 1em;
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
    text-transform: none;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-wrap: break-word;
}  

a {
    text-decoration: none;
    cursor: pointer;
    color: var(--accent);
}

#site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-wrapper {
    font-family: var(--body-font-font-family);
    font-style: var(--body-font-font-style);
    font-weight: var(--body-font-font-weight);
    line-height: var(--body-font-line-height);
    letter-spacing: var(--body-font-letter-spacing);
    text-transform: var(--body-font-text-transform);
    -webkit-font-smoothing: antialiased;
}

@media screen and (min-width: 768px), screen and (max-width: calc(1943px)) and (orientation: landscape) {
    .site-wrapper {
        font-size: calc((var(--normal-text-size-value) - 1)* 1.2vw + 1rem);
    }
}

@media screen and (min-width: 1944px) {
    .site-wrapper {
        font-size: calc(var(--normal-text-size-value)* 1rem);
    }
}

.header {
    display: block;
    position: sticky;
    background-color: var(--dark-accent);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    line-height: 1;
    width: 100%;
    box-sizing: border-box;
    top: 0;
    padding-top: 3vh;
    padding-bottom: 3vh;
    padding-left: 4vw;
    padding-right: 4vw;
    pointer-events: auto;
}

.header-inner {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: inherit;
    box-sizing: border-box;
    justify-content: flex-start;
    flex-wrap: nowrap;
    flex: 1 0 67%;
    align-items: center;
}

.page-section {
    scroll-margin-top: 27vh;
}

.sections > section:nth-of-type(odd) {
    background-color: var(--light-accent);
    color: var(--dark-accent);
}

.title-wrapper {
    padding-top: calc(10vmax / 10);
    padding-bottom: calc(10vmax / 10);
    padding-left: 10vw;
    padding-right: 20vw;
}

.site-title {
    padding-left: 1vw;
}

.site-logo {
    max-width: 5vw;
    max-height: 10vh;
}

.content-wrapper {
    padding-top: calc(10vmax / 10);
    padding-bottom: calc(10vmax / 10);
    padding-left: 10vw;
    padding-right: 10vw;
    display: flex;
    column-gap: 2vw;
}

.long-content-wrapper, .medium-content-wrapper, .sized-content-wrapper {
    display: grid;
    column-gap: 2vw;
    border-top: 5px solid var(--accent);
    padding-top: 3vh;
}

.long-content-wrapper {
    grid-template-columns: 40% 1fr;
}

.medium-content-wrapper {
    grid-template-columns: 40% 1fr;
}

@media only screen and (max-width: 768px) {
    .content-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        padding: 1em;
        grid-row-gap: 2vw;
    }
}

.content-standout {
    font-size: calc((var(--content-standout-value) - 1)* 1.2vw + 1rem);
    font-style: italic;
    line-height: 10vh;
}

@media only screen and (max-width: 768px) {
    .content-standout {
        line-height: inherit;
    }
}

.content-definition {
    margin-left: 1vw;
    margin-right: 1vw;
}

.content-emphasis, .content-definition {
    color: var(--accent);
    font-weight: bold;
}

.content-mild-emphasis {
    font-weight: bold;
}

.column-content-wrapper {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
}

.header-title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;
    backface-visibility: hidden;
    margin: 0;
    font-family: var(--site-title-font-font-family);
    font-style: var(--site-title-font-font-style);
    font-weight: var(--site-title-font-font-weight);
    line-height: var(--site-title-font-line-height);
    letter-spacing: var(--site-title-font-letter-spacing);
    text-transform: var(--site-title-font-text-transform);
}

@media screen and (min-width: 768px), screen and (max-width: calc(1943px)) and (orientation: landscape) {
    .header-title {
        font-size: calc((var(--site-title-font-font-size-value) - 1)* 1.2vw + 1rem);
    }
}

@media screen and (min-width: 1944px) {
    .header-title {
        font-size: calc(var(--site-title-font-font-size-value)* 1rem);
    }
}

.header-layout-nav-right .header-nav {
    text-align: right;
    margin-left: auto;
    padding-left: 2.5vw;
}

.header-nav {
    flex-grow: 1;
    flex-shrink: 1;
}

:not(.header--menu-open) .header-nav a {
    color: var(--navigation-link-color);
}

.header .header-nav a {
    text-decoration: none;
    backface-visibility: hidden;
    padding: .1em 0;
}

.header-layout-nav-right .header-nav-list {
    justify-content: flex-end;
}

.header-nav-list {
    display: inline-flex;
    flex-wrap: wrap;
}

.header-nav-list>div {
    white-space: nowrap;
}

.header-nav-item {
    font-family: var(--site-navigation-font-font-family);
    font-style: var(--site-navigation-font-font-style);
    font-weight: var(--site-navigation-font-font-weight);
    line-height: var(--site-navigation-font-line-height);
    letter-spacing: var(--site-navigation-font-letter-spacing);
    text-transform: var(--site-navigation-font-text-transform);
}

@media screen and (min-width: 768px), screen and (max-width: calc(1943px)) and (orientation: landscape) {
    .header-nav-item {
        font-size: calc((var(--site-navigation-font-font-size-value) - 1)* 1.2vw + 1rem);
    }
}

@media screen and (min-width: 1944px) {
    .header-nav-item {
        font-size: calc(var(--site-navigation-font-font-size-value)* 1rem);
    }
}

.header-layout-nav-right .header-nav-item:not(:first-child) {
    margin-left: 1.7vw;
}

.logo-image {
    width: 25vw;
}

.integration-logo-image {
    max-width: 15vw;
    max-height: 15vh;
}