/*  DEFAULTS: TYPOGRAPHY
//////////////////////////////////////////////////////////////////////////////*/

@layer defaults {
    html {
        line-height: var(--line-height-copy);
        font-family: var(--font-family-copy);
        font-weight: var(--font-weight-copy);

        font-size: 0.875rem;
        font-size: clamp(0.875rem, 0.07236842105263164rem + 1.0526315789473684vw, 1.125rem);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: inherit;
        font-weight: var(--font-weight-headings);
        font-family: var(--font-family-display);
    }

    .hentry h1 {
        font-size: var(--font-size-xxl);
        line-height: var(--line-height-xxl);
        margin-bottom: var(--spacing-xl);
    }

    .hentry h2 {
        font-size: var(--font-size-xl);
        line-height: var(--line-height-xl);
        margin-bottom: var(--spacing-m);
    }

    .hentry h3 {
        font-size: var(--font-size-l);
        line-height: var(--line-height-l);
        margin-bottom: var(--spacing-m);
    }

    .hentry h4,
    .hentry h5,
    .hentry h6 {
        font-size: var(--font-size-m);
        line-height: var(--line-height-m);
    }

    :where(h1, h2, h3, h4, h5, h6) strong {
        font-weight: 900;
    }
}