/* Shared public-site foundation. Load after page-specific styles. */
@import url("fonts/zodiak/css/zodiak.css");
:root {
    --color-ink: #0e0f0c;
    --color-parchment: #FBFAF8;
    --color-graphite: #3a3d38;
    --color-bone: #dde8ef;
    --color-muted: #7a7a6e;
    --color-signal: #2f80ed;
    --color-deepblue: #123b5d;
    --color-seagreen: #2f6f5e;
    --turbo-hairline: rgba(14, 15, 12, 0.12);
    --grain-strength: 0.1;
}

html,
body {
    background-color: var(--color-parchment);
    overscroll-behavior-y: none;
}

body {
    position: relative;
    isolation: isolate;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: var(--grain-strength);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Keep the paper texture above the canvas but behind every page element. */
body > * {
    position: relative;
    z-index: 1;
}

/* The marketing canvas is paper first; use atmosphere inside sections, not as a page wash. */
body::before {
    display: none;
}

.hairline-t { border-top-color: var(--turbo-hairline); }
.hairline-b { border-bottom-color: var(--turbo-hairline); }
.hairline-r { border-right-color: var(--turbo-hairline); }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}