.docpage { display: block; min-height: 100vh; background: #f5f5f4; padding: 48px 24px; box-sizing: border-box; }
.docpage .page { width: 8.5in; max-width: 100%; min-height: 11in; margin: 0 auto; background: #fff; box-shadow: 0 2px 10px rgba(20,20,19,0.12); box-sizing: border-box; }
/* "screen and" matters: the 8.5in print page box is 816px wide and would
   otherwise trigger these breakpoints and collapse the printed resume */
@media screen and (max-width: 900px) {
  .docpage { padding: 20px 10px; }
  .docpage .page { min-height: auto; padding: 32px 26px !important; }
  .r-cols { grid-template-columns: 1fr !important; gap: 28px 36px !important; }
}
@media screen and (max-width: 480px) {
  .docpage { padding: 10px 6px; }
  .docpage .page { padding: 24px 18px !important; }
  .docpage .page > header { flex-wrap: wrap; }
  .docpage .page > header > p { text-align: left !important; }
}
@page { size: 8.5in 11in; margin: 0; }
@media print {
  html, body { margin: 0 !important; padding: 0 !important; background: none !important; height: auto !important; overflow: visible !important; }
  .docpage { padding: 0; background: none; min-height: auto; }
  .docpage .page { box-shadow: none; max-width: none; margin: 0; min-height: auto; }
  h1,h2,h3,h4,h5,h6 { break-after: avoid; }
  figure,pre,blockquote,img,svg,tr { break-inside: avoid; }
  p,li { orphans: 3; widows: 3; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}