/* PK2 AI Advisors · about page
   Loaded by /about/ only. Every value here resolves through tokens.css: no
   hex, no raw pixel measurements. The page has four sections and one image,
   so this sheet is small on purpose.

   Two layouts and one component:
     .about-split         copy on the left, the photograph on the right
     .about-figure        the one photograph, in a plain hairline frame
     .about-credentials   the mono strip: where he worked, and schooling */

/* ------------------------------------------------------- the split row -- */

/* Twelve columns on the desktop width: seven of copy, a column of air, four
   of photograph. Below 1024 the photograph drops under the copy, because a
   four-column rail inside an eight-column grid is a gutter, not a column.
   Only the opening section is split; every section under it runs one column. */
.about-split {
  row-gap: var(--space-7);
  align-items: start;
}

.about-split-copy { grid-column: 1 / 8; }
.about-figure     { grid-column: 9 / 13; }

/* ---------------------------------------------------------- the portrait -- */

/* The only image on the site. A hairline, a mat of paper, and nothing else:
   no radius, no shadow, no cutout. The frame sits on whichever ground the
   section carries, so it declares no background of its own. */
.about-portrait-frame {
  border: var(--hair) solid var(--hairline);
  padding: var(--space-2);
}

.about-portrait {
  width: 100%;
  height: auto;
}

/* One line in three parts: the name, the separator, the place. Set inline, the
   line is wider than the figure column at every screen the site has, so it
   broke after the joiner and left the separator hanging at the end of the
   first line. The place takes its own line and the joiner comes out, so no
   width puts a separator at the end or the start of a line. */
.about-figcaption { margin-top: var(--space-3); }

.about-caption-name  { color: var(--ink); }
.about-caption-sep   { display: none; }
.about-caption-place {
  display: block;
  color: var(--text-muted);
}

/* ------------------------------------------------- the credentials strip -- */

/* One strip, two columns: the four employers, and the schooling. A hairline
   over the top holds it to the prose above without boxing it. The --space-7
   above is deliberate and is not section spacing: this strip belongs to the
   section it sits in. */
.about-credentials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-6);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--hair) solid var(--hairline);
}

/* The same mono eyebrow as a section label, one rank down. These name the two
   columns of one strip; they do not open sections of their own, which is why
   they do not carry .label. */
.about-cred-head {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--size-label);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

/* Both columns of the strip are the same ruled list: one line per item, no
   bullets, a hairline under each. The schooling ran as one sentence with two
   credentials in it, which read as prose beside a list. It is two lines now.
   Both columns carry full ink: they are one strip, and dimming one half of it
   ranked the two kinds of evidence against each other for no reason. */
.about-firms,
.about-schooling {
  list-style: none;
  margin-top: var(--space-3);
  color: var(--ink);
}

.about-firms li,
.about-schooling li {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: var(--hair) solid var(--hairline);
}

/* ---------------------------------------------------------- the statement -- */

/* The slate band is the statement. Not a section with a body under it: no
   eyebrow, no head, no reading column hanging off the left edge of a 1040px
   container. One paragraph, set at display size, centred on the band.

   It is a paragraph rather than a heading because the page already has an h1
   and two h2s and this is a restatement, not a new section heading.

   The band is the whole container. A 716px column centred inside a 1040px one
   left a margin of dark paper on each side that read as a narrower page rather
   than a wider band, so the statement takes the container the rest of the site
   takes and the band stops being a column.

   All five sentences at display size were tried first and came to ten centred
   lines of Fraunces at 1280 and sixteen at 360, which is a wall rather than a
   statement. The two sentences that carry the argument keep the display size.
   The three that explain it sit under them at the lead size, still centred.

   Across the full 1200px container the coda runs to about 100 characters a
   line, which is well over the ~75 the reading measure holds everywhere else.
   Accepted HERE ONLY by Paul's explicit decision: a short statement read once
   in a dark band is not running copy. This is not a precedent for anything
   that is. */
.about-statement {
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}

.about-statement-rest {
  margin-inline: auto;
  margin-top: var(--space-heading);
  font-size: var(--size-body-lead);
  line-height: 1.55;
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1024px) {
  .about-split-copy,
  .about-figure { grid-column: 1 / -1; }

  /* Stacked, the portrait must not grow to the full measure. Half the reading
     column is about as wide as a portrait wants to be. */
  .about-figure { max-width: calc(var(--measure) / 2); }
}

@media (max-width: 640px) {
  .about-split { row-gap: var(--space-6); }

  /* Two mono columns inside a phone width are two gutters. They stack. */
  .about-credentials { grid-template-columns: minmax(0, 1fr); }
}