/*
 * Print. The spread is a screen idea; on paper it is one column of text.
 *
 * This file had never once been looked at through a printer. Emulating print
 * and measuring what came out found five things, and the first of them is the
 * whole reason the rest went unnoticed:
 *
 *   - the headline was gone. The <h1> is `.plate__title`, and it lives inside
 *     `<aside class="plate-page">`, which the hide list deleted outright. On
 *     five of eight views the h1 returned zero client rects and not one
 *     character of the headline appeared in the printed text. An article
 *     printed to a sheet of paper that never said what it was, opening instead
 *     with "the headline began on the plate" — a pointer to something this
 *     stylesheet had just removed;
 *   - the night edition leaked through. The colour reset named only html,
 *     body, .site and .prom-page, so every element below them kept its Noir
 *     colours: 41 text nodes under AA on the index, two of them at 1.17:1,
 *     which is white ink on white paper;
 *   - the footer printed. 801px of a 920px page — an entire extra sheet of
 *     site furniture at the end of every article;
 *   - the pull quote hung off the left edge and lost its first four
 *     characters, because `.prom-page > *` zeroes the padding its negative
 *     margin was hanging into;
 *   - the front page printed to seven sheets and opened with a "Read the
 *     cover story" button.
 *
 * The rule underneath all five: on paper, keep what a reader would keep — the
 * title, the byline, the date, the words, the pictures and the captions — and
 * drop everything that only works because it can be pressed.
 */

@page {
	margin: 18mm 16mm;
}

/*
 * Ink first, and to everything.
 *
 * A reset that names four elements leaves every descendant carrying whatever
 * the edition gave it, and the edition might be Noir. The universal selector
 * is the only one that cannot miss a node, and print is the one context where
 * its cost does not matter.
 */
*,
*::before,
*::after {
	color: #000000 !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	filter: none !important;
}

html,
body {
	background: #FFFFFF !important;
}

html,
body,
.site,
.prom-page,
.plate-page,
.plate {
	position: static !important;
	display: block !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: visible !important;
}

/*
 * What paper has no use for.
 *
 * `.plate-page` is NOT in this list any more, and must not go back into it:
 * the headline is inside it. What goes is the photograph's frame and the
 * plate's own furniture, not the element that carries the title.
 */
.fold,
.page-top,
.menu-panel,
.ad,
.subscribe,
.acts,
.next,
.also,
.comments,
.skip,
.footer,
.contents,
.cards,
.opening__actions,
.plate__frame,
.plate__rule,
.plate__continues,
.plate__foot .action,
.quote-float,
.vtog,
.reading,
.stamp {
	display: none !important;
}

/* The masthead prints once, small, so a loose sheet says whose it is. */
.masthead {
	margin: 0 0 6mm !important;
	font-size: 12pt !important;
	letter-spacing: .3em !important;
}

.brand__wordmark--foil {
	-webkit-text-fill-color: #000000 !important;
}

.plate__body {
	position: static !important;
	padding: 0 !important;
}

.plate__kicker {
	margin: 0 0 2mm !important;
	font-size: 9pt !important;
	letter-spacing: .18em !important;
	text-transform: uppercase;
}

/*
 * The headline, at a size a headline should be, and never orphaned from the
 * paragraph it introduces.
 */
.plate__title,
.story__title {
	margin: 0 0 4mm !important;
	font-size: 24pt !important;
	line-height: 1.12 !important;
	page-break-after: avoid;
}

/*
 * The screen splits the headline in two — part on the plate, part on the page —
 * and hides the whole of it in a screen-reader span. On paper there is one
 * column, so the full headline is the visible one and the split half goes.
 */
.story__title .screen-reader-text {
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	clip: auto !important;
	clip-path: none !important;
	white-space: normal !important;
}

.story__title-a,
.story__from {
	display: none !important;
}

/* The rail is the byline and the date: keep it, set it as a line of credits. */
.rail {
	margin: 0 0 6mm !important;
	font-size: 9pt !important;
}

.rail__field {
	display: inline !important;
}

.rail__field + .rail__field::before {
	content: " · ";
}

.rail__label {
	display: none !important;
}

.rail__value {
	display: inline !important;
}

.prom-page > * {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.story__copy {
	max-width: none;
	font-size: 11pt;
	line-height: 1.5;
}

/*
 * Nothing hangs off the edge.
 *
 * The pull quote and the wide figure are set with negative margins that hang
 * into the column's padding — and `.prom-page > *` above takes that padding
 * away, so on paper the quote hung off the left edge and lost its first four
 * characters. On one column there is nothing to hang into.
 */
.pull,
.copy figure.wide,
.copy .alignwide,
.copy .alignfull {
	width: auto !important;
	max-width: 100% !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
}

.story__copy a::after {
	content: " (" attr(href) ")";
	font-size: 9pt;
	color: #555555 !important;
	word-break: break-all;
}

/* An internal link's URL is noise on paper: the reader has the magazine. */
.story__copy a[href^="/"]::after,
.story__copy a[href*="prominentmagazine.co.uk"]::after {
	content: "";
}

img {
	max-width: 100% !important;
	page-break-inside: avoid;
}

figure,
blockquote,
.pull {
	page-break-inside: avoid;
}

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