/* The shared vertical line connects each affiliation to its dated work. */
.career-tree {
  --date-column: clamp(146px, 13vw, 204px);
  --branch-inset: clamp(24px, 3.2vw, 52px);
  --summary-pad: clamp(10px, .9vw, 15px);
  --rail-color: rgb(255 255 255 / 42%);
  list-style: none;
  width: min(100%, 1440px);
  margin: clamp(38px, 4.3vw, 72px) auto 0;
  padding: 0;
  color: #fff;
}

.index-list > .career-tree { margin-top: 0; }

.career-entry { margin: 0; }
.career-disclosure { min-width: 0; }
.career-summary {
  position: relative;
  display: grid;
  grid-template-columns: var(--date-column) minmax(0, 1fr);
  align-items: center;
  padding-block: var(--summary-pad);
  list-style: none;
  cursor: pointer;
}
.career-summary::-webkit-details-marker { display: none; }
.career-summary::marker { content: ""; }
.career-summary:focus-visible { outline: 2px solid white; outline-offset: 2px; }

.career-summary::before, .career-summary::after, .career-branch::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--date-column);
  background: var(--rail-color);
  pointer-events: none;
}
.career-summary::before { inset-block: 0; width: 1px; }
.career-summary::after { top: 50%; width: var(--branch-inset); height: 1px; }
.career-entry:first-child .career-summary::before { top: 50%; }
.career-entry:last-child details:not([open]) > .career-summary::before { bottom: 50%; }

.career-period {
  padding-inline-end: 14px;
  color: #e5edff;
  font-family: var(--gothic);
  font-size: clamp(14px, 1.08vw, 18px);
  font-weight: 400;
  line-height: 1.55;
  font-variant-numeric: lining-nums tabular-nums;
}

.career-period time, .period-end { white-space: nowrap; }
.career-period > .period-term, .period-term + .period-term { display: block; }
.period-term + .period-term { margin-top: 4px; }
.detail-meta:has(.period-term) { font-family: var(--gothic); }
.detail-meta .period-term, .detail-meta .period-end { padding-inline: 0; }
.period-end { display: inline-block; }
.period-end > .period-separator { padding-inline: .22em; }
.period-current {
  color: #1e409d;
  background: #f0f4ff;
  display: inline-block;
  padding: .12em .48em .16em;
  font: 400 1em/1.15 var(--type);
  white-space: nowrap;
}
.career-branch {
  position: relative;
  min-width: 0;
  margin-inline-start: var(--date-column);
  padding: 8px 0 clamp(24px, 3vw, 48px) var(--branch-inset);
}
.career-branch::before { inset-block: 0; inset-inline-start: 0; width: 1px; }
.career-intro { margin: 0; max-width: 54em; font-size: clamp(14px, 1.1vw, 18px); line-height: 1.85; }
.career-detail-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px; font-weight: 650; }
.career-toggle { flex: none; margin-inline-start: auto; color: #e5edff; font-size: 14px; white-space: nowrap; }
.career-disclosure:not([open]) .toggle-close, .career-disclosure[open] .toggle-open { display: none; }

.org-head {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: clamp(16px, 1.8vw, 32px);
  padding-inline-start: var(--branch-inset);
}
.org-logo {
  display: grid;
  flex: none;
  width: clamp(105px, 9.4vw, 140px);
  height: 52px;
  place-items: center;
  overflow: hidden;
  padding: 8px 10px;
  background-color: #fff;
}
.org-logo img { width: 100%; height: 100%; object-fit: contain; }
.org-logo-on-blue { background-color: #2857c8; }
.org-copy { min-width: 0; }
.org-name, .org-role { display: block; }
.org-name {
  font-size: clamp(20px, 1.6vw, 27px);
  font-weight: 700;
  line-height: 1.38;
  line-break: strict;
}
.org-name:lang(en) { font: 400 clamp(22px, 1.85vw, 30px)/1.25 var(--type); }
.org-role { margin-top: 3px; font-size: clamp(13px, 1.07vw, 17px); line-height: 1.5; }
.career-card, .career-detail-link { color: inherit; text-decoration: none; }

.career-group { container-type: inline-size; margin: clamp(24px, 2.3vw, 37px) 0 0; }
.career-group + .career-group { margin-top: clamp(28px, 2.7vw, 46px); }
.career-group h4 {
  margin: 0 0 12px;
  font-size: clamp(15px, 1.22vw, 20px);
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: .035em;
}

.career-cards {
  --card-gap: clamp(14px, 1.8vw, 28px);
  --card-width: min(68cqi, 720px);
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--card-gap);
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.career-cards::-webkit-scrollbar { display: none; }

.career-cards[tabindex] {
  /* The rail spans the window; images keep the same size as a single card in this group. */
  width: var(--rail-window, 100%);
  max-width: none;
  margin-inline-start: calc(0px - var(--rail-start, 0px));
  padding-inline: var(--rail-start, 0px) clamp(14px, 2vw, 32px);
}

.career-cards:focus-visible {
  outline: 2px solid white;
  outline-offset: -2px;
}

.career-cards > li {
  flex: 0 0 var(--card-width);
  min-width: 0;
}

.career-card {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  min-width: 0;
  background: #2145a9;
  color: #fff;
}

.career-card:focus-visible { outline: 3px solid white; outline-offset: -4px; }

.career-card-media {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: #fff;
}

.career-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.career-card-media--contain { padding: clamp(16px, 2vw, 36px); }
.career-card-media--contain img { object-fit: contain; }

.career-card-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 5px;
  padding: clamp(14px, 1.5vw, 24px) clamp(16px, 1.7vw, 28px);
  overflow-wrap: anywhere;
}

.career-card-body small {
  font-size: clamp(13px, 1.05vw, 17px);
  font-weight: 400;
  line-height: 1.35;
  font-variant-numeric: lining-nums tabular-nums;
}

.career-card-body small:has(.period-term) { font-family: var(--gothic); }

.career-card-body > strong {
  font-size: clamp(17px, 1.42vw, 24px);
  font-weight: 650;
  line-height: 1.5;
  line-break: strict;
}

@media (max-width: 900px) {
  .career-tree { --date-column: 0px; --branch-inset: 20px; }
  .career-summary {
    grid-template-columns: clamp(64px, 14vw, 108px) minmax(0, 1fr) auto;
    grid-template-areas: "logo period toggle" "logo copy toggle";
    column-gap: clamp(10px, 2.2vw, 22px);
    row-gap: 3px;
    padding-inline-start: var(--branch-inset);
  }
  .career-period { grid-area: period; padding: 0; font-size: 14px; }
  .org-head { display: contents; }
  .org-logo { grid-area: logo; width: 100%; height: 46px; }
  .org-copy { grid-area: copy; }
  .career-toggle { grid-area: toggle; font-size: 13px; }
}

@media (max-width: 700px) {
  .career-tree { --branch-inset: 16px; }
  .career-summary { grid-template-columns: clamp(54px, 17vw, 84px) minmax(0, 1fr) auto; column-gap: 9px; }
  .career-period { font-size: 12px; }
  .org-logo { height: 40px; padding: 6px; }
  .org-name { font-size: clamp(16px, 4.3vw, 21px); }
  .org-name:lang(en) { font-size: 21px; }
  .org-role { font-size: 12px; line-height: 1.45; }
  .career-toggle { font-size: 12px; }
  .career-cards { --card-gap: 12px; --card-width: calc(92cqi - var(--card-gap)); }
  .career-card-body { padding: 12px 15px 14px; }
}

.career-toggle { font: 400 clamp(23px, 2vw, 32px)/1 var(--type); }
.career-card .outbound { margin-inline-start: .35em; }