/**
 * AdRevv Project Funding — front end.
 * Every colour comes from a variable so a theme can retint the whole thing.
 */

.arpf {
	/* AdRevv: charcoal ground, gray text, orange accent.
	   Every value below can be overridden in Project Funding → Settings. */
	--arpf-ink: #23272c;
	--arpf-raised: #2c3137;
	--arpf-line: #3d434b;
	--arpf-paper: #f4f5f6;
	--arpf-muted: #9aa1a9;
	--arpf-dim: #6e767f;
	--arpf-accent: #dd9300;
	--arpf-money: #dd9300;
	/* Text sitting on an accent fill. White fails contrast on this orange. */
	--arpf-on-accent: #23272c;
	--arpf-display: "Barlow", "Helvetica Neue", Arial, sans-serif;
	--arpf-body: "Inter", "Helvetica Neue", Arial, sans-serif;
	--arpf-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
	--arpf-gut: clamp(20px, 5vw, 68px);
	--arpf-max: 1200px;

	background: var(--arpf-ink);
	color: var(--arpf-paper);
	font-family: var(--arpf-body);
	font-size: 16px;
	line-height: 1.6;
	box-sizing: border-box;
	padding: 0 var(--arpf-gut);
}

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

.arpf img {
	max-width: 100%;
	height: auto;
	display: block;
}

.arpf a {
	color: inherit;
	text-decoration: none;
}

.arpf :focus-visible {
	outline: 2px solid var(--arpf-accent);
	outline-offset: 3px;
}

/* Themes routinely colour h1–h3 inside the content area. These selectors are
   specific enough to win without reaching for !important. */
.arpf .arpf-hero .arpf-title,
.arpf .arpf-slate-head .arpf-slate-h,
.arpf .arpf-cards .arpf-c-lab,
.arpf h1,
.arpf h2,
.arpf h3,
.arpf h4 {
	color: var(--arpf-paper);
}

.arpf .arpf-cards .arpf-c-lab,
.arpf .arpf-eyebrow,
.arpf .arpf-cta-kicker {
	color: var(--arpf-accent);
}

/* Themes set h1 sizes as readily as h1 colours, so the hero pair is restated
   here rather than relying on the component rules alone. */
.arpf .arpf-hero .arpf-title {
	font-size: clamp(36px, 8vw, 110px);
	line-height: 0.88;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	margin: 0 0 10px;
}

.arpf .arpf-hero .arpf-logline {
	font-size: clamp(15px, 1.35vw, 19px);
	line-height: 1.5;
	font-weight: 400;
	color: var(--arpf-muted);
}

@media (max-width: 600px) {
	.arpf .arpf-hero .arpf-title {
		font-size: clamp(32px, 9vw, 52px);
	}
}

.arpf .arpf-track-fig {
	color: var(--arpf-money);
}

.arpf-hero,
.arpf-section,
.arpf-foot,
.arpf-slate-head,
.arpf-tools,
.arpf-grid-cards,
.arpf-empty {
	max-width: var(--arpf-max);
	margin-left: auto;
	margin-right: auto;
}

.arpf-section {
	padding: clamp(56px, 8vw, 112px) 0;
	border-top: 1px solid var(--arpf-line);
}

.arpf-eyebrow {
	font-family: var(--arpf-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--arpf-accent);
	margin: 0 0 18px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.arpf-eyebrow::after {
	content: "";
	height: 1px;
	flex: 1;
	background: var(--arpf-line);
}

.arpf-h2 {
	font-family: var(--arpf-display);
	font-weight: 600;
	font-size: clamp(30px, 4.4vw, 56px);
	line-height: 1.02;
	letter-spacing: -0.01em;
	margin: 0 0 20px;
	color: var(--arpf-paper);
}

.arpf-lede {
	font-size: clamp(16px, 1.5vw, 19px);
	color: #b9c0c7;
	max-width: 64ch;
	margin: 0;
}

.arpf-lede--gap {
	margin-bottom: 38px;
}

.arpf-center {
	text-align: center;
}

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

.arpf-btn {
	display: inline-block;
	background: var(--arpf-accent);
	color: var(--arpf-on-accent);
	border: 1px solid var(--arpf-accent);
	font-family: var(--arpf-mono);
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 18px 40px;
	cursor: pointer;
	transition: background 0.3s ease, color 0.3s ease;
}

.arpf-btn:hover,
.arpf-btn:focus-visible {
	background: transparent;
	color: var(--arpf-paper);
}

.arpf-btn--ghost {
	background: transparent;
	color: var(--arpf-paper);
}

.arpf-btn--ghost:hover {
	background: var(--arpf-accent);
	color: var(--arpf-on-accent);
}

.arpf-note {
	font-family: var(--arpf-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--arpf-dim);
	margin: 20px 0 0;
}


/* Themes restyle buttons and inputs aggressively — rounded corners, gradient
   backgrounds, and `border: none` on hover being the usual three. Everything
   below re-states what the plugin needs in every state, at a specificity a
   theme rule is unlikely to beat. Without this a button can lose its border
   on hover on a live site while looking correct in isolation. */

.arpf button,
.arpf input:not([type="checkbox"]):not([type="radio"]),
.arpf select,
.arpf textarea {
	font-family: inherit;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
	background-image: none;
	min-height: 0;
	max-width: none;
	text-transform: none;
}

.arpf .arpf-btn,
.arpf .arpf-btn:link,
.arpf .arpf-btn:visited,
.arpf .arpf-btn:hover,
.arpf .arpf-btn:focus,
.arpf .arpf-btn:active {
	border: 1px solid var(--arpf-accent);
	border-radius: 0;
	background-image: none;
	box-shadow: none;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	line-height: 1.2;
}

.arpf .arpf-btn {
	background-color: var(--arpf-accent);
	color: var(--arpf-on-accent);
}

.arpf .arpf-btn:hover,
.arpf .arpf-btn:focus {
	background-color: transparent;
	color: var(--arpf-paper);
	border-color: var(--arpf-accent);
}

.arpf .arpf-btn--ghost {
	background-color: transparent;
	color: var(--arpf-paper);
}

.arpf .arpf-btn--ghost:hover,
.arpf .arpf-btn--ghost:focus {
	background-color: var(--arpf-accent);
	color: var(--arpf-on-accent);
}

.arpf .arpf-chip,
.arpf .arpf-chip:hover,
.arpf .arpf-chip:focus,
.arpf .arpf-page,
.arpf .arpf-page:hover,
.arpf .arpf-page:focus,
.arpf .arpf-arrow,
.arpf .arpf-arrow:hover,
.arpf .arpf-arrow:focus,
.arpf .arpf-x,
.arpf .arpf-x:hover,
.arpf .arpf-x:focus,
.arpf .arpf-expand,
.arpf .arpf-expand:hover {
	border-style: solid;
	border-width: 1px;
	border-radius: 0;
	background-image: none;
	box-shadow: none;
}

.arpf .arpf-chip:hover,
.arpf .arpf-page:hover,
.arpf .arpf-arrow:hover,
.arpf .arpf-x:hover,
.arpf .arpf-expand:hover {
	border-color: var(--arpf-accent);
}

.arpf .arpf-chip[aria-pressed="true"],
.arpf .arpf-page[aria-current="true"] {
	border-color: var(--arpf-accent);
}

.arpf .arpf-play,
.arpf .arpf-play:hover,
.arpf .arpf-play:focus {
	border: 0;
	background: none;
	box-shadow: none;
}

/* --------------------------------------------------------------- slate */

.arpf-slate-head {
	padding: clamp(40px, 6vw, 76px) 0 clamp(24px, 3vw, 36px);
}

.arpf-slate-h {
	font-family: var(--arpf-display);
	font-weight: 600;
	font-size: clamp(40px, 7vw, 92px);
	line-height: 0.94;
	letter-spacing: -0.02em;
	margin: 0 0 18px;
	max-width: 22ch;
	color: var(--arpf-paper);
}

.arpf-tools {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 10px;
	align-items: center;
	padding: 20px 0;
	border-top: 1px solid var(--arpf-line);
	border-bottom: 1px solid var(--arpf-line);
	margin-bottom: 1px;
}

.arpf-chip {
	font-family: var(--arpf-mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	background: none;
	border: 1px solid var(--arpf-line);
	color: var(--arpf-muted);
	padding: 9px 15px;
	cursor: pointer;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.arpf-chip:hover {
	color: var(--arpf-paper);
}

.arpf-chip[aria-pressed="true"] {
	border-color: var(--arpf-accent);
	color: var(--arpf-paper);
}

.arpf-search {
	flex: 1;
	min-width: 190px;
	background: #1c2024;
	border: 1px solid var(--arpf-line);
	color: var(--arpf-paper);
	font-family: var(--arpf-body);
	font-size: 14px;
	padding: 11px 13px;
	border-radius: 0;
}

.arpf-search:focus {
	border-color: var(--arpf-accent);
	outline: none;
}

.arpf-count {
	font-family: var(--arpf-mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--arpf-dim);
	white-space: nowrap;
}

.arpf-grid-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
	gap: 1px;
	background: var(--arpf-line);
	border: 1px solid var(--arpf-line);
	margin-bottom: 60px;
}

.arpf-grid-cards--2 {
	grid-template-columns: repeat(2, 1fr);
}

.arpf-grid-cards--3 {
	grid-template-columns: repeat(3, 1fr);
}

.arpf-grid-cards--4 {
	grid-template-columns: repeat(4, 1fr);
}

.arpf-grid-cards--5 {
	grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1100px) {
	.arpf-grid-cards--4,
	.arpf-grid-cards--5 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 860px) {
	.arpf-grid-cards--3,
	.arpf-grid-cards--4,
	.arpf-grid-cards--5 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {
	.arpf-grid-cards,
	.arpf-grid-cards--2,
	.arpf-grid-cards--3,
	.arpf-grid-cards--4,
	.arpf-grid-cards--5 {
		grid-template-columns: 1fr;
	}
}

.arpf-card {
	background: var(--arpf-ink);
	display: flex;
	flex-direction: column;
	transition: background 0.3s ease;
}

.arpf-card:hover {
	background: var(--arpf-raised);
}

.arpf-card[hidden] {
	display: none;
}

.arpf-shot {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #1c2024;
	border-bottom: 1px solid var(--arpf-line);
}

.arpf-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.arpf-shot-blank {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--arpf-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #5b636b;
}

.arpf-pill {
	position: absolute;
	top: 12px;
	left: 12px;
	font-family: var(--arpf-mono);
	font-size: 9.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 5px 9px;
	background: rgba(25, 29, 33, 0.9);
	border: 1px solid var(--arpf-accent);
	color: var(--arpf-paper);
}

.arpf-card-body {
	padding: 22px 24px 26px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.arpf-card-cat {
	font-family: var(--arpf-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--arpf-accent);
	margin-bottom: 10px;
}

.arpf-card-name {
	font-family: var(--arpf-display);
	font-weight: 600;
	font-size: clamp(19px, 1.7vw, 23px);
	line-height: 1.14;
	letter-spacing: -0.005em;
	margin-bottom: 9px;
}

.arpf-card-log {
	color: #aab1b8;
	font-size: 14.5px;
	line-height: 1.55;
	margin-bottom: 22px;
}

.arpf-card-meta {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--arpf-line);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
}

.arpf-card-ask {
	font-family: var(--arpf-mono);
	font-size: 15px;
	color: var(--arpf-money);
}

.arpf-card-ask small {
	display: block;
	font-size: 9.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--arpf-dim);
	margin-top: 5px;
}

.arpf-card-go {
	font-family: var(--arpf-mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--arpf-muted);
	transition: color 0.25s ease;
	white-space: nowrap;
}

.arpf-card:hover .arpf-card-go {
	color: var(--arpf-accent);
}

.arpf-card-fund {
	display: block;
	margin-top: 14px;
}

.arpf-card-fund .arpf-progress-bar {
	display: block;
	height: 3px;
	background: var(--arpf-line);
	overflow: hidden;
}

.arpf-card-fund .arpf-progress-bar span {
	display: block;
	height: 100%;
	background: var(--arpf-money);
}

.arpf-card-fund-lab {
	display: block;
	font-family: var(--arpf-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--arpf-muted);
	margin-top: 8px;
}

.arpf-card-funder {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--arpf-line);
	font-size: 13.5px;
	color: var(--arpf-paper);
}

.arpf-card-funder img {
	width: 34px;
	height: 34px;
	object-fit: contain;
	flex: 0 0 auto;
	background: #fff;
	padding: 3px;
}

.arpf-card-funder em {
	display: block;
	font-style: normal;
	font-family: var(--arpf-mono);
	font-size: 9.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--arpf-dim);
	margin-bottom: 2px;
}

.arpf-card-update {
	font-family: var(--arpf-mono);
	font-size: 9.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--arpf-dim);
	margin-top: 12px;
}

.arpf-empty {
	padding: 70px 0;
	text-align: center;
	color: var(--arpf-muted);
	display: none;
}

.arpf-empty[data-show="true"] {
	display: block;
}

.arpf-empty p {
	margin: 0 0 20px;
	font-family: var(--arpf-display);
	font-weight: 600;
	font-size: 24px;
}

.arpf-empty-note {
	padding: 60px 0;
	color: var(--arpf-muted);
}

/* ---------------------------------------------------------- project hero */

.arpf-hero {
	padding: clamp(30px, 5vw, 56px) 0 0;
}

.arpf-crumb {
	font-family: var(--arpf-mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--arpf-muted);
	margin: 0 0 26px;
	display: inline-block;
	transition: color 0.25s ease;
}

.arpf-crumb:hover {
	color: var(--arpf-accent);
}

.arpf-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
	font-family: var(--arpf-mono);
	font-size: 11px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--arpf-dim);
	margin: 0 0 24px;
}

.arpf-hero-meta b {
	color: var(--arpf-paper);
	font-weight: 500;
}

.arpf-title {
	font-family: var(--arpf-display);
	font-weight: 700;
	font-size: clamp(36px, 8vw, 110px);
	line-height: 0.88;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	overflow-wrap: break-word;
	margin: 0 0 10px;
	color: var(--arpf-paper);
}

.arpf-logline {
	font-family: var(--arpf-body);
	font-size: clamp(15px, 1.35vw, 19px);
	line-height: 1.5;
	font-weight: 400;
	color: var(--arpf-muted);
	max-width: 46ch;
	margin: 8px 0 clamp(26px, 4vw, 44px);
}

.arpf-still {
	position: relative;
	border: 1px solid var(--arpf-line);
	overflow: hidden;
	background: #1c2024;
}

.arpf-still img {
	width: 100%;
}

.arpf-still--video {
	aspect-ratio: 16 / 9;
	min-height: 260px;
	cursor: pointer;
	display: grid;
	place-items: center;
}

.arpf-still--video img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.arpf-still-veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 23, 26, 0.15) 0%, rgba(20, 23, 26, 0.62) 100%);
	transition: background 0.35s ease;
}

.arpf-still--video:hover .arpf-still-veil {
	background: linear-gradient(180deg, rgba(20, 23, 26, 0.05) 0%, rgba(20, 23, 26, 0.5) 100%);
}

/* ---------------------------------------------------------------- reel */

.arpf-reel {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #1a1e22;
	border: 1px solid var(--arpf-line);
	display: grid;
	place-items: center;
	overflow: hidden;
}

.arpf-reel-bg {
	position: absolute;
	inset: 0;
	background: radial-gradient(90% 120% at 68% 22%, #363c43 0%, #24282d 58%, #1a1e22 100%);
}

.arpf-reel-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 4px);
}

.arpf-play {
	position: relative;
	z-index: 2;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--arpf-paper);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	font: inherit;
	padding: 18px;
}

.arpf-play-ring {
	width: 84px;
	height: 84px;
	border: 1px solid var(--arpf-accent);
	border-radius: 50%;
	display: grid;
	place-items: center;
	transition: background 0.35s ease, transform 0.35s ease;
}

.arpf-play-ring::before {
	content: "";
	width: 0;
	height: 0;
	margin-left: 5px;
	border-left: 19px solid var(--arpf-accent);
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	transition: border-left-color 0.35s ease;
}

.arpf-play:hover .arpf-play-ring,
.arpf-play:focus-visible .arpf-play-ring {
	background: var(--arpf-accent);
	transform: scale(1.04);
}

.arpf-play:hover .arpf-play-ring::before,
.arpf-play:focus-visible .arpf-play-ring::before {
	border-left-color: var(--arpf-on-accent);
}

.arpf-play-label {
	font-family: var(--arpf-mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--arpf-muted);
}

.arpf-embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

/* ------------------------------------------------------- deck slider */

.arpf-deck-stage {
	position: relative;
	aspect-ratio: 16 / 9;
	max-height: 78vh;
	min-height: 320px;
	background: #1a1e22;
	border: 1px solid var(--arpf-line);
	overflow: hidden;
}

.arpf-deck-stage img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.arpf-deck-stage img[data-active="true"] {
	opacity: 1;
}

.arpf-deck-stage:fullscreen {
	max-height: none;
	aspect-ratio: auto;
	width: 100%;
	height: 100%;
	background: #000;
	border: 0;
}

.arpf-expand {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	background: rgba(25, 29, 33, 0.85);
	border: 1px solid var(--arpf-line);
	color: var(--arpf-muted);
	font-family: var(--arpf-mono);
	font-size: 9.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 8px 12px;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.arpf-deck:hover .arpf-expand,
.arpf-expand:focus-visible {
	opacity: 1;
}

.arpf-expand:hover {
	border-color: var(--arpf-accent);
	color: var(--arpf-paper);
}

/* Slide numbers run vertically to the right of the stage, with the arrows
   stacked in the same column. The rail is absolutely positioned inside a
   wrapper so a long number list can never stretch the row — past the stage
   height the numbers scroll on their own. */

.arpf-deck {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 62px;
	column-gap: 0;
	align-items: stretch;
	/* Slide plus number rail centred as one unit. */
	max-width: 1042px;
	margin-inline: auto;
}

.arpf-deck-stage {
	grid-column: 1;
	grid-row: 1;
}

.arpf-pager-wrap {
	grid-column: 2;
	grid-row: 1;
	position: relative;
	min-width: 0;
	/* Sits flush against the stage — the two borders share one line. */
	margin-left: -1px;
}

.arpf-pager {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 0;
}

.arpf-pages {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	scrollbar-width: thin;
	scrollbar-color: var(--arpf-line) transparent;
	scroll-behavior: smooth;
	gap: 4px;
}

.arpf-pages::-webkit-scrollbar {
	width: 4px;
}

.arpf-pages::-webkit-scrollbar-thumb {
	background: var(--arpf-line);
}

.arpf-page {
	flex: 0 0 auto;
	width: 100%;
	height: 40px;
	background: none;
	border: 1px solid var(--arpf-line);
	color: var(--arpf-muted);
	font-family: var(--arpf-mono);
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.arpf-page:hover {
	color: var(--arpf-paper);
	border-color: var(--arpf-muted);
}

.arpf-page[aria-current="true"] {
	background: var(--arpf-accent);
	border-color: var(--arpf-accent);
	color: var(--arpf-on-accent);
	font-weight: 500;
}

.arpf-arrow {
	flex: 0 0 auto;
	width: 100%;
	height: 44px;
	background: none;
	border: 1px solid var(--arpf-line);
	color: var(--arpf-paper);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.arpf-arrow:hover {
	border-color: var(--arpf-accent);
	color: var(--arpf-accent);
}

.arpf-arrow[disabled] {
	opacity: 0.3;
	cursor: default;
}

.arpf-arrow[disabled]:hover {
	border-color: var(--arpf-line);
	color: var(--arpf-paper);
}

/* -------------------------------------------------------- detail cards */

.arpf-section--cards {
	padding-top: clamp(30px, 4vw, 52px);
}

.arpf-cards {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 14px;
	max-width: var(--arpf-max);
	margin: 0 auto;
}

.arpf-c {
	grid-column: span 3;
	background: var(--arpf-raised);
	border: 1px solid var(--arpf-line);
	padding: clamp(22px, 2.6vw, 34px);
	min-width: 0;
}

.arpf-c--third {
	grid-column: span 2;
}

.arpf-c--twothirds {
	grid-column: span 4;
}

.arpf-c--full {
	grid-column: 1 / -1;
}

.arpf-c--track {
	grid-column: span 3;
}

.arpf-c--flush {
	padding: 0;
	background: none;
	border: 0;
}

.arpf-c--quiet {
	background: none;
	border: 0;
	border-top: 1px solid var(--arpf-line);
	padding: 18px 0 0;
}

.arpf-c-lab {
	font-family: var(--arpf-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--arpf-accent);
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--arpf-line);
}

.arpf-c--cta {
	background: var(--arpf-accent);
	border-color: var(--arpf-accent);
	text-align: center;
	padding: clamp(30px, 4vw, 52px);
}

.arpf-c--cta .arpf-c-lab {
	color: rgba(35, 39, 44, 0.7);
	border-bottom-color: rgba(35, 39, 44, 0.25);
}

.arpf-c-cta-h {
	font-family: var(--arpf-display);
	font-weight: 600;
	font-size: clamp(26px, 3.6vw, 44px);
	line-height: 1.04;
	margin: 0 auto 24px;
	max-width: 26ch;
	color: var(--arpf-on-accent);
}

.arpf-btn--onaccent {
	background: var(--arpf-ink);
	color: var(--arpf-paper);
	border-color: var(--arpf-ink);
}

.arpf-btn--onaccent:hover {
	background: transparent;
	color: var(--arpf-on-accent);
	border-color: var(--arpf-on-accent);
}

.arpf-c .arpf-prose p:first-of-type {
	font-size: clamp(17px, 1.6vw, 20px);
}

.arpf-c .arpf-facts {
	border-top: 0;
	padding-top: 0;
}

.arpf-c .arpf-fact:first-child {
	padding-top: 0;
}

.arpf-c .arpf-timeline {
	border-top: 0;
}

.arpf-c .arpf-tl-item:first-child {
	padding-top: 0;
}

.arpf-c .arpf-tl-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.arpf-c .arpf-track-fig {
	margin-top: -4px;
}

.arpf-reel-cap {
	font-family: var(--arpf-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--arpf-dim);
	margin: 12px 0 0;
}

.arpf-contacts {
	list-style: none;
	margin: 0;
	padding: 0;
}

.arpf-contacts li {
	padding: 12px 0;
	border-bottom: 1px solid var(--arpf-line);
	font-size: 14px;
	line-height: 1.7;
}

.arpf-contacts li:first-child {
	padding-top: 0;
}

.arpf-contacts li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.arpf-contacts strong {
	display: block;
	font-family: var(--arpf-display);
	font-weight: 600;
	font-size: 21px;
	color: var(--arpf-paper);
	margin-bottom: 2px;
}

.arpf-contacts a,
.arpf-contacts span {
	display: block;
	color: var(--arpf-muted);
	font-family: var(--arpf-mono);
	font-size: 11.5px;
	letter-spacing: 0.04em;
}

.arpf-contacts a:hover {
	color: var(--arpf-accent);
}

/* --------------------------------------------------------- description */

.arpf-cols {
	display: grid;
	grid-template-columns: 1.35fr 0.8fr;
	gap: clamp(30px, 6vw, 78px);
	align-items: start;
}

.arpf-prose p {
	margin: 0 0 19px;
	color: #b3bac1;
	font-size: clamp(15.5px, 1.4vw, 18px);
}

.arpf-prose p:first-of-type {
	color: var(--arpf-paper);
	font-size: clamp(18px, 1.7vw, 22px);
	line-height: 1.5;
}

.arpf-prose a {
	color: var(--arpf-accent);
	text-decoration: underline;
}

.arpf-facts {
	border-top: 1px solid var(--arpf-accent);
	padding-top: 18px;
	margin: 0;
}

.arpf-fact {
	padding: 13px 0;
	border-bottom: 1px solid var(--arpf-line);
}

.arpf-fact dt {
	font-family: var(--arpf-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--arpf-dim);
	margin: 0 0 4px;
}

.arpf-fact dd {
	margin: 0;
	font-family: var(--arpf-display);
	font-weight: 600;
	font-size: clamp(18px, 1.9vw, 23px);
	line-height: 1.12;
	color: var(--arpf-paper);
}

/* -------------------------------------------------------------- tracks */

.arpf-tracks {
	display: grid;
	gap: 1px;
	background: var(--arpf-line);
	border: 1px solid var(--arpf-line);
}

.arpf-tracks--2 {
	grid-template-columns: 1fr 1fr;
}

.arpf-track {
	background: var(--arpf-ink);
	padding: clamp(24px, 3.4vw, 40px);
}

.arpf-track-lab {
	font-family: var(--arpf-mono);
	font-size: 10.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--arpf-dim);
	margin: 0 0 8px;
}

.arpf-track-fig {
	font-family: var(--arpf-display);
	font-weight: 700;
	color: var(--arpf-money);
	font-size: clamp(48px, 7vw, 90px);
	line-height: 0.86;
	letter-spacing: -0.03em;
	margin: 0 0 6px;
}

.arpf-track-for {
	font-family: var(--arpf-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--arpf-muted);
	margin: 0 0 24px;
}

.arpf-progress {
	margin: 0 0 24px;
}

.arpf-progress-bar {
	height: 4px;
	background: var(--arpf-line);
	overflow: hidden;
}

.arpf-progress-bar span {
	display: block;
	height: 100%;
	background: var(--arpf-money);
}

.arpf-progress-lab {
	font-family: var(--arpf-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--arpf-muted);
	margin: 9px 0 0;
}

.arpf-use {
	list-style: none;
	margin: 0;
	padding: 0;
}

.arpf-use li {
	display: flex;
	gap: 11px;
	padding: 11px 0;
	border-bottom: 1px solid var(--arpf-line);
	font-size: 14.5px;
	color: #b3bac1;
}

.arpf-use li:last-child {
	border-bottom: 0;
}

.arpf-use i {
	font-family: var(--arpf-mono);
	font-size: 10px;
	color: var(--arpf-accent);
	flex: 0 0 auto;
	padding-top: 5px;
	font-style: normal;
	letter-spacing: 0.1em;
}

.arpf-dates {
	margin: 22px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--arpf-line);
	display: grid;
	gap: 12px;
}

.arpf-dates dt {
	font-family: var(--arpf-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--arpf-dim);
	margin-bottom: 3px;
}

.arpf-dates dd {
	margin: 0;
	font-family: var(--arpf-display);
	font-weight: 600;
	font-size: 19px;
	color: var(--arpf-paper);
}

.arpf-c--funder {
	display: flex;
	flex-direction: column;
}

.arpf-funder-logo {
	display: block;
	background: #fff;
	padding: 18px;
	margin-bottom: 18px;
	align-self: flex-start;
	max-width: 260px;
}

.arpf-funder-logo img {
	width: 100%;
	height: auto;
}

.arpf-funder-name {
	font-family: var(--arpf-display);
	font-weight: 600;
	font-size: clamp(24px, 2.6vw, 34px);
	line-height: 1.08;
	color: var(--arpf-paper);
	margin: 0;
}

.arpf-use--rewards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 32px;
}

.arpf-use--rewards li:nth-last-child(2):nth-child(odd),
.arpf-use--rewards li:last-child {
	border-bottom: 0;
}

@media (max-width: 760px) {
	.arpf-dates {
	margin: 22px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--arpf-line);
	display: grid;
	gap: 12px;
}

.arpf-dates dt {
	font-family: var(--arpf-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--arpf-dim);
	margin-bottom: 3px;
}

.arpf-dates dd {
	margin: 0;
	font-family: var(--arpf-display);
	font-weight: 600;
	font-size: 19px;
	color: var(--arpf-paper);
}

.arpf-c--funder {
	display: flex;
	flex-direction: column;
}

.arpf-funder-logo {
	display: block;
	background: #fff;
	padding: 18px;
	margin-bottom: 18px;
	align-self: flex-start;
	max-width: 260px;
}

.arpf-funder-logo img {
	width: 100%;
	height: auto;
}

.arpf-funder-name {
	font-family: var(--arpf-display);
	font-weight: 600;
	font-size: clamp(24px, 2.6vw, 34px);
	line-height: 1.08;
	color: var(--arpf-paper);
	margin: 0;
}

.arpf-use--rewards {
		grid-template-columns: 1fr;
	}

	.arpf-use--rewards li:nth-last-child(2):nth-child(odd) {
		border-bottom: 1px solid var(--arpf-line);
	}
}

.arpf-caveat {
	font-size: 13px;
	color: var(--arpf-dim);
	max-width: 80ch;
	margin: 24px 0 0;
	line-height: 1.65;
}

/* ------------------------------------------------------------ timeline */

.arpf-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--arpf-line);
}

.arpf-tl-item {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: clamp(16px, 3vw, 40px);
	padding: 26px 0;
	border-bottom: 1px solid var(--arpf-line);
}

.arpf-tl-date {
	font-family: var(--arpf-mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--arpf-accent);
	padding-top: 6px;
}

.arpf-tl-h {
	font-family: var(--arpf-display);
	font-weight: 600;
	font-size: clamp(21px, 2.4vw, 29px);
	line-height: 1.1;
	margin: 0 0 8px;
	color: var(--arpf-paper);
}

.arpf-tl-body p {
	margin: 0;
	color: #b3bac1;
	font-size: 15.5px;
}

/* ----------------------------------------------------------------- cta */

.arpf-cta-band {
	text-align: center;
	padding: clamp(62px, 9vw, 124px) 0;
}

.arpf-cta-kicker {
	font-family: var(--arpf-mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--arpf-accent);
	margin: 0 0 20px;
}

.arpf-cta-h {
	font-family: var(--arpf-display);
	font-weight: 600;
	font-size: clamp(32px, 5.4vw, 68px);
	line-height: 1;
	margin: 0 auto 16px;
	max-width: 22ch;
	color: var(--arpf-paper);
}

.arpf-cta-p {
	color: #aab1b8;
	max-width: 54ch;
	margin: 0 auto 34px;
}

/* ------------------------------------------------------- prev and next */

.arpf-updown {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--arpf-line);
	border-top: 1px solid var(--arpf-line);
	border-bottom: 1px solid var(--arpf-line);
}

.arpf-ud {
	background: var(--arpf-ink);
	padding: 28px 24px;
	transition: background 0.3s ease;
}

.arpf-ud:hover {
	background: var(--arpf-raised);
}

.arpf-ud span {
	display: block;
	font-family: var(--arpf-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--arpf-dim);
	margin-bottom: 8px;
}

.arpf-ud b {
	font-family: var(--arpf-display);
	font-weight: 600;
	font-size: clamp(21px, 2.5vw, 29px);
}

.arpf-ud--next {
	text-align: right;
}

/* -------------------------------------------------------------- footer */

.arpf-foot {
	padding: 40px 0 56px;
	color: var(--arpf-dim);
	font-size: 12.5px;
	line-height: 1.7;
}

.arpf-foot-contacts {
	margin: 0 0 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 26px;
}

.arpf-foot-contacts strong {
	color: var(--arpf-muted);
	font-weight: 500;
}

.arpf-foot-contacts a {
	text-decoration: underline;
}

.arpf-legal {
	margin: 0;
	max-width: 88ch;
}

/* --------------------------------------------------------------- modal */

.arpf-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	background: rgba(16, 19, 22, 0.9);
	padding: 20px;
	overflow-y: auto;
	font-family: var(--arpf-body);
}

.arpf-modal[data-open="true"] {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.arpf-panel {
	background: var(--arpf-raised);
	border: 1px solid var(--arpf-line);
	width: 100%;
	max-width: 640px;
	margin: auto;
	padding: clamp(26px, 4vw, 44px);
	position: relative;
	color: var(--arpf-paper);
}

.arpf-panel-h {
	font-family: var(--arpf-display);
	font-weight: 600;
	font-size: clamp(27px, 3.3vw, 39px);
	line-height: 1.04;
	margin: 0 0 8px;
	color: var(--arpf-paper);
}

.arpf-panel-p {
	color: #a2a9b0;
	font-size: 14.5px;
	margin: 0 0 26px;
}

.arpf-x {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	background: none;
	border: 1px solid var(--arpf-line);
	color: var(--arpf-muted);
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
}

.arpf-x:hover {
	border-color: var(--arpf-accent);
	color: var(--arpf-accent);
}

.arpf-field {
	margin: 0 0 17px;
}

.arpf-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 17px;
}

.arpf-field label {
	display: block;
	font-family: var(--arpf-mono);
	font-size: 10px;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--arpf-dim);
	margin-bottom: 7px;
}

.arpf-field input,
.arpf-field select,
.arpf-field textarea {
	width: 100%;
	background: #1c2024;
	border: 1px solid var(--arpf-line);
	color: var(--arpf-paper);
	font-family: var(--arpf-body);
	font-size: 15px;
	padding: 12px 13px;
	border-radius: 0;
	box-shadow: none;
}

.arpf-field textarea {
	min-height: 92px;
	resize: vertical;
}

.arpf-field input:focus,
.arpf-field select:focus,
.arpf-field textarea:focus {
	border-color: var(--arpf-accent);
	outline: none;
}

.arpf-check {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	margin: 0 0 24px;
	font-size: 13px;
	color: #a2a9b0;
}

.arpf-check input {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	margin-top: 2px;
	accent-color: var(--arpf-accent);
}

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

.arpf-err {
	color: #e08a8a;
	font-family: var(--arpf-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	margin: 0 0 15px;
	display: none;
}

.arpf-err[data-show="true"] {
	display: block;
}

.arpf-done {
	text-align: center;
	padding: 22px 0;
}

.arpf-done-mark {
	width: 54px;
	height: 54px;
	border: 1px solid var(--arpf-accent);
	border-radius: 50%;
	display: grid;
	place-items: center;
	margin: 0 auto 20px;
	color: var(--arpf-accent);
	font-size: 21px;
}

.arpf-busy {
	opacity: 0.55;
	pointer-events: none;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1040px) {
	.arpf-c,
	.arpf-c--third,
	.arpf-c--twothirds,
	.arpf-c--track {
		grid-column: span 3;
	}
}

@media (max-width: 860px) {
	.arpf-cols {
		grid-template-columns: 1fr;
	}

	.arpf-c,
	.arpf-c--third,
	.arpf-c--twothirds,
	.arpf-c--track {
		grid-column: 1 / -1;
	}

	.arpf-deck {
		grid-template-columns: 1fr;
	}

	.arpf-pager-wrap {
		grid-column: 1;
		grid-row: 2;
		height: 46px;
		margin-left: 0;
		margin-top: 12px;
	}

	.arpf-pager {
		flex-direction: row;
	}

	.arpf-pages {
		flex-direction: row;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.arpf-page {
		width: auto;
		min-width: 40px;
		height: 100%;
	}

	.arpf-arrow {
		width: 46px;
		height: 100%;
	}
}

@media (max-width: 800px) {
	.arpf-tracks--2 {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.arpf-updown {
		grid-template-columns: 1fr;
	}

	.arpf-ud--next {
		text-align: left;
	}

	.arpf-tl-item {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

@media (max-width: 560px) {
	.arpf-row {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.arpf *,
	.arpf-modal * {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
}