@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&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 HERD INTRO — Frontend Styles
   Class prefix: ponca-hi
   Look-and-feel attributes are exposed by render.php as CSS custom
   properties (--ponca-hi-*) set on the relevant element. This sheet
   consumes them via var() with the previous inline defaults as
   fallbacks, plus structural defaults and responsive overrides.
   ============================================================ */

.ponca-hi {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	background: var(--ponca-hi-section-bg, #FFFFFF);
}
.ponca-hi *,
.ponca-hi *::before,
.ponca-hi *::after { box-sizing: border-box; }

.ponca-hi__container {
	width: 100%;
	max-width: var(--ponca-hi-container-max-width, 1600px);
	margin: 0 auto;
	box-sizing: border-box;
}

.ponca-hi__content {
	display: flex;
	flex-direction: var(--ponca-hi-content-direction, row);
	align-items: var(--ponca-hi-content-align-items, flex-start);
	gap: var(--ponca-hi-content-gap, 60px);
	width: 100%;
}

.ponca-hi__left {
	min-width: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: var(--ponca-hi-left-flex, 791) 1 0;
	gap: var(--ponca-hi-left-gap, 30px);
}

.ponca-hi__right {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	flex: var(--ponca-hi-right-flex, 655) 1 0;
	padding-top: var(--ponca-hi-right-pad-top, 80px);
}

.ponca-hi__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: var(--ponca-hi-header-gap, 14px);
}

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

.ponca-hi__heading {
	margin: 0;
	width: 100%;
	color: var(--ponca-hi-heading-color, #0D0F0E);
	font-family: var(--ponca-hi-heading-font-family, 'Cormorant Garamond', serif);
	font-size: var(--ponca-hi-heading-font-size, 56px);
	line-height: var(--ponca-hi-heading-line-height, 62px);
	font-weight: var(--ponca-hi-heading-font-weight, 300);
	letter-spacing: var(--ponca-hi-heading-letter-spacing, -0.56px);
}

.ponca-hi__heading-prefix,
.ponca-hi__heading-accent,
.ponca-hi__heading-suffix { display: inline; }

.ponca-hi__heading-prefix {
	color: var(--ponca-hi-heading-prefix-color, #0D0F0E);
	font-style: var(--ponca-hi-heading-prefix-font-style, normal);
}

.ponca-hi__heading-accent {
	color: var(--ponca-hi-heading-accent-color, #B28E07);
	font-style: var(--ponca-hi-heading-accent-font-style, italic);
}

.ponca-hi__heading-suffix {
	color: var(--ponca-hi-heading-suffix-color, #0D0F0E);
	font-style: var(--ponca-hi-heading-suffix-font-style, normal);
}

.ponca-hi__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	gap: var(--ponca-hi-body-gap, 24px);
}

.ponca-hi__paragraph {
	margin: 0;
	width: 100%;
	color: var(--ponca-hi-body-color, #474747);
	font-family: var(--ponca-hi-body-font-family, 'DM Sans', sans-serif);
	font-size: var(--ponca-hi-body-font-size, 18px);
	line-height: var(--ponca-hi-body-line-height, 30px);
	font-weight: var(--ponca-hi-body-font-weight, 400);
	font-style: var(--ponca-hi-body-font-style, normal);
}

.ponca-hi__image-figure {
	display: block;
	position: relative;
	width: 100%;
	overflow: hidden;
	margin: 0;
	box-sizing: border-box;
	height: var(--ponca-hi-figure-height, 507px);
	background: var(--ponca-hi-figure-bg, #3a3a30);
		border-radius: var(--ponca-hi-figure-border-radius, 0px) var(--ponca-hi-figure-border-radius, 0px) 0px var(--ponca-hi-figure-border-radius, 0px);
}

.ponca-hi__image {
	display: block;
	position: absolute;
	background-color: #FFFFFF !important;
    color-scheme: only light;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: var(--ponca-hi-image-object-fit, cover);
	object-position: var(--ponca-hi-image-object-position, center center);
}

.ponca-hi__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.65);
	font-family: monospace;
	font-size: 12px;
	text-align: center;
	padding: 12px;
}

.ponca-hi__image-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--ponca-hi-overlay-bg, linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.88) 100%));
	mix-blend-mode: var(--ponca-hi-overlay-blend-mode, darken);
}

.ponca-hi__caption-wrap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	box-sizing: border-box;
	gap: 5px;
	padding: var(--ponca-hi-caption-pad-y, 34px) var(--ponca-hi-caption-pad-x, 34px);
}

/* When a logo badge shares a bottom corner with the caption, reserve room on
   that side so the caption text keeps to the opposite side (matches the
   design, where the caption sits at the left and the badge at the right). */
.ponca-hi__caption-wrap--reserve-right {
	padding-right: var(--ponca-hi-caption-reserve, 190px);
}
.ponca-hi__caption-wrap--reserve-left {
	padding-left: var(--ponca-hi-caption-reserve, 190px);
	align-items: flex-start;
}

.ponca-hi__caption-date {
	margin: 0 0 var(--ponca-hi-caption-date-margin-bottom, 5px);
	color: var(--ponca-hi-caption-date-color, #DEB209);
	font-family: var(--ponca-hi-caption-date-font-family, 'Cormorant Garamond', serif);
	font-size: var(--ponca-hi-caption-date-font-size, 16px);
	line-height: var(--ponca-hi-caption-date-line-height, 130%);
	font-weight: var(--ponca-hi-caption-date-font-weight, 400);
	font-style: var(--ponca-hi-caption-date-font-style, normal);
}

.ponca-hi__caption {
	margin: 0;
	max-width: var(--ponca-hi-caption-max-width, 546px);
	color: var(--ponca-hi-caption-color, #E2D7CA);
	font-family: var(--ponca-hi-caption-font-family, 'Cormorant Garamond', serif);
	font-size: var(--ponca-hi-caption-font-size, 20px);
	line-height: var(--ponca-hi-caption-line-height, 130%);
	font-weight: var(--ponca-hi-caption-font-weight, 400);
	font-style: var(--ponca-hi-caption-font-style, normal);
}

/* ============================================================
   IMAGE LOGO BADGE — notched (concave) corner
   ------------------------------------------------------------
   A solid badge sits flush in a corner of the image. Two "notch"
   elements sit just outside the badge's two inner edges and use a
   radial-gradient to carve a smooth concave (inverted) curve, so the
   badge appears cut into the photo. Colours/sizes come from the
   --ponca-hi-logo-* custom properties set by render.php.
   The default variant is bottom-right (matches the design).
   ============================================================ */
.ponca-hi__logo-badge {
	position: absolute;
	z-index: 4;
	width: var(--ponca-hi-logo-badge-w, 168px);
	height: var(--ponca-hi-logo-badge-h, 96px);
	background: var(--ponca-hi-logo-badge-bg, #FFFFFF);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: var(--ponca-hi-logo-badge-pad-y, 20px) var(--ponca-hi-logo-badge-pad-x, 22px);
	pointer-events: none;
}

.ponca-hi__logo-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.ponca-hi__logo-img {
	display: block;
	width: var(--ponca-hi-logo-w, 124px);
	height: var(--ponca-hi-logo-h, auto);
	max-width: 100%;
	max-height: 100%;
	object-fit: var(--ponca-hi-logo-object-fit, contain);
}

/* The concave "notch" squares. Each is a small box the size of the notch
   radius, filled with the badge colour, with one rounded corner masked out
   via a radial-gradient so it reads as an inverted curve. */
.ponca-hi__logo-notch {
	position: absolute;
	width: var(--ponca-hi-logo-notch-radius, 26px);
	height: var(--ponca-hi-logo-notch-radius, 26px);
	background: var(--ponca-hi-logo-badge-bg, #FFFFFF);
	pointer-events: none;
}

/* ---- Bottom-right (default) ---- */
.ponca-hi__logo-badge--bottom-right {
	right: var(--ponca-hi-logo-offset-x, 0px);
	bottom: var(--ponca-hi-logo-offset-y, 0px);
	border-top-left-radius: var(--ponca-hi-logo-badge-inner-radius, 20px);
}
.ponca-hi__logo-badge--bottom-right .ponca-hi__logo-notch--h {
	/* sits to the LEFT of the badge, along its bottom edge; carve toward badge */
	bottom: 0;
	right: 100%;
	rotate: -90deg;
	-webkit-mask: radial-gradient(var(--ponca-hi-logo-notch-radius, 26px) at top right, transparent 99.4%, #000 100%);
	        mask: radial-gradient(var(--ponca-hi-logo-notch-radius, 26px) at top right, transparent 99.4%, #000 100%);
}
.ponca-hi__logo-badge--bottom-right .ponca-hi__logo-notch--v {
	/* sits ABOVE the badge, along its right edge; carve toward badge */
	right: 0;
	bottom: 100%;
	rotate: 180deg;
	-webkit-mask: radial-gradient(var(--ponca-hi-logo-notch-radius, 26px) at bottom right, transparent 99.4%, #000 100%);
	        mask: radial-gradient(var(--ponca-hi-logo-notch-radius, 26px) at bottom right, transparent 99.4%, #000 100%);
}

/* ---- Bottom-left ---- */
.ponca-hi__logo-badge--bottom-left {
	left: var(--ponca-hi-logo-offset-x, 0px);
	bottom: var(--ponca-hi-logo-offset-y, 0px);
	border-top-right-radius: var(--ponca-hi-logo-badge-inner-radius, 20px);
}
.ponca-hi__logo-badge--bottom-left .ponca-hi__logo-notch--h {
	bottom: 0;
	left: 100%;
	-webkit-mask: radial-gradient(var(--ponca-hi-logo-notch-radius, 26px) at top left, transparent 99.4%, #000 100%);
	        mask: radial-gradient(var(--ponca-hi-logo-notch-radius, 26px) at top left, transparent 99.4%, #000 100%);
}
.ponca-hi__logo-badge--bottom-left .ponca-hi__logo-notch--v {
	left: 0;
	bottom: 100%;
	-webkit-mask: radial-gradient(var(--ponca-hi-logo-notch-radius, 26px) at bottom left, transparent 99.4%, #000 100%);
	        mask: radial-gradient(var(--ponca-hi-logo-notch-radius, 26px) at bottom left, transparent 99.4%, #000 100%);
}

/* ---- Top-right ---- */
.ponca-hi__logo-badge--top-right {
	right: var(--ponca-hi-logo-offset-x, 0px);
	top: var(--ponca-hi-logo-offset-y, 0px);
	border-bottom-left-radius: var(--ponca-hi-logo-badge-inner-radius, 20px);
}
.ponca-hi__logo-badge--top-right .ponca-hi__logo-notch--h {
	top: 0;
	right: 100%;
	-webkit-mask: radial-gradient(var(--ponca-hi-logo-notch-radius, 26px) at bottom right, transparent 99.4%, #000 100%);
	        mask: radial-gradient(var(--ponca-hi-logo-notch-radius, 26px) at bottom right, transparent 99.4%, #000 100%);
}
.ponca-hi__logo-badge--top-right .ponca-hi__logo-notch--v {
	right: 0;
	top: 100%;
	-webkit-mask: radial-gradient(var(--ponca-hi-logo-notch-radius, 26px) at top right, transparent 99.4%, #000 100%);
	        mask: radial-gradient(var(--ponca-hi-logo-notch-radius, 26px) at top right, transparent 99.4%, #000 100%);
}

/* ---- Top-left ---- */
.ponca-hi__logo-badge--top-left {
	left: var(--ponca-hi-logo-offset-x, 0px);
	top: var(--ponca-hi-logo-offset-y, 0px);
	border-bottom-right-radius: var(--ponca-hi-logo-badge-inner-radius, 20px);
}
.ponca-hi__logo-badge--top-left .ponca-hi__logo-notch--h {
	top: 0;
	left: 100%;
	-webkit-mask: radial-gradient(var(--ponca-hi-logo-notch-radius, 26px) at bottom left, transparent 99.4%, #000 100%);
	        mask: radial-gradient(var(--ponca-hi-logo-notch-radius, 26px) at bottom left, transparent 99.4%, #000 100%);
}
.ponca-hi__logo-badge--top-left .ponca-hi__logo-notch--v {
	left: 0;
	top: 100%;
	-webkit-mask: radial-gradient(var(--ponca-hi-logo-notch-radius, 26px) at top left, transparent 99.4%, #000 100%);
	        mask: radial-gradient(var(--ponca-hi-logo-notch-radius, 26px) at top left, transparent 99.4%, #000 100%);
}

/* ---- Top back link ---- */
.ponca-hi__back-link {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 180ms ease;
	gap: var(--ponca-hi-back-link-gap, 10px);
	margin-bottom: var(--ponca-hi-back-link-margin-bottom, 60px);
}
.ponca-hi__back-link:hover { opacity: 0.78; }

.ponca-hi__back-link-arrow {
	color: var(--ponca-hi-back-link-arrow-color, #6E6B6D);
	font-family: var(--ponca-hi-back-link-arrow-font-family, 'Arial', sans-serif);
	font-size: var(--ponca-hi-back-link-arrow-font-size, 12.8px);
	line-height: var(--ponca-hi-back-link-arrow-line-height, 22px);
	font-weight: var(--ponca-hi-back-link-arrow-font-weight, 700);
	letter-spacing: var(--ponca-hi-back-link-arrow-letter-spacing, 1.92px);
}

.ponca-hi__back-link-text {
	color: var(--ponca-hi-back-link-text-color, #6E6B6D);
	font-family: var(--ponca-hi-back-link-text-font-family, 'DM Sans', sans-serif);
	font-size: var(--ponca-hi-back-link-text-font-size, 13px);
	line-height: var(--ponca-hi-back-link-text-line-height, 22px);
	font-weight: var(--ponca-hi-back-link-text-font-weight, 600);
	font-style: var(--ponca-hi-back-link-text-font-style, normal);
	letter-spacing: var(--ponca-hi-back-link-text-letter-spacing, 1.92px);
	text-transform: var(--ponca-hi-back-link-text-text-transform, uppercase);
}

/* ---- Location / address row ---- */
.ponca-hi__location {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	text-decoration: none;
	transition: color 200ms ease;
	gap: var(--ponca-hi-location-gap, 10px);
	margin-top: var(--ponca-hi-location-margin-top, 10px);
}
.ponca-hi__location-icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	line-height: 0;
	width: var(--ponca-hi-location-icon-size, 20px);
	height: var(--ponca-hi-location-icon-size, 20px);
	color: var(--ponca-hi-location-icon-color, #A78607);
}
.ponca-hi__location-icon svg { display: block; width: 100%; height: 100%; }
.ponca-hi__location-text {
	margin: 0;
	transition: color 200ms ease;
	color: var(--ponca-hi-location-text-color, #A78607);
	font-family: var(--ponca-hi-location-text-font-family, 'DM Sans', sans-serif);
	font-size: var(--ponca-hi-location-text-font-size, 16px);
	line-height: var(--ponca-hi-location-text-line-height, 25px);
	font-weight: var(--ponca-hi-location-text-font-weight, 400);
	font-style: var(--ponca-hi-location-text-font-style, normal);
	letter-spacing: var(--ponca-hi-location-text-letter-spacing, 0px);
}
a.ponca-hi__location:hover .ponca-hi__location-text,
a.ponca-hi__location:focus-visible .ponca-hi__location-text {
	color: var(--ponca-hi-location-color-hover, #0D0F0E);
}

/* ---- Ornament ---- */
.ponca-hi__ornament {
	pointer-events: none;
	user-select: none;
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: var(--ponca-hi-ornament-h, 82px);
	margin-top: var(--ponca-hi-ornament-margin-top, 0px);
	margin-bottom: var(--ponca-hi-ornament-margin-bottom, 0);
	background-color: var(--ponca-hi-ornament-bg, transparent);
	background-image: var(--ponca-hi-ornament-image, none);
	background-repeat: var(--ponca-hi-ornament-repeat, repeat-x);
	background-position: var(--ponca-hi-ornament-position, center bottom);
	background-size: var(--ponca-hi-ornament-size, auto 100%);
	opacity: var(--ponca-hi-ornament-opacity, 1);
}

.ponca-hi__ornament--full {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100vw;
	max-width: 100vw;
}
.ponca-hi.alignwide,
.ponca-hi.alignfull { max-width: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */


@media (max-width: 768px) {
	.ponca-hi__content {
		flex-direction: column !important;
	}
	.ponca-hi__image {
		object-position: center center;
	}	
}

@media (max-width: 640px) {
	.ponca-hi__paragraph {
		font-size: 16px !important;
		line-height: 28px !important;
	}
	.ponca-hi__caption {
		font-size: 18px !important;
	}
	.ponca-hi__caption-wrap {
		padding: 20px !important;
	}

}

@media (max-width: 420px) {
	.ponca-hi__heading br{
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ponca-hi * {
		transition: none !important;
		animation: none !important;
	}
}