:root {
    --font-family-primary: "Neue Haas Grotesk", sans-serif;
    --font-weight-primary: 400;
    --letter-spacing-primary: 0.02em;

    /* Open Studio type scale, relative to Pure's 14px base:
       XS 14, S 18, M 24/27/27, L 24/27/35, XL 40/49/56. */
    --open-studio-font-size-base: var(--font-size-primary);
    --open-studio-scale-text: 1.2857142857;
    --open-studio-scale-large: 1.7142857143;
    --open-studio-scale-page-hero: 1.7142857143;
    --open-studio-scale-display: 2.8571428571;
    --open-studio-font-size-text: calc(var(--open-studio-font-size-base) * var(--open-studio-scale-text));
    --open-studio-font-size-large: calc(var(--open-studio-font-size-base) * var(--open-studio-scale-large));
    --open-studio-font-size-page-hero: calc(var(--open-studio-font-size-base) * var(--open-studio-scale-page-hero));
    --open-studio-font-size-display: calc(var(--open-studio-font-size-base) * var(--open-studio-scale-display));
    --open-studio-line-height-base: calc(var(--open-studio-font-size-base) * 1.6428571429);
    --open-studio-line-height-text: calc(var(--open-studio-font-size-base) * 1.8571428571);
    --open-studio-line-height-large: calc(var(--open-studio-font-size-base) * 2.2857142857);
    --open-studio-line-height-page-hero: calc(var(--open-studio-font-size-base) * 2.2857142857);
    --open-studio-line-height-display: calc(var(--open-studio-font-size-base) * 3);

    /* Typographic spacing scale, relative to Pure's base font size.
       At a 14px base these resolve to 16 / 24 / 32 / 40px. */
    --open-studio-type-space-tight: calc(var(--open-studio-font-size-base) * 1.1428571429);
    --open-studio-type-space-small: calc(var(--open-studio-font-size-base) * 1.7142857143);
    --open-studio-type-space-medium: calc(var(--open-studio-font-size-base) * 2.2857142857);
    --open-studio-type-space-large: calc(var(--open-studio-font-size-base) * 2.8571428571);

    --space-40: 40px;
    --space-60: 60px;
    --space-80: 80px;
    --space-120: 120px;

    --block-padding-small: 12px;
    --block-padding-large: 12px;
}


@media (min-width: 768px) {
    :root {
        --block-padding-small: 8px;
        --block-padding-large: 20px;
    }
}

@media (min-width: 992px) {
    :root {
        --open-studio-font-size-base: var(--font-size-tablet);
        --open-studio-scale-large: 1.9285714286;
        --open-studio-scale-page-hero: 1.9285714286;
        --open-studio-scale-display: 3.5;
        --open-studio-line-height-large: calc(var(--open-studio-font-size-base) * 2.7142857143);
        --open-studio-line-height-page-hero: calc(var(--open-studio-font-size-base) * 2.7142857143);
        --open-studio-line-height-display: calc(var(--open-studio-font-size-base) * 3.8571428571);
    }
}

@media (min-width: 1400px) {
    :root {
        --block-padding-small: 8px;
        --block-padding-large: 40px;
        --open-studio-scale-page-hero: 2.5;
        --open-studio-scale-display: 4;
        --open-studio-line-height-page-hero: calc(var(--open-studio-font-size-base) * 3.2857142857);
        --open-studio-line-height-display: calc(var(--open-studio-font-size-base) * 4.4285714286);
    }
}

@media (min-width: 2000px) {
    :root {
        --open-studio-font-size-base: var(--font-size-desktop);
    }
}

body {
    letter-spacing: .02rem;
    text-underline-offset: .2em;
    -webkit-font-smoothing: antialiased;
}

body a,
body u {
    text-underline-offset: .2em;
text-decoration-thickness: 2px!important;
}


.pure-blocks-wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    max-width: 1500px;
}

.open-studio-page-overlay--slideshow .pure-blocks-wrapper {
    max-width: 100%;
}

.pure-blocks-wrapper .block, .open-studio-site-footer-navigation, .open-studio-site-header-navigation, .open-studio-site-header-navigation__menu-content > * {
    padding-inline: var(--block-padding-large);
}



/* Palette page backgrounds. */
body.has-open-studio-palette-background {
    background-color: var(--open-studio-background-color, var(--color-secondary));
}

/* Safari reference test: on palette pages the body is the only colored
   surface. Header/background/menu remain transparent and do not animate color. */
body.has-open-studio-palette-background .open-studio-site-header-navigation__background,
body.has-open-studio-palette-background .open-studio-site-header-navigation__menu {
    background-color: transparent;
}

body.has-open-studio-animated-background .open-studio-site-header-navigation__background {
    transition: transform 0.3s ease;
}

body.has-open-studio-animated-background .open-studio-site-header-navigation__menu {
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
}

body.has-open-studio-animated-background .open-studio-site-header-navigation__menu.is-open {
    transition: transform 0.3s ease, visibility 0s;
}

body.has-open-studio-palette-background .open-studio-site-header-navigation__menu,
body.has-open-studio-palette-background .open-studio-site-header-navigation__menu a,
body.has-open-studio-palette-background .open-studio-site-header-navigation__menu button,
body.has-open-studio-palette-background .open-studio-site-header-navigation__menu [class*="label"],
body.has-open-studio-palette-background .open-studio-site-header-navigation__menu [class*="new"] {
    color: #000 !important;
}