/* =============================================================================
   /about/ — page layout only.
   Every component, token and type style comes from core.css. Nothing here
   restyles a component; these rules only arrange this page's sections and set
   the aspect ratio of the four founder image slots.
   ============================================================================= */

/* 1 · Hero — H1 at full container width, then the portrait carrying the
   smaller column beneath it. .grid-2 collapses to one column below 760 on its
   own; the 42/58 split only exists where there are two columns to split. */
.page-about .about-hero-grid{
  --gap: var(--space-12);
  align-items: center;
  margin-top: var(--space-12);
}
@media (min-width: 760px){
  .page-about .about-hero-grid{ grid-template-columns: 42fr 58fr; }
}
.page-about .about-portrait-frame{ --ratio: 4 / 5; box-shadow: var(--elev-2); }
.page-about .about-hero .muted{ margin-top: var(--space-4); }
.page-about .about-hero .btn-row{ margin-top: var(--space-8); }

/* 2 · Origin story — the signature sits under the last line at writing size,
   not centred and not blown up to fill the column. */
.page-about .about-signature{ width: 220px; margin-top: var(--space-10); }

/* 4 · Stack — the desk shot beside the list. The list runs roughly twice the
   height of the photo, so the photo holds its position while the tools scroll
   past it rather than leaving half a column empty. */
.page-about .about-stack-grid{ --gap: var(--space-12); align-items: start; }
.page-about .about-working-frame{ --ratio: 3 / 2; }
@media (min-width: 760px){
  .page-about .about-stack-grid > figure{
    position: sticky;
    top: calc(var(--nav-h) + var(--space-8));
  }
}
.page-about .stack-list{ display: grid; gap: var(--space-5); }
.page-about .stack-item{
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
}
.page-about .stack-item dt{ margin-bottom: var(--space-2); color: var(--ink); }
.page-about .stack-item dd{ color: var(--ink-body); }
.page-about .about-stack-note{ margin-top: var(--space-10); }

/* 5 · Working Order — the scoping line sits clear of the last stage. */
.page-about .about-scope-note{ margin-top: var(--space-12); max-width: var(--measure); }

/* 6 · Qualification — the closing line sits clear of the list. */
.page-about .about-qual-note{ margin-top: var(--space-8); max-width: var(--measure); }

/* 7 · Data — the five lines lead, the detail shot stays quiet beside them. */
.page-about .about-data-grid{ --gap: var(--space-12); align-items: start; }
.page-about .about-detail-frame{ --ratio: 1 / 1; }

/* 8 · Contact — four labelled routes, each one its own line, so the phone
   number and the email are both a single tap target on a phone. */
.page-about .about-contact-grid{ --gap: var(--space-12); align-items: start; }
.page-about .about-contact{ display: grid; gap: var(--space-6); }
.page-about .about-contact li{ display: grid; gap: var(--space-1); }
.page-about .about-contact .mono{ color: var(--ink-muted); }
/* 44px minimum, the same floor core.css puts on .link-arrow and the buttons.
   These four are the page's primary routes and most of them get tapped. */
.page-about .about-contact a{
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-lg);
  color: var(--ink);
}
.page-about .about-contact a:hover{ color: var(--gold-text); }
.page-about .about-sla-line{ margin-top: var(--space-6); }

/* The H1 steps down on a narrow phone, because a masked line that wraps reveals
   as one block. --fs-hero bottoms out at its 2.90rem floor while the column
   keeps shrinking, so the longest line overruns below 360px. Same step, and
   the same reason, as the homepage and teardown heroes. */
@media (max-width: 400px){
  .page-about h1.display-hero{ font-size: var(--fs-4xl); }
}