/* Poke Around Pittsburgh — shared pieces.
 *
 * Every reusable piece of the site lives here, and the style guide at
 * /style-guide shows each one. Add a new piece here rather than styling it
 * inside one page, and it stays consistent everywhere.
 *
 * Colors and sizes come from assets/tokens.css. Don't hard-code them here.
 */

/* ---- The wordmark lockup ---------------------------------------------- */
/* Sriracha for "Poke", Kalam for "Around" and "Pittsburgh". 20 Sep 2026. */

.pap-lockup {
	margin: 0;
	font-weight: 400;
	font-size: var(--pap-size-lockup);
	line-height: 1.02;
	color: var(--pap-slate);
}

/* Three stacked lines: Poke / - Around - / Pittsburgh */
.pap-lockup .poke,
.pap-lockup .around,
.pap-lockup .pittsburgh {
	display: block;
}

/* PITTSBURGH matches AROUND, so the lockup is two faces rather than three.
   Alesa's call, 20 Sep 2026. Fredoka is still the display face everywhere
   else on the site; it just isn't in the wordmark any more.

   BOTH SMALL LINES ARE CAPS. Alesa's call, 25 Sep 2026 — this supersedes the
   21 Sep decision that set "around" in lowercase. The drawn artwork was painted
   with AROUND in caps, and the typed lockup in the header and footer has to
   match it, or the same site shows the wordmark two different ways. Caps in a
   hand face lock together without help, so AROUND carries letter-spacing and
   PITTSBURGH does not need as much. */
.pap-lockup .pittsburgh {
	font-family: var(--pap-script);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.78em;
	letter-spacing: 0.03em;
}

/* "Poke" in Sriracha. The family has one weight only, so asking for bold would
   get a browser-drawn fake: same width, extra ink poured inside the letters,
   which closes up the holes in the P, o and e. Instead the stroke is drawn
   first and the letter painted over it, so the weight is added evenly on the
   OUTSIDE and the letter shapes stay open. Sriracha also runs small for its
   size, hence the bump. */
.pap-lockup .poke {
	font-family: var(--pap-hand);
	font-weight: 400;
	font-size: 1.16em;
	-webkit-text-stroke: var(--pap-hand-weight) currentColor;
	paint-order: stroke fill;
}

.pap-lockup .around {
	font-family: var(--pap-script);
	font-weight: 700;
	color: var(--pap-blue);
	font-size: 0.42em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.18em 0 0.16em;
}

/* The gold dashes either side of AROUND, as drawn in the artwork. */
.pap-lockup .around::before,
.pap-lockup .around::after {
	content: "";
	display: inline-block;
	width: 1.1em;
	height: 0.16em;
	border-radius: var(--pap-radius-pill);
	background: var(--pap-gold);
	vertical-align: 0.22em;
	margin: 0 0.5em;
}

/* ---- Badge ------------------------------------------------------------ */

.pap-badge {
	display: inline-block;
	margin: 0;
	font-size: var(--pap-size-label);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pap-slate);
	border: var(--pap-border) solid var(--pap-slate);
	border-radius: var(--pap-radius-pill);
	padding: 7px 20px 6px;
}

/* ---- Lede ------------------------------------------------------------- */

.pap-lede {
	margin: 0;
	font-size: var(--pap-size-lede);
	line-height: 1.55;
	color: var(--pap-slate);
}

/* ---- Buttons ---------------------------------------------------------- */
/* Gold on slate is 7.4:1, so the gold reads as the accent and still passes. */

.pap-button {
	display: inline-block;
	font-family: inherit;
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	color: var(--pap-gold);
	background: var(--pap-slate);
	border: var(--pap-border) solid var(--pap-slate);
	border-radius: var(--pap-radius-pill);
	padding: 14px 32px;
	cursor: pointer;
	transition: background-color 140ms ease;
}

.pap-button:hover {
	background: var(--pap-slate-lift);
	border-color: var(--pap-slate-lift);
}

.pap-button:focus-visible {
	outline: 3px solid var(--pap-blue);
	outline-offset: 2px;
}

/* Quieter version, for when a slate button would shout */
.pap-button--outline {
	color: var(--pap-slate);
	background: transparent;
}

.pap-button--outline:hover {
	color: var(--pap-white);
	background: var(--pap-slate);
}

/* ---- Text field ------------------------------------------------------- */

.pap-field {
	margin: 0;
	min-width: 0;
}

.pap-field label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pap-field input[type="email"],
.pap-field input[type="text"] {
	width: 100%;
	font-family: inherit;
	font-size: 16.5px;
	color: var(--pap-slate);
	background: var(--pap-white);
	border: var(--pap-border) solid var(--pap-gray-line);
	border-radius: var(--pap-radius-pill);
	padding: 14px 22px;
}

.pap-field input::placeholder { color: var(--pap-gray-text); }

.pap-field input:focus-visible {
	outline: 3px solid var(--pap-gold);
	outline-offset: 1px;
	border-color: var(--pap-slate);
}

/* ---- Messages --------------------------------------------------------- */

.pap-message {
	margin: 0;
	font-size: 16px;
	border-radius: var(--pap-radius-box);
	padding: var(--pap-space-3) var(--pap-space-4);
}

.pap-message.is-good {
	background: #F3F8E9;
	border: var(--pap-border) solid #9CBF6A;
	color: #33471B;
}

.pap-message.is-bad {
	background: #FDF3E3;
	border: var(--pap-border) solid var(--pap-gold);
	color: #6B4E06;
}

/* ---- Honeypot --------------------------------------------------------- */
/* A real person never sees or fills this; robots do, and get caught. */

.pap-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- Lockup, laid out on one line ------------------------------------- */
/* The masthead and footer need the wordmark small and horizontal rather than
   stacked. Same three spans, same two faces — only the arrangement changes,
   so the mark cannot drift between the coming soon page and the site. */

.pap-lockup.is-inline {
	display: inline-flex;
	align-items: baseline;
	gap: 0.22em;
	font-size: 30px;
	line-height: 1;
	white-space: nowrap;
}

.pap-lockup.is-inline .poke,
.pap-lockup.is-inline .around,
.pap-lockup.is-inline .pittsburgh {
	display: inline;
}

.pap-lockup.is-inline .around {
	padding: 0;
	font-size: 0.38em;
	align-self: center;
}

/* One dash instead of two: at this size a dash on each side crowds the words. */
.pap-lockup.is-inline .around::before { display: none; }

.pap-lockup.is-inline .around::after {
	width: 0.8em;
	margin: 0 0 0 0.45em;
	vertical-align: 0.24em;
}

.pap-lockup.is-inline.is-small { font-size: 24px; }

/* ---- The painted wordmark --------------------------------------------- */
/* The home page hero uses the drawn artwork instead of type. It is sized off
   the same token as the typed lockup so the two stay in step, but the artwork
   is wider than it is tall, so the token sets the WIDTH here rather than the
   font size. The image has real transparency, so it sits on any light ground.

   IT IS SLATE INK. There is no reversed version yet, so don't put this on a
   slate panel — the letters would disappear. Noted 25 Sep 2026. */

.pap-wordmark {
	margin: 0;
	line-height: 0;
}

.pap-wordmark img {
	display: block;
	width: clamp(220px, 50vw, 360px);
	height: auto;
	margin: 0 auto;
}