/* Shared chrome for every non-landing page on hubiq.tech (careers, legal).
   Loads after tokens.css and before the page stylesheet:
     <link rel="stylesheet" href="/tokens.css">
     <link rel="stylesheet" href="/site.css">
     <link rel="stylesheet" href="/<page>.css">
   Owns the reset, the body canvas, links, focus, header, footer, wordmark
   and the two shared text idioms (.eyebrow, .nav-link).
   Page-specific rules do not belong here. */

@layer tokens, reset, base, prose, components, utilities;

/* ---------- Self-hosted fonts (top level: @font-face is not layered) ---------- */

/* Latin + Latin Extended subset; the unicode-range mirrors the subset so the
   browser falls back cleanly for any glyph the file no longer carries. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/InterVariable.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched stand-in so text does not reflow when Inter arrives. */
@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial');
    size-adjust: 107.4%;
    ascent-override: 90.2%;
    descent-override: 22.5%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/InstrumentSerif-Regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/InstrumentSerif-Italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Instrument Serif is a narrow, tall face: Georgia is scaled down to match its
   line length, then its ascent/descent are inflated to match its line box. */
@font-face {
    font-family: 'Instrument Serif Fallback';
    font-style: normal;
    src: local('Georgia');
    size-adjust: 81%;
    ascent-override: 122.6%;
    descent-override: 38.4%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Instrument Serif Fallback';
    font-style: italic;
    src: local('Georgia Italic');
    size-adjust: 81%;
    ascent-override: 122.6%;
    descent-override: 38.4%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/fonts/JetBrainsMono-Variable.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Zero-JS cross-document fade between pages; the wordmark morphs in place.
   Opt-in like every other motion on the site. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

/* ---------- Reset ---------- */

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    * {
        margin: 0;
    }

    html {
        -webkit-text-size-adjust: 100%;
    }

    img,
    picture,
    video,
    canvas,
    svg {
        display: block;
        max-inline-size: 100%;
    }

    input,
    button,
    textarea,
    select {
        font: inherit;
    }
}

/* ---------- Base ---------- */

@layer base {
    body {
        min-block-size: 100svh;
        background: var(--bg);
        color: var(--text-primary);
        font-family: var(--font-sans);
        font-size: var(--step-0);
        line-height: var(--leading-body);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        /* Ambient tints live on a fixed layer so the canvas never repaints on scroll. */
        &::before {
            content: '';
            position: fixed;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            background:
                radial-gradient(ellipse 70% 50% at 15% 10%, var(--tint-primary) 0%, transparent 55%),
                radial-gradient(ellipse 60% 50% at 90% 90%, var(--tint-accent) 0%, transparent 55%);
        }
    }

    /* Inter's single-storey a and open digits: one place for every heading on the site. */
    :where(h1, h2, h3) {
        font-feature-settings: "cv11", "ss01";
    }

    ::selection {
        background: var(--selection);
        color: var(--text-primary);
    }

    a {
        color: var(--primary-soft);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-decoration-color: color-mix(in oklch, var(--primary-soft) 35%, transparent);
        text-underline-offset: 0.2em;

        &:hover {
            color: var(--text-primary);
            text-decoration-color: var(--primary-soft);
        }
    }

    :where(a, button, [tabindex]):focus-visible {
        outline: 2px solid var(--primary-soft);
        outline-offset: 3px;
    }

    @media (prefers-reduced-motion: no-preference) {
        /* Smooth scrolling is armed one second after load: the fragment jump
           on arrival stays instant, every in-page link after that is smooth.
           (`html:focus-within` cannot do this: Chromium clears focus before
           it performs a fragment scroll.) */
        html {
            animation: arm-smooth-scroll 0s var(--duration-arm) both;
        }

        @keyframes arm-smooth-scroll {
            to {
                scroll-behavior: smooth;
            }
        }

        a {
            transition:
                color var(--duration-fast) var(--ease),
                text-decoration-color var(--duration-fast) var(--ease);
        }
    }
}

/* ---------- Components: header, wordmark, footer, shared idioms ---------- */

@layer components {
    .site-header {
        border-block-end: 1px solid var(--border);
        padding-block: var(--space-6);
        padding-inline: var(--gutter);
    }

    /* On wide screens the header stays put and shrinks over the first
       --header-shrink-range of scroll: the brand stays present without holding
       a full-height bar in every viewport. Narrow screens already pin the CTA
       at the bottom, so their header scrolls away. Browsers without scroll
       timelines keep the scrolling header rather than a fixed full-height one. */
    @media (width >= 900px) {
        @media (prefers-reduced-motion: no-preference) {
            @supports (animation-timeline: scroll()) {
                html {
                    scroll-padding-block-start: var(--header-compact);
                }

                .site-header {
                    position: sticky;
                    inset-block-start: 0;
                    z-index: var(--layer-header);
                    animation: header-compact linear both;
                    animation-timeline: scroll();
                    animation-range: 0 var(--header-shrink-range);
                }

                .wordmark {
                    transform-origin: 0 50%;
                    animation: wordmark-compact linear both;
                    animation-timeline: scroll();
                    animation-range: 0 var(--header-shrink-range);
                }
            }
        }

        /* No scroll-linked resizing under reduced motion: the header is simply
           sticky at its compact size from the start. */
        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-padding-block-start: var(--header-compact);
            }

            .site-header {
                position: sticky;
                inset-block-start: 0;
                z-index: var(--layer-header);
                padding-block: var(--space-3);
                background: var(--surface-glass);
                -webkit-backdrop-filter: blur(var(--blur-glass));
                backdrop-filter: blur(var(--blur-glass));
                border-color: var(--border-strong);
            }
        }
    }

    @keyframes header-compact {
        to {
            padding-block: var(--space-3);
            background: var(--surface-glass);
            -webkit-backdrop-filter: blur(var(--blur-glass));
            backdrop-filter: blur(var(--blur-glass));
            border-color: var(--border-strong);
        }
    }

    /* Scale, not font-size, so the wordmark never reflows while it shrinks. */
    @keyframes wordmark-compact {
        to {
            scale: 0.85;
        }
    }

    .site-header__inner {
        max-inline-size: var(--page-max);
        margin-inline: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
    }

    .wordmark {
        font-size: var(--text-wordmark);
        font-weight: 700;
        letter-spacing: var(--tracking-snug);
        line-height: 1; /* single line, no leading: the header row sets its own height */
        display: inline-block;
        padding-block: var(--space-3); /* >= 44px tap target without moving the header row */
        margin-block: calc(-1 * var(--space-3));
        color: var(--text-primary);
        text-decoration: none;
        -webkit-user-select: none;
        user-select: none;
        view-transition-name: wordmark;

        .iq {
            background: var(--gradient-brand);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            -webkit-text-fill-color: transparent;
        }
    }

    /* Small uppercase label: kickers, rail titles, definition terms, footer meta. */
    .eyebrow {
        font-family: var(--font-sans);
        font-size: var(--text-xs);
        font-weight: 500;
        letter-spacing: var(--tracking-label);
        text-transform: uppercase;
        color: var(--text-tertiary);
    }

    /* Quiet navigation link whose vertical padding grows the tap target to
       >= 44px without moving the layout. */
    .nav-link {
        display: inline-block;
        padding-block: var(--space-3);
        margin-block: calc(-1 * var(--space-3));
        color: var(--text-secondary);
        text-decoration: none;

        &:hover {
            color: var(--text-primary);
        }
    }

    .site-footer {
        border-block-start: 1px solid var(--border);
        padding-block: var(--space-8) calc(var(--space-12) + env(safe-area-inset-bottom));
        padding-inline: var(--gutter);
        font-size: var(--step--1);
        color: var(--text-tertiary);
    }

    .site-footer__inner {
        max-inline-size: var(--page-max);
        margin-inline: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3) var(--space-6);
    }

    .site-footer__meta {
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    .site-footer__dot {
        inline-size: 4px;
        block-size: 4px;
        border-radius: 50%;
        background: var(--primary);
    }

    /* Links inside carry class="nav-link". */
    .site-footer__links {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-5);
    }
}

/* ---------- Utilities ---------- */

@layer utilities {
    .visually-hidden {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
}

/* ---------- Media policies (top level so they outrank every layer) ---------- */

@media (forced-colors: active) {
    .wordmark .iq {
        background: none;
        color: inherit;
        -webkit-text-fill-color: currentColor;
    }

    .site-footer__dot {
        forced-color-adjust: none;
        background: CanvasText;
    }

    body::before {
        display: none;
    }
}

/* Colours come from the print token remap in tokens.css; only visibility and
   the gradient-text reset live here. */
@media print {
    .site-header,
    .wordmark {
        position: static;
        animation: none;
        scale: none;
    }

    body::before {
        display: none;
    }

    .wordmark .iq {
        background: none;
        color: inherit;
        -webkit-text-fill-color: currentColor;
    }

    .site-footer {
        display: none;
    }
}