/* The About page, /about: laid out for its own story on a 12-column grid. A serif statement and the company beneath it,
   the milestones, partners and hiring, the four kinds of work as one line, the mission as the one large moment, the
   policy's principles as an index, and the founders. Colours from index.css, type from chrome.css (Newsreader, Geist);
   everything is scoped to main.about so it never reaches the header, the footer or another page. */
main.about {
    max-width: none;
    padding: 0;
    display: block;
    gap: 0;
    font-family: var(--chrome-body);
    line-height: 1.6;
    color: var(--text);
}

.about *, .about *::before, .about *::after { box-sizing: border-box; }
.about h1, .about h2, .about h3, .about p, .about ol, .about ul { margin: 0; }
.about ol, .about ul { padding: 0; list-style: none; }
.about a { color: var(--text); text-decoration: none; }
.about a:hover { opacity: 0.72; }

.ab-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.ab-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.2vw, 32px); }
.ab-label { display: block; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.ab-serif { font-family: var(--chrome-display); font-weight: 400; letter-spacing: -0.015em; }
.about section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.about section + section { border-top: 1px solid var(--rule); }

/* The statement, with the company beneath it. The header is fixed, so the first section clears it. */
.about .ab-hero { padding-top: calc(78px + clamp(3rem, 7vw, 5.5rem)); }
.ab-hero .ab-label { grid-column: 1 / -1; margin-bottom: 1.5rem; }
.ab-hero h1 { grid-column: 1 / -1; font-size: clamp(2.6rem, 5.4vw, 4.75rem); line-height: 1.04; text-wrap: balance; }
.ab-intro { grid-column: 1 / span 9; margin-top: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column; gap: 1.1rem; }
.ab-intro p { font-size: 1.1875rem; line-height: 1.6; color: var(--text-secondary); }
.ab-intro p:first-child { color: var(--text); }

/* Milestones, oldest first. */
.ab-ms-head { grid-column: 1 / -1; margin-bottom: 1.5rem; }
.ab-milestones { grid-column: 1 / -1; border-bottom: 1px solid var(--rule); }
.ab-milestones li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.2vw, 32px); padding: 1.1rem 0; border-top: 1px solid var(--rule); align-items: baseline; }
.ab-milestones time { grid-column: 1 / span 2; font-size: 0.875rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ab-milestones b { grid-column: 3 / span 3; font-family: var(--chrome-display); font-weight: 400; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; }
.ab-milestones span { grid-column: 6 / -1; font-size: 0.9375rem; line-height: 1.55; color: var(--text-secondary); }

/* Partners and hiring. */
.ab-join { grid-column: 1 / -1; margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.2vw, 32px); row-gap: 1.25rem; align-items: start; }
.ab-join p { grid-column: 1 / span 6; font-family: var(--chrome-display); font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.25; letter-spacing: -0.01em; }
.ab-contacts { grid-column: 8 / -1; display: flex; flex-direction: column; }
.ab-contacts div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--rule); }
.ab-contacts div:last-child { border-bottom: 1px solid var(--rule); }
.ab-contacts span { font-size: 0.875rem; color: var(--text-muted); }
.ab-contacts a { font-size: 0.9375rem; }

/* What we build: four kinds of work on one line. */
.ab-head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2.75rem; }
.ab-head h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; text-wrap: balance; }
.ab-stages { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(16px, 2.2vw, 32px); }
.ab-stage { position: relative; display: flex; flex-direction: column; gap: 0.6rem; padding-top: 2.25rem; }
.ab-stage::before { content: ""; position: absolute; top: 5px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--text); }
.ab-stage:not(:last-child)::after { content: ""; position: absolute; top: 10px; left: 11px; right: calc(-1 * clamp(16px, 2.2vw, 32px)); height: 1px; background: var(--rule-strong); }
.ab-stage .num { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.ab-stage h3 { font-size: 1.625rem; line-height: 1.15; }
.ab-stage p { font-size: 0.9375rem; line-height: 1.55; color: var(--text-secondary); }
.ab-stage a { margin-top: 0.25rem; font-size: 0.875rem; }

/* Mission: the one large moment. */
.ab-mission .ab-label { grid-column: 1 / -1; margin-bottom: 1.75rem; }
.ab-mission blockquote { grid-column: 1 / span 11; margin: 0; font-size: clamp(1.85rem, 3.6vw, 3.25rem); line-height: 1.14; text-wrap: balance; }
.ab-commits { grid-column: 1 / -1; margin-top: clamp(2.75rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(16px, 2.2vw, 32px); }
.ab-commit { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule-strong); }
.ab-commit h3 { font-size: 1rem; font-weight: 500; }
.ab-commit p { font-size: 0.9375rem; line-height: 1.55; color: var(--text-secondary); }

/* Policy: the commitment beside the principles. */
.ab-policy { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 1rem; }
.ab-policy h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; }
.ab-policy p { font-size: 1.0625rem; line-height: 1.6; color: var(--text-secondary); }
.ab-policy a { margin-top: 0.5rem; font-size: 0.9375rem; }
.ab-principles { grid-column: 8 / -1; border-bottom: 1px solid var(--rule); }
.ab-principles li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: baseline; padding: 0.95rem 0; border-top: 1px solid var(--rule); }
.ab-principles li span { font-size: 0.8125rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.ab-principles li b { font-family: var(--chrome-display); font-weight: 400; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; }

/* Founders, side by side: the portrait beside the name, the bio across the founder's half. */
.ab-founders-head { grid-column: 1 / -1; margin-bottom: 2.5rem; }
.ab-founder { grid-column: span 6; display: grid; grid-template-columns: 9rem minmax(0, 1fr); column-gap: 1.75rem; row-gap: 1.5rem; align-items: center; align-content: start; }
.ab-founder img { width: 100%; height: auto; max-width: 9rem; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; display: block; }
.ab-founder h3 { font-size: 1.875rem; line-height: 1.1; }
.ab-name { display: flex; align-items: center; gap: 0.75rem; }
.ab-linkedin { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -10px -10px -10px -4px; border-radius: 8px; color: var(--text-muted); }
.about .ab-linkedin:hover { color: var(--text); opacity: 1; }
.ab-linkedin svg { width: 20px; height: 20px; fill: currentColor; }
.ab-role { margin-top: 0.5rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.ab-bio { grid-column: 1 / -1; font-size: 1rem; line-height: 1.65; color: var(--text-secondary); }

@media (max-width: 1024px) {
    .ab-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
    .ab-stage:nth-child(2)::after { display: none; }
    .ab-policy { grid-column: 1 / -1; margin-bottom: 2.25rem; }
    .ab-principles { grid-column: 1 / -1; }
    .ab-founder { grid-column: 1 / -1; }
    .ab-founder + .ab-founder { margin-top: 3rem; }
}
@media (max-width: 680px) {
    .ab-intro { grid-column: 1 / -1; }
    .ab-intro p { font-size: 1.0625rem; }
    .ab-milestones time { grid-column: 1 / -1; }
    .ab-milestones b { grid-column: 1 / -1; margin-top: 0.25rem; }
    .ab-milestones span { grid-column: 1 / -1; margin-top: 0.35rem; }
    .ab-join p, .ab-contacts { grid-column: 1 / -1; }
    .ab-stages { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .ab-stage { padding: 0 0 2rem 1.75rem; }
    .ab-stage::before { top: 8px; }
    .ab-stage:not(:last-child)::after, .ab-stage:nth-child(2)::after { display: block; top: 19px; left: 5px; right: auto; width: 1px; bottom: 0; height: auto; }
    .ab-mission blockquote { grid-column: 1 / -1; }
    .ab-commits { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }
    .ab-founder { grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1.25rem; }
}