/* Reset Global Styles */
:root {
    --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
    --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
    --mono: ui-monospace, Consolas, monospace;

    font: 18px/145% var(--sans);
    letter-spacing: 0.18px;

    @media (max-width: 1024px) {
        font-size: 16px;
    }
}

body {
    margin: 0;
}

/* Page Nav */

#page-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border, #e5e4e7);
    background: var(--bg, #fff);
}

#page-nav .home-link {
    font-weight: 700;
    margin-right: auto;
}

#page-nav a {
    color: var(--text, #6b6375);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

#page-nav a:hover {
    color: var(--accent, #aa3bff);
    background: var(--accent-bg, rgba(170, 59, 255, 0.1));
}

#page-nav a[aria-current='page'] {
    color: var(--accent, #aa3bff);
    background: var(--accent-bg, rgba(170, 59, 255, 0.1));
}

@media (prefers-color-scheme: dark) {
    #page-nav {
        background: var(--bg, #16171d);
        border-bottom-color: var(--border, #2e303a);
    }
}