/* ============================================================
   PRINT

   A portfolio does get printed — by a recruiter making a shortlist, or
   saved to PDF for a hiring panel. Screen CSS produces a poor page:
   grey text photocopies badly, link destinations vanish, and rows break
   across pages mid-entry.

   Loaded with media="print" so it costs nothing on screen.
   ============================================================ */

@page {
  margin: 18mm 16mm;
}

body {
  background: #fff;
  color: #000;
  font-size: 11pt;
  line-height: 1.4;
}

/* On paper there is no halation and no OLED, so pure black is correct
   and reproduces better than a near-black grey. */
.masthead__intro,
.ledger__desc,
.ledger__meta,
.footer__note,
.label {
  color: #000 !important;
}

/* Interactive affordances mean nothing on paper. */
.skip-link { display: none; }

/* A ledger row split across a page break is unreadable. */
.ledger__row {
  break-inside: avoid;
  page-break-inside: avoid;
  padding: 6pt 0;
  border-bottom: 0.5pt solid #000;
}
.ledger { border-top: 0.5pt solid #000; }

h1 { font-size: 24pt; }
h2 { font-size: 14pt; break-after: avoid; page-break-after: avoid; }

/* Print the destination after each link, otherwise the page loses every
   URL it points at. Skip mailto: — the address is already the text. */
.link::after,
.ledger__row[href]::after {
  content: " (" attr(href) ")";
  font-size: 8pt;
  word-break: break-all;
}
.link[href^="mailto:"]::after { content: ""; }

/* Never print a background fill: it wastes toner and inverts the type. */
.ledger__row:hover,
.ledger__row:focus-visible {
  background: transparent !important;
  color: #000 !important;
}