@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;800&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

.type-cinzel-ebgaramond {

    --body-typeface: 'EB Garamond', serif;
    --header-typeface: 'Cinzel', serif;


    font-family: var(--body-typeface);
    font-size: 100%;
    line-height: 1.8;
    font-weight: 400;
    letter-spacing: 0.015em;


    & p, & blockquote, & td, & li, & label {
        font-family: var(--body-typeface);
        font-size: 1.15rem;
        line-height: 1.8;
        font-weight: 400;
        letter-spacing: 0.015em;
    }

    & h1, & h2, & h3, & h4, & h5, & h6 {
        font-family: var(--header-typeface);
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: 0.08em;
    }

    & h1 {font-size: 2.8rem;margin: 0.19rem 0 0.3rem;}
    & h2 {font-size: 2.3rem;margin: 0.27rem 0 0.3rem;}
    & h3 {font-size: 1.9rem;margin: 0.4rem 0 0.3rem;}
    & h4 {font-size: 1.6rem;margin: 0.45rem 0 0.3rem;line-height: 1.2;}
    & h5 {font-size: 1.3rem;margin: 0.52rem 0 0.3rem;line-height: 1.3;}
    & h6 {font-size: 1.05rem;margin: 0.73rem 0 0.3rem;font-weight: 800;line-height: 1.5;letter-spacing: 0.12em;text-transform: uppercase;}
    & p, & blockquote {margin:1rem 0;}

    & h1.o4-display {
        font-family: var(--header-typeface);
        font-size: 4rem;
        letter-spacing: 0.1em;
        line-height: 1.1;
        text-transform: uppercase;
        font-weight: 800;
        margin: 0.4rem 0;
    }

    & p.o4-display, & li.o4-display {
        font-family: var(--body-typeface);
        font-size: 1.35rem;
        line-height: 1.8;
        text-transform: none;
        font-style: italic;
        letter-spacing: 0.02em;
        font-weight: 400;
    }

    & .o4-button .button-label {
        padding: 11px 0px 9px;
    }

    & .o4-button.small .button-label {
        padding: 6px 0px 4px;
    }

    & .display-font1 {font-family: var(--header-typeface) !important; letter-spacing:0.5px}
    & .display-font2 {font-family: var(--body-typeface) !important;}

    @container page (max-width: 640px) {
        & h1.o4-display {font-size: 2.2rem;letter-spacing: 0.06em;}
        & p.o4-display, & li.o4-display {font-size: 0.95rem;}
        & h1 {font-size: 2.1rem;}
        & h2 {font-size: 1.8rem;}
        & h3 {font-size: 1.5rem;}
        & h4 {font-size: 1.3rem;}
        & h5 {font-size: 1.1rem;}
        & h6 {font-size: 0.95rem;}
    }
}