/* About page: page-scoped styles, loaded by /about only (the reference
   chassis's per-page CSS pattern; the shell, nav and every reusable class
   stay in /styles.css and are never edited from here). This file does two
   small jobs: it places the headshot beside the story and shapes the
   "How I work" cards. Tokens (--navy, --gold-soft, --line, --radius, ...)
   come from styles.css. No inline styles anywhere: the CSP is strict
   (KICKOFF §11). Colours are Jas's own palette (Trevor's ask, 2026-09-23:
   keep the current colours). */

/* ============ The portrait ============
   The gold-soft offset frame is drawn by a wrapper, not by the figure:
   .photo clips its own overflow for the rounded corners, so a frame drawn
   inside the figure would be cut off. The wrapper is the same 428px as the
   image; the frame steps 18px down and right of it. Centred on phones,
   flush left beside the copy from 900px. */
.about-portrait {
  position: relative;
  max-width: 428px;
  margin: 0 auto 18px;
}
.about-portrait::before {
  content: '';
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 2px solid var(--gold-soft);
  border-radius: var(--radius);
}
/* Positioned so it paints above the frame. The margin reset drops the
   browser's default figure margin (1em 40px), which styles.css leaves in
   place and which would otherwise shave 80px off the photo. */
.about-portrait .photo { position: relative; margin: 0; }

@media (min-width: 900px) {
  .about-portrait { margin: 0 0 18px; }
  /* The story runs longer than the photo. Keep the photo in view while the
     reader scrolls, parked under the fixed top bar. */
  .about-story .split__media {
    position: sticky;
    top: calc(var(--bar-h) + 28px);
  }
}

/* ============ The story copy ============ */
/* The page header already carries the gap below the lede; a second helping
   of section padding on top of it read as a hole at desktop widths. */
.about-story { padding-top: 0; }
.about-story h3 { font-size: 20px; margin-top: 1.6em; }
.about-story .lede { margin-bottom: 1em; }
.about-story .social-links { margin: 4px 0 0; }

/* ============ How I work ============
   Four plain cards. A small navy diamond before each title (the same mark
   .ticks uses) makes the set read as one list; gold stays on the eyebrow
   rule so there is one gold accent on the screen (KICKOFF §3). */
.how-card .card__title {
  position: relative;
  padding-left: 24px;
  font-size: 21px;
  margin-bottom: 10px;
}
.how-card .card__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  background: var(--navy);
  border-radius: 2px;
  transform: rotate(45deg);
}
.how-card p { margin: 0; }