/* =========================================================
   Portland Advisers — utilities.
   Primitives the per-section HTML blocks rely on. Keep this
   intentionally small — section-specific layout CSS belongs
   inside the section's own <style> block.
   ========================================================= */

.pa-site .pa-container {
	width: 100%;
	max-width: var(--pa-container);
	margin-inline: auto;
	padding-inline: var(--pa-gutter);
}

/* Typography */
.pa-site .pa-eyebrow {
	font-family: var(--pa-font-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pa-blue);
	opacity: 0.85;
}
.pa-site .pa-eyebrow.is-on-dark { color: var(--pa-silver); opacity: 1; }

.pa-site .pa-display {
	font-family: var(--pa-font-serif);
	font-weight: 300;
	font-size: clamp(48px, 7.2vw, 112px);
	line-height: 0.98;
	letter-spacing: -0.025em;
	font-variation-settings: "opsz" 144, "SOFT" 0;
	margin: 0;
}
.pa-site .pa-display em { font-style: italic; font-weight: 400; color: var(--pa-blue); }
.pa-site .pa-display.is-on-dark { color: #fff; }
.pa-site .pa-display.is-on-dark em { color: var(--pa-silver); }

.pa-site .pa-h1 {
	font-family: var(--pa-font-serif);
	font-weight: 300;
	font-size: clamp(36px, 4.4vw, 64px);
	line-height: 1.02;
	letter-spacing: -0.022em;
	margin: 0;
}
.pa-site .pa-h1 em { font-style: italic; font-weight: 400; color: var(--pa-blue); }
.pa-site .pa-h1.is-on-dark { color: #fff; }
.pa-site .pa-h1.is-on-dark em { color: var(--pa-silver); }

.pa-site .pa-h2 {
	font-family: var(--pa-font-serif);
	font-weight: 400;
	font-size: clamp(28px, 3.2vw, 44px);
	line-height: 1.1;
	letter-spacing: -0.018em;
	margin: 0;
}

.pa-site .pa-lede {
	font-size: clamp(17px, 1.35vw, 20px);
	line-height: 1.55;
	color: rgba(26, 14, 58, 0.78);
	max-width: 62ch;
	font-weight: 400;
	margin: 0;
}
.pa-site .pa-lede.is-on-dark { color: rgba(255, 255, 255, 0.72); }

.pa-site .pa-mono {
	font-family: var(--pa-font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Buttons */
.pa-site .pa-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 24px;
	font-family: var(--pa-font-sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 2px;
	border: 1px solid transparent;
	transition: all 220ms var(--pa-ease);
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}
.pa-site .pa-btn-primary { background: var(--pa-blue); color: var(--pa-paper); }
.pa-site .pa-btn-primary:hover { background: var(--pa-blue-deep); transform: translateY(-1px); color: var(--pa-paper); }

.pa-site .pa-btn-ghost {
	background: transparent;
	color: var(--pa-blue);
	border-color: rgba(47, 15, 107, 0.25);
}
.pa-site .pa-btn-ghost:hover {
	border-color: var(--pa-blue);
	background: var(--pa-blue);
	color: var(--pa-paper);
}
.pa-site .pa-btn-ghost.is-on-dark {
	color: var(--pa-paper);
	border-color: rgba(255, 255, 255, 0.28);
}
.pa-site .pa-btn-ghost.is-on-dark:hover {
	background: var(--pa-paper);
	color: var(--pa-blue-950);
}

/* Arrow link */
.pa-site .pa-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--pa-font-sans);
	font-size: 14px;
	font-weight: 500;
	color: inherit;
	border-bottom: 1px solid var(--pa-rule);
	padding-bottom: 4px;
	transition: gap 200ms var(--pa-ease), border-color 200ms var(--pa-ease);
	text-decoration: none;
}
.pa-site .pa-arrow-link:hover { gap: 14px; border-color: currentColor; }
.pa-site .pa-arrow-link svg { transition: transform 200ms var(--pa-ease); }
.pa-site .pa-arrow-link:hover svg { transform: translateX(3px); }

/* Hairline helpers */
.pa-site .pa-rule { height: 1px; background: var(--pa-rule); border: 0; width: 100%; }
.pa-site .pa-dash {
	display: inline-block;
	width: 22px;
	height: 1px;
	background: var(--pa-blue);
	opacity: 0.6;
	vertical-align: middle;
}
.pa-site .pa-dash.is-on-dark { background: var(--pa-silver); opacity: 1; }

/* Grain — reusable in any dark section background */
.pa-site .pa-grain {
	position: absolute;
	inset: -50%;
	width: 200%;
	height: 200%;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 192px 192px;
	animation: pa-grain 0.75s steps(1) infinite;
	opacity: 0.04;
	pointer-events: none;
	mix-blend-mode: overlay;
}

/* Sensible defaults so pasted markup behaves */
.pa-site .pa-section { position: relative; }
.pa-site .pa-section img,
.pa-site .pa-section svg { display: block; max-width: 100%; }
.pa-site .pa-section a { color: inherit; }
.pa-site .pa-section *, .pa-site .pa-section *::before, .pa-site .pa-section *::after { box-sizing: border-box; }