@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');

/* ============================================================
   PONCA YOUTH PROGRAM / PROGRAM DETAIL — Frame 233
   Class prefix: ponca-yp
   Dynamic, editor-controlled values arrive as CSS custom properties
   on the .ponca-yp wrapper (see render.php). Static layout lives here.
   ============================================================ */

/* ---- Section wrapper ---- */
.ponca-yp {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	background-color: var(--ponca-yp-section-bg, #FFFDF6);
	padding-top: var(--ponca-yp-py, 120px);
	padding-bottom: var(--ponca-yp-py, 120px);
	padding-left: var(--ponca-yp-px, 48px);
	padding-right: var(--ponca-yp-px, 48px);
}
.ponca-yp *, .ponca-yp *::before, .ponca-yp *::after { box-sizing: border-box; }

/* ---- Container ---- */
.ponca-yp__container {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	width: 100%;
	max-width: var(--ponca-yp-container-maxw, 1600px);
	gap: var(--ponca-yp-container-gap, 60px);
}

/* ---- Shared text resets ---- */
.ponca-yp__eyebrow,
.ponca-yp__headline,
.ponca-yp__header-description,
.ponca-yp__body-heading,
.ponca-yp__body-paragraph,
.ponca-yp__bullets-heading,
.ponca-yp__download-title,
.ponca-yp__download-description { margin: 0; width: 100%; }

.ponca-yp__bullets-list { margin: 0; padding: 0; }

/* ---- Header group ---- */
.ponca-yp__header_wrapper {
	display: flex;
	flex-direction: column;
}
.ponca-yp__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: var(--ponca-yp-header-gap, 24px);
}
.ponca-yp__header-main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: var(--ponca-yp-header-gap, 24px);
}
/* Header with a side image (Frame 3015421): text left, image right. */
.ponca-yp__header--has-media {
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
}
.ponca-yp__header--has-media .ponca-yp__header-main {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
}
.ponca-yp__header-media {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
}
.ponca-yp__header-media img {
	display: block;
	width: var(--ponca-yp-header-image-w, 184px);
	max-width: 100%;
	height: auto;
}
.ponca-yp__header-stack {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: var(--ponca-yp-header-stack-gap, 14px);
}

.ponca-yp__eyebrow {
	color: var(--ponca-yp-eyebrow-color, #DEB209);
	font-family: var(--ponca-yp-eyebrow-font-family, 'DM Sans', sans-serif);
	font-size: var(--ponca-yp-eyebrow-font-size, 13px);
	line-height: var(--ponca-yp-eyebrow-line-height, 22px);
	font-weight: var(--ponca-yp-eyebrow-font-weight, 600);
	font-style: var(--ponca-yp-eyebrow-font-style, normal);
	letter-spacing: var(--ponca-yp-eyebrow-letter-spacing, 3px);
	text-transform: var(--ponca-yp-eyebrow-text-transform, uppercase);
}

.ponca-yp__headline {
	color: var(--ponca-yp-headline-color, #0D0F0E);
	font-family: var(--ponca-yp-headline-font-family, 'Cormorant Garamond', serif);
	font-size: var(--ponca-yp-headline-font-size, 56px);
	line-height: var(--ponca-yp-headline-line-height, 62px);
	font-weight: var(--ponca-yp-headline-font-weight, 300);
	font-style: var(--ponca-yp-headline-font-style, normal);
	letter-spacing: var(--ponca-yp-headline-letter-spacing, -0.56px);
	width: 100%;
	max-width: 400px;
}
/* Curly/italic accent — inherits the headline font-family/size/line-height,
   overrides only colour, style and weight. */
.ponca-yp__headline-curly {
	color: var(--ponca-yp-headline-curly-color, #A78607);
	font-style: var(--ponca-yp-headline-curly-style, italic);
	font-weight: var(--ponca-yp-headline-curly-weight, 300);
}

.ponca-yp__header-description {
	color: var(--ponca-yp-hdesc-color, #474747);
	font-family: var(--ponca-yp-hdesc-font-family, 'DM Sans', sans-serif);
	font-size: var(--ponca-yp-hdesc-font-size, 18px);
	line-height: var(--ponca-yp-hdesc-line-height, 30px);
	font-weight: var(--ponca-yp-hdesc-font-weight, 400);
	font-style: var(--ponca-yp-hdesc-font-style, normal);
	letter-spacing: var(--ponca-yp-hdesc-letter-spacing, 0px);
}

/* ---- Header CTA button ---- */
.ponca-yp__header-button {
	box-sizing: border-box;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	text-decoration: none;
	cursor: pointer;
	gap: var(--ponca-yp-hbtn-gap, 12px);
	padding: var(--ponca-yp-hbtn-py, 14.4px) var(--ponca-yp-hbtn-px, 28px);
	background-color: var(--ponca-yp-hbtn-bg, #691103);
	border-radius: var(--ponca-yp-hbtn-radius, 4px);
	color: var(--ponca-yp-hbtn-color, #F0EBE4);
	font-family: var(--ponca-yp-hbtn-font-family, 'DM Sans', sans-serif);
	font-size: var(--ponca-yp-hbtn-font-size, 16px);
	line-height: var(--ponca-yp-hbtn-line-height, 24px);
	font-weight: var(--ponca-yp-hbtn-font-weight, 600);
	letter-spacing: var(--ponca-yp-hbtn-letter-spacing, 0px);
	text-transform: var(--ponca-yp-hbtn-text-transform, capitalize);
	transition: background-color 200ms ease, color 200ms ease;
}
.ponca-yp__header-button:hover,
.ponca-yp__header-button:focus-visible {
	background-color: var(--ponca-yp-hbtn-hover-bg, #4A0B02) !important;
	color: var(--ponca-yp-hbtn-hover-color, #FFFFFF) !important;
	outline: none;
}
.ponca-yp__header-button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
}
.ponca-yp__header-button-icon svg { display: block; }

/* ---- Body group ---- */
.ponca-yp__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: var(--ponca-yp-body-gap, 24px);
}
.ponca-yp__body-heading {
	color: var(--ponca-yp-body-heading-color, #0D0F0E);
	font-family: var(--ponca-yp-body-heading-font-family, 'Cormorant Garamond', serif);
	font-size: var(--ponca-yp-body-heading-font-size, 30px);
	line-height: var(--ponca-yp-body-heading-line-height, 36px);
	font-weight: var(--ponca-yp-body-heading-font-weight, 600);
	font-style: var(--ponca-yp-body-heading-font-style, normal);
	letter-spacing: var(--ponca-yp-body-heading-letter-spacing, 0px);
	text-transform: var(--ponca-yp-body-heading-text-transform, none);
}
.ponca-yp__body-paragraph {
	color: var(--ponca-yp-body-para-color, #474747);
	font-family: var(--ponca-yp-body-para-font-family, 'DM Sans', sans-serif);
	font-size: var(--ponca-yp-body-para-font-size, 18px);
	line-height: var(--ponca-yp-body-para-line-height, 30px);
	font-weight: var(--ponca-yp-body-para-font-weight, 400);
	font-style: var(--ponca-yp-body-para-font-style, normal);
	letter-spacing: var(--ponca-yp-body-para-letter-spacing, 0px);
}

/* ---- Body paragraph inline links ---- */
.ponca-yp__body-paragraph a {
	color: var(--ponca-yp-body-link, #B28E07);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.ponca-yp__body-paragraph strong { font-weight: 600; }
.ponca-yp__body-paragraph em { font-style: italic; }

/* ---- Collage ---- */
.ponca-yp__collage {
	display: grid;
	width: 100%;
	box-sizing: border-box;
	grid-template-columns: 42% 28% 1fr;
	grid-template-rows: 1fr 1fr;
	grid-template-areas: "img1 img2 img3" "img1 img2 img4";
	gap: var(--ponca-yp-collage-gap, 15px);
	height: var(--ponca-yp-collage-h, 557px);
}
.ponca-yp__collage-cell {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: var(--ponca-yp-collage-radius, 20px);
	background-color: var(--ponca-yp-collage-bg, #F5F5F5);
}
.ponca-yp__collage-cell--1 { grid-area: img1; }
.ponca-yp__collage-cell--2 { grid-area: img2; }
.ponca-yp__collage-cell--3 { grid-area: img3; }
.ponca-yp__collage-cell--4 { grid-area: img4; }
/* The image is taken out of flow and pinned to its cell, so the cell's own
   size (not the photo's natural shape) decides the layout in every browser,
   and object-fit: cover always fills it. */
.ponca-yp__collage-cell img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ponca-yp__collage-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #A7A7A7;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	background: #F5F5F5;
}

/* ---- Bullets ---- */
.ponca-yp__bullets-section {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}
.ponca-yp__bullets-section--1 { gap: var(--ponca-yp-bullets1-outer-gap, 30px); }
.ponca-yp__bullets-section--2 { gap: var(--ponca-yp-bullets2-outer-gap, 30px); }

.ponca-yp__bullets-heading {
	color: var(--ponca-yp-bullets-heading-color, #0D0F0E);
	font-family: var(--ponca-yp-bullets-heading-font-family, 'Cormorant Garamond', serif);
	font-size: var(--ponca-yp-bullets-heading-font-size, 30px);
	line-height: var(--ponca-yp-bullets-heading-line-height, 36px);
	font-weight: var(--ponca-yp-bullets-heading-font-weight, 600);
	font-style: var(--ponca-yp-bullets-heading-font-style, normal);
	letter-spacing: var(--ponca-yp-bullets-heading-letter-spacing, 0px);
}

.ponca-yp__bullets-list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	list-style: none;
}
.ponca-yp__bullets-section--1 .ponca-yp__bullets-list { gap: var(--ponca-yp-bullets1-list-gap, 14px); }
.ponca-yp__bullets-section--2 .ponca-yp__bullets-list { gap: var(--ponca-yp-bullets2-list-gap, 14px); }

.ponca-yp__bullet {
	display: flex;
	flex-direction: row;
	/* align-items: center; */
	width: 100%;
	padding: 0;
	gap: var(--ponca-yp-bullet-gap, 10px);
}
.ponca-yp__bullet-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--ponca-yp-bullet-icon-size, 24px);
	height: var(--ponca-yp-bullet-icon-size, 24px);
}
.ponca-yp__bullet-icon svg { display: block; margin-top:4px}
.ponca-yp__bullet-text {
	margin: 0;
	color: var(--ponca-yp-bullet-text-color, #0D0F0E);
	font-family: var(--ponca-yp-bullet-text-font-family, 'DM Sans', sans-serif);
	font-size: var(--ponca-yp-bullet-text-font-size, 18px);
	line-height: var(--ponca-yp-bullet-text-line-height, 30px);
	font-weight: var(--ponca-yp-bullet-text-font-weight, 400);
	font-style: var(--ponca-yp-bullet-text-font-style, normal);
	letter-spacing: var(--ponca-yp-bullet-text-letter-spacing, 0px);
}

/* ---- Download group ---- */
.ponca-yp__download {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: var(--ponca-yp-download-outer-gap, 30px);
}
.ponca-yp__download-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: var(--ponca-yp-download-inner-gap, 20px);
}
.ponca-yp__download-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: var(--ponca-yp-download-header-gap, 14px);
}
.ponca-yp__download-title {
	color: var(--ponca-yp-dl-title-color, #0D0F0E);
	font-family: var(--ponca-yp-dl-title-font-family, 'DM Sans', sans-serif);
	font-size: var(--ponca-yp-dl-title-font-size, 20px);
	line-height: var(--ponca-yp-dl-title-line-height, 26px);
	font-weight: var(--ponca-yp-dl-title-font-weight, 600);
	font-style: var(--ponca-yp-dl-title-font-style, normal);
	letter-spacing: var(--ponca-yp-dl-title-letter-spacing, 0px);
}
.ponca-yp__download-description {
	color: var(--ponca-yp-dl-desc-color, #474747);
	font-family: var(--ponca-yp-dl-desc-font-family, 'DM Sans', sans-serif);
	font-size: var(--ponca-yp-dl-desc-font-size, 18px);
	line-height: var(--ponca-yp-dl-desc-line-height, 30px);
	font-weight: var(--ponca-yp-dl-desc-font-weight, 400);
	font-style: var(--ponca-yp-dl-desc-font-style, normal);
	letter-spacing: var(--ponca-yp-dl-desc-letter-spacing, 0px);
}
.ponca-yp__download-items {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 8px;
}

/* ---- PDF row ---- */
.ponca-yp__pdf-row {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	background-color: var(--ponca-yp-pdf-row-bg, #FFFFFF);
	border: var(--ponca-yp-pdf-row-border-width, 1px) solid var(--ponca-yp-pdf-row-border-color, #F3F3F3);
	border-radius: var(--ponca-yp-pdf-row-radius, 6px);
	gap: var(--ponca-yp-pdf-row-gap, 24px);
	min-height: var(--ponca-yp-pdf-row-min-h, 98px);
	padding: var(--ponca-yp-pdf-row-py, 24px) var(--ponca-yp-pdf-row-px, 24px);
}
.ponca-yp__pdf-left {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
	min-width: 0;
}
.ponca-yp__pdf-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background-color: var(--ponca-yp-pdf-icon-bg, rgba(222, 178, 9, 0.1));
	width: var(--ponca-yp-pdf-icon-size, 50px);
	height: var(--ponca-yp-pdf-icon-size, 50px);
	border-radius: var(--ponca-yp-pdf-icon-radius, 100px);
}
.ponca-yp__pdf-icon-wrap svg { display: block; }
.ponca-yp__pdf-icon-wrap--locked {
	background-color: var(--ponca-yp-pdf-icon-bg-locked, #F4F4F4);
}
.ponca-yp__pdf-icon-img {
	display: block;
	width: var(--ponca-yp-pdf-icon-inner, 24px);
	height: var(--ponca-yp-pdf-icon-inner, 24px);
	object-fit: contain;
}
.ponca-yp__pdf-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
}
.ponca-yp__pdf-title {
	margin: 0;
	color: var(--ponca-yp-pdf-title-color, #0D0F0E);
	font-family: var(--ponca-yp-pdf-title-font-family, 'DM Sans', sans-serif);
	font-size: var(--ponca-yp-pdf-title-font-size, 18px);
	line-height: var(--ponca-yp-pdf-title-line-height, 23px);
	font-weight: var(--ponca-yp-pdf-title-font-weight, 500);
}
.ponca-yp__pdf-subtitle {
	margin: 0;
	color: var(--ponca-yp-pdf-subtitle-color, #848484);
	font-family: var(--ponca-yp-pdf-subtitle-font-family, 'DM Sans', sans-serif);
	font-size: var(--ponca-yp-pdf-subtitle-font-size, 14px);
	line-height: var(--ponca-yp-pdf-subtitle-line-height, 18px);
	font-weight: var(--ponca-yp-pdf-subtitle-font-weight, 400);
}
/* "Sign in to view documents" prompt — the locked subtitle becomes a link. */
a.ponca-yp__pdf-subtitle--signin {
	color: var(--ponca-yp-pdf-subtitle-color-locked, #B28E07);
	text-decoration: underline;
	cursor: pointer;
	transition: opacity .18s ease;
}
a.ponca-yp__pdf-subtitle--signin:hover,
a.ponca-yp__pdf-subtitle--signin:focus-visible { opacity: .8; }

/* ---- VIEW DOCUMENT button ---- */
.ponca-yp__pdf-button {
	box-sizing: border-box;
	display: inline-flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
	cursor: pointer;
	gap: var(--ponca-yp-pdf-btn-gap, 10px);
	padding: var(--ponca-yp-pdf-btn-py, 6px) var(--ponca-yp-pdf-btn-px, 16px);
	background-color: var(--ponca-yp-pdf-btn-bg, transparent);
	border: var(--ponca-yp-pdf-btn-border-width, 1px) solid var(--ponca-yp-pdf-btn-border-color, #B28E07);
	border-radius: var(--ponca-yp-pdf-btn-radius, 100px);
	color: var(--ponca-yp-pdf-btn-color, #B28E07);
	font-family: var(--ponca-yp-pdf-btn-font-family, 'DM Sans', sans-serif);
	font-size: var(--ponca-yp-pdf-btn-font-size, 12px);
	line-height: var(--ponca-yp-pdf-btn-line-height, 16px);
	font-weight: var(--ponca-yp-pdf-btn-font-weight, 400);
	letter-spacing: var(--ponca-yp-pdf-btn-letter-spacing, 1px);
	text-transform: var(--ponca-yp-pdf-btn-text-transform, uppercase);
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.ponca-yp__pdf-button:hover:not(.ponca-yp__pdf-button--locked),
.ponca-yp__pdf-button:focus-visible:not(.ponca-yp__pdf-button--locked) {
	background-color: var(--ponca-yp-pdf-btn-hover-bg, #FBF6E5) !important;
	color: var(--ponca-yp-pdf-btn-hover-color, #8A6F05) !important;
	outline: none;
}
.ponca-yp__pdf-button:hover:not(.ponca-yp__pdf-button--locked) .ponca-yp__pdf-button-arrow svg path,
.ponca-yp__pdf-button:focus-visible:not(.ponca-yp__pdf-button--locked) .ponca-yp__pdf-button-arrow svg path {
	stroke: var(--ponca-yp-pdf-btn-hover-color, #8A6F05) !important;
}
/* Member-only button: a muted, static badge (not a link — the sign-in link is
   the subtitle, and no file URL is emitted on a locked row). */
.ponca-yp__pdf-button--locked {
	color: var(--ponca-yp-pdf-btn-locked-color, #848484);
	border-color: var(--ponca-yp-pdf-btn-locked-border, #848484);
	background-color: transparent;
	cursor: default;
}
.ponca-yp__pdf-button-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--ponca-yp-pdf-btn-arrow-size, 20px);
	height: var(--ponca-yp-pdf-btn-arrow-size, 20px);
}
.ponca-yp__pdf-button-arrow svg { display: block; transition: transform 200ms ease, stroke 200ms ease; }
.ponca-yp__pdf-button:hover .ponca-yp__pdf-button-arrow svg { transform: translate(2px, -2px); }

/* ---- Footer ornament ---- */
.ponca-yp__footer-pattern {
	display: block;
	pointer-events: none;
	user-select: none;
	box-sizing: border-box;
	width: 100%;
	height: var(--ponca-yp-foot-h, 82px);
	margin-top: var(--ponca-yp-foot-mt, 0px);
	opacity: var(--ponca-yp-foot-opacity, 1);
	background-color: var(--ponca-yp-foot-bg, transparent);
	background-repeat: var(--ponca-yp-foot-repeat, repeat-x);
	background-position: var(--ponca-yp-foot-position, center bottom);
	background-size: var(--ponca-yp-foot-size, auto 100%);
}
.ponca-yp__footer-pattern--full {
	position: absolute;
	width: 100vw;
	max-width: 100vw;
	bottom: 0;
	left: 0;
	right: auto;
}


/* ---- Alignment ---- */
.ponca-yp.alignwide .ponca-yp__container,
.ponca-yp.alignfull .ponca-yp__container { max-width: 1600px; }

/* ---- Responsive ---- */
@media (max-width: 1280px) {
	.ponca-yp__headline { font-size: clamp(36px, 4.2vw, 56px) !important; line-height: 1.15 !important; }
}

@media (max-width: 1024px) {
	.ponca-yp__collage {
		grid-template-columns: 1fr 1fr !important;
		grid-template-rows: auto auto auto !important;
		grid-template-areas: "img1 img1" "img2 img3" "img2 img4" !important;
		height: auto !important;
		aspect-ratio: 4 / 3;
	}
	/* Size the cells explicitly instead of from the images. Chrome let the
	   in-flow images grow the rows past the 4:3 aspect-ratio above (so the
	   layout followed each photo's shape), while Safari/iPad honoured 4:3 and
	   squeezed the photos into narrow strips. Fixed cell shapes give both
	   browsers the same layout: img1 and img3/img4 at 3:2, img2 stretched
	   over the two rows it spans. */
	.ponca-yp__collage { aspect-ratio: auto; }
	.ponca-yp__collage-cell { height: auto; }
	.ponca-yp__collage-cell--1,
	.ponca-yp__collage-cell--3,
	.ponca-yp__collage-cell--4 { aspect-ratio: 3 / 2; }
	.ponca-yp__pdf-row { gap: 16px !important; padding: 20px !important; }
}

@media (max-width: 768px) {
	.ponca-yp__headline { font-size: 32px !important; line-height: 38px !important; }
	.ponca-yp__body-heading,
	.ponca-yp__bullets-heading { font-size: 24px !important; line-height: 30px !important; }
	.ponca-yp__download-title { font-size: 18px !important; line-height: 24px !important; }
	.ponca-yp__body-paragraph,
	.ponca-yp__bullet-text,
	.ponca-yp__download-description { font-size: 16px !important; line-height: 26px !important; }
	.ponca-yp__collage {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto !important;
		grid-template-areas: "img1" "img2" "img3" "img4" !important;
		aspect-ratio: auto !important;
		height: auto !important;
	}
	.ponca-yp__collage-cell { aspect-ratio: 16 / 10; }
	.ponca-yp__pdf-row { flex-direction: column !important; align-items: flex-start !important; min-height: 0 !important; }
	.ponca-yp__header-button { width: 100%; justify-content: center; }
	.ponca-yp__header--has-media { flex-direction: column !important; gap: var(--ponca-yp-header-gap, 24px) !important; }
	.ponca-yp__header--has-media .ponca-yp__header-main { width: 100% !important; }
	.ponca-yp__header-media { width: 100%; justify-content: flex-start; margin-bottom: 14px; }
}

@media (max-width: 420px) {
	.ponca-yp__headline { font-size: 28px !important; line-height: 34px !important; }
	.ponca-yp__body-heading,
	.ponca-yp__bullets-heading { font-size: 22px !important; line-height: 28px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.ponca-yp__pdf-button,
	.ponca-yp__pdf-button-arrow svg,
	.ponca-yp__header-button { transition: none !important; transform: none !important; }
}

/* ============================================================
   VARIABLE CONSUMPTION
   Custom properties that render.php writes onto the .ponca-yp
   wrapper but that were not yet read by a CSS rule. Appended here
   so the editor-controlled values actually take effect, without
   disturbing the static / hover / responsive rules above.
   ============================================================ */

/* --ponca-yp-collage-h-mobile (attr collageHeightMobile, default 400px):
   the mobile collage height. The existing <=1024px / <=768px rules force
   height:auto for the stacked grid; this lets the editor pin a fixed
   mobile height instead. Uses !important to match the responsive layer. */
@media (max-width: 768px) {
	/*.ponca-yp__collage { height: var(--ponca-yp-collage-h-mobile, 400px) !important; }*/
}

/* ===== Collage lightbox (click to expand) ===== */
.ponca-yp__collage-img--zoomable {
	cursor: zoom-in;
}

body.ppg-lightbox-open {
	overflow: hidden;
}

.ppg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
}
.ppg-lightbox.is-open {
	display: flex;
}
.ppg-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(13, 15, 14, 0.9);
	cursor: zoom-out;
}
.ppg-lightbox__dialog {
	position: relative;
	z-index: 1;
	max-width: 92vw;
	max-height: 92vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ppg-lightbox__figure {
	margin: 0;
	max-width: 92vw;
	max-height: 92vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.ppg-lightbox__img {
	width: clamp(280px, 80vw, 900px);
	height: clamp(220px, 70vh, 620px);
	max-width: 92vw;
	max-height: 84vh;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	background: #000;
}
.ppg-lightbox__caption {
	margin-top: 14px;
	color: #fff;
	font-family: 'DM Sans', 'Helvetica Neue', sans-serif;
	font-size: 15px;
	line-height: 1.4;
	text-align: center;
	max-width: 80ch;
}
.ppg-lightbox__btn {
	position: absolute;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.18s ease;
	line-height: 1;
}
.ppg-lightbox__btn:hover,
.ppg-lightbox__btn:focus-visible {
	background: rgba(255, 255, 255, 0.28);
	outline: none;
}
.ppg-lightbox__close {
	top: -8px;
	right: -8px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 28px;
}
.ppg-lightbox__prev,
.ppg-lightbox__next {
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	font-size: 30px;
}
.ppg-lightbox__prev { left: -64px; }
.ppg-lightbox__next { right: -64px; }

/* Tablet */
@media (max-width: 900px) {
	.ppg-lightbox__img {
		width: clamp(260px, 88vw, 720px);
		height: clamp(200px, 64vh, 520px);
	}
	.ppg-lightbox__prev { left: 8px; }
	.ppg-lightbox__next { right: 8px; }
}

/* Phone */
@media (max-width: 768px) {
	.ppg-lightbox__dialog { max-width: 96vw; max-height: 96vh; }
	.ppg-lightbox__figure { max-width: 96vw; }
	.ppg-lightbox__img {
		width: 92vw;
		height: clamp(180px, 60vh, 460px);
		max-height: 74vh;
	}
	.ppg-lightbox__prev { left: 6px; }
	.ppg-lightbox__next { right: 6px; }
	.ppg-lightbox__close { top: 4px; right: 4px; width: 40px; height: 40px; font-size: 24px; }
	.ppg-lightbox__prev,
	.ppg-lightbox__next { width: 40px; height: 40px; font-size: 26px; }
	.ppg-lightbox__caption { font-size: 14px; }
}

/* Small phone */
@media (max-width: 420px) {
	.ppg-lightbox__img {
		width: 94vw;
		height: clamp(160px, 54vh, 380px);
	}
}