/*
 * Print: the page as a document. The chrome, the calls to action and the
 * motion all come off; type goes black on white and images stay whole.
 * Loaded with media="print", so it never blocks rendering on screen.
 */
@page {
  margin: 18mm 16mm;
}

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

/* Navigation, calls to action and decoration have no job on paper */
.topbar,
.site-header,
.site-footer,
.connect,
.breadcrumb,
.case-more,
.skip-link,
.theme-toggle,
.logo-row,
.case-video,
.journey__play,
.cta-link,
.btn {
  display: none !important;
}

/* Nothing sticks, nothing animates, nothing is hidden waiting for a scroll */
* {
  position: static !important;
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  box-shadow: none !important;
}

.site-main { padding: 0 !important; }
.container,
.case-figure,
.case-figures,
.case-statement { width: auto !important; max-width: none !important; margin-inline: 0 !important; padding-inline: 0 !important; }

h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; color: #000; }
h1 { font-size: 24pt; }
h2 { font-size: 15pt; }
h3 { font-size: 13pt; }
p, li, blockquote, figure, tr { break-inside: avoid; page-break-inside: avoid; }

img { max-width: 100% !important; height: auto !important; }
figure { margin: 8pt 0; }

/* Two columns collapse: paper is narrower than the screen this was drawn for */
.case-section,
.case-results,
.case-quote,
.split,
.work-grid__row,
.faq__grid,
.journey__list { display: block !important; }

/* On paper a question without its answer is no use, so the closed ones open */
.faq__answer[hidden] { display: block !important; }
.faq__question::before,
.faq__question::after { display: none !important; }

/* A link is only useful on paper if you can read where it goes */
a {
  color: #000;
  text-decoration: underline;
  /* undo the clipped-gradient treatment the display links use on screen */
  background-image: none;
  -webkit-text-fill-color: currentColor;
}
a[href^="http"]::after {
  content: " (" attr(href) ")";
  font-size: 9pt;
  word-break: break-all;
}
a[href^="/"]::after {
  content: " (https://www.martinkool.nl" attr(href) ")";
  font-size: 9pt;
}
a[href^="mailto"]::after,
a[href^="#"]::after { content: ""; }

/*
 * The CV on paper. It is the one page written to be printed, so it drops the
 * things that only work on screen and keeps every entry whole across a page
 * break. No separate PDF to keep in sync with the page.
 */
.cv__actions,
.cv-still,
.cv .connect { display: none !important; }
.cv__source { display: block !important; font-size: 9pt; color: #000; }
.cv-head { padding-block: 0 !important; }
.cv-head__top {
  display: block !important;
  padding-bottom: 6pt !important;
  border-bottom: 0.5pt solid #999 !important;
}
.cv-head__name { font-size: 22pt !important; line-height: 1 !important; }
/* beside the name it needs a column; on paper it simply follows it */
.cv-head__line { margin-top: 5pt !important; max-width: none !important; text-align: left !important; }
.cv__facts { display: block !important; margin-top: 6pt !important; }
.cv__fact { display: block !important; }
.cv__fact dt { display: inline; font-size: 9pt; }
.cv__fact dt::after { content: ": "; }
.cv__fact dd { display: inline; }
/* the eyebrow is for the screen; on paper the name and the address carry it */
.cv-head__label { display: none !important; }
.cv-section {
  display: block !important;
  padding-block: 10pt !important;
  border-top: 0.5pt solid #999 !important;
  break-inside: auto;
}
.cv-section__title { font-size: 9pt; margin-bottom: 6pt; }
.cv-entry { display: block !important; break-inside: avoid; page-break-inside: avoid; }
.cv-entry + .cv-entry { margin-top: 10pt; }
.cv-entry__when { font-size: 9pt; }
.cv-entry__role { font-size: 11pt; }
.cv-entry__list li { max-width: none; }
.cv-tags { display: block !important; }
.cv-tags li { display: inline; border: 0; padding: 0; font-size: 10pt; }
.cv-tags li + li::before { content: " · "; }
/* a printed CV full of bracketed URLs is unreadable; the page says where it
   lives once, at the top */
.cv a[href^="/"]::after,
.cv a[href^="http"]::after { content: "" !important; }