@layer base {
    :root {
        --font-weight-1: 100;
        --font-weight-2: 200;
        --font-weight-3: 300;
        --font-weight-4: 400;
        --font-weight-5: 500;
        --font-weight-6: 600;
        --font-weight-7: 700;
        --font-weight-8: 800;
        --font-weight-9: 900;

        --font-lineheight-00: .95;
        --font-lineheight-0: 1.1;
        --font-lineheight-1: 1.25;
        --font-lineheight-2: 1.375;
        --font-lineheight-3: 1.5;
        --font-lineheight-4: 1.75;
        --font-lineheight-5: 2;

        --font-size-000: 0.65rem;
        --font-size-00: 0.75rem;
        --font-size-0: .875rem;
        --font-size-1: 1rem;
        --font-size-2: 1.1rem;
        --font-size-3: 1.25rem;
        --font-size-4: 1.5rem;
        --font-size-5: 2rem;
        --font-size-6: 2.5rem;
        --font-size-7: 3rem;
        --font-size-8: 3.5rem;

        --font-size-fluid-0: clamp(.75rem, 1.5vw, 1rem);
        --font-size-fluid-1: clamp(1rem, 2vw, 1.5rem);
        --font-size-fluid-2: clamp(1.5rem, 3vw, 2.5rem);
        --font-size-fluid-3: clamp(2rem, 4vw, 3.5rem);
    }

    main {
        :is(h1, h2, h3, h4, h5, h6) {
            position: relative;
            vertical-align: baseline;
            margin-block: 0;

            font-size: var(--font-size-4);
            font-weight: var(--font-weight-6);
            line-height: var(--font-lineheight-1);

            &.bar {
                display: flex;
                align-items: center;
                gap: var(--size-2);

                color: var(--color-steel);

                &:before,
                &:after {
                    content: '';
                    display: block;
                    flex: auto;
                    border-bottom: 1px solid var(--color-stainless);
                    box-shadow: 0 2px 6px 0 color-mix(in hsl, var(--color-midnight) 30%, transparent);
                }
            }

            :is(& > a, .popup-trigger) {
                cursor: pointer;
                text-decoration: none;
                color: var(--color-gunmetal);
            }
        }

        :is(h1) {
            margin-block: 0;
            font-weight: var(--font-weight-5);

            font-size: var(--font-size-4);
        }

        :is(h2) {
            font-size: var(--font-size-3);
        }

        :is(h3) {
            font-size: var(--font-size-2);
            font-weight: var(--font-weight-4);
        }

        :is(h4) {
            font-size: var(--font-size-3);
        }

        :is(h5) {
            font-size: var(--font-size-3);
        }

        :is(h6) {
            font-size: var(--font-size-3);
        }

        :is(.text-1) {
            font-size: var(--font-size-1);
        }

        :is(.font-normal) {
            font-weight: var(--font-weight-4);
        }

        :is(p) {
            margin-trim: 0;

            @supports not (margin-trim: 0) {
                margin-top: 0;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }

        :is(a) {
            color: var(--color-midnight);
            text-decoration: underline;
            transition: color 0.2s ease;

            &:hover,
            &:active {
                color: var(--color-darkblue);
            }
        }

        :is(strong, .font-medium) {
            font-weight: var(--font-weight-5);
        }

        :is(small) {
            font-weight: var(--font-weight-3);
            font-size: var(--font-size-00);
        }
    }

    .truncate {
        overflow: auto;
        text-overflow: var(--text-overflow, ellipsis);
        white-space: nowrap;
    }
}