/* bundles/shared_css_2/corp_styles.css */
body {
    /* shared color variables ------------------------------ */
    --ink: var(--gray700);
    --bc-blue: #1DA0C3;
    --dark-bc-blue: #008bb0;
    --parchment: var(--parchment200);
    --bright-parchment: var(--parchment100);

    /* default page-specific color variables ------------------------------ */
    --page-footer-text-color: var(--parchment100);

    /* shared font variables ------------------------------ */
    --font-xxlarge: 50px;
    --font-xlarge: 41px;
    --font-large: 27px;
    --font-regular: 20px;
    --font-small: 14px;
    --font-xsmall: 12px;
    --font-xxsmall: 11px;
    --font-height-xxlarge: 1.15;
    --font-height-xlarge: 1.28;
    --font-height-large: 1.34;
    --font-height-regular: 1.5;
    --heading-weight: 500;
    --font-margin: 30px;
    --font-margin-large: 80px;

    /* shared layout variables ------------------------------ */
    --contents-width: min(100vw, 1650px);

    /* sets max-width to 1650px */
}

/* shared overrides and resets ------------------------------ */

/* should this go in a separate reset.css? */
body,
header,
footer,
main,
section {
    overflow-x: clip;
}

body,
main,
section,
h1,
h2,
h3,
h4,
h5,
p,
ul,
li,
button {
    margin: 0;
    padding: 0;
}

a,
a:link,
a:active,
a:visited,
a:hover,
a:focus,
cite {
    color: inherit;
    text-decoration: none;
    font-style: normal;
}

img {
    width: 100%;
}

ul {
    list-style-type: none;
}

button {
    border: none;
    background-color: transparent;
}

/* shared type styles ------------------------------ */
body,
input,
textarea,
select,
button {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-variant: proportional-nums;

    /* Helvetica Neue defaults to tabular nums */
    line-height: var(--font-height-regular);

    /* font-smoothing */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* on windows, which likely uses Arial,
replace medium weight with semi-bold or bold */
header.windows,
main.windows,
footer.windows {
    --heading-weight: 600;
}

/* shared type styles */
.corp h1,
.corp h2 {
    font-size: var(--font-xxlarge);
    line-height: var(--font-height-xxlarge);
}

.corp h2.long-heading,
.corp p.large-phrase {
    font-size: var(--font-xlarge);
    line-height: var(--font-height-xlarge);
}

.corp h3,
.corp h1.small-heading,
.corp h2.small-heading,
.corp p.large-paragraph {
    font-size: var(--font-large);
    line-height: var(--font-height-large);
}

.corp p {
    font-size: var(--font-regular);
}

.corp h1,
.corp h2,
.corp h3,
.corp p {
    margin-bottom: var(--font-margin);
}

.corp p a {
    text-decoration: underline;
}

.corp figcaption {
    font-size: var(--font-small);
}

.corp cite {
    font-size: var(--font-xsmall);
}

.corp cite.tiny,
.corp span.tiny {
    font-size: var(--font-xxsmall);
}

.corp h1,
.corp h2,
.corp h3,
.corp p.large-phrase,
.corp p.large-paragraph {
    font-weight: var(--heading-weight);
}

.corp h1.long-heading,
.corp h2.long-heading,
.corp h1.small-heading,
.corp h2.small-heading,
.corp p.large-phrase,
.corp p.large-paragraph {
    max-width: 1000px;
}

@media only screen and (width <=1100px) {
    .corp h1,
    .corp h2 {
        font-size: var(--font-xlarge);
        line-height: var(--font-height-xxlarge);
    }

    .corp h1.small-heading,
    .corp h2.small-heading,
    .corp h2.long-heading,
    .corp p.large-phrase {
        font-size: var(--font-large);
        line-height: var(--font-height-large);
    }
}

@media only screen and (width <=740px) {
    .corp h1,
    .corp h2 {
        font-size: var(--font-large);
        line-height: var(--font-height-large);
    }

    .corp p.large-paragraph {
        font-size: var(--font-regular);
        line-height: var(--font-height-regular);
        font-weight: normal;
    }
}

/* shared layout ------------------------------ */
main>section,
div.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) [left-gutter] repeat(18, 1fr) [right-gutter] repeat(3, 1fr);
    max-width: 100vw;
    margin: 0;
    padding: 0;
}

/* apply left and right padding above 1650px  */
@media only screen and (width >=1650px) {
    main>section,
    div.grid {
        padding-left: calc((100vw - 1650px) / 2.0);
        padding-right: calc((100vw - 1650px) / 2.0);
    }
}

@media only screen and (width <=900px) {
    main>section,
    div.grid {
        grid-template-columns: repeat(2, 1fr) [left-gutter] repeat(20, 1fr) [right-gutter] repeat(2, 1fr);
    }
}

@media only screen and (width <=740px) {
    main>section,
    div.grid {
        grid-template-columns: repeat(1, 1fr) [left-gutter] repeat(22, 1fr) [right-gutter] repeat(1, 1fr);
    }
}

main>section.no-grid,
div.no-grid {
    display: block;
    margin: 0;
    padding: 0;
}