/*
 * The rules for the wordmark shown on a screen that has nothing to display.
 *
 * Loaded only by a screen that renders the wordmark; a screen showing an asset
 * never asks for this file.
 *
 * Sized in vw throughout, so the wordmark always occupies the same share of the
 * screen's width whatever its shape. The one thing that changes with shape is
 * whether the two words sit side by side: on a portrait screen a single line
 * would be limited by the narrow width and end up a small band of text in a
 * tall black field, so the words stack and can then be set twice as large.
 *
 * The breakpoint is a plain aspect-ratio media query, which is ancient and
 * universally supported — these screens' browsers are unknown.
 */

.pbg-monitors-wordmark {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	/* translateY rather than flexbox on the stage, so the rules that fit an
	   asset are left completely untouched. */
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align: center;
	white-space: nowrap;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: 0.01em;
	/* Not pure white: this can sit on a wall for weeks at a time, and a
	   slightly held-back grey still reads from across a room. */
	color: #dddddd;
}

/* Landscape: one line. 12vw puts the wordmark across about three quarters of
   the width, leaving a margin at every ratio from 4:3 to 2:1. */
@media (min-aspect-ratio: 1/1) {

	.pbg-monitors-wordmark {
		font-size: 12vw;
	}
}

/* Portrait: two lines, so the limit becomes the longest single word. */
@media (max-aspect-ratio: 1/1) {

	.pbg-monitors-wordmark {
		font-size: 24vw;
	}

	.pbg-monitors-wordmark span {
		display: block;
	}
}