/* print.css — how the site prints, and how it becomes a PDF.
 *
 * The site had no print styles at all, which is where its three worst printed
 * faults came from: the front page's hero came out as a black rectangle, group
 * members were sliced in half across page breaks, and the themes diagram sat
 * tiny in a band of white.
 *
 * Loaded with media="print", so none of this touches the screen.
 *
 * scripts/make-pdfs.sh renders the pages through this stylesheet.
 */

@page {
	size: A4 portrait;
	/* The layout is wide; narrow margins buy the diagrams and the member grid
	   real width back. */
	margin: 12mm 10mm;
}

/* Backgrounds are dropped when printing unless a page asks for them. Almost
   everything that carries meaning here is a background: the research tiles'
   photographs, the theme dots beside the publication filters, the album's
   paper. Ask for them once, at the root. */
* {
	-webkit-print-color-adjust: exact !important;
	print-color-adjust: exact !important;
}

body {
	background: #ffffff;
}

/* The template sizes everything in rem off an 18pt root -- a deliberate,
   generous scale for a screen viewed at arm's length. On paper it reads as
   large-print and costs sheets: People ran to 46 of them. 11pt is a normal
   document size, and every margin, padding and heading follows it down. */
html {
	font-size: 11pt !important;
}

/* ── Chrome that means nothing on paper ─────────────────────────────────── */

.nav,
.gallery .forward,
.gallery .backward,
.album-nav,
.photo-viewer,
.nav-sub-toggle {
	display: none !important;
}

/* ── The front page's hero ──────────────────────────────────────────────── */

/* On screen this is a scroll-driven piece: a full-viewport sticky stage, the
   photograph beneath two dark gradient scrims whose opacity follows scroll
   position. Printed, the scroll position is whatever it happened to be, and
   100vh means one whole page -- so the page came out as a near-black
   rectangle with the photograph lost behind the scrims.

   On paper it becomes what it is: a photograph with the logo under it. */

.hero-scroll {
	height: auto !important;
}

.hero-sticky {
	position: static !important;
	height: auto !important;
	overflow: visible !important;
}

.hero-bg {
	position: static !important;
}

.hero-bg img {
	width: 100%;
	height: auto !important;
	/* Small enough that the photograph and the logo beneath it stay on the
	   same sheet, with the opening paragraph after them. */
	max-height: 72mm;
	object-fit: cover;
}

.hero-scroll {
	break-inside: avoid;
	page-break-inside: avoid;
}

/* The scrims exist to hold white text over the photograph. Nothing is over it
   here, so they would only darken it. */
.scrim-base {
	display: none !important;
}

.hero-text {
	position: static !important;
	padding: 6mm 0 0 0 !important;
	text-align: center;
}

#heroSticky .hero-text h1 .hero-logo {
	width: 70mm;
	/* index.html's own <style> comes after this file and sets margin: 0, so
	   the centring has to insist. */
	margin: 0 auto !important;
	/* The drop shadow was for legibility against the photograph. */
	filter: none !important;
}

.hero-text p,
.hero-text .hero-menu {
	color: #30363d !important;
	text-shadow: none !important;
}

/* On screen the credit is white type in the corner of the photograph. Here
   the hero unstacks into normal flow, so it follows the picture as a line of
   its own -- absolute positioning would otherwise anchor it to the page. */
.hero-credit {
	position: static !important;
	color: #6b7280 !important;
	text-shadow: none !important;
	text-align: right;
	margin: 1mm 0 0 !important;
	/* The screen rule insets it from the viewport edge; on paper the
	   photograph above it runs the full width of the text column. */
	padding: 0 !important;
}

/* ── Things the page only reveals when you scroll ───────────────────────── */

/* The template holds sections at is-inactive and each gallery photograph at
   opacity 0 until you scroll to them. Paper does not scroll, so the research
   tiles printed as flat grey rectangles. */
.is-inactive,
[class*="onscroll-"],
[class*="onload-"] {
	opacity: 1 !important;
	transform: none !important;
}

.gallery article .image img,
.banner .image img,
.spotlight .image img {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* ── The research tiles ─────────────────────────────────────────────────── */

/* On screen a tile is a photograph with its text laid over it, the caption
   absolutely positioned at height: 100%. On paper the same text needs more
   lines than the photograph is tall, so it overflowed its tile and printed
   across the one below -- headings struck through by other headings. And
   because the tiles are flex items, break-inside could not keep them off a
   page boundary either: they were sliced through the middle.

   Printed, a tile becomes what it is on paper: a photograph with its text
   underneath. One per row, so each is wide enough to read and short enough
   to stay whole. */

.gallery.style2 > .inner {
	display: block !important;
	overflow: visible !important;
}

.gallery.style2 article {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 0 8mm 0 !important;
	break-inside: avoid;
	page-break-inside: avoid;
}

.gallery.style2 article .image img {
	max-height: 52mm;
	object-fit: cover;
	width: 100%;
}

.gallery.style2 article .caption {
	position: static !important;
	height: auto !important;
	opacity: 1 !important;
	background: none !important;
	padding: 3mm 0 0 0 !important;
	text-align: left !important;
	color: #30363d !important;
}

.gallery.style2 article .caption h2,
.gallery.style2 article .caption h3,
.gallery.style2 article .caption h4,
.gallery.style2 article .caption p {
	color: #30363d !important;
	text-shadow: none !important;
}

/* "Details" is a link to a filtered list. There is nothing to click here. */
.gallery.style2 article .caption .button,
.gallery.style2 article .caption ul.actions {
	display: none !important;
}

/* ── Publications ───────────────────────────────────────────────────────── */

/* The theme filter is a set of buttons. On paper it is a column of dead
   words costing a fifth of every page's width, so the citations get the
   whole measure instead. */
#publications-filter {
	display: none !important;
}

.publications-layout {
	display: block !important;
}

#publications-list {
	width: 100% !important;
	max-width: none !important;
	flex: none !important;
}

/* ── Keep things whole across page breaks ───────────────────────────────── */

/* A member sliced through the middle -- photograph on one page, name on the
   next -- was the loudest complaint about the printed People page. */
#members-grid .member-card,
#alumni-grid > *,
.publication-entry,
.polaroid,
.album-spread,
.gallery article,
figure,
tr {
	break-inside: avoid;
	page-break-inside: avoid;
}

/* A heading stranded at the foot of a page reads as a mistake. */
h1, h2, h3, h4 {
	break-after: avoid;
	page-break-after: avoid;
}

h1, h2, h3, h4, p, li {
	orphans: 3;
	widows: 3;
}

/* The year headings on Publications are the natural chapter breaks. */
.publication-year-group {
	break-before: auto;
	margin-top: 8mm;
}

/* ── Diagrams ───────────────────────────────────────────────────────────── */

/* Both are iframes sized to their content by postMessage. Anything that
   clipped or scrolled them on screen would crop them on paper. */
#themesFrame,
#networkFrame,
iframe {
	overflow: visible !important;
	break-inside: avoid;
	page-break-inside: avoid;
	max-width: 100%;
	/* The frames take the page's ground on screen. On paper the page is white,
	   and a frame keeping its own colour prints as a block of tan. */
	background: none !important;
}

/* The shell is 100vw wide on screen, pulled out of the content column by a
   translate. On paper the page is the column, and the translate pushes it off
   the sheet. */
.themes-shell {
	width: 100% !important;
	left: auto !important;
	transform: none !important;
	margin: 4mm 0 !important;
	/* It carries the page's ground on screen, behind a transparent frame. */
	background: none !important;
}

/* ── Spacing ────────────────────────────────────────────────────────────── */

/* The generous vertical rhythm is a screen luxury; on paper it just costs
   sheets. */
.wrapper.style1 > .inner {
	padding-top: 6mm !important;
	padding-bottom: 6mm !important;
}

#wrapper > footer.wrapper > .inner {
	padding-top: 4mm !important;
}

/* The logo is a fixed 270px block at the top right of every page on screen.
   Printed it would land on top of the first line of text, since print has no
   viewport to be positioned against. */
.site-logo-bar {
	position: static !important;
	padding: 0 0 4mm 0 !important;
	text-align: right;
}

.site-logo img {
	width: 45mm !important;
}

/* ── Links ──────────────────────────────────────────────────────────────── */

/* Spelling out each link's address after it is the usual advice for print,
   and it is wrong here. The member cards' links are icons -- a globe, an
   ORCID mark -- so every card gained three wrapped URLs, grew taller than a
   sheet, and started being cut in half again: the very fault this stylesheet
   exists to fix. The addresses are of no use on paper anyway. */

a {
	text-decoration: none;
	color: inherit;
}

.publication-links a,
.member-link {
	color: #30363d !important;
}

/* ── Research theme cards ───────────────────────────────────────────────── */

/* A card is a <details>, so on paper every one is forced open: the
   descriptions are the substance of the page and a printed copy that needed
   clicking would carry twelve headings and nothing else. The gradient goes --
   it is a screen device, and backgrounds are dropped when printing anyway. */

.theme-cards {
	display: block !important;
}

.theme-card {
	display: block !important;
	background: none !important;
	border: 0 !important;
	border-top: 1px solid rgba(0, 0, 0, 0.25) !important;
	border-radius: 0 !important;
	padding: 3mm 0 4mm 0 !important;
	margin: 0 !important;
	break-inside: avoid;
	page-break-inside: avoid;
}

.theme-card > summary {
	list-style: none;
	font-weight: 600;
}

.theme-card .theme-caret {
	display: none !important;
}

/* A closed <details> hides its content inside the shadow tree, which ordinary
   author CSS cannot reach -- ::details-content is the handle for it. Browsers
   without that pseudo-element are covered by the beforeprint handler in
   assets/js/theme-cards.js, which opens every card before the page is drawn. */
.theme-card::details-content {
	content-visibility: visible !important;
	block-size: auto !important;
}

.theme-card > .theme-body {
	display: block !important;
	padding-left: 2.3rem !important;
}

/* "Publications" is a link to a filtered list. There is nothing to click here. */
.theme-card .button {
	display: none !important;
}