/* 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);
}

.about-firms {
  list-style: none;
  margin-top: var(--space-3);
  color: var(--ink);
}

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

.about-schooling { margin-top: var(--space-3); }

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

/* The slate line. It is a paragraph rather than a heading: the page already
   has an h1 and two h2s, and this one is a restatement, not a new section
   heading. */
.about-statement-body { margin-top: var(--space-4); }

/* ------------------------------------------------------------ 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); }
}