/* ============================================================
   page.css — About. Loads after core.css.
   ============================================================ */

/* A circle, cropped square from a standing portrait — the frame is round,
   so the eyeline is placed rather than centred. */
.portrait{margin:var(--f26-40) 0 0;max-width:280px}
.portrait img{
  display:block;width:100%;aspect-ratio:1;height:auto;
  object-fit:cover;object-position:50% 18%;
  border:1px solid var(--rule);border-radius:50%;
}
@media(min-width:900px){
  /* Two rows of slack, one above the copy and one below, so the heading
     block sits on the portrait's centre line instead of its top edge. */
  .page-head .wrap{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,280px);
    grid-template-rows:1fr auto auto auto auto 1fr;
    gap:0 var(--f34-72);align-items:start;
  }
  .page-head > .wrap > .lab{grid-column:1;grid-row:2}
  .page-head h1{grid-column:1;grid-row:3}
  .page-head .standfirst{grid-column:1;grid-row:4}
  .page-head .practice{grid-column:1;grid-row:5}
  /* about the height of the heading block beside it, so the two read as a pair */
  .portrait{grid-column:2;grid-row:1/7;margin:0;max-width:280px;justify-self:end;align-self:center}
}


/* What the sentence above means in a working week. It sits under the
   standfirst, quieter and a line narrower, because it is the detail a
   reader goes looking for rather than the one they arrive with. */
.page-head .practice{
  margin:var(--s16) 0 0;max-width:62ch;
  font-size:var(--t-body-s);line-height:1.6;color:var(--ink-3);
}

/* ---------- career ------------------------------------------- */
.career{list-style:none;margin:0;padding:0}
.job{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s8);
  padding:var(--s32) 0;
}
@media(min-width:760px){.job{grid-template-columns:150px minmax(0,1fr);gap:var(--s24)}}
.job .when{font-size:var(--t-label);letter-spacing:.01em;color:var(--ink-3)}
.job h3{margin:0 0 var(--s8);font-size:var(--t-sub);font-weight:600;letter-spacing:-.005em}
.job > div > p{margin:0;color:var(--ink-2);font-size:var(--t-body-s)}
.tiers{list-style:none;margin:0;padding:0}
.tiers li{
  display:grid;grid-template-columns:minmax(0,1fr);gap:2px;
  padding:var(--s12) 0;
}
.tiers li:first-child{border-top:0;padding-top:0}
@media(min-width:520px){.tiers li{grid-template-columns:120px minmax(0,1fr);gap:var(--s16)}}
.tiers span{font-size:var(--t-label);color:var(--ink-3)}
.tiers p{margin:0;color:var(--ink-2);font-size:var(--t-body-s)}