/* ==========================================================================
   about — page-specific layout
   Built against design-output/about/full-page.png and the section captures.
   Header, footer, buttons, pills, CTA banner, FAQ, spine and dividers are
   shared and live in global.css.

   The page is framed: a pair of hairlines on the gutter runs from under the
   bar down through the hero, the founder band and the vetting strip, breaks
   for the team head, and resumes for the team row. Each section carries its
   own pair, so the breaks are declared rather than patched over.

   Class names are this page's own. global.css also carries an earlier
   .hero / .founder-note / .vetting / .team-member set from the scaffolding
   pass; nothing renders it now, and it is left untouched.
   ========================================================================== */

/* ── Section 1 — Hero ───────────────────────────────────────────────────── */

/* The rule under the bar runs the width of the page; the side rules stop on
   the gutter, which is why they sit on different elements. */
.about-hero {
    border-top: 1px solid var(--border-color);
    background: var(--bg-primary);
}

/* Headline and claim share one row, so `end` closes the claim level with the
   last line of the headline. The call drops to a row of its own underneath,
   which keeps it out of that alignment. */
.about-hero__inner {
    display: grid;
    grid-template-columns: 1fr 430px;
    align-items: end;
    width: calc(100% - var(--gutter) * 2);
    max-width: calc(var(--container) - var(--gutter) * 2);
    margin-inline: auto;
    padding: var(--s-10) var(--s-7);
    border-inline: 1px solid var(--border-color);
}

/* 64px at the 1440 design width, held to the width that breaks it into the
   reference's three lines rather than by hard <br>s. */
.about-hero__title {
    grid-column: 1;
    grid-row: 1;
    max-width: 660px;
    font-family: var(--font-serif);
    font-size: clamp(36px, 4.45vw, 64px);
    font-weight: var(--w-regular);
    line-height: var(--lh-tight);
}

.about-hero__claim {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--t-xl);
    line-height: 1.15;
    color: rgba(90, 90, 90, 0.8);
}

.about-hero__cta {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    margin-top: 28px;
}

/* ── Section 2 — Founder note ───────────────────────────────────────────── */

.founder {
    background: var(--bg-primary);
}

/* The artwork fills the ruled column and the note floats centred on it. The
   picture is a layer of its own rather than a background so it can be sized
   and lazy-loaded like any other image. */
.founder__band {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: calc(100% - var(--gutter) * 2);
    max-width: calc(var(--container) - var(--gutter) * 2);
    min-height: 869px;
    margin-inline: auto;
    padding: var(--s-7);
    border-inline: 1px solid var(--border-color);
    /* Shows while the halftone decodes, and behind it if it fails to load */
    background: var(--c-ink-warm);
}

.founder__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.founder__card {
    display: flex;
    flex-direction: column;
    width: min(639px, 100%);
    min-height: 672px;
    padding: var(--s-7);
    border-radius: var(--r-lg);
    background: var(--bg-primary);
}

.founder__title {
    margin-bottom: var(--s-5);
    font-family: var(--font-serif);
    font-size: var(--t-3xl);
    font-weight: var(--w-regular);
}

/* The reset zeroes p margins, so the note sets its own 24px rhythm: one
   blank line between paragraphs, as on the source. */
.founder__body + .founder__body {
    margin-top: var(--s-5);
}

/* 20/24: the note sits on a 24px line, which is what puts its paragraphs on
   the 48px pitch the capture shows. */
.founder__body {
    font-size: var(--t-lg);
    line-height: 1.2;
}

/* Pinned to the foot of the card, which is what leaves the open space above
   it at the design height. */
.founder__sign {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: auto;
    padding-top: var(--s-7);
    font-family: var(--font-serif);
    font-size: var(--t-xl);
}

/* The B mark alone, from the brand pack's icon file. Its own asset now, rather
   than the left end of the wordmark cropped by the box width — so the height
   below is the only thing setting its size, and the width just follows the
   artwork's 0.8306:1 ratio. Still a mask, so it takes currentColor. */
.founder__mark {
    flex: 0 0 auto;
    width: 12.5px;
    height: 15px;
    background-color: currentColor;
    -webkit-mask: url("../assets/images/logo-icon.png") no-repeat left center / contain;
            mask: url("../assets/images/logo-icon.png") no-repeat left center / contain;
}

/* ── Section 3 — Vetting process ────────────────────────────────────────── */

/* Two page-wide rules close the section: one under the founder band, one
   under the stages. */
.stages {
    border-block: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.stages__head {
    border-bottom: 1px solid var(--border-color);
}

/* 20px in from the side rules here, not the 40px the hero uses. */
.stages__head-inner {
    width: calc(100% - var(--gutter) * 2);
    max-width: calc(var(--container) - var(--gutter) * 2);
    margin-inline: auto;
    padding: var(--s-10) 20px var(--s-8);
    border-inline: 1px solid var(--border-color);
}

/* The call sits out on the right, on the baseline of the title. */
.stages__head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-7);
    margin-top: var(--s-4);
}

.stages__title {
    font-family: var(--font-serif);
    font-size: clamp(28px, 3.6vw, 48px);
    font-weight: var(--w-regular);
    line-height: 1.1;
}

.stages__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: calc(100% - var(--gutter) * 2);
    max-width: calc(var(--container) - var(--gutter) * 2);
    margin: 0 auto;
    padding: 0;
    list-style: none;
    border-inline: 1px solid var(--border-color);
}

/* The number opens the cell and the label closes it, with the free height
   between them. Alternate cells carry a ground, so the four read as panels. */
.stage {
    display: flex;
    flex-direction: column;
    min-height: 376px;
    padding: var(--s-5);
}

.stage + .stage {
    border-left: 1px solid var(--border-color);
}

.stage:nth-child(odd) {
    background: var(--c-bone-mid);
}

.stage__num {
    font-family: var(--font-serif);
    font-size: clamp(32px, 3.6vw, 48px);
    line-height: 1.1;
}

.stage__label {
    margin-top: auto;
    font-family: var(--font-serif);
    font-size: var(--t-xl);
    line-height: 1.1;
}

/* ── Section 4 — Team head ──────────────────────────────────────────────── */

/* The one band with no side rules: it sits on the page gutter instead. */
.team-head {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--s-10) var(--gutter) var(--s-8);
    border-bottom: 1px solid var(--border-color);
}

.team-head__title {
    margin-top: var(--s-4);
    font-family: var(--font-serif);
    font-size: clamp(28px, 3.6vw, 48px);
    font-weight: var(--w-regular);
    line-height: 1.1;
}

/* ── Section 5 — Team ───────────────────────────────────────────────────── */

.team-row {
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
}

/* The side rules clip the track, so a card runs under them rather than
   stopping short of the gutter. */
.team-row__viewport {
    width: calc(100% - var(--gutter) * 2);
    max-width: calc(var(--container) - var(--gutter) * 2);
    margin-inline: auto;
    padding-block: var(--s-7);
    overflow: hidden;
    border-inline: 1px solid var(--border-color);
}

/* Eight cards — the four people twice — so one pass of translate(-50%)
   returns the track to its starting frame. The leading pad matches the gap:
   without it the seam gap has no counterpart on the other half and the loop
   jumps by one gap on every pass. */
.team-track {
    display: flex;
    gap: 22px;
    width: max-content;
    margin: 0;
    padding: 0 0 0 22px;
    list-style: none;
    animation: team-scroll 55s linear infinite;
}

.team-card {
    flex: 0 0 336px;
    overflow: hidden;
    border-radius: var(--r-sm);
    background: var(--c-bone-mid);
}

.team-card__photo {
    display: block;
    width: 100%;
    height: 337px;
    object-fit: cover;
}

.team-card__foot {
    padding: var(--s-4) var(--s-4) var(--s-5);
}

.team-card__name {
    font-size: var(--t-xl);
    line-height: 1.1;
}

.team-card__role {
    margin-top: var(--s-2);
    font-family: var(--font-serif);
    font-size: var(--t-base);
    line-height: 1.1;
    color: var(--text-muted);
}

@keyframes team-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Honour a reduced-motion preference: the team still reads, it just sits */
@media (prefers-reduced-motion: reduce) {
    .team-track {
        animation: none;
    }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    /* The claim has nowhere to sit beside a headline this narrow */
    .about-hero__inner {
        grid-template-columns: 1fr;
        align-items: start;
        gap: var(--s-6);
        padding: var(--s-10) var(--s-5);
    }

    .about-hero__title,
    .about-hero__claim,
    .about-hero__cta {
        grid-column: 1;
        grid-row: auto;
    }

    .about-hero__title {
        max-width: none;
    }

    .about-hero__cta {
        margin-top: 0;
    }

    .founder__band {
        min-height: 0;
        padding: var(--s-5);
    }

    .founder__card {
        min-height: 0;
        padding: var(--s-6);
    }

    .stages__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stage {
        min-height: 260px;
    }

    /* Stacked into two rows, so the pair below needs a rule above it and the
       third cell starts a fresh row rather than carrying a side rule. */
    .stage:nth-child(3) {
        border-left: 0;
    }

    .stage:nth-child(n + 3) {
        border-top: 1px solid var(--border-color);
    }
}

@media (max-width: 640px) {
    .stages__grid {
        grid-template-columns: 1fr;
    }

    .stage {
        min-height: 0;
        gap: var(--s-6);
    }

    .stage + .stage {
        border-left: 0;
        border-top: 1px solid var(--border-color);
    }

    .stages__head-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s-5);
    }

    .team-card {
        flex-basis: 260px;
    }

    .team-card__photo {
        height: 260px;
    }
}