/* Typography - Font sizes, line heights, and text styling */

body {
    font-size: var(--step-0);
    line-height: 1.3;
    font-family: var(--font-family-serif);
    background-color: var(--color-background);
    color: var(--color-foreground);
}

p {
    line-height: 1.3;
    font-family: var(--font-family-serif);
}

h1, h2, h3, h4 {
    text-wrap: balance;
    font-weight: bold;
    font-family: var(--font-family-san-serif);
}

p, li, td, dd, caption, figcaption, blockquote {
    text-wrap: pretty;
}

p, h2, h3, h4 {
    margin-bottom: var(--grid-gutter);
}

strong {
    font-weight: bold;
}

h1 {
    font-size: var(--step-6);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 800;
    letter-spacing: -0.2rem;
    text-transform: uppercase;
    text-shadow: .1rem .1rem .1rem #919191, .2rem .2rem .1rem #919191, .3rem .3rem .1rem #919191, .4rem .4rem .1rem #919191, .5rem .5rem .1rem #919191, .6rem .6rem .6rem rgba(60,60,60,0.4), 1rem 1rem 1rem rgba(60,60,60,0.2), 1.5rem 1.5rem 3.5rem rgba(60,60,60,0.2), 2.0rem 2.0rem 6.0rem rgba(60,60,60,0.4);
    text-align: center;
    color: var(--color-foreground);
    line-height: 1.0;
}

h1.title {
    margin: 0 auto;
    text-align: center;
    line-height: .9;
    color: var(--color-title);
    background: linear-gradient(to bottom, #3338, #fff0), url(/sitefiles/1/gqstyletest4.jpg) top center / cover no-repeat;
    margin-bottom: var(--space-2xl);
    font-size: var(--step-6);
    font-weight: 800;
    letter-spacing: -0.2rem;
    text-transform: uppercase;
    text-shadow: .1rem .1rem .1rem #919191, .2rem .2rem .1rem #919191, .3rem .3rem .1rem #919191, .4rem .4rem .1rem #919191, .5rem .5rem .1rem #919191, .6rem .6rem .6rem rgba(60,60,60,0.4), 1rem 1rem 1rem rgba(60,60,60,0.2), 1.5rem 1.5rem 3.5rem rgba(60,60,60,0.2), 2.0rem 2.0rem 6.0rem rgba(60,60,60,0.4);
    padding: var(--grid-gutter) 20vw;
    padding-top: calc(6rem + var(--grid-gutter));
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

@supports (text-box: cap alphabetic) {
    .prose :is(h1, h2, h3, h4, p, ul, ol, li, blockquote, figure) {
        --flow-space: var(--space-l);
        text-box: cap alphabetic
    }
}