/* ============================================================
   10-about — the About / company page.
   Every selector is prefixed .abt-  ·  every value is a token.
   One stylesheet, five sections: hero, thesis, principles,
   by-the-numbers, careers + closing CTA.
   ============================================================ */

.abt-hero,
.abt-cta {
  /* One diagonal expression shared by the page's two dark bands, so the
     hero's foot and the CTA's head fall by the same number of pixels at
     every width. Shallower than the homepage's 10.5vw: this page opens
     with an argument, not a product shot. */
  --abt-cut: min(5vw, 72px);
}

/* ============================================================
   1 — HERO
   The nav is transparent until scroll and has zero flow height
   (margin-bottom: -72px in 00-nav.css), so this band MUST be dark
   and MUST reserve the bar's height in its own top padding.
   ============================================================ */

.abt-hero {
  position: relative;
  isolation: isolate;
  padding-block: calc(var(--s-11) + var(--section-y))
                 calc(var(--s-10) + var(--abt-cut));
  color: var(--text-invert-body);
}

.abt-hero__canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--grad-dark);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--abt-cut)), 0 100%);
}

/* Two soft cores, no animation. A page that asks to be read should not
   have anything moving behind the first paragraph. */
.abt-hero__wash {
  position: absolute;
  inset: -30% -10% -40%;
  background:
    radial-gradient(38% 52% at 16% 26%, rgba(99, 91, 255, .46), transparent 70%),
    radial-gradient(34% 46% at 84% 8%, rgba(0, 212, 255, .20), transparent 72%);
}

/* Ledger rules: the page's only ornament, and the only one that means
   anything here — a statement ruled into columns. Fades out before it
   reaches the text so nothing ever sits on a line. */
.abt-hero__rules {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, .055) 0 1px,
    transparent 1px var(--s-11)
  );
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 62%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), transparent 62%);
}

.abt-hero__inner { position: relative; }

.abt-hero__eyebrow { color: var(--c-teal); }

.abt-hero__title {
  max-width: 17ch;
  margin-block-start: var(--s-4);
  color: var(--text-invert);
}

.abt-hero__lead {
  max-width: 58ch;
  margin-block-start: var(--s-6);
  color: var(--text-invert-body);
}

.abt-hero__link {
  margin-block-start: var(--s-8);
  color: var(--c-teal);
}
.abt-hero__link:hover { color: var(--c-lime); }

/* base.css rings focus in --c-brand, which is ~2.2:1 against this
   gradient. Same correction 00-nav.css makes over the homepage hero. */
.abt-hero :focus-visible,
.abt-cta :focus-visible { outline-color: var(--c-white); }

/* ============================================================
   2 — THE THESIS
   Essay setting: a sticky label column, then prose at 65ch.
   ============================================================ */

.abt-th__inner {
  display: grid;
  gap: var(--s-9);
}

@media (min-width: 62em) {
  .abt-th__inner {
    grid-template-columns: minmax(0, 15rem) minmax(0, 65ch);
    justify-content: space-between;
    gap: var(--s-12);
  }
  /* Holds the argument's name in view while the argument runs.
     88px clears the sticky nav (72px) with room to breathe. */
  .abt-th__side {
    position: sticky;
    top: calc(var(--s-11) + var(--s-2));
    align-self: start;
  }
}

.abt-th__t {
  margin-block-start: var(--s-4);
  font-size: var(--fs-h3);
}

.abt-th__kicker {
  margin-block-start: var(--s-4);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 34ch;
}

.abt-th__prose { max-width: 65ch; }

.abt-th__p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}
.abt-th__p + .abt-th__p { margin-block-start: var(--s-6); }

/* The opening paragraph carries the weight; everything after it is the
   argument, not the claim. One step of size, not two. */
.abt-th__p--open {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--text-strong);
  letter-spacing: var(--tracking-snug);
}

/* ---------- the one figure in the essay ---------- */

.abt-th__fig {
  margin: var(--s-8) 0;
  padding-inline-start: var(--s-6);
  border-inline-start: 1px solid var(--c-brand);
}

.abt-th__fig-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
}

.abt-th__fig-n {
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  color: var(--text-strong);
  letter-spacing: var(--tracking-snug);
  font-variant-numeric: tabular-nums;
}
.abt-th__fig-n--good { color: var(--c-brand); }

.abt-th__fig-arrow {
  width: var(--s-7);
  height: var(--s-4);
  align-self: center;
  color: var(--text-muted);
  flex: none;
}

.abt-th__fig-delta {
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  background: var(--c-brand-tint);
  color: var(--c-brand-press);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-snug);
  white-space: nowrap;
}

.abt-th__fig-cap {
  margin-block-start: var(--s-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-muted);
  max-width: 52ch;
}

/* ============================================================
   3 — PRINCIPLES
   A hairline spine with the section's own surface knocked out
   behind each node, so the rule appears to pass under the mark.
   ============================================================ */

.abt-pr {
  --abt-spine: clamp(var(--s-7), 5vw, var(--s-9));   /* rule → text gutter */
  --abt-node: var(--s-8);                            /* node diameter, 40px */
}

.abt-pr__head { max-width: 46ch; }

.abt-pr__t {
  margin-block-start: var(--s-4);
  max-width: 20ch;
}

.abt-pr__lead { margin-block-start: var(--s-5); }

.abt-pr__list {
  margin-block-start: var(--s-11);
  padding-inline-start: calc(var(--abt-spine) + var(--s-4));
  border-inline-start: 1px solid var(--border);
}

.abt-pr__item { position: relative; max-width: 62ch; }
.abt-pr__item + .abt-pr__item { margin-block-start: var(--s-10); }

.abt-pr__node {
  position: absolute;
  /* Centre the node on the rule: half its width, plus the gutter, plus
     the padding step the list adds. */
  inset-inline-start: calc((var(--abt-spine) + var(--s-4) + var(--abt-node) / 2) * -1);
  inset-block-start: calc(var(--s-1) * -1);
  display: grid;
  place-items: center;
  width: var(--abt-node);
  height: var(--abt-node);
  border-radius: var(--r-pill);
  /* Knocks the hairline out; the ring is the hairline picked back up. */
  background: var(--surface-alt);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--c-brand);
}

.abt-pr__node svg { width: var(--s-5); height: var(--s-5); }

.abt-pr__h {
  font-size: var(--fs-h4);
  color: var(--text-strong);
}

.abt-pr__b {
  margin-block-start: var(--s-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

/* Below the spine breakpoint the rule would sit in the gutter with the
   nodes hanging off the page, so the whole spine is dropped and each
   node becomes a leading mark instead. */
@media (max-width: 47.99em) {
  .abt-pr__list {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
  .abt-pr__node {
    position: static;
    margin-block-end: var(--s-4);
  }
}

/* ============================================================
   4 — BY THE NUMBERS
   ============================================================ */

.abt-num__head { max-width: 52ch; }

.abt-num__t { margin-block-start: var(--s-4); max-width: 18ch; }
.abt-num__lead { margin-block-start: var(--s-5); }

.abt-num__grid {
  margin-block-start: var(--s-10);
  display: grid;
  gap: 1px;
  /* The gap IS the hairline: one background under a 1px-gap grid draws
     every rule at once and never doubles at a junction. */
  background: var(--border);
  /* Ruled on all four sides, not just top and bottom: the cells carry
     inline padding, and without an outer rule that inset has nothing
     justifying it — the first numeral would float off the container edge. */
  border: 1px solid var(--border);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.abt-num__cell {
  background: var(--surface);
  padding: var(--s-7) var(--s-6) var(--s-8);
}

.abt-num__k {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

.abt-num__v { margin-block-start: var(--s-4); }

.abt-num__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--text-strong);
  letter-spacing: var(--tracking-snug);
}

.abt-num__d {
  display: block;
  margin-block-start: var(--s-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

.abt-num__foot {
  margin-block-start: var(--s-6);
  max-width: 62ch;
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

/* ============================================================
   5a — CAREERS STRIP
   ============================================================ */

.abt-jobs { padding-block-end: var(--section-y); }

.abt-jobs__box {
  display: grid;
  gap: var(--s-7);
  align-items: center;
  padding: clamp(var(--s-7), 6vw, var(--s-9)) clamp(var(--s-5), 5vw, var(--s-8));
  border-radius: var(--r-lg);
  background: var(--surface-alt);
  box-shadow: inset 0 0 0 1px var(--border);
}

@media (min-width: 48em) {
  .abt-jobs__box {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-10);
  }
}

.abt-jobs__t {
  margin-block-start: var(--s-3);
  font-size: var(--fs-h3);
}

.abt-jobs__b {
  margin-block-start: var(--s-4);
  max-width: 62ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

.abt-jobs__cta { justify-self: start; }

/* ============================================================
   5b — CLOSING CTA
   Mirrors the hero: same dark family, same diagonal magnitude,
   cut the other way so the page closes as it opened.
   ============================================================ */

.abt-cta {
  position: relative;
  isolation: isolate;
  padding-block: calc(var(--section-y) + var(--abt-cut)) var(--section-y);
  color: var(--text-invert-body);
  text-align: center;
}

.abt-cta__canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(46% 62% at 22% 16%, rgba(99, 91, 255, .34), transparent 72%),
    radial-gradient(40% 56% at 82% 92%, rgba(0, 212, 255, .16), transparent 74%),
    var(--grad-dark);
  clip-path: polygon(0 0, 100% var(--abt-cut), 100% 100%, 0 100%);
}

.abt-cta__t {
  margin-inline: auto;
  max-width: 18ch;
  color: var(--text-invert);
}

.abt-cta__lead {
  margin: var(--s-5) auto 0;
  max-width: 54ch;
  color: var(--text-invert-body);
}

.abt-cta__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-block-start: var(--s-8);
}