/* PK2 Finance & Strategy · about page (v2)
   Composition rules for the About page only. Anything reusable belongs in
   foundation.css; anything with a colour in it reads a token. */

/* ---------------------------------------------------------- page rhythm -- */

/* Six sections, one biography. The system's section rhythm is run a step
   tighter here, as the home page does in home.css: the page was reading airy
   rather than composed. The file is loaded by the About page alone, so no
   other measure in the system moves. */
:root {
  --section-top: 76px;
  --section-bottom: 88px;
}

@media (max-width: 1024px) {
  :root { --section-top: 64px; --section-bottom: 74px; }
}

@media (max-width: 640px) {
  :root { --section-top: 52px; --section-bottom: 60px; }
}

/* ------------------------------------------------------------- 1 hero -- */

/* The opening is type only: an eyebrow and the proposition. It carries less
   height than the home page's fold because the portrait immediately below it
   is the other half of the same beat, so the two are pulled together. */
.about-hero {
  padding-top: calc(var(--section-top) * 0.72);
  padding-bottom: calc(var(--section-bottom) * 0.5);
}
.about-hero-copy { grid-column: 1 / span 9; }
.about-hero-eyebrow { margin-bottom: 26px; }

@media (max-width: 1024px) {
  .about-hero-copy { grid-column: 1 / span 8; }
}

/* --------------------------------- 2 recurring problem, with portrait -- */

/* One beat, set as a print inset rather than a split: the essay runs as a
   single column on the page's left rail and the portrait hangs into its upper
   right, so the copy passes beside the photograph and then closes underneath
   it. The column is capped at a reading measure, a little over the system's
   660px, so the lines that run under the portrait stay readable instead of
   spanning the container. The measure, not a column span, is what composes the
   section: a nine-column block would collapse to under 600px between 1025 and
   about 1150 and shred the copy beside the portrait, so the block takes the
   grid's full width and the cap holds it at 704px from the break up to 1200,
   where the container is finally wide enough to open the composition out (see
   below). The career path itself is not retold here; the timeline below is
   where that story belongs. */
.recurring-copy {
  grid-column: 1 / span 12;
  max-width: 704px;
}
.recurring-copy .h2 { margin-top: 18px; }

.recurring-lede { margin-top: 30px; }

/* The line the client actually says, in the reserved voice. It opens the
   essay; the universal truth closes it, and the body sits between them so the
   two gold rules never stack. */
.recurring-said { margin-top: 22px; }
.recurring-prose { margin-top: 24px; }
.recurring-prose .body + .body { margin-top: 14px; }
.recurring-truth { margin-top: 28px; }
.recurring-close { margin-top: 22px; color: var(--text-muted); }

/* The one photograph on the site sits in the instrument shell rather than on
   the page: ink bezel, lit core, no caption. Nothing else on the site is a
   picture, so the portrait is presented as a reading rather than as decoration.
   The image itself stays square-cornered inside the rounded core.

   It is inset into the essay rather than parked beside it, and it is held small
   enough that the copy actually clears it: the lede and the client's line set
   against the tray, the argument closes at full measure below. Up to 1200 the
   top margin pulls the tray level with the lede rather than with the headline
   above it. */
.portrait-tray {
  float: right;
  width: 300px;
  margin: 30px 0 30px 32px;
}
.portrait-core { padding: 18px; }
.portrait { width: 100%; height: auto; }

/* From the width where the container can carry the photograph on its own right
   edge and still leave a reading measure beside it, the inset opens out: the
   block takes the whole container, the tray moves to the container's right
   edge, and the copy keeps its own caps rather than borrowing the block's. What
   runs beside the photograph is set by the tray's left margin, about 700px at
   1440; what closes underneath it runs to 780px. The section then spans the
   band instead of leaving a uniform empty column down its right side. Below
   1200 the container is too narrow to hold both, so the 704px inset above
   still stands. */
@media (min-width: 1200px) {
  .recurring-copy {
    --tray: clamp(320px, 32%, 380px);
    max-width: none;
  }
  /* The copy's own cap. 780px where the container can carry it, and never
     closer than 40px to the tray, so the lines that pass the photograph can be
     shortened by the float without ever running into it. */
  .recurring-copy > *:not(.portrait-tray) {
    max-width: min(780px, calc(100% - var(--tray) - 40px));
  }
  .portrait-tray {
    width: var(--tray);
    /* Holds the lines beside the photograph at about 700px wherever the
       container is wide enough to give it. */
    margin-left: max(48px, calc(100% - var(--tray) - 700px));
    /* Pulled up off the lede to sit level with the headline, so the tray covers
       the band the section used to leave empty and enough of the argument
       clears its foot to wrap back out to the full measure. */
    margin-top: -90px;
  }
}

@media (max-width: 1024px) {
  .recurring-copy { grid-column: 1 / span 8; }

  /* The inset holds through the tablet widths, but at a share of the column
     rather than a fixed width, so the copy running beside it never narrows to
     a gutter. */
  .portrait-tray {
    width: 38%;
    min-width: 200px;
    max-width: 280px;
    margin-left: 28px;
    margin-bottom: 26px;
  }
}

@media (max-width: 640px) {
  /* One column. The portrait can no longer share a line with the copy, so it
     stops floating and sits under the opening line at the width of the column.
     The cap only bites in the last stretch before the break, where a portrait
     running the full column would be taller than a phone screen is wide. */
  .portrait-tray {
    float: none;
    width: auto;
    min-width: 0;
    max-width: 420px;
    margin: 30px 0 0;
  }
  .portrait-core { padding: 14px; }
}

/* ------------------------------------------------------ 3 career timeline -- */

.path-head { grid-column: 1 / span 7; }
.path-head .h2 { margin-top: 18px; }
.path-lede { margin-top: 20px; max-width: 560px; color: var(--text-muted); }

.path-count { grid-column: 9 / span 4; align-self: end; }
.path-count .num-display { line-height: 0.9; }
.path-count-cap { margin-top: 12px; }

/* One spine for the whole career, run down the gutter between the mono era
   labels and the copy: the labels stay on column 1 and the entries stay on the
   grid, so nothing is indented off the page's left edge. Each entry carries a
   short tick into the rule, and the last one is gold, because that is where
   the path arrives. */
.path-list {
  grid-column: 1 / span 12;
  list-style: none;
  margin: 46px 0 0;
  padding: 0;
}
.path-entry {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
}
.path-mark { grid-column: 1 / span 3; padding-top: 4px; }
.path-body {
  position: relative;
  grid-column: 4 / span 6;
  padding-bottom: 26px;
}
.path-entry:last-child .path-body { padding-bottom: 0; }

/* The rule sits in the gutter, not on a column edge. Consecutive segments
   abut, so the five entries read as one continuous spine. */
.path-body::before {
  content: "";
  position: absolute;
  left: calc(var(--gutter) / -2);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--hairline);
}
.path-entry:last-child .path-body::before { bottom: -6px; }
/* The arm reaches back toward the era label, which sits a full gutter away
   from the rule; a short tick would leave the two floating apart. */
.path-body::after {
  content: "";
  position: absolute;
  left: calc((var(--gutter) / -2) - 28px);
  top: 10px;
  width: 28px;
  height: 1px;
  background: var(--hairline);
}
.path-entry:last-child .path-body::after {
  left: calc((var(--gutter) / -2) - 32px);
  width: 32px;
  height: 2px;
  background: var(--gold);
}

.path-line {
  margin-top: 10px;
  max-width: 560px;
  font-size: var(--size-small);
  line-height: 1.55;
  color: var(--text-muted);
}

.path-short {
  grid-column: 1 / span 12;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}
.path-short .body {
  margin-top: 12px;
  max-width: 720px;
  font-size: var(--size-small);
  color: var(--text-muted);
}

@media (max-width: 1024px) {
  .path-head { grid-column: 1 / span 8; }
  .path-count { grid-column: 1 / span 8; margin-top: 34px; }
  .path-list, .path-short { grid-column: 1 / span 8; }
  .path-list { margin-top: 38px; }

  /* Stacked, the two-column entry has nowhere to hang the rule, so the spine
     moves to the left of the whole entry and the label sits above the name.
     Same object, redrawn, not squashed. */
  .path-entry { display: block; position: relative; padding-left: 26px; }
  .path-mark { padding-top: 0; padding-bottom: 8px; }
  .path-body { padding-bottom: 26px; }
  .path-body::before,
  .path-body::after { display: none; }
  .path-entry::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--hairline);
  }
  .path-entry:last-child::before { bottom: 6px; }
  .path-entry::after {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 11px;
    height: 1px;
    background: var(--hairline);
  }
  .path-entry:last-child::after { width: 15px; height: 2px; background: var(--gold); }
}

/* ---------------------------------------------------------- 4 statement -- */

.thesis-body { margin-top: 26px; max-width: 660px; color: var(--muted-inv); }
.thesis-body .body-lg + .body-lg { margin-top: 16px; }
.thesis-voice { margin-top: 38px; max-width: 620px; }

/* Above the grid break the two supporting paragraphs run as two columns under
   the headline, so the band is used across its width and the reserved line
   still closes the section on the rail. */
@media (min-width: 1025px) {
  .thesis-body {
    grid-column: 1 / span 12;
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    align-items: start;
  }
  .thesis-body .body-lg + .body-lg { margin-top: 0; }
}

/* --------------------------------------------------------- 5 principles -- */

.principles-head { grid-column: 1 / span 8; }
.principles-head .h2 { margin-top: 18px; }

/* The four principles are held in the foundation's .quad. */

@media (max-width: 1024px) {
  .principles-head { grid-column: 1 / span 8; }
}

/* -------------------------------------------------------------- 6 close -- */

.close-support { margin-top: 22px; max-width: 520px; color: var(--muted-inv); }
.close-field { margin-top: 30px; }
.close-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin-top: 38px;
}

@media (min-width: 1025px) {
  .close-field { grid-column: 1 / span 12; }
}

@media (max-width: 640px) {
  .close-field { margin-top: 30px; }
  .close-actions { margin-top: 34px; }
  .close-actions .btn-primary { flex: 0 0 auto; width: auto; }
}