/* ==========================================================================
   LeverageFlows — Design tokens, reset, and typographic system
   Theme: instrument panel at night. Committed colour strategy: cyan signal
   carries the surface; violet is reserved for depth and atmosphere.
   ========================================================================== */

:root {
    /* --- Chassis ------------------------------------------------------- */
    --bg: oklch(0.145 0.014 245);
    --bg-deep: oklch(0.108 0.012 245);
    --surface: oklch(0.196 0.017 245);
    --surface-2: oklch(0.245 0.019 248);
    --line: oklch(0.32 0.021 245);
    --line-bright: oklch(0.42 0.026 245);

    /* --- Ink ----------------------------------------------------------- */
    --ink: oklch(0.97 0.005 245);
    /* 18.1:1 on --bg */
    --ink-2: oklch(0.812 0.013 245);
    /* 11.0:1 on --bg — body copy */
    --ink-3: oklch(0.668 0.016 245);
    /*  6.6:1 on --bg — metadata floor */

    /* --- Signal (the accent; does ~90% of the colour work) ------------- */
    --signal: oklch(0.792 0.138 214);
    /* 10.3:1 on --bg */
    --signal-deep: oklch(0.63 0.146 226);
    --signal-dim: oklch(0.792 0.138 214 / 0.16);

    /* --- Flow (violet; depth + atmosphere, never body text) ------------ */
    --flow: oklch(0.60 0.208 298);
    --flow-bright: oklch(0.715 0.183 300);
    /* 7.8:1 on --bg */
    --flow-dim: oklch(0.60 0.208 298 / 0.18);

    --warn: oklch(0.78 0.16 68);
    --ok: oklch(0.80 0.15 155);

    /* Hex mirrors for canvas / WebGL contexts that cannot parse oklch() */
    --signal-hex: #4fd8f0;
    --flow-hex: #9b6bff;
    --bg-hex: #0b1016;

    /* --- Type ---------------------------------------------------------- */
    --font-sans: 'Archivo', 'Archivo Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'Martian Mono', ui-monospace, 'SFMono-Regular', 'Consolas', monospace;

    /* Slope tuned against the longest word in the hero ("Engineering") at the
       narrowest column it ever occupies — the 62rem breakpoint, where the grid
       first splits. Any steeper and the headline overflows there.

       The ceilings were briefly raised to keep the scale growing against the
       wider container, and it was wrong: a 68px page title over a 52px section
       heading turned every inner page into a wall of type before a word of
       content. Headings are back to the original ceilings. A wide monitor is
       not an instruction to enlarge the writing — it is an instruction to give
       the layout more room, which the container and the head spreads already
       do. */
    --text-display: clamp(2.35rem, 1.1rem + 4.4vw, 4.5rem);
    --text-h1: clamp(2.1rem, 1.4rem + 3.1vw, 3.5rem);
    --text-h2: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem);
    --text-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
    --text-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
    /* Body and small stay fluid — this is the one part of the raise that was
       right. They were flat pixel values, so prose sat at 17px whether the
       column was 320px or 800px wide. Line length is capped in `ch`, so
       growing them widens the measure in pixels without adding words to the
       line, and the change tops out at +2px. */
    --text-body: clamp(1.0625rem, 1rem + 0.22vw, 1.1875rem);
    --text-sm: clamp(0.9375rem, 0.9rem + 0.16vw, 1.0625rem);
    /* Readouts stay put: mono uppercase at a fixed size is the one thing on the
       page that should read as an instrument label at every viewport. */
    --text-readout: 0.75rem;

    /* --- Space --------------------------------------------------------- */
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    /* Wide on purpose. 1240px is the safe blog measure and it left ~320px of
       dead margin either side on a 1900px monitor, which pulled every section
       — the hero worst of all — into a centred column with the page framing
       it. Prose is capped in `ch` regardless, so the extra width goes to the
       grids and the hero split rather than to line length. */
    --container: 1600px;
    --sp-section: clamp(5rem, 10vw, 8.5rem);
    --sp-section-tight: clamp(2.5rem, 5vw, 3.75rem);
    --sp-section-wide: clamp(6.5rem, 13vw, 11rem);

    --sp-1: 0.375rem;
    --sp-2: 0.625rem;
    --sp-3: 1rem;
    --sp-4: 1.5rem;
    --sp-5: 2.25rem;
    --sp-6: 3.25rem;
    --sp-7: 4.75rem;

    /* --- Form ---------------------------------------------------------- */
    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* --- Motion -------------------------------------------------------- */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 160ms;
    --dur: 320ms;
    --dur-slow: 620ms;

    /* --- Elevation (dark surfaces read depth from light, not shadow) --- */
    --shadow-panel: 0 1px 0 0 oklch(1 0 0 / 0.04) inset, 0 24px 60px -30px oklch(0.05 0 0 / 0.9);
    --shadow-lift: 0 1px 0 0 oklch(1 0 0 / 0.06) inset, 0 32px 70px -28px oklch(0.05 0 0 / 0.95);

    /* --- Stacking (semantic; never arbitrary) -------------------------- */
    --z-base: 0;
    --z-raised: 10;
    --z-dock: 60;
    --z-nav: 80;
    --z-overlay: 90;
    --z-menu: 100;
    --z-toast: 110;
    --z-spark: 200;

    color-scheme: dark;
}

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

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

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

body {
    background-color: var(--bg);
    color: var(--ink-2);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-variation-settings: 'wdth' 100;
    line-height: 1.7;
    /* light type on dark needs the extra leading */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

/* Backstop, on both elements. `clip` rather than `hidden`: hidden turns the
   element into a scroll container, which forces the other axis to `auto` and
   breaks any `position: sticky` inside it. `clip` just refuses to scroll.
   The declaration is repeated as `hidden` first so a browser without `clip`
   still gets the old behaviour. Anything that actually overflows is a bug to
   fix at the source — this only stops one from reaching the user as a
   sideways-sliding page. */
html,
body {
    overflow-x: hidden;
    overflow-x: clip;
}

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

img,
video {
    height: auto;
}

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

button {
    background: none;
    border: 0;
    cursor: pointer;
}

ul,
ol {
    list-style: none;
    padding: 0;
}

a {
    color: var(--signal);
    text-decoration-color: oklch(0.792 0.138 214 / 0.35);
    text-underline-offset: 0.22em;
    transition: color var(--dur-fast) var(--ease-out-quart),
        text-decoration-color var(--dur-fast) var(--ease-out-quart);
}

a:hover {
    color: var(--ink);
    text-decoration-color: currentColor;
}

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

::selection {
    background: oklch(0.792 0.138 214 / 0.28);
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--ink);
    font-family: var(--font-sans);
    line-height: 1.08;
    text-wrap: balance;
    overflow-wrap: break-word;
}

h1 {
    font-size: var(--text-h1);
    font-weight: 750;
    font-variation-settings: 'wdth' 108;
    letter-spacing: -0.028em;
}

h2 {
    font-size: var(--text-h2);
    font-weight: 700;
    font-variation-settings: 'wdth' 105;
    letter-spacing: -0.024em;
}

h3 {
    font-size: var(--text-h3);
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.014em;
}

h4,
h5,
h6 {
    font-size: 1.0625rem;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -0.008em;
}

p {
    text-wrap: pretty;
}

strong,
b {
    color: var(--ink);
    font-weight: 650;
}

/* The display face: Archivo pushed onto its width axis. This is the signage
   move that separates the brand from the geometric-sans default. */
.display {
    font-size: var(--text-display);
    font-weight: 800;
    font-variation-settings: 'wdth' 112;
    letter-spacing: -0.032em;
    /* floor is -0.04em */
    line-height: 0.94;
    color: var(--ink);
    text-wrap: balance;
}

/* Machine readouts only: values, slugs, field labels. Never prose. */
.readout {
    font-family: var(--font-mono);
    font-size: var(--text-readout);
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.5;
    color: var(--ink-3);
}

.lead {
    font-size: var(--text-lead);
    line-height: 1.65;
    color: var(--ink-2);
}

.measure {
    max-width: 68ch;
}

.measure-tight {
    max-width: 52ch;
}

.signal {
    color: var(--signal);
}

.muted {
    color: var(--ink-3);
}

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

.skip-link {
    position: fixed;
    top: 0;
    left: 50%;
    translate: -50% -120%;
    z-index: var(--z-toast);
    background: var(--signal);
    color: var(--bg);
    font-weight: 650;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 var(--radius) var(--radius);
    text-decoration: none;
    transition: translate var(--dur) var(--ease-out-expo);
}

.skip-link:focus-visible {
    translate: -50% 0;
    color: var(--bg);
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

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

.container-wide {
    width: min(100% - (var(--gutter) * 2), 1760px);
    margin-inline: auto;
}

.section {
    padding-block: var(--sp-section);
}

.section-tight {
    padding-block: var(--sp-section-tight);
}

.section-wide {
    padding-block: var(--sp-section-wide);
}

.stack>*+* {
    margin-top: var(--flow-space, var(--sp-3));
}

/* A seam, not a divider: 1px hairline that fades at both ends. */
.seam {
    height: 1px;
    border: 0;
    background: linear-gradient(90deg,
            transparent,
            var(--line) 12%,
            var(--line) 88%,
            transparent);
}

/* --------------------------------------------------------------------------
   Section headers — deliberately NOT a repeated uppercase eyebrow.
   `.section-head__count` is a real number (projects shipped, practices
   offered), not an ordinal, and it appears only where that number tells the
   reader something. Sections without a meaningful count get no label at all.
   -------------------------------------------------------------------------- */

.section-head {
    display: grid;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}

.section-head__title {
    display: flex;
    align-items: baseline;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    flex-wrap: wrap;
}

.section-head__count {
    font-family: var(--font-mono);
    font-size: clamp(0.7rem, 1.4vw, 0.78rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--signal);
    padding-bottom: 0.35em;
    white-space: nowrap;
}

.section-head p {
    color: var(--ink-2);
    max-width: 60ch;
}

/* Wide viewports run the head as a spread: the statement on the left, the
   sentence that qualifies it on the right, both sitting on the same bottom
   edge. Stacked, a heading capped in `ch` above a lead capped in `ch` left the
   entire right half of a 1600px container empty — which reads as a mistake
   rather than as space. */
@media (min-width: 62rem) {
    .section-head {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        align-items: end;
        column-gap: clamp(2rem, 5vw, 4.5rem);
    }

    .section-head p {
        max-width: 52ch;
        padding-bottom: 0.35rem;
    }
}

/* --------------------------------------------------------------------------
   Reveal — enhances an already-visible default. Without JS, or with reduced
   motion, or in a headless renderer, content is simply visible.
   -------------------------------------------------------------------------- */

.js [data-reveal] {
    opacity: 0.001;
    translate: 0 14px;
    transition: opacity var(--dur-slow) var(--ease-out-quart),
        translate var(--dur-slow) var(--ease-out-expo);
    transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-revealed {
    opacity: 1;
    translate: 0 0;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .js [data-reveal] {
        opacity: 1;
        translate: none;
    }
}

/* --------------------------------------------------------------------------
   Scrollbar — part of the chassis
   -------------------------------------------------------------------------- */

@supports (scrollbar-color: red blue) {
    html {
        scrollbar-color: var(--line-bright) var(--bg-deep);
        scrollbar-width: thin;
    }
}

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

::-webkit-scrollbar-track {
    background: var(--bg-deep);
}

::-webkit-scrollbar-thumb {
    background: var(--line-bright);
    border-radius: var(--radius-pill);
    border: 2px solid var(--bg-deep);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--signal-deep);
}