/* /what-we-do — three movements and a boundary.
   Loaded after ergodic-page.css, which remains the token source.

   The hero is the shared template's, unchanged: full-width navy, its own
   measure. Everything under it is composed around the walker rather than
   stacked above and below it.

   There is no closing band and no second conclusion, because the page ends
   once. Who We Are and the legal pages keep the document rhythm; this page has
   one object and is laid out around it. The topbar, typefaces, palette, lattice
   and footer are what make them the same site. */

.wd-page {
    /* The copy measure, matching the hero so the left edges agree. */
    --copy: 940px;

    /* Vertical rhythm scales with the viewport, with floors so it never becomes
       cramped. The figure is never scaled to make the page fit: if the closing
       sentence falls below the fold on a short laptop, that is the better
       trade. */
    --step: clamp(34px, 5vh, 58px);

    /* Space between the figure and the sentence that closes the page. */
    --settle: clamp(56px, 8.5vh, 104px);

    /* Minimum breathing room above and below the composition, used when the
       viewport is too short for it to be centred. */
    --drop: clamp(46px, 7vh, 88px);
}

/* The composition is centred in whatever space is left between the hero and the
   footer, rather than starting under the hero and leaving the remainder empty.
   The page ends where the content ends; this is what stops that reading as
   unfinished.

   Biased slightly above centre — the extra padding below — because optical
   centre sits a little above geometric centre, and because the eye is arriving
   from the hero rather than from the middle of the page.

   `safe center` matters: on a viewport too short to hold the composition, plain
   centring would push the top of it out of reach above the scroll origin. */
.wd-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: safe center;
    padding-top: var(--drop);
    padding-bottom: calc(var(--drop) * 1.7);
}

/* ---------- One line ---------- */

/* The answer to the hero, and deliberately quieter than it. The hero owns the
   thesis; this is the response, not a second headline. It sits close to the
   figure because it introduces it. */
.wd-lead {
    width: 100%;
    max-width: var(--copy);
    margin: 0 auto;
    padding: 0 32px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(18px, 1.8vw, 23px);
    line-height: 1.35;
    color: var(--ink-soft);
}

/* ---------- The figure ---------- */

/* Near full width. It is the centre of the page, so it should take the page.
   Square corners, one hairline, no shadow: a diagram the page is built around,
   not a card set into it. */
.wd-figure {
    width: 100%;
    max-width: 1560px;
    margin: 24px auto 0;
    background: var(--paper-raised);
    border: 1px solid var(--hairline);
}

/* The two directions, at the two ends of the object. The same four principles
   apply travelling either way, which is the reason these belong on this figure
   rather than in a card of their own above it.

   The rule beneath them matters: it makes this a header band of the object
   rather than two labels sitting at the ends of the track. Externally and
   Internally are not the start and finish of a process, and the walker must not
   be read as travelling from one to the other. */
.wd-directions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    padding: 26px 30px 22px;
    border-bottom: 1px solid var(--hairline);
}

.wd-direction--right {
    text-align: right;
}

.wd-direction-label {
    margin: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
}

.wd-direction h2 {
    margin: 11px 0 0;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.34;
    color: var(--ink);
}

.wd-direction-meta {
    margin: 10px 0 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-soft);
    opacity: .8;
}

    .wd-direction-meta a {
        color: var(--accent);
        text-decoration: none;
        border-bottom: 1px solid transparent;
        transition: border-color .25s var(--ease);
    }

        .wd-direction-meta a:hover {
            border-bottom-color: var(--accent);
        }

.wd-band {
    display: block;
    width: 100%;
    /* Height is set by the script from configuration. This is only the
       pre-paint reservation, so the page does not jump. */
    height: 236px;
}

/* ---------- The four principles ---------- */

.wd-principles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--hairline);
}

.wd-principle {
    padding: 20px 26px 22px;
    border-left: 1px solid var(--hairline);
    transition: background .5s var(--ease);
}

    .wd-principle:first-child {
        border-left: none;
    }

    .wd-principle h3 {
        margin: 0;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--ink-soft);
        transition: color .45s var(--ease);
    }

    .wd-principle p {
        margin: 11px 0 0;
        font-family: 'Inter', sans-serif;
        font-size: 13.5px;
        line-height: 1.62;
        color: var(--ink-soft);
        opacity: .5;
        transition: opacity .45s var(--ease);
    }

    /* A principle lights as the walker reaches its station and stays lit,
       including through the return pass. Nothing is taken back. */
    .wd-principle.is-reached h3 {
        color: var(--accent);
    }

    .wd-principle.is-reached p {
        opacity: 1;
    }

    /* The station the walker is standing at. Cleared when the journey ends, so
       the figure at rest shows four principles gained and none singled out. */
    .wd-principle.is-current {
        background: rgba(0,153,255,.04);
    }

/* Without the script the four principles simply read as they always did. */
.wd-figure:not(:has(canvas)) .wd-principle h3 {
    color: var(--accent);
}

.wd-figure:not(:has(canvas)) .wd-principle p {
    opacity: 1;
}

/* ---------- Boundary ---------- */

/* Where the company's role ends. One sentence, no eyebrow, no heading, no
   band: it is the last thing said and then the page is over. */
.wd-close {
    width: 100%;
    max-width: var(--copy);
    margin: var(--settle) auto 0;
    padding: 0 32px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(17px, 1.7vw, 21px);
    line-height: 1.55;
    color: var(--ink-soft);
}

/* ---------- Responsive ---------- */

@media (max-width: 1640px) {
    .wd-figure {
        width: calc(100% - 64px);
    }
}

/* Below this the four columns can no longer sit under their stations, so the
   guides stop lining up with anything. The band still reads as a journey left
   to right and the principles read as a list. */
@media (max-width: 900px) {
    .wd-principles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wd-principle:nth-child(3) {
        border-left: none;
    }

    .wd-principle:nth-child(n+3) {
        border-top: 1px solid var(--hairline);
    }

    .wd-band {
        height: 190px;
    }
}

@media (max-width: 640px) {
    .wd-figure {
        width: calc(100% - 40px);
    }

    .wd-lead,
    .wd-close {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* At this width the two directions stack, so the right-hand one is no
       longer at an end of anything. */
    .wd-directions {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 22px 22px 20px;
    }

    .wd-direction--right {
        text-align: left;
        padding-top: 20px;
        border-top: 1px solid var(--hairline);
    }

    .wd-principles {
        grid-template-columns: 1fr;
    }

    .wd-principle {
        border-left: none;
        border-top: 1px solid var(--hairline);
    }

        .wd-principle:first-child {
            border-top: none;
        }

    .wd-band {
        height: 160px;
    }
}

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

/* The figure paints its destination in a single frame: the lattice taken to the
   right of structure, history kept past continuity, threads drawn, arrivals
   landed, all four columns lit. It says the same thing; it simply does not
   travel. Handled in ergodic-journey.js — this note is here so the intent is
   findable from the CSS. */

/* ---------- Tuning panel ---------- */

/* Duplicated from ergodic-field.css rather than shared. That file belongs to
   the locked home page; this page loads neither it nor its script, and a
   dev-only block is a cheaper thing to repeat than a dependency between two
   figures that are otherwise independent. */

.tuner-toggle,
.tuner {
    position: fixed;
    right: 16px;
    bottom: 24px;
    z-index: 40;
    font-family: 'IBM Plex Mono', monospace;
}

.tuner-toggle {
    appearance: none;
    padding: 7px 13px;
    background: rgba(8, 17, 31, .82);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 3px;
    color: #8fa3bb;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

    .tuner-toggle:hover {
        color: var(--accent);
        border-color: rgba(0, 153, 255, .45);
    }

.tuner {
    width: 292px;
    max-height: 78vh;
    overflow-y: auto;
    padding: 13px 15px 15px;
    background: rgba(8, 17, 31, .93);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 4px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #8fa3bb;
    font-size: 11px;
}

.tuner[hidden] {
    display: none;
}

.tuner-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 10px;
    color: #6b7f99;
    padding-bottom: 9px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.tuner-close {
    appearance: none;
    background: none;
    border: none;
    color: #6b7f99;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

    .tuner-close:hover {
        color: var(--accent);
    }

.tuner-row {
    display: grid;
    grid-template-columns: 74px 1fr 40px;
    align-items: center;
    gap: 9px;
    margin-bottom: 7px;
}

/* The scrubber moves the walker rather than changing how it looks, so it reads
   first and it reads differently. */
.tuner-scrub {
    padding-bottom: 9px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.tuner-label {
    font-size: 10px;
    letter-spacing: .05em;
    color: #6b7f99;
}

.tuner-value {
    font-size: 10px;
    text-align: right;
    color: var(--accent);
}

.tuner-row input[type=range] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, .16);
    border-radius: 2px;
    outline: none;
}

    .tuner-row input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: var(--accent);
        cursor: pointer;
    }

    .tuner-row input[type=range]::-moz-range-thumb {
        width: 11px;
        height: 11px;
        border: none;
        border-radius: 50%;
        background: var(--accent);
        cursor: pointer;
    }

.tuner-actions {
    display: flex;
    gap: 7px;
    margin-top: 11px;
}

    .tuner-actions button {
        appearance: none;
        flex: 1;
        padding: 6px 8px;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 3px;
        color: #8fa3bb;
        font-family: inherit;
        font-size: 9.5px;
        letter-spacing: .08em;
        text-transform: uppercase;
        cursor: pointer;
    }

        .tuner-actions button:hover {
            color: var(--accent);
            border-color: rgba(0, 153, 255, .45);
        }

.tuner-out {
    width: 100%;
    height: 96px;
    margin-top: 10px;
    padding: 8px;
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 3px;
    color: #8fa3bb;
    font-family: inherit;
    font-size: 9.5px;
    line-height: 1.5;
    resize: vertical;
}

@media (max-width: 640px) {
    .tuner,
    .tuner-toggle {
        display: none;
    }
}