.promin-hero {
	--promin-forest: #12332e;
	--promin-paper: #fdfaf0;
	--promin-amber: #f5bf52;
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: clamp(1.5rem, 4vw, 4rem);
	min-height: 32rem;
	padding: clamp(1.5rem, 5vw, 4.75rem);
	background: var(--promin-forest);
	color: var(--promin-paper);
}
.promin-hero__story { max-width: 48rem; }
.promin-hero .promin-hero__photo,
.promin-hero::before {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.promin-hero__photo {
	z-index: -2;
	object-fit: cover;
	object-position: center;
}
.promin-hero::before {
	content: "";
	z-index: -1;
	background: linear-gradient(80deg, rgba(12, 38, 33, .94), rgba(12, 38, 33, .68) 48%, rgba(12, 38, 33, .24));
}
.promin-hero h2,
.promin-communities h2 {
	color: inherit;
	font-family: Georgia, serif;
	margin: 0;
}
.promin-hero a { color: #fdfaf0; text-decoration: none; }
.promin-hero a:hover,
.promin-hero a:focus-visible { color: #f5bf52; text-decoration: underline; }
.promin-hero a:focus-visible { outline: 2px solid var(--promin-amber); outline-offset: 4px; }
.promin-hero__story h2 {
	font-size: clamp(1.9rem, 4.5vw, 4.2rem);
	line-height: 1.08;
	overflow-wrap: anywhere;
	text-wrap: balance;
}
.promin-hero__label {
	display: inline-block;
	margin: 0 0 .9rem;
	padding: .25rem .65rem;
	background: var(--promin-amber);
	color: #192d27;
	font-weight: 700;
}
.promin-hero__summary { max-width: 48ch; margin: .9rem 0 0; }
.promin-hero__latest { width: min(100%, 52rem); min-width: 0; max-width: 100%; }
.promin-hero__latest h2 { font: 700 .85rem/1.2 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.promin-hero__latest ul,
.promin-communities ul { padding: 0; margin: .9rem 0 0; list-style: none; }
.promin-hero__latest ul {
	display: grid;
	--carousel-gap: clamp(.65rem, 2vw, 1.5rem);
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * var(--carousel-gap)) / 3);
	gap: var(--carousel-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	padding: .25rem 0 .75rem;
	max-width: 100%;
	min-width: 0;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* old Edge */
}
.promin-hero__latest ul::-webkit-scrollbar { height: 0; width: 0; background: transparent; }
.promin-hero__latest ul::-webkit-scrollbar-thumb { background: transparent; }
.promin-hero__latest li { scroll-snap-align: start; }
.promin-hero__latest li a {
	display: grid;
	align-content: start;
	gap: .65rem;
	font-weight: 650;
	line-height: 1.35;
	overflow-wrap: anywhere;
}
.promin-hero .promin-hero__latest img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.promin-hero__latest time { display: block; margin-top: .25rem; color: #d5ddd5; font-size: .8rem; }
.promin-communities { padding: clamp(1.25rem, 4vw, 3rem); background: #fdfaf0; color: #12332e; }
.promin-communities ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.promin-communities a {
	display: inline-block;
	padding: .55rem .75rem;
	color: inherit;
	background: #e9eee5;
	text-underline-offset: .18em;
}
@media (max-width: 760px) {
	.promin-hero { min-height: 0; padding: 1.4rem; }
	.promin-hero__lead { min-height: 14rem; }
}
@media (max-width: 520px) {
	.promin-hero__latest ul { grid-auto-columns: 77%; }
}
.promin-hero__carousel-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.promin-hero__carousel-controls:not([hidden]) { display: flex; gap: .45rem; }
.promin-hero__carousel-controls button {
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 1px solid #d5ddd5;
	border-radius: 50%;
	background: #12332e;
	color: #fdfaf0;
	font: inherit;
}
.promin-hero__carousel-controls button:disabled { opacity: .5; }

.promin-announcement {
	padding: clamp(1.25rem, 4vw, 3rem);
	background: #fdfaf0;
	color: #12332e;
}
.promin-announcement form { display: grid; gap: .9rem; max-width: 38rem; }
.promin-announcement label { display: grid; gap: .25rem; font-weight: 650; }
.promin-announcement input, .promin-announcement textarea { width: 100%; box-sizing: border-box; }
.promin-announcement button { justify-self: start; background: #f5bf52; color: #12332e; }

.promin-hero {
	grid-template-columns: minmax(0, 2.1fr) minmax(13rem, 1fr);
	gap: clamp(.8rem, 2.1vw, 2rem);
	min-height: 0;
	padding: clamp(1rem, 3vw, 2.5rem);
	overflow-x: clip;
	max-width: 100%;
	box-sizing: border-box;
}
.promin-hero__lead, .promin-hero__latest { grid-column: 1; min-width: 0; }
.promin-hero__story h2 { font-size: clamp(1.55rem, 3.5vw, 3rem); }
.promin-hero__archive {
	grid-area: 1 / 2 / span 2;
	padding: 1rem;
	background: rgba(12, 38, 33, .88);
}
.promin-hero__archive h2 { font-size: 1.35rem; }
.promin-hero__archive ul { list-style: none; margin: 0; padding: 0; }
.promin-hero__archive li { border-top: 1px solid #71857c; margin-top: .6rem; padding-top: .6rem; }
.promin-hero__archive small { display: block; color: #f5bf52; }
.promin-hero__archive a { display: block; font: 700 1.05rem/1.3 Georgia, serif; }
.promin-hero .promin-hero__latest img { max-height: clamp(74px, 16vh, 135px); }
.promin-announcement {
	width: min(22rem, calc(100vw - 1.5rem));
	max-width: min(22rem, calc(100vw - 1.5rem));
	max-height: min(90dvh, 100%);
	margin: auto;
	border: 0;
	border-radius: 10px;
	box-sizing: border-box;
}
.promin-announcement::backdrop { background: rgba(8, 27, 24, .72); }
.promin-announcement [data-close-announcement] { float: right; border: 0; background: transparent; font-size: 1.5rem; }
.promin-announcement input, .promin-announcement textarea, .promin-announcement select { max-width: 100%; box-sizing: border-box; padding: .45rem; border: 1px solid #74857d; border-radius: 4px; }
.promin-announcement input[type=file] { max-width: 100%; }
.promin-announcement button[type=submit] { padding: .65rem 1rem; border: 0; border-radius: 4px; }
@media (min-width: 700px) {
	.promin-announcement { width: min(34rem, calc(100vw - 2rem)); max-width: 34rem; }
}
.promin-feed { color: #12332e; }
.promin-feed__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.promin-feed__cards article { border-top: 1px solid #d9dfd3; padding-top: .75rem; }
.promin-feed__cards img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.promin-feed__cards a { color: inherit; }
.promin-feed__cards h3 { font: 700 clamp(1rem, 2vw, 1.35rem)/1.25 Georgia, serif; margin: .45rem 0; }
.promin-feed__cards time { font-size: .8rem; color: #40584d; }
@media (max-width: 760px) {
	.promin-hero { grid-template-columns: minmax(0, 1fr); }
	.promin-hero__lead { min-height: 0; }
	.promin-hero__archive { grid-area: auto; }
}
@media (max-width: 520px) {
	.promin-feed__cards { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.promin-hero { padding: .85rem; gap: .7rem; }
	.promin-hero__label { margin-bottom: .45rem; }
	.promin-hero__story h2 { font-size: clamp(1.35rem, 5vw, 2rem); }
	.promin-hero__latest ul { margin-top: .35rem; padding-bottom: .35rem; }
	.promin-hero .promin-hero__latest img { max-height: 88px; }
	.promin-hero__latest li a { gap: .35rem; font-size: .85rem; }
	.promin-hero__latest li a span {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}
	.promin-hero__archive { padding: .65rem; }
	.promin-hero__archive ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
	.promin-hero__archive a { font-size: .85rem; }
	.promin-hero__archive small { font-size: .72rem; }
}
