* These styles should be loaded by the Block Editor only
--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
--global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
--global--font-size-base: 1.25rem;
--global--font-size-xs: 1rem;
--global--font-size-sm: 1.125rem;
--global--font-size-md: 1.25rem;
--global--font-size-lg: 1.5rem;
--global--font-size-xl: 2.25rem;
--global--font-size-xxl: 4rem;
--global--font-size-xxxl: 5rem;
--global--font-size-page-title: var(--global--font-size-xxl);
--global--letter-spacing: normal;
--global--line-height-body: 1.7;
--global--line-height-heading: 1.3;
--global--line-height-page-title: 1.1;
--heading--font-family: var(--global--font-primary);
--heading--font-size-h6: var(--global--font-size-xs);
--heading--font-size-h5: var(--global--font-size-sm);
--heading--font-size-h4: var(--global--font-size-lg);
--heading--font-size-h3: calc(1.25 * var(--global--font-size-lg));
--heading--font-size-h2: var(--global--font-size-xl);
--heading--font-size-h1: var(--global--font-size-page-title);
--heading--letter-spacing-h6: 0.05em;
--heading--letter-spacing-h5: 0.05em;
--heading--letter-spacing-h4: var(--global--letter-spacing);
--heading--letter-spacing-h3: var(--global--letter-spacing);
--heading--letter-spacing-h2: var(--global--letter-spacing);
--heading--letter-spacing-h1: var(--global--letter-spacing);
--heading--line-height-h6: var(--global--line-height-heading);
--heading--line-height-h5: var(--global--line-height-heading);
--heading--line-height-h4: var(--global--line-height-heading);
--heading--line-height-h3: var(--global--line-height-heading);
--heading--line-height-h2: var(--global--line-height-heading);
--heading--line-height-h1: var(--global--line-height-page-title);
--heading--font-weight: normal;
--heading--font-weight-page-title: 300;
--heading--font-weight-strong: 600;
/* Block: Latest posts */
--latest-posts--title-font-family: var(--heading--font-family);
--latest-posts--title-font-size: var(--heading--font-size-h3);
--latest-posts--description-font-family: var(--global--font-secondary);
--latest-posts--description-font-size: var(--global--font-size-sm);
--list--font-family: var(--global--font-secondary);
--definition-term--font-family: var(--global--font-primary);
--global--color-black: #000;
--global--color-dark-gray: #28303d;
--global--color-gray: #39414d;
--global--color-light-gray: #f0f0f0;
--global--color-green: #d1e4dd;
--global--color-blue: #d1dfe4;
--global--color-purple: #d1d1e4;
--global--color-red: #e4d1d1;
--global--color-orange: #e4dad1;
--global--color-yellow: #eeeadd;
--global--color-white: #fff;
--global--color-white-50: rgba(255, 255, 255, 0.5);
--global--color-white-90: rgba(255, 255, 255, 0.9);
--global--color-primary: var(--global--color-dark-gray);
/* Body text color, site title, footer text color. */
--global--color-secondary: var(--global--color-gray);
--global--color-primary-hover: var(--global--color-primary);
--global--color-background: var(--global--color-green);
/* Mint, default body background */
--global--color-border: var(--global--color-primary);
/* Used for borders (separators) */
--global--spacing-unit: 20px;
--global--spacing-measure: unset;
--global--spacing-horizontal: 25px;
--global--spacing-vertical: 30px;
--global--elevation: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
--form--font-family: var(--global--font-secondary);
--form--font-size: var(--global--font-size-sm);
--form--line-height: var(--global--line-height-body);
--form--color-text: var(--global--color-dark-gray);
--form--color-ranged: var(--global--color-secondary);
--form--label-weight: 500;
--form--border-color: var(--global--color-secondary);
--form--border-width: 3px;
--form--border-radius: 0;
--form--spacing-unit: calc(0.5 * var(--global--spacing-unit));
--cover--height: calc(15 * var(--global--spacing-vertical));
--cover--color-foreground: var(--global--color-white);
--cover--color-background: var(--global--color-black);
--button--color-text: var(--global--color-background);
--button--color-text-hover: var(--global--color-secondary);
--button--color-text-active: var(--global--color-secondary);
--button--color-background: var(--global--color-secondary);
--button--color-background-active: var(--global--color-background);
--button--font-family: var(--global--font-primary);
--button--font-size: var(--global--font-size-base);
--button--font-weight: 500;
--button--line-height: 1.5;
--button--border-width: 3px;
--button--border-radius: 0;
--button--padding-vertical: 15px;
--button--padding-horizontal: calc(2 * var(--button--padding-vertical));
--entry-header--color: var(--global--color-primary);
--entry-header--color-link: currentColor;
--entry-header--color-hover: var(--global--color-primary-hover);
--entry-header--color-focus: var(--global--color-secondary);
--entry-header--font-size: var(--heading--font-size-h2);
--entry-content--font-family: var(--global--font-secondary);
--entry-author-bio--font-family: var(--heading--font-family);
--entry-author-bio--font-size: var(--heading--font-size-h4);
--branding--color-text: var(--global--color-primary);
--branding--color-link: var(--global--color-primary);
--branding--color-link-hover: var(--global--color-secondary);
--branding--title--font-family: var(--global--font-primary);
--branding--title--font-size: var(--global--font-size-lg);
--branding--title--font-size-mobile: var(--heading--font-size-h4);
--branding--title--font-weight: normal;
--branding--title--text-transform: uppercase;
--branding--description--font-family: var(--global--font-secondary);
--branding--description--font-size: var(--global--font-size-sm);
--branding--description--font-family: var(--global--font-secondary);
--branding--logo--max-width: 300px;
--branding--logo--max-height: 100px;
--branding--logo--max-width-mobile: 96px;
--branding--logo--max-height-mobile: 96px;
--primary-nav--font-family: var(--global--font-secondary);
--primary-nav--font-family-mobile: var(--global--font-primary);
--primary-nav--font-size: var(--global--font-size-md);
--primary-nav--font-size-sub-menu: var(--global--font-size-xs);
--primary-nav--font-size-mobile: var(--global--font-size-sm);
--primary-nav--font-size-sub-menu-mobile: var(--global--font-size-sm);
--primary-nav--font-size-button: var(--global--font-size-xs);
--primary-nav--font-style: normal;
--primary-nav--font-style-sub-menu-mobile: normal;
--primary-nav--font-weight: normal;
--primary-nav--font-weight-button: 500;
--primary-nav--color-link: var(--global--color-primary);
--primary-nav--color-link-hover: var(--global--color-primary-hover);
--primary-nav--color-text: var(--global--color-primary);
--primary-nav--padding: calc(0.66 * var(--global--spacing-unit));
--primary-nav--border-color: var(--global--color-primary);
--pagination--color-text: var(--global--color-primary);
--pagination--color-link-hover: var(--global--color-primary-hover);
--pagination--font-family: var(--global--font-secondary);
--pagination--font-size: var(--global--font-size-lg);
--pagination--font-weight: normal;
--pagination--font-weight-strong: 600;
--footer--color-text: var(--global--color-primary);
--footer--color-link: var(--global--color-primary);
--footer--color-link-hover: var(--global--color-primary-hover);
--footer--font-family: var(--global--font-primary);
--footer--font-size: var(--global--font-size-sm);
--pullquote--font-family: var(--global--font-primary);
--pullquote--font-size: var(--heading--font-size-h3);
--pullquote--font-style: normal;
--pullquote--letter-spacing: var(--heading--letter-spacing-h4);
--pullquote--line-height: var(--global--line-height-heading);
--pullquote--border-width: 3px;
--pullquote--border-color: var(--global--color-primary);
--pullquote--color-foreground: var(--global--color-primary);
--pullquote--color-background: var(--global--color-background);
--quote--font-family: var(--global--font-secondary);
--quote--font-size: var(--global--font-size-md);
--quote--font-size-large: var(--global--font-size-xl);
--quote--font-style: normal;
--quote--font-weight: 700;
--quote--font-weight-strong: bolder;
--quote--font-style-large: normal;
--quote--font-style-cite: normal;
--quote--line-height: var(--global--line-height-body);
--quote--line-height-large: 1.35;
--separator--border-color: var(--global--color-border);
--separator--height: 1px;
--table--stripes-border-color: var(--global--color-light-gray);
--table--stripes-background-color: var(--global--color-light-gray);
--table--has-background-text-color: var(--global--color-dark-gray);
--widget--line-height-list: 1.9;
--widget--line-height-title: 1.4;
--widget--font-weight-title: 700;
--widget--spacing-menu: calc(0.66 * var(--global--spacing-unit));
--global--admin-bar--height: 0;
--global--admin-bar--height: 32px;
@media only screen and (max-width: 782px) {
--global--admin-bar--height: 46px;
@media only screen and (min-width: 652px) {
--global--font-size-xl: 2.5rem;
--global--font-size-xxl: 6rem;
--global--font-size-xxxl: 9rem;
--heading--font-size-h3: 2rem;
--heading--font-size-h2: 3rem;
* Root Media Query Variables
--responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal) * 0.6);
--responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal));
--responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal));
--responsive--alignfull-width: 100%;
--responsive--alignright-margin: var(--global--spacing-horizontal);
--responsive--alignleft-margin: var(--global--spacing-horizontal);
@media only screen and (min-width: 482px) {
--responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 610px);
--responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal));
--responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
--responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
@media only screen and (min-width: 822px) {
--responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 610px);
--responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px);
max-width: var(--responsive--aligndefault-width);
max-width: var(--responsive--alignwide-width);
@media only screen and (min-width: 482px) {
max-width: var(--responsive--alignfull-width);
margin: var(--global--spacing-vertical) 0 var(--global--spacing-vertical) var(--global--spacing-horizontal);
margin-top: var(--global--spacing-unit);
margin-bottom: var(--global--spacing-unit);
blockquote > *:first-child {
blockquote > *:last-child {
letter-spacing: var(--heading--letter-spacing-h4);
font-family: var(--quote--font-family);
font-size: var(--quote--font-size);
font-style: var(--quote--font-style);
font-weight: var(--quote--font-weight);
line-height: var(--quote--line-height);
color: var(--global--color-primary);
font-size: var(--global--font-size-xs);
letter-spacing: var(--global--letter-spacing);
blockquote.alignright p {
font-size: var(--heading--font-size-h5);
blockquote.alignleft cite,
blockquote.alignleft footer,
blockquote.alignright cite,
blockquote.alignright footer {
font-size: var(--global--font-size-xs);
letter-spacing: var(--global--letter-spacing);
font-weight: var(--quote--font-weight-strong);
font-size: var(--quote--font-size);
line-height: var(--quote--line-height);
left: calc(-0.5 * var(--global--spacing-horizontal));
blockquote .wp-block-quote__citation,
color: var(--global--color-primary);
font-size: var(--global--font-size-xs);
font-style: var(--quote--font-style-cite);
@media only screen and (max-width: 481px) {
padding-left: calc(0.5 * var(--global--spacing-horizontal));
/* Classic editor images */
/* Make sure embeds and iframes fit their containers. */
.wp-block-embed figcaption {
font-size: var(--global--font-size-xs);
line-height: var(--global--line-height-body);
margin-top: calc(0.5 * var(--global--spacing-unit));
margin-bottom: var(--global--spacing-unit);
.alignleft .wp-caption-text,
.alignright .wp-caption-text,
.alignleft .wp-block-embed figcaption,
.alignright .wp-block-embed figcaption {
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
border: var(--form--border-width) solid var(--form--border-color);
border-radius: var(--form--border-radius);
color: var(--form--color-text);
font-size: var(--form--font-size);
-webkit-appearance: none;
padding: var(--form--spacing-unit) calc(3 * var(--form--spacing-unit)) var(--form--spacing-unit) var(--form--spacing-unit);
background: var(--global--color-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat;
background-position: right var(--form--spacing-unit) top 60%;
* text-underline-offset doesn't work in Chrome at all 👎
* But looks nice in Safari/Firefox, so let's keep it and
* maybe Chrome will support it soon.
color: var(--wp--style--color--link, var(--global--color-primary));
text-underline-offset: 3px;
text-decoration-skip-ink: all;
text-decoration-style: dotted;
text-decoration-skip-ink: none;
.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
text-decoration: underline 1px dotted currentColor;
text-decoration-skip-ink: none;
background: rgba(255, 255, 255, 0.9);
.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav {
color: var(--wp--style--color--link, var(--global--color-background));
.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
background: rgba(0, 0, 0, 0.9);
color: var(--wp--style--color--link, var(--global--color-white));