/* Designed résumé: a paper sheet with a contact and skills sidebar. It keeps its own
   palette in every site look so it reads like a document, and prints to one
   US Letter page for Neal-Spangler-Resume.pdf. */
.resume-page { padding-block: 2rem 3.5rem; }
.resume-tools { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 1.4rem; }

.sheet {
  --ink: #16212e; --ink-soft: #4c5a69; --navy: #14283c; --teal: #2fb3a3; --teal-ink: #0e7c70; --rule: #d9e1e7;
  display: grid; grid-template-columns: 2.55in minmax(0, 1fr);
  width: 100%; max-width: 8.5in; min-height: 11in; margin: 0 auto;
  background: #fff; color: var(--ink); font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 10.5pt; line-height: 1.42; box-shadow: 0 20px 50px -24px rgb(0 0 0 / 0.45); border-radius: 4px; overflow: hidden;
  font-variation-settings: normal;
}
.sheet a { color: inherit; text-decoration: none; }
.sheet h1, .sheet h2, .sheet h3 { font-family: inherit; letter-spacing: 0; text-wrap: balance; }
.sheet h2::before { content: none !important; }
.sheet p { max-width: none; }

/* the main column comes first in the HTML (so the h1 leads the headings); the sidebar is placed left of it */
.sheet-side { grid-column: 1; grid-row: 1; }
.sheet-main { grid-column: 2; grid-row: 1; }

/* sidebar */
.sheet-side { background: var(--navy); color: #e8eef3; padding: 0.42in 0.3in; display: flex; flex-direction: column; gap: 0.2in; }
.sheet-photo { width: 1.55in; height: 1.55in; border-radius: 50%; object-fit: cover; border: 3px solid var(--teal); margin: 0 auto 0.04in; }
.sheet-side h2 { font-size: 8.4pt; font-weight: 700; letter-spacing: 0.06em; color: var(--teal); margin: 0 0 0.07in; font-variation-settings: "wdth" 110; }
.sheet-side h3 { font-size: 8.4pt; font-weight: 700; margin: 0.07in 0 0.01in; color: #fff; }
.sheet-side p { margin: 0; font-size: 9pt; color: #c9d5df; line-height: 1.38; }
.sheet-contact { list-style: none; padding: 0; margin: 0; font-size: 8.5pt; display: grid; gap: 0.03in; word-break: break-word; }
.sheet-contact li { margin: 0; }
/* the LinkedIn URL stays on one line, so the PDF text layer keeps it whole */
.sheet-contact .contact-linkedin { white-space: nowrap; font-size: 7.6pt; letter-spacing: -0.01em; }
.sheet-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.08in; margin: 0; }
.sheet-stats div { background: rgb(255 255 255 / 0.07); border-radius: 4px; padding: 0.06in 0.07in; }
.sheet-stats dt { font-size: 13pt; font-weight: 800; color: #fff; line-height: 1.05; font-variation-settings: "wdth" 115; }
.sheet-stats dd { margin: 0.02in 0 0; font-size: 8pt; color: #b9c7d3; line-height: 1.25; }

/* main column */
.sheet-main { padding: 0.42in 0.42in 0.36in; }
.sheet-head { border-bottom: 2px solid var(--teal); padding-bottom: 0.12in; margin-bottom: 0.14in; }
.sheet-head h1 { font-size: 25pt; font-weight: 800; margin: 0; line-height: 1; font-variation-settings: "wdth" 118; color: var(--navy); }
.sheet-role { font-size: 11.5pt; font-weight: 600; color: var(--teal-ink); margin: 0.05in 0 0.08in; }
.sheet-summary { margin: 0; color: var(--ink-soft); }
.sheet-main h2 { font-size: 10pt; font-weight: 800; color: var(--navy); margin: 0.12in 0 0.06in; padding-bottom: 0.03in; border-bottom: 1px solid var(--rule); font-variation-settings: "wdth" 112; }
.sheet .job { margin-bottom: 0.1in; }
.sheet .job-head { display: flex; justify-content: space-between; gap: 0.2in; align-items: baseline; }
.sheet .job h3 { font-size: 10pt; font-weight: 700; margin: 0; }
.sheet .dates { font-size: 8.6pt; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sheet .org { margin: 0.01in 0 0.03in; color: var(--teal-ink); font-size: 8.8pt; font-weight: 600; }
/* a text bullet, so the PDF text layer carries U+2022 (the default disc is drawn as a shape).
   The first space after \2022 ends the CSS escape; the second separates the bullet from the text. */
.sheet .job ul { margin: 0; padding-left: 0.16in; list-style-type: "\2022  "; }
.sheet .job li { margin: 0.025in 0 0; }
.sheet .job li::marker { color: var(--teal); }
.sheet .job-compact { margin-bottom: 0.06in; }
.sheet .job-compact .org { color: var(--ink-soft); font-weight: 400; }
.sheet-projects { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.05in; }
.sheet-projects li { margin: 0; }
.sheet-projects a { color: var(--teal-ink); white-space: nowrap; } /* a project URL never splits across lines */

/* screen only: Chrome's print layout can match narrow-width queries and stack the sheet */
@media screen and (max-width: 760px) {
  .sheet { grid-template-columns: 1fr; min-height: 0; font-size: 10.5pt; }
  .sheet-side, .sheet-main { grid-column: auto; grid-row: auto; } /* stacked in source order: main, then sidebar */
  .sheet-photo { width: 7rem; height: 7rem; }
}

@media print {
  @page { size: letter; margin: 0; }
  html, body { background: #fff !important; }
  body { background-image: none !important; }
  .site-header, .site-footer, .resume-tools, .looks, .skip { display: none !important; }
  .resume-page { padding: 0; width: 100%; max-width: none; }
  .sheet { box-shadow: none; border-radius: 0; width: 8.5in; height: 11in; max-width: none; outline: 0 !important; margin: 0 !important; }
  .sheet, .sheet-side { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* a little tighter on paper so the sidebar fits one letter page */
  .sheet-side { gap: 0.15in; }
  .sheet-main { line-height: 1.34; }
  .sheet-photo { width: 1.35in; height: 1.35in; }
}