@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
    --paper: #FAFAF8;
    --paper-alt: #F3F2EE;
    --ink: #1B2A4A;
    --slate: #5B6472;
    --accent: #2E6E5E;
    --accent-soft: #E7EFEC;
    --border: #E1E0DA;
    --serif: 'Source Serif 4', Georgia, serif;
    --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

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

    * {
        animation: none !important;
        transition: none !important;
    }
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--accent);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

    a:focus-visible, button:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
    }

.wrap {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 24px;
}

.btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 3px;
    font-size: 0.94rem;
    font-weight: 500;
}

.btn-primary {
    background: var(--ink);
    color: var(--paper);
}

    .btn-primary:hover {
        background: var(--accent);
        text-decoration: none;
    }

.btn-secondary {
    border: 1px solid var(--border);
    color: var(--ink);
}

    .btn-secondary:hover {
        border-color: var(--accent);
        color: var(--accent);
        text-decoration: none;
    }

@media (max-width:560px) {
    .nav-links {
        gap: 14px;
        font-size: 0.85rem;
    }
}