/* Resume uses the same type scale, BaseContent and sticky menu as the case. */
.resume-hero {
  padding-block: var(--space-48) var(--space-24);
}

.resume-hero h1 {
  margin-bottom: var(--space-24);
}

.resume-hero p {
  margin: 0;
}

/* Match the square portrait to the adjacent text when the header is a row. */
@media (min-width: 601px) {
  .resume-hero .profile-header--small > .profile-photo {
    width: calc(var(--line-height-36) + var(--space-4) + var(--line-height-24));
    height: calc(var(--line-height-36) + var(--space-4) + var(--line-height-24));
  }
}

.resume-section {
  border-top: 1px solid var(--rule);
  padding-block: var(--space-40);
  scroll-margin-top: var(--space-96);
}

.resume-section h2 {
  margin: 0 0 var(--space-24);
}

.resume-section h3 {
  margin: var(--space-40) 0 var(--space-16);
}

.resume-section h4 {
  margin: var(--space-24) 0 var(--space-12);
}

.resume-section p, .resume-section li {
  max-width: 760px;
}

.resume-section p {
  margin: 0 0 var(--space-16);
}

.resume-section ul {
  max-width: 760px;
  margin: 0 0 var(--space-24);
  padding-left: var(--space-24);
}

.resume-section li + li {
  margin-top: var(--space-8);
}

@media (max-width: 520px) {
  .resume-hero {
    padding-block: var(--space-32);
  }

  .resume-section {
    padding-block: var(--space-32);
  }

  .resume-section h3 {
    margin-top: var(--space-32);
  }
}

/* PDF layout only; font roles remain in the shared typography stylesheet. */
@page { size: A4; margin: 16mm 18mm; }
@media print {
  .resume-page .site-header,
  .resume-page .skip,
  .resume-page .page-footer,
  .resume-page .tooltip { display: none !important; }
  .resume-page .content-container { width: auto; max-width: none; padding: 0; }
  .resume-hero { padding: 0 0 var(--space-20); }
  .resume-hero h1 { margin-bottom: var(--space-12); }
  .resume-section { padding-block: var(--space-16); }
  .resume-section h2 { margin-bottom: var(--space-12); }
  .resume-section h3 { margin: var(--space-20) 0 var(--space-8); }
  .resume-section h4 { margin: var(--space-16) 0 var(--space-8); }
  .resume-section p { margin-bottom: var(--space-8); }
  .resume-section ul { margin-bottom: var(--space-12); padding-left: var(--space-20); }
  .resume-section li { padding-left: 0; margin: 0 0 var(--space-4); break-inside: avoid; }
  .resume-section li + li { margin-top: 0; }
  .resume-page :is(h1,h2,h3,h4) { break-after: avoid; }
  .resume-section h3 + p,
  .resume-section h3 + p + p { break-after: avoid; }
  .resume-page p { orphans: 3; widows: 3; }
}