/* ==========================================================================
   Purple Fix — Rhonda Gilliland for Minnesota Governor
   Single stylesheet. Tokens first; every colour below traces to one.
   ========================================================================== */

:root {
	/* Purples, dark to light. Values sampled from the approved mockups. */
	--pf-ink:         #100526;  /* header, hero ground          */
	--pf-ink-2:       #16072F;
	--pf-section:     #1A083C;  /* issues band                  */
	--pf-footer:      #140734;
	--pf-brand:       #4D1A8E;  /* primary button, icon circles */
	--pf-brand-deep:  #390F6E;
	--pf-brand-lt:    #61259D;
	--pf-lavender:    #BA97DB;
	--pf-lavender-2:  #C9AEE6;

	--pf-red:         #C8161F;  /* donate button                */
	--pf-red-rule:    #E01B22;  /* the thin eyebrow rules       */

	--pf-paper:       #F3F3F5;  /* off-white section grounds    */
	--pf-card:        #F1F0F3;  /* issue cards on purple        */
	--pf-pale:        #E5DEEF;  /* quotation panels             */
	--pf-white:       #FFFFFF;

	--pf-body:        #1B1526;
	--pf-muted:       #625C6A;
	--pf-line:        #E1DEE7;

	/* Type */
	--pf-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
	--pf-text:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Layout */
	--pf-wrap:    1200px;
	--pf-gutter:  24px;
	--pf-header:  96px;
	--pf-radius:  4px;
	--pf-radius-sm: 3px;

	--pf-shadow:    0 1px 2px rgba(16, 5, 38, .06), 0 6px 18px rgba(16, 5, 38, .07);
	--pf-shadow-sm: 0 1px 2px rgba(16, 5, 38, .07);
}

/* ---------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

html {
	/* clip, never hidden — hidden breaks the sticky header (verified on HDT) */
	overflow-x: clip;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--pf-header) + 12px);
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	overflow-x: clip;
	background: var(--pf-white);
	color: var(--pf-body);
	font-family: var(--pf-text);
	font-size: 17px;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;

	/* Sticky footer: a short page (Events, Latest News, Privacy) must still push
	   the footer to the bottom of the viewport instead of stranding it mid-screen.
	   The sticky header stays sticky as a flex item. */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}
#pf-main { flex: 1 0 auto; }
.pf-footer { flex: none; }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--pf-brand-lt); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--pf-lavender);
	outline-offset: 2px;
	border-radius: 2px;
}
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.14; }
p { margin: 0 0 1.05em; }
/* No one-word last lines ("…not around / it."). Ignored by browsers without support. */
p, li, blockquote { text-wrap: pretty; }
ul { margin: 0; padding: 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.pf-skip {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--pf-white); color: var(--pf-ink);
	padding: 12px 18px; font-weight: 600;
}
.pf-skip:focus { left: 8px; top: 8px; }

.pf-wrap {
	width: 100%;
	max-width: calc(var(--pf-wrap) + var(--pf-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--pf-gutter);
}

/* ------------------------------------------------------- shared pieces */

.pf-eyebrow {
	display: flex; align-items: center; justify-content: center; gap: 14px;
	margin: 0 0 10px;
	font-family: var(--pf-display);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--pf-red-rule);
}
.pf-eyebrow::before,
.pf-eyebrow::after {
	content: ""; height: 2px; width: clamp(38px, 7vw, 74px);
	background: var(--pf-red-rule);
}
.pf-eyebrow--light { color: #F06B70; }
.pf-eyebrow--light::before,
.pf-eyebrow--light::after { background: var(--pf-red-rule); }

.pf-h2 {
	margin: 0 0 6px;
	text-align: center;
	font-family: var(--pf-text);
	font-weight: 700;
	font-size: clamp(1.6rem, 3.1vw, 2.35rem);
	letter-spacing: -.015em;
	color: var(--pf-ink);
}
.pf-h2--light { color: var(--pf-white); }

.pf-sub {
	margin: 0 auto 34px;
	max-width: 46ch;
	text-align: center;
	font-size: .975rem;
	color: var(--pf-muted);
}

/* red-rule / white-star divider */
.pf-star { display: flex; align-items: center; gap: 14px; margin: 20px 0 18px; }
.pf-star__rule { height: 3px; width: clamp(74px, 11vw, 132px); background: var(--pf-red-rule); }
.pf-star__mark { width: 26px; height: auto; flex: none; }
.pf-star--page { justify-content: flex-start; }

.pf-rule {
	display: block; width: 62px; height: 3px;
	margin: 10px auto 0; background: var(--pf-red-rule);
}

.pf-hr { border: 0; border-top: 1px solid var(--pf-line); margin: 54px 0; }

/* ------------------------------------------------------------- buttons */

.pf-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px;
	padding: 13px 26px;
	border: 1px solid transparent;
	border-radius: var(--pf-radius-sm);
	font-family: var(--pf-display);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.1;
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.pf-btn--lg { padding: 15px 34px; font-size: 1.125rem; }
.pf-btn--sm { padding: 9px 20px; font-size: .95rem; }
.pf-btn--block { width: 100%; }

.pf-btn--purple { background: var(--pf-brand); color: var(--pf-white); }
.pf-btn--purple:hover { background: var(--pf-brand-lt); }

.pf-btn--red { background: var(--pf-red); color: var(--pf-white); }
.pf-btn--red:hover { background: #DD1A24; }

.pf-btn--outline {
	background: transparent; color: var(--pf-white);
	border-color: rgba(255, 255, 255, .72);
}
.pf-btn--outline:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

.pf-btn--outline-dark {
	background: transparent; color: var(--pf-brand);
	border-color: var(--pf-brand);
}
.pf-btn--outline-dark:hover { background: var(--pf-brand); color: var(--pf-white); }

/* A control whose provider is not configured. Visibly inert, and it says so. */
.pf-btn--unconfigured {
	position: relative;
	cursor: not-allowed;
	opacity: .78;
	flex-direction: column; gap: 3px;
	border-style: dashed;
}
.pf-btn__note {
	font-family: var(--pf-text);
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: none;
	opacity: .92;
}
/* In the header the dashed border carries the signal; the sentence would
   overwhelm a 40px-tall nav control, so it goes to assistive tech only. */
.pf-btn--sm .pf-btn__note {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------- content-approval states */

.pf-pending {
	margin: 0 0 1.05em;
	padding: 14px 16px;
	border: 1px dashed #B9A9CE;
	border-left: 4px solid var(--pf-brand-lt);
	border-radius: var(--pf-radius-sm);
	background: rgba(186, 151, 219, .10);
	font-size: .875rem;
	line-height: 1.5;
	color: #4A3F5C;
}
.pf-pending--inline { padding: 9px 12px; font-size: .8125rem; }
.pf-pending__tag {
	display: block;
	font-family: var(--pf-display);
	font-weight: 600;
	font-size: .8125rem;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--pf-brand-lt);
	margin-bottom: 3px;
}
.pf-pending__label { display: block; font-weight: 600; color: #2F2640; }
.pf-pending__note  { display: block; margin-top: 3px; color: #5C5270; }

/* On dark grounds the note has to invert. */
.pf-issues .pf-pending,
.pf-involve .pf-pending,
.pf-footer .pf-pending,
.pf-hero .pf-pending,
.pf-beliefs .pf-pending {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .34);
	border-left-color: var(--pf-lavender);
	color: rgba(255, 255, 255, .84);
}
.pf-issues .pf-pending__label,
.pf-involve .pf-pending__label,
.pf-footer .pf-pending__label,
.pf-hero .pf-pending__label,
.pf-beliefs .pf-pending__label { color: #fff; }
.pf-issues .pf-pending__tag,
.pf-involve .pf-pending__tag,
.pf-footer .pf-pending__tag,
.pf-hero .pf-pending__tag,
.pf-beliefs .pf-pending__tag { color: var(--pf-lavender); }
.pf-issues .pf-pending__note,
.pf-involve .pf-pending__note,
.pf-footer .pf-pending__note,
.pf-hero .pf-pending__note,
.pf-beliefs .pf-pending__note { color: rgba(255, 255, 255, .68); }

/* Issue cards sit on a light ground even inside the purple band. */
.pf-card--issue .pf-pending {
	background: rgba(186, 151, 219, .12);
	border-color: #B9A9CE;
	border-left-color: var(--pf-brand-lt);
	color: #4A3F5C;
}
.pf-card--issue .pf-pending__label { color: #2F2640; }
.pf-card--issue .pf-pending__tag   { color: var(--pf-brand-lt); }
.pf-card--issue .pf-pending__note  { color: #5C5270; }

/* Empty photograph slot. */
.pf-photo { margin: 0; border-radius: var(--pf-radius); overflow: hidden; }
.pf-photo img { width: 100%; height: 100%; object-fit: cover; }
.pf-photo--empty {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 10px; padding: 18px; text-align: center;
	background: linear-gradient(160deg, #241047 0%, #160830 100%);
	border: 1px dashed rgba(186, 151, 219, .55);
}
/* beats `.pf-photo img { width:100% }` — the emblem is a watermark, not the photo */
.pf-photo--empty .pf-photo__mark { width: 56px; height: auto; opacity: .5; }
.pf-photo--empty figcaption { display: grid; gap: 2px; }
.pf-photo__tag {
	font-family: var(--pf-display); font-weight: 600;
	font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--pf-lavender);
}
.pf-photo__label { font-size: .875rem; font-weight: 600; color: #fff; }
.pf-photo__note  { font-size: .78rem; color: rgba(255, 255, 255, .66); }

/* ================================================================ header */

.pf-header {
	position: sticky; top: 0; z-index: 60;
	background: var(--pf-ink);
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.pf-header__inner {
	display: flex; align-items: center; gap: 22px;
	min-height: var(--pf-header);
	padding-block: 12px;
}
.pf-brand { flex: none; line-height: 0; }
.pf-brand__img { width: 210px; height: auto; }

.pf-nav { margin-left: auto; }
.pf-menu { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); list-style: none; }
.pf-menu__link {
	display: inline-block;
	padding: 6px 0 5px;
	border-bottom: 2px solid transparent;
	font-family: var(--pf-display);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: .085em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .88);
	text-decoration: none;
	white-space: nowrap;
}
.pf-menu__link:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .45); }
.pf-menu .current-menu-item > .pf-menu__link,
.pf-menu .pf-menu__item.current-menu-item > .pf-menu__link {
	color: #fff; border-bottom-color: #fff;
}
.pf-header__cta { flex: none; }

.pf-burger {
	display: none;
	width: 46px; height: 42px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .38);
	border-radius: var(--pf-radius-sm);
	cursor: pointer;
}
.pf-burger__bars { display: grid; gap: 5px; justify-items: center; }
.pf-burger__bars span { display: block; width: 20px; height: 2px; background: #fff; }

/* [hidden] has to beat the display rules below, or the drawer is always open. */
.pf-scrim[hidden],
.pf-drawer[hidden] { display: none !important; }

.pf-scrim {
	position: fixed; inset: 0; z-index: 70;
	background: rgba(6, 2, 16, .62);
}
.pf-drawer {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 80;
	width: min(340px, 88vw);
	display: flex; flex-direction: column; gap: 8px;
	padding: 18px;
	background: var(--pf-ink);
	border-left: 1px solid rgba(255, 255, 255, .1);
	overflow-y: auto;
}
.pf-drawer__head { display: flex; align-items: center; justify-content: space-between; }
.pf-drawer__title {
	font-family: var(--pf-display); font-weight: 600;
	letter-spacing: .13em; text-transform: uppercase;
	color: var(--pf-lavender);
}
.pf-drawer__close {
	width: 40px; height: 40px;
	font-size: 1.6rem; line-height: 1;
	background: transparent; color: #fff;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: var(--pf-radius-sm);
	cursor: pointer;
}
.pf-drawer .pf-menu { display: block; margin-top: 6px; }
.pf-drawer .pf-menu__item,
.pf-drawer .pf-menu li { border-bottom: 1px solid rgba(255, 255, 255, .09); }
.pf-drawer .pf-menu__link {
	display: block; padding: 15px 2px; border-bottom: 0; font-size: 1.125rem;
}
.pf-drawer__cta { margin-top: auto; padding-top: 18px; }

/* ================================================================== hero */

.pf-hero {
	position: relative; isolation: isolate;
	display: flex; align-items: center;
	min-height: clamp(520px, 46vw, 680px);
	background: var(--pf-ink);
	color: var(--pf-white);
	overflow: hidden;
}
.pf-hero--short { min-height: clamp(320px, 26vw, 400px); }

/* The photograph occupies the right of the frame, as in the reference, so the
   skyline reads at the same scale rather than being stretched across 1440px.
   Its left edge sits under the opaque part of the veil, so there is no seam. */
.pf-hero__bg {
	position: absolute; inset: 0 0 0 20%; z-index: -2;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 62% 42%;
}
.pf-hero__veil {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(90deg,
			var(--pf-ink) 0%,
			var(--pf-ink) 25%,
			rgba(16, 5, 38, .88) 37%,
			rgba(16, 5, 38, .32) 56%,
			rgba(16, 5, 38, .04) 74%,
			rgba(16, 5, 38, 0) 100%);
}
.pf-hero__inner { position: relative; padding-block: 54px; }

.pf-hero__h {
	margin: 0;
	font-family: var(--pf-display);
	font-weight: 700;
	font-size: clamp(3.1rem, 8.4vw, 7rem);
	line-height: .93;
	letter-spacing: .005em;
	text-transform: uppercase;
	color: var(--pf-white);
	text-wrap: balance;
}
.pf-hero__h span { display: block; }
.pf-hero__accent { display: inline !important; color: var(--pf-lavender); }
.pf-hero__h--page { font-size: clamp(2.9rem, 7.2vw, 5.6rem); }

.pf-hero__name {
	margin: 0;
	font-family: var(--pf-display);
	font-weight: 700;
	font-size: clamp(1.6rem, 3.1vw, 2.3rem);
	letter-spacing: .015em;
	text-transform: uppercase;
	color: var(--pf-white);
}
.pf-hero__office {
	margin: 0 0 20px;
	font-family: var(--pf-display);
	font-weight: 600;
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--pf-lavender);
}
.pf-hero__intro {
	max-width: 38ch;
	margin-bottom: 26px;
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, .90);
}
.pf-hero__intro p { margin-bottom: .3em; }

/* My Story opening (workbook S1). The slot was measured for one short
   paragraph; she wrote three. Widened and given paragraph spacing so her text
   sits in the hero as written instead of being trimmed to fit a column. */
.pf-hero__intro--story { max-width: 52ch; margin-bottom: 0; }
.pf-hero__intro--story p { margin-bottom: .72em; }
.pf-hero__intro--story p:last-child { margin-bottom: 0; }
.pf-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ============================================================ feed block */

.pf-feed { background: var(--pf-paper); padding-block: 56px 60px; }
.pf-feed__state {
	max-width: 62ch; margin: 0 auto 26px;
	padding: 11px 16px;
	border: 1px dashed #C4BDD2;
	border-radius: var(--pf-radius-sm);
	background: rgba(255, 255, 255, .7);
	text-align: center;
	font-size: .875rem;
	color: #52495F;
}
.pf-feed__grid {
	display: grid; gap: 22px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
}
.pf-feed__foot { display: flex; justify-content: center; margin-top: 34px; }

.pf-card {
	background: var(--pf-white);
	border: 1px solid var(--pf-line);
	border-radius: var(--pf-radius);
	box-shadow: var(--pf-shadow-sm);
}
.pf-card--feed { display: flex; flex-direction: column; padding: 15px; }
.pf-card--feed.is-sample { border-style: dashed; background: #FCFBFD; }

.pf-card__head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.pf-card__avatar {
	flex: none;
	display: grid; place-items: center;
	width: 32px; height: 32px; border-radius: 50%;
	color: #fff;
}
.pf-card__avatar--facebook  { background: #1877F2; }
.pf-card__avatar--x         { background: #000000; }
.pf-card__avatar--instagram { background: linear-gradient(45deg, #F9CE34, #EE2A7B, #6228D7); }
.pf-card__avatar--youtube   { background: #FF0000; }

.pf-card__who  { display: grid; min-width: 0; }
.pf-card__acct {
	font-size: .84rem; font-weight: 600; color: var(--pf-ink);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-card__plat { font-size: .72rem; color: var(--pf-muted); }
.pf-card__time { margin-left: auto; font-size: .72rem; color: var(--pf-muted); white-space: nowrap; }

.pf-card__text { margin: 0 0 12px; font-size: .875rem; line-height: 1.55; color: #332C40; }

.pf-card__media { position: relative; border-radius: var(--pf-radius-sm); overflow: hidden; }
.pf-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.pf-card__media--empty {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 7px; aspect-ratio: 16 / 10; padding: 12px; text-align: center;
	background: linear-gradient(160deg, #241047 0%, #160830 100%);
	font-size: .74rem; color: rgba(255, 255, 255, .72);
}
/* beats `.pf-card__media img { width:100% }` */
.pf-card__media--empty .pf-card__mark { width: 38px; height: auto; opacity: .5; aspect-ratio: auto; object-fit: contain; }
.pf-card__play {
	position: absolute; inset: 0; margin: auto;
	width: 46px; height: 46px; border-radius: 50%;
	background: rgba(255, 255, 255, .9);
}
.pf-card__play::after {
	content: ""; position: absolute; inset: 0; margin: auto;
	width: 0; height: 0;
	border-left: 14px solid var(--pf-ink);
	border-block: 9px solid transparent;
	transform: translateX(2px);
}

.pf-card__foot {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	margin-top: auto; padding-top: 11px;
	font-size: .72rem; color: var(--pf-muted);
}
.pf-card--feed .pf-card__media + .pf-card__foot,
.pf-card--feed .pf-card__text + .pf-card__foot { margin-top: 11px; border-top: 1px solid var(--pf-line); }
.pf-card__metrics { display: flex; gap: 12px; }
.pf-card__link { color: var(--pf-brand-lt); font-weight: 600; text-decoration: none; }
.pf-card__link:hover { text-decoration: underline; }
.pf-card__sample { font-style: italic; }

/* ========================================================== issues band */

.pf-issues { background: var(--pf-section); padding-block: 54px 62px; }
.pf-issues .pf-h2 { margin-bottom: 34px; }
.pf-issues__grid {
	display: grid; gap: 24px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
}
.pf-card--issue {
	display: flex; gap: 20px;
	padding: 26px 26px 24px;
	background: var(--pf-card);
	border-color: transparent;
	box-shadow: var(--pf-shadow);
}
.pf-card__icon {
	flex: none;
	display: grid; place-items: center;
	width: 58px; height: 58px; border-radius: 50%;
	background: linear-gradient(150deg, var(--pf-brand-lt) 0%, var(--pf-brand-deep) 100%);
}
.pf-card__body { min-width: 0; }
.pf-card__title {
	margin: 2px 0 9px;
	font-family: var(--pf-display);
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: .045em;
	text-transform: uppercase;
	color: var(--pf-brand-lt);
}
/* Her headline line for each issue (workbook D3: "Headline — one compelling
   line — this is your hook"). Set a step up from the statement so a card reads
   headline / statement / quotation rather than as one undifferentiated block. */
.pf-card__lead {
	margin: 0 0 11px;
	font-size: 1.0625rem; line-height: 1.45; font-weight: 600;
	color: var(--pf-brand-deep);
}
.pf-card__stance { margin: 0 0 15px; font-size: .975rem; line-height: 1.55; color: #2C2438; }

.pf-quote {
	position: relative;
	margin: 0;
	padding: 15px 18px 15px 44px;
	background: var(--pf-pale);
	border-radius: var(--pf-radius-sm);
}
.pf-quote::before {
	content: "\201C";
	position: absolute; left: 14px; top: 4px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 2.7rem; line-height: 1;
	color: var(--pf-brand-lt);
}
.pf-quote p { margin: 0; font-size: .9rem; line-height: 1.5; color: #382C4E; }

/* ==================================================== get-involved band */

.pf-involve {
	position: relative; isolation: isolate;
	padding-block: 52px 46px;
	background: var(--pf-brand-deep);
	color: var(--pf-white);
	text-align: center;
	overflow: hidden;
}
/* Bottom overhang: the crowd photo carries ~2.5% of white at its lower edge; on a
   tall (phone) band `cover` shows the whole height and that edge read as a pale strip. */
.pf-involve__bg {
	position: absolute; inset: 0 0 -4% 0; z-index: -2;
	background-size: cover; background-position: center;
}
.pf-involve::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(26, 8, 60, .78) 0%, rgba(48, 18, 102, .70) 52%, rgba(26, 8, 60, .82) 100%);
}
.pf-involve__copy p { margin: 0 auto .3em; max-width: 46ch; color: rgba(255, 255, 255, .92); }
.pf-involve .pf-h2 { margin-bottom: 10px; }

.pf-actions {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
	margin: 28px 0 0; list-style: none;
}
/* display:flex lets the card fill the row's height, so a card without a note matches its neighbours;
   .pf-action is top-aligned (below) so the icons stay on one line across the row. */
.pf-actions > li { flex: none; display: flex; width: 190px; }
.pf-action {
	display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
	width: 100%; min-height: 88px;
	padding: 14px 12px;
	background: transparent; color: var(--pf-white);
	border: 1px solid rgba(255, 255, 255, .58);
	border-radius: var(--pf-radius-sm);
	font: inherit; text-decoration: none; cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease;
}
.pf-action:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.pf-action__label {
	font-family: var(--pf-display); font-weight: 600;
	font-size: 1.0625rem; letter-spacing: .09em; text-transform: uppercase;
}
.pf-action__note:not(:empty) {
	font-size: .68rem; letter-spacing: .01em; color: rgba(255, 255, 255, .78);
}
.pf-action--unconfigured { border-style: dashed; opacity: .8; cursor: not-allowed; }

.pf-involve__cta { margin-top: 26px; }
.pf-involve__discl { margin: 20px 0 0; font-size: .8rem; color: rgba(255, 255, 255, .72); }

/* The inner-page call-to-action band.
   Deliberately NOT the thin stripe the mockup shows: on My Story it lands
   between a white article and the white newsletter strip, and a shallow band
   there produced a white / purple / white / purple stutter into the footer.
   It is taller, and pitched several steps brighter than the footer so the two
   purples read as different surfaces rather than one broken one. */
.pf-involve--slim {
	padding-block: 66px;
	text-align: left;
	background: var(--pf-brand);
}
.pf-involve--slim::before {
	background: linear-gradient(115deg,
		rgba(77, 26, 142, .90) 0%,
		rgba(97, 37, 157, .84) 46%,
		rgba(57, 15, 110, .92) 100%);
}
.pf-involve--slim .pf-involve__inner {
	display: flex; align-items: center; gap: 34px; flex-wrap: wrap;
}
.pf-involve--slim .pf-involve__mark { flex: none; opacity: .92; }
.pf-involve--slim .pf-involve__copy { flex: 1 1 380px; }
.pf-involve--slim .pf-h2 {
	text-align: left;
	font-family: var(--pf-display);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	text-transform: uppercase;
	letter-spacing: .02em;
	margin-bottom: 8px;
}
.pf-involve--slim .pf-involve__copy p { margin-inline: 0; font-size: 1.0625rem; max-width: 52ch; }
.pf-involve--slim .pf-involve__cta { margin-top: 0; flex: none; }

/* ====================================================== newsletter strip */

/* Lavender-tinted rather than near-white, so the strip belongs to the purple
   section above it instead of reading as a second white band. */
.pf-news {
	background: #EBE5F3;
	border-block: 1px solid #DCD3E8;
	padding-block: 30px;
}
.pf-news__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center; gap: 22px;
}
.pf-news__icon {
	display: grid; place-items: center;
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--pf-white);
	box-shadow: 0 1px 3px rgba(16, 5, 38, .08);
}
.pf-news__h {
	margin: 0 0 2px;
	font-family: var(--pf-display); font-weight: 700;
	font-size: 1.4rem; letter-spacing: .035em; text-transform: uppercase;
	color: var(--pf-ink);
}
.pf-news__copy p { margin: 0; font-size: .9rem; color: #4C4459; max-width: 46ch; }

.pf-news__form { display: flex; gap: 0; align-items: stretch; }
.pf-field { display: grid; }
.pf-field__label {
	font-size: .75rem; font-weight: 600; letter-spacing: .04em;
	text-transform: uppercase; color: var(--pf-muted); margin-bottom: 4px;
}
.pf-field__input {
	width: clamp(200px, 26vw, 300px);
	padding: 12px 14px;
	font: inherit; font-size: .95rem;
	background: var(--pf-white);
	border: 1px solid #CFC9DA;
	border-radius: var(--pf-radius-sm) 0 0 var(--pf-radius-sm);
	color: var(--pf-body);
}
.pf-news__form .pf-btn {
	align-self: end;
	border-radius: 0 var(--pf-radius-sm) var(--pf-radius-sm) 0;
	padding-inline: 26px;
}
.pf-news__foot { grid-column: 1 / -1; }
.pf-news__state,
.pf-news__consent { margin: 6px 0 0; font-size: .78rem; color: #554C63; }
.pf-news__state { font-style: italic; }

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

.pf-formnote {
	margin: 8px 0 0; padding: 9px 13px;
	border-radius: var(--pf-radius-sm);
	font-size: .85rem;
}
.pf-formnote.is-ok    { background: #E7F4EA; border: 1px solid #A9D3B4; color: #1E5B2E; }
.pf-formnote.is-error { background: #FBE9EA; border: 1px solid #E3AEB2; color: #8A1A22; }
.pf-formnote.is-note  { background: #EFEAF6; border: 1px solid #C6B8DA; color: #453A57; }

/* ================================================================ footer */

.pf-footer { background: var(--pf-footer); color: rgba(255, 255, 255, .8); padding-block: 46px 26px; }
.pf-footer__grid {
	display: grid; gap: 34px;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, 1fr);
}
.pf-footer__brand img { width: 236px; height: auto; }
.pf-footer__tagline { margin: 14px 0 16px; font-size: .9rem; color: rgba(255, 255, 255, .78); }

.pf-social { display: flex; gap: 10px; list-style: none; }
.pf-social a {
	display: grid; place-items: center;
	width: 34px; height: 34px; border-radius: 50%;
	background: rgba(255, 255, 255, .10);
	color: #fff;
}
.pf-social a:hover { background: var(--pf-brand-lt); }

.pf-footer__h {
	margin: 0 0 13px;
	font-family: var(--pf-display); font-weight: 600;
	font-size: 1.0625rem; letter-spacing: .13em; text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}
.pf-flinks, .pf-contact { list-style: none; display: grid; gap: 9px; }
.pf-flinks a, .pf-contact a { color: rgba(255, 255, 255, .84); text-decoration: none; font-size: .925rem; }
.pf-flinks a:hover, .pf-contact a:hover { color: #fff; text-decoration: underline; }
/* align-items: the address row is three lines tall; stretch would pull the pin to match. */
.pf-contact li { display: flex; align-items: flex-start; gap: 10px; font-size: .925rem; }
.pf-contact .pf-icon { margin-top: 3px; flex: none; width: 18px; height: 18px; }

/* Copy-the-address control (workbook F4). Quiet until hovered or focused: it is
   a convenience beside the address, not a call to action. */
.pf-copy {
	display: inline-block;
	margin-top: 6px; padding: 3px 9px;
	background: none;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 999px;
	font: inherit; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
	cursor: pointer;
}
.pf-copy:hover, .pf-copy:focus-visible {
	border-color: var(--pf-lavender);
	color: #fff;
}
.pf-copy__note:not(:empty) {
	display: block;
	margin-top: 4px;
	font-size: .72rem; letter-spacing: 0; text-transform: none;
	color: var(--pf-lavender);
}

.pf-footer__legal { margin-top: 34px; text-align: center; }
.pf-disclaimer {
	display: inline-block;
	margin: 0 0 14px;
	padding: 11px 22px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--pf-radius-sm);
	font-size: .82rem;
	color: rgba(255, 255, 255, .78);
}
.pf-copyright { margin: 0; font-size: .8rem; color: rgba(255, 255, 255, .55); }
.pf-copyright a { color: rgba(255, 255, 255, .72); }
.pf-copyright__sep { margin-inline: 8px; }

/* =============================================== My Story: commitments */

.pf-commit { background: var(--pf-paper); padding-block: 48px 52px; }
.pf-commit__h {
	margin: 0; text-align: center;
	font-family: var(--pf-display); font-weight: 700;
	font-size: clamp(1.5rem, 3vw, 2.15rem);
	letter-spacing: .045em; text-transform: uppercase;
	color: var(--pf-brand-lt);
}
.pf-commit__grid {
	display: grid; gap: 0;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: 34px; list-style: none;
}
.pf-commit__item { padding: 0 24px; text-align: center; border-left: 1px solid #DBD6E3; }
.pf-commit__item:first-child { border-left: 0; }
.pf-commit__icon {
	display: grid; place-items: center;
	width: 62px; height: 62px; margin: 0 auto 14px;
	border-radius: 50%; background: var(--pf-pale);
}
.pf-commit__title {
	margin: 0 0 9px;
	font-family: var(--pf-display); font-weight: 700;
	font-size: 1.16rem; letter-spacing: .05em; text-transform: uppercase;
	color: var(--pf-brand-lt);
}
.pf-commit__item p { margin: 0; font-size: .875rem; line-height: 1.55; color: #4E4658; }

/* ================================================= My Story: the article */

.pf-story { padding-block: 52px 40px; }
.pf-story__sec { display: grid; gap: 32px; align-items: start; }
.pf-story__sec--why   { grid-template-columns: 300px minmax(0, 1fr) 270px; }
.pf-story__sec--roots { grid-template-columns: minmax(0, 1fr) 210px 300px; }
/* Replaced "My Minnesota Roots" (removed at the candidate's request, S8): her
   beliefs on the left, the biography she confirmed on the right. */
.pf-story__sec--believe { grid-template-columns: minmax(0, 1fr) 320px; }
.pf-story__sec--ahead { grid-template-columns: minmax(0, 1fr) 1fr; }

.pf-story__h {
	margin: 0 0 16px;
	font-family: var(--pf-display); font-weight: 700;
	font-size: clamp(1.5rem, 2.7vw, 2rem);
	letter-spacing: .04em; text-transform: uppercase;
	color: var(--pf-brand-lt);
}
.pf-story__body { max-width: 68ch; }
.pf-story__body p { font-size: 1.0625rem; line-height: 1.72; }

.pf-story__media .pf-photo { position: sticky; top: calc(var(--pf-header) + 20px); }

.pf-pull {
	margin: 0;
	padding: 24px 22px 20px;
	background: var(--pf-pale);
	border-radius: var(--pf-radius);
}
.pf-pull blockquote { margin: 0; position: relative; padding-left: 26px; }
.pf-pull blockquote::before {
	content: "\201C";
	position: absolute; left: -2px; top: -10px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 3rem; line-height: 1; color: var(--pf-brand-lt);
}
.pf-pull blockquote p { margin: 0; font-size: 1.05rem; line-height: 1.5; color: #2F2545; }
.pf-pull figcaption {
	margin-top: 14px; padding-top: 12px;
	border-top: 2px solid var(--pf-red-rule);
	font-family: var(--pf-display); font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase;
	font-size: .95rem; color: var(--pf-brand-lt);
}

.pf-facts {
	margin-top: 26px; padding: 20px 22px;
	background: var(--pf-paper);
	border-left: 4px solid var(--pf-brand-lt);
	border-radius: var(--pf-radius-sm);
}
.pf-facts__h {
	margin: 0 0 10px;
	font-family: var(--pf-display); font-weight: 600;
	font-size: 1rem; letter-spacing: .1em; text-transform: uppercase;
	color: var(--pf-brand-lt);
}
.pf-facts__list { list-style: none; display: grid; gap: 7px; }
.pf-facts__list li { position: relative; padding-left: 20px; font-size: .95rem; }
.pf-facts__list li::before {
	content: ""; position: absolute; left: 0; top: .62em;
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--pf-lavender);
}
.pf-facts__src { margin: 12px 0 0; font-size: .78rem; color: var(--pf-muted); font-style: italic; }

/* The secondary campaign mark, used whole — no crop, nothing laid over it. */
.pf-story__mn { display: grid; place-items: start center; padding-top: 6px; }
.pf-mn { width: 100%; max-width: 210px; height: auto; }

.pf-story__aside--beliefs { padding-top: 4px; }
/* The biography panel carries its own top margin when it follows a narrative;
   standing alone in a column it does not need one. */
.pf-story__aside--facts .pf-facts { margin-top: 0; }

/* Standing on their own rather than tucked in a sidebar, the four beliefs carry
   the section, so they are set a step larger and given room to breathe. */
.pf-story__sec--believe .pf-beliefs { gap: 24px; max-width: 56ch; }
.pf-story__sec--believe .pf-beliefs__icon { width: 44px; height: 44px; }
.pf-story__sec--believe .pf-beliefs strong { font-size: 1.05rem; margin-bottom: 2px; }
.pf-story__sec--believe .pf-beliefs li > div > span { font-size: .95rem; line-height: 1.5; }
.pf-aside__h {
	margin: 0 0 14px;
	font-family: var(--pf-display); font-weight: 700;
	font-size: 1.3rem; letter-spacing: .05em; text-transform: uppercase;
	color: var(--pf-brand-lt);
}
.pf-beliefs { list-style: none; display: grid; gap: 15px; }
.pf-beliefs li { display: flex; gap: 12px; }
.pf-beliefs__icon {
	flex: none;
	display: grid; place-items: center;
	width: 38px; height: 38px; border-radius: 50%;
	background: linear-gradient(150deg, var(--pf-brand-lt) 0%, var(--pf-brand-deep) 100%);
}
.pf-beliefs strong { display: block; font-size: .95rem; color: var(--pf-ink); }
/* li > div > span: a bare span would also hit the .pf-beliefs__icon badge and knock out its centring. */
.pf-beliefs li > div > span { display: block; font-size: .875rem; color: #4E4658; }
.pf-beliefs .pf-pending { margin-top: 5px; }

.pf-story__gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
/* The gallery slots are too short for emblem + caption; the emblem overflowed and was clipped at the top. Preview-only. */
.pf-story__gallery .pf-photo--empty { padding: 12px; }
.pf-story__gallery .pf-photo--empty .pf-photo__mark { display: none; }

/* ============================================== generic pages / article */

.pf-page { padding-block: 46px 60px; }
.pf-page__head { margin-bottom: 26px; }
.pf-page__h {
	margin: 0 0 8px;
	font-family: var(--pf-display); font-weight: 700;
	font-size: clamp(2rem, 4.4vw, 3rem);
	letter-spacing: .02em; text-transform: uppercase;
	color: var(--pf-ink);
}
.pf-prose { max-width: 68ch; }
.pf-prose h2 { font-family: var(--pf-display); text-transform: uppercase; letter-spacing: .03em; color: var(--pf-brand-lt); margin-top: 1.6em; }
.pf-prose h3 { font-size: 1.2rem; margin-top: 1.4em; }
.pf-prose ul, .pf-prose ol { padding-left: 1.3em; margin-bottom: 1.05em; }
.pf-prose li { margin-bottom: .4em; }

.pf-empty {
	max-width: 62ch; margin: 0 auto; padding: 26px;
	text-align: center;
	border: 1px dashed #C4BDD2; border-radius: var(--pf-radius);
	background: var(--pf-paper);
}

.pf-postlist { display: grid; gap: 26px; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; }
/* a lone card, or a lone card on the last row, centres instead of stranding left */
.pf-postlist:has(> :last-child:nth-child(1)) { grid-template-columns: minmax(0, 420px); justify-content: center; }
.pf-postlist > :last-child:nth-child(3n + 1):not(:first-child) { grid-column: 2; }
.pf-postcard { display: flex; flex-direction: column; overflow: hidden; }
.pf-postcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pf-postcard__body { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.pf-postcard__h { margin: 0; font-size: 1.15rem; }
.pf-postcard__h a { color: var(--pf-ink); text-decoration: none; }
.pf-postcard__h a:hover { color: var(--pf-brand-lt); }
.pf-postcard__meta { font-size: .8rem; color: var(--pf-muted); }

.pf-form { display: grid; gap: 18px; max-width: 560px; }
.pf-form .pf-field__input,
.pf-form textarea {
	width: 100%; padding: 12px 14px; font: inherit; font-size: .95rem;
	background: var(--pf-white); border: 1px solid #CFC9DA;
	border-radius: var(--pf-radius-sm); color: var(--pf-body);
}
.pf-form textarea { min-height: 140px; resize: vertical; }
.pf-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.pf-fieldset > legend { padding: 0; }

/* Volunteer options: bordered tiles, two across, the whole tile is the hit area. */
.pf-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.pf-checks label {
	display: flex; gap: 11px; align-items: center;
	padding: 11px 13px;
	background: var(--pf-white);
	border: 1px solid #CFC9DA; border-radius: var(--pf-radius-sm);
	font-size: .95rem; line-height: 1.3; cursor: pointer;
	transition: border-color .16s ease, background-color .16s ease;
}
.pf-checks label:hover { border-color: var(--pf-brand-lt); }
.pf-checks label:has(input:checked) { border-color: var(--pf-brand); background: #F4EFFA; }
.pf-checks label:has(input:focus-visible) { outline: 3px solid var(--pf-lavender); outline-offset: 2px; }
.pf-checks input[type="checkbox"] {
	appearance: none; -webkit-appearance: none;
	flex: none; display: grid; place-content: center;
	width: 20px; height: 20px; margin: 0;
	background: var(--pf-white);
	border: 2px solid #A99CC0; border-radius: 4px;
	cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease;
}
/* The tick is a rotated border, so no image (and nothing a CSP could block). */
.pf-checks input[type="checkbox"]::before {
	content: ""; width: 5px; height: 10px; margin-top: -2px;
	border: solid var(--pf-white); border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform .12s ease;
}
.pf-checks input[type="checkbox"]:checked { background: var(--pf-brand); border-color: var(--pf-brand); }
.pf-checks input[type="checkbox"]:checked::before { transform: rotate(45deg) scale(1); }
.pf-checks input[type="checkbox"]:focus-visible { outline: none; } /* the tile carries the ring */

/* Get Involved: one centred column. Headings, intro and the share control are
   centred; the form's own labels and fields stay left-aligned for scanning. */
.pf-involved { max-width: 640px; }
.pf-involved .pf-prose { max-width: none; text-align: center; }
.pf-involved .pf-prose p,
.pf-involved section[aria-labelledby="pf-share-h"] p { text-wrap: balance; }
.pf-involved .pf-story__h { text-align: center; }
.pf-involved .pf-form { max-width: none; }
.pf-involved .pf-formnote { text-align: left; }
.pf-involved section[aria-labelledby="pf-share-h"] { text-align: center; }
.pf-involved .pf-btn--lg { display: flex; width: 100%; }
@media (max-width: 520px) {
	.pf-checks { grid-template-columns: minmax(0, 1fr); }
}

/* Production with no portrait yet: the photo slot renders nothing, so drop its
   column instead of indenting the story beside an empty gap. */
.pf-story__sec--why:not(:has(.pf-story__media .pf-photo)) { grid-template-columns: minmax(0, 1fr) 270px; }
.pf-story__sec--why:not(:has(.pf-story__media .pf-photo)) .pf-story__media { display: none; }
@media (max-width: 1100px) {
	.pf-story__sec--why:not(:has(.pf-story__media .pf-photo)) { grid-template-columns: minmax(0, 1fr); }
}

/* ======================================================== breakpoints */

@media (max-width: 1100px) {
	.pf-feed__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pf-story__sec--why   { grid-template-columns: 250px minmax(0, 1fr); }
	.pf-story__sec--why .pf-story__aside { grid-column: 1 / -1; }
	.pf-story__sec--roots { grid-template-columns: minmax(0, 1fr) 260px; }
	.pf-story__sec--roots .pf-story__mn { grid-column: 2; grid-row: 2; }
	.pf-story__sec--believe { grid-template-columns: minmax(0, 1fr) 280px; }
}

@media (max-width: 980px) {
	:root { --pf-header: 76px; }
	.pf-nav, .pf-header__cta { display: none; }
	.pf-burger { display: grid; place-items: center; margin-left: auto; }
	.pf-brand__img { width: 172px; }

	/* Phones: the skyline reads as atmosphere, never as texture behind the
	   headline. The crop favours sky, and the veil is heavy from the top down. */
	.pf-hero__bg { inset: 0; background-position: 66% 12%; }
	.pf-hero__veil {
		background: linear-gradient(180deg,
			rgba(16, 5, 38, .74) 0%,
			rgba(16, 5, 38, .86) 30%,
			rgba(16, 5, 38, .95) 58%,
			var(--pf-ink) 100%);
	}
	.pf-hero--short .pf-hero__veil {
		background: linear-gradient(180deg,
			rgba(16, 5, 38, .68) 0%,
			rgba(16, 5, 38, .88) 62%,
			var(--pf-ink) 100%);
	}
	.pf-hero { min-height: clamp(500px, 78vw, 620px); align-items: flex-end; }
	.pf-hero--short { min-height: 300px; align-items: center; }
	.pf-hero__inner { padding-block: 38px; }

	.pf-commit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 0; }
	.pf-commit__item:nth-child(3) { border-left: 0; }

	.pf-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pf-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
	.pf-issues__grid { grid-template-columns: minmax(0, 1fr); }
	.pf-news__inner { grid-template-columns: auto minmax(0, 1fr); }
	.pf-news__form  { grid-column: 1 / -1; }
	.pf-postlist    { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.pf-story__sec--why,
	.pf-story__sec--roots,
	.pf-story__sec--believe,
	.pf-story__sec--ahead { grid-template-columns: minmax(0, 1fr); }
	.pf-story__sec--why  .pf-story__media { order: 1; max-width: 420px; }
	.pf-story__sec--why  .pf-story__body  { order: 2; }
	.pf-story__sec--why  .pf-story__aside { order: 3; }
	.pf-story__media .pf-photo { position: static; }
	.pf-story__sec--roots .pf-story__mn { grid-column: auto; grid-row: auto; max-width: 260px; margin-inline: auto; }
	.pf-story__gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}

@media (max-width: 700px) {
	body { font-size: 16px; }
	.pf-feed__grid { grid-template-columns: minmax(0, 1fr); }
	.pf-feed, .pf-issues, .pf-commit { padding-block: 42px 46px; }
	.pf-involve { padding-block: 42px 38px; }

	.pf-card--issue { flex-direction: column; gap: 14px; padding: 22px; }
	.pf-actions { gap: 12px; }
	.pf-actions > li { width: calc(50% - 6px); min-height: 84px; }
	/* a lone third action spans the row rather than stranding to one side */
	.pf-actions > li:last-child:nth-child(odd) { width: 100%; }

	.pf-involve--slim { padding-block: 46px; }
	.pf-involve--slim .pf-involve__inner { flex-direction: column; align-items: flex-start; gap: 20px; text-align: left; }
	.pf-involve--slim .pf-involve__cta { width: 100%; }
	.pf-involve--slim .pf-btn { width: 100%; }

	.pf-news__inner { grid-template-columns: minmax(0, 1fr); gap: 14px; text-align: left; }
	.pf-news__icon  { display: none; }
	.pf-news__form  { flex-direction: column; gap: 10px; }
	.pf-field__input { width: 100%; border-radius: var(--pf-radius-sm); }
	.pf-news__form .pf-btn { border-radius: var(--pf-radius-sm); align-self: stretch; }

	.pf-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.pf-postlist { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
	:root { --pf-gutter: 18px; }
	.pf-commit__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.pf-commit__item { border-left: 0; padding-inline: 0; }
	.pf-story__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* a lone third image centres rather than stranding left */
	.pf-story__gallery > :last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 60%; margin-inline: auto; }
	.pf-hero__cta .pf-btn { flex: 1 1 100%; }
	.pf-btn--unconfigured { flex-direction: column; }
}

/* a trailing rule when a later section is gated out in production */
.pf-story .pf-hr:last-child { display: none; }