/* Screen typography and reflow for the selected experience and its records.
   Printed resume dimensions and the archived studies remain independent. */
@media screen {
  .section :is(h2,h3,h4),
  .records-page :is(h1,h2,h3) {
    text-wrap: balance;
  }

  .project-heading > *,
  .record-portal-heading > *,
  .record-highlights-heading > *,
  .career-list summary > *,
  .certificate-toolbar > *,
  .resume-workspace > * {
    min-width: 0;
  }

  /* A square rotation box keeps the open/close mark on the same column. */
  .career-list summary { transition: background-color .2s; }
  .career-list summary:hover { padding-inline: 0; }
  .career-list .plus,
  .rr-evidence summary > span {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    line-height: 1;
    align-self: center;
    justify-self: center;
    font-size: 16px;
  }
  .career-list .plus { margin-inline-end: 4px; }
  .rr-evidence summary > span { flex: 0 0 16px; margin-inline: 4px; }

  .software-lead > span {
    display: inline-block;
    max-width: 100%;
    text-wrap: balance;
  }

  .credential-head {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px 14px;
  }
  .credential-head > :last-child { white-space: nowrap; }

  .certificate-toolbar h2 { text-wrap: balance; }
  .certificate-toolbar button { flex-shrink: 0; }

  @media (max-width: 760px) {
    .project-heading h2 {
      font-size: clamp(50px,15vw,98px);
      white-space: normal;
    }
    .record-portal h2 { font-size: clamp(36px,11.5vw,74px); }
  }

  @media (max-width: 500px) {
    .certificate-toolbar {
      display: grid;
      grid-template-columns: minmax(0,1fr) auto;
      gap: 12px;
      padding: 14px 16px 18px;
    }
    .certificate-toolbar button { grid-column: 2; grid-row: 1; }
    .certificate-toolbar h2 { grid-column: 1 / -1; grid-row: 2; }
    .certificate-image img { height: auto; aspect-ratio: 1280 / 989; }
  }

  @media (max-width: 380px) {
    .header .identity { width: max-content; max-width: none; }
    .credential-copy { padding-inline: 18px; }
    .credential-head { padding-inline: 14px; }
    .featured-credential:nth-child(3),
    .featured-credential:nth-child(4) { grid-column: 1 / -1; }
    .featured-credential:nth-child(3) figcaption,
    .featured-credential:nth-child(4) figcaption { padding: 20px; }
    .featured-credential:nth-child(3) h4,
    .featured-credential:nth-child(4) h4 { font-size: 22px; }
  }
}