/* ============================================================
   Reset, and the scaled frame everything is laid out inside.
   ============================================================ */
*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	height: 100%;
	overflow: hidden;
	background: var(--white);
}

body {
	font-family: var(--font-body);
	color: var(--black);
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

/* The frame is always the mockup's 390 units wide and is scaled to the
   viewport, so a coordinate measured from the mockup lands in the same
   relative place on any device. Its height is the viewport's, divided back
   out of the scale, so a taller phone simply shows more feed. */
#frame {
	position: relative;
	width: var(--frame-w);
	height: calc(100vh / var(--k, 1));
	transform: scale(var(--k, 1));
	transform-origin: top left;
	overflow: hidden;
	background: var(--white);
}

img, svg {
	display: block;
}

button {
	font: inherit;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	color: inherit;
}

.display {
	font-family: var(--font-display);
	font-size: var(--fs-title);
}

/* Graystroke sits high in its em box; this drops it onto the mockup's
   baseline wherever it is used. */
.display > span {
	display: inline-block;
	transform: translateY(3px);
}

[hidden] { display: none !important; }