@font-face {
    font-family: 'Fraunces';
    src: url('/assets/fonts/fraunces-variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/assets/fonts/ibm-plex-mono-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

a, button, input, textarea, select, .card-interactive { -webkit-tap-highlight-color: transparent; }

:root {
    color-scheme: light;


    --ink:         #10151c;
    --ink-soft:    #29323d;
    --ink-muted:   #58657a;
    --surface:     #f5f7fa;
    --surface-2:   #ffffff;
    --surface-3:   #e4e9ef;
    --white:       #ffffff;
    --accent:      #2f5fa8;
    --accent-warm: #5b8fd6;
    --accent-dim:  rgba(47, 95, 168, 0.07);


    --serif:   'Fraunces', Georgia, serif;
    --sans:    'Inter', system-ui, sans-serif;
    --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;


    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;


    --max-w:        1280px;
    --max-w-narrow: 820px;
    --radius:       6px;
    --radius-lg:    14px;
    --radius-xl:    22px;
    --radius-pill:  6px;


    --nav-h: 72px;


    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:   cubic-bezier(0.4, 0, 1, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:  150ms;
    --dur-med:   300ms;
    --dur-slow:  600ms;
    --dur-exit:  180ms;


    --shadow-sm: 0 1px 4px rgba(16,21,28,0.06), 0 2px 8px rgba(16,21,28,0.04);
    --shadow-md: 0 4px 16px rgba(16,21,28,0.08), 0 8px 32px rgba(16,21,28,0.06);
    --shadow-lg: 0 8px 32px rgba(16,21,28,0.10), 0 24px 64px rgba(16,21,28,0.07);
    --shadow-xl: 0 24px 80px rgba(16,21,28,0.18);
}

html { 
    font-size: 16px; 
    width: 100%; 
    scrollbar-gutter: stable; 
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--surface-3) transparent;
}

::-webkit-scrollbar { width: 8px; height: 8px; }

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb { 
    background-color: var(--surface-3); 
    border-radius: 4px; 
    border: 2px solid transparent; 
    background-clip: padding-box; 
}

::-webkit-scrollbar-thumb:hover { 
    background-color: var(--ink-muted); 
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

img {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}

body {
    font-family: var(--sans); font-weight: 400; color: var(--ink);
    background: var(--surface); line-height: 1.65;
    -webkit-font-smoothing: antialiased; width: 100%; position: relative;
    font-optical-sizing: auto;
}

body.loading, body.modal-open { overflow: hidden; overscroll-behavior: none; }

html:has(body.loading),
html:has(body.modal-open) { overflow: hidden; }

body.modal-open { touch-action: none; }

img {
    display: block; width: 100%; height: 100%; object-fit: cover;
}

a { color: inherit; text-decoration: none; }

button { border: none; background: none; font-family: var(--sans); cursor: pointer; }

.skip-link {
    position: absolute; top: 0; left: var(--space-4);
    transform: translateY(-150%);
    background: var(--ink); color: var(--white);
    padding: var(--space-2) var(--space-4); border-radius: var(--radius);
    font-size: 0.875rem; z-index: 99999;
    transition: transform 0.2s;
}

.skip-link:focus { transform: translateY(var(--space-4)); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

svg.lucide { width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; }

body.project-modal-open .main-header {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}

body.project-modal-open .main-header .desktop-nav,
body.project-modal-open .main-header .nav-cta {
    pointer-events: none;
}

body:not(.loading) .reveal-up { opacity: 1; transform: translateY(0); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius); }

@media (min-width: 1024px) and (max-width: 1440px) {
    html { font-size: 15px; }
    :root {
        --max-w: 1120px;
        --space-24: 5rem;
        --space-16: 3.75rem;
        --nav-h: 64px;
    }
    .hero-title-massive { font-size: clamp(2rem, 4.5vw, 3.5rem); }

    .project-header h1 { font-size: clamp(2rem, 4vw, 3.5rem); }

    .next-title { font-size: clamp(1.5rem, 3.5vw, 2.5rem); }

    .standard-quote { font-size: clamp(1.125rem, 2.5vw, 2rem); }
}

@media (max-width: 768px) {
    :root { --space-24: 4rem; }
    .hero-stats-centered { gap: var(--space-6); }
    .stat-num { font-size: 1.875rem; }
    .stat-divider { height: 36px; }
}

html, body {
    overflow-x: clip;
}

main {
    overflow-x: clip;
}

body.modal-open,
body.modal-open main,
body.modal-open .site-wrapper,
body[style*="overflow: hidden"],
body[style*="overflow: hidden"] main,
body[style*="overflow: hidden"] .site-wrapper {
    overflow: hidden !important;
}

body.modal-open {
    padding-right: var(--scroll-pad, 0px) !important;
}

body.modal-open .main-header {
    padding-right: var(--scroll-pad, 0px); /* Prevents the header from jumping */
}