/*
	Plasma Exchange Guide — the only custom CSS on the site.

	Future Imperfect (main.css) is used verbatim and must never be edited. Every
	rule below exists because the site's illustrations come in mixed aspect
	ratios that the template's image slots do not expect. Keep this file short.
*/

/* Illustrations are 3:2, 4:3 and portrait 4:5. The template's featured slot has
   no height limit, so a portrait one would otherwise render ~1200px tall in
   the main column. Box every featured image to the demo's landscape shape;
   contain rather than cover because these are line drawings on white — cropping
   one cuts the subject in half, and the letterboxing is invisible on the white
   post background. */
.post > .image.featured img {
	aspect-ratio: 3 / 2;
	object-fit: contain;
}

/* Sidebar thumbnails are small and all landscape, so crop them to one shape
   and let the five mini-posts line up. */
.mini-post .image img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Same for the 4em thumbnails in the article index list. */
ul.posts article .image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/*
	Heading levels. Future Imperfect ships the site name in #header as the only
	<h1> and puts every post title in an <h2>, which leaves an article page with
	no <h1> of its own. That is a real search cost, so each page now gives its
	<h1> to its own subject and the site name drops to an <h2> everywhere except
	the homepage. The three rules below re-point main.css's own styling at the
	tags that moved. Nothing is restyled; this only keeps the rendering identical.
*/

/* main.css lays out the header bar via `#header h1`. Mirror it for the h2, and
   put the font size back to h1's 1em so the 0.7em link inside computes the same. */
#header h2 {
	font-size: 1em;
	height: inherit;
	line-height: inherit;
	padding: 0 0 0 1.5em;
	white-space: nowrap;
}

#header h2 a {
	font-size: 0.7em;
}

@media screen and (max-width: 736px) {
	#header h2 {
		padding: 0 0 0 1em;
	}
}

/* What main.css gives `.post > header .title h2`, now that the title is an h1. */
.post > header .title h1 {
	font-size: 1.5em;
	font-weight: 900;
}

/* Base h1 has no font size of its own, unlike h2's 1.1em, so a section page's
   heading needs it back to stay the size it was on /articles/. */
header.major h1 {
	font-size: 1.1em;
}

/* The medical disclaimer. main.css has no style for it in a post footer, where
   it would render at body size and read as the last paragraph of the article,
   and `#footer .copyright` next to it is 0.5em uppercase, which is fine for one
   line of credits and unreadable for five sentences. Set it one step back from
   the article and leave it legible. */
.disclaimer {
	color: #7f7f7f;
	font-size: 0.8em;
	line-height: 1.9;
}