/* Résumé — ATS-optimized single column. Screen shows a "paper" card; print
   strips all chrome to clean black-on-white. No inline styles (CSP: style-src 'self'). */

.resume-wrap {
  max-width: 850px;
  margin: 0 auto;
  padding: clamp(110px, 13vh, 150px) 20px 80px;
}

.resume-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 18px;
}
.resume-actions .r-hint { font-size: calc(12.5px * var(--fs, 1)); color: var(--mist-300, #8a97a6); margin-right: auto; }

.resume {
  background: #ffffff;
  color: #14181d;
  border-radius: 14px;
  padding: clamp(28px, 5vw, 56px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  font-family: "General Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

.resume a { color: #0b5cab; text-decoration: none; }
.resume a:hover { text-decoration: underline; }

.resume h1 { font-size: calc(28px * var(--fs, 1)); margin: 0 0 4px; letter-spacing: -.01em; color: #0e1216; }
.resume .r-title { font-size: calc(15px * var(--fs, 1)); font-weight: 600; color: #2b3138; margin: 0 0 12px; }
.resume .r-contact {
  font-size: calc(13px * var(--fs, 1)); color: #3a4148; margin: 0 0 6px;
  display: flex; flex-wrap: wrap; gap: 4px 14px;
}
.resume .r-auth { font-size: calc(12.5px * var(--fs, 1)); color: #2b3138; font-weight: 600; margin: 0 0 22px; }

.resume h2 {
  font-size: calc(13px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .08em;
  color: #0b5cab; border-bottom: 1.5px solid #d7dde3;
  padding-bottom: 5px; margin: 26px 0 12px;
}

.resume .r-summary { font-size: calc(14px * var(--fs, 1)); margin: 0; }

.r-job { margin: 0 0 16px; break-inside: avoid; }
.r-job-head {
  display: flex; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; align-items: baseline;
}
.r-role { font-size: calc(15px * var(--fs, 1)); font-weight: 700; margin: 0; color: #0e1216; }
.r-org { font-weight: 600; color: #2b3138; }
.r-dates { font-size: calc(12.5px * var(--fs, 1)); color: #5a626b; white-space: nowrap; }
/* nowrap keeps a date range on one line, which it can do right up until the text
   size is scaled. At step 4 (140%) on a 320px screen "Sep 2006 — Apr 2009 ·
   Dhaka, Bangladesh" is 323px wide and pushed the document 51px past the
   viewport. Let it wrap on narrow screens: a range split across two lines reads
   fine, a horizontally scrolling résumé does not. */
@media (max-width: 560px) { .r-dates { white-space: normal; } }
.r-job p { font-size: calc(13.5px * var(--fs, 1)); margin: 4px 0 0; }
.r-job ul { margin: 6px 0 0; padding-left: 18px; }
.r-job li { font-size: calc(13.5px * var(--fs, 1)); margin: 0 0 3px; }

.r-skills { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 5px 14px; font-size: calc(13.5px * var(--fs, 1)); margin: 0; }
.r-skills dt { font-weight: 700; color: #2b3138; }
.r-skills dd { margin: 0; }

.r-edu-item, .r-pub-item { font-size: calc(13.5px * var(--fs, 1)); margin: 0 0 9px; break-inside: avoid; }
.r-edu-item strong, .r-pub-item strong { display: block; color: #0e1216; }
.r-muted { color: #5a626b; }

@media (max-width: 620px) {
  .r-skills { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .r-skills dt { margin-top: 8px; }
}

/* ---- Print: clean black-on-white, no site chrome ---- */
@media print {
  .nav, .footer, .resume-actions, .scroll-progress, .skip-link,
  #hero-canvas, .hero-grid, #nav-toggle, .theme-toggle, .cmdk-trigger { display: none !important; }
  html, body { background: #fff !important; }
  .resume-wrap { padding: 0; max-width: none; }
  .resume { box-shadow: none; border-radius: 0; padding: 0; color: #000; }
  .resume a { color: #000; }
  .resume h1, .resume .r-role, .resume .r-edu-item strong, .resume .r-pub-item strong { color: #000; }
  .resume h2 { color: #000; border-color: #000; }
  .r-job, .r-edu-item, .r-pub-item { break-inside: avoid; }
  @page { margin: 14mm; }
}