/* Owner-approved card timeline and horizontal copy layout, 2026-09-14.
 * Scoped to the TOP career section; typography follows the site role tokens.
 */
#pg-top .career-timeline {
  --career-ink: #111114;
  --career-text: #34363d;
  --career-muted: #5f6169;
  --career-line: #777982;
  --career-soft-line: #d4d5d8;
  --career-recording-tone: #e5e6e8;
  --career-paper: #fff;
  --career-canvas: #f1f2f4;
  --career-axis-width: 48px;
  --career-axis-gap: 18px;
  --career-heading-width: 234px;
  --career-entry-gap: 26px;
  --career-entry-padding: 24px;
  width: 100%;
  min-width: 0;
  color: var(--career-ink);
}
#pg-top .career-timeline,
#pg-top .career-timeline * { box-sizing: border-box; }
#pg-top .career-timeline-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
#pg-top .career-stage {
  --career-stage-tone: var(--career-paper);
  --career-stage-border: var(--career-stage-tone);
  position: relative;
  display: grid;
  grid-template-columns: var(--career-axis-width) minmax(0, 1fr);
  column-gap: var(--career-axis-gap);
  min-width: 0;
  margin: 0;
  padding: 0;
}
#pg-top .career-stage + .career-stage { margin-top: 20px; }
#pg-top .career-stage:first-child { --career-stage-border: var(--career-soft-line); }
#pg-top .career-card-axis {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}
#pg-top .career-card-number {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: var(--career-stage-tone);
  border: 1px solid var(--career-line);
  border-radius: 4px;
  box-shadow: none;
  color: var(--career-text);
  font-size: var(--os8-type-note, 12px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
#pg-top .career-card-connector {
  position: absolute;
  bottom: -15px;
  left: calc(50% - 6px);
  width: 12px;
  height: 12px;
}
#pg-top .career-card-connector::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 2px;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--career-ink);
  border-bottom: 1px solid var(--career-ink);
  transform: rotate(45deg);
}
#pg-top .career-stage:last-child .career-card-connector { display: none; }
#pg-top .career-card {
  display: grid;
  grid-template-columns: var(--career-heading-width) minmax(0, 1fr);
  column-gap: var(--career-entry-gap);
  align-items: center;
  min-width: 0;
  min-height: 172px;
  padding: 27px calc(var(--career-entry-padding) - 1px);
  background: var(--career-paper);
  border: 2px solid var(--career-stage-border);
  border-radius: 4px;
  box-shadow: 0 10px 24px -18px rgb(17 17 20 / 35%);
  text-align: left;
}
#pg-top .career-card-heading { min-width: 0; }
#pg-top .career-card-label {
  display: block;
  margin: 0 0 14px;
  color: var(--career-muted);
  font-size: var(--os8-type-note, 12px);
  font-weight: 700;
  line-height: 18px;
  letter-spacing: .12em;
}
#pg-top .career-card-title {
  margin: 0;
  color: var(--career-ink);
  font-size: var(--os8-type-compact, 16px) !important;
  font-weight: 700;
  line-height: 1.55 !important;
  letter-spacing: 0;
  text-wrap: wrap;
  text-shadow: none;
}
#pg-top .career-card-org {
  display: block;
  margin: 6px 0 0;
  color: var(--career-muted);
  font-size: var(--os8-type-support, 13.4px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0;
}
#pg-top .career-card-phrase,
#pg-top .career-card-term { display: inline-block; white-space: nowrap; }
#pg-top .career-card-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-self: center;
  gap: 0;
  margin: 0;
  padding: 0;
}
#pg-top .career-card-detail {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  column-gap: 16px;
  align-items: baseline;
  min-width: 0;
  padding: 13px 0;
}
#pg-top .career-card-detail:first-child { padding-top: 0; }
#pg-top .career-card-detail:last-child { padding-bottom: 0; }
#pg-top .career-card-detail + .career-card-detail { border-top: 1px solid var(--career-soft-line); }
#pg-top .career-card-detail dt {
  margin: 0;
  color: var(--career-muted);
  font-size: var(--os8-type-support, 13.4px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .035em;
}
#pg-top .career-card-detail dd {
  min-width: 0;
  margin: 0;
  color: var(--career-text);
  font-size: var(--os8-type-body, 14.4px) !important;
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: .01em;
  overflow-wrap: break-word;
}
/* Sequential tones denote the passage of time, not an active/selected card.
 * Numbers and down chevrons preserve that meaning independently of color. */
#pg-top .career-stage:nth-child(2) { --career-stage-tone: var(--career-recording-tone); }
#pg-top .career-stage:nth-child(3) { --career-stage-tone: #bfc1c7; }
#pg-top .career-stage:nth-child(4) { --career-stage-tone: var(--career-muted); }
#pg-top .career-stage:nth-child(2) .career-card-number {
  color: var(--career-ink);
}
#pg-top .career-stage:nth-child(3) .career-card-number {
  color: var(--career-ink);
}
#pg-top .career-stage:nth-child(4) .career-card-number {
  border-color: var(--career-muted);
  box-shadow: none;
  color: var(--career-paper);
}
/* A short supporting photograph leaves the career cards as the main content. */
@media (min-width: 900px) {
  #pg-top .career-section .section-lead {
    min-height: 190px;
    padding-top: 18px;
    padding-bottom: 18px;
  }
  #pg-top .career-section .career-photo {
    /* The source is square with a 1200 x 800 photo between two letterbox bars.
     * Show that full 3:2 photo at 190px high; preserve both face and mixer. */
    width: 285px;
    height: 190px;
    align-self: center;
  }
  #pg-top .career-section .career-photo::before {
    background: linear-gradient(90deg, #f1f2f4 0%, rgba(241, 242, 244, 0) 32%);
  }
  #pg-top .career-section .career-photo img {
    position: absolute;
    top: -25%;
    left: 0;
    width: 100%;
    height: 150%;
    object-fit: contain;
    object-position: center;
    transform: none;
  }
}
@media (max-width: 1040px) {
  #pg-top .career-timeline { --career-heading-width: 200px; --career-entry-gap: 20px; }
}
/* Retain the accepted comparison's narrow-screen stacking. */
@media (max-width: 760px) {
  #pg-top .career-timeline { --career-axis-width: 36px; --career-axis-gap: 14px; --career-entry-padding: 18px; }
  #pg-top .career-card { grid-template-columns: minmax(0, 1fr); row-gap: 26px; align-items: start; }
  #pg-top .career-card-axis { align-items: flex-start; }
  #pg-top .career-card-number { width: 32px; height: 32px; margin-top: 30px; }
  #pg-top .career-card-detail { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  #pg-top .career-card-term { display: inline; white-space: normal; }
}