/* Poke Around Pittsburgh — the coming soon page.
 *
 * Layout only. The pieces on the page (lockup, badge, button, field, messages)
 * are styled in assets/components.css, and colors and sizes come from
 * assets/tokens.css.
 */

.pap-page {
	position: relative;
	/* Fills the screen without clipping longer pages elsewhere on the site. */
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--pap-space-7) 20px 0;
	overflow: hidden;
}

/* The bridge and skyline run along the bottom, behind everything. The artwork
   is exported on a transparent background so it never shows as a rectangle. */
.pap-scene {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: min(1180px, 112%);
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.pap-scene img {
	display: block;
	width: 100%;
	height: auto;
}

.pap-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 760px;
	text-align: center;
	padding-bottom: 140px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pap-space-5);
}

.pap-inner .pap-lede { max-width: 46ch; }

.pap-inner .pap-message { max-width: 42ch; }

/* Sign-up form */
.pap-form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--pap-space-3);
	width: 100%;
	max-width: 480px;
}

.pap-form .pap-field { flex: 1 1 240px; }

.pap-form .pap-button { flex: 0 0 auto; }

@media (max-width: 560px) {
	.pap-page { padding-top: var(--pap-space-6); }
	.pap-inner { padding-bottom: 96px; }
	.pap-scene { width: 170%; }

	/* Stacked, so the field must not stretch to fill the column. */
	.pap-form { flex-direction: column; align-items: stretch; }
	.pap-form .pap-field { flex: 0 0 auto; }
	.pap-form .pap-button { width: 100%; }
}