/* 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: cubic-bezier(0, 0, 0.3642, 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 h1 {
    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; }
}