/* Base: reset, typography, container and utilities. */
@layer base {
    *, *::before, *::after { box-sizing: border-box; }

    html { scroll-behavior: smooth; overflow-x: clip; }

    body {
        margin: 0;
        min-height: 100vh;
        font-family: var(--font);
        font-size: 16px;
        line-height: 1.5;
        color: var(--color-text);
        background: var(--color-bg);
        -webkit-font-smoothing: antialiased;
    }

    body.nav-open { overflow: hidden; }

    /* A picture that fails to load stays an empty box (its gradient shows) instead of printing its alt text in the page. */
    img { max-width: 100%; display: block; font-size: 0; color: transparent; }
    a { color: var(--color-link); text-decoration: none; }
    a:hover { color: var(--color-link-hover); }
    h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
    ul { margin: 0; padding: 0; list-style: none; }
    button { font: inherit; cursor: pointer; }

    .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .muted { color: var(--color-text-muted); }
    .icon { flex: 0 0 auto; }


    h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.01em; color: var(--color-primary-strong); }
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl); }
    :focus-visible { outline: 3px solid color-mix(in srgb, var(--color-accent) 60%, transparent); outline-offset: 2px; }
    ::selection { background: var(--color-accent-soft); color: var(--color-ink-deep); }
    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
    }
    .skip-link { position: absolute; left: var(--space-3); top: -100px; z-index: 100; padding: var(--space-3) var(--space-4); background: var(--color-ink-deep); color: var(--color-on-dark); border-radius: var(--radius-sm); }
    .skip-link:focus { top: var(--space-3); color: var(--color-on-dark); }
}