/*
 * What the site looks like on paper: the same as it looks on screen.
 *
 * A theme is the reason someone picked it, and that holds for the copy they
 * hand to someone else. So this flattens nothing - no forced typeface, no
 * stripped backgrounds, no colour reset. It takes away the parts of a page
 * that only work on a screen, stops an entry breaking across a sheet, and
 * otherwise gets out of the way.
 *
 * Two rules here are load-bearing rather than cosmetic:
 *
 * `print-color-adjust: exact` is what makes a browser print backgrounds and
 * colours at all. Without it they are dropped to save ink, and the themes that
 * carry their design in colour come out as bare text.
 *
 * Nothing here may touch `content` on a pseudo-element. The brutalist CV draws
 * its dates in `time::before` from `data-year`, with the real date sized to
 * nothing, so a print sheet that clears pseudo-element content prints a CV
 * with no years on it.
 *
 * This is also the CV export: print, save as PDF, and it is always current.
 */

@page {
	margin: 14mm 12mm;
}

html {
	print-color-adjust: exact;
	-webkit-print-color-adjust: exact;
}

/* Nothing moves on paper. Transforms stay, because the scrapbook's cards are
   meant to sit crooked, but an animation frozen at an arbitrary frame is not a
   design, and a marquee parked off the side of the sheet is a blank. */
*,
*::before,
*::after {
	animation: none !important;
}

/* The parts of a page that only make sense on a screen: somewhere to navigate
   to, a filter to change, a list of headings to jump to, the ask, and the
   button that started the printing. */
body > header,
body > hr,
.hire-me,
.cv-actions,
.skill-filter,
.toc,
footer p:last-child {
	display: none !important;
}

/* Nobody wants a copyright notice on a CV they are handing to someone, so the
   footer empties out entirely here: the line below it, "pick a different
   theme", is already gone with the rest of the screen-only furniture. Every
   other page keeps its copyright on paper. */
body[data-page="/cv"] footer p:first-child {
	display: none !important;
}

/* Whose CV this is. `hidden` in the markup keeps it off every screen; here it
   becomes the title, and "CV" under it becomes the label.

   `color: inherit` because a theme styles the paragraph under a heading as the
   page's intro line, which is usually muted: the name would print in the grey
   meant for a subtitle. */
.print-name[hidden] {
	display: block !important;
	font-size: 2em;
	font-weight: 700;
	color: inherit;
	line-height: 1.1;
	margin: 0;
}

/* The theme keeps its own casing and letterfit here; only the size changes,
   because the page's title is now the line above it. */
.print-name[hidden] + h1 {
	font-size: 1.1em !important;
	margin: 2px 0 10px !important;
}

/* One thing to a page where a break would spoil it. A CV entry split across
   two sheets is how a printed CV starts looking careless. */
.cv-entry,
.cv-section,
.project-list > li,
.plex-list li,
.photo,
figure {
	break-inside: avoid;
}

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

p,
li {
	orphans: 3;
	widows: 3;
}

/* Paper cannot be clicked, so an external address is written out. Internal
   links are left alone: "/projects/yem" tells a reader nothing. */
a[href^="http"]::after {
	content: " (" attr(href) ")";
	font-size: 0.75em;
	word-break: break-all;
}

/* A screenshot at screen size is a sheet of its own. */
img {
	max-width: 100% !important;
	break-inside: avoid;
}