/*
    Works In All Things - site styles
    Brand: orange #E87121 and light grey #E5E5E5 from the logo, set in Lato
    (self-hosted in /assets/fonts). Colours live in the :root tokens below.
*/

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

@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    * { margin: 0; }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    img, svg, video { display: block; max-width: 100%; height: auto; }
    input, button, textarea, select { font: inherit; }
    p, h1, h2, h3, h4 { overflow-wrap: break-word; }
    h1, h2, h3, h4 { text-wrap: balance; }
    p { text-wrap: pretty; }
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/lato-latin-400-normal.woff2?v=2026100201") format("woff2");
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/fonts/lato-latin-700-normal.woff2?v=2026100201") format("woff2");
}

@layer tokens {
    :root {
        color-scheme: dark;

        /* Brand (from the logo) */
        --accent: #e87121;
        --accent-strong: #f39552;
        --accent-soft: color-mix(in oklab, var(--accent) 14%, transparent);
        --brand-grey: #e5e5e5;

        /* Surfaces */
        --bg: #0c0d10;
        --bg-raised: #14161b;
        --bg-sunken: #08090b;
        --line: #23262e;
        --line-strong: #343844;

        /* Text */
        --text: var(--brand-grey);
        --text-muted: #a3a9b6;
        --text-faint: #6f7584;

        /* Type */
        --font-sans: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
        --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.92rem);
        --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.13rem);
        --step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
        --step-2: clamp(1.45rem, 1.25rem + 0.9vw, 1.95rem);
        --step-3: clamp(1.8rem, 1.45rem + 1.7vw, 2.75rem);
        --step-4: clamp(2.2rem, 1.6rem + 3vw, 4rem);

        /* Space and shape */
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.5rem;
        --space-6: 2rem;
        --space-7: 3rem;
        --space-8: 5rem;
        --radius-sm: 6px;
        --radius: 12px;
        --radius-lg: 20px;
        --shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 20px 40px -24px rgb(0 0 0 / 0.8);
        --content: 72rem;
        --gutter: clamp(1rem, 4vw, 2rem);
    }
}

@layer base {
    html { scroll-behavior: smooth; }

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

    body {
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        background: var(--bg);
        color: var(--text);
        font-family: var(--font-sans);
        font-size: var(--step-0);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
    }

    main { flex: 1; }

    h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
    h1 { font-size: var(--step-4); }
    h2 { font-size: var(--step-3); }
    h3 { font-size: var(--step-1); }

    a {
        color: var(--accent);
        text-decoration-thickness: 1px;
        text-underline-offset: 0.2em;

        &:hover { color: var(--accent-strong); }
    }

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

    code {
        font-family: var(--font-mono);
        font-size: 0.9em;
        padding: 0.1em 0.35em;
        border-radius: 4px;
        background: var(--bg-raised);
        border: 1px solid var(--line);
    }

    ::selection { background: var(--accent); color: var(--bg); }
}

@layer layout {
    .container {
        width: min(100% - 2 * var(--gutter), var(--content));
        margin-inline: auto;
    }

    .section {
        padding-block: var(--space-8);

        & + .section { border-top: 1px solid var(--line); }
    }

    .section-head {
        max-width: 42rem;
        margin-bottom: var(--space-6);

        & p { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--step-1); }
    }

    .grid {
        display: grid;
        gap: var(--space-5);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    }

    .split {
        display: grid;
        gap: var(--space-7);
        align-items: center;

        @media (min-width: 60rem) {
            grid-template-columns: 1.1fr 1fr;
        }
    }

    .prose {
        max-width: 46rem;

        & > * + * { margin-top: var(--space-4); }
        & h2 { margin-top: var(--space-7); font-size: var(--step-2); }
        & h3 { margin-top: var(--space-6); }
        & ul, & ol { padding-left: 1.25rem; }
        & li + li { margin-top: var(--space-2); }
        & li::marker { color: var(--accent); }
    }
}

@layer components {
    /* Skip link */
    .skip-link {
        position: absolute;
        left: var(--space-4);
        top: -4rem;
        padding: var(--space-2) var(--space-4);
        background: var(--accent);
        color: var(--bg);
        border-radius: var(--radius-sm);
        z-index: 100;

        &:focus { top: var(--space-4); }
    }

    /* Header */
    .site-header {
        position: sticky;
        top: 0;
        z-index: 50;
        background: color-mix(in oklab, var(--bg) 82%, transparent);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--line);
    }

    .site-header .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        min-height: 4rem;
    }

    .brand {
        display: inline-flex;
        align-items: center;
        gap: var(--space-3);
        color: var(--text);
        font-weight: 700;
        letter-spacing: -0.01em;
        text-decoration: none;

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

    /* Text version of the logo: Lato Bold, uppercase, in an orange frame. */
    .brand-mark {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        padding: 0.3rem 0.6rem 0.25rem;
        border: 2px solid var(--accent);
        color: var(--accent);
        font-weight: 700;
        line-height: 1;
        text-transform: uppercase;
        white-space: nowrap;
        flex-shrink: 0;

        & .brand-top { font-size: 0.62rem; letter-spacing: 0.32em; margin-right: -0.32em; }
        & .brand-bottom { font-size: 1.12rem; letter-spacing: 0.24em; margin-right: -0.24em; }
    }

    .hero-logo {
        width: 100%;
        max-width: 36rem;
        margin-inline: auto;
        filter: drop-shadow(0 20px 40px rgb(0 0 0 / 0.45));
    }

    .site-nav a { white-space: nowrap; }

    @media (max-width: 26rem) {
        .site-nav a { padding-inline: var(--space-2); }

        /* The logo already links home, so drop "Home" on very small screens. */
        .site-nav li:first-child { display: none; }
    }

    .site-nav ul {
        display: flex;
        gap: var(--space-1);
        list-style: none;
        padding: 0;
    }

    .site-nav a {
        display: block;
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-sm);
        color: var(--text-muted);
        text-decoration: none;

        &:hover { color: var(--text); background: var(--bg-raised); }
        &[aria-current="page"] { color: var(--text); background: var(--bg-raised); }
    }

    /* Breadcrumbs */
    .breadcrumbs ol {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        list-style: none;
        padding: 0;
        font-size: var(--step--1);
        color: var(--text-faint);
    }

    .breadcrumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--line-strong); }
    .breadcrumbs a { color: var(--text-muted); text-decoration: none; }
    .breadcrumbs a:hover { color: var(--text); }

    /* Hero */
    .hero {
        position: relative;
        padding-block: clamp(4rem, 10vw, 8rem);
        overflow: clip;
        isolation: isolate;

        &::before {
            content: "";
            position: absolute;
            inset: -20% -10% auto auto;
            width: 60rem;
            aspect-ratio: 1;
            background: radial-gradient(closest-side, var(--accent-soft), transparent 70%);
            z-index: -1;
        }
    }

    .hero-title { max-width: 18ch; }
    .hero-lead { margin-top: var(--space-5); max-width: 38rem; color: var(--text-muted); font-size: var(--step-1); }
    .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

    .eyebrow {
        display: inline-block;
        margin-bottom: var(--space-4);
        color: var(--accent);
        font-size: var(--step--1);
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .verse {
        margin-top: var(--space-6);
        color: var(--text-faint);
        font-size: var(--step--1);
        font-style: italic;
    }

    /* Buttons */
    .button {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: 0.75em 1.25em;
        border-radius: 999px;
        border: 1px solid var(--line-strong);
        background: var(--bg-raised);
        color: var(--text);
        font-weight: 600;
        text-decoration: none;
        transition: background 0.2s, border-color 0.2s, transform 0.2s;

        &:hover { color: var(--text); border-color: var(--accent); transform: translateY(-1px); }

        &.button-primary {
            background: var(--accent);
            border-color: var(--accent);
            color: #120a04;

            &:hover { background: var(--accent-strong); color: #120a04; }
        }
    }

    /* Number board demo */
    .board-demo {
        position: relative;
        display: grid;
        place-items: center;
        aspect-ratio: 16 / 9;
        border-radius: var(--radius-lg);
        background: #000;
        border: 1px solid var(--line-strong);
        box-shadow: var(--shadow);
        overflow: hidden;
        container-type: inline-size;
    }

    .board-demo-number {
        color: #fff;
        font-weight: 800;
        font-size: 24cqi;
        line-height: 1;
        letter-spacing: 0.02em;
        font-variant-numeric: tabular-nums;
    }

    .board-demo-name {
        position: absolute;
        bottom: 14%;
        color: #fff;
        font-weight: 600;
        font-size: 6cqi;
        opacity: 0;
    }

    .board-demo-frame {
        position: absolute;
        inset: 0;
        border: 0.8cqi solid #fff;
        border-radius: inherit;
        box-shadow: inset 0 0 3cqi rgb(255 255 255 / 0.35);
        opacity: 0;
        pointer-events: none;
    }

    .board-demo-dots {
        position: absolute;
        bottom: 5%;
        display: flex;
        gap: 1.4cqi;

        & span { width: 1.4cqi; height: 1.4cqi; border-radius: 50%; background: #fff; opacity: 0.25; }
        & span.is-current { opacity: 0.8; }
    }

    /* Cards */
    .card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-6);
        border-radius: var(--radius);
        background: var(--bg-raised);
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
        transition: border-color 0.2s, transform 0.2s;

        & p { color: var(--text-muted); }

        &:has(.card-link):hover { border-color: var(--line-strong); transform: translateY(-2px); }
    }

    .card-icon {
        display: grid;
        place-items: center;
        width: 3rem;
        height: 3rem;
        border-radius: var(--radius-sm);
        background: var(--accent-soft);
        color: var(--accent);

        & svg { width: 1.5rem; height: 1.5rem; }
    }

    .card-link {
        color: var(--text);
        text-decoration: none;

        /* Makes the whole card clickable */
        &::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
        &:hover { color: var(--text); }
    }

    .card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        margin-top: auto;
        padding-top: var(--space-3);
    }

    .card-placeholder {
        border-style: dashed;
        background: transparent;
        box-shadow: none;
        justify-content: center;
        min-height: 14rem;
        text-align: center;
        align-items: center;
    }

    .tag {
        display: inline-flex;
        align-items: center;
        padding: 0.2em 0.65em;
        border-radius: 999px;
        border: 1px solid var(--line-strong);
        color: var(--text-muted);
        font-size: var(--step--1);
        font-weight: 500;

        &.tag-accent { border-color: transparent; background: var(--accent-soft); color: var(--accent-strong); }
    }

    /* Feature list */
    .features {
        display: grid;
        gap: var(--space-5);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
        list-style: none;
        padding: 0;
    }

    .feature {
        padding: var(--space-5);
        border-radius: var(--radius);
        border: 1px solid var(--line);
        background: var(--bg-raised);

        & h3 { font-size: var(--step-0); margin-bottom: var(--space-2); }
        & p { color: var(--text-muted); font-size: var(--step--1); }
    }

    /* Screenshots */
    .shots {
        display: grid;
        gap: var(--space-5);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    }

    .shot {
        & img {
            width: 100%;
            aspect-ratio: 4 / 3;
            object-fit: cover;
            border-radius: var(--radius);
            border: 1px solid var(--line-strong);
            background: var(--bg-sunken);
        }

        & figcaption { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--step--1); }
    }

    /* Facts table */
    .facts {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--step--1);

        & th, & td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
        & th { width: 34%; color: var(--text-muted); font-weight: 500; }
    }

    /* FAQ */
    .faq details {
        border-bottom: 1px solid var(--line);
        padding-block: var(--space-4);

        & summary {
            cursor: pointer;
            font-weight: 600;
            list-style: none;
            display: flex;
            justify-content: space-between;
            gap: var(--space-4);

            &::-webkit-details-marker { display: none; }
            &::after { content: "+"; color: var(--accent); font-weight: 400; transition: transform 0.2s; }
        }

        &[open] summary::after { transform: rotate(45deg); }
        & p { margin-top: var(--space-3); color: var(--text-muted); }
    }

    /* Callout */
    .callout {
        padding: var(--space-5) var(--space-6);
        border-radius: var(--radius);
        border: 1px solid var(--line-strong);
        background: linear-gradient(135deg, var(--accent-soft), transparent 60%), var(--bg-raised);

        & h2, & h3 { font-size: var(--step-2); }
        & p { margin-top: var(--space-2); color: var(--text-muted); }
        & .hero-actions { margin-top: var(--space-5); }
    }

    /* Footer */
    .site-footer {
        border-top: 1px solid var(--line);
        background: var(--bg-sunken);
        color: var(--text-faint);
        font-size: var(--step--1);
        padding-block: var(--space-7);
    }

    .site-footer .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: var(--space-5);
    }

    .site-footer ul { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; padding: 0; }
    .site-footer a { color: var(--text-muted); text-decoration: none; }
    .site-footer a:hover { color: var(--text); }
}

@layer utilities {
    .visually-hidden {
        position: absolute !important;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .muted { color: var(--text-muted); }
    .mt-5 { margin-top: var(--space-5); }
    .mt-6 { margin-top: var(--space-6); }

    /* Hidden until GSAP reveals it; shown at once without JS or with reduced motion */
    .js-motion [data-reveal],
    .js-motion [data-hero-logo] { opacity: 0; }
}