/* bundles/shared_css_2/corp_demo.css */
body {
    /* page-specific colors */
    --page-background-color: var(--parchment);
    --page-secondary-background-color: var(--ink);
    
    --page-text-color: var(--ink);
    --page-secondary-text-color: var(--bright-parchment);
    
    --page-highlight-color: #3EBFE2;
    
    background-color: var(--page-background-color);
    color: var(--page-text-color);
    
    /* (can remove when new shared styles after migrated, need to update variable in bc_footer code) */
    --dark-background-color: var(--ink);
    /* ---- */
}

/* page-specific layout */
section#intro-demo > div,
section#about-demo > div,
section#labels-demo > div,
section#live-demo > div {
    grid-column: left-gutter / right-gutter;
    margin: 200px 0px;
}

/* intro */
section#intro-demo div {
    margin: 160px 0px;
}

section#intro-demo h1 {
    max-width: 900px;
}

section#intro-demo p {
    max-width: 500px;
}

section#intro-demo code {
    background-color: rgb(255 255 255 / 80%);
}

section#intro-demo > div > code {
    display: block;
    padding: 10px;
    margin: var(--font-margin) 0 var(--font-margin-large);
}

/* type demo */
section#type-demo {
    background-color: white;
    padding-top: 200px;
    padding-bottom: 160px;
}

section#type-demo p, 
section#type-demo h2 {
    grid-column: left-gutter / right-gutter;
}

section#type-demo .large-phrase {
    margin-bottom: var(--font-margin-large);
} 

section#type-demo h1:nth-of-type(1),
section#type-demo h1:nth-of-type(2),
section#type-demo h1:nth-of-type(3) {
    grid-row: 2;
    max-width: 5em;
}

section#type-demo h1:nth-of-type(1) {
    grid-column: left-gutter / 9;
}

section#type-demo h1:nth-of-type(2) {
    grid-column: 10 / 15;
}

section#type-demo h1:nth-of-type(3) {
    grid-column: 16 / right-gutter;
    margin-bottom: 80px;
}

section#type-demo p.large-paragraph {
    max-width: 640px;
}

section#type-demo p.large-paragraph em {
    color: #777;
    font-style: normal;
}

section#type-demo p:nth-of-type(6) {
    margin-top: var(--font-margin-large);
}

section#type-demo .left {
    grid-column: left-gutter / 12;
}

section#type-demo .right {
    grid-column: 14 / right-gutter;
}

@media only screen and (max-width: 1000px) { 
    section#type-demo h1:nth-of-type(1),
    section#type-demo h1:nth-of-type(2),
    section#type-demo h1:nth-of-type(3) {
        grid-column: left-gutter / right-gutter;
        grid-row: unset;
        max-width: none;
    }
    
    section#type-demo h1 {
        display: block;
    }
}

@media only screen and (max-width: 1000px) { 
    section#type-demo .left,
    section#type-demo .right {
        grid-column: left-gutter / right-gutter;
    }
}


/* artists */
section#artists-demo {
    padding-top: 100px;
    padding-bottom: 100px;
}

section#artists-demo .text {
    grid-column: left-gutter / 10;
    margin: auto 0;
}

section#artists-demo .illustration {
    grid-column: 10 / 24;
    height: 100%;
    width: 100%;
}

section#artists-demo .illustration picture,
section#artists-demo .illustration picture > img {
    width: 100%;
    height: auto;
}

section#artists-demo div h1,
section#labels-demo div h1 {
    max-width: 260px;
}

section#artists-demo div p,
section#labels-demo div p {
    max-width: 400px;
}

section#artists-demo .text img, 
section#labels-demo .text img {
    vertical-align: middle;
    width: auto;
    padding-left: 10px;
}

@media only screen and (max-width: 1450px) { 
    section#artists-demo .text,
    section#labels-demo .text {
        grid-column: 3 / 10;
    }
}

@media only screen and (max-width: 1000px) { 
    section#artists-demo .text,
    section#labels-demo .text {
        grid-column: left-gutter / right-gutter;
        grid-row: 1 / 2; 
    }
    section#artists-demo .illustration,
    section#labels-demo .illustration {
        grid-column: left-gutter / right-gutter;
        grid-row: 2 / 2;
    }
    section#artists-demo div p,
    section#labels-demo div p {
        max-width: 700px;
    }
    section#artists-demo div h1,
    section#labels-demo div h1 {
        max-width: none;
    }
}

@media only screen and (max-width: 740px) { 
    section#artists-demo div p,
    section#labels-demo div p {
        max-width: none;
    }
}

@media only screen and (max-width: 540px) { 
    section#artists-demo .illustration {
        grid-column: 1 / 25;
        width: 100%;
    }    
}

/* labels demo */
section#labels-demo {
    background-color: var(--ink);
    color: var(--bright-parchment);
}

/* about demo */
section#about-demo {
    background-color: #ecf3f4;
}

section#about-demo h1,
section#about-demo p {
    max-width: 1020px;
}

section#about-demo em,
section#type-demo p.large-phrase em {
    font-style: normal;
    background-color: rgba(0,0,0,.15);
    padding: 0 10px 5px 6px;
}

/* about_live demo */
section#live-demo {
    background-color: var(--ink);
    color: var(--parchment);
}

section#live-demo em {
    font-style: normal;
    background-color: var(--parchment);
    padding: 0 8px 3px 8px;
    color: var(--ink);
    white-space: nowrap;
}
section#live-demo h1,
section#live-demo p {
    max-width: 1020px;
}

/* features demo */
section#features-demo {
    margin:160px 0;
}

section#features-demo > ul {
    padding-top: 80px;
}

section#features-demo > ul.left {
    grid-column: left-gutter / 12;
}

section#features-demo > ul.right {
    grid-column: 14 / right-gutter;
}

section#features-demo > ul {
    margin: 0px auto;
}

section#features-demo > ul h3 {
    margin: 20px 0;
    max-width: 90%;
}

section#features-demo > ul li {
    break-inside: avoid;
    margin: 0;
}

section#features-demo > ul img {
    width: inherit;
}

section#features-demo > ul li + li {
    margin-top: 80px;
}

section#features-demo > ul li a {
    text-decoration: underline;
}

@media only screen and (max-width: 1000px) {
    section#features-demo > ul.left {
        grid-column: left-gutter / right-gutter;
        grid-row: 1 / 2;
    }

    section#features-demo > ul.right {
        grid-column: left-gutter / right-gutter;
        grid-row: 2 / 2;
    }
    
    section#features-demo > ul h3 {
        max-width: none;
    }
}

@media only screen and (max-width: 740px) {
    section#features-demo > ul img {
        max-width: 130px;
        max-height: 125px;
    }
}

/* sales feed demo */
section#sales-feed {
    padding-top: 80px;
    padding-bottom: 80px;
}

@media only screen and (max-width: 740px) {
    section#sales-feed {
        padding-top: 10px;
    }
}


/* misc */
.default-font-variant {
    font-variant: normal;
}
/* bundles/shared_css_2/corp_styles.css */
body {
    /* shared color variables ------------------------------ */
    --ink: #222;
    --bc-blue: #1DA0C3;
    --dark-bc-blue: #008bb0;
    --parchment: #EDE3C2;
    --bright-parchment: #ece8db;
    
    /* default page-specific color variables ------------------------------ */
    --page-footer-text-color: #ece8db;
    
    /* 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 (max-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 (max-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 (min-width: 1650px) {
    main > section, div.grid {
        padding-left:  calc((100vw - 1650px) / 2.0);
        padding-right: calc((100vw - 1650px) / 2.0);
    }
}

@media only screen and (max-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 (max-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;
}