/* Resume: the PDF's own sheets on Lynne's silver-grey (Point Blank), so the white pages read as paper. */
.page-resume { --field: var(--lynne); --on-field: var(--ink); --focus: var(--ink); }
.resume { width: min(820px, 100%); margin: 0 auto; padding: clamp(28px, 5vh, 56px) var(--gutter) 24px; box-sizing: content-box; }
.resume-bar { display: flex; justify-content: flex-end; align-items: baseline; gap: 24px; margin-bottom: 22px; }
/* The page's name in tone behind the sheets, as on the section pages (Hayden, 2026-10-20: "for consistency"), off the
   top left. */
.page-resume main { position: relative; overflow: hidden; }
.resume-title { position: absolute; z-index: -1; top: calc(var(--name-size) * -.076); left: calc(var(--name-size) * -.05); margin: 0;
  white-space: nowrap; pointer-events: none; font: 800 var(--name-size)/.74 var(--font-display); text-transform: uppercase; letter-spacing: -.01em;
  color: color-mix(in srgb, var(--field) 84%, #000); }
.resume-download { font: 600 18px/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; padding-bottom: 4px; border-bottom: 2px solid currentColor; }
.resume-download:hover { border-bottom-width: 4px; padding-bottom: 2px; }
/* Each sheet reads as paper: a hairline edge and a soft shadow, a gap between pages. */
.resume-page { display: block; width: 100%; height: auto; margin: 0 0 28px; border: 1px solid #E2E2DD; box-shadow: 0 2px 10px rgba(0,0,0,.07); }
@media (max-width: 899px) { .resume { box-sizing: border-box; } }

/* On a phone the sheets are too small to read: the page is the download link (Hayden, 2026-10-20). */
@media (max-width: 699px) {
  .resume-page { display: none; }
  .resume-bar { flex-direction: column; align-items: flex-start; gap: 28px; margin: 24px 0 40px; }
  .resume-title { position: static; white-space: normal; font-size: clamp(64px, 22vw, 120px); line-height: .8; color: var(--on-field); }
  .resume-download { font-size: 26px; letter-spacing: .14em; }
}