/* Fonts */
@font-face {
	font-family: "CharterBTPro-Roman";
	src: url('./fonts/CharterBTProRoman/font.woff2') format('woff2'), url('./fonts/CharterBTProRoman/font.woff') format('woff');
	font-weight: 400;
}
@font-face {
	font-family: "CharterBTPro-Bold";
	src: url('./fonts/CharterBTProBold/font.woff2') format('woff2'), url('./fonts/CharterBTProBold/font.woff') format('woff');
}
@font-face {
	font-family: 'Menlo-bold';
	src: url('./fonts/menlo-bold-webfont.woff') format('woff'),
		url('./fonts/menlo-bold-webfont.woff2') format('woff2');
}
@font-face {
	font-family: 'MaisonNeue';
	src: url('./fonts/MaisonNeueMonoWEB-Bold.woff2') format('woff2'),
		url('./fonts/MaisonNeueMonoWEB-Bold.woff') format('woff');
}
@font-face {
	font-family: 'MaisonNeue';
	src: url('./fonts/CharterBTProRoman/font.woff2') format('woff2'),
		url('./fonts/CharterBTProRoman/font.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	unicode-range: U+26, U+0030-0039;
}
:root {
  --title-font: 'MaisonNeue', Arial, helvetica sans-serif;
  --control-font: 'CharterBTPro-Roman', Arial, helvetica sans-serif;
  --subtitle-font: 'Menlo-bold', Arial, helvetica sans-serif;
}

/* CMS Reset
-------------------- */
@media only screen 
and (min-width : 1550px) {
    html:is(.wp-toolbar) {
        font-size: 8.12px;
    }
}

@media only screen 
and (min-width : 961px) 
and (max-width : 1551px) {
    html:is(.wp-toolbar) {
        font-size: 7.08px;
    }
}

/* Color Styles
-------------------- */
:root {
  --black: #000000;
  --white: #FFFFFF;
  --natural: #FFF5DB;
  --red: #EF4343;
  --subblue: #719598;
  --lichen: #A3B8A3;
  --orange: #FFB263;
  --coral: #FF8C5C;
  --grey: #B7B7B7;
  --green: #3D533C;
  --yellow: #F5C80F;
  --pink: #F7ACB3;
  --hoverLinks: #fa8b5c;
}

:is(.has-black-color, #important) { color: var(--black); }
:is(.has-white-color, #important) { color: var(--white); }
:is(.has-natural-color, #important) { color: var(--natural); }
:is(.has-red-color, #important) { color: var(--red); }
:is(.has-subblue-color, #important) { color: var(--subblue); }
:is(.has-lichen-color, #important) { color: var(--lichen); }
:is(.has-orange-color, #important) { color: var(--orange); }
:is(.has-coral-color, #important) { color: var(--coral); }
:is(.has-grey-color, #important) { color: var(--grey); }
:is(.has-green-color, #important) { color: var(--green); }
:is(.has-yellow-color, #important) { color: var(--yellow); }
:is(.has-pink-color, #important) { color: var(--pink); }

:is(.has-black-background-color, #important) { background-color: var(--black); }
:is(.has-white-background-color, #important) { background-color: var(--white); }
:is(.has-natural-background-color, #important) { background-color: var(--natural); }
:is(.has-red-background-color, #important) { background-color: var(--red); }
:is(.has-subblue-background-color, #important) { background-color: var(--subblue); }
:is(.has-lichen-background-color, #important) { background-color: var(--lichen); }
:is(.has-orange-background-color, #important) { background-color: var(--orange); }
:is(.has-coral-background-color, #important) { background-color: var(--coral); }
:is(.has-grey-background-color, #important) { background-color: var(--grey); }
:is(.has-green-background-color, #important) { background-color: var(--green); }
:is(.has-yellow-background-color, #important) { background-color: var(--yellow); }
:is(.has-pink-background-color, #important) { background-color: var(--pink); }

/* Text Styles
-------------------- */
:where(.editor-styles-wrapper, #wrapper) :is([class*="has-heading-"]),
:where(.editor-styles-wrapper, #wrapper) :is(h1, h2, h3, h4):not([class*="has-heading-"], .editor-post-title) {
    font-family: var(--title-font);
    text-transform: uppercase;
}
:where(.editor-styles-wrapper, #wrapper) h4:not([class*="has-heading-"], [class*="has-paragraph-"]),
:where(.editor-styles-wrapper, #wrapper) .has-heading-4-font-size {
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1.7em;
    letter-spacing: 0;
}
:where(.editor-styles-wrapper, #wrapper) h3:not([class*="has-heading-"], [class*="has-paragraph-"]),
:where(.editor-styles-wrapper, #wrapper) .has-heading-3-font-size {
    font-size: 7rem;
    font-weight: 700;
    line-height: 1.07em;
    letter-spacing: 0;
}
:where(.editor-styles-wrapper, #wrapper) h2:not([class*="has-heading-"], [class*="has-paragraph-"]),
:where(.editor-styles-wrapper, #wrapper) .has-heading-2-font-size {
    font-size: 14rem;
    font-weight: 700;
    line-height: 1em;
    letter-spacing: -.03em;
}
:where(.editor-styles-wrapper, #wrapper) h1:not([class*="has-heading-"], [class*="has-paragraph-"], .editor-post-title),
:where(.editor-styles-wrapper, #wrapper) .has-heading-1-font-size {
    font-size: 17rem;
    font-weight: 700;
    line-height: 1em;
    letter-spacing: -.05em;
}
:where(.editor-styles-wrapper, #wrapper) .has-paragraph-eyebrow-font-size {
    font-family: var(--subtitle-font);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0;
    text-transform: uppercase;
}
:where(.editor-styles-wrapper, #wrapper) .has-paragraph-body-copy-font-size, 
:where(.editor-styles-wrapper, #wrapper) :is(.wp-block-list li) {
    font-family: var(--control-font);
    font-size: 2.8rem;
    font-weight: 400;
    line-height: 1.35em;
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    :where(.editor-styles-wrapper, #wrapper) h3:not([class*="has-heading-"], [class*="has-paragraph-"]),
    :where(.editor-styles-wrapper, #wrapper) .has-heading-3-font-size {
        font-size: 2.8rem;
    }
    :where(.editor-styles-wrapper, #wrapper) h2:not([class*="has-heading-"], [class*="has-paragraph-"]),
    :where(.editor-styles-wrapper, #wrapper) .has-heading-2-font-size {
        font-size: 5.5rem;
    }
    :where(.editor-styles-wrapper, #wrapper) h1:not([class*="has-heading-"], [class*="has-paragraph-"]),
    :where(.editor-styles-wrapper, #wrapper) .has-heading-1-font-size {
        font-size: 4.6rem;
    }
    :where(.editor-styles-wrapper, #wrapper) .has-paragraph-body-copy-font-size {
        font-size: 2.2rem;
    }
}


/* Blocks Styles
-------------------- */ 

/* Row + Columns -------------------- */ 
:where(.editor-styles-wrapper, #wrapper) :is(.is-nowrap, #important) {
    max-width: 144rem;
    margin: 0 auto;
}
:where(.editor-styles-wrapper, #wrapper) .is-nowrap > :is(.wp-block-columns, #important) {
    gap: 2rem;
}
:where(.editor-styles-wrapper, #wrapper) .is-nowrap > .wp-block-columns :is(.wp-block-column, #important) {
    padding: 0 2rem;
}
@media only screen
and (min-width : 961px) {
    :where(.editor-styles-wrapper, #wrapper) :is(.is-nowrap, #important) {
        padding: 0 2rem;
    }
    :where(.editor-styles-wrapper, #wrapper) .is-nowrap > .wp-block-columns :is(.wp-block-column, #important) {
        padding: 0 .25rem;
        margin-inline: 0;
    }
}

/* Media & Content -------------------- */ 
:where(.editor-styles-wrapper, #wrapper) :is(.wp-block-media-text, #important) {
    max-width: 144rem;
    gap: 2rem;
    margin: 0 auto;
}
:where(.editor-styles-wrapper, #wrapper) :is(.wp-block-media-text__media, .wp-block-media-text__content, #important) {
    padding: 0 2rem;
}
@media only screen
and (min-width : 961px) {
    :where(.editor-styles-wrapper, #wrapper) :is(.wp-block-media-text, #important) {
        padding: 0 2rem;
    }
    :where(.editor-styles-wrapper, #wrapper) :is(.wp-block-media-text__media, .wp-block-media-text__content, #important) {
        padding-inline: 0 .25rem;
    }
}


/* Gallery -------------------- */ 
:where(.editor-styles-wrapper, #wrapper) :is(.wp-block-gallery, #important) {
    max-width: 144rem;
    margin: 0 auto;
}
@media only screen
and (min-width : 961px) {
    :where(.editor-styles-wrapper, #wrapper) :is(.wp-block-gallery, #important) {
        padding: 0 2rem;
    }
}


/* List -------------------- */ 
:where(#wrapper) ul {
    list-style: inside disc;
}
:where(#wrapper) ol {
    list-style: inside decimal;
}
:where(#wrapper) .wp-block-list {
    padding-left: 2rem;
}
:where(.editor-styles-wrapper, #wrapper) .wp-block-list li {
    font-family: var(--control-font);
    font-size: 2.8rem;
    font-weight: 400;
    line-height: 1.35em;
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    :where(.editor-styles-wrapper, #wrapper) .wp-block-list li {
        font-size: 2.2rem;
    }
}


/* Pullquote + Quote -------------------- */ 
:where(.editor-styles-wrapper, #wrapper) :is(.wp-block-pullquote, .wp-block-quote) :is(p, cite) {
    font-family: var(--control-font);
    font-size: 2.8rem;
    font-weight: 400;
    line-height: 1.35em;
}
:where(.editor-styles-wrapper, #wrapper) :is(.wp-block-pullquote, .wp-block-quote) :is(cite) {
    font-size: 2.2rem;
    font-style: italic;
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    :where(.editor-styles-wrapper, #wrapper) :is(.wp-block-pullquote, .wp-block-quote) :is(p) {
        font-size: 2.2rem;
    }
    :where(.editor-styles-wrapper, #wrapper) :is(.wp-block-pullquote, .wp-block-quote) :is(cite) {
        font-size: 1.8rem;
    }
}


/* Table -------------------- */ 
:where(.editor-styles-wrapper, #wrapper) .wp-block-table :is(th, td) {
    padding: 1rem;
    font-family: var(--control-font);
    font-size: 2rem;
    line-height: normal;
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    :where(.editor-styles-wrapper, #wrapper) .wp-block-table :is(th, td) {
        font-size: 1.8rem;
    }
}

:where(.editor-styles-wrapper, #wrapper) .wp-block-latest-posts {
    row-gap: 3rem;
}
:where(.editor-styles-wrapper, #wrapper) .wp-block-latest-posts :is(li, #important) {
    font: unset;
    margin: 0;
}
:where(.editor-styles-wrapper, #wrapper) .wp-block-latest-posts li a {
    font-size: 2rem;
    line-height: 1.3em;
    margin-bottom: .3rem;
    text-decoration: none;
    color: #000000;
    text-transform: uppercase;
    font-family: var(--title-font); 
}
:where(.editor-styles-wrapper, #wrapper) .wp-block-latest-posts li time {
    font-size: 2rem;
    line-height: 1.2em;
    color: #000000;
    font-family: var(--control-font);
}
:where(.editor-styles-wrapper, #wrapper) .wp-block-latest-posts li :is(a, time) {
    -webkit-transition: color .7s;
    transition: color .7s;
    cursor: pointer;
}

@media only screen
and (min-width : 961px) {
    :where(.editor-styles-wrapper, #wrapper) .wp-block-latest-posts {
        row-gap: 5.6rem;
        -webkit-column-gap: 5rem;
           -moz-column-gap: 5rem;
                column-gap: 5rem;
    }
    :where(.editor-styles-wrapper, #wrapper) .wp-block-latest-posts :is(li, #important) {
        -webkit-box-flex: 0;
            -ms-flex: 0 1 calc(33.2% - 3.3rem);
                flex: 0 1 calc(33.2% - 3.3rem);
        max-width: calc(33.2% - 3.3rem);
    }
    :where(.editor-styles-wrapper, #wrapper) .wp-block-latest-posts li:hover :is(a, time) {
        color: #fa8b5c;
    }
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    :where(.editor-styles-wrapper, #wrapper) .wp-block-latest-posts :is(li, #important) {
        -webkit-box-flex: 0;
            -ms-flex: 0 1 100%;
                flex: 0 1 100%;
        max-width: 100%;
    }
}

/* Buttons -------------------- */ 
:where(.editor-styles-wrapper, #wrapper) .wp-block-button:not(.is-style-text-link) :is(.wp-block-button__link, #important) {
    font-family: var(--subtitle-font);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1em;
    letter-spacing: 0;
    text-transform: uppercase;
    padding: 1rem 3rem .75rem;
    border-radius: 2rem;
}
:where(.editor-styles-wrapper, #wrapper) .wp-block-button:is(.is-style-text-link) :is(.wp-block-button__link, #important) {
    font-family: var(--title-font);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.2em;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: underline;
    padding: 0;
    background-color: transparent;
}
:where(.editor-styles-wrapper, #wrapper) .wp-block-button:is(.is-style-text-link) :is(.wp-block-button__link):not(.has-text-color) {
    color: var(--black);
}
:where(.editor-styles-wrapper, #wrapper) .wp-block-button:is(.is-style-text-link) :is(.wp-block-button__link, #important):hover {
    color: var(--hoverLinks);
}