/* XRX Design System Part 2 v1.0 — shared across every page.
   Values mirror design/tokens.json. Do not hardcode colours or sizes
   outside the :root block below. */
/* ==========================================================
           XRX Design System Part 2 v1.0
           Values below mirror design/tokens.json. Colours and sizes are
           taken from here only, never hardcoded further down.
           ========================================================== */

        :root {
            /* --- brand --- */
            --crimson: #CA0318;              /* light backgrounds — 5.94:1 on white */
            --crimson-dark: #8E0210;         /* hover / press, light backgrounds only */
            --crimson-on-dark: #E8394C;      /* dark backgrounds — 5.12:1 on black (1-3) */
            --black: #000000;
            --white: #FFFFFF;

            /* --- neutral ramp --- */
            --n-f7: #F7F7F7;
            --n-e7: #E7E6E6;
            --n-c4: #C4C4C4;
            --n-8a: #8A8A8A;
            --n-46: #464646;
            --n-2a: #2A2728;

            /* --- alpha, using the 1-5 corrected values --- */
            --dark-10: rgba(0, 0, 0, 0.1);
            --dark-15: rgba(0, 0, 0, 0.15);
            --dark-60: rgba(0, 0, 0, 0.6);
            --dark-80: rgba(0, 0, 0, 0.8);
            --light-15: rgba(255, 255, 255, 0.15);
            --light-30: rgba(255, 255, 255, 0.3);
            --light-55: rgba(255, 255, 255, 0.55);
            --light-60: rgba(255, 255, 255, 0.6);

            /* --- type ---
               Lato carries latin and numerals; Pretendard is declared for any
               Korean added later. The Pretendard webfont is deliberately not
               loaded: this page is English-only and a CJK face would cost
               megabytes for zero glyphs (5-5). */
            --font-base: 'Lato', 'Pretendard', -apple-system, BlinkMacSystemFont,
                         'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

            /* --- space, 8px base --- */
            --container: 1320px;
            --pad: 24px;
            --section-gap: 64px;
            --gutter: 24px;

            /* --- type scale, mobile first (6-2) --- */
            --fs-h1: 2.25rem;
            --fs-h2: 1.75rem;
            --fs-h3: 1.375rem;
            --fs-lead: 1.125rem;
            --fs-body: 1rem;
            --fs-label: 0.6875rem;
            --fs-figure: 3.5rem;
            --ls-label: 0.22em;   /* 6-2: reduced from 0.3em below 768px */

            /* --- motion ---
               --ease is the brand curve and governs every state change.
               --ease-spring overshoots slightly and is reserved for pointer
               feedback, where a settle reads as a response rather than a
               transition. Nothing scroll-driven uses it: those stay 1:1. */
            --ease: cubic-bezier(0, 0, 0.3642, 1);
            --ease-spring: cubic-bezier(0.34, 1.42, 0.64, 1);
            --dur: 0.4s;
        }

        @media (min-width: 768px) {
            :root {
                --pad: 36px;
                --section-gap: 80px;
                --fs-h1: 3rem;
                --fs-h2: 2.125rem;
                --fs-h3: 1.5rem;
                --fs-lead: 1.25rem;
                --fs-body: 1.0625rem;
                --fs-label: 0.75rem;
                --fs-figure: 5rem;
                --ls-label: 0.3em;
            }
        }

        @media (min-width: 1024px) {
            :root {
                --pad: 48px;
                --section-gap: 96px;
                --fs-h1: 4.25rem;
                --fs-h2: 2.75rem;
                --fs-h3: 1.75rem;
                --fs-lead: 1.375rem;
                --fs-figure: 6rem;
            }
        }

        @media (min-width: 1280px) {
            :root {
                --pad: 60px;
                --section-gap: 110px;
            }
        }

        /* ---------- base ---------- */

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

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

        body {
            margin: 0;
            background: var(--white);
            color: var(--black);
            font-family: var(--font-base);
            font-weight: 300;
            font-size: var(--fs-body);
            line-height: 1.8;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

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

        img { max-width: 100%; }

        /* Radius is 0 everywhere. No shadows, gradients or glows in this file. */
        * { border-radius: 0; }

        ::selection { background: var(--crimson); color: var(--white); }

        :focus-visible {
            outline: 2px solid var(--crimson);
            outline-offset: 2px;
        }

        .on-dark :focus-visible { outline-color: var(--crimson-on-dark); }

        .tabular {
            font-variant-numeric: tabular-nums;
            font-feature-settings: 'tnum' 1;
        }

        .skip {
            position: absolute;
            left: -9999px;
            top: 0;
            padding: 16px 24px;
            background: var(--crimson);
            color: var(--white);
            font-size: var(--fs-label);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: var(--ls-label);
            z-index: 100;
        }
        .skip:focus { left: 0; }

        /* ---------- shared primitives ---------- */

        .wrap {
            width: 100%;
            max-width: var(--container);
            margin: 0 auto;
            padding-left: var(--pad);
            padding-right: var(--pad);
        }

        .label {
            font-size: var(--fs-label);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: var(--ls-label);
            line-height: 1.4;
            color: var(--crimson);
            margin: 0;
        }

        .on-dark .label { color: var(--crimson-on-dark); }

        /* The one place Crimson appears as a shape, following the letterhead bar in 7-2. */
        .bar {
            display: block;
            width: 24px;
            height: 4px;
            background: var(--crimson);
            border: 0;
            margin: 0 0 24px;
        }

        .on-dark .bar { background: var(--crimson-on-dark); }

        /* Tracking is set per size, not once for every heading: the larger the
           type, the further apart the letters read, so the larger sizes get more
           negative tracking. Leading moves the other way. Both stay inside the
           -0.02em to -0.03em range the design system allows for latin headings. */
        h1, h2, h3 {
            font-weight: 900;
            margin: 0;
            font-optical-sizing: auto;
            text-wrap: balance;
        }

        h1 { letter-spacing: -0.03em; line-height: 1.02; }
        h2 { font-size: var(--fs-h2); letter-spacing: -0.024em; line-height: 1.08; }
        h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; line-height: 1.2; }

        .lead {
            font-size: var(--fs-lead);
            font-weight: 300;
            line-height: 1.55;
            letter-spacing: 0;
            text-wrap: pretty;
            color: var(--dark-60);
            max-width: 42ch;
            margin: 0;
        }

        .copy {
            font-size: var(--fs-body);
            font-weight: 300;
            line-height: 1.8;
            letter-spacing: 0;
            text-wrap: pretty;
            color: var(--dark-60);
            max-width: 58ch;
            margin: 24px 0 0;
        }

        .copy strong,
        .lead strong { font-weight: 700; color: var(--black); }

        .on-dark .lead,
        .on-dark .copy { color: var(--light-60); }

        .on-dark .copy strong,
        .on-dark .lead strong { color: var(--white); }

        /* Text-only call to action, 52px tall per the button spec. */
        .cta {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            min-height: 52px;
            padding: 0 32px;
            border: 1px solid var(--light-30);
            font-size: var(--fs-label);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.24em;
            color: var(--white);
            transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
        }

        .cta:hover {
            background: var(--crimson);
            border-color: var(--crimson);
            color: var(--white);
        }

        .cta:active {
            transform: scale(0.97);
            transition: transform 100ms ease-out;
        }

        /* ---------- band, white body ---------- */

        .band > section {
            padding-top: var(--section-gap);
            padding-bottom: var(--section-gap);
            border-top: 1px solid var(--dark-10);
        }

        .band > section:first-child { border-top: 0; }

        .band .alt { background: var(--n-f7); border-top: 0; }

        .sect-head { margin-bottom: 40px; }

        .sect-head h2 { margin-top: 24px; max-width: 18ch; }

        .sect-head .lead { margin-top: 24px; }

        /* 12 columns, 24px gutter, collapsing to 8 then 4. */
        .grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 40px var(--gutter);
        }

        @media (min-width: 768px) { .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
        @media (min-width: 1024px) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

        .col-main { grid-column: 1 / -1; }
        .col-side { grid-column: 1 / -1; }

        @media (min-width: 1024px) {
            .col-main { grid-column: 1 / span 7; }
            .col-side { grid-column: 9 / span 4; }
        }

        /* ---------- aside ---------- */

        .aside {
            margin: 0;
            padding-top: 24px;
            border-top: 1px solid var(--dark-15);
            font-size: var(--fs-h3);
            font-weight: 900;
            line-height: 1.2;
            letter-spacing: -0.02em;
            text-wrap: balance;
        }

        /* ---------- traits ---------- */

        .traits {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0;
            margin-top: 40px;
            border-top: 1px solid var(--dark-15);
        }

        .trait {
            padding: 28px 0;
            border-bottom: 1px solid var(--dark-10);
        }

        @media (min-width: 768px) {
            .traits {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: var(--gutter);
            }
            /* 3-column grid becomes a stack on mobile: border-right turns into
               border-bottom, per design system 6-3. */
            .trait {
                padding: 28px 24px 0 0;
                border-bottom: 0;
                border-right: 1px solid var(--dark-10);
            }
            .trait:last-child { border-right: 0; }
        }

        .trait h3 { margin-bottom: 12px; }

        .trait p {
            margin: 0;
            font-size: var(--fs-body);
            font-weight: 300;
            line-height: 1.8;
            text-wrap: pretty;
            color: var(--dark-60);
        }

        /* ---------- status line ---------- */

        .status {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 12px 32px;
            margin: 40px 0 0;
            padding-top: 24px;
            border-top: 1px solid var(--dark-15);
            font-size: var(--fs-label);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: var(--ls-label);
            color: var(--n-46);
        }

        .status a {
            display: inline-flex;
            align-items: center;
            min-height: 44px;
            color: var(--crimson);
            transition: color var(--dur) var(--ease);
        }

        .status a:hover { color: var(--crimson-dark); }

        .on-dark .status {
            border-top-color: var(--light-15);
            color: var(--light-55);
        }

        .on-dark .status a { color: var(--crimson-on-dark); }
        .on-dark .status a:hover { color: var(--white); }

        /* ---------- offices ---------- */

        .offices {
            display: grid;
            grid-template-columns: 1fr;
            gap: 40px;
        }

        @media (min-width: 768px) {
            .offices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
        }

        .office {
            padding-top: 24px;
            border-top: 1px solid var(--dark-15);
        }

        .office h3 { margin-bottom: 16px; }

        .office address {
            font-style: normal;
            font-size: var(--fs-body);
            font-weight: 300;
            line-height: 1.8;
            color: var(--dark-60);
        }

        .office a {
            display: inline-flex;
            align-items: center;
            min-height: 44px;
            font-weight: 700;
            color: var(--crimson);
            transition: color var(--dur) var(--ease);
        }

        .office a:hover { color: var(--crimson-dark); }

        .entity {
            margin: 40px 0 0;
            padding-top: 24px;
            border-top: 1px solid var(--dark-15);
            font-size: var(--fs-label);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: var(--ls-label);
            color: var(--n-46);
        }

        /* ---------- end card, black ---------- */

        .end {
            background: var(--black);
            color: var(--white);
            padding-top: var(--section-gap);
            padding-bottom: var(--section-gap);
        }

        .form {
            display: grid;
            gap: 32px;
            margin-top: 40px;
            max-width: 560px;
        }

        .field { display: grid; gap: 8px; }

        .field label {
            font-size: var(--fs-label);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: var(--ls-label);
            color: var(--light-55);
        }

        .field input,
        .field select,
        .field textarea {
            font-family: var(--font-base);
            font-size: var(--fs-body);
            font-weight: 300;
            line-height: 1.5;
            color: var(--white);
            background: transparent;
            border: 0;
            border-bottom: 1px solid var(--light-30);
            padding: 12px 0;
            min-height: 52px;
            appearance: none;
            transition: border-color var(--dur) var(--ease);
        }

        .field select { cursor: pointer; }
        .field select option { background: var(--n-2a); color: var(--white); }
        .field textarea { resize: vertical; min-height: 120px; line-height: 1.8; }

        .field input:focus,
        .field select:focus,
        .field textarea:focus {
            outline: none;
            border-bottom-color: var(--crimson-on-dark);
        }

        .honeypot {
            position: absolute;
            left: -9999px;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }

        .submit {
            justify-self: start;
            min-height: 52px;
            padding: 0 40px;
            border: 0;
            background: var(--crimson);
            color: var(--white);
            font-family: var(--font-base);
            font-size: var(--fs-label);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.24em;
            cursor: pointer;
            transition: background var(--dur) var(--ease);
        }

        .submit:hover:not(:disabled) { background: var(--crimson-dark); }

        /* Press feedback lands on pointer-down, not on release. */
        .submit:active:not(:disabled) {
            transform: scale(0.97);
            transition: transform 100ms ease-out;
        }

        .submit:disabled { background: var(--n-46); cursor: not-allowed; }

        .form-status {
            margin: 0;
            min-height: 24px;
            font-size: var(--fs-label);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: var(--ls-label);
            color: var(--light-55);
        }

        /* State carries a marker glyph as well as colour, so colour is never the
           only signal (1-6). */
        .form-status[data-state="error"] { color: var(--crimson-on-dark); }

        /* ---------- footer ---------- */

        .site-footer {
            background: var(--black);
            color: var(--light-55);
            padding-top: 32px;
            padding-bottom: 32px;
            border-top: 1px solid var(--light-15);
        }

        .site-footer .wrap {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 40px;
            justify-content: space-between;
            font-size: var(--fs-label);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: var(--ls-label);
        }

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

        .js .reveal {
            opacity: 0;
            transform: translateY(12px);
            transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
        }

        .js .reveal.is-visible { opacity: 1; transform: none; }

        @media print {
            .js .reveal { opacity: 1; transform: none; }
        }

        @media (prefers-contrast: more) {
            :root {
                --dark-60: rgba(0, 0, 0, 0.82);
                --dark-10: rgba(0, 0, 0, 0.3);
                --dark-15: rgba(0, 0, 0, 0.4);
                --light-55: rgba(255, 255, 255, 0.8);
                --light-60: rgba(255, 255, 255, 0.85);
                --light-15: rgba(255, 255, 255, 0.4);
                --light-30: rgba(255, 255, 255, 0.6);
            }
            .marquee-set img { opacity: 0.9; }
        }

        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            .js .reveal { opacity: 1; transform: none; }
            .marquee-track {
                animation: none;
                width: 100%;
                flex-wrap: wrap;
                justify-content: center;
            }
            .marquee-set:last-child { display: none; }
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                transition-duration: 0.01ms !important;
            }
        }

/* ==========================================================
   Multi-page shell: navigation, article pages, post lists
   ========================================================== */

/* ---------- site navigation ---------- */

.site-nav {
    background: var(--white);
    border-bottom: 1px solid var(--dark-10);
}

.site-nav .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter);
    padding-top: 20px;
    padding-bottom: 20px;
}

.site-nav .wordmark img {
    display: block;
    width: 144px;
    height: auto;
}

@media (max-width: 599px) {
    .site-nav .wordmark img { width: 116px; }
}

.site-nav nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 28px;
}

.site-nav nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    color: var(--n-46);
    transition: color var(--dur) var(--ease);
}

.site-nav nav a:hover { color: var(--black); }
.site-nav nav a[aria-current="page"] { color: var(--crimson); }

@media (max-width: 599px) {
    .site-nav .wrap { flex-direction: column; align-items: flex-start; gap: 8px; }
    .site-nav nav { gap: 0 20px; }
}

/* ---------- page head ---------- */

.page-head {
    padding-top: var(--section-gap);
    padding-bottom: 40px;
}

.page-head :is(h1, h2) {
    font-size: var(--fs-h1);
    letter-spacing: -0.032em;
    margin-top: 24px;
    max-width: 17ch;
}

.page-head .lead { margin-top: 32px; }

/* ---------- post list ---------- */

.posts {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--dark-15);
}

.posts li { border-bottom: 1px solid var(--dark-10); }

.posts a {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 32px 0;
    transition: opacity var(--dur) var(--ease);
}

.posts a:hover { opacity: 0.6; }

@media (min-width: 768px) {
    .posts a {
        grid-template-columns: 8.5rem 1fr;
        gap: var(--gutter);
        align-items: baseline;
    }
}

.posts time,
.posts .byline {
    font-size: var(--fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    color: var(--n-8a);
}

.posts h2 {
    font-size: var(--fs-h3);
    line-height: 1.25;
    margin: 0;
    max-width: 30ch;
}

.posts .byline { display: block; margin-top: 10px; }

/* ---------- article ---------- */

.article { padding-bottom: var(--section-gap); }

.article-head {
    padding-top: var(--section-gap);
    padding-bottom: 40px;
    border-bottom: 1px solid var(--dark-15);
}

.article-head h1 {
    font-size: var(--fs-h2);
    letter-spacing: -0.028em;
    line-height: 1.08;
    margin-top: 24px;
    max-width: 24ch;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    margin: 32px 0 0;
    font-size: var(--fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    color: var(--n-8a);
}

.prose {
    max-width: 62ch;
    margin-top: 48px;
}

.prose > * { margin: 0 0 1.4em; }
.prose > *:last-child { margin-bottom: 0; }

.prose p {
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: 1.8;
    color: var(--dark-80);
    text-wrap: pretty;
}

.prose h2 {
    font-size: var(--fs-h3);
    margin-top: 2.6em;
    margin-bottom: 0.8em;
    max-width: 26ch;
}

.prose h3 {
    font-size: var(--fs-body);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.5;
    margin-top: 2em;
    margin-bottom: 0.6em;
}

.prose strong { font-weight: 700; color: var(--black); }

.prose blockquote {
    margin: 2.4em 0;
    padding: 0 0 0 24px;
    border-left: 3px solid var(--crimson);
    font-size: var(--fs-lead);
    font-weight: 300;
    line-height: 1.55;
    color: var(--black);
}

.prose blockquote p { font-size: inherit; line-height: inherit; color: inherit; }

.prose ul, .prose ol { padding-left: 1.3em; }

.prose li {
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: 1.8;
    color: var(--dark-80);
    margin-bottom: 0.5em;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 2.4em 0;
    font-size: var(--fs-body);
}

.prose thead th {
    background: var(--black);
    color: var(--white);
    font-size: var(--fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    text-align: left;
    padding: 14px 16px;
}

.prose tbody td {
    padding: 16px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--dark-80);
    border-bottom: 1px solid var(--dark-10);
    vertical-align: top;
}

.prose tbody tr td:first-child { font-weight: 700; color: var(--black); }

/* A table wide enough to overflow scrolls inside itself, never the page. */
.scroller { overflow-x: auto; margin: 2.4em 0; }
.scroller table { margin: 0; }

/* ---------- figures ---------- */

.fig {
    margin: 3em 0;
    max-width: 100%;
}

.fig svg { display: block; width: 100%; height: auto; }

.fig img { display: block; width: 100%; height: auto; }

.fig figcaption {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--dark-10);
    font-size: var(--fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    color: var(--n-46);
}

/* Figures stay inside the prose measure. Diagrams are drawn tall rather than
   wide so their labels stay readable at this column width. */

/* ---------- status pill ---------- */

.tag {
    display: inline-block;
    font-size: var(--fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    padding: 5px 10px;
    border: 1px solid currentColor;
    color: var(--n-46);
}

.tag.is-built { color: var(--crimson); }

/* ---------- routes (join page) ---------- */

.routes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--dark-15);
    margin-top: 40px;
}

.route { padding: 32px 0; border-bottom: 1px solid var(--dark-10); }

.route h2 { font-size: var(--fs-h3); margin-bottom: 12px; }

.route p {
    margin: 0;
    max-width: 58ch;
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: 1.8;
    color: var(--dark-60);
    text-wrap: pretty;
}

@media (min-width: 900px) {
    .route {
        display: grid;
        grid-template-columns: 20rem 1fr;
        gap: var(--gutter);
        align-items: start;
    }
    .route h2 { margin-bottom: 0; }
}

/* ---------- page footer ---------- */

.page-foot {
    border-top: 1px solid var(--dark-15);
    padding-top: 40px;
    padding-bottom: var(--section-gap);
}

.page-foot a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    color: var(--crimson);
    transition: color var(--dur) var(--ease);
}

.page-foot a:hover { color: var(--crimson-dark); }

/* ---------- inline diagrams ----------
   Diagrams are hand drawn SVG rather than generated images: they carry labels
   and exact relationships, and they stay crisp and on-palette at any size.
   Colours come from the tokens above, never from attributes on the shapes. */

.dg { font-family: var(--font-base); }
.dg-box { fill: none; stroke: var(--dark-15); stroke-width: 1; }
.dg-box-fill { fill: var(--n-f7); stroke: var(--dark-15); stroke-width: 1; }
.dg-box-dark { fill: var(--black); stroke: var(--black); }
.dg-line { stroke: var(--dark-15); stroke-width: 1; fill: none; }
.dg-line-soft { stroke: var(--dark-10); stroke-width: 1; fill: none; stroke-dasharray: 3 4; }
.dg-line-key { stroke: var(--crimson); stroke-width: 2; fill: none; }
.dg-mark { fill: var(--dark-15); }
.dg-mark-key { fill: var(--crimson); }

.dg-t { fill: var(--dark-80); font-size: 13px; font-weight: 700; }
.dg-p { fill: var(--dark-60); font-size: 12px; font-weight: 300; }
.dg-s { fill: var(--n-8a); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; }
.dg-k { fill: var(--crimson); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; }
.dg-w { fill: var(--white); font-size: 12px; font-weight: 700; }

/* The wordmark link needs its own tap height: the image alone is under 44px. */
.site-nav .wordmark {
    display: flex;
    align-items: center;
    min-height: 44px;
}

.site-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--crimson-on-dark);
    transition: color var(--dur) var(--ease);
}

.site-footer a:hover { color: var(--white); }

/* ---------- about: pillars, team, facts ---------- */

.pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--dark-15);
    margin-top: 40px;
}

.pillar { padding: 32px 0; border-bottom: 1px solid var(--dark-10); }

.pillar h3 { margin-bottom: 12px; }

.pillar p {
    margin: 0;
    max-width: 58ch;
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: 1.8;
    color: var(--dark-60);
    text-wrap: pretty;
}

@media (min-width: 900px) {
    .pillar {
        display: grid;
        grid-template-columns: 18rem 1fr;
        gap: var(--gutter);
        align-items: start;
    }
    .pillar h3 { margin-bottom: 0; }
}

.figures {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 40px;
}

@media (min-width: 768px) {
    .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
}

.figure { padding-top: 20px; border-top: 1px solid var(--dark-15); }

.figure b {
    display: block;
    font-weight: 100;          /* Hairline, reserved for large numerals */
    font-size: var(--fs-figure);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--crimson);
}

.figure span {
    display: block;
    margin-top: 12px;
    font-size: var(--fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    color: var(--n-46);
}

.figure em {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: 1.6;
    color: var(--dark-60);
    max-width: 34ch;
}

.people {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--dark-15);
    margin-top: 40px;
}

@media (min-width: 768px) {
    .people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); }
}

@media (min-width: 1100px) {
    .people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.person { padding: 28px 0; border-bottom: 1px solid var(--dark-10); }

.person h3 { margin-bottom: 6px; }

.person .role {
    display: block;
    font-size: var(--fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    color: var(--crimson);
    margin-bottom: 14px;
}

.person p {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: 1.7;
    color: var(--dark-60);
    max-width: 40ch;
    text-wrap: pretty;
}

/* ---------- head with a figure alongside ---------- */

@media (min-width: 1024px) {
    .head-grid {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--gutter);
        align-items: center;
    }
    .head-grid > .head-text { grid-column: 1; }
    .head-grid > .head-figure { grid-column: 2; }
}

.head-figure { margin-top: 48px; }

@media (min-width: 1024px) {
    .head-figure { margin-top: 0; }
}

.head-figure svg { display: block; width: 100%; height: auto; }

/* ---------- section with a figure alongside ---------- */

@media (min-width: 1024px) {
    .split {
        display: grid;
        grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
        gap: calc(var(--gutter) * 2);
        align-items: start;
    }
}

.split-figure { margin-top: 40px; }

@media (min-width: 1024px) {
    .split-figure { margin-top: 0; position: sticky; top: 96px; }
}

.split-figure svg { display: block; width: 100%; height: auto; }

/* ---------- draw-on-scroll ----------
   Geometry is stroked in as the figure passes through the viewport and the
   labels fade behind it. Only stroke-dashoffset and opacity move, both of
   which the compositor handles. */

.fig-draw [data-draw] {
    stroke-dashoffset: var(--dash, 0);
}

.fig-draw text,
.fig-draw [data-fade] {
    opacity: var(--fade, 1);
    transition: opacity var(--dur) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
    .fig-draw [data-draw] { stroke-dashoffset: 0 !important; }
    .fig-draw text,
    .fig-draw [data-fade] { opacity: 1 !important; }
}

/* ==========================================================
   Mobile
   The phone is not a narrow desktop. Below 900px the menu
   collapses behind a control, dense tables become stacked
   blocks, and the widest diagrams step aside.
   ========================================================== */

.nav-toggle {
    display: none;
    align-items: center;
    min-height: 44px;
    padding: 0 2px;
    border: 0;
    background: transparent;
    font-family: var(--font-base);
    font-size: var(--fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    color: var(--black);
    cursor: pointer;
}

.on-dark .nav-toggle { color: var(--white); }

@media (max-width: 899px) {
    .nav-toggle { display: inline-flex; }

    /* The menu becomes a full sheet. Nothing behind it competes for the eye. */
    .site-nav nav,
    .cover-nav {
        position: fixed;
        inset: 0;
        z-index: 90;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0;
        padding: 0 var(--pad);
        background: var(--black);
        visibility: hidden;
        opacity: 0;
        transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
    }

    .site-nav nav[data-open="true"],
    .cover-nav[data-open="true"] { visibility: visible; opacity: 1; }

    .site-nav nav a,
    .cover-nav a {
        min-height: 64px;
        font-size: var(--fs-h3);
        font-weight: 900;
        letter-spacing: -0.02em;
        text-transform: none;
        color: var(--white);
        border-bottom: 1px solid var(--light-15);
    }

    .site-nav nav a[aria-current="page"],
    .cover-nav a[aria-current="page"] { color: var(--crimson-on-dark); }

    .site-nav nav a:last-child,
    .cover-nav a:last-child { border-bottom: 0; }

    /* The control has to sit above the sheet to close it again. */
    .nav-toggle { position: relative; z-index: 95; }
    body[data-menu="open"] .nav-toggle { color: var(--white); }
    body[data-menu="open"] { overflow: hidden; }

    /* The wordmark stays visible and legible over the open sheet. */
    body[data-menu="open"] .site-nav .wordmark img { filter: none; }
}

/* ---------- mobile: tables become blocks ---------- */

@media (max-width: 767px) {
    .scroller { overflow: visible; }

    .prose table,
    .prose thead,
    .prose tbody,
    .prose tr,
    .prose td { display: block; width: 100%; }

    .prose thead { display: none; }

    .prose tbody tr {
        padding: 20px 0;
        border-bottom: 1px solid var(--dark-10);
    }

    .prose tbody tr:first-child { border-top: 1px solid var(--dark-15); }

    .prose tbody td {
        padding: 0;
        border: 0;
    }

    .prose tbody tr td:first-child {
        font-size: var(--fs-label);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: var(--ls-label);
        color: var(--crimson);
        margin-bottom: 8px;
    }
}

/* ---------- mobile: what steps aside ----------
   Wide diagrams and the second copy column carry detail the phone does not
   need. They stay in the markup for crawlers and desktop; the phone gets the
   argument without the apparatus. */

@media (max-width: 899px) {
    .hide-sm { display: none; }
}

@media (max-width: 767px) {
    .marquee-set { gap: 40px; padding: 28px 24px 28px 0; }
    .posts a { padding: 24px 0; }
    .person { padding: 22px 0; }
    .route, .pillar { padding: 24px 0; }
}

/* Diagram labels are sized in viewBox units, so raising them on small screens
   enlarges the type relative to the drawing rather than the whole figure. */
@media (max-width: 899px) {
    .dg-t { font-size: 19px; }
    .dg-p { font-size: 17px; }
    .dg-s, .dg-k { font-size: 14px; letter-spacing: 0.1em; }
    .dg-w { font-size: 18px; }
}

/* ==========================================================
   Pointer feedback
   Every interactive element answers the pointer. The motion is
   small and it settles: a hairline that draws, a row that steps
   aside, a mark that arrives. Nothing loops, nothing decorates.
   ========================================================== */

/* ---------- navigation ---------- */

@media (min-width: 900px) {
    .site-nav nav a,
    .cover-nav a { position: relative; }

    .site-nav nav a::after,
    .cover-nav a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 8px;
        height: 1px;
        background: var(--crimson);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform var(--dur) var(--ease-spring);
    }

    .cover-nav a::after { background: var(--crimson-on-dark); }

    .site-nav nav a:hover::after,
    .cover-nav a:hover::after { transform: scaleX(1); }

    .site-nav nav a[aria-current="page"]::after { transform: scaleX(1); }
}

/* ---------- post and news rows ---------- */

.posts h2 { position: relative; display: inline-block; }

.posts h2::after {
    content: "\2192";
    position: absolute;
    left: calc(100% + 0.4em);
    top: 0;
    color: var(--crimson);
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-spring);
}

.posts a > div { transition: transform var(--dur) var(--ease-spring); }

.posts a:hover { opacity: 1; }
.posts a:hover > div { transform: translateX(8px); }
.posts a:hover h2::after,
.posts a:focus-visible h2::after { opacity: 1; transform: translateX(0); }

/* ---------- blocks that answer ---------- */

.route,
.person,
.pillar,
.rows li { position: relative; }

.route::after,
.person::after,
.pillar::after,
.rows li::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--crimson);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s var(--ease-spring);
}

.route:hover::after,
.person:hover::after,
.pillar:hover::after,
.rows li:hover::after { transform: scaleX(1); }

/* ---------- inline links ---------- */

.office a,
.status a,
.page-foot a,
.site-footer a { transition: color var(--dur) var(--ease), transform var(--dur) var(--ease-spring); }

.office a:hover,
.status a:hover,
.page-foot a:hover,
.site-footer a:hover { transform: translateX(4px); }

/* ---------- partner marks ---------- */

.marquee-set img { transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-spring); }
.marquee-set li:hover img { opacity: 1; transform: scale(1.07); }

/* ---------- press ---------- */

.submit,
.cta { transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform 0.18s var(--ease-spring); }

.submit:active:not(:disabled),
.cta:active { transform: scale(0.96); }

/* ---------- fields ---------- */

.field { position: relative; }

.field input,
.field select,
.field textarea { transition: border-color var(--dur) var(--ease); }

.field::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--crimson-on-dark);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur) var(--ease-spring);
    pointer-events: none;
}

.field:focus-within::after { transform: scaleX(1); }

/* The pointer never gets to move anything for a reader who asked it not to. */
@media (prefers-reduced-motion: reduce) {
    .posts a:hover > div,
    .office a:hover,
    .status a:hover,
    .page-foot a:hover,
    .site-footer a:hover,
    .marquee-set li:hover img,
    .submit:active,
    .cta:active { transform: none !important; }
}

/* ==========================================================
   Data figures
   Charts, bars and timelines. Rendering follows the design
   system's chart rules: hairline axes, horizontal gridlines
   only where they earn it, square legend marks, no rounded
   ends, no shadows, no gradients, no third dimension.
   Categorical order is crimson first, then the neutral ramp,
   so a chart stays readable in greyscale and to a reader who
   does not separate reds.
   ========================================================== */

.fig-draw [data-grow] {
    transform: scale(var(--grow, 1));
    transform-origin: var(--grow-from, left center);
}

.fig-draw [data-grow="bar"],
.fig-draw .ch-bar { --grow-from: left center; }

/* ---------- chart frame ---------- */

.chart { margin: 3em 0; }

.chart svg { display: block; width: 100%; height: auto; }

.chart figcaption {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--dark-10);
    font-size: var(--fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    color: var(--n-46);
}

.ch-axis { stroke: var(--dark-15); stroke-width: 1; fill: none; }
.ch-grid { stroke: rgba(0, 0, 0, 0.06); stroke-width: 1; fill: none; }

.ch-bar { fill: var(--n-8a); }
.ch-bar-1 { fill: var(--crimson); }
.ch-bar-2 { fill: var(--n-2a); }
.ch-bar-3 { fill: var(--n-8a); }
.ch-bar-4 { fill: var(--n-c4); }
.ch-bar-5 { fill: var(--n-e7); }

.ch-line { fill: none; stroke: var(--crimson); stroke-width: 2; }
.ch-line-2 { stroke: var(--n-2a); stroke-dasharray: 6 4; }
.ch-line-3 { stroke: var(--n-8a); stroke-dasharray: 2 4; }

.ch-value {
    fill: var(--dark-60);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.ch-tick {
    fill: rgba(0, 0, 0, 0.4);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.ch-key { fill: var(--crimson); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; }

/* Legend marks are squares. A circle would be the only round thing here. */
.ch-legend-mark { width: 10px; height: 10px; }

/* ---------- timeline ---------- */

.timeline,
.prose .timeline {
    list-style: none;
    margin: 40px 0 0;
    padding: 0;
    max-width: none;
    border-top: 1px solid var(--dark-15);
}

/* Inside prose the generic list rules would indent and re-space these. */
.prose .timeline li {
    margin-bottom: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.timeline li {
    position: relative;
    padding: 24px 0 24px 0;
    border-bottom: 1px solid var(--dark-10);
}

@media (min-width: 768px) {
    .timeline li {
        display: grid;
        grid-template-columns: 11rem 1fr;
        gap: var(--gutter);
        align-items: baseline;
    }
}

.timeline time {
    font-size: var(--fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    color: var(--n-8a);
}

.timeline h3 { margin: 8px 0 6px; }

@media (min-width: 768px) {
    .timeline h3 { margin-top: 0; }
}

.timeline p {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: 1.7;
    color: var(--dark-60);
    max-width: 52ch;
    text-wrap: pretty;
}

/* The rule under a passed milestone fills in as it scrolls by. */
.timeline li::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--crimson);
    transform: scaleX(var(--grow, 0));
    transform-origin: left center;
}

.timeline li[data-state="now"] time { color: var(--crimson); }

/* ---------- counted figures ---------- */

.figure b[data-count] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    .fig-draw [data-grow] { transform: none; }
    .timeline li::after { transform: scaleX(1); }
}