/* ==========================================================================
   Resume — the PDF, drawn page by page on the site's white (resume.js, pdf.js)
   Loads after site.css (tokens, nav, section nav, footer, button, text link).

   Two sheets of paper on white: a hairline and a long, soft lift so they read as paper without a grey
   ground. Each is drawn at the screen's density (sharp on retina and 32-inch screens alike), with a
   transparent text layer on top so the words can be selected, searched and read aloud. The sheets keep
   their exact US Letter shape before they're drawn, so nothing shifts as they arrive.
   ========================================================================== */
.rs {
  --accent: #0B57D0;                 /* the résumé's own blue */
  --paper-w: min(100% - var(--gutter) * 2, 880px);
  padding: calc(var(--chrome) + clamp(40px, 8vh, 96px) + env(safe-area-inset-top, 0px)) 0 clamp(72px, 12vh, 140px);
  background: #FFFFFF;
}

/* ---------- Header ---------- */
.rs-head {
  display: grid;
  justify-items: center;
  gap: clamp(14px, 2.2vh, 22px);
  width: var(--paper-w);
  margin: 0 auto clamp(44px, 7vh, 80px);
  text-align: center;
}
.rs-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 400 15px/1.3 var(--font-sans);
  color: var(--ink-2);
}
.rs-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.rs-title {
  font: 300 clamp(44px, min(6vw, 10vh), 88px)/1.02 var(--font-serif);
  letter-spacing: -0.03em;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  text-wrap: balance;
}
.rs-lede { max-width: 46ch; font: 400 17px/1.5 var(--font-sans); color: var(--ink-2); text-wrap: pretty; }
.rs-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; margin-top: 6px; }
.rs-actions .btn { margin-top: 0; }
.rs-meta { font: 400 13px/1 var(--font-sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------- The sheets ---------- */
.rs-doc { display: grid; justify-items: center; gap: clamp(28px, 4vh, 48px); scroll-margin-top: var(--chrome); }
.sheet {
  position: relative;
  width: var(--paper-w);
  aspect-ratio: 612 / 792;          /* US Letter, as the PDF is set */
  margin: 0;
  scroll-margin-top: calc(var(--chrome) + 20px);
}
.sheet__paper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(15, 15, 13, 0.07),
    0 1px 2px rgba(15, 15, 13, 0.05),
    0 24px 60px -28px rgba(15, 15, 13, 0.28),
    0 60px 120px -60px rgba(15, 15, 13, 0.18);
}
/* while a sheet is being drawn: a quiet sweep of light across the blank paper */
.sheet:not(.is-drawn) .sheet__paper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(15, 15, 13, 0.035) 50%, transparent 70%) 0 0 / 240% 100%;
  animation: rs-sweep 1.6s var(--ease-in-out) infinite;
}
@keyframes rs-sweep { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.sheet canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s var(--ease-out); }
.sheet.is-drawn canvas { opacity: 1; }

/* the text layer: invisible type over the drawing, for selection, find-in-page and screen readers */
.sheet .textLayer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  line-height: 1;
  opacity: 1;
  text-align: initial;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  caret-color: CanvasText;
  z-index: 2;
}
.sheet .textLayer :is(span, br) { position: absolute; color: transparent; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.sheet .textLayer span.markedContent { top: 0; height: 0; }
.sheet .textLayer ::selection { background: rgba(11, 87, 208, 0.22); }
.sheet .textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default; user-select: none; }

/* page arrival: each sheet rises a little as it's reached */
.motion .sheet { opacity: 0; translate: 0 28px; transition: opacity 0.9s var(--ease-out), translate 1.1s var(--ease-out); }
.motion .sheet.is-in { opacity: 1; translate: 0 0; }

.rs-fallback { display: none; }
.no-js .rs-fallback,
.rs-doc.is-failed .rs-fallback { display: block; }
.rs-doc.is-failed .sheet { display: none; }

/* the section nav's Download sits apart from the page links */
.rs-sub-dl { font-weight: 500; color: var(--ink); }
.is-framed [data-download] { display: none; }   /* inside a sandboxed preview, downloads are blocked: don't offer one */

@media (max-width: 819px) {
  .rs { --paper-w: calc(100% - 24px); }
  .rs-title { font-size: clamp(40px, 11vw, 56px); }
  .rs-lede { font-size: 16px; }
  .sheet__paper { border-radius: 4px; }
  .rs-sub-dl, .rs-sub-sep { display: none; }
}
@media (min-width: 1900px) and (min-height: 1000px) {
  .rs { --paper-w: min(100% - var(--gutter) * 2, 1080px); }
  .rs-title { font-size: 104px; }
  .rs-lede { font-size: 20px; }
}