/* /who-we-are — provenance and people.
   Loaded after ergodic-page.css, which remains the token source and supplies
   the hero and the identicon marks.

   The quiet page. It has no figure: the walker belongs to What We Do because it
   demonstrates something there, and a second one here would turn the lattice
   from a piece of meaning into a motif. This page is still, and that stillness
   says something true about a company of three people.

   It does not try to fill the viewport either. The composition is centred in
   the space it has rather than stretched to occupy it. */

.wa-page {
    /* Matches the hero, so the left edges agree all the way down. */
    --copy: 940px;

    --drop: clamp(46px, 7vh, 88px);
    --gap: clamp(38px, 5.5vh, 62px);
}

/* Centred between the hero and the footer, biased slightly high. `safe center`
   rather than plain centring: on a viewport too short to hold the composition,
   plain centring would push its top above the scroll origin and out of reach. */
.wa-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.6);
}

.wa-provenance,
.wa-people,
.wa-close {
    width: 100%;
    max-width: var(--copy);
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px;
}

/* ---------- Provenance ---------- */

/* The strongest thing this page has to say, said at the size it deserves. It
   was previously body copy under the hero, which made it read as an aside. */
.wa-provenance h2 {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.28;
    color: var(--ink);
}

.wa-provenance p {
    margin: 18px 0 0;
    max-width: 660px;
    font-family: 'Inter', sans-serif;
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--ink-soft);
}

/* ---------- People ---------- */

.wa-people {
    margin-top: var(--gap);
    padding-top: calc(var(--gap) * 0.62);
    border-top: 1px solid var(--hairline);
}

.wa-group + .wa-group {
    margin-top: calc(var(--gap) * 0.85);
}

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

/* One, then two. A composition, not an organisation chart — the arrangement
   carries no hierarchy beyond the labels. */
.wa-members {
    display: grid;
    gap: 34px;
}

.wa-group--split .wa-members {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Names align with the label above them. The gap exists only when there is a
   mark to separate — otherwise an empty slot indents every name away from its
   own heading and the section stops reading as editorial. */
.wa-person {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

    .wa-person:has(.pg-person-mark) {
        gap: 18px;
    }

.wa-person-body {
    min-width: 0;
}

.wa-person-name {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--ink);
}

.wa-person-line {
    margin: 7px 0 0;
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--ink-soft);
}

/* ---------- Closing ---------- */

/* The conclusion of the page, given the weight of one. It was previously the
   same size as a bio line, which made it read as a caption. */
.wa-close {
    margin-top: var(--gap);
    padding-top: calc(var(--gap) * 0.55);
    border-top: 1px solid var(--hairline);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(18px, 1.9vw, 23px);
    line-height: 1.4;
    color: var(--ink);
}

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

@media (max-width: 760px) {
    .wa-group--split .wa-members {
        grid-template-columns: 1fr;
        gap: 26px;
    }
}

@media (max-width: 640px) {
    .wa-provenance,
    .wa-people,
    .wa-close {
        padding-left: 20px;
        padding-right: 20px;
    }
}