/* =========================================================================
 * /resume: the CV as a page, laid out after spidleweb.net/resume (the owner's
 * reference: view-source + phone screenshots, 2026-10) in the site's own fonts
 * (owner): Inter for text, labels and titles, Fraunces for the name.
 *   - warm paper ground, near-black ink
 *   - small wide-tracked uppercase labels, dates and buttons
 * ====================================================================== */


body.page--resume {
  --cv-bg: #f2f2ee;
  --cv-ink: #111111;
  --cv-muted: #64645f;           /* 5.3:1 on --cv-bg */
  background: var(--cv-bg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.page--resume { --cv-bg: #121211; --cv-ink: #ecece8; --cv-muted: #a3a39d; }
}
:root[data-theme="dark"] body.page--resume { --cv-bg: #121211; --cv-ink: #ecece8; --cv-muted: #a3a39d; }

.resume {
  box-sizing: border-box;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 72px) 16px 96px;
  font-family: var(--font-family-ui);
  color: var(--cv-ink);
}

.resume h2, .resume h3, .resume h4 { font-family: var(--font-family-ui); color: var(--cv-ink); }

.resume .micro {
  margin: 0;
  font-family: var(--font-family-ui);
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cv-muted);
  font-variant-numeric: tabular-nums;
}
.resume h2.micro { color: var(--cv-ink); }

.resume .reading-text {
  margin: 0;
  font-family: var(--font-family-ui);
  font-size: clamp(1rem, 1.3vw, 1.0625rem);
  line-height: 1.625;
  color: var(--cv-ink);
  text-wrap: pretty;
}

/* ---- identity + intro ---------------------------------------------------- */
.resume__id { margin-bottom: clamp(32px, 6vw, 56px); }
.resume__name {
  margin: 0 0 10px;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-regular, 400);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--cv-ink);
}

.resume__intro { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) {
  .resume__intro { grid-template-columns: minmax(0, 46rem) auto; justify-content: space-between; }
}

.resume a.resume__export {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  justify-self: start;
  min-height: 52px;
  padding: 0 28px;
  border: 2px solid var(--cv-ink);
  border-radius: 0;
  color: var(--cv-ink);
  text-decoration: none;
  white-space: nowrap;
}
.resume__export svg { width: 13px; height: 13px; }
@media (hover: hover) {
  .resume a.resume__export:hover { background: var(--cv-ink); color: var(--cv-bg); }
}
.resume a.resume__export:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* ---- sections ------------------------------------------------------------ */
.resume__section { padding-top: clamp(48px, 7vw, 80px); }
.resume__section > h2.micro { margin-bottom: 28px; }

.resume__jobs { display: grid; gap: 0 clamp(40px, 6vw, 88px); }
@media (min-width: 900px) { .resume__jobs { grid-template-columns: 1fr 1fr; } }

.resume__job + .resume__job { margin-top: clamp(40px, 6vw, 56px); }
@media (max-width: 899px) {
  .resume__career-column + .resume__career-column { margin-top: clamp(40px, 6vw, 56px); }
}

.resume__job-head { display: flex; flex-direction: column; gap: 6px; }
.resume__job-head h3 {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.resume__dates { white-space: nowrap; }
.resume__company { margin: 2px 0 20px !important; }

.resume__projects {
  display: grid;
  gap: 28px;
  margin-top: 28px;
  padding-left: clamp(24px, 6vw, 46px);
}
.resume__projects h4 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}
.resume__note { display: block; margin-top: 4px !important; }

.resume a.text-link {
  color: var(--cv-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
@media (hover: hover) {
  .resume a.text-link:hover { text-decoration-thickness: 3px; }
}
.resume a.text-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }

/* ---- details: earlier experience | education, skills, volunteer --------- */
.resume__details { display: grid; gap: 0 clamp(40px, 6vw, 88px); }
@media (min-width: 900px) { .resume__details { grid-template-columns: 1fr 1fr; } }

.resume__earlier { margin: 0; padding: 0; list-style: none; display: grid; gap: 24px; }
.resume__earlier li { display: flex; flex-direction: column; gap: 6px; }
.resume__earlier li > span:first-child {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--cv-ink);
}
.resume__edu + .resume__edu { margin-top: 28px; }
.resume__details .resume__job-head h3 { font-size: 1.25rem; }
.resume__details .resume__company { margin-bottom: 0 !important; }

/* ---- floating back + to-top (resume.js shows them after the intro) -------
 * Site styles (owner, 2026-10): the round ink button from the site's back-to-top
 * (/2026-birthday-dinner) with the header Resume pill's ink, highlight and press. */
.resume-float {
  box-sizing: border-box;
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border-primary, rgba(0, 0, 0, 0.12));
  border-radius: 50%;
  background: var(--text-primary, #0a0a0a);
  color: var(--bg-primary, #fff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 4px 14px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  text-decoration: none;
}
.resume-float svg { width: 20px; height: 20px; }
.resume-float--back { left: 16px; }
.resume-float--top { right: 16px; }
.resume-float.is-shown { opacity: 1; pointer-events: auto; }
.resume-float:active { scale: 0.96; }
.resume-float:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; opacity: 1; pointer-events: auto; }
@media (hover: hover) {
  .resume-float:hover { background: color-mix(in srgb, var(--text-primary, #0a0a0a) 84%, var(--bg-primary, #fff)); }
}
@media (prefers-reduced-motion: no-preference) {
  .resume-float { transition: opacity 160ms ease-out, background-color 160ms ease, scale 160ms ease-out; }
}

/* ---- print: the page itself prints like the PDF --------------------------- */
@media print {
  body.page--resume { background: #fff; }
  .site-header, .signoff, .resume__export, .skip-link, .resume-float { display: none !important; }
  .resume { padding: 0; max-width: none; }
  .resume a.text-link { text-decoration: none; }
}