/* 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.5;
    font-family: var(--font-family-serif);
}

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

    font-family: 'Lyon Custom Headings', Georgia, serif;
}

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

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

strong {
    font-weight: bold;
}

h1 {
    font-size: var(--step-6);
    font-family: system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 800;
    letter-spacing: -0.2rem;
    text-transform: uppercase;
    /* A filter shadows everything the heading paints, so title text and SVG title logos get
       identical depth (text-shadow never reaches the logo). See --extrusion in variables.css. */
    filter: var(--extrusion);
    text-align: center;
    color: var(--color-foreground);
    line-height: 1.0;
}

/* Display titles wrap at spaces and generated slash opportunities, never inside words. */
h1.display-title {
    overflow-wrap: normal;
    word-break: normal;
}

h1 .title-logo {
    display: flex;
    justify-content: center;
    margin-block: 0.08em 0.06em;
}

h1 .title-logo__graphic {
    --logo-aspect: calc(var(--logo-width, 1) / var(--logo-height, 1));
    --logo-max-block: 1.75em;
    --logo-max-inline: min(86vw, 6.5em);

    display: block;
    inline-size: min(var(--logo-max-inline), calc(var(--logo-max-block) * var(--logo-aspect)));
    block-size: min(var(--logo-max-block), calc(var(--logo-max-inline) / var(--logo-aspect)));
    aspect-ratio: var(--logo-width, 1) / var(--logo-height, 1);
    background-color: currentColor;
    mask: var(--logo-url) center / contain no-repeat;
}

.visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    text-shadow: none;
}

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);
    /* Keeps its own text-shadow; a filter here would also shadow the background box */
    filter: none;
    font-size: var(--step-6);
    font-weight: 800;
    letter-spacing: -0.2rem;
    text-transform: uppercase;
    text-shadow:
        0.06rem 0.06rem 0.04rem #919191,
        0.12rem 0.12rem 0.04rem #919191,
        0.18rem 0.18rem 0.04rem #919191,
        0.24rem 0.24rem 0.04rem #919191,
        0.32rem 0.32rem 0.45rem rgb(60 60 60 / 0.32),
        0.55rem 0.55rem 1.1rem rgb(60 60 60 / 0.22);
    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
    }
}