/* The print stylesheet for the V3 redesign, served beside site.css with its own hash.

   The screen design commits to one charcoal look; PAPER IS A LIGHT SURFACE, so this file
   re-points the palette the other way: charcoal ink on white paper. NO CANONICAL HUE
   LITERAL HERE -- the two derivations below are the same var() chains `site.css`
   declares, resolved from the per-page exported-hue style, and the expanded URLs use the
   `--origin` each page carries so the hostname is not restated here. */

:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --link: var(--accent, var(--ink));
  --brand-ink: var(--wordmark, var(--ink));
}

@page {
  margin: 18mm 16mm;
}

html, body {
  overflow: visible;
}
body {
  background: none;
  color: var(--brand-ink);
  font-size: 0.78em;
  line-height: 1.15;
}

/* Chrome, controls and anything that cannot be actioned on paper. The wordmark stays --
   it is the only thing identifying the sheet once it leaves the screen. The illustrations
   are drawn in light strokes for the charcoal screen; on paper they are invisible ink. */
header nav.main,
.menu-btn,
.skip,
.art,
.hero-art,
video {
  display: none;
}

/* The dark surface never reaches paper: every fill goes, every light ink turns charcoal. */
main, header, footer,
main :is(section, div, article, aside, figure, details, blockquote, pre, table, th, td) {
  background: none;
}
header .wm, header .iq,
main :is(h1, h2, h3, h4, p, a, li, dt, dd, th, td, strong, em, b, small, span, div,
         figcaption, blockquote, address, summary, cite, data, time, label),
footer, footer :is(a, address, span, div) {
  color: var(--brand-ink);
}
.kick { color: var(--link); }

header {
  border-bottom: 1px solid var(--brand-ink);
  padding-block: 0 0.5rem;
}

main, header, footer, .wrap {
  max-width: none;
  width: auto;
  margin: 0;
  padding-inline: 0;
}

/* Screen rhythm is deliberately cinematic; paper needs the same words in a compact
   reading measure. These rules remove layout whitespace without hiding page content. */
main section, main .wrap, .hero {
  min-height: 0;
  padding-block: 0.3rem;
}
main li { margin: 0.15rem 0; }
.big { font-size: 1.35rem !important; }
.lead, .body, .prose p { max-width: none; }
/* The illustration column is hidden on paper; give the words the full measure, and let
   an expanded URL wrap as ordinary text instead of riding an unwrappable flex line. */
.band { display: block; }
.row { padding-block: 0.35rem; }
.more { display: inline; }
.sec, .hero { padding-block: 0.3rem; }
.frow { padding-block: 0.3rem; }
th, td { padding: 0.25rem 0.4rem; }
details, summary { margin: 0.15rem 0; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; }
h1, h2, h3, h4, p, ul, ol, dl, details, figure, table, blockquote {
  margin-block: 0.35rem;
}
blockquote {
  padding-inline-start: 1rem;
  font-size: 1rem;
  line-height: 1.2;
}
aside, details, pre {
  border: 1px solid;
}

/* Keep the units that only make sense whole, and never orphan a heading from its text. */
figure, table, blockquote, pre, dl, li {
  break-inside: avoid;
}
h1, h2, h3, h4 {
  break-after: avoid;
  break-inside: avoid;
}
p, li {
  orphans: 3;
  widows: 3;
}

/* Expanded URLs: a printed link that cannot be typed back in is decoration. Root-relative
   hrefs get the origin the page carries; absolute, tel: and mailto: print as authored;
   in-page fragments print nothing, because they point at the sheet in your hand. */
a[href^="/"]::after {
  content: " (" var(--origin) attr(href) ")";
}
a[href^="http"]::after,
a[href^="tel:"]::after,
a[href^="mailto:"]::after {
  content: " (" attr(href) ")";
}
a[href^="#"]::after {
  content: "";
}
a[href]::after {
  display: block;         /* its own line: the address never wraps mid-string, and the
                             text layer keeps it contiguous for anyone typing it back */
  font-size: 0.8em;
  font-family: var(--mono-font, monospace);
  white-space: nowrap;
  text-transform: none;   /* a typeable address is typed in the case it prints */
  letter-spacing: 0;
}
a[href^="#"]::after { display: none; }

/* On paper an image is decoration unless it carries data; cap it so it cannot take a page
   to itself, and keep its caption with it (the break-inside rule above). */
img {
  max-height: 4.25rem;
}

@media (prefers-reduced-motion: no-preference) {
  *, *::before, *::after {
    animation: none;
    transform: none;
    transition: none;
  }
}