@layer base {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        -webkit-text-size-adjust: 100%;
        scroll-behavior: smooth;
        scroll-padding-top: calc(var(--nur-header-h) + 56px);
    }

    body {
        margin: 0;
        min-height: 100dvh;
        background: var(--nur-bg);
        color: var(--nur-ink);
        font-family: var(--nur-font-body);
        font-size: var(--nur-text-md);
        line-height: 1.6;
        -webkit-tap-highlight-color: transparent;
        text-rendering: optimizeLegibility;
        /* long words / urls wrap instead of widening grid and flex parents */
        overflow-wrap: anywhere;
        /* last-resort net: never let one stray element make the whole page pan sideways (clip keeps sticky working) */
        overflow-x: clip;
    }

    img,
    svg,
    video,
    iframe {
        display: block;
        max-width: 100%;
    }

    img,
    video {
        height: auto;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    button,
    input,
    select,
    textarea {
        font: inherit;
        color: inherit;
    }

    button {
        cursor: pointer;
    }

    ul,
    ol {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    h1,
    h2,
    h3,
    h4,
    p,
    figure,
    dl,
    dd {
        margin: 0;
    }

    [hidden] {
        display: none !important;
    }

    :focus-visible {
        outline: 3px solid var(--nur-gold-500);
        outline-offset: 2px;
    }

    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
        }
    }
}

@layer base {
    /* sprite icons default to text size unless a component sizes them */
    svg:not([width]):not([class]) {
        width: 1.25em;
        height: 1.25em;
    }
}