:root {
    --brand: #d94f2b;
    --brand-2: #a93219;
    --accent: #ff6b3d;
    --bg: #f3f1eb;
    --surface: #fbfaf7;
    --surface-2: #e9e6dd;
    --text: #171916;
    --muted: #666a62;
    --border: #d8d5cc;
    --grad: linear-gradient(135deg, #e85a35, #b43720);
    --ink: #171916;
    --paper: #fbfaf7;
    --font-display: Georgia, "Times New Roman", serif;
    --font-sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    color: var(--text);
    background:
        radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 25rem),
        var(--bg);
    font-family: var(--font-sans);
}

body::before {
    position: fixed;
    z-index: 20;
    inset: 0;
    pointer-events: none;
    content: "";
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

a {
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}

svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.container {
    width: min(100% - 40px, 1240px);
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    z-index: 100;
    top: 8px;
    left: 8px;
    padding: 12px 18px;
    color: white;
    background: var(--ink);
}