/* ════════════════════════════════════════════════════════════════
   print.css — the print sheet, loaded as media="print" by pages that
   are meant to be printed (currently /resume.html only).

   Same tokens, same typefaces, one job: take the screen design off the
   page and put a document in its place. The shell of the design system
   stays in css/site.css — nothing here changes the screen.

   Rules kept:
   • chrome is removed (masthead, mobile overlay, skip link, page footer,
     dark contact band) — the header of a CV carries the contact details;
   • every colour collapses to black on white: a CV printed on a mono
     laser printer must not lose a heading to a 2.95:1 orange;
   • motion classes are forced visible — html.js hides .reveal until an
     IntersectionObserver fires, and paper has no observer;
   • nothing is sized in vw, so A4 gets the same layout at any zoom.
   ════════════════════════════════════════════════════════════════ */

@page {
  size: A4;
  margin: 14mm 15mm;
}

@media print {
  html,
  body {
    background: #fff;
    color: #000;
  }

  /* ── Chrome off ─────────────────────────────────────────────── */
  .masthead,
  .nav-overlay,
  .menu-btn,
  .skip,
  .pagefoot,
  .hero__scroll,
  .contact,
  .perf,
  .nf-search,
  .index__note,
  .print-hide {
    display: none !important;
  }

  .wrap {
    max-width: none;
    padding: 0;
  }

  /* The explainer paragraph beside a section head is a reading cue for
     the screen ("one column, most recent first…"), not CV content. */
  .head > p {
    display: none !important;
  }

  /* ── Motion classes: paper has no scroll position ───────────── */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  /* ── Colour collapses to ink ─────────────────────────────────── */
  a,
  .t-muted,
  .mono,
  .label,
  .spec__note,
  .fact__label,
  .ftable__key,
  .log__desc,
  .srow__no,
  .srow__time {
    color: #000 !important;
  }

  .label::before {
    background: #000;
  }

  .outline {
    -webkit-text-stroke: 0;
    color: #000;
    background: none;
  }

  .note {
    border: 0;
    border-left: 1.5pt solid #000;
    background: none;
    padding: 0 0 0 4mm;
    color: #000;
  }

  .tags span,
  .tag {
    border-color: #777;
    color: #000;
  }

  /* ── Type: points, not viewport units ───────────────────────── */
  .page-head {
    padding: 0 0 7mm;
    border-bottom: 1.5pt solid #000;
  }

  .page-head h1,
  .t-h1,
  .t-display {
    font-size: 18pt;
    line-height: 1.1;
    letter-spacing: 0;
    margin: 0 0 3mm;
  }

  .page-head p,
  .t-lead {
    font-size: 9.4pt;
    line-height: 1.42;
    max-width: none;
    color: #000;
  }

  .t-h2,
  .head h2 {
    font-size: 11.5pt;
    line-height: 1.14;
    letter-spacing: 0;
    margin: 0 0 2mm;
  }

  .t-h3,
  .t-h4,
  h3 {
    font-size: 10pt;
    line-height: 1.25;
    letter-spacing: 0;
  }

  .t-body,
  .prose,
  p {
    font-size: 8.9pt;
    line-height: 1.34;
    color: #000;
  }

  .t-small,
  .label,
  .mono,
  .t-mono,
  .spec__note,
  .fact__label,
  .field__hint,
  .form-note {
    font-size: 8pt;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
  }

  .label {
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 1.5mm;
  }

  .mono,
  .t-mono {
    font-family: 'PlexMono', monospace;
  }

  /* ── Layout rhythm for paper ────────────────────────────────── */
  .section,
  .section--tight,
  .pad-y {
    padding: 0;
    margin: 0 0 5mm;
  }

  .head {
    margin-bottom: 3mm;
    gap: 0;
  }

  .head__text {
    max-width: none;
  }

  .grid {
    gap: 0 6mm;
  }

  .hair-t {
    border-top: .5pt solid #999;
    padding-top: 2.4mm;
    margin-top: 2.4mm;
  }

  /* ── Data blocks ────────────────────────────────────────────── */
  .facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1pt solid #000;
    border-bottom: 1pt solid #000;
    margin-bottom: 5mm;
  }

  .fact {
    padding: 2.5mm 3mm 2.5mm 0;
    border-left: 0;
  }

  .fact__value {
    font-size: 13pt;
    line-height: 1.1;
  }

  .spec {
    border-top: 1pt solid #000;
    margin-top: 0;
  }

  .spec__row,
  .log__row,
  .deliver li,
  .ftable td,
  .ftable th,
  .faq details,
  .faq summary {
    border-color: #bbb;
    padding-top: 1.1mm;
    padding-bottom: 1.1mm;
  }

  .spec__row dt,
  .spec__row dd,
  .ftable,
  .ftable td,
  .ftable th,
  .deliver li {
    font-size: 8.6pt;
  }

  .deliver li {
    grid-template-columns: 4mm minmax(0, 1fr);
    gap: 1.6mm;
    font-size: 8.3pt;
    line-height: 1.34;
  }

  .ftable thead {
    display: table-header-group;
  }

  .ftable tbody tr:hover {
    background: none;
  }

  /* ── Buttons become lines of text ───────────────────────────── */
  .btn {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    color: #000 !important;
    font-size: 9pt !important;
    text-decoration: underline;
    text-underline-offset: 2pt;
  }

  .btn .arrow {
    display: none;
  }

  /* ── Page breaks ────────────────────────────────────────────── */
  /* Measured, not decorative: `break-inside: avoid` on a whole role costs a
     page (six roles -> 5 sheets instead of 4), so only the small units are
     kept whole — a bullet, a fact row, a table row, a FAQ block. A role may
     split between two bullets, which is normal on paper. */
  .deliver li,
  .spec__row,
  .fact,
  .faq details,
  .ftable tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  h1,
  h2,
  h3,
  .t-h1,
  .t-h2,
  .t-h3,
  .t-h4 {
    break-after: avoid;
    page-break-after: avoid;
  }

  a[href^="https://"] {
    text-decoration: none;
  }
}