/* =====================================================================
   Schalk Neethling — résumé
   Print styles. Linked with media="print", so these rules apply only
   when printing or saving to PDF. They reuse the same custom-property
   token system as the screen styles, reassigning colour, type, and
   spacing for paper.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Page setup
   Margins are given in centimetres so the result is sensible on both
   A4 and US Letter without assuming a paper size.
   --------------------------------------------------------------------- */
@page {
  margin: 1.6cm 1.8cm;
}

/* ---------------------------------------------------------------------
   Token overrides for paper
   - Colours flatten to an ink-on-white scheme that reproduces reliably
     on monochrome printers and in PDF.
   - Type steps drop to point sizes for predictable physical sizing.
   - The larger spacing steps tighten so the document stays compact.
   --------------------------------------------------------------------- */
:root {
  --ink: #000000;
  --ink-soft: #1f1f1f;
  --ink-faint: #4a4a4a;
  --paper: #ffffff;
  --paper-raised: #ffffff;
  --line: #b9b9b9;
  --accent: #2a2a2a;
  --accent-strong: #000000;
  --tag-bg: transparent;
  --tag-ink: #1f1f1f;

  --step--1: 8.5pt;
  --step-0: 10pt;
  --step-1: 11.5pt;
  --step-2: 13pt;
  --step-3: 14pt;
  --step-4: 18pt;
  --step-5: 24pt;

  --space-3xs: 2pt;
  --space-2xs: 4pt;
  --space-xs: 5pt;
  --space-s: 7pt;
  --space-m: 11pt;
  --space-l: 14pt;
  --space-xl: 16pt;
  --space-2xl: 20pt;

  --content-max: none;
  --measure: none;
}

body {
  background-color: var(--paper);
  color: var(--ink);
  font-size: var(--step-0);
  line-height: 1.4;
}

/* ---------------------------------------------------------------------
   Hide on-screen-only chrome
   --------------------------------------------------------------------- */
.no-print,
.skip-link {
  display: none !important;
}

/* ---------------------------------------------------------------------
   Collapse the two-column section layout to a single linear flow.
   The sticky left rail does not belong on paper.
   --------------------------------------------------------------------- */
.site-header__inner,
.section,
.site-footer {
  display: block;
  max-inline-size: none;
  margin-inline: 0;
  padding-inline: 0;
  padding-block: 0;
}

.section {
  border-block-end: 0;
  padding-block-start: var(--space-l);
}

.section__head {
  position: static;
  display: block;
  margin-block-end: var(--space-s);
}

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
.site-header {
  border-block-end: 1px solid var(--line);
  padding-block-end: var(--space-m);
  margin-block-end: var(--space-s);
}

.identity {
  font-size: var(--step-5);
}

.identity__surname {
  color: var(--ink);
}

.identity__creed {
  font-size: var(--step-1);
}

.contact {
  gap: var(--space-2xs) var(--space-m);
  margin-block-start: var(--space-2xs);
}

/* Links read as plain ink on paper; the URL text already carries them. */
a {
  color: var(--ink);
  text-decoration: underline;
}

/* ---------------------------------------------------------------------
   Tags and skills render as outlined chips — legible, low ink.
   --------------------------------------------------------------------- */
.tag,
.skill-list__item {
  background-color: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
}

/* ---------------------------------------------------------------------
   Page-break control
   --------------------------------------------------------------------- */
/* Individual sub-blocks, projects, quotes, and bullets stay intact.
   A whole role is allowed to break between its sub-blocks so a long
   entry (such as Mozilla) does not leave a large gap on the prior page. */
.role__block,
.project,
.quote,
.detail-list__item {
  break-inside: avoid;
}

h1,
h2,
h3,
.section__eyebrow,
.section__head,
.role__subhead {
  break-after: avoid;
}

.section {
  break-inside: auto;
}

/* Keep the closing line with its attribution. */
.site-footer {
  break-inside: avoid;
  border-block-start: 1px solid var(--line);
  padding-block-start: var(--space-m);
  margin-block-start: var(--space-l);
  text-align: left;
}

.site-footer__creed {
  margin-inline: 0;
  max-width: none;
}

/* ---------------------------------------------------------------------
   Restore the section grid for body content width on paper:
   measure is removed so paragraphs use the full text column.
   --------------------------------------------------------------------- */
.detail-list,
.role__lead,
.project__desc,
.skills__line,
.quote,
.section__intro,
.identity__summary {
  max-width: none;
}