/* PNGRFL custom widgets — squared corners, 2px joined gaps, mono labels.
   Colours come from CSS custom properties set by the widgets (and overridable
   in Elementor Style controls), never hard-coded here. */

.pngrfl-stats-strip,
.pngrfl-pathway-flow,
.pngrfl-joined,
.pngrfl-card-grid,
.pngrfl-eyebrow {
	--pngrfl-mono: "JetBrains Mono", ui-monospace, monospace;
	--pngrfl-sans: "Archivo", system-ui, sans-serif;
}

/* ---------- Stats strip ---------- */

.pngrfl-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2px;
	background: var(--pngrfl-ink);
}

.pngrfl-stat {
	background: var(--pngrfl-stat-bg, var(--pngrfl-ink));
	padding: 40px 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.pngrfl-stat__number {
	font-family: var(--pngrfl-sans);
	font-weight: 800;
	font-size: clamp(38px, 4.6vw, 62px);
	line-height: 0.95;
	letter-spacing: -0.02em;
	color: var(--pngrfl-stat-number, var(--pngrfl-gold));
	font-variant-numeric: tabular-nums;
}

.pngrfl-stat__label {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--pngrfl-stat-label, rgba(247, 244, 239, 0.72));
	text-wrap: pretty;
}

/* ---------- Pathway flow ---------- */

.pngrfl-pathway {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 18px;
	align-items: stretch;
}

.pngrfl-step {
	position: relative;
	min-width: 0;
}

.pngrfl-step__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border-top: 3px solid var(--pngrfl-step-border, var(--pngrfl-ink));
	color: inherit;
	text-decoration: none;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

a.pngrfl-step__inner:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(18, 16, 15, 0.16);
}

.pngrfl-step__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.pngrfl-step__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pngrfl-step__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 20px 24px;
}

.pngrfl-step__number {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	color: var(--pngrfl-step-number, var(--pngrfl-red));
}

.pngrfl-step__title {
	margin: 0;
	font-family: var(--pngrfl-sans);
	font-weight: 800;
	font-size: 17px;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	text-wrap: pretty;
}

.pngrfl-step--inverted .pngrfl-step__inner {
	background: var(--pngrfl-ink);
	border-top-color: var(--pngrfl-red);
	color: var(--pngrfl-paper);
}

.pngrfl-step--inverted .pngrfl-step__number {
	color: var(--pngrfl-gold);
}

/* Chevrons only while the flow is actually horizontal. */
@media (min-width: 1025px) {
	.pngrfl-pathway--chevrons .pngrfl-step + .pngrfl-step::before {
		content: "";
		position: absolute;
		top: 26%;
		left: -14px;
		width: 10px;
		height: 10px;
		border-top: 2px solid var(--pngrfl-red);
		border-right: 2px solid var(--pngrfl-red);
		transform: rotate(45deg);
	}
}

/* ---------- Joined statements ---------- */

.pngrfl-joined {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	background: var(--pngrfl-ink);
}

.pngrfl-joined__item {
	flex: 1 1 160px;
	min-width: 0;
	background: var(--pngrfl-paper);
	padding: 28px 22px;
	font-family: var(--pngrfl-sans);
	font-weight: 800;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-wrap: pretty;
}

.pngrfl-joined__item--accent {
	background: var(--pngrfl-red);
	color: var(--pngrfl-paper);
}

/* ---------- Card grid ---------- */

.pngrfl-card-grid__grid {
	display: grid;
	gap: 18px;
	align-items: stretch;
}

.pngrfl-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	background: #fff;
	border-bottom: 3px solid var(--pngrfl-card-accent, var(--pngrfl-red));
	text-decoration: none;
	color: inherit;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.pngrfl-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(18, 16, 15, 0.18);
}

.pngrfl-card__media {
	overflow: hidden;
	aspect-ratio: var(--pngrfl-card-ratio, 16 / 10);
}

.pngrfl-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms ease;
}

.pngrfl-card:hover .pngrfl-card__media img {
	transform: scale(1.04);
}

.pngrfl-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	flex: 1;
}

.pngrfl-card__logo {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.pngrfl-card__category {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pngrfl-red);
}

.pngrfl-card__title {
	margin: 0;
	font-family: var(--pngrfl-sans);
	font-weight: 800;
	font-size: 22px;
	line-height: 1.1;
	text-transform: uppercase;
}

.pngrfl-card__text {
	margin: 0;
	font-family: var(--pngrfl-sans);
	font-size: 15px;
	line-height: 1.6;
	color: var(--pngrfl-body);
	text-wrap: pretty;
}

.pngrfl-card__cta {
	margin-top: auto;
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pngrfl-red);
	border-bottom: 1px solid var(--pngrfl-red);
	align-self: flex-start;
	padding-bottom: 2px;
}

/* ---------- Eyebrow ---------- */

.pngrfl-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.pngrfl-eyebrow__rule {
	display: block;
	width: 34px;
	height: 2px;
	background: var(--pngrfl-accent, var(--pngrfl-red));
	flex: none;
}

/* ---------- Card grid: rows the base rules don't cover ----------
   .pngrfl-card__body is a column, which suits the competitions card. The
   competitions logo/category pair and the whole teams footer are rows, so
   they need their own wrappers. */

.pngrfl-card__meta {
	display: flex;
	align-items: center;
	gap: 12px;
}

.pngrfl-card-grid--teams .pngrfl-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px;
	margin-top: auto;
}

.pngrfl-card-grid--teams .pngrfl-card__ident {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.pngrfl-card__logo--round {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	flex: none;
}

.pngrfl-card__name {
	font-family: var(--pngrfl-sans);
	font-weight: 800;
	font-size: 16px;
	line-height: 1.15;
	text-transform: uppercase;
	text-wrap: pretty;
}

.pngrfl-card__arrow {
	color: var(--pngrfl-red);
	font-size: 18px;
	line-height: 1;
	flex: none;
	transition: transform 180ms ease;
}

.pngrfl-card:hover .pngrfl-card__arrow {
	transform: translateX(4px);
}

/* The teams card has no description to absorb slack, so the portrait holds
   the height and the footer sits flush at the bottom of every card. */
.pngrfl-card-grid--teams .pngrfl-card__media {
	aspect-ratio: var(--pngrfl-card-ratio, 3 / 4);
}

/* Reduced motion: keep the hover affordance, drop the movement. */
@media (prefers-reduced-motion: reduce) {
	.pngrfl-card,
	.pngrfl-card__media img,
	.pngrfl-card__arrow,
	.pngrfl-step__inner {
		transition: none;
	}

	.pngrfl-card:hover,
	a.pngrfl-step__inner:hover {
		transform: none;
	}

	.pngrfl-card:hover .pngrfl-card__media img,
	.pngrfl-card:hover .pngrfl-card__arrow {
		transform: none;
	}
}
/* ---------------------------------------------------------------------------
   Board of Directors widgets — append to assets/pngrfl-widgets.css
   Colours come from CSS custom properties set by the widgets; nothing
   hard-coded except the dashed CMS-slot greys.
   --------------------------------------------------------------------------- */

.pngrfl-structure-strip,
.pngrfl-feature,
.pngrfl-director-grid {
	--pngrfl-mono: "JetBrains Mono", ui-monospace, monospace;
	--pngrfl-sans: "Archivo", system-ui, sans-serif;
}

/* ---------- Structure strip ---------- */

.pngrfl-structure-strip {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.pngrfl-structure__caption {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(247, 244, 239, 0.55);
}

.pngrfl-structure {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: rgba(247, 244, 239, 0.16);
	border: 1px solid rgba(247, 244, 239, 0.16);
}

.pngrfl-structure__panel {
	background: var(--pngrfl-structure-bg, var(--pngrfl-ink));
	color: var(--pngrfl-structure-text, var(--pngrfl-paper));
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.pngrfl-structure__count {
	font-family: var(--pngrfl-sans);
	font-size: 46px;
	font-weight: 800;
	line-height: 1;
	color: var(--pngrfl-gold);
	font-variant-numeric: tabular-nums;
}

.pngrfl-structure__title {
	font-family: var(--pngrfl-sans);
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-wrap: pretty;
}

.pngrfl-structure__desc {
	font-family: var(--pngrfl-sans);
	font-size: 13px;
	line-height: 1.5;
	opacity: 0.65;
	text-wrap: pretty;
}

/* ---------- Person feature (Chairman) ---------- */

.pngrfl-feature {
	--pngrfl-feature-photo: 42%;
	display: grid;
	grid-template-columns: var(--pngrfl-feature-photo) minmax(0, 1fr);
	background: #fff;
	border-top: 4px solid var(--pngrfl-feature-border, var(--pngrfl-red));
}
/* Photo on the right: flip the track order rather than the source order, so
   the portrait still comes first for a screen reader and when the row stacks. */
.pngrfl-feature--photo-right { grid-template-columns: minmax(0, 1fr) var(--pngrfl-feature-photo); }
.pngrfl-feature--photo-right .pngrfl-feature__media { grid-column: 2; grid-row: 1; }
.pngrfl-feature--photo-right .pngrfl-feature__body { grid-column: 1; grid-row: 1; }

@media (max-width: 767px) {
	.pngrfl-feature {
		grid-template-columns: minmax(0, 1fr);
	}
}

.pngrfl-feature__media {
	aspect-ratio: 4 / 4.4;
	overflow: hidden;
}

.pngrfl-feature__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pngrfl-feature__body {
	padding: clamp(28px, 4vw, 52px);
	display: flex;
	flex-direction: column;
	gap: 18px;
	justify-content: center;
	min-width: 0;
}

.pngrfl-feature__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pngrfl-feature__name {
	margin: 0;
	font-family: var(--pngrfl-sans);
	font-size: clamp(30px, 3.6vw, 48px);
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.pngrfl-feature__role {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pngrfl-red);
	text-wrap: pretty;
}

.pngrfl-feature__rule {
	display: block;
	width: 48px;
	height: 3px;
	background: var(--pngrfl-feature-rule, var(--pngrfl-gold));
}

.pngrfl-feature__copy {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 60ch;
}

.pngrfl-feature__copy p {
	margin: 0;
	font-family: var(--pngrfl-sans);
	font-size: 16px;
	line-height: 1.65;
	color: var(--pngrfl-body);
	text-wrap: pretty;
}

.pngrfl-feature__more summary {
	display: inline-block;
	cursor: pointer;
	font-family: var(--pngrfl-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-bottom: 2px solid var(--pngrfl-red);
	padding-bottom: 4px;
	list-style: none;
}

.pngrfl-feature__more summary::-webkit-details-marker {
	display: none;
}

.pngrfl-feature__more summary::after {
	content: " +";
}

.pngrfl-feature__more[open] summary::after {
	content: " −";
}

.pngrfl-feature__more .pngrfl-feature__copy {
	margin-top: 16px;
}

/* ---------- Director grid ---------- */

.pngrfl-directors {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}

.pngrfl-director {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: #fff;
	border-top: 3px solid var(--pngrfl-ink);
	color: inherit;
	text-decoration: none;
}

a.pngrfl-director {
	transition: border-top-color 160ms ease, transform 180ms ease, box-shadow 180ms ease;
}

a.pngrfl-director:hover {
	border-top-color: var(--pngrfl-director-hover, var(--pngrfl-red));
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(18, 16, 15, 0.14);
}

.pngrfl-director__media {
	aspect-ratio: 3 / 3.6;
	overflow: hidden;
}

.pngrfl-director__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pngrfl-director__body {
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	min-width: 0;
}

.pngrfl-director__label {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pngrfl-director-label, var(--pngrfl-red));
	text-wrap: pretty;
}

.pngrfl-director__label--muted {
	color: #6b635e;
}

.pngrfl-director__name {
	font-family: var(--pngrfl-sans);
	font-size: 20px;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.05;
	overflow-wrap: anywhere;
}

.pngrfl-director__blurb {
	font-family: var(--pngrfl-sans);
	font-size: 13px;
	line-height: 1.5;
	color: var(--pngrfl-body);
	flex: 1;
	text-wrap: pretty;
}

.pngrfl-director__cta {
	font-family: var(--pngrfl-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pngrfl-red);
}

/* Non-Executive layout: padded card, photo above name, wider photo. */

.pngrfl-director-grid--non-executive .pngrfl-directors {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pngrfl-director-grid--non-executive .pngrfl-director {
	padding: 20px;
	gap: 16px;
}

.pngrfl-director-grid--non-executive .pngrfl-director__media {
	aspect-ratio: 4 / 3.2;
}

.pngrfl-director-grid--non-executive .pngrfl-director__body {
	padding: 0;
	gap: 8px;
	flex: 0 1 auto;
}

.pngrfl-director-grid--non-executive .pngrfl-director__name {
	font-size: 18px;
	line-height: 1.1;
}

/* Dashed CMS slot — build-time only. */

.pngrfl-director--slot {
	background: transparent;
	border: 2px dashed #c8c0b7;
	border-top: 2px dashed #c8c0b7;
	padding: 20px;
	gap: 16px;
}

.pngrfl-director__media--slot {
	border: 1px dashed #c8c0b7;
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3.2;
	font-family: var(--pngrfl-mono);
	font-size: 9px;
	letter-spacing: 0.14em;
	color: #8a817a;
	text-align: center;
	padding: 10px;
}

.pngrfl-director--slot .pngrfl-director__name {
	font-size: 18px;
	color: #6b635e;
}

.pngrfl-director__note {
	font-family: var(--pngrfl-sans);
	font-size: 12px;
	line-height: 1.5;
	color: #8a817a;
	text-wrap: pretty;
}
/* ---------------------------------------------------------------------------
   BETTER Philosophy widgets — append to assets/pngrfl-widgets.css
   --------------------------------------------------------------------------- */

.pngrfl-value-cards,
.pngrfl-application-grid {
	--pngrfl-mono: "JetBrains Mono", ui-monospace, monospace;
	--pngrfl-sans: "Archivo", system-ui, sans-serif;
}

/* ---------- Value cards ---------- */

.pngrfl-values {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2px;
	background: var(--pngrfl-ink);
	border: 1px solid var(--pngrfl-ink);
}

.pngrfl-value {
	background: var(--pngrfl-value-bg, var(--pngrfl-paper));
	min-width: 0;
}

.pngrfl-value__summary {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 34px 30px 30px;
	cursor: pointer;
	list-style: none;
	min-height: 300px;
}

.pngrfl-value__summary::-webkit-details-marker {
	display: none;
}

.pngrfl-value:hover .pngrfl-value__summary {
	background: #EFEAE2;
}

.pngrfl-value__summary:focus-visible {
	outline: 2px solid var(--pngrfl-red);
	outline-offset: -4px;
}

.pngrfl-value__media {
	aspect-ratio: 4 / 2.6;
	overflow: hidden;
}

.pngrfl-value__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pngrfl-value__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.pngrfl-value__letter {
	font-family: var(--pngrfl-sans);
	font-size: 74px;
	font-weight: 800;
	line-height: 0.8;
	letter-spacing: -0.04em;
	color: var(--pngrfl-letter-closed, #D8D1C7);
	transition: color 200ms ease;
}

.pngrfl-value[open] .pngrfl-value__letter {
	color: var(--pngrfl-letter-open, var(--pngrfl-red));
}

.pngrfl-value__index {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	color: #8A817B;
}

.pngrfl-value__name {
	margin: 0;
	font-family: var(--pngrfl-sans);
	font-size: 24px;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.pngrfl-value__lead {
	margin: 0;
	font-family: var(--pngrfl-sans);
	font-size: 16px;
	line-height: 1.5;
	font-weight: 600;
	text-wrap: pretty;
}

.pngrfl-value__cta {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pngrfl-red);
}

.pngrfl-value__cta-rule {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--pngrfl-red);
	flex: none;
}

.pngrfl-value__body {
	padding: 0 30px 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pngrfl-value__body p {
	margin: 0;
	font-family: var(--pngrfl-sans);
	font-size: 15px;
	line-height: 1.65;
	color: var(--pngrfl-body);
	text-wrap: pretty;
}

.pngrfl-value__note {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(18, 16, 15, 0.55);
	border: 1px dashed rgba(18, 16, 15, 0.3);
	padding: 8px 10px;
}

/* ---------- Application grid ---------- */

.pngrfl-apps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: rgba(247, 244, 239, 0.16);
	border: 1px solid rgba(247, 244, 239, 0.16);
}

.pngrfl-app {
	background: var(--pngrfl-app-bg, #15130F);
	color: var(--pngrfl-app-text, var(--pngrfl-paper));
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 150px;
	min-width: 0;
}

.pngrfl-app__icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	color: var(--pngrfl-app-icon, var(--pngrfl-gold));
}

.pngrfl-app__icon svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.pngrfl-app__text {
	font-family: var(--pngrfl-sans);
	font-size: 15px;
	line-height: 1.4;
	font-weight: 600;
	text-wrap: pretty;
}

.pngrfl-app__index {
	margin-top: auto;
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	color: rgba(247, 244, 239, 0.45);
}

/* ---------- Section 5 sticky panel (page-level helper) ---------- */

.pngrfl-living-panel {
	position: sticky;
	top: 96px;
}

@media (max-width: 1024px) {
	.pngrfl-living-panel {
		position: static;
	}
}
/* ---------------------------------------------------------------------------
   Community Rugby League widgets — append to assets/pngrfl-widgets.css
   --------------------------------------------------------------------------- */

.pngrfl-feature-cards,
.pngrfl-region-selector,
.pngrfl-numbered-grid,
.pngrfl-timeline-widget,
.pngrfl-ladder-widget {
	--pngrfl-mono: "JetBrains Mono", ui-monospace, monospace;
	--pngrfl-sans: "Archivo", system-ui, sans-serif;
}

/* ---------- Feature cards ---------- */

.pngrfl-features {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2px;
	background: var(--pngrfl-ink);
	border: 1px solid var(--pngrfl-ink);
}

/* Scoped to .pngrfl-features: these card rules share their class names with
   the person-feature widget (.pngrfl-feature, .pngrfl-feature__rule) and,
   sitting later in the file, were overriding its two-column grid. */
.pngrfl-features .pngrfl-feature {
	background: var(--pngrfl-feature-card-bg, #fff);
	padding: 30px 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 230px;
	min-width: 0;
}

.pngrfl-features .pngrfl-feature__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.pngrfl-features .pngrfl-feature__icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	color: var(--pngrfl-red);
}

.pngrfl-features .pngrfl-feature__icon svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.pngrfl-features .pngrfl-feature__index {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	color: #8A817B;
}

.pngrfl-features .pngrfl-feature__title {
	margin: 0;
	font-family: var(--pngrfl-sans);
	font-size: 19px;
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	line-height: 1.1;
	overflow-wrap: anywhere;
}

.pngrfl-features .pngrfl-feature__text {
	margin: 0;
	font-family: var(--pngrfl-sans);
	font-size: 14px;
	line-height: 1.6;
	color: var(--pngrfl-body);
	text-wrap: pretty;
}

.pngrfl-features .pngrfl-feature__rule {
	margin-top: auto;
	display: block;
	width: 28px;
	height: 3px;
	background: var(--pngrfl-feature-rule, var(--pngrfl-red));
}

/* ---------- Region selector ---------- */

.pngrfl-region-selector {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 28px;
	align-items: start;
}

.pngrfl-region__map {
	position: relative;
	background: var(--pngrfl-ink);
	aspect-ratio: 4 / 3.4;
	display: grid;
	place-items: center;
	padding: 24px;
	overflow: hidden;
}

.pngrfl-region__map img,
.pngrfl-region__map svg {
	max-width: 100%;
	max-height: 100%;
	display: block;
}

.pngrfl-region__map [data-region] {
	cursor: pointer;
	transition: fill 180ms ease, opacity 180ms ease;
}

.pngrfl-region__map [data-region][aria-selected="true"],
.pngrfl-region__map [data-region].is-active {
	fill: var(--pngrfl-gold);
}

.pngrfl-region__caption {
	position: absolute;
	left: 18px;
	bottom: 18px;
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pngrfl-gold);
}

.pngrfl-region__panel {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--pngrfl-ink);
	border: 1px solid var(--pngrfl-ink);
}

.pngrfl-region__rows {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pngrfl-region__row {
	appearance: none;
	border: 0;
	border-left: 4px solid transparent;
	cursor: pointer;
	text-align: left;
	width: 100%;
	background: var(--pngrfl-region-bg, var(--pngrfl-paper));
	color: var(--pngrfl-ink);
	padding: 22px 24px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	font-family: var(--pngrfl-sans);
}

.pngrfl-region__row:hover {
	filter: brightness(0.97);
}

.pngrfl-region__row.is-active {
	background: var(--pngrfl-region-active-bg, var(--pngrfl-ink));
	color: var(--pngrfl-paper);
	border-left-color: var(--pngrfl-region-edge, var(--pngrfl-gold));
}

.pngrfl-region__row:focus-visible {
	outline: 2px solid var(--pngrfl-gold);
	outline-offset: -4px;
}

.pngrfl-region__row-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.pngrfl-region__name {
	font-size: 20px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.1;
	overflow-wrap: anywhere;
}

.pngrfl-region__label {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.7;
}

.pngrfl-region__marker {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	flex: none;
}

.pngrfl-region__detail {
	background: #fff;
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* JS hides inactive panels; without JS all four stay readable. */
.pngrfl-region__detail[hidden] {
	display: none;
}

.pngrfl-region__detail-label {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pngrfl-red);
}

.pngrfl-region__blurb {
	margin: 0;
	font-family: var(--pngrfl-sans);
	font-size: 15px;
	line-height: 1.65;
	color: var(--pngrfl-body);
	text-wrap: pretty;
}

.pngrfl-region__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
	gap: 12px;
}

.pngrfl-region__slot {
	border: 1px solid #E3DDD4;
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.pngrfl-region__slot-label {
	font-family: var(--pngrfl-mono);
	font-size: 9px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8A817B;
}

.pngrfl-region__slot-value {
	font-family: var(--pngrfl-sans);
	font-size: 15px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.pngrfl-region__cta {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pngrfl-red);
	align-self: flex-start;
	border-bottom: 1px solid var(--pngrfl-red);
	padding-bottom: 2px;
}

/* ---------- Numbered grid ---------- */

.pngrfl-numbered-grid {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.pngrfl-numbered__caption {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #8A817B;
}

.pngrfl-numbered {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2px;
	background: var(--pngrfl-ink);
	border: 1px solid var(--pngrfl-ink);
}

.pngrfl-numbered__item {
	background: var(--pngrfl-paper);
	padding: 22px 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 130px;
	min-width: 0;
}

.pngrfl-numbered__index {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	color: var(--pngrfl-numbered-index, var(--pngrfl-red));
}

.pngrfl-numbered__text {
	font-family: var(--pngrfl-sans);
	font-size: 15px;
	line-height: 1.4;
	font-weight: 600;
	text-wrap: pretty;
}

.pngrfl-numbered__icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	color: var(--pngrfl-numbered-icon, var(--pngrfl-gold));
}

.pngrfl-numbered__icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* dark-icon: ink cells on translucent hairlines */
.pngrfl-numbered-grid--dark-icon .pngrfl-numbered {
	gap: 1px;
	background: rgba(247, 244, 239, 0.16);
	border-color: rgba(247, 244, 239, 0.16);
}

.pngrfl-numbered-grid--dark-icon .pngrfl-numbered__item {
	background: #15130F;
	color: var(--pngrfl-paper);
	min-height: 140px;
}

.pngrfl-numbered-grid--dark-icon .pngrfl-numbered__caption {
	color: rgba(247, 244, 239, 0.55);
}

/* dark-list: single column of numbered lines inside a dark panel */
.pngrfl-numbered-grid--dark-list .pngrfl-numbered {
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	background: rgba(247, 244, 239, 0.16);
	border: 0;
}

.pngrfl-numbered-grid--dark-list .pngrfl-numbered__item {
	background: var(--pngrfl-ink);
	color: var(--pngrfl-paper);
	flex-direction: row;
	align-items: baseline;
	gap: 14px;
	padding: 16px 0;
	min-height: 0;
}

.pngrfl-numbered-grid--dark-list .pngrfl-numbered__index {
	color: rgba(247, 244, 239, 0.5);
	flex: none;
}

.pngrfl-numbered-grid--dark-list .pngrfl-numbered__text {
	font-size: 15px;
	line-height: 1.5;
}

/* roles: wrapping chips */
.pngrfl-numbered-grid--roles .pngrfl-numbered {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	background: rgba(247, 244, 239, 0.16);
	border-color: rgba(247, 244, 239, 0.16);
}

.pngrfl-numbered-grid--roles .pngrfl-numbered__item {
	flex: 1 1 140px;
	background: #15130F;
	color: var(--pngrfl-paper);
	padding: 20px 18px;
	gap: 8px;
	min-height: 0;
}

.pngrfl-numbered-grid--roles .pngrfl-numbered__text {
	font-size: 15px;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.2;
}

/* ---------- Timeline ---------- */

.pngrfl-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 2px;
	background: var(--pngrfl-ink);
	border: 1px solid var(--pngrfl-ink);
}

.pngrfl-timeline__step {
	background: var(--pngrfl-timeline-bg, #fff);
	border-top: 3px solid var(--pngrfl-ink);
	padding: 26px 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 190px;
	min-width: 0;
}

.pngrfl-timeline__label {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8A817B;
}

.pngrfl-timeline__title {
	font-family: var(--pngrfl-sans);
	font-size: 17px;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.15;
	text-wrap: pretty;
	overflow-wrap: anywhere;
}

.pngrfl-timeline__date {
	font-family: var(--pngrfl-mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--pngrfl-timeline-date, var(--pngrfl-red));
}

.pngrfl-timeline__note {
	margin-top: auto;
	font-family: var(--pngrfl-sans);
	font-size: 13px;
	line-height: 1.55;
	color: var(--pngrfl-body);
	text-wrap: pretty;
}

/* ---------- Pathway ladder ---------- */

.pngrfl-ladder-widget {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pngrfl-ladder__caption {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pngrfl-gold);
}

.pngrfl-ladder {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: rgba(247, 244, 239, 0.16);
	border: 1px solid rgba(247, 244, 239, 0.16);
}

.pngrfl-rung {
	background: var(--pngrfl-rung-bg, #15130F);
	color: var(--pngrfl-rung-text, var(--pngrfl-paper));
	padding: 22px 24px;
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
}

.pngrfl-rung__index {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	color: var(--pngrfl-rung-index, var(--pngrfl-gold));
	flex: none;
}

.pngrfl-rung__title {
	font-family: var(--pngrfl-sans);
	font-size: 16px;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.2;
	text-wrap: pretty;
	overflow-wrap: anywhere;
}

.pngrfl-rung--top {
	background: var(--pngrfl-rung-top-bg, var(--pngrfl-red));
	color: var(--pngrfl-rung-top-text, var(--pngrfl-paper));
}

.pngrfl-ladder-widget--horizontal .pngrfl-ladder {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 2px;
	background: var(--pngrfl-ink);
	border-color: var(--pngrfl-ink);
}

.pngrfl-ladder-widget--horizontal .pngrfl-rung {
	flex: 1 1 130px;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 20px 16px;
}

.pngrfl-ladder-widget--horizontal .pngrfl-rung__title {
	font-size: 14px;
}

/* ---------- Region selector: no map supplied ----------
   The map block always renders because it carries the "Selected —" caption.
   With no SVG or image that leaves an empty dark rectangle, which is exactly
   the placeholder box the brief says must not reach a live page. Collapse the
   block and keep the caption as a plain line under the rows, so the aria-live
   readout survives and the panel takes the full width. */

.pngrfl-region__map:not(:has( svg )):not(:has( img )) {
	aspect-ratio: auto;
	background: none;
	padding: 0;
	display: block;
	min-height: 0;
	order: 2;
}

.pngrfl-region__map:not(:has( svg )):not(:has( img )) .pngrfl-region__caption {
	position: static;
	inset: auto;
	padding: 0;
	background: none;
	color: var(--pngrfl-muted, #8A817A);
}

/* With the map collapsed, the panel takes the whole row. Applied as a sibling
   rule rather than :has() on the wrapper, which the auto-fit track list wins. */
.pngrfl-region__map:not(:has( svg )):not(:has( img )) + .pngrfl-region__panel {
	grid-column: 1 / -1;
}

/* ---------- Region diagram: resting, hover and focus states ----------
   The base stylesheet only defines the active (gold) fill, so the unselected
   state, hover and keyboard focus live here. Colours come from the token layer,
   so nothing is hard-coded in the SVG itself. */

.pngrfl-region__map [data-region] polygon {
	fill: var(--pngrfl-region-rest, rgba(247, 244, 239, 0.16));
	stroke: var(--pngrfl-region-edge, rgba(247, 244, 239, 0.28));
	stroke-width: 2;
	transition: fill 180ms ease, stroke 180ms ease;
}

.pngrfl-region__map [data-region]:hover polygon {
	fill: var(--pngrfl-region-hover, rgba(232, 178, 58, 0.45));
	stroke: var(--pngrfl-gold);
}

.pngrfl-region__map [data-region].is-active polygon,
.pngrfl-region__map [data-region][aria-selected="true"] polygon {
	fill: var(--pngrfl-gold);
	stroke: var(--pngrfl-gold);
}

/* The <g> itself carries the gold fill rule from the base sheet; keep it off so
   the polygons decide, and let keyboard focus be visible. */
.pngrfl-region__map [data-region] {
	fill: none;
	outline: none;
}

.pngrfl-region__map [data-region]:focus-visible polygon {
	stroke: var(--pngrfl-gold);
	stroke-width: 4;
}

@media (prefers-reduced-motion: reduce) {
	.pngrfl-region__map [data-region] polygon { transition: none; }
}

/* ===========================================================================
   Pathways page (241) — pathway ladder variants, pathway card, academy map,
   word blocks, CTA grid. Tokens only; rules sit on cells, never on a grid
   container, so no leftover track can render as a slab of line colour.
   =========================================================================== */

.pngrfl-pl,
.pngrfl-pcard,
.pngrfl-amap,
.pngrfl-words-widget,
.pngrfl-ctas-widget {
	font-family: var(--pngrfl-sans);
	text-wrap: pretty;
}

/* ---------- Pathway ladder: shared ---------- */

.pngrfl-pl {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pngrfl-pl__caption {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pngrfl-rung-index, var(--pngrfl-gold));
}

.pngrfl-pl__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

.pngrfl-pl__item {
	position: relative;
	display: flex;
	min-width: 0;
	flex: 1 1 0;
}

.pngrfl-pl__card {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.pngrfl-pl__num {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
}

.pngrfl-pl__title {
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.08;
	letter-spacing: -0.01em;
	overflow-wrap: break-word;
}

.pngrfl-pl__detail {
	font-size: 13px;
	line-height: 1.45;
	opacity: 0.88;
}

/* ---------- ladder: stage cards on the gold band ---------- */

.pngrfl-pl--ladder .pngrfl-pl__list { gap: 12px; }

.pngrfl-pl--ladder .pngrfl-pl__card {
	border: 2px solid var(--pngrfl-rung-line, var(--pngrfl-ink));
	color: var(--pngrfl-rung-text, var(--pngrfl-ink));
	background: transparent;
	padding: 22px 20px;
	gap: 14px;
	min-height: 178px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pngrfl-pl--ladder .pngrfl-pl__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4px 10px;
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.pngrfl-pl--ladder .pngrfl-pl__title {
	font-size: clamp(15px, 1.45vw, 19px);
	margin-top: auto;
}

.pngrfl-pl--ladder .is-key .pngrfl-pl__card {
	background: var(--pngrfl-rung-key-bg, var(--pngrfl-ink));
	color: var(--pngrfl-paper);
}

.pngrfl-pl--ladder a.pngrfl-pl__card:hover,
.pngrfl-pl--ladder a.pngrfl-pl__card:focus-visible {
	background: var(--pngrfl-ink);
	color: var(--pngrfl-paper);
}

.pngrfl-pl a.pngrfl-pl__card:focus-visible {
	outline: 3px solid var(--pngrfl-ink);
	outline-offset: 3px;
}

/* ---------- steps: Academy age pathway on ink ---------- */

.pngrfl-pl--steps .pngrfl-pl__list { gap: 10px; }

.pngrfl-pl--steps .pngrfl-pl__card {
	border: 1px solid var(--pngrfl-rung-line, color-mix(in srgb, var(--pngrfl-paper) 28%, transparent));
	color: var(--pngrfl-rung-text, var(--pngrfl-paper));
	padding: 18px 16px;
	gap: 10px;
	min-height: 130px;
}

.pngrfl-pl--steps .pngrfl-pl__num {
	font-size: 10px;
	color: var(--pngrfl-rung-index, var(--pngrfl-gold));
}

.pngrfl-pl--steps .pngrfl-pl__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0;
	margin-top: auto;
}

.pngrfl-pl--steps .is-terminal .pngrfl-pl__card,
.pngrfl-pl--system .is-terminal .pngrfl-pl__card {
	background: var(--pngrfl-rung-top-bg, var(--pngrfl-gold));
	border-color: var(--pngrfl-rung-top-bg, var(--pngrfl-gold));
	color: var(--pngrfl-rung-top-text, var(--pngrfl-ink));
}

.pngrfl-pl--steps .is-terminal .pngrfl-pl__num,
.pngrfl-pl--system .is-terminal .pngrfl-pl__num {
	color: color-mix(in srgb, var(--pngrfl-ink) 65%, transparent);
}

/* ---------- stream: vertical list with circular markers ---------- */

.pngrfl-pl--stream {
	background: var(--pngrfl-card);
	border-top: 4px solid var(--pngrfl-rung-top-bg, var(--pngrfl-red));
	padding: 28px;
	gap: 22px;
	color: var(--pngrfl-ink);
	height: 100%;
	box-sizing: border-box;
}

.pngrfl-pl__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 14px;
}

.pngrfl-pl--stream .pngrfl-pl__caption {
	font-family: var(--pngrfl-sans);
	font-size: clamp(20px, 2.4vw, 28px);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: var(--pngrfl-ink);
}

.pngrfl-pl__count {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pngrfl-rung-top-bg, var(--pngrfl-red));
}

.pngrfl-pl--stream .pngrfl-pl__list { flex-direction: column; flex-wrap: nowrap; }

.pngrfl-pl--stream .pngrfl-pl__item {
	flex: none;
	border-bottom: 1px solid var(--pngrfl-hairline);
}

.pngrfl-pl--stream .pngrfl-pl__card {
	flex-direction: row;
	align-items: center;
	gap: 16px;
	padding: 13px 0;
}

.pngrfl-pl--stream .pngrfl-pl__num {
	width: 30px;
	height: 30px;
	flex: none;
	display: grid;
	place-items: center;
	border: 1px solid var(--pngrfl-hairline-strong);
	border-radius: 50%;
	font-size: 10px;
	letter-spacing: 0;
	color: var(--pngrfl-body);
	box-sizing: border-box;
}

.pngrfl-pl--stream .pngrfl-pl__title {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: 0;
}

.pngrfl-pl--stream .is-terminal .pngrfl-pl__num {
	background: var(--pngrfl-rung-top-bg, var(--pngrfl-red));
	border-color: var(--pngrfl-rung-top-bg, var(--pngrfl-red));
	color: var(--pngrfl-paper);
}

.pngrfl-pl--stream .is-terminal .pngrfl-pl__title { font-weight: 800; }

/* ---------- system: large tier cards ---------- */

.pngrfl-pl--system .pngrfl-pl__list { gap: 0; }

.pngrfl-pl--system .pngrfl-pl__card {
	background: var(--pngrfl-rung-bg, var(--pngrfl-ink));
	color: var(--pngrfl-rung-text, var(--pngrfl-paper));
	border: 1px solid var(--pngrfl-rung-line, color-mix(in srgb, var(--pngrfl-paper) 22%, transparent));
	padding: 28px 22px;
	gap: 14px;
	min-height: 210px;
}

.pngrfl-pl--system .pngrfl-pl__num {
	letter-spacing: 0.16em;
	color: var(--pngrfl-rung-index, var(--pngrfl-gold));
}

.pngrfl-pl--system .pngrfl-pl__title {
	font-size: clamp(16px, 1.6vw, 22px);
	margin-top: auto;
}

.pngrfl-pl--system .pngrfl-pl__detail { line-height: 1.5; }

/* Tablet: three per row, last row stretches — never an empty track. */
@media (min-width: 768px) and (max-width: 1024px) {
	.pngrfl-pl--ladder .pngrfl-pl__item { flex: 1 1 calc((100% - 24px) / 3); }
	.pngrfl-pl--steps .pngrfl-pl__item  { flex: 1 1 calc((100% - 20px) / 3); }
	.pngrfl-pl--system .pngrfl-pl__item { flex: 1 1 33.333%; }
	.pngrfl-pl--ladder .pngrfl-pl__title { font-size: 17px; }
	.pngrfl-pl--system .pngrfl-pl__title { font-size: 19px; }
}

/* Mobile: a vertical journey with a downward connector between stages. */
@media (max-width: 767px) {
	.pngrfl-pl--ladder .pngrfl-pl__list,
	.pngrfl-pl--steps .pngrfl-pl__list,
	.pngrfl-pl--system .pngrfl-pl__list {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 22px;
	}

	.pngrfl-pl--ladder .pngrfl-pl__item,
	.pngrfl-pl--steps .pngrfl-pl__item,
	.pngrfl-pl--system .pngrfl-pl__item { flex: none; }

	.pngrfl-pl--ladder .pngrfl-pl__card,
	.pngrfl-pl--steps .pngrfl-pl__card,
	.pngrfl-pl--system .pngrfl-pl__card {
		min-height: 0;
		padding: 18px 18px;
		gap: 10px;
	}

	.pngrfl-pl--ladder .pngrfl-pl__title { font-size: 18px; margin-top: 0; }
	.pngrfl-pl--system .pngrfl-pl__title { font-size: 20px; margin-top: 0; }
	.pngrfl-pl--steps .pngrfl-pl__title { margin-top: 0; }

	.pngrfl-pl--ladder .pngrfl-pl__item:not(:last-child)::after,
	.pngrfl-pl--steps .pngrfl-pl__item:not(:last-child)::after,
	.pngrfl-pl--system .pngrfl-pl__item:not(:last-child)::after {
		content: "";
		position: absolute;
		left: 22px;
		top: 100%;
		width: 12px;
		height: 22px;
		background: var(--pngrfl-pl-connector, var(--pngrfl-gold));
		clip-path: polygon(40% 0, 60% 0, 60% 58%, 100% 58%, 50% 100%, 0 58%, 40% 58%);
	}

	.pngrfl-pl--ladder { --pngrfl-pl-connector: var(--pngrfl-ink); }
	.pngrfl-pl--stream { padding: 22px 18px; }
}

/* ---------- Pathway card ---------- */

.pngrfl-pcard {
	--pc-fg: var(--pngrfl-ink);
	--pc-body: var(--pngrfl-body);
	--pc-line: var(--pngrfl-hairline-strong);
	--pc-ph: var(--pngrfl-paper-alt);
	--pc-cta-bg: var(--pngrfl-ink);
	--pc-cta-fg: var(--pngrfl-paper);
	--pc-cta-hbg: var(--pngrfl-gold);
	--pc-cta-hfg: var(--pngrfl-ink);
	--pc-focus: var(--pngrfl-ink);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px 56px;
	align-items: start;
	color: var(--pc-fg);
}

.pngrfl-pcard--warm { --pc-ph: var(--pngrfl-hairline); }

/* Ink ground: the whole set flips together. */
.pngrfl-pcard--ink {
	--pc-fg: var(--pngrfl-paper);
	--pc-body: color-mix(in srgb, var(--pngrfl-paper) 82%, transparent);
	--pc-line: color-mix(in srgb, var(--pngrfl-paper) 22%, transparent);
	--pc-ph: color-mix(in srgb, var(--pngrfl-paper) 7%, var(--pngrfl-ink));
	--pc-cta-bg: var(--pngrfl-gold);
	--pc-cta-fg: var(--pngrfl-ink);
	--pc-cta-hbg: var(--pngrfl-paper);
	--pc-cta-hfg: var(--pngrfl-ink);
	--pc-focus: var(--pngrfl-gold);
}

.pngrfl-pcard__media {
	aspect-ratio: 4 / 3;
	background: var(--pc-ph);
	overflow: hidden;
	min-width: 0;
}

.pngrfl-pcard--img-right .pngrfl-pcard__media { order: 2; }

.pngrfl-pcard__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pngrfl-pcard__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.pngrfl-pcard__kicker {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pngrfl-accent, var(--pngrfl-red));
}

.pngrfl-pcard__rule {
	width: 28px;
	height: 2px;
	flex: none;
	background: var(--pngrfl-accent, var(--pngrfl-red));
}

.pngrfl-pcard__title {
	margin: 0;
	font-family: var(--pngrfl-sans);
	font-size: clamp(26px, 3.4vw, 44px);
	line-height: 1.02;
	font-weight: 800;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: inherit;
}

.pngrfl-pcard__lead {
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
	font-weight: 600;
}

.pngrfl-pcard__body p {
	margin: 0 0 1.1em;
	font-size: 15px;
	line-height: 1.7;
	color: var(--pc-body);
}

.pngrfl-pcard__body p:last-child { margin-bottom: 0; }

.pngrfl-pcard__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin: 0;
}

.pngrfl-pcard__stats--1 { grid-template-columns: minmax(0, 1fr); max-width: 50%; }
.pngrfl-pcard__stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.pngrfl-pcard__stat {
	border: 1px solid var(--pc-line);
	padding: 18px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

/* Collapse the shared edge so adjacent cells show one rule, not two. */
.pngrfl-pcard__stat + .pngrfl-pcard__stat { border-left: 0; }

.pngrfl-pcard__figure {
	margin: 0;
	font-size: clamp(24px, 2.6vw, 36px);
	font-weight: 800;
	line-height: 1;
	color: var(--pngrfl-accent, var(--pngrfl-red));
	overflow-wrap: anywhere;
}

.pngrfl-pcard__label {
	margin: 0;
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--pc-body);
}

.pngrfl-pcard__cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	box-sizing: border-box;
	padding: 16px 28px;
	background: var(--pc-cta-bg);
	color: var(--pc-cta-fg);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

a.pngrfl-pcard__cta:hover,
a.pngrfl-pcard__cta:focus-visible {
	background: var(--pc-cta-hbg);
	color: var(--pc-cta-hfg);
}

a.pngrfl-pcard__cta:focus-visible {
	outline: 3px solid var(--pc-focus);
	outline-offset: 3px;
}

.pngrfl-pcard__cta.is-pending {
	background: transparent;
	color: var(--pc-body);
	border: 1px solid var(--pc-line);
	flex-wrap: wrap;
	cursor: default;
}

.pngrfl-pcard__state {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.12em;
}

@media (max-width: 767px) {
	.pngrfl-pcard { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	/* Image always above the text on mobile, whichever side it takes on desktop. */
	.pngrfl-pcard--img-right .pngrfl-pcard__media { order: 0; }
	.pngrfl-pcard__cta { align-self: stretch; justify-content: center; text-align: center; }
}

@media (max-width: 560px) {
	.pngrfl-pcard__stats,
	.pngrfl-pcard__stats--1,
	.pngrfl-pcard__stats--2 { grid-template-columns: minmax(0, 1fr); max-width: none; }
	.pngrfl-pcard__stat { flex-direction: row; align-items: baseline; gap: 14px; }
	.pngrfl-pcard__stat + .pngrfl-pcard__stat { border-left: 1px solid var(--pc-line); border-top: 0; }
	.pngrfl-pcard__figure { flex: none; min-width: 5.2em; }
}

/* ---------- Academy map ---------- */

.pngrfl-amap {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.pngrfl-amap__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pngrfl-amap__chip {
	border: 1px solid color-mix(in srgb, var(--pngrfl-chip-text, var(--pngrfl-paper)) 30%, transparent);
	padding: 10px 14px;
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pngrfl-chip-text, var(--pngrfl-paper));
}

.pngrfl-amap__prov { opacity: 0.6; }

.pngrfl-amap__map {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
}

.pngrfl-amap__map svg { display: block; width: 100%; height: 100%; }

.pngrfl-amap__marker {
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--pngrfl-marker, var(--pngrfl-gold));
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--pngrfl-marker, var(--pngrfl-gold)) 30%, transparent);
	transform: translate(-50%, -50%);
}

/* ---------- Word blocks ---------- */

.pngrfl-words {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
}

.pngrfl-words__cell {
	min-width: 0;
	background: var(--pngrfl-words-bg, var(--pngrfl-ink));
}

.pngrfl-words__word,
.pngrfl-words__fixed {
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1;
	overflow-wrap: break-word;
}

.pngrfl-words-widget--single .pngrfl-words__cell {
	border: 3px solid var(--pngrfl-accent, var(--pngrfl-gold));
	padding: 30px 20px;
	display: grid;
	place-items: center;
	text-align: center;
}

.pngrfl-words-widget--single .pngrfl-words__word {
	font-size: clamp(20px, 2.4vw, 30px);
	letter-spacing: -0.01em;
	color: var(--pngrfl-words-text, var(--pngrfl-gold));
}

.pngrfl-words-widget--pairs .pngrfl-words__cell {
	border: 1px solid var(--pngrfl-words-line, color-mix(in srgb, var(--pngrfl-paper) 30%, transparent));
	padding: 30px 22px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pngrfl-words-widget--pairs .pngrfl-words__fixed,
.pngrfl-words-widget--pairs .pngrfl-words__word {
	font-size: clamp(22px, 2.8vw, 34px);
	letter-spacing: -0.015em;
}

.pngrfl-words-widget--pairs .pngrfl-words__fixed { color: var(--pngrfl-paper); }
.pngrfl-words-widget--pairs .pngrfl-words__word { color: var(--pngrfl-words-text, var(--pngrfl-gold)); }

@media (max-width: 767px) {
	.pngrfl-words-widget--pairs .pngrfl-words__cell { padding: 22px 16px; }
	.pngrfl-words-widget--pairs .pngrfl-words__fixed,
	.pngrfl-words-widget--pairs .pngrfl-words__word { font-size: clamp(18px, 5.2vw, 22px); }
	.pngrfl-words-widget--single .pngrfl-words__cell { padding: 24px 12px; }
}

/* ---------- Pathway CTA grid ---------- */

/* The column count follows how many cards there actually are, not a fixed
   six. The widget writes it as a custom property, because repeat() needs a
   literal integer and cannot take a min() or a calc().

   Fixed at six, a four-card grid filled two thirds of the row and left a
   hole on the right, and each card was squeezed to a sixth of the width —
   narrow enough that the copy wrapped every three words and a word as
   ordinary as "Volunteer" broke in half. */
.pngrfl-ctas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--pngrfl-ctas-lg, 6), minmax(0, 1fr));
	gap: 14px;
}

.pngrfl-ctas__cell { display: flex; min-width: 0; }

.pngrfl-cta-card {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 150px;
	box-sizing: border-box;
	padding: 24px 20px;
	background: var(--pngrfl-card);
	border-top: 3px solid var(--pngrfl-cta-accent, var(--pngrfl-red));
	color: var(--pngrfl-ink);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pngrfl-cta-card__tier {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pngrfl-cta-accent, var(--pngrfl-red));
}

.pngrfl-cta-card__name {
	margin-top: auto;
	font-size: clamp(15px, 1.3vw, 18px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

.pngrfl-cta-card__state {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
}

a.pngrfl-cta-card:hover,
a.pngrfl-cta-card:focus-visible {
	background: var(--pngrfl-ink);
	color: var(--pngrfl-paper);
}

a.pngrfl-cta-card:focus-visible {
	outline: 3px solid var(--pngrfl-ink);
	outline-offset: 3px;
}

/* Not built yet: flat, not clickable, state line says so. */
.pngrfl-cta-card.is-pending {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--pngrfl-hairline-strong);
	cursor: default;
}

.pngrfl-cta-card.is-pending .pngrfl-cta-card__state { color: var(--pngrfl-body); }

/* Each step down is capped at the card count too, so three cards never
   become three columns and then a lone one on a second row. */
@media (max-width: 1279px) {
	.pngrfl-ctas { grid-template-columns: repeat(var(--pngrfl-ctas-md, 3), minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.pngrfl-ctas { grid-template-columns: repeat(var(--pngrfl-ctas-sm, 2), minmax(0, 1fr)); gap: 10px; }
	.pngrfl-cta-card { min-height: 128px; padding: 20px 16px; }
}

@media (max-width: 479px) {
	.pngrfl-ctas { grid-template-columns: minmax(0, 1fr); }
	.pngrfl-cta-card { min-height: 0; }
}

/* Graduate list: gold index on the dark numbered lines. */
.pngrfl-grad-list .pngrfl-numbered__index { color: var(--pngrfl-gold); }

/* Stats strip, ruled variant (Pathways Academy stats): 1px rules on each
   cell instead of the 2px container gap, per the grid rule. */
.pngrfl-stats-ruled .pngrfl-stats { gap: 0; background: none; }
.pngrfl-stats-ruled .pngrfl-stat {
	border: 1px solid color-mix(in srgb, var(--pngrfl-paper) 20%, transparent);
	padding: 24px 20px;
	gap: 8px;
}
.pngrfl-stats-ruled .pngrfl-stat__number { font-size: clamp(30px, 3.4vw, 48px); line-height: 1; }
.pngrfl-stats-ruled .pngrfl-stat__label { font-size: 10px; letter-spacing: 0.14em; }

/* Three stats share a narrow text column: step the figure down so "22-week"
   and similar hold one line. */
.pngrfl-pcard__stats--3 .pngrfl-pcard__figure { font-size: clamp(22px, 2vw, 30px); }

/* Two streams side by side: equal-height cards. */
.elementor-widget-pngrfl-pathway-ladder:has(.pngrfl-pl--stream) { flex-grow: 1; }

/* ===========================================================================
   Watch page (233) — video hero, filter bar, rails, cards, lightbox.
   Tokens only. Competition accents arrive as var(--e-global-color-<id>) from
   each term's accent_color.
   =========================================================================== */

.pngrfl-vhero, .pngrfl-vfilter, .pngrfl-vresults, .pngrfl-vrail, .pngrfl-vlb {
	font-family: var(--pngrfl-sans);
	color: var(--pngrfl-paper);
	--pv-line: color-mix(in srgb, var(--pngrfl-paper) 12%, transparent);
	--pv-line-strong: color-mix(in srgb, var(--pngrfl-paper) 30%, transparent);
	--pv-muted: color-mix(in srgb, var(--pngrfl-paper) 72%, transparent);
	--pv-card: color-mix(in srgb, var(--pngrfl-paper) 3%, var(--pngrfl-ink));
	--pv-stripe-a: color-mix(in srgb, var(--pngrfl-paper) 7%, var(--pngrfl-ink));
	--pv-stripe-b: color-mix(in srgb, var(--pngrfl-paper) 3.5%, var(--pngrfl-ink));
	--pv-inset: max(5vw, calc((100% - 1440px) / 2));
}

.pngrfl-vhero .screen-reader-text, .pngrfl-vfilter .screen-reader-text,
.pngrfl-vrail .screen-reader-text, .pngrfl-vlb .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.pngrfl-vhero button, .pngrfl-vfilter button, .pngrfl-vrail button, .pngrfl-vlb button {
	font-family: inherit; border-radius: 0; box-shadow: none; text-shadow: none;
}

.pngrfl-vhero :focus-visible, .pngrfl-vfilter :focus-visible,
.pngrfl-vrail :focus-visible, .pngrfl-vlb :focus-visible {
	outline: 3px solid var(--pngrfl-gold);
	outline-offset: 2px;
}

/* ---------- Thumbnail (shared by hero + cards) ---------- */

.pngrfl-vthumb {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-image: repeating-linear-gradient(135deg, var(--pv-stripe-a) 0 12px, var(--pv-stripe-b) 12px 24px);
}

.pngrfl-vthumb__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.pngrfl-vthumb__play {
	position: relative;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--pngrfl-ink) 72%, transparent);
	border: 1px solid color-mix(in srgb, var(--pngrfl-paper) 50%, transparent);
	display: grid; place-items: center;
	transition: background-color 0.15s ease;
}

.pngrfl-vthumb__play::after {
	content: "";
	width: 0; height: 0; margin-left: 4px;
	border-left: 13px solid var(--pngrfl-paper);
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
}

.pngrfl-vthumb__play.is-large {
	width: 84px; height: 84px;
	background: var(--pngrfl-red);
	border: 0;
}

.pngrfl-vthumb__play.is-large::after {
	margin-left: 6px;
	border-left-width: 26px;
	border-top-width: 16px;
	border-bottom-width: 16px;
}

.pngrfl-vthumb__duration {
	position: absolute; right: 8px; bottom: 8px;
	background: color-mix(in srgb, var(--pngrfl-ink-black, var(--pngrfl-ink)) 86%, transparent);
	color: var(--pngrfl-paper);
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	padding: 4px 7px;
}

.pngrfl-vthumb__flag {
	position: absolute; top: 0; left: 0;
	background: var(--pngrfl-red);
	color: var(--pngrfl-paper);
	font-family: var(--pngrfl-mono);
	font-size: 9px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 6px 9px;
}

/* ---------- Hero ---------- */

.pngrfl-vhero {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 1440px;
	margin: 0 auto;
	background: var(--pngrfl-ink);
}

.pngrfl-vhero__media {
	border: 0; padding: 0; margin: 0;
	width: 100%;
	cursor: pointer;
	color: inherit;
}

.pngrfl-vhero__media:hover .pngrfl-vthumb__img { transform: scale(1.02); }
.pngrfl-vhero__media:hover .pngrfl-vthumb__play { background: var(--pngrfl-gold); }

.pngrfl-vhero__media .pngrfl-vthumb__duration { right: 14px; bottom: 14px; font-size: 12px; padding: 7px 11px; }
.pngrfl-vhero__media .pngrfl-vthumb__flag { font-size: 10px; padding: 9px 13px; }

.pngrfl-vhero__text {
	padding: clamp(28px, 4vw, 56px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 22px;
	min-width: 0;
}

.pngrfl-vhero__meta, .pngrfl-vlb__meta {
	display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pv-muted);
}

.pngrfl-vtag {
	background: var(--vc-accent, var(--pngrfl-gold));
	color: var(--pngrfl-paper);
	padding: 7px 11px;
}

.pngrfl-vtag.is-ink { color: var(--pngrfl-ink); }

.pngrfl-vhero__title {
	margin: 0;
	font-family: var(--pngrfl-sans);
	font-size: clamp(26px, 3.1vw, 46px);
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--pngrfl-paper);
	overflow-wrap: break-word;
}

.pngrfl-vhero__summary {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	max-width: 54ch;
	color: color-mix(in srgb, var(--pngrfl-paper) 82%, transparent);
}

.pngrfl-vhero__cta {
	align-self: flex-start;
	display: inline-flex; align-items: center; gap: 12px;
	min-height: 48px;
	padding: 17px 30px;
	border: 0;
	background: var(--pngrfl-red);
	color: var(--pngrfl-paper);
	font-size: 12px; font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pngrfl-vhero__cta:hover, .pngrfl-vhero__cta:focus-visible {
	background: var(--pngrfl-gold);
	color: var(--pngrfl-ink);
}

@media (max-width: 767px) {
	.pngrfl-vhero { grid-template-columns: minmax(0, 1fr); }
	.pngrfl-vhero__cta { align-self: stretch; justify-content: center; }
	.pngrfl-vthumb__play.is-large { width: 64px; height: 64px; }
}

/* ---------- Filter bar ---------- */

.pngrfl-vfilter {
	background: var(--pngrfl-ink);
	border-top: 1px solid var(--pv-line);
	border-bottom: 1px solid var(--pv-line);
	padding: 18px var(--pv-inset);
	display: flex;
	flex-direction: column;
	gap: 14px;
	scroll-margin-top: var(--pngrfl-watch-sticky-top, 0px);
}

.pngrfl-vfilter__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }

.pngrfl-vfilter__title {
	margin: 0;
	font-size: clamp(22px, 2.6vw, 34px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--pngrfl-paper);
}

.pngrfl-vfilter__count {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pngrfl-gold);
}

.pngrfl-vfilter__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.pngrfl-vfilter__search {
	flex: 1 1 220px;
	min-width: 0;
	min-height: 48px;
	box-sizing: border-box;
	background: var(--pv-card);
	border: 1px solid color-mix(in srgb, var(--pngrfl-paper) 22%, transparent);
	border-radius: 0;
	color: var(--pngrfl-paper);
	font-family: var(--pngrfl-sans);
	font-size: 16px;
	padding: 12px 15px;
}

.pngrfl-vfilter__search::placeholder { color: color-mix(in srgb, var(--pngrfl-paper) 60%, transparent); }
.pngrfl-vfilter__search:focus { border-color: var(--pngrfl-gold); outline: none; }

.pngrfl-vfilter__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.pngrfl-vchip {
	min-height: 44px;
	padding: 12px 15px;
	background: transparent;
	border: 1px solid var(--pv-line-strong);
	color: var(--pngrfl-paper);
	font-family: var(--pngrfl-mono) !important;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	line-height: 1.2;
}

.pngrfl-vchip:hover { border-color: var(--pngrfl-gold); color: var(--pngrfl-gold); background: transparent; }

.pngrfl-vchip[aria-pressed="true"] {
	background: var(--pngrfl-gold);
	border-color: var(--pngrfl-gold);
	color: var(--pngrfl-ink);
}

/* Chips scroll sideways on phones instead of stacking five rows deep. */
@media (max-width: 767px) {
	.pngrfl-vfilter { padding-top: 14px; padding-bottom: 14px; gap: 10px; }
	.pngrfl-vfilter__controls { flex-direction: column; align-items: stretch; }
	.pngrfl-vfilter__search { flex: none; width: 100%; }
	.pngrfl-vfilter__chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		max-width: 100%;
	}
	.pngrfl-vfilter__chips::-webkit-scrollbar { display: none; }
	.pngrfl-vchip { flex: none; }
}

/* ---------- Rails ---------- */

.pngrfl-vrail {
	background: var(--pngrfl-ink);
	border-bottom: 1px solid color-mix(in srgb, var(--pngrfl-paper) 10%, transparent);
	padding: 6vh 0 6vh var(--pv-inset);
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.pngrfl-vrail--deep { background: var(--pngrfl-ink-black, var(--pngrfl-ink)); }
.pngrfl-vrail[hidden] { display: none; }

.pngrfl-vrail__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px 20px;
	padding-right: var(--pv-inset);
}

.pngrfl-vrail__titles { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.pngrfl-vrail__kicker { font-size: 10px; letter-spacing: 0.2em; gap: 12px; color: var(--pv-muted); }
.pngrfl-vrail__kicker .pngrfl-eyebrow__rule { width: 24px; background: var(--vr-accent, var(--pngrfl-gold)); }

.pngrfl-vrail__title {
	margin: 0;
	font-family: var(--pngrfl-sans);
	font-size: clamp(22px, 2.8vw, 38px);
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--pngrfl-paper);
}

.pngrfl-vrail__actions { display: flex; align-items: center; gap: 8px; flex: none; }

.pngrfl-vrail__arrow, .pngrfl-vrail__all {
	min-height: 44px;
	min-width: 44px;
	box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	border: 1px solid var(--pv-line-strong);
	background: transparent;
	color: var(--pngrfl-paper);
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pngrfl-vrail__all { padding: 12px 18px; }
.pngrfl-vrail__arrow { padding: 0; font-size: 16px; }
.pngrfl-vrail__arrow[hidden] { display: none; }
.pngrfl-vrail__arrow:disabled { opacity: 0.35; cursor: default; }

.pngrfl-vrail__all:hover, .pngrfl-vrail__all:focus-visible,
.pngrfl-vrail__arrow:not(:disabled):hover {
	background: var(--pngrfl-gold);
	border-color: var(--pngrfl-gold);
	color: var(--pngrfl-ink);
}

.pngrfl-vrail__track {
	list-style: none;
	margin: 0;
	padding: 4px var(--pv-inset) 16px 4px;
	margin-left: -4px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(268px, calc((100% - var(--pv-inset) - 3 * 16px) / 4));
	gap: 16px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 4px;
	scrollbar-width: thin;
	scrollbar-color: var(--pv-line-strong) transparent;
}

.pngrfl-vrail__track::-webkit-scrollbar { height: 6px; }
.pngrfl-vrail__track::-webkit-scrollbar-track { background: color-mix(in srgb, var(--pngrfl-paper) 8%, transparent); }
.pngrfl-vrail__track::-webkit-scrollbar-thumb { background: var(--pv-line-strong); }

.pngrfl-vcard-cell { display: flex; min-width: 0; scroll-snap-align: start; }
.pngrfl-vcard-cell[hidden] { display: none; }

/* ---------- Card ---------- */

.pngrfl-vcard {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	text-align: left;
	background: var(--pv-card);
	border: 1px solid var(--pv-line);
	color: var(--pngrfl-paper);
	cursor: pointer;
	transition: border-color 0.15s ease;
	font-weight: inherit;
	white-space: normal;
}

.pngrfl-vcard:hover, .pngrfl-vcard:focus-visible { border-color: var(--pngrfl-gold); background: var(--pv-card); color: var(--pngrfl-paper); }
.pngrfl-vcard:hover .pngrfl-vthumb__img { transform: scale(1.03); }
.pngrfl-vcard:hover .pngrfl-vthumb__play { background: var(--pngrfl-red); border-color: var(--pngrfl-red); }
.pngrfl-vcard .pngrfl-vthumb { width: 100%; }

.pngrfl-vcard__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px; }

.pngrfl-vcard__comp {
	display: flex; align-items: center; gap: 8px;
	font-family: var(--pngrfl-mono);
	font-size: 9px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pv-muted);
}

.pngrfl-vcard__comp::before {
	content: "";
	width: 14px; height: 2px; flex: none;
	background: var(--vc-accent, var(--pngrfl-gold));
}

.pngrfl-vcard__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: none;
	letter-spacing: 0;
	overflow-wrap: break-word;
}

.pngrfl-vcard__date {
	margin-top: auto;
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--pngrfl-paper) 65%, transparent);
}

@media (max-width: 767px) {
	.pngrfl-vrail { padding-top: 5vh; padding-bottom: 5vh; }
	.pngrfl-vrail__track { grid-auto-columns: 78%; }
	.pngrfl-vrail__all { padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.pngrfl-vthumb__img { transition: none; }
	.pngrfl-vcard:hover .pngrfl-vthumb__img, .pngrfl-vhero__media:hover .pngrfl-vthumb__img { transform: none; }
}

/* ---------- Results + empty state ---------- */

.pngrfl-vresults__empty {
	margin: 0;
	background: var(--pngrfl-ink);
	padding: 12vh var(--pv-inset);
	text-align: center;
	font-size: 17px;
	color: var(--pv-muted);
}

.pngrfl-vresults__empty[hidden] { display: none; }

/* ---------- Lightbox ---------- */

html.pngrfl-vlb-open { overflow: hidden; }

.pngrfl-vlb {
	position: fixed; inset: 0;
	z-index: 100000;
	display: flex; align-items: center; justify-content: center;
	padding: 4vh 5vw;
}

.pngrfl-vlb[hidden] { display: none; }

.pngrfl-vlb__backdrop {
	position: absolute; inset: 0;
	background: color-mix(in srgb, var(--pngrfl-ink-black, var(--pngrfl-ink)) 92%, transparent);
}

.pngrfl-vlb__panel {
	position: relative;
	width: 100%;
	max-width: 1100px;
	max-height: 92vh;
	overflow-y: auto;
	background: var(--pngrfl-ink);
	border: 1px solid color-mix(in srgb, var(--pngrfl-paper) 20%, transparent);
}

.pngrfl-vlb__panel:focus { outline: none; }

.pngrfl-vlb__player {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--pngrfl-ink-black, var(--pngrfl-ink));
}

.pngrfl-vlb__frame, .pngrfl-vlb__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pngrfl-vlb__frame { display: grid; place-items: center; }

.pngrfl-vlb__external { color: var(--pngrfl-gold); font-family: var(--pngrfl-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }

.pngrfl-vlb__close {
	position: absolute; top: 0; right: 0;
	z-index: 1;
	min-height: 44px; min-width: 44px;
	padding: 13px 16px;
	border: 0;
	background: var(--pngrfl-red);
	color: var(--pngrfl-paper);
	font-family: var(--pngrfl-mono) !important;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.pngrfl-vlb__close:hover, .pngrfl-vlb__close:focus-visible { background: var(--pngrfl-gold); color: var(--pngrfl-ink); }

.pngrfl-vlb__body { padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.pngrfl-vlb__meta { letter-spacing: 0.16em; }
.pngrfl-vlb__meta [hidden] { display: none; }

.pngrfl-vlb__title {
	margin: 0;
	font-family: var(--pngrfl-sans);
	font-size: clamp(20px, 2.6vw, 32px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--pngrfl-paper);
	overflow-wrap: break-word;
}

.pngrfl-vlb__summary { margin: 0; font-size: 15px; line-height: 1.7; max-width: 70ch; color: color-mix(in srgb, var(--pngrfl-paper) 80%, transparent); }
.pngrfl-vlb__summary[hidden] { display: none; }

.pngrfl-vlb__nav {
	display: flex; flex-wrap: wrap; gap: 10px;
	border-top: 1px solid color-mix(in srgb, var(--pngrfl-paper) 16%, transparent);
	padding-top: 18px;
}

.pngrfl-vlb__step {
	min-height: 44px;
	padding: 13px 18px;
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--pngrfl-paper) 35%, transparent);
	color: var(--pngrfl-paper);
	font-family: var(--pngrfl-mono) !important;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

.pngrfl-vlb__step:hover, .pngrfl-vlb__step:focus-visible { background: var(--pngrfl-paper); color: var(--pngrfl-ink); }

@media (max-width: 767px) {
	.pngrfl-vlb { padding: 0; align-items: stretch; }
	.pngrfl-vlb__panel { max-height: none; height: 100%; border: 0; }
	.pngrfl-vlb__body { padding: 20px 18px; }
	.pngrfl-vlb__step { flex: 1 1 0; justify-content: center; }
}

.pngrfl-vlb-placeholder {
	padding: 14px;
	border: 1px solid var(--pngrfl-hairline-strong);
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	color: var(--pngrfl-body);
}

/* ---------- Watch: light theme ----------
   Applied by the class `pngrfl-watch-light` on the page's containers (remove
   it in Elementor → Advanced → CSS Classes to return to the ink version).
   Paper / Paper Alt grounds, white cards, ink text. The lightbox stays dark. */

.pngrfl-watch-light .pngrfl-vhero,
.pngrfl-watch-light .pngrfl-vfilter,
.pngrfl-watch-light .pngrfl-vresults,
.pngrfl-watch-light .pngrfl-vrail {
	color: var(--pngrfl-ink);
	--pv-line: var(--pngrfl-hairline);
	--pv-line-strong: var(--pngrfl-hairline-strong);
	--pv-muted: var(--pngrfl-body);
	--pv-card: var(--pngrfl-card);
	--pv-stripe-a: var(--pngrfl-paper-alt);
	--pv-stripe-b: var(--pngrfl-zebra);
}

.pngrfl-watch-light :is(.pngrfl-vhero, .pngrfl-vfilter, .pngrfl-vrail) :focus-visible { outline-color: var(--pngrfl-red); }

/* Hero */
.pngrfl-watch-light .pngrfl-vhero { background: var(--pngrfl-paper); }
.pngrfl-watch-light .pngrfl-vhero__title { color: var(--pngrfl-ink); }
.pngrfl-watch-light .pngrfl-vhero__summary { color: var(--pngrfl-body); }
.pngrfl-watch-light .pngrfl-vhero__meta { color: var(--pngrfl-body); }
.pngrfl-watch-light .pngrfl-vhero__cta:hover,
.pngrfl-watch-light .pngrfl-vhero__cta:focus-visible { background: var(--pngrfl-ink); color: var(--pngrfl-paper); }

/* Filter bar */
.pngrfl-watch-light .pngrfl-vfilter { background: var(--pngrfl-paper); }
.pngrfl-watch-light .pngrfl-vfilter__title { color: var(--pngrfl-ink); }
.pngrfl-watch-light .pngrfl-vfilter__count { color: var(--pngrfl-red); }
.pngrfl-watch-light .pngrfl-vfilter__search {
	background: var(--pngrfl-card);
	border-color: var(--pngrfl-hairline-strong);
	color: var(--pngrfl-ink);
}
.pngrfl-watch-light .pngrfl-vfilter__search::placeholder { color: var(--pngrfl-muted); }
.pngrfl-watch-light .pngrfl-vfilter__search:focus { border-color: var(--pngrfl-ink); }
.pngrfl-watch-light .pngrfl-vchip { color: var(--pngrfl-ink); border-color: var(--pngrfl-hairline-strong); }
.pngrfl-watch-light .pngrfl-vchip:hover { color: var(--pngrfl-red); border-color: var(--pngrfl-red); }
.pngrfl-watch-light .pngrfl-vchip[aria-pressed="true"] {
	background: var(--pngrfl-ink);
	border-color: var(--pngrfl-ink);
	color: var(--pngrfl-paper);
}

/* Rails: Paper, alternating with Paper Alt */
.pngrfl-watch-light .pngrfl-vrail { background: var(--pngrfl-paper); border-bottom-color: var(--pngrfl-hairline); }
.pngrfl-watch-light .pngrfl-vrail--deep { background: var(--pngrfl-paper-alt); }
.pngrfl-watch-light .pngrfl-vrail__title { color: var(--pngrfl-ink); }
.pngrfl-watch-light .pngrfl-vrail__arrow,
.pngrfl-watch-light .pngrfl-vrail__all { color: var(--pngrfl-ink); border-color: var(--pngrfl-hairline-strong); }
.pngrfl-watch-light .pngrfl-vrail__all:hover,
.pngrfl-watch-light .pngrfl-vrail__all:focus-visible,
.pngrfl-watch-light .pngrfl-vrail__arrow:not(:disabled):hover {
	background: var(--pngrfl-ink);
	border-color: var(--pngrfl-ink);
	color: var(--pngrfl-paper);
}
.pngrfl-watch-light .pngrfl-vrail__track { scrollbar-color: var(--pngrfl-hairline-strong) transparent; }
.pngrfl-watch-light .pngrfl-vrail__track::-webkit-scrollbar-track { background: var(--pngrfl-hairline); }
.pngrfl-watch-light .pngrfl-vrail__track::-webkit-scrollbar-thumb { background: var(--pngrfl-muted); }

/* Cards */
.pngrfl-watch-light .pngrfl-vcard { background: var(--pngrfl-card); border-color: var(--pngrfl-hairline); color: var(--pngrfl-ink); }
.pngrfl-watch-light .pngrfl-vcard:hover,
.pngrfl-watch-light .pngrfl-vcard:focus-visible { background: var(--pngrfl-card); border-color: var(--pngrfl-ink); color: var(--pngrfl-ink); }
.pngrfl-watch-light .pngrfl-vcard__date { color: var(--pngrfl-body); }

/* Empty state */
.pngrfl-watch-light .pngrfl-vresults__empty { background: var(--pngrfl-paper); color: var(--pngrfl-body); }

/* ===========================================================================
   Home landing — MySideline draw card + ladder. Tokens only.
   =========================================================================== */

.pngrfl-draw-card,
.pngrfl-ladder-block {
	font-family: var(--pngrfl-sans);
	--pd-rule: color-mix(in srgb, var(--pngrfl-ink) 16%, transparent);
	--pl-rule: color-mix(in srgb, var(--pngrfl-paper) 16%, transparent);
}

/* ---------- Draw card ---------- */

.pngrfl-draw-card {
	background: var(--pngrfl-draw-bg, var(--pngrfl-gold));
	display: flex;
	align-items: stretch;
	border-top: 1px solid var(--pd-rule);
	border-bottom: 1px solid var(--pd-rule);
}

.pngrfl-draw-card__label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 18px;
	background: var(--pngrfl-draw-live, var(--pngrfl-red));
	color: var(--pngrfl-paper);
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	min-height: 44px;
	flex: none;
}

.pngrfl-draw-card__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pngrfl-paper);
	display: block;
	flex: none;
}

.pngrfl-draw-card__strip {
	display: flex;
	overflow-x: auto;
	flex: 1;
	min-width: 0;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.pngrfl-draw-card__strip:focus-visible {
	outline: 3px solid var(--pngrfl-ink);
	outline-offset: -3px;
}

.pngrfl-draw-card__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 22px;
	border-right: 1px solid var(--pd-rule);
	flex: none;
	min-width: 190px;
}

.pngrfl-draw-card__item--skeleton {
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--pngrfl-ink) 6%, transparent) 25%,
		color-mix(in srgb, var(--pngrfl-ink) 12%, transparent) 37%,
		color-mix(in srgb, var(--pngrfl-ink) 6%, transparent) 63%);
	background-size: 400% 100%;
	animation: pngrfl-draw-shimmer 1.4s ease infinite;
	min-height: 58px;
}

@keyframes pngrfl-draw-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
	.pngrfl-draw-card__item--skeleton,
	.pngrfl-ladder-block__row--skeleton { animation: none; }
}

.pngrfl-draw-card__state {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--pngrfl-mono);
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--pngrfl-ink) 70%, transparent);
}

.pngrfl-draw-card__state--upcoming { color: var(--pngrfl-ink); }
.pngrfl-draw-card__state--live { color: var(--pngrfl-red); font-weight: 500; }

.pngrfl-draw-card__kickoff { color: color-mix(in srgb, var(--pngrfl-ink) 62%, transparent); letter-spacing: 0.08em; }

.pngrfl-draw-card__pulse {
	width: 7px; height: 7px; flex: none;
	border-radius: 50%;
	background: var(--pngrfl-red);
	animation: pngrfl-draw-pulse 1.6s ease-in-out infinite;
}

@keyframes pngrfl-draw-pulse { 50% { opacity: 0.25; } }

.pngrfl-draw-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	font-size: 13px;
	font-weight: 700;
	color: var(--pngrfl-ink);
}

.pngrfl-draw-card__row span:last-child {
	font-family: var(--pngrfl-mono);
	font-weight: 500;
	color: var(--pngrfl-red);
	flex: none;
}

.pngrfl-draw-card__foot {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 18px;
	flex: none;
	border-left: 1px solid var(--pd-rule);
}

.pngrfl-draw-card__updated {
	font-family: var(--pngrfl-mono);
	font-size: 9px;
	letter-spacing: 0.1em;
	color: color-mix(in srgb, var(--pngrfl-ink) 60%, transparent);
}

.pngrfl-draw-card__all {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pngrfl-ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
}

.pngrfl-draw-card__all:hover { color: var(--pngrfl-red); }

/* The foot drops under the strip on phones so the strip keeps full width. */
@media (max-width: 767px) {
	.pngrfl-draw-card { flex-wrap: wrap; }
	.pngrfl-draw-card__label { width: 100%; }
	.pngrfl-draw-card__strip { order: 3; width: 100%; flex: 1 0 100%; }
	.pngrfl-draw-card__foot {
		order: 4; width: 100%; justify-content: space-between;
		border-left: 0; border-top: 1px solid var(--pd-rule); padding: 8px 18px;
	}
}

/* ---------- Ladder ---------- */

.pngrfl-ladder-block {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.pngrfl-ladder-block__tabs {
	display: flex;
	gap: 2px;
	flex-wrap: wrap;
	background: color-mix(in srgb, var(--pngrfl-paper) 20%, transparent);
	border: 1px solid color-mix(in srgb, var(--pngrfl-paper) 20%, transparent);
	align-self: flex-start;
}

.pngrfl-ladder-block__tab {
	appearance: none;
	border: 0;
	cursor: pointer;
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 13px 20px;
	min-height: 44px;
	background: var(--pngrfl-ink);
	color: var(--pngrfl-paper);
}

.pngrfl-ladder-block__tab.is-active {
	background: var(--pngrfl-gold);
	color: var(--pngrfl-ink);
}

.pngrfl-ladder-block__tab:focus-visible {
	outline: 3px solid var(--pngrfl-gold);
	outline-offset: 2px;
}

.pngrfl-ladder-block__table {
	display: none;
	flex-direction: column;
	gap: 1px;
	background: var(--pl-rule);
	border: 1px solid var(--pl-rule);
}

.pngrfl-ladder-block__table.is-active { display: flex; }
.pngrfl-ladder-block__table[hidden] { display: none; }

.pngrfl-ladder-block__head,
.pngrfl-ladder-block__row {
	display: grid;
	grid-template-columns: 44px minmax(120px, 1fr) minmax(0, 52px) minmax(0, 52px) minmax(0, 52px) minmax(0, 64px);
	gap: 12px;
	align-items: center;
	padding: 14px 20px;
}

.pngrfl-ladder-block__head {
	background: color-mix(in srgb, var(--pngrfl-ink) 92%, #000);
	font-family: var(--pngrfl-mono);
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--pngrfl-paper) 55%, transparent);
}

.pngrfl-ladder-block__head abbr { text-decoration: none; border: 0; }
.pngrfl-ladder-block__head span:not(:nth-child(-n+2)),
.pngrfl-ladder-block__row span:not(:nth-child(-n+2)) { text-align: right; }

.pngrfl-ladder-block__row {
	background: var(--pngrfl-ink-deep, var(--pngrfl-ink));
	color: var(--pngrfl-paper);
	border-left: 3px solid transparent;
	font-family: var(--pngrfl-mono);
	font-size: 13px;
}

.pngrfl-ladder-block__club {
	font-family: var(--pngrfl-sans);
	font-size: 15px;
	font-weight: 700;
	min-width: 0;
	overflow-wrap: anywhere;
}

.pngrfl-ladder-block__pts { color: var(--pngrfl-gold); font-size: 14px; font-weight: 500; }

.pngrfl-ladder-block__row.is-highlighted { border-left-color: var(--pngrfl-ladder-highlight, var(--pngrfl-red)); }
.pngrfl-ladder-block__row.is-highlighted span:first-child { color: var(--pngrfl-gold); }

.pngrfl-ladder-block__row--skeleton {
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--pngrfl-paper) 4%, transparent) 25%,
		color-mix(in srgb, var(--pngrfl-paper) 9%, transparent) 37%,
		color-mix(in srgb, var(--pngrfl-paper) 4%, transparent) 63%);
	background-size: 400% 100%;
	animation: pngrfl-draw-shimmer 1.4s ease infinite;
	min-height: 46px;
}

.pngrfl-ladder-block__note {
	margin: 0;
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	line-height: 1.6;
	letter-spacing: 0.08em;
	color: color-mix(in srgb, var(--pngrfl-paper) 60%, transparent);
}

@media (max-width: 560px) {
	.pngrfl-ladder-block__head,
	.pngrfl-ladder-block__row {
		grid-template-columns: 34px minmax(90px, 1fr) 34px 34px 34px 44px;
		gap: 8px;
		padding: 12px 12px;
	}
	.pngrfl-ladder-block__club { font-size: 14px; }
}

/* CTA grid on an ink ground (home "Get Involved"), with an optional line
   under the name. Hover inverts to gold, as the reference's panels do. */
.pngrfl-ctas-widget--ink .pngrfl-cta-card {
	background: var(--pngrfl-ink);
	color: var(--pngrfl-paper);
	min-height: 200px;
	gap: 12px;
}
.pngrfl-ctas-widget--ink a.pngrfl-cta-card:hover,
.pngrfl-ctas-widget--ink a.pngrfl-cta-card:focus-visible {
	background: var(--pngrfl-gold);
	color: var(--pngrfl-ink);
}
.pngrfl-ctas-widget--ink a.pngrfl-cta-card:hover .pngrfl-cta-card__tier,
.pngrfl-ctas-widget--ink a.pngrfl-cta-card:focus-visible .pngrfl-cta-card__tier { color: var(--pngrfl-ink); }
.pngrfl-ctas-widget--ink .pngrfl-cta-card.is-pending { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pngrfl-paper) 22%, transparent); background: transparent; }
.pngrfl-ctas-widget--ink .pngrfl-cta-card.is-pending .pngrfl-cta-card__state { color: color-mix(in srgb, var(--pngrfl-paper) 70%, transparent); }
.pngrfl-ctas-widget--ink .pngrfl-cta-card__name { margin-top: 0; font-size: clamp(17px, 1.6vw, 21px); }
/* Capped so a grid of only two or three cards does not stretch the copy
   into a line too long to track back from. */
.pngrfl-cta-card__text { font-size: 14px; line-height: 1.6; font-family: var(--pngrfl-sans); max-width: 34ch; }
.pngrfl-ctas-widget--ink .pngrfl-cta-card__state { margin-top: auto; }

/* Rail with no ground of its own — used on the home page's gold video strip.
   The class lands on Elementor's widget wrapper, so the rail it paints is a
   descendant; `--ink`/`--deep` are also cleared because watch.js alternates
   those on every rail it finds, including this one. */
.pngrfl-vrail--bare,
.pngrfl-vrail--bare .pngrfl-vrail,
.pngrfl-vrail--bare .pngrfl-vrail--ink,
.pngrfl-vrail--bare .pngrfl-vrail--deep {
	background: transparent;
	border-bottom: 0;
	padding-left: 0;
	padding-top: 0;
	padding-bottom: 0;
}
.pngrfl-vrail--bare .pngrfl-vrail__track { padding-right: 0; }

/* ---------- Home landing: loop-item cards, filter chips, small links ------- */

/* Mono "All news →" link with the red rule under it. */
.pngrfl-monolink .elementor-button {
	background: transparent !important;
	border-bottom: 2px solid var(--pngrfl-red);
	border-radius: 0;
	padding-inline: 0;
	min-height: 44px;
}
.pngrfl-monolink .elementor-button:hover { color: var(--pngrfl-red) !important; }

/* Featured flag on the hero. */
.pngrfl-flag-red .elementor-heading-title {
	background: var(--pngrfl-red);
	color: var(--pngrfl-paper);
	padding: 5px 10px;
	display: inline-block;
}
.pngrfl-home-flags .elementor-widget { width: auto; }

/* Side story column (QRL pattern): a single white panel, edge to edge, split
   into as many equal rows as posts_per_page on the loop grid (4) so the
   column always fills the same height as the hero beside it — never a gap of
   bare gold showing through at the bottom. */
.pngrfl-home-hero { height: 100%; }
.pngrfl-home-secondary {
	height: 100%;
	/* The rows paint themselves; this is the backstop so the column still
	   reads as one amber panel if a story is ever removed. */
	background: var(--pngrfl-gold-deep, var(--pngrfl-card));
}
.pngrfl-home-secondary .elementor-loop-container {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(4, 1fr);
	height: 100%;
	gap: 0;
}
.pngrfl-home-hero [data-elementor-type="loop-item"] { height: 100%; }
.pngrfl-home-secondary [data-elementor-type="loop-item"] { height: 100%; min-height: 0; }

.pngrfl-home-srow {
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
	border-bottom: 1px solid var(--pngrfl-hairline);
}
.e-loop-item:last-child .pngrfl-home-srow { border-bottom: 0; }

.pngrfl-home-srow__text { justify-content: center; overflow: hidden; }
.pngrfl-home-srow__text .elementor-widget-theme-post-title .elementor-heading-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Category tag: same red flag treatment as the hero's "Featured" flag. */
.pngrfl-tag-red .elementor-heading-title {
	background: var(--pngrfl-red);
	color: var(--pngrfl-paper);
	padding: 4px 8px;
	display: inline-block;
	font-size: 10px;
}
.pngrfl-home-srow__date .elementor-heading-title { color: var(--pngrfl-muted); }

.pngrfl-home-srow__img img {
	width: 108px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	border-radius: 6px;
}
.pngrfl-home-srow__img { flex: none; }

@media (max-width: 767px) {
	/* The grid above assumes 4 equal rows against the hero's fixed height;
	   once the hero stacks on top instead of beside it, let rows size to
	   their own content again. */
	.pngrfl-home-secondary .elementor-loop-container { grid-template-rows: none; height: auto; }
	.pngrfl-home-secondary { height: auto; }
}

/* News card: fixed image ratio so a mixed library still lines up. */
.pngrfl-newscard__img img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}
.pngrfl-newscard { transition: border-color 0.15s ease; }
.pngrfl-newscard:hover { border-top-color: var(--pngrfl-red) !important; }

/* Category chips above the news grid. */
.pngrfl-newsfilter .e-filter {
	gap: 2px;
	background: var(--pngrfl-ink);
	border: 1px solid var(--pngrfl-ink);
}
.pngrfl-newsfilter .e-filter-item {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 13px 18px;
	min-height: 44px;
	border-radius: 0;
	border: 0;
	background: var(--pngrfl-paper);
	color: var(--pngrfl-ink);
}
.pngrfl-newsfilter .e-filter-item[aria-pressed="true"] {
	background: var(--pngrfl-red);
	color: var(--pngrfl-paper);
}

/* Partner tiles: logo when one is set, name when it is not. */
.pngrfl-partners .elementor-loop-container { gap: 2px; background: var(--pngrfl-letterclosed, var(--pngrfl-hairline-strong)); }
.pngrfl-partner-tile__logo img { max-height: 64px; width: auto; object-fit: contain; }
.pngrfl-partner-tile__logo:not(:has(img)) { display: none; }

/* ---------- Home: featured story hero ---------- */
.pngrfl-story-hero {
	/* Everything below is driven from Elementor → Style → Photo & overlay.
	   These are the fallbacks, and they match the control defaults. */
	--pngrfl-hero-band: var(--pngrfl-gold-deep, var(--pngrfl-ink));
	--pngrfl-hero-edge: 96px;        /* feather depth on the three sides */
	--pngrfl-hero-foot: 150px;       /* feather depth at the foot */
	--pngrfl-hero-edge-alpha: 92%;   /* how solid the feather starts */
	--pngrfl-hero-plate-alpha: 0%;   /* copy plate: off */
	--pngrfl-hero-plate-h: 440px;
	--pngrfl-hero-halo: 26px;
	--pngrfl-hero-edge-1: color-mix(in srgb, var(--pngrfl-hero-band) var(--pngrfl-hero-edge-alpha), transparent);
	--pngrfl-hero-edge-2: color-mix(in srgb, var(--pngrfl-hero-band) calc(var(--pngrfl-hero-edge-alpha) * 0.3), transparent);
	--pngrfl-hero-plate-1: color-mix(in srgb, var(--pngrfl-hero-band) var(--pngrfl-hero-plate-alpha), transparent);
	--pngrfl-hero-plate-2: color-mix(in srgb, var(--pngrfl-hero-band) calc(var(--pngrfl-hero-plate-alpha) * 0.75), transparent);
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 64vh;
	background: var(--pngrfl-ink) center / cover no-repeat;
	font-family: var(--pngrfl-sans);
	color: var(--pngrfl-paper);
	overflow: hidden;
}
/* Edge feather only.

   Four short ramps of the band colour, one per side, each fading to nothing
   within the feather depth. The middle of the photograph carries no tint at
   all — the picture is the picture. What the tint does is stop the photo
   ending on a hard rectangle: it dissolves into the fixtures strip above, the
   story column beside it and the section below.

   Never black. Every pixel of tint is the band colour, so the hero still
   reads as one piece with the rest of the page. */
.pngrfl-story-hero::before {
	content: "";
	position: absolute; inset: 0; z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(to bottom, var(--pngrfl-hero-edge-1) 0, var(--pngrfl-hero-edge-2) calc(var(--pngrfl-hero-edge) * 0.34), transparent var(--pngrfl-hero-edge)),
		linear-gradient(to left,   var(--pngrfl-hero-edge-1) 0, var(--pngrfl-hero-edge-2) calc(var(--pngrfl-hero-edge) * 0.34), transparent var(--pngrfl-hero-edge)),
		linear-gradient(to right,  var(--pngrfl-hero-edge-1) 0, var(--pngrfl-hero-edge-2) calc(var(--pngrfl-hero-edge) * 0.34), transparent var(--pngrfl-hero-edge)),
		linear-gradient(to top,    var(--pngrfl-hero-edge-1) 0, var(--pngrfl-hero-edge-2) calc(var(--pngrfl-hero-foot) * 0.34), transparent var(--pngrfl-hero-foot));
}
/* Optional copy plate, off by default (Plate strength = 0 renders nothing). */
.pngrfl-story-hero::after {
	content: "";
	position: absolute; inset: 0; z-index: 0;
	pointer-events: none;
	background: linear-gradient(to top,
		var(--pngrfl-hero-plate-1) 0,
		var(--pngrfl-hero-plate-2) calc(var(--pngrfl-hero-plate-h) * 0.62),
		transparent var(--pngrfl-hero-plate-h));
}
.pngrfl-story-hero__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 40px 5vw 44px;
	/* Was 760px, which pinned the copy to the left third. The foot row now
	   spans the content column so the button can sit out at its right edge. */
	max-width: 1240px;
	width: 100%;
	box-sizing: border-box;
}
/* Standfirst left, button hard right, baselines level. */
.pngrfl-story-hero__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 40px;
	flex-wrap: wrap;
	width: 100%;
}
/* Ink copy, because the overlay is the bright band amber. */
.pngrfl-story-hero__meta {
	display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--pngrfl-ink) 70%, transparent);
}
.pngrfl-story-hero__flag { background: var(--pngrfl-red); color: var(--pngrfl-paper); padding: 5px 10px; }
.pngrfl-story-hero__cat { color: var(--pngrfl-ink); }
.pngrfl-story-hero__title { margin: 0; font-size: clamp(26px, 3.1vw, 42px); line-height: 1.04; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; text-wrap: pretty; max-width: 22ch; }
.pngrfl-story-hero__title a { color: var(--pngrfl-ink); text-decoration: none; }
.pngrfl-story-hero__title a:hover { color: var(--pngrfl-red); }
.pngrfl-story-hero__standfirst { margin: 0; max-width: 54ch; flex: 1 1 380px; font-size: 16px; line-height: 1.6; color: color-mix(in srgb, var(--pngrfl-ink) 88%, transparent); }
.pngrfl-story-hero__cta {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; gap: 10px;
	min-height: 48px; box-sizing: border-box;
	padding: 15px 26px;
	background: var(--pngrfl-red);
	color: var(--pngrfl-paper);
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
}
.pngrfl-story-hero__cta:hover, .pngrfl-story-hero__cta:focus-visible { background: var(--pngrfl-gold); color: var(--pngrfl-ink); }
.pngrfl-story-hero :focus-visible { outline: 3px solid var(--pngrfl-gold); outline-offset: 3px; }
/* With the plate off, this is what holds the copy off the photograph: a glow
   of the band colour tight around the glyphs themselves. It covers the type,
   not the picture — which is the whole point of dropping the plate. */
.pngrfl-story-hero--halo .pngrfl-story-hero__meta,
.pngrfl-story-hero--halo .pngrfl-story-hero__cat,
.pngrfl-story-hero--halo .pngrfl-story-hero__title a,
.pngrfl-story-hero--halo .pngrfl-story-hero__standfirst {
	/* Layered: two tight copies make a dense core right at the glyph edge,
	   the wider ones fade that into the picture. */
	text-shadow:
		0 0 3px var(--pngrfl-hero-band),
		0 0 3px var(--pngrfl-hero-band),
		0 0 6px var(--pngrfl-hero-band),
		0 0 calc(var(--pngrfl-hero-halo) * 0.5) var(--pngrfl-hero-band),
		0 0 var(--pngrfl-hero-halo) var(--pngrfl-hero-band),
		0 0 calc(var(--pngrfl-hero-halo) * 1.9) var(--pngrfl-hero-band);
}
/* Full-strength ink over a photograph; the 70% tint only worked on a plate. */
.pngrfl-story-hero--halo .pngrfl-story-hero__meta { color: var(--pngrfl-ink); }
.pngrfl-story-hero--halo .pngrfl-story-hero__standfirst { color: var(--pngrfl-ink); }
/* The flag chip is solid red already — no halo behind it. */
.pngrfl-story-hero--halo .pngrfl-story-hero__flag { text-shadow: none; }
@media (max-width: 767px) {
	.pngrfl-story-hero { min-height: 56vh; }
	/* Shallower feather on a phone, or it would eat most of a narrow frame. */
	.pngrfl-story-hero { --pngrfl-hero-edge: 44px; --pngrfl-hero-foot: 96px; }
	.pngrfl-story-hero__foot { flex-direction: column; align-items: stretch; }
	.pngrfl-story-hero__cta { justify-content: center; }
}

/* ---------- Draw strip: scores + footer on the theme's own strip markup ----
   The widget reuses the theme's .score-strip / .score-card classes so it keeps
   the original strip's height and card sizing. These rules only add what the
   old strip had no need for: live scores, a live dot and the sync stamp. ---- */

.pngrfl-draw-card.score-strip { height: auto; position: static; overflow: visible; }
.pngrfl-draw-card .score-strip-row { display: flex; align-items: stretch; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pngrfl-draw-card .score-column { flex: 1 1 0; min-width: 0; }

.pngrfl-draw-card .score-team { justify-content: flex-start; }
.pngrfl-draw-card .pngrfl-draw-score {
	margin-left: auto;
	font-family: var(--pngrfl-mono);
	font-size: 14px;
	font-weight: 700;
	color: var(--pngrfl-red);
}
.pngrfl-draw-card .is-full_time .pngrfl-draw-score { color: var(--pngrfl-ink); }

.pngrfl-draw-card .pngrfl-draw-card__pulse {
	display: inline-block;
	width: 7px; height: 7px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--pngrfl-red);
	animation: pngrfl-draw-pulse 1.6s ease-in-out infinite;
}

.pngrfl-draw-card .pngrfl-draw-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 16px;
	padding: 6px 24px 8px;
	border-top: 1px solid color-mix(in srgb, var(--pngrfl-ink) 10%, transparent);
	background: var(--pngrfl-card);
}
.pngrfl-draw-card .pngrfl-draw-card__updated {
	font-family: var(--pngrfl-mono);
	font-size: 9px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--pngrfl-ink) 58%, transparent);
}
.pngrfl-draw-card .pngrfl-draw-card__all {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 44px;
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pngrfl-ink);
	text-decoration: none;
}
.pngrfl-draw-card .pngrfl-draw-card__all:hover { color: var(--pngrfl-red); }

.pngrfl-draw-card .pngrfl-draw-card__item--skeleton {
	flex: 1;
	min-height: 84px;
	margin: 12px;
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--pngrfl-ink) 6%, transparent) 25%,
		color-mix(in srgb, var(--pngrfl-ink) 12%, transparent) 37%,
		color-mix(in srgb, var(--pngrfl-ink) 6%, transparent) 63%);
	background-size: 400% 100%;
	animation: pngrfl-draw-shimmer 1.4s ease infinite;
}

@media (max-width: 900px) {
	.pngrfl-draw-card .score-strip-row { display: block; }
	.pngrfl-draw-card .score-column { width: 100%; }
}

/* One band high, like the strip it replaces: competition columns scroll,
   the stamp and link sit at the end of the same row. */
.pngrfl-draw-card .score-strip-row { display: flex; align-items: stretch; min-height: 104px; }
.pngrfl-draw-card .pngrfl-draw-card__cols { display: flex; align-items: stretch; flex: 1; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pngrfl-draw-card .pngrfl-draw-card__foot {
	flex: none;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 2px;
	padding: 10px 20px;
	border-top: 0;
	border-left: 1px solid color-mix(in srgb, var(--pngrfl-ink) 10%, transparent);
	background: transparent;
}
.pngrfl-draw-card .pngrfl-draw-card__all { min-height: 0; }
@media (max-width: 900px) {
	.pngrfl-draw-card .score-strip-row { display: block; min-height: 0; }
	.pngrfl-draw-card .pngrfl-draw-card__cols { display: block; }
	.pngrfl-draw-card .pngrfl-draw-card__foot {
		flex-direction: row; align-items: center; justify-content: space-between;
		border-left: 0; border-top: 1px solid color-mix(in srgb, var(--pngrfl-ink) 10%, transparent);
	}
	.pngrfl-draw-card .pngrfl-draw-card__all { min-height: 44px; }
}

/* ---------------------------------------------------------------------------
   About Us hub (page 580) — Hub Cards + Release List.

   Adapted from the handoff bundle: every literal hex in the bundle has been
   swapped for the site's token layer (body{--pngrfl-*}, itself derived from
   the Global Colors), so a kit change carries through here too. The bundle's
   local --pngrfl-mono/--pngrfl-sans block is dropped for the same reason —
   those already resolve from the Global Fonts.
   --------------------------------------------------------------------------- */

/* ---------- Hub cards ---------- */
.pngrfl-hub {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}
.pngrfl-hub__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--pngrfl-card);
	border: 1px solid var(--pngrfl-hairline);
	color: var(--pngrfl-ink);
	text-decoration: none;
	transition: border-color .2s ease;
}
.pngrfl-hub__card:hover, .pngrfl-hub__card:focus-visible { border-color: var(--pngrfl-ink); color: var(--pngrfl-ink); }
.pngrfl-hub__card:focus-visible { outline: 2px solid var(--pngrfl-gold); outline-offset: 2px; }
.pngrfl-hub__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	display: grid;
	place-items: center;
	/* Hatch ground: shows through a "contain" logo and stands in for a missing
	   photograph, so an unsupplied tile is obvious rather than blank. */
	background: repeating-linear-gradient(135deg,
		var(--pngrfl-hairline) 0 14px,
		var(--pngrfl-paper-alt) 14px 28px);
}
.pngrfl-hub__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Crest / logo tiles: show the whole mark on paper instead of cropping it. */
.pngrfl-hub__card--contain .pngrfl-hub__media { background: var(--pngrfl-paper); }
.pngrfl-hub__card--contain .pngrfl-hub__img { object-fit: contain; padding: 14%; box-sizing: border-box; }
.pngrfl-hub__ph {
	font-family: var(--pngrfl-mono);
	font-size: 10px; line-height: 1.5; letter-spacing: .06em;
	color: var(--pngrfl-muted); text-align: center; padding: 20px;
}
.pngrfl-hub__index {
	position: absolute; top: 0; left: 0;
	background: var(--pngrfl-ink);
	color: var(--pngrfl-gold);
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: .16em;
	padding: 6px 10px;
}
.pngrfl-hub__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 24px 22px 26px; }
.pngrfl-hub__title {
	margin: 0;
	font-family: var(--pngrfl-sans); font-size: 19px; font-weight: 800; line-height: 1.15;
	letter-spacing: -.01em; text-transform: uppercase; overflow-wrap: anywhere;
}
.pngrfl-hub__note {
	margin: 0;
	font-family: var(--pngrfl-sans); font-size: 14px; line-height: 1.6;
	color: var(--pngrfl-muted); text-wrap: pretty;
}
/* margin-top:auto pins the CTA to the card foot, so the CTAs in a row share a
   baseline however long the descriptions run. */
.pngrfl-hub__cta {
	margin-top: auto; padding-top: 14px;
	display: flex; align-items: center; gap: 10px;
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--pngrfl-hub-accent, var(--pngrfl-red));
}
.pngrfl-hub__cta i { display: block; width: 22px; height: 2px; background: currentColor; transition: width .2s ease; }
.pngrfl-hub__card:hover .pngrfl-hub__cta i { width: 34px; }

/* ---------- Release list ---------- */
.pngrfl-releases {
	list-style: none; margin: 0; padding: 0;
	border-top: 1px solid color-mix(in srgb, var(--pngrfl-paper) 18%, transparent);
	color: var(--pngrfl-rel-text, var(--pngrfl-paper));
}
.pngrfl-releases__row {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 14px 32px; padding: 26px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--pngrfl-paper) 18%, transparent);
}
.pngrfl-releases__date { font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: .12em; opacity: .55; }
.pngrfl-releases__tag {
	flex: 0 0 auto;
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--pngrfl-rel-chip, var(--pngrfl-gold));
	border: 1px solid currentColor; padding: 4px 8px;
}
.pngrfl-releases__title {
	margin: 0; flex: 1 1 340px; min-width: 0;
	font-family: var(--pngrfl-sans); font-size: 17px; font-weight: 600; line-height: 1.4;
	text-wrap: pretty; overflow-wrap: anywhere;
}
.pngrfl-releases__btn {
	flex: 0 0 auto;
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--pngrfl-ink); background: var(--pngrfl-paper);
	padding: 11px 18px; text-decoration: none; transition: background .2s ease;
	/* ≥44px tall including padding, for a comfortable touch target. */
	min-height: 44px; display: inline-flex; align-items: center;
}
.pngrfl-releases__btn:hover, .pngrfl-releases__btn:focus-visible { background: var(--pngrfl-gold); color: var(--pngrfl-ink); }
.pngrfl-releases__btn:focus-visible { outline: 2px solid var(--pngrfl-gold); outline-offset: 3px; }

@media (max-width: 1024px) { .pngrfl-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .pngrfl-hub { grid-template-columns: minmax(0, 1fr); } }
/* Below ~390px the chip keeps its own line and the title wraps beneath it. */
@media (max-width: 480px) {
	.pngrfl-releases__row { gap: 12px 16px; }
	.pngrfl-releases__title { flex: 1 1 100%; }
}

/* ---------- About Us hub: page-level section helpers ---------- */
/* Hero ramp: three stops, deepest at the foot where the H1 sits, so the crowd
   in the upper half of the photograph still reads. Elementor's own background
   overlay carries two stops only, which is why the ramp lives here; the colour
   is the Ink global either way. */
.pngrfl-hubhero { position: relative; isolation: isolate; }
.pngrfl-hubhero::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: linear-gradient(to top,
		color-mix(in srgb, var(--pngrfl-ink) 94%, transparent) 0%,
		color-mix(in srgb, var(--pngrfl-ink) 50%, transparent) 55%,
		color-mix(in srgb, var(--pngrfl-ink) 20%, transparent) 100%);
}
.pngrfl-hubhero > .e-con-inner, .pngrfl-hubhero > .e-con, .pngrfl-hubhero > .elementor-element { position: relative; z-index: 1; }

/* Measures from the reference, kept as classes so no literal width sits on a
   widget (the kit already uses .pngrfl-hero-h1 the same way). */
.pngrfl-measure-22 .elementor-heading-title { max-width: 22ch; }
.pngrfl-measure-46 p { max-width: 46ch; }

/* ---------------------------------------------------------------------------
   Contact page (1378) — Contact Strip, Department List, Enquiry Form.

   Adapted from the handoff bundle: the bundle's literal hex values and its
   local --m/--s font block are replaced by the site's token layer
   (body{--pngrfl-*}, derived from the Global Colors and Global Fonts), so a
   kit change carries through here too.
   --------------------------------------------------------------------------- */

/* ---------- Contact strip (sits on Ink) ---------- */
.pngrfl-cstrip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 1px;
	background: color-mix(in srgb, var(--pngrfl-paper) 18%, transparent);
	border-top: 1px solid color-mix(in srgb, var(--pngrfl-paper) 18%, transparent);
}
/* The 1px grid gap is the divider; each cell repaints the Ink over it. */
.pngrfl-cstrip__cell {
	background: var(--pngrfl-ink);
	color: var(--pngrfl-paper);
	padding: 32px 24px 40px;
	display: flex; flex-direction: column; gap: 12px;
}
.pngrfl-cstrip__cell:first-child { padding-left: 0; }
.pngrfl-cstrip__label {
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: .2em;
	text-transform: uppercase; color: var(--pngrfl-gold);
}
.pngrfl-cstrip__value {
	font-family: var(--pngrfl-sans); font-size: 20px; font-weight: 700; line-height: 1.3;
	letter-spacing: -.01em; color: var(--pngrfl-paper);
	overflow-wrap: anywhere; text-decoration: none;
}
a.pngrfl-cstrip__value:hover, a.pngrfl-cstrip__value:focus-visible { color: var(--pngrfl-gold); }
.pngrfl-cstrip__sub {
	font-family: var(--pngrfl-sans); font-size: 13px; line-height: 1.5;
	color: color-mix(in srgb, var(--pngrfl-paper) 60%, transparent);
}
/* Editor-only marker for a value PNGRFL has not supplied; the front end omits
   the whole cell rather than printing a placeholder. */
.pngrfl-cstrip__missing {
	font-family: var(--pngrfl-mono); font-size: 12px;
	color: color-mix(in srgb, var(--pngrfl-paper) 45%, transparent);
	border: 1px dashed color-mix(in srgb, var(--pngrfl-paper) 30%, transparent);
	padding: 4px 8px;
}
@media (max-width: 767px) { .pngrfl-cstrip__cell { padding-left: 0; } }

/* ---------- Department list ---------- */
.pngrfl-depts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pngrfl-hairline); }
.pngrfl-depts__row {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
	gap: 6px 24px; padding: 18px 0; border-bottom: 1px solid var(--pngrfl-hairline);
}
.pngrfl-depts__text { display: flex; flex-direction: column; gap: 4px; }
.pngrfl-depts__name {
	font-family: var(--pngrfl-sans); font-size: 15px; font-weight: 800;
	text-transform: uppercase; letter-spacing: -.005em; color: var(--pngrfl-ink);
}
.pngrfl-depts__note { font-family: var(--pngrfl-sans); font-size: 13px; line-height: 1.5; color: var(--pngrfl-muted); }
.pngrfl-depts__email {
	font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: .06em;
	color: var(--pngrfl-red); text-decoration: none; overflow-wrap: anywhere;
}
.pngrfl-depts__email:hover { color: var(--pngrfl-ink); }

/* ---------- Enquiry form ---------- */
.pngrfl-ef {
	background: var(--pngrfl-card); border: 1px solid var(--pngrfl-hairline);
	padding: clamp(24px, 3.5vw, 44px);
	color: var(--pngrfl-ink); font-family: var(--pngrfl-sans);
}
.pngrfl-ef__form { display: flex; flex-direction: column; gap: 26px; }
.pngrfl-ef__topics { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pngrfl-ef__label {
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: .18em;
	text-transform: uppercase; color: var(--pngrfl-muted); padding: 0;
}
.pngrfl-ef__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pngrfl-ef__chip {
	padding: 10px 14px; border: 1px solid var(--pngrfl-hairline-strong);
	background: transparent; color: var(--pngrfl-ink);
	font-family: var(--pngrfl-sans); font-size: 12px; font-weight: 600; letter-spacing: .02em;
	cursor: pointer; border-radius: 0;
	/* ≥44px tall for a comfortable touch target. */
	min-height: 44px;
	transition: background .15s, color .15s, border-color .15s;
}
.pngrfl-ef__chip:hover { border-color: var(--pngrfl-ink); }
.pngrfl-ef__chip[aria-pressed="true"] { background: var(--pngrfl-ink); color: var(--pngrfl-paper); border-color: var(--pngrfl-ink); }
.pngrfl-ef__chip:focus-visible, .pngrfl-ef__submit:focus-visible, .pngrfl-ef__again:focus-visible {
	outline: 2px solid var(--pngrfl-gold); outline-offset: 2px;
}
.pngrfl-ef__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 639px) { .pngrfl-ef__grid { grid-template-columns: minmax(0, 1fr); } }
.pngrfl-ef__field { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.pngrfl-ef input[type="text"], .pngrfl-ef input[type="email"], .pngrfl-ef input[type="tel"], .pngrfl-ef textarea {
	width: 100%; box-sizing: border-box; padding: 14px;
	border: 1px solid var(--pngrfl-hairline); border-radius: 0;
	background: var(--pngrfl-paper);
	font-family: var(--pngrfl-sans); font-size: 15px; line-height: 1.5; color: var(--pngrfl-ink);
	box-shadow: none; outline: none; transition: border-color .15s, background .15s;
}
.pngrfl-ef textarea { resize: vertical; line-height: 1.6; }
.pngrfl-ef input:focus, .pngrfl-ef textarea:focus { border-color: var(--pngrfl-ink); background: #fff; }
.pngrfl-ef .is-invalid { border-color: var(--pngrfl-red) !important; }
.pngrfl-ef ::placeholder { color: color-mix(in srgb, var(--pngrfl-muted) 80%, var(--pngrfl-paper)); }
/* Honeypot: off-canvas rather than display:none, which some bots skip. */
.pngrfl-ef__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pngrfl-ef__error { font-family: var(--pngrfl-sans); font-size: 13px; font-weight: 600; color: var(--pngrfl-red); }
.pngrfl-ef__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.pngrfl-ef__route { font-family: var(--pngrfl-sans); font-size: 12px; line-height: 1.5; color: var(--pngrfl-muted); }
.pngrfl-ef__route strong { font-weight: 600; color: var(--pngrfl-ink); }
.pngrfl-ef__submit {
	padding: 16px 32px; border: 0; border-radius: 0; min-height: 44px;
	background: var(--pngrfl-red); color: var(--pngrfl-paper);
	font-family: var(--pngrfl-sans); font-size: 12px; font-weight: 800; letter-spacing: .16em;
	text-transform: uppercase; cursor: pointer; transition: background .15s;
}
.pngrfl-ef__submit:hover { background: var(--pngrfl-ink); }
.pngrfl-ef__submit[disabled] { opacity: .6; cursor: progress; }
.pngrfl-ef__done { min-height: 420px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.pngrfl-ef__done[hidden], .pngrfl-ef__form[hidden], .pngrfl-ef__error[hidden] { display: none; }
.pngrfl-ef__tick {
	width: 48px; height: 48px; display: grid; place-items: center;
	background: var(--pngrfl-ink); color: var(--pngrfl-gold);
	font-family: var(--pngrfl-sans); font-size: 22px; font-weight: 800;
}
.pngrfl-ef__done-title { margin: 0; font-family: var(--pngrfl-sans); font-size: 28px; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; }
.pngrfl-ef__done-text { margin: 0; font-family: var(--pngrfl-sans); font-size: 16px; line-height: 1.7; color: var(--pngrfl-body); max-width: 40ch; }
.pngrfl-ef__again {
	align-self: flex-start; padding: 13px 22px; min-height: 44px;
	border: 1px solid var(--pngrfl-ink); border-radius: 0; background: transparent; color: var(--pngrfl-ink);
	font-family: var(--pngrfl-sans); font-size: 11px; font-weight: 800; letter-spacing: .16em;
	text-transform: uppercase; cursor: pointer;
}
.pngrfl-ef__again:hover { background: var(--pngrfl-ink); color: var(--pngrfl-paper); }
.pngrfl-ef__noscript { font-family: var(--pngrfl-sans); font-size: 14px; margin: 16px 0 0; }

/* ---------- Contact page: section helpers ---------- */
/* The map is a column of the Visit card, so it stretches to whatever the text
   column makes the card, never to its own intrinsic height. percentage heights
   would resolve against an auto-height parent, so the chain is flex instead. */
.pngrfl-visit-mapcol { padding: 0; }
.pngrfl-visit-mapcol > .elementor-widget { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 320px; }
.pngrfl-visit-map > .elementor-widget-container,
.pngrfl-visit-map .elementor-custom-embed { flex: 1 1 auto; display: flex; }
.pngrfl-visit-map iframe { flex: 1 1 auto; display: block; width: 100%; height: auto !important; min-height: 320px; border: 0; }
/* Hairline between the two halves of the Visit card, and only there. */
.pngrfl-visit-body { border-left: 1px solid var(--pngrfl-hairline); }
@media (max-width: 767px) { .pngrfl-visit-body { border-left: 0; border-top: 1px solid var(--pngrfl-hairline); } }
/* Label/value pairs under the address (hours, postal). */
.pngrfl-visit-rows .elementor-icon-list-item { align-items: baseline; }
/* Measures and the dimmed-on-Ink tone from the reference, as classes so no
   literal value sits on a widget (the kit uses .pngrfl-hero-h1 the same way).
   The dim is a mix of the Paper global, not a separate colour. */
.pngrfl-onink-dim p { color: color-mix(in srgb, var(--pngrfl-paper) 82%, transparent); }
.pngrfl-measure-44 p { max-width: 44ch; }

/* ---------------------------------------------------------------------------
   Shop (page 255) — Shop Grid, product window, Cart Drawer.

   Adapted from the handoff bundle: its local hex values and hard-coded font
   stacks are replaced by the site's token layer (body{--pngrfl-*}, derived
   from the Global Colors and Global Fonts), so a kit change carries through.
   The product window and the drawer are appended to <body>, outside the
   widget wrapper, which is why each root class re-declares the shorthands it
   needs rather than inheriting them from .pngrfl-shop.
   --------------------------------------------------------------------------- */
.pngrfl-shop, .pngrfl-pw, .pngrfl-drawer, .pngrfl-cart-btn {
	--card: var(--pngrfl-card);
	--line: var(--pngrfl-hairline);
	--muted: var(--pngrfl-muted);
	--edge: var(--pngrfl-hairline-strong);
	font-family: var(--pngrfl-sans);
	color: var(--pngrfl-ink);
}
html.pngrfl-lock { overflow: hidden; }
.pngrfl-shop button, .pngrfl-pw button, .pngrfl-drawer button, .pngrfl-cart-btn { font-family: var(--pngrfl-sans); border-radius: 0; }
.pngrfl-shop__label { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
/* Kit tint behind a product with no photograph yet, and on the cart thumbnail. */
.kit-red  { background: var(--pngrfl-red);  --ph: var(--pngrfl-paper); }
.kit-gold { background: var(--pngrfl-gold); --ph: var(--pngrfl-ink); }
.kit-ink  { background: color-mix(in srgb, var(--pngrfl-paper) 8%, var(--pngrfl-ink)); --ph: var(--pngrfl-gold); }

/* ---------- Filter bar ---------- */
.pngrfl-shop__bar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 14px 32px; padding: 16px 0; border-bottom: 1px solid var(--line);
	background: var(--pngrfl-paper); z-index: 5;
}
/* Sticky: the bar sits inside the boxed 1280 column, but its ground and rule
   have to run to the viewport edges or the border stops mid-air once it pins. */
.pngrfl-shop__bar.is-sticky { position: sticky; top: var(--pngrfl-sticky-top, 0px); background: none; border-bottom: 0; isolation: isolate; }
/* The bleed is 5vw — the section's own side padding — not 50vw from centre:
   the theme's fixed sidebar means this column is not centred in the viewport,
   so a viewport-width bleed pushed 117px of horizontal scroll onto the page.
   overflow-x: clip on the root is the belt to that braces, and unlike hidden
   it does not stop the bar sticking to the viewport. */
.pngrfl-shop { overflow-x: clip; }
.pngrfl-shop__bar.is-sticky::before {
	content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
	left: -5vw; right: -5vw;
	background: var(--pngrfl-paper); border-bottom: 1px solid var(--line);
}
@media (max-width: 767px) { .pngrfl-shop__bar.is-sticky { position: static; } }
.pngrfl-shop__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pngrfl-shop__team { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pngrfl-shop__chip {
	padding: 10px 16px; min-height: 44px; border: 1px solid var(--edge); background: transparent;
	color: var(--pngrfl-ink); font-size: 12px; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; cursor: pointer;
}
.pngrfl-shop__team .pngrfl-shop__chip { padding: 8px 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.pngrfl-shop__chip:hover { border-color: var(--pngrfl-ink); }
.pngrfl-shop__chip[aria-pressed="true"] { background: var(--pngrfl-ink); color: var(--pngrfl-paper); border-color: var(--pngrfl-ink); }
.pngrfl-shop__chip:focus-visible { outline: 2px solid var(--pngrfl-gold); outline-offset: 2px; }
.pngrfl-shop__count { margin: 26px 0; font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ---------- Grid + cards ---------- */
.pngrfl-shop__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; }
@media (max-width: 1199px) { .pngrfl-shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px)  { .pngrfl-shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px)  { .pngrfl-shop__grid { grid-template-columns: minmax(0, 1fr); } }
.pngrfl-shop__card { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; text-align: left; color: var(--pngrfl-ink); cursor: pointer; }
.pngrfl-shop__card[hidden] { display: none; }
.pngrfl-shop__card:focus-visible { outline: 2px solid var(--pngrfl-gold); outline-offset: 4px; }
.pngrfl-shop__media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 8px; transition: opacity .2s; }
.pngrfl-shop__card:hover .pngrfl-shop__media { opacity: .92; }
.pngrfl-shop__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pngrfl-shop__ph { font-family: var(--pngrfl-mono); font-size: 10px; line-height: 1.5; letter-spacing: .06em; color: var(--ph); border: 1px dashed var(--ph); padding: 20px; margin: 24px; text-align: center; }
.pngrfl-shop__type { position: absolute; top: 0; left: 0; background: var(--pngrfl-ink); color: var(--pngrfl-gold); font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; padding: 6px 10px; }
.pngrfl-shop__badge { position: absolute; top: 0; right: 0; background: var(--pngrfl-paper); color: var(--pngrfl-red); font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; }
.pngrfl-shop__meta { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pngrfl-shop__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pngrfl-shop__name { font-size: 17px; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.pngrfl-shop__price { font-size: 16px; font-weight: 700; white-space: nowrap; }
.pngrfl-shop__range { font-size: 13px; color: var(--muted); }
.pngrfl-shop__none { padding: 48px 0; font-size: 15px; color: var(--muted); }
.pngrfl-shop__none[hidden] { display: none; }
.pngrfl-shop__clear { background: none; border: 0; padding: 0; color: var(--pngrfl-red); font-weight: 700; cursor: pointer; text-decoration: underline; }
.pngrfl-shop__empty { color: var(--muted); }

.pngrfl-x { background: none; border: 0; padding: 0; font-size: 24px; line-height: 1; cursor: pointer; color: inherit; }

/* ---------- Product window ---------- */
.pngrfl-pw { position: fixed; inset: 0; z-index: 99990; display: grid; place-items: center; padding: 4vh 4vw; }
.pngrfl-pw[hidden], .pngrfl-drawer[hidden] { display: none; }
.pngrfl-pw__backdrop, .pngrfl-drawer__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--pngrfl-ink) 60%, transparent); }
.pngrfl-pw__panel { position: relative; width: 100%; max-width: 980px; max-height: 92vh; overflow-y: auto; background: var(--pngrfl-paper); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 719px) { .pngrfl-pw__panel { grid-template-columns: minmax(0, 1fr); } }
.pngrfl-pw__media { min-height: 360px; display: grid; place-items: center; gap: 2px; }
.pngrfl-pw__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pngrfl-pw__body { padding: clamp(24px, 3.5vw, 44px); display: flex; flex-direction: column; gap: 20px; }
.pngrfl-pw__top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.pngrfl-pw__eyebrow { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--pngrfl-red); }
.pngrfl-pw__name { margin: 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; }
.pngrfl-pw__price { font-size: 22px; font-weight: 700; }
.pngrfl-pw__sizes { display: flex; flex-direction: column; gap: 12px; }
.pngrfl-pw__sizehead { display: flex; justify-content: space-between; gap: 12px; }
.pngrfl-pw__sizehead a { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--pngrfl-red); }
.pngrfl-pw__sizegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.pngrfl-pw__size { padding: 12px 4px; min-height: 44px; border: 1px solid var(--edge); background: var(--card); color: var(--pngrfl-ink); font-size: 13px; font-weight: 700; cursor: pointer; }
.pngrfl-pw__size:hover:not([disabled]) { border-color: var(--pngrfl-ink); }
.pngrfl-pw__size[aria-pressed="true"] { background: var(--pngrfl-ink); color: var(--pngrfl-paper); border-color: var(--pngrfl-ink); }
/* Sold out: still visible, struck through, and genuinely unselectable. */
.pngrfl-pw__size[disabled] {
	background: color-mix(in srgb, var(--pngrfl-hairline) 70%, var(--pngrfl-paper-alt));
	color: color-mix(in srgb, var(--pngrfl-muted) 70%, var(--pngrfl-paper));
	text-decoration: line-through; cursor: not-allowed;
}
.pngrfl-pw__note { min-height: 18px; margin-top: -8px; font-size: 13px; color: var(--muted); }
.pngrfl-pw__note.is-low { color: var(--pngrfl-red); }
.pngrfl-pw__buy { display: flex; flex-wrap: wrap; gap: 10px; }
.pngrfl-pw__qty { display: flex; border: 1px solid var(--pngrfl-ink); }
.pngrfl-pw__qty button { width: 44px; min-height: 48px; border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--pngrfl-ink); }
.pngrfl-pw__qty button[disabled] { opacity: .3; cursor: not-allowed; }
.pngrfl-pw__qty span { width: 40px; display: grid; place-items: center; font-weight: 700; }
.pngrfl-pw__add { flex: 1; min-width: 180px; padding: 16px 24px; min-height: 44px; border: 0; background: var(--pngrfl-red); color: var(--pngrfl-paper); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .15s; }
.pngrfl-pw__add:hover:not([disabled]) { background: var(--pngrfl-ink); }
.pngrfl-pw__add.is-idle { background: color-mix(in srgb, var(--pngrfl-muted) 80%, var(--pngrfl-ink)); cursor: default; }
.pngrfl-pw__add.is-added { background: var(--pngrfl-ink); }
.pngrfl-pw__add[disabled] { cursor: progress; }
.pngrfl-pw__error { font-size: 13px; font-weight: 600; color: var(--pngrfl-red); }
.pngrfl-pw__error[hidden] { display: none; }
.pngrfl-pw__desc { padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.6; color: var(--pngrfl-body); }
.pngrfl-pw button:focus-visible, .pngrfl-drawer button:focus-visible, .pngrfl-drawer a:focus-visible { outline: 2px solid var(--pngrfl-gold); outline-offset: 2px; }

/* ---------- Cart button ---------- */
.pngrfl-cart-btn { display: inline-flex; align-items: center; gap: 12px; padding: 13px 20px; min-height: 44px; background: transparent; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: color .15s, border-color .15s; }
.pngrfl-cart-btn.tone-dark { border: 1px solid color-mix(in srgb, var(--pngrfl-paper) 40%, transparent); color: var(--pngrfl-paper); }
.pngrfl-cart-btn.tone-light { border: 1px solid var(--pngrfl-ink); color: var(--pngrfl-ink); }
.pngrfl-cart-btn:hover { border-color: var(--pngrfl-gold); color: var(--pngrfl-gold); }
.pngrfl-cart-btn__count { background: var(--pngrfl-gold); color: var(--pngrfl-ink); font-family: var(--pngrfl-mono); font-size: 11px; padding: 2px 7px; }

/* ---------- Drawer ---------- */
.pngrfl-drawer { position: fixed; inset: 0; z-index: 99995; }
.pngrfl-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: 100%; max-width: 440px; background: var(--pngrfl-paper); display: flex; flex-direction: column; }
.pngrfl-drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 24px 28px; background: var(--pngrfl-ink); color: var(--pngrfl-paper); font-size: 18px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.pngrfl-drawer__lines { flex: 1; overflow-y: auto; padding: 8px 28px; }
.pngrfl-drawer__empty { padding: 48px 0; font-size: 15px; color: var(--muted); }
.pngrfl-drawer__line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.pngrfl-drawer__thumb { width: 64px; height: 80px; overflow: hidden; }
.pngrfl-drawer__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pngrfl-drawer__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pngrfl-drawer__name { font-size: 14px; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.pngrfl-drawer__meta { font-size: 12px; color: var(--muted); }
.pngrfl-drawer__rm { align-self: flex-start; background: none; border: 0; padding: 0; font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--pngrfl-red); cursor: pointer; }
.pngrfl-drawer__total { font-size: 14px; font-weight: 700; }
.pngrfl-drawer__foot { padding: 24px 28px 28px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
.pngrfl-drawer__foot[hidden] { display: none; }
.pngrfl-drawer__sub { display: flex; justify-content: space-between; font-size: 16px; font-weight: 700; }
.pngrfl-drawer__note { font-size: 12px; color: var(--muted); }
.pngrfl-drawer__checkout { display: block; padding: 17px; background: var(--pngrfl-red); color: var(--pngrfl-paper); text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.pngrfl-drawer__checkout:hover { background: var(--pngrfl-ink); color: var(--pngrfl-paper); }

/* ---------- Info strip (native containers) ---------- */
.pngrfl-infostrip { background: var(--pngrfl-hairline); }
.pngrfl-infocell { background: var(--pngrfl-card); }

/* ---------------------------------------------------------------------------
   Players (page 245) — Player Directory widget.

   Adapted from the handoff bundle: its literal palette and font stacks are
   swapped for the site's token layer (body{--pngrfl-*}, derived from the
   Global Colors and Global Fonts), so a kit change carries through here too.
   --------------------------------------------------------------------------- */
/* PNGRFL Player Directory. Append to assets/pngrfl-widgets.css. Tokens come from PNGRFL_Widget_Base. */
.pngrfl-pd { --pd-ink: var(--pngrfl-ink, var(--pngrfl-ink)); --pd-red: var(--pngrfl-accent, var(--pngrfl-red)); --pd-gold: var(--pngrfl-gold); --pd-paper: var(--pngrfl-paper); --pd-line: var(--pngrfl-hairline); --pd-body: var(--pngrfl-body); --pd-muted: var(--pngrfl-muted); font-family: Archivo, Helvetica, sans-serif; color: var(--pd-ink); }
.pngrfl-pd button { font-family: inherit; cursor: pointer; }
.pngrfl-pd .r { text-align: right; }
.pngrfl-pd .is-red { color: var(--pd-red); }
.pngrfl-pd .is-dim { color: #B5ACA3; }
.pngrfl-pd__mono { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--pd-muted); }
.pngrfl-pd__mono--dim { color: #8A817A; }
.pngrfl-pd__fallback { columns: 3 240px; font-size: 14px; }
.pngrfl-pd__status { padding: 64px 16px; text-align: center; color: var(--pd-muted); }
.pngrfl-pd--editor { padding: 40px; border: 1px dashed #B5ACA3; }
html.pngrfl-pd-lock { overflow: hidden; }

/* Tabs + leaders: sit on the Ink hero section (build that container natively) */
.pngrfl-pd__tabs { display: flex; flex-wrap: wrap; gap: 0 40px; border-bottom: 1px solid rgba(247,244,239,.2); background: var(--pd-ink); }
.pngrfl-pd__tab { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; padding: 14px 0 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: rgba(247,244,239,.5); text-align: left; }
.pngrfl-pd__tab[aria-selected="true"] { color: var(--pd-paper); border-bottom-color: var(--pd-gold); }
.pngrfl-pd__tab-name { font-size: clamp(20px, 2.4vw, 30px); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.pngrfl-pd__tab-sub { font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.pngrfl-pd__tab[aria-selected="true"] .pngrfl-pd__tab-sub { color: var(--pd-gold); }
.pngrfl-pd__leaders { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px; background: rgba(247,244,239,.16); border: 1px solid rgba(247,244,239,.16); margin: 36px 0 5vh; }
.pngrfl-pd__leaders:empty { display: none; }
.pngrfl-pd__leader { background: var(--pd-ink); border: 0; color: var(--pd-paper); padding: 20px; display: flex; flex-direction: column; gap: 8px; text-align: left; min-width: 0; }
.pngrfl-pd__leader:hover { background: #1E1A18; }
.pngrfl-pd__leader .pngrfl-pd__mono { color: rgba(247,244,239,.6); }
.pngrfl-pd__leader-v { font-size: clamp(28px, 3.2vw, 44px); font-weight: 800; line-height: 1; color: var(--pd-gold); }
.pngrfl-pd__leader-n { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pngrfl-pd__leader-t { font-size: 12px; color: rgba(247,244,239,.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sticky toolbar */
.pngrfl-pd__bar { position: sticky; top: var(--pngrfl-pd-sticky, 0); z-index: 10; background: var(--pd-ink); color: var(--pd-paper); padding-block: 14px; display: flex; flex-direction: column; gap: 12px; }
.pngrfl-pd__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pngrfl-pd__row--chips { gap: 8px 20px; }
.pngrfl-pd__search { flex: 1 1 220px; min-width: 0; background: #1E1A18; border: 1px solid rgba(247,244,239,.2); color: var(--pd-paper); font: 15px Archivo, sans-serif; padding: 13px 16px; border-radius: 0; }
.pngrfl-pd__search::placeholder { color: rgba(247,244,239,.45); }
.pngrfl-pd__team { flex: 0 1 260px; min-width: 0; min-height: 48px; background: #1E1A18; border: 1px solid rgba(247,244,239,.2); color: var(--pd-paper); font-size: 14px; padding: 0 12px; border-radius: 0; }
.pngrfl-pd__views { display: flex; gap: 3px; padding: 3px; background: #1E1A18; }
.pngrfl-pd__view { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 16px; border: 0; background: none; color: var(--pd-paper); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pngrfl-pd__view[aria-pressed="true"] { background: var(--pd-paper); color: var(--pd-ink); }
.pngrfl-pd__chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pngrfl-pd__chip { min-height: 38px; padding: 0 12px; background: none; border: 1px solid rgba(247,244,239,.28); color: var(--pd-paper); font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.pngrfl-pd__chip[aria-pressed="true"] { background: var(--pd-gold); border-color: var(--pd-gold); color: var(--pd-ink); }
.pngrfl-pd__count { margin-left: auto; font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--pd-gold); }
.pngrfl-pd :focus-visible { outline: 2px solid var(--pd-gold); outline-offset: 2px; }

/* Results */
.pngrfl-pd__results { padding-top: 4vh; }
.pngrfl-pd__group { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; padding: 30px 10px 12px; border-bottom: 2px solid var(--pd-ink); }
.pngrfl-pd__group h3 { margin: 0; font-size: clamp(20px, 2.2vw, 28px); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.pngrfl-pd__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 16px; padding-top: 18px; }
.pngrfl-pd__card { background: #fff; border: 0; border-top: 3px solid var(--pd-ink); padding: 0; text-align: left; color: var(--pd-ink); display: flex; flex-direction: column; transition: box-shadow .2s; }
.pngrfl-pd__card.is-captain { border-top-color: var(--pd-gold); }
.pngrfl-pd__card:hover { box-shadow: 0 10px 28px rgba(18,16,15,.12); }
.pngrfl-pd__card-img { position: relative; aspect-ratio: 4 / 4.4; background: repeating-linear-gradient(135deg, var(--pngrfl-hairline) 0 12px, #EDE8E1 12px 24px); display: grid; place-items: center; overflow: hidden; }
.pngrfl-pd__card-img img, .pngrfl-pd__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pngrfl-pd__ph { font-family: var(--pngrfl-mono); font-size: 9px; letter-spacing: .08em; color: #8A817A; }
.pngrfl-pd__ghost { position: absolute; right: 10px; bottom: -14px; font-size: 92px; font-weight: 800; line-height: 1; color: rgba(18,16,15,.1); letter-spacing: -.04em; }
.pngrfl-pd__no { position: absolute; top: 0; left: 0; background: var(--pd-ink); color: var(--pd-gold); font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: .1em; padding: 6px 10px; }
.pngrfl-pd__cap { position: absolute; top: 0; right: 0; background: var(--pd-gold); color: var(--pd-ink); font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: .12em; padding: 6px 9px; }
.pngrfl-pd__card-body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.pngrfl-pd__pos { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--pd-red); }
.pngrfl-pd__name { font-size: 17px; font-weight: 800; text-transform: uppercase; line-height: 1.08; overflow-wrap: anywhere; }
.pngrfl-pd__teamname { font-size: 12px; color: var(--pd-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pngrfl-pd__mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: auto; background: var(--pd-line); border: 1px solid var(--pd-line); }
.pngrfl-pd__mini > span { background: #fff; padding: 8px; display: flex; flex-direction: column; gap: 3px; font-family: var(--pngrfl-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--pd-muted); }
.pngrfl-pd__mini b { font: 800 17px/1 Archivo, sans-serif; letter-spacing: 0; color: var(--pd-ink); }
.pngrfl-pd b.is-accent { color: var(--pd-red); }

.pngrfl-pd__table { overflow-x: auto; }
.pngrfl-pd__tr { display: grid; grid-template-columns: 40px minmax(0, 2fr) minmax(0, 1.6fr) minmax(0, 1fr) repeat(5, 52px) 20px; gap: 0 12px; align-items: center; min-width: 760px; width: 100%; min-height: 50px; padding: 0 10px; border: 0; border-bottom: 1px solid var(--pd-line); background: none; text-align: left; color: var(--pd-body); font-size: 13px; }
.pngrfl-pd__tr:nth-child(odd):not(.pngrfl-pd__tr--head) { background: #F2EEE8; }
.pngrfl-pd__tr:not(.pngrfl-pd__tr--head):hover { background: #fff; }
.pngrfl-pd__tr > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pngrfl-pd__tr .r { font-family: var(--pngrfl-mono); font-size: 14px; }
.pngrfl-pd__tr .b { font-weight: 500; color: var(--pd-ink); }
.pngrfl-pd__tr--head { min-height: 40px; font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--pd-muted); border-bottom-color: #D5CDC4; }
.pngrfl-pd__tr--head .r { font-size: 10px; }
.pngrfl-pd__tr-no { font-family: var(--pngrfl-mono); font-size: 14px; color: var(--pd-red); }
.pngrfl-pd__tr-name { font-size: 15px; font-weight: 700; color: var(--pd-ink); }
.pngrfl-pd__tr-name i { font-style: normal; background: var(--pd-gold); font-family: var(--pngrfl-mono); font-size: 9px; padding: 3px 6px; margin-left: 6px; }
.pngrfl-pd__more { display: block; margin: 28px auto 0; min-height: 50px; padding: 0 28px; background: var(--pd-ink); color: var(--pd-paper); border: 0; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.pngrfl-pd__more:hover { background: var(--pd-red); }
.pngrfl-pd__note { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid #D5CDC4; font-size: 12px; line-height: 1.6; color: #8A817A; }

/* Popup */
.pngrfl-pd__modal { position: fixed; inset: 0; z-index: 9999; background: rgba(10,9,8,.78); display: grid; place-items: center; padding: 3vh 4vw; }
.pngrfl-pd__modal[hidden] { display: none; }
.pngrfl-pd__dialog { background: var(--pd-paper); width: 100%; max-width: 1040px; max-height: 94vh; overflow: hidden auto; border-top: 4px solid var(--pd-red); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); outline: 0; }
.pngrfl-pd__side { background: var(--pd-ink); color: var(--pd-paper); display: flex; flex-direction: column; }
.pngrfl-pd__portrait { position: relative; aspect-ratio: 4 / 4.2; background: repeating-linear-gradient(135deg, #201C1A 0 14px, #191615 14px 28px); display: grid; place-items: center; overflow: hidden; }
.pngrfl-pd__portrait .pngrfl-pd__ph { color: rgba(247,244,239,.55); font-size: 10px; }
.pngrfl-pd__ghost--xl { font-size: 180px; bottom: -26px; right: 14px; color: rgba(232,178,58,.16); }
.pngrfl-pd__badge { position: absolute; top: 0; left: 0; background: var(--pd-gold); color: var(--pd-ink); font-family: var(--pngrfl-mono); font-size: 12px; letter-spacing: .12em; padding: 9px 12px; }
.pngrfl-pd__bio { margin: 0; padding: 22px 24px 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.pngrfl-pd__bio dt { font-family: var(--pngrfl-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: rgba(247,244,239,.55); margin-bottom: 4px; }
.pngrfl-pd__bio dd { margin: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.pngrfl-pd__bio .is-dim { color: rgba(247,244,239,.4); }
.pngrfl-pd__main { padding: clamp(22px, 3.2vw, 40px); display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.pngrfl-pd__main section { display: flex; flex-direction: column; gap: 10px; }
.pngrfl-pd__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.pngrfl-pd__head > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pngrfl-pd__head .is-red { color: var(--pd-red); font-size: 11px; }
.pngrfl-pd__head h2 { margin: 0; font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; text-transform: uppercase; line-height: .98; letter-spacing: -.02em; overflow-wrap: anywhere; }
.pngrfl-pd__head-team { font-size: 15px; color: var(--pd-body); }
.pngrfl-pd__close { flex: none; min-height: 44px; padding: 0 14px; background: var(--pd-ink); color: var(--pd-paper); border: 0; font-family: var(--pngrfl-mono); font-size: 12px; letter-spacing: .1em; }
.pngrfl-pd__close:hover { background: var(--pd-red); }
.pngrfl-pd__stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: #D5CDC4; border: 1px solid #D5CDC4; }
.pngrfl-pd__stats > div { background: #fff; padding: 14px 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pngrfl-pd__stats b { font-size: clamp(20px, 2.4vw, 30px); font-weight: 800; line-height: 1; }
.pngrfl-pd__stats span { font-family: var(--pngrfl-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--pd-muted); }
.pngrfl-pd__sec-head { display: flex; justify-content: space-between; gap: 12px; }
.pngrfl-pd__bar-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 76px; gap: 12px; align-items: center; font-size: 13px; color: var(--pd-body); }
.pngrfl-pd__bar-row .r { font-family: var(--pngrfl-mono); font-size: 12px; color: var(--pd-ink); }
.pngrfl-pd__track { height: 8px; background: var(--pd-line); position: relative; }
.pngrfl-pd__track > span { position: absolute; inset: 0 auto 0 0; background: var(--pd-red); }
.pngrfl-pd__track > span.is-gold { background: var(--pd-gold); }
.pngrfl-pd__log { max-height: 260px; overflow-y: auto; border-bottom: 1px solid var(--pd-line); }
.pngrfl-pd__log-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) 70px 54px; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--pd-line); font-size: 14px; }
.pngrfl-pd__log-row > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pngrfl-pd__log-row > span:nth-child(2) > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pngrfl-pd__log-row small { font-family: var(--pngrfl-mono); font-size: 10px; color: #8A817A; }
.pngrfl-pd__log-row .r { font-family: var(--pngrfl-mono); font-size: 12px; color: var(--pd-body); }
.pngrfl-pd__log-row--head { border: 0; padding: 0 0 8px; font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--pd-muted); }
.pngrfl-pd__log-row--head .r { font-size: 10px; color: var(--pd-muted); }
.pngrfl-pd__res { font-family: var(--pngrfl-mono); font-size: 12px; font-weight: 500; }
.pngrfl-pd__res.is-W { color: #1E7A4C; } .pngrfl-pd__res.is-L { color: var(--pd-red); } .pngrfl-pd__res.is-D { color: var(--pd-muted); }
.pngrfl-pd__nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.pngrfl-pd__nav button { flex: 1 1 140px; min-width: 0; min-height: 46px; padding: 0 16px; background: none; border: 2px solid var(--pd-ink); color: var(--pd-ink); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.pngrfl-pd__nav button + button { text-align: right; }
.pngrfl-pd__nav button:hover { background: var(--pd-ink); color: var(--pd-paper); }
@media (prefers-reduced-motion: reduce) { .pngrfl-pd__card { transition: none; } }

/* Missing-headshot stand-in. The brief forbids bracketed placeholder text, so
   an unphotographed player shows their initials over the kit ground. */
.pngrfl-pd__ph {
	font-family: var(--pngrfl-sans);
	font-size: 34px; font-weight: 800; letter-spacing: -.02em;
	color: color-mix(in srgb, var(--pngrfl-ink) 26%, transparent);
}
.pngrfl-pd__ph--xl { font-size: 72px; color: color-mix(in srgb, var(--pngrfl-paper) 34%, transparent); }
.pngrfl-pd__portrait .pngrfl-pd__ph { color: color-mix(in srgb, var(--pngrfl-paper) 34%, transparent); }

/* The tabs, leaders and toolbar sit on the section's Ink ground; everything
   from the results down is Paper. Bleed that colour change out to the
   section's own 5vw padding — the same distance the toolbar already bleeds —
   rather than to 100vw, which would overflow past the theme's fixed sidebar. */
.pngrfl-pd__results,
.pngrfl-pd__note {
	background: var(--pngrfl-paper);
}
.pngrfl-pd__results { padding-bottom: 5vh; }
.pngrfl-pd__note { margin-top: 0; padding-bottom: 8vh; }
/* Players page: the footer strip link under the directory. */
.pngrfl-players-strip .elementor-button { letter-spacing: .16em; }
/* The stat grid adapts to however many statistics the feed supports (5 with a
   full match export, 4 without games), instead of leaving an empty cell. */
.pngrfl-pd__stats { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
/* When the competition's feed has no games-played column, drop it from the
   list too rather than printing a column of zeroes. */
.pngrfl-pd.is-nogames .pngrfl-pd__tr {
	grid-template-columns: 40px minmax(0, 2fr) minmax(0, 1.6fr) minmax(0, 1fr) repeat(4, 52px) 20px;
	min-width: 708px;
}
.pngrfl-pd.is-nogames .pngrfl-pd__tr > span:nth-child(5) { display: none; }
/* Club crests beside team names. Decorative — the team name is always beside
   them in text — so they carry an empty alt and never become the only label. */
.pngrfl-pd__crest {
	width: 18px; height: 18px; object-fit: contain;
	vertical-align: -4px; margin-right: 7px; flex: 0 0 auto;
}
.pngrfl-pd__teamname { display: flex; align-items: center; min-width: 0; }
.pngrfl-pd__tr-team { display: flex; align-items: center; min-width: 0; }
.pngrfl-pd__tr-team .pngrfl-pd__crest { width: 16px; height: 16px; margin-right: 6px; }
.pngrfl-pd__head-team { display: inline-flex; align-items: center; }
.pngrfl-pd__head-team .pngrfl-pd__crest { width: 22px; height: 22px; }
.pngrfl-pd__group h3 { display: flex; align-items: center; gap: 0; }
.pngrfl-pd__crest--lg { width: 30px; height: 30px; margin-right: 12px; }
@media (max-width: 559px) { .pngrfl-pd__crest--lg { width: 24px; height: 24px; margin-right: 9px; } }

/* ---------------------------------------------------------------------------
   Stats v2 (page 239) — Stats Board widget. Supersedes the v1 Competition
   Stats styles, which were removed with that widget.

   Adapted from the handoff bundle: its literal palette and font stacks are
   swapped for the site's token layer (body{--pngrfl-*}, from the Global Colors
   and Global Fonts). Win green stays literal — a fixed semantic colour.
   --------------------------------------------------------------------------- */
/* PNGRFL Stats Board. Append to assets/pngrfl-widgets.css. */
.pngrfl-sb { --sb-ink: var(--pngrfl-ink, var(--pngrfl-ink)); --sb-red: var(--pngrfl-accent, var(--pngrfl-red)); --sb-gold: var(--pngrfl-gold); --sb-paper: var(--pngrfl-paper); --sb-line: var(--pngrfl-hairline); --sb-body: var(--pngrfl-body); --sb-muted: var(--pngrfl-muted); --sb-dim: #8A817A; font-family: var(--pngrfl-sans); color: var(--sb-ink); }
.pngrfl-sb button, .pngrfl-sb select, .pngrfl-sb input { font-family: inherit; border-radius: 0; }
.pngrfl-sb button { cursor: pointer; }
.pngrfl-sb a { color: var(--sb-red); } .pngrfl-sb a:hover { color: var(--sb-gold); }
.pngrfl-sb :focus-visible { outline: 2px solid var(--sb-gold); outline-offset: 2px; }
.pngrfl-sb__mono { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--sb-muted); }
.pngrfl-sb__mono.gold { color: var(--sb-gold); font-size: 11px; letter-spacing: .2em; }
.pngrfl-sb__status { padding: 56px 16px; text-align: center; color: var(--sb-muted); }
.pngrfl-sb__fine { margin: 0; font-size: 12px; line-height: 1.6; color: var(--sb-dim); text-wrap: pretty; }
.pngrfl-sb__fallback { width: 100%; border-collapse: collapse; font-size: 14px; }
.pngrfl-sb__scroll { overflow-x: auto; overflow-y: hidden; background: #fff; border-top: 3px solid var(--sb-ink); }

/* Head (on Ink hero container) */
.pngrfl-sb__head { background: var(--sb-ink); color: var(--sb-paper); display: flex; flex-direction: column; gap: 34px; }
.pngrfl-sb__head:empty { display: none; }
.pngrfl-sb__modes { display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px; background: #1E1A18; }
.pngrfl-sb__modes button { min-height: 50px; padding: 0 30px; border: 0; background: none; color: var(--sb-paper); font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.pngrfl-sb__modes button[aria-selected="true"] { background: var(--sb-gold); color: var(--sb-ink); }
.pngrfl-sb__tabs { display: flex; flex-wrap: wrap; gap: 0 40px; border-bottom: 1px solid rgba(247,244,239,.2); }
.pngrfl-sb__tabs button { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; padding: 14px 0 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: rgba(247,244,239,.5); text-align: left; }
.pngrfl-sb__tabs b { font-size: clamp(20px, 2.4vw, 30px); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.pngrfl-sb__tabs span { font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.pngrfl-sb__tabs button[aria-selected="true"] { color: var(--sb-paper); border-bottom-color: var(--sb-gold); }
.pngrfl-sb__tabs button[aria-selected="true"] span { color: var(--sb-gold); }
.pngrfl-sb__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 2px; background: rgba(247,244,239,.16); border: 1px solid rgba(247,244,239,.16); border-bottom: 0; }
.pngrfl-sb__tile { background: var(--sb-ink); border: 0; border-bottom: 3px solid transparent; color: var(--sb-paper); padding: 20px 18px; display: flex; flex-direction: column; gap: 8px; text-align: left; min-width: 0; }
.pngrfl-sb__tile:hover, .pngrfl-sb__tile[aria-pressed="true"] { background: #1E1A18; }
.pngrfl-sb__tile[aria-pressed="true"] { border-bottom-color: var(--sb-gold); }
.pngrfl-sb__tile .k { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(247,244,239,.6); }
.pngrfl-sb__tile b { font-size: clamp(28px, 3vw, 40px); font-weight: 800; line-height: 1; color: var(--sb-gold); }
.pngrfl-sb__tile .n { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pngrfl-sb__tile .t { font-size: 12px; color: rgba(247,244,239,.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sections */
.pngrfl-sb__body { padding-bottom: 10vh; }
.pngrfl-sb__sec { padding-top: 7vh; display: flex; flex-direction: column; gap: 20px; }
.pngrfl-sb__sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.pngrfl-sb__sec-head > div:first-child { display: flex; flex-direction: column; gap: 14px; }
.pngrfl-sb__sec-head h2 { margin: 0; font-size: clamp(30px, 4vw, 52px); font-weight: 800; text-transform: uppercase; letter-spacing: -.025em; line-height: .95; }
.pngrfl-sb__eyebrow { display: flex; align-items: center; gap: 14px; font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--sb-red); }
.pngrfl-sb__eyebrow span { width: 34px; height: 2px; background: var(--sb-red); }

/* Filters */
.pngrfl-sb__filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pngrfl-sb__search { flex: 1 1 220px; min-width: 0; background: #fff; border: 1px solid #D5CDC4; color: var(--sb-ink); font-size: 15px; padding: 12px 14px; }
.pngrfl-sb__team { flex: 0 1 260px; min-width: 0; min-height: 46px; background: #fff; border: 1px solid #D5CDC4; color: var(--sb-ink); font-size: 14px; padding: 0 12px; }
.pngrfl-sb__chips, .pngrfl-sb__seg { display: flex; flex-wrap: wrap; gap: 6px; }
.pngrfl-sb__seg { gap: 0; border: 1px solid var(--sb-ink); flex-wrap: nowrap; }
.pngrfl-sb__chips button, .pngrfl-sb__seg button { min-height: 40px; padding: 0 12px; background: none; border: 1px solid var(--sb-ink); color: var(--sb-ink); font: 11px var(--pngrfl-mono); letter-spacing: .12em; text-transform: uppercase; }
.pngrfl-sb__seg button { border: 0; padding: 0 16px; min-height: 42px; }
.pngrfl-sb__chips button[aria-pressed="true"], .pngrfl-sb__seg button[aria-pressed="true"] { background: var(--sb-ink); color: var(--sb-paper); }

/* Player table */
.pngrfl-sb__ptable { min-width: 1100px; }
.pngrfl-sb__prow { display: grid; grid-template-columns: 40px minmax(230px, 2.4fr) minmax(100px, 1fr) repeat(var(--cols, 12), minmax(46px, .5fr)); gap: 0 8px; align-items: center; width: 100%; min-height: 52px; padding: 0 14px; border: 0; background: none; text-align: left; color: var(--sb-ink); }
.pngrfl-sb__ptable[style] .pngrfl-sb__prow { grid-template-columns: 40px minmax(230px, 2.4fr) minmax(100px, 1fr) repeat(var(--cols), minmax(46px, .5fr)); }
.pngrfl-sb__pwrap { border-bottom: 1px solid var(--sb-line); }
.pngrfl-sb__pwrap.is-open { background: #FBF9F6; }
.pngrfl-sb__pwrap > .pngrfl-sb__prow:hover { background: var(--sb-paper); }
.pngrfl-sb__prow--head { min-height: 0; align-items: stretch; border-bottom: 1px solid #D5CDC4; }
.pngrfl-sb__prow--head > span { display: flex; align-items: center; font: 10px var(--pngrfl-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sb-muted); }
.pngrfl-sb__prow--head button, .pngrfl-sb__trow--head button { padding: 14px 0 11px; background: none; border: 0; border-bottom: 3px solid transparent; font: 10px var(--pngrfl-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sb-muted); text-align: right; white-space: nowrap; }
.pngrfl-sb__prow--head button[aria-pressed="true"], .pngrfl-sb__trow--head button[aria-pressed="true"] { background: var(--sb-paper); border-bottom-color: var(--sb-red); color: var(--sb-ink); }
.pngrfl-sb__prow .rk { font: 13px var(--pngrfl-mono); color: var(--sb-red); }
.pngrfl-sb__prow .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pngrfl-sb__prow .who b, .pngrfl-sb__prow .who small, .pngrfl-sb__prow .pos { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pngrfl-sb__prow .who b { font-size: 15px; } .pngrfl-sb__prow .who small { font-size: 12px; color: var(--sb-muted); }
.pngrfl-sb__prow .pos { font-size: 13px; color: var(--sb-body); }
.pngrfl-sb .v { font: 14px var(--pngrfl-mono); text-align: right; color: var(--sb-body); }
.pngrfl-sb .v.is-sort { color: var(--sb-ink); font-weight: 700; }
.pngrfl-sb .v.is-lead { color: var(--sb-red); font-weight: 700; }
.pngrfl-sb .v.is-zero { color: #B5ACA3; }
.pngrfl-sb .v.is-pos { color: #1E7A4C; } .pngrfl-sb .v.is-neg { color: var(--sb-red); }
.pngrfl-sb__detail { position: sticky; left: 0; width: min(100%, calc(90vw - 28px)); max-width: 820px; box-sizing: border-box; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px; padding: 8px 14px 26px; }
.pngrfl-sb__detail > div { display: flex; flex-direction: column; gap: 10px; }
.pngrfl-sb__tb { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; align-items: end; height: 84px; }
.pngrfl-sb__tb > span { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.pngrfl-sb__tb small { font: 10px var(--pngrfl-mono); color: var(--sb-body); }
.pngrfl-sb__tb i { display: block; width: 100%; min-height: 2px; background: var(--sb-ink); }
.pngrfl-sb__tb i.is-max { background: var(--sb-red); }
.pngrfl-sb__tb-axis { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; font: 9px var(--pngrfl-mono); color: var(--sb-dim); text-align: center; }
.pngrfl-sb__facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; align-content: start; }
.pngrfl-sb__facts dt { font: 9px var(--pngrfl-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sb-muted); margin-bottom: 4px; }
.pngrfl-sb__facts dd { margin: 0; font-size: 16px; font-weight: 700; }
.pngrfl-sb__facts .span { grid-column: 1 / -1; }
.pngrfl-sb__more { align-self: center; min-height: 50px; padding: 0 28px; background: var(--sb-ink); color: var(--sb-paper); border: 0; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.pngrfl-sb__more:hover { background: var(--sb-red); }

/* Team table */
.pngrfl-sb__ttable { min-width: 1140px; }
.pngrfl-sb__trow { display: grid; grid-template-columns: minmax(230px, 2.4fr) repeat(13, minmax(52px, .5fr)); gap: 0 8px; align-items: center; width: 100%; min-height: 50px; padding: 0 14px; border: 0; border-bottom: 1px solid var(--sb-line); border-left: 4px solid transparent; background: none; text-align: left; color: var(--sb-ink); }
.pngrfl-sb__trow:not(.pngrfl-sb__trow--head):hover { background: var(--sb-paper); }
.pngrfl-sb__trow.is-pick { border-left-color: var(--sb-gold); background: #FBF9F6; }
.pngrfl-sb__trow--head { min-height: 0; align-items: stretch; border-bottom-color: #D5CDC4; }
.pngrfl-sb__trow--head > span { display: flex; align-items: center; font: 10px var(--pngrfl-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sb-muted); }
.pngrfl-sb__trow .name { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Profile */
.pngrfl-sb__profile { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; padding-top: 5vh; }
.pngrfl-sb__pcard { background: var(--sb-ink); color: var(--sb-paper); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 24px; }
.pngrfl-sb__pcard .top { display: flex; flex-direction: column; gap: 10px; }
.pngrfl-sb__pcard h3 { margin: 0; font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; text-transform: uppercase; line-height: .98; letter-spacing: -.02em; }
.pngrfl-sb__pcard .form { display: flex; gap: 4px; }
.pngrfl-sb__pcard .form i { width: 26px; height: 26px; display: grid; place-items: center; font: normal 500 11px var(--pngrfl-mono); }
.pngrfl-sb__pcard .form .is-W { background: var(--sb-gold); color: var(--sb-ink); } .pngrfl-sb__pcard .form .is-L { background: var(--sb-body); color: var(--sb-paper); } .pngrfl-sb__pcard .form .is-D { background: var(--sb-paper); color: var(--sb-ink); }
.pngrfl-sb__pcard .big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(247,244,239,.16); border: 1px solid rgba(247,244,239,.16); }
.pngrfl-sb__pcard .big > div { background: var(--sb-ink); padding: 16px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pngrfl-sb__pcard .big b { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; line-height: 1; }
.pngrfl-sb__pcard .big b.gold { color: var(--sb-gold); }
.pngrfl-sb__pcard .big span { font: 9px var(--pngrfl-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(247,244,239,.6); }
.pngrfl-sb__pcard .pngrfl-sb__mono { color: rgba(247,244,239,.6); }
.pngrfl-sb__pcard .pngrfl-sb__mono.gold { color: var(--sb-gold); }
.pngrfl-sb__pcard .lines { display: flex; height: 14px; gap: 2px; margin: 10px 0; }
.pngrfl-sb__pcard .legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; }
.pngrfl-sb__pcard .legend span { display: flex; align-items: center; gap: 8px; }
.pngrfl-sb__pcard .legend i { width: 10px; height: 10px; }
.pngrfl-sb__pcard .legend em { font: normal 13px var(--pngrfl-mono); color: rgba(247,244,239,.6); }
.pngrfl-sb .l-backs { background: var(--sb-gold); } .pngrfl-sb .l-spine { background: var(--sb-red); } .pngrfl-sb .l-fwd { background: var(--sb-paper); } .pngrfl-sb .l-bench { background: var(--sb-muted); }
.pngrfl-sb__pcard .facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.pngrfl-sb__pcard .facts dt { font: 9px var(--pngrfl-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(247,244,239,.55); margin-bottom: 4px; }
.pngrfl-sb__pcard .facts dd { margin: 0; font-size: 15px; font-weight: 600; }
.pngrfl-sb__scorers { background: #fff; border-top: 3px solid var(--sb-red); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 18px; }
.pngrfl-sb__scorers .ph { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pngrfl-sb__scorers .ph b { font-size: 20px; font-weight: 800; text-transform: uppercase; }
.pngrfl-sb__scorers ol { list-style: none; margin: 0; padding: 0; }
.pngrfl-sb__scorers li { display: grid; grid-template-columns: 26px minmax(0, 1fr) 36px 36px 48px; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--sb-line); font: 14px var(--pngrfl-mono); color: var(--sb-body); }
.pngrfl-sb__scorers li > span:nth-child(n+3) { text-align: right; }
.pngrfl-sb__scorers .rk { font-size: 13px; color: var(--sb-red); }
.pngrfl-sb__scorers .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-family: Archivo, sans-serif; }
.pngrfl-sb__scorers .who b { font-size: 15px; color: var(--sb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pngrfl-sb__scorers .who small { font-size: 12px; color: var(--sb-muted); }
.pngrfl-sb__scorers .b { font-size: 15px; font-weight: 500; color: var(--sb-ink); }
.pngrfl-sb__scorers .halves { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.pngrfl-sb__scorers .hrow { display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr) 90px; gap: 10px; align-items: center; font-size: 13px; color: var(--sb-body); }
.pngrfl-sb__scorers .hrow .f, .pngrfl-sb__scorers .hrow .a { height: 10px; background: #F2EEE8; display: flex; }
.pngrfl-sb__scorers .hrow .f { justify-content: flex-end; }
.pngrfl-sb__scorers .hrow .f i { background: var(--sb-ink); } .pngrfl-sb__scorers .hrow .a i { background: var(--sb-red); }
.pngrfl-sb__scorers .hrow .v { font: 12px var(--pngrfl-mono); text-align: right; color: var(--sb-ink); }
.pngrfl-sb__scorers .hlegend { display: flex; gap: 16px; padding-left: 80px; font: 10px var(--pngrfl-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sb-muted); }
.pngrfl-sb__scorers .hlegend span { display: flex; align-items: center; gap: 6px; }
.pngrfl-sb__scorers .hlegend i { width: 10px; height: 10px; } .pngrfl-sb__scorers .hlegend i.f { background: var(--sb-ink); } .pngrfl-sb__scorers .hlegend i.a { background: var(--sb-red); }

/* Heatmap */
.pngrfl-sb__heat { min-width: 760px; display: flex; flex-direction: column; gap: 3px; padding: 14px; }
.pngrfl-sb__heat .hr { display: grid; grid-template-columns: minmax(200px, 1.6fr) repeat(8, minmax(0, 1fr)) 56px; gap: 3px; align-items: stretch; }
.pngrfl-sb__heat .head { font: 10px var(--pngrfl-mono); letter-spacing: .1em; color: var(--sb-muted); padding-bottom: 4px; }
.pngrfl-sb__heat .head span, .pngrfl-sb__heat .foot span { text-align: center; }
.pngrfl-sb__heat .name { font-size: 14px; font-weight: 500; display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; }
.pngrfl-sb__heat .name.is-pick { font-weight: 800; }
.pngrfl-sb__heat .cell { display: grid; place-items: center; min-height: 38px; font: 13px var(--pngrfl-mono); }
.pngrfl-sb__heat .r { text-align: right !important; display: flex; align-items: center; justify-content: flex-end; font: 500 14px var(--pngrfl-mono); }
.pngrfl-sb__heat .foot { border-top: 2px solid var(--sb-ink); padding-top: 6px; margin-top: 4px; font: 500 13px var(--pngrfl-mono); }
.pngrfl-sb__heat .foot .pngrfl-sb__mono { text-align: left; display: flex; align-items: center; }

/* The board's head is Ink and everything from the tables down is Paper. Bleed
   that change to the section's own 5vw padding, not to 100vw: the theme's
   fixed sidebar means this column is not centred in the viewport. */
.pngrfl-sb__body { background: var(--pngrfl-paper); padding-block: 5vh 8vh; }
.pngrfl-sb { overflow-x: clip; }

/* ---------------------------------------------------------------------------
   Ladder (page 237) — Ladder widget.

   Adapted from the handoff bundle: its literal palette and font stacks are
   swapped for the site's token layer (body{--pngrfl-*}, from the Global Colors
   and Global Fonts). Win green and the race-line palette stay literal — the
   first is a fixed semantic colour, the second is a 12-way categorical scale
   that must stay distinguishable and is defined in ladder.js.
   --------------------------------------------------------------------------- */
/* PNGRFL Ladder v2. Append to assets/pngrfl-widgets.css.
   Literal colours are the design's; everything else goes through the site's
   token layer (body{--pngrfl-*}). Win green and the race palette stay literal:
   the first is a fixed semantic colour, the second a 12-way categorical scale
   defined in ladder.js. */
.pngrfl-ld { --ld-ink: var(--pngrfl-ink); --ld-red: var(--pngrfl-accent, var(--pngrfl-red)); --ld-gold: var(--pngrfl-gold); --ld-paper: var(--pngrfl-paper); --ld-line: var(--pngrfl-hairline); --ld-body: var(--pngrfl-body); --ld-muted: var(--pngrfl-muted); --ld-dim: #8A817A; --ld-bleed: max(5vw, (100% - 1240px) / 2); font-family: var(--pngrfl-sans); color: var(--ld-ink); }
.pngrfl-ld button, .pngrfl-ld input, .pngrfl-ld select { font-family: inherit; border-radius: 0; }
.pngrfl-ld button, .pngrfl-ld select { cursor: pointer; }
.pngrfl-ld :focus-visible { outline: 2px solid var(--ld-gold); outline-offset: 2px; }
.pngrfl-ld .r { text-align: right; }
.pngrfl-ld .c { text-align: center; }
.pngrfl-ld__mono { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ld-muted); }
.pngrfl-ld__status, .pngrfl-ld__empty { padding: 36px 20px; background: #fff; color: var(--ld-muted); font-size: 15px; }
.pngrfl-ld__fine { margin: 8px 0 0; padding-top: 18px; border-top: 1px solid #D5CDC4; font-size: 12px; line-height: 1.6; color: var(--ld-dim); text-wrap: pretty; }
.pngrfl-ld__fallback { width: 100%; border-collapse: collapse; font-size: 14px; }

.pngrfl-ld__head:empty { display: none; }

/* ── Shared competition masthead ───────────────────────────────────────
   One Ink hero and one Competition / Season / Round bar for the Ladder,
   Draw, Stats and Players pages (assets/comp-hero.js). Each page mounts it
   in its own head element; everything below here is page-agnostic. */
.pngrfl-hero {
	--hero-ink: var(--pngrfl-ink);
	--hero-gold: var(--pngrfl-gold);
	--hero-paper: var(--pngrfl-paper);
	--hero-red: var(--pngrfl-accent, var(--pngrfl-red));
	--hero-bleed: max(5vw, (100% - 1240px) / 2);
	position: relative;
	overflow: hidden;
	background: var(--hero-ink);
	color: var(--hero-paper);
	padding: 7vh var(--hero-bleed) 0;
	font-family: var(--pngrfl-sans);
	box-sizing: border-box;
	width: 100%;
}
.pngrfl-hero::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, #201C1A 0 14px, #191615 14px 28px); }
.pngrfl-hero__in { position: relative; display: flex; flex-direction: column; gap: 28px; }
.pngrfl-hero__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px 48px; }
.pngrfl-hero__title { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pngrfl-hero__eyebrow { display: flex; align-items: center; gap: 14px; font: 11px var(--pngrfl-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--hero-gold); }
.pngrfl-hero__eyebrow > span { width: 34px; height: 2px; background: var(--hero-red); flex: none; }
/* The competition crest sits with the title and scales with it. */
.pngrfl-hero__h1 { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); min-width: 0; }
.pngrfl-hero__crest { flex: none; width: clamp(56px, 8vw, 104px); height: clamp(56px, 8vw, 104px); object-fit: contain; }
.pngrfl-hero h1 { margin: 0; font-size: clamp(40px, 7vw, 96px); line-height: .92; font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; }
.pngrfl-hero__stamp { font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(247,244,239,.65); }

.pngrfl-hero__ctl { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 28px; }
.pngrfl-hero__field { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px 0 16px; border: 1px solid rgba(247,244,239,.3); background: rgba(18,16,15,.6); flex: 1; min-width: 0; box-sizing: border-box; }
.pngrfl-hero__field.is-comp { flex: 1.4 1 260px; }
.pngrfl-hero__field.is-season { flex: .7 1 170px; }
.pngrfl-hero__field > span { flex: none; font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--hero-gold); }
.pngrfl-hero__field select { flex: 1; min-width: 0; min-height: 50px; border: 0; border-radius: 0; outline: none; background: transparent; color: var(--hero-paper); font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.pngrfl-hero__field select option { color: var(--hero-ink); }
.pngrfl-hero__round { display: flex; flex: 1 1 280px; min-width: 0; gap: 8px; }
.pngrfl-hero__round > button { flex: none; width: 52px; min-height: 52px; border: 1px solid rgba(247,244,239,.3); border-radius: 0; background: rgba(18,16,15,.6); color: var(--hero-paper); font-family: inherit; font-size: 16px; cursor: pointer; }
.pngrfl-hero__round > button:hover:not(:disabled) { border-color: var(--hero-gold); color: var(--hero-gold); }
.pngrfl-hero__round > button:disabled { opacity: .35; cursor: not-allowed; }
.pngrfl-hero :focus-visible { outline: 2px solid var(--hero-gold); outline-offset: 2px; }

/* The hero is a full-bleed Ink band, so the widgets that carry it hold their
   own content on the site 1240 measure instead of leaning on a boxed
   Elementor container. Same gutter as the rest of the site. */
.pngrfl-draw--top > .pngrfl-draw__next,
.pngrfl-draw--main > .pngrfl-draw__head,
.pngrfl-draw--main > .pngrfl-draw__strip,
.pngrfl-draw--main > .pngrfl-draw__body,
.pngrfl-draw--main > .pngrfl-draw__legend,
.pngrfl-sb__modes,
.pngrfl-sb__tiles,
.pngrfl-sb__body,
.pngrfl-pd > *:not(.pngrfl-pd__tabs):not(.pngrfl-pd__modal) {
	padding-inline: max(5vw, (100% - 1240px) / 2);
	box-sizing: border-box;
}

/* Club crest, or initials where the site holds no logo for that club. */
.pngrfl-badge { border-radius: 50%; object-fit: contain; background: #fff; }
.pngrfl-badge.is-init { display: grid; place-items: center; font-weight: 800; letter-spacing: .02em; font-family: var(--pngrfl-sans); }

@media (max-width: 640px) {
	.pngrfl-hero__ctl { gap: 6px; }
	.pngrfl-hero__field.is-comp, .pngrfl-hero__field.is-season, .pngrfl-hero__round { flex: 1 1 100%; }
	.pngrfl-hero__crest { width: 52px; height: 52px; }
}

/* ── Sections (Paper) ──────────────────────────────────────────────── */
.pngrfl-ld__body { background: var(--pngrfl-paper); padding: 0 var(--ld-bleed) 10vh; }
.pngrfl-ld__sec { padding-top: 6vh; display: flex; flex-direction: column; gap: 18px; }
.pngrfl-ld__sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 16px; }
.pngrfl-ld__sec-head > div:first-child { display: flex; flex-direction: column; gap: 14px; }
.pngrfl-ld__sec-head h2 { margin: 0; font-size: clamp(26px, 3.4vw, 42px); font-weight: 800; text-transform: uppercase; letter-spacing: -.025em; line-height: .95; }
.pngrfl-ld__eyebrow { display: flex; align-items: center; gap: 14px; font: 11px var(--pngrfl-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--ld-red); }
.pngrfl-ld__eyebrow > span { width: 34px; height: 2px; background: var(--ld-red); flex: none; }

/* ── Standings table ───────────────────────────────────────────────── */
.pngrfl-ld__scroll { overflow-x: auto; overflow-y: hidden; background: #fff; border-top: 3px solid var(--ld-ink); container-type: inline-size; }
/* The design asks for min-width 1180px, but its own column set needs 1258:
   290+44+56+(4*40)+(2*50)+56+(2*70)+132+160 = 1138, plus 13 8px gaps = 1242,
   plus the row's 16px right padding. At 1180 the grid overflows each row by
   78px, which also robs the sticky season strip of that much travel. */
.pngrfl-ld__table { min-width: 1258px; }
.pngrfl-ld__row { display: grid; grid-template-columns: 290px 44px 56px repeat(4, 40px) repeat(2, 50px) 56px repeat(2, 70px) 132px minmax(160px, 1fr); gap: 0 8px; align-items: stretch; width: 100%; min-height: 60px; padding: 0 16px 0 0; border: 0; background: #fff; text-align: left; color: var(--ld-ink); font: 14px var(--pngrfl-mono); }
.pngrfl-ld__row > span { display: flex; align-items: center; color: var(--ld-body); }
.pngrfl-ld__row > span.r { justify-content: flex-end; }
.pngrfl-ld__row > span.c { justify-content: center; font-size: 12px; }
.pngrfl-ld__row:not(.pngrfl-ld__row--head):hover { background: var(--ld-paper); }
.pngrfl-ld__row:not(.pngrfl-ld__row--head):hover .club { background: var(--ld-paper); }
.pngrfl-ld__row--head { min-height: 0; background: #fff; border-bottom: 1px solid #D5CDC4; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.pngrfl-ld__row--head > span { color: var(--ld-muted); padding: 14px 0; }
.pngrfl-ld__row--head > .club { gap: 10px; padding: 14px 0 14px 20px; }
.pngrfl-ld__row--head > .club .pos { width: 30px; flex: none; font: inherit; color: inherit; }
.pngrfl-ld__row--head > .club .mv { width: 26px; flex: none; }
.pngrfl-ld__row--head > .club .bdg { width: 34px; flex: none; }
.pngrfl-ld__row--head > .pts { justify-content: center; background: var(--ld-ink); color: var(--ld-gold); }
.pngrfl-ld__row--head > .nx { padding-left: 12px; }

/* The club cell stays put while the rest of the table scrolls sideways. */
.pngrfl-ld__row > .club { position: sticky; left: 0; z-index: 1; background: #fff; display: flex; align-items: center; gap: 10px; padding-left: 16px; border-left: 4px solid transparent; min-width: 0; }
.pngrfl-ld__row.is-in > .club { border-left-color: var(--ld-red); }
.pngrfl-ld__row.is-top > .club { border-left-color: var(--ld-gold); }
.pngrfl-ld__club { display: flex; flex-direction: column; border-bottom: 1px solid var(--ld-line); }
.pngrfl-ld__club.is-cut { border-bottom: 2px solid var(--ld-ink); }
.pngrfl-ld__club.is-out .pngrfl-ld__row > span { color: var(--ld-dim); }
.pngrfl-ld__row .pos { width: 30px; flex: none; font: 800 20px var(--pngrfl-sans); color: var(--ld-dim); }
.pngrfl-ld__row.is-in .pos, .pngrfl-ld__row.is-top .pos { color: var(--ld-ink); }
.pngrfl-ld__row .mv { width: 26px; flex: none; font-size: 11px; color: #B5ACA3; }
.pngrfl-ld__row .mv.up { color: #1E7A4C; } .pngrfl-ld__row .mv.down { color: var(--ld-red); }
.pngrfl-ld__row .name { font: 700 15px var(--pngrfl-sans); line-height: 1.15; color: var(--ld-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pngrfl-ld__row .dim { color: var(--ld-dim); }
.pngrfl-ld__row .pos-d { color: #1E7A4C; } .pngrfl-ld__row .neg-d { color: var(--ld-red); }
.pngrfl-ld__row > .pts { justify-content: center; background: rgba(232,178,58,.18); font: 800 20px var(--pngrfl-sans); color: var(--ld-ink); }
.pngrfl-ld__row > .form { display: flex; gap: 3px; justify-content: flex-end; }
.pngrfl-ld__row .form i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: normal 500 10px var(--pngrfl-mono); }
.pngrfl-ld i.is-W { background: #1E7A4C; color: #fff; } .pngrfl-ld i.is-L { background: var(--ld-red); color: #fff; } .pngrfl-ld i.is-D { background: var(--ld-gold); color: var(--ld-ink); }
.pngrfl-ld__row > .nx { display: flex; align-items: center; gap: 8px; padding-left: 12px; min-width: 0; }
.pngrfl-ld__row .nx .ha { flex: none; width: 14px; font: 10px var(--pngrfl-mono); color: var(--ld-muted); }
.pngrfl-ld__row .nx .nm { font: 600 13px var(--pngrfl-sans); color: var(--ld-body); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The strip is sticky so it stays with the club while the table scrolls
   sideways. A sticky box can only travel as far as its own slack inside its
   containing block, so sizing it off the 1180px table (as the design's
   min(100%, 90vw) does) gives it ~290px of travel and it then slides away.
   Sizing it off the scrollport instead — 100cqw, the scroll container's own
   width — gives it exactly the slack the scroll range needs. */
.pngrfl-ld__season { position: sticky; left: 0; width: min(100cqw, 1000px); max-width: 100cqw; box-sizing: border-box; padding: 6px 16px 22px 20px; display: flex; flex-direction: column; gap: 10px; background: #FBF9F6; }
.pngrfl-ld__season .games { display: flex; flex-wrap: wrap; gap: 4px; }
.pngrfl-ld__season .g { width: 64px; display: flex; flex-direction: column; gap: 3px; padding: 8px 6px; background: #fff; color: var(--ld-ink); }
.pngrfl-ld__season .g.is-W { background: var(--ld-ink); color: var(--ld-paper); } .pngrfl-ld__season .g.is-L { background: var(--ld-line); } .pngrfl-ld__season .g.is-D { background: var(--ld-gold); }
.pngrfl-ld__season .g small { font: 9px var(--pngrfl-mono); letter-spacing: .08em; opacity: .75; }
.pngrfl-ld__season .g b { font-size: 13px; font-weight: 800; }
.pngrfl-ld__season .g span { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pngrfl-ld__legend { display: flex; flex-wrap: wrap; gap: 10px 22px; font: 10px var(--pngrfl-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ld-muted); }
.pngrfl-ld__legend span { display: flex; align-items: center; gap: 8px; }
.pngrfl-ld__legend i { width: 4px; height: 14px; flex: none; }
.pngrfl-ld__legend i.top { background: var(--ld-gold); } .pngrfl-ld__legend i.in { background: var(--ld-red); }
.pngrfl-ld__legend i.line { width: 18px; height: 2px; background: var(--ld-ink); }

/* ── Race ──────────────────────────────────────────────────────────── */
.pngrfl-ld__race { background: var(--ld-ink); padding: 24px 0 18px; overflow-x: auto; overflow-y: hidden; }
.pngrfl-ld__race .inner { min-width: 760px; box-sizing: border-box; padding-right: 16px; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 8px; }
.pngrfl-ld__race svg { display: block; width: 100%; }
.pngrfl-ld__race .labels { display: flex; flex-direction: column; justify-content: space-around; }
.pngrfl-ld__race .labels button { background: none; border: 0; padding: 0 0 0 6px; display: flex; align-items: center; gap: 8px; min-width: 0; text-align: left; color: var(--ld-paper); font-size: 13px; font-weight: 500; }
.pngrfl-ld__race .labels button.is-dim { color: rgba(247,244,239,.4); } .pngrfl-ld__race .labels button.is-on { font-weight: 800; }
.pngrfl-ld__race .labels em { font: normal 11px var(--pngrfl-mono); width: 18px; flex: none; }
.pngrfl-ld__race .labels span { line-height: 1.15; overflow-wrap: anywhere; }
.pngrfl-ld__race .x { display: flex; justify-content: space-between; padding-top: 8px; font: 10px var(--pngrfl-mono); color: rgba(247,244,239,.5); }

/* ── Finals ────────────────────────────────────────────────────────── */
.pngrfl-ld__fscroll { overflow-x: auto; overflow-y: hidden; }
.pngrfl-ld__finals { display: grid; gap: 16px; min-width: min-content; }
.pngrfl-ld__finals .col { display: flex; flex-direction: column; gap: 12px; }
.pngrfl-ld__finals .ch { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--ld-ink); }
.pngrfl-ld__finals .ch b { font-size: 17px; font-weight: 800; text-transform: uppercase; }
.pngrfl-ld__finals .ch span { font: 10px var(--pngrfl-mono); letter-spacing: .12em; color: var(--ld-muted); }
.pngrfl-ld__finals .games { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 12px; }
.pngrfl-ld__finals .fm { background: #fff; border-top: 3px solid var(--ld-red); }
.pngrfl-ld__finals .side { display: grid; grid-template-columns: 20px minmax(0, 1fr) 36px; gap: 8px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--ld-line); }
.pngrfl-ld__finals .side em { font: normal 11px var(--pngrfl-mono); color: var(--ld-red); }
.pngrfl-ld__finals .side span { font-size: 15px; line-height: 1.2; font-weight: 500; text-wrap: pretty; }
.pngrfl-ld__finals .side b { font-size: 22px; font-weight: 800; text-align: right; }
.pngrfl-ld__finals .side.is-win span { font-weight: 800; }
.pngrfl-ld__finals .side.is-loss span, .pngrfl-ld__finals .side.is-loss b { color: var(--ld-dim); }
/* A finals fixture's meta line ("UPCOMING · 6 SEPT · National Football
   Stadium") loses the venue to an ellipsis at ~900px, where the column is
   300px. The column has room for two lines, so let it wrap. */
.pngrfl-ld__finals .fm small { display: block; padding: 8px 14px; font: 10px var(--pngrfl-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ld-muted); white-space: normal; line-height: 1.45; }
.pngrfl-ld__finals .fm.is-next { background: var(--ld-ink); border-top-color: var(--ld-gold); color: var(--ld-paper); }
.pngrfl-ld__finals .fm.is-next .side { border-bottom-color: rgba(247,244,239,.14); }
.pngrfl-ld__finals .fm.is-next em, .pngrfl-ld__finals .fm.is-next small { color: var(--ld-gold); }

.pngrfl-ld { overflow-x: clip; }


/* =====================================================================
   ACADEMY (page 591) — handoff: design_handoff_academy_page
   Every colour resolves through the kit token layer, so a Site Settings
   change carries here. The recurring pattern is a flex-wrap row with a 2px
   gap over an ink ground: the gap reads as a hairline and the last row
   always fills, so no grid ever shows an empty cell.
   ===================================================================== */

/* A panel that sets its own display needs this to honour [hidden]; the
   Academy widgets rely on it to hide the inactive tab panels. */
.pngrfl-acpath__grid[hidden],
.pngrfl-acpath__panel[hidden],
.pngrfl-acaud__panel[hidden],
.pngrfl-acloc__card[hidden],
.pngrfl-accal__row[hidden],
.pngrfl-accal__empty[hidden] { display: none !important; }

.pngrfl-acpath__tab:focus-visible,
.pngrfl-acpath__stage:focus-visible,
.pngrfl-acloc__tile:focus-visible,
.pngrfl-acaud__tab:focus-visible,
.pngrfl-accal__filter select:focus-visible {
	outline: 2px solid var(--pngrfl-gold);
	outline-offset: -2px;
}

/* Section helpers used by the native containers on the page ------------- */

/* Hero: the stripe ground comes from .pngrfl-stripes; this lays the bottom
   gradient over it so the copy stays legible once a photo is dropped in. */
.pngrfl-ac-hero { position: relative; min-height: 78vh; }
.pngrfl-ac-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(to top,
		color-mix(in srgb, var(--pngrfl-ink-black) 95%, transparent) 0%,
		color-mix(in srgb, var(--pngrfl-ink-black) 50%, transparent) 48%,
		color-mix(in srgb, var(--pngrfl-ink-black) 20%, transparent) 100%);
}
/* Next Step: the same ground under a flat veil. */
.pngrfl-ac-veil { position: relative; }
.pngrfl-ac-veil::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: color-mix(in srgb, var(--pngrfl-ink-black) 72%, transparent);
}
.pngrfl-ac-measure-78 p { max-width: 78ch; }
.pngrfl-ac-measure-62 p { max-width: 62ch; }

/* §3 Bridge strip ------------------------------------------------------ */

.pngrfl-acbridge { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.pngrfl-acbridge__caption {
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.18em;
	text-transform: uppercase; padding-right: 18px;
	color: color-mix(in srgb, var(--pngrfl-paper) 55%, transparent);
}
.pngrfl-acbridge__block {
	flex: 1 1 180px; min-width: 0; padding: 14px 18px;
	background: var(--pngrfl-ink-3); color: var(--pngrfl-paper);
	font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
	text-decoration: none; transition: background-color .18s ease, color .18s ease;
}
.pngrfl-acbridge__block.is-on { background: var(--pngrfl-red); }
a.pngrfl-acbridge__block:hover,
a.pngrfl-acbridge__block:focus-visible { background: var(--pngrfl-gold); color: var(--pngrfl-ink); }

/* §4 / §7 / §13 / §17 Card grid ---------------------------------------- */

.pngrfl-accards {
	--accards-basis: 260px;
	--accards-minh: 300px;
	--accards-hover: var(--pngrfl-gold);
	display: flex; flex-wrap: wrap; gap: 2px;
	background: var(--pngrfl-ink); border: 1px solid var(--pngrfl-ink);
}
.pngrfl-accards__card {
	flex: 1 1 var(--accards-basis); min-width: 0;
	background: var(--pngrfl-card); color: var(--pngrfl-ink);
	display: flex; flex-direction: column; gap: 18px;
	min-height: var(--accards-minh); padding: 34px 28px 28px;
	text-decoration: none; transition: background-color .18s ease, color .18s ease;
}
a.pngrfl-accards__card:hover,
a.pngrfl-accards__card:focus-visible { background: var(--accards-hover); color: var(--pngrfl-ink); }

.pngrfl-accards--large .pngrfl-accards__card.is-dark { background: var(--pngrfl-ink); color: var(--pngrfl-paper); }
.pngrfl-accards--large .pngrfl-accards__num { font-size: clamp(56px, 6vw, 84px); line-height: 0.85; font-weight: 800; letter-spacing: -0.04em; }
.pngrfl-accards--large .pngrfl-accards__title { font-size: 24px; font-weight: 800; text-transform: uppercase; line-height: 1.05; letter-spacing: -0.005em; }
.pngrfl-accards--large .pngrfl-accards__text { font-size: 15px; line-height: 1.55; opacity: 0.84; text-wrap: pretty; }
.pngrfl-accards--large .pngrfl-accards__cta { margin-top: auto; font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }

.pngrfl-accards--small { --accards-basis: 200px; --accards-minh: 150px; --accards-hover: var(--pngrfl-paper-alt); }
.pngrfl-accards--small .pngrfl-accards__card { padding: 22px 20px; gap: 10px; }
.pngrfl-accards--small .pngrfl-accards__num { font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--pngrfl-red); }
.pngrfl-accards--small .pngrfl-accards__title { font-size: 16px; font-weight: 800; text-transform: uppercase; line-height: 1.15; }
.pngrfl-accards--small .pngrfl-accards__text { font-size: 13px; line-height: 1.5; color: var(--pngrfl-body); text-wrap: pretty; }
.pngrfl-accards--small .pngrfl-accards__cta { margin-top: auto; font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--pngrfl-muted); }

.pngrfl-accards--news { --accards-basis: 220px; --accards-minh: 150px; --accards-hover: var(--pngrfl-paper-alt); }
.pngrfl-accards--news .pngrfl-accards__card { padding: 24px 22px; gap: 10px; }
.pngrfl-accards--news .pngrfl-accards__num { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--pngrfl-red); }
.pngrfl-accards--news .pngrfl-accards__title { font-size: 16px; font-weight: 800; text-transform: uppercase; line-height: 1.15; text-wrap: pretty; }
.pngrfl-accards--news .pngrfl-accards__text { font-size: 13px; line-height: 1.55; color: var(--pngrfl-body); text-wrap: pretty; }
.pngrfl-accards__card--tail { background: var(--pngrfl-ink); color: var(--pngrfl-paper); justify-content: flex-end; }
a.pngrfl-accards__card--tail:hover,
a.pngrfl-accards__card--tail:focus-visible { background: var(--pngrfl-red); color: var(--pngrfl-paper); }
.pngrfl-accards__card--tail .pngrfl-accards__cta { margin-top: 0; font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--pngrfl-gold); }

.pngrfl-accards--footer {
	--accards-basis: 200px; --accards-minh: 44px;
	gap: 1px;
	background: color-mix(in srgb, var(--pngrfl-paper) 14%, transparent);
	border-color: color-mix(in srgb, var(--pngrfl-paper) 14%, transparent);
}
.pngrfl-accards--footer .pngrfl-accards__card {
	background: var(--pngrfl-ink); color: var(--pngrfl-paper);
	flex-direction: row; align-items: center; gap: 14px;
	padding: 16px 18px; box-sizing: border-box;
}
.pngrfl-accards--footer a.pngrfl-accards__card:hover,
.pngrfl-accards--footer a.pngrfl-accards__card:focus-visible { background: var(--pngrfl-ink-3); color: var(--pngrfl-gold); }
.pngrfl-accards--footer .pngrfl-accards__num { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--pngrfl-red); }
.pngrfl-accards--footer .pngrfl-accards__title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }

.pngrfl-accards--stack { flex-direction: column; flex-wrap: nowrap; }
/* flex-basis runs down the main axis, so in this column the shared
   "flex: 1 1 <basis>" would become a 260px minimum HEIGHT per card and each
   card would grow to fill. A stack card is only as tall as its copy. */
.pngrfl-accards--stack .pngrfl-accards__card { flex: 0 0 auto; min-height: 0; padding: 24px 26px; gap: 10px; }
.pngrfl-accards--stack .pngrfl-accards__label { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pngrfl-red); }
.pngrfl-accards--stack .pngrfl-accards__text { font-size: 16px; line-height: 1.55; font-weight: 500; text-wrap: pretty; }

/* §5 / §10 / §11 / §16 Stat row ---------------------------------------- */

.pngrfl-acstats {
	--acstats-basis: 220px;
	--acstats-figure: var(--pngrfl-gold);
	display: flex; flex-wrap: wrap; gap: 1px;
	background: color-mix(in srgb, var(--pngrfl-paper) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--pngrfl-paper) 16%, transparent);
}
.pngrfl-acstats__tile {
	flex: 1 1 var(--acstats-basis); min-width: 0;
	background: var(--pngrfl-ink); color: var(--pngrfl-paper);
	padding: 34px 28px; display: flex; flex-direction: column; gap: 12px;
}
.pngrfl-acstats__value {
	font-size: clamp(48px, 6vw, 84px); font-weight: 800; line-height: 0.9;
	letter-spacing: -0.03em; color: var(--acstats-figure); font-variant-numeric: tabular-nums;
}
.pngrfl-acstats__label {
	font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.18em;
	text-transform: uppercase; color: color-mix(in srgb, var(--pngrfl-paper) 72%, transparent);
}

.pngrfl-acstats--pair { --acstats-basis: 140px; gap: 2px; background: var(--pngrfl-ink); border-color: var(--pngrfl-ink); }
.pngrfl-acstats--pair .pngrfl-acstats__tile { padding: 22px; gap: 6px; }
.pngrfl-acstats--pair .pngrfl-acstats__value { font-size: 48px; }
.pngrfl-acstats--pair .pngrfl-acstats__label { font-size: 10px; letter-spacing: 0.16em; }

.pngrfl-acstats--impact { --acstats-basis: 150px; gap: 2px; background: var(--pngrfl-ink); border-color: var(--pngrfl-ink); }
.pngrfl-acstats--impact .pngrfl-acstats__tile { padding: 26px 20px; min-height: 150px; }
.pngrfl-acstats--impact .pngrfl-acstats__value { font-size: clamp(40px, 4.6vw, 64px); }
.pngrfl-acstats--impact .pngrfl-acstats__label { margin-top: auto; font-size: 10px; letter-spacing: 0.14em; line-height: 1.5; color: inherit; }
.pngrfl-acstats--impact .pngrfl-acstats__tile.is-gold { background: var(--pngrfl-gold); color: var(--pngrfl-ink); }
.pngrfl-acstats--impact .pngrfl-acstats__tile.is-gold .pngrfl-acstats__value { color: var(--pngrfl-ink); }

.pngrfl-acstats--glass { --acstats-basis: 150px; }
.pngrfl-acstats--glass .pngrfl-acstats__tile {
	background: color-mix(in srgb, var(--pngrfl-ink-black) 85%, transparent);
	padding: 26px 20px; gap: 10px;
}
.pngrfl-acstats--glass .pngrfl-acstats__value { font-size: clamp(40px, 4.6vw, 64px); }
.pngrfl-acstats--glass .pngrfl-acstats__label { font-size: 10px; letter-spacing: 0.16em; }

/* §6 Development gap --------------------------------------------------- */

.pngrfl-acgap__caption {
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--pngrfl-muted);
}
.pngrfl-acgap--chart {
	background: var(--pngrfl-card); color: var(--pngrfl-ink);
	padding: 32px 28px; display: flex; flex-direction: column; gap: 26px;
	border-top: 4px solid var(--pngrfl-ink);
}
.pngrfl-acgap__bar { display: flex; flex-direction: column; gap: 10px; }
.pngrfl-acgap__barhead { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 800; text-transform: uppercase; }
.pngrfl-acgap__barvalue { font-family: var(--pngrfl-mono); font-weight: 500; }
.pngrfl-acgap__track { height: 34px; background: var(--pngrfl-paper-alt); display: flex; }
.pngrfl-acgap__fill--ink { background: var(--pngrfl-ink); }
.pngrfl-acgap__fill--red { background: var(--pngrfl-red); }
.pngrfl-acgap__remainder {
	flex: 1; min-width: 0; display: flex; align-items: center; padding: 0 12px;
	border: 1px dashed color-mix(in srgb, var(--pngrfl-red) 50%, transparent);
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--pngrfl-red);
}
.pngrfl-acgap__figures {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
	background: var(--pngrfl-ink); border: 1px solid var(--pngrfl-ink);
}
.pngrfl-acgap__figure { background: var(--pngrfl-paper); padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.pngrfl-acgap__fignum { font-size: 34px; font-weight: 800; line-height: 1; color: var(--pngrfl-red); }
.pngrfl-acgap__figlabel { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pngrfl-body); }

.pngrfl-acgap--progress { display: flex; flex-direction: column; gap: 16px; }
.pngrfl-acgap--progress .pngrfl-acgap__caption { font-size: 11px; letter-spacing: 0.2em; }
.pngrfl-acgap__cards {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 2px; background: var(--pngrfl-ink); border: 1px solid var(--pngrfl-ink);
}
.pngrfl-acgap__card {
	background: var(--pngrfl-card); color: var(--pngrfl-ink);
	padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; min-height: 200px;
}
.pngrfl-acgap__card.is-dark { background: var(--pngrfl-ink); color: var(--pngrfl-paper); }
.pngrfl-acgap__period { font-family: var(--pngrfl-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--pngrfl-red); }
.pngrfl-acgap__card.is-dark .pngrfl-acgap__period { color: var(--pngrfl-gold); }
.pngrfl-acgap__value { font-size: clamp(40px, 4.4vw, 60px); font-weight: 800; line-height: 0.9; letter-spacing: -0.03em; }
.pngrfl-acgap__card.is-dark .pngrfl-acgap__value { color: var(--pngrfl-gold); }
.pngrfl-acgap__unit { font-size: 0.4em; letter-spacing: 0; }
.pngrfl-acgap__text { font-size: 15px; line-height: 1.5; color: var(--pngrfl-body); text-wrap: pretty; }
.pngrfl-acgap__card.is-dark .pngrfl-acgap__text { color: color-mix(in srgb, var(--pngrfl-paper) 84%, transparent); }
.pngrfl-acgap__meter { margin-top: auto; height: 6px; background: var(--pngrfl-paper-alt); display: flex; }
.pngrfl-acgap__card.is-dark .pngrfl-acgap__meter { background: color-mix(in srgb, var(--pngrfl-paper) 16%, transparent); }
.pngrfl-acgap__meterfill { background: var(--pngrfl-red); }
.pngrfl-acgap__metergold { background: var(--pngrfl-gold); }

/* §8 Pathway explorer -------------------------------------------------- */

.pngrfl-acpath { display: flex; flex-direction: column; gap: 40px; }
.pngrfl-acpath__tabs {
	display: flex; gap: 2px; align-self: flex-start;
	background: color-mix(in srgb, var(--pngrfl-paper) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--pngrfl-paper) 16%, transparent);
}
.pngrfl-acpath__tab {
	appearance: none; border: 0; border-radius: 0; cursor: pointer;
	padding: 14px 26px; min-height: 44px; box-sizing: border-box;
	display: flex; align-items: center;
	background: var(--pngrfl-ink-deep); color: var(--pngrfl-paper);
	font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
}
.pngrfl-acpath__tab.is-on { background: var(--pngrfl-gold); color: var(--pngrfl-ink); }
.pngrfl-acpath__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 28px; align-items: start;
}
.pngrfl-acpath__list {
	display: flex; flex-direction: column; gap: 1px;
	background: color-mix(in srgb, var(--pngrfl-paper) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--pngrfl-paper) 16%, transparent);
}
.pngrfl-acpath__stage {
	appearance: none; border: 0; border-left: 4px solid transparent; border-radius: 0;
	cursor: pointer; text-align: left; font-family: inherit;
	background: var(--pngrfl-ink-deep); color: var(--pngrfl-paper);
	padding: 20px 22px; display: flex; align-items: center; gap: 18px; min-height: 44px;
}
.pngrfl-acpath__stage.is-academy { background: var(--pngrfl-academy-stage); border-left-color: var(--pngrfl-red); }
.pngrfl-acpath__stage.is-on { background: var(--pngrfl-paper); color: var(--pngrfl-ink); border-left-color: var(--pngrfl-red); }
.pngrfl-acpath__stage:hover { filter: brightness(1.15); }
.pngrfl-acpath__stage.is-on:hover { filter: none; }
.pngrfl-acpath__index,
.pngrfl-acpath__tag { font-family: var(--pngrfl-mono); flex: none; color: color-mix(in srgb, var(--pngrfl-paper) 50%, transparent); }
.pngrfl-acpath__index { font-size: 11px; letter-spacing: 0.14em; }
.pngrfl-acpath__tag { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; }
.pngrfl-acpath__stage.is-academy .pngrfl-acpath__index,
.pngrfl-acpath__stage.is-academy .pngrfl-acpath__tag { color: var(--pngrfl-gold); }
.pngrfl-acpath__stage.is-on .pngrfl-acpath__index,
.pngrfl-acpath__stage.is-on .pngrfl-acpath__tag { color: var(--pngrfl-red); }
.pngrfl-acpath__stagetitle { font-size: 16px; font-weight: 800; text-transform: uppercase; line-height: 1.2; flex: 1; min-width: 0; text-wrap: pretty; }
.pngrfl-acpath__panel {
	background: var(--pngrfl-paper); color: var(--pngrfl-ink);
	padding: 32px 30px; display: flex; flex-direction: column; gap: 18px;
	border-top: 4px solid var(--pngrfl-red);
}
.pngrfl-acpath__step { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pngrfl-red); }
.pngrfl-acpath__title { margin: 0; font-size: clamp(26px, 3vw, 38px); font-weight: 800; text-transform: uppercase; line-height: 1.02; color: inherit; }
.pngrfl-acpath__text { margin: 0; font-size: 16px; line-height: 1.65; color: var(--pngrfl-body); text-wrap: pretty; }
.pngrfl-acpath__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px; }
.pngrfl-acpath__field { border: 1px solid color-mix(in srgb, var(--pngrfl-ink) 18%, transparent); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.pngrfl-acpath__fieldlabel { font-family: var(--pngrfl-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pngrfl-muted); }
.pngrfl-acpath__fieldvalue { font-size: 13px; font-weight: 700; line-height: 1.3; }
.pngrfl-acpath__next {
	display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
	background: var(--pngrfl-ink); color: var(--pngrfl-paper); padding: 16px 18px;
}
.pngrfl-acpath__nextlabel { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pngrfl-gold); }
.pngrfl-acpath__nextvalue { font-size: 15px; font-weight: 800; text-transform: uppercase; }

/* §9 Locations --------------------------------------------------------- */

.pngrfl-acloc {
	--acloc-basis: 160px;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 28px; align-items: start;
}
.pngrfl-acloc__left { display: flex; flex-direction: column; gap: 2px; background: var(--pngrfl-ink); border: 1px solid var(--pngrfl-ink); }
.pngrfl-acloc__map { position: relative; background: var(--pngrfl-ink); display: grid; place-items: center; padding: 24px; }
.pngrfl-acloc__map img,
.pngrfl-acloc__map svg { display: block; max-width: 100%; height: auto; }
/* Province highlight. The selected province takes the brand red and an ink
   outline; the rest of the country desaturates behind it, so the selection
   reads as a pinpoint rather than just another coloured patch. */
.pngrfl-acloc__map [data-province] { cursor: pointer; }
.pngrfl-acloc__map svg { transition: filter 220ms ease; }
.pngrfl-acloc__map.is-zoomable svg [data-province] {
	transition: fill 200ms ease, opacity 200ms ease, stroke-width 200ms ease;
}
.pngrfl-acloc__map svg [data-province].is-on {
	fill: var(--pngrfl-red) !important;
	stroke: var(--pngrfl-ink);
	stroke-width: 3;
	paint-order: stroke;
}
/* Everything that is not the selection sits back a little. */
.pngrfl-acloc.has-map .pngrfl-acloc__map svg > *:not(:has([data-province].is-on)) { opacity: 0.85; }
.pngrfl-acloc__map svg [data-province]:not(.is-on):hover { fill: var(--pngrfl-gold) !important; }
.pngrfl-acloc__map svg [data-province]:focus-visible { outline: none; stroke: var(--pngrfl-gold); stroke-width: 3; }
.pngrfl-acloc__caption {
	position: absolute; left: 18px; bottom: 18px;
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--pngrfl-gold);
}
.pngrfl-acloc__card { background: var(--pngrfl-card); color: var(--pngrfl-ink); padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; }
.pngrfl-acloc__cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pngrfl-acloc__name { font-size: 24px; font-weight: 800; text-transform: uppercase; line-height: 1.05; }
.pngrfl-acloc__kicker { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pngrfl-red); }
.pngrfl-acloc__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 8px; }
.pngrfl-acloc__field { border: 1px solid color-mix(in srgb, var(--pngrfl-ink) 18%, transparent); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.pngrfl-acloc__fieldlabel { font-size: 13px; font-weight: 700; line-height: 1.25; }
.pngrfl-acloc__fieldvalue { font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.04em; line-height: 1.4; color: var(--pngrfl-body); }
.pngrfl-acloc__cta {
	align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
	background: var(--pngrfl-red); color: var(--pngrfl-paper); padding: 15px 24px;
	font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
	min-height: 44px; box-sizing: border-box; text-decoration: none;
}
.pngrfl-acloc__cta:hover,
.pngrfl-acloc__cta:focus-visible { background: var(--pngrfl-gold); color: var(--pngrfl-ink); }
.pngrfl-acloc__tiles { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 2px; background: var(--pngrfl-ink); border: 1px solid var(--pngrfl-ink); }
.pngrfl-acloc__tile {
	appearance: none; border: 0; border-top: 3px solid transparent; border-radius: 0;
	cursor: pointer; text-align: left; font-family: inherit;
	flex: 1 1 var(--acloc-basis); min-width: 0;
	background: var(--pngrfl-card); color: var(--pngrfl-ink);
	padding: 18px; display: flex; flex-direction: column; gap: 8px;
	min-height: 86px; box-sizing: border-box;
}
.pngrfl-acloc__tile:hover { filter: brightness(0.96); }
.pngrfl-acloc__tile.is-on { background: var(--pngrfl-ink); color: var(--pngrfl-paper); border-top-color: var(--pngrfl-red); }
.pngrfl-acloc__index { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--pngrfl-muted); }
.pngrfl-acloc__tile.is-on .pngrfl-acloc__index { color: var(--pngrfl-gold); }
.pngrfl-acloc__tilename { font-size: 15px; font-weight: 800; text-transform: uppercase; line-height: 1.15; }

/* §12 Featured story --------------------------------------------------- */

.pngrfl-acstory {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 2px;
	background: color-mix(in srgb, var(--pngrfl-paper) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--pngrfl-paper) 16%, transparent);
}
.pngrfl-acstory.is-textonly { grid-template-columns: minmax(0, 1fr); }
.pngrfl-acstory__media { background: var(--pngrfl-hero-ground); aspect-ratio: 4 / 3.4; overflow: hidden; }
.pngrfl-acstory__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pngrfl-acstory__panel { background: var(--pngrfl-ink-deep); color: var(--pngrfl-paper); padding: 34px 30px; display: flex; flex-direction: column; gap: 18px; }
.pngrfl-acstory__kicker { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pngrfl-gold); }
.pngrfl-acstory__name { margin: 0; font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; text-transform: uppercase; line-height: 0.98; letter-spacing: -0.02em; color: inherit; }
.pngrfl-acstory__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 8px; }
.pngrfl-acstory__field { border: 1px solid color-mix(in srgb, var(--pngrfl-paper) 30%, transparent); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.pngrfl-acstory__fieldlabel { font-family: var(--pngrfl-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--pngrfl-paper) 55%, transparent); }
.pngrfl-acstory__fieldvalue { font-size: 13px; font-weight: 700; }
.pngrfl-acstory__timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; background: color-mix(in srgb, var(--pngrfl-paper) 16%, transparent); }
.pngrfl-acstory__step { flex: 1 1 110px; min-width: 0; background: var(--pngrfl-ink-3); padding: 16px 14px; display: flex; flex-direction: column; gap: 6px; }
.pngrfl-acstory__step.is-on { background: var(--pngrfl-red); }
.pngrfl-acstory__year { font-family: var(--pngrfl-mono); font-size: 11px; color: var(--pngrfl-gold); }
.pngrfl-acstory__step.is-on .pngrfl-acstory__year { color: var(--pngrfl-paper); }
.pngrfl-acstory__milestone { font-size: 13px; font-weight: 800; text-transform: uppercase; }
.pngrfl-acstory__note { margin: 0; font-size: 14px; line-height: 1.6; color: color-mix(in srgb, var(--pngrfl-paper) 72%, transparent); text-wrap: pretty; }
.pngrfl-acstory__cta {
	margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
	background: var(--pngrfl-gold); color: var(--pngrfl-ink); padding: 15px 24px;
	font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
	min-height: 44px; box-sizing: border-box; text-decoration: none;
}
.pngrfl-acstory__cta:hover,
.pngrfl-acstory__cta:focus-visible { background: var(--pngrfl-paper); color: var(--pngrfl-ink); }

/* §14 Calendar --------------------------------------------------------- */

.pngrfl-accal { display: flex; flex-direction: column; gap: 20px; }
.pngrfl-accal__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.pngrfl-accal__filter {
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--pngrfl-card); border: 1px solid color-mix(in srgb, var(--pngrfl-ink) 25%, transparent);
	padding: 4px 12px; min-height: 44px; box-sizing: border-box;
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--pngrfl-muted);
}
.pngrfl-accal__filter select {
	appearance: none; border: 0; background: transparent; font: inherit;
	color: var(--pngrfl-ink); text-transform: uppercase; cursor: pointer;
	padding: 8px 16px 8px 0; min-height: 36px;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--pngrfl-red) 50%),
		linear-gradient(135deg, var(--pngrfl-red) 50%, transparent 50%);
	background-position: right 5px center, right 0 center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}
.pngrfl-accal__rows { display: flex; flex-direction: column; gap: 2px; background: var(--pngrfl-ink); border: 1px solid var(--pngrfl-ink); }
.pngrfl-accal__row {
	background: var(--pngrfl-card); color: var(--pngrfl-ink); padding: 20px 24px;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 8px 24px; align-items: baseline;
}
.pngrfl-accal__row.is-key { background: var(--pngrfl-ink); color: var(--pngrfl-paper); }
.pngrfl-accal__when { font-family: var(--pngrfl-mono); font-size: 13px; letter-spacing: 0.06em; font-weight: 500; color: var(--pngrfl-red); }
.pngrfl-accal__row.is-key .pngrfl-accal__when { color: var(--pngrfl-gold); }
.pngrfl-accal__what { font-size: 16px; font-weight: 700; line-height: 1.4; text-wrap: pretty; }
.pngrfl-accal__empty { margin: 0; font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pngrfl-muted); }

/* §15 Audience tabs ---------------------------------------------------- */

.pngrfl-acaud { display: flex; flex-wrap: wrap; gap: 2px; background: var(--pngrfl-ink); border: 1px solid var(--pngrfl-ink); }
.pngrfl-acaud__rail { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pngrfl-acaud__tab {
	appearance: none; border: 0; border-left: 4px solid transparent; border-radius: 0;
	cursor: pointer; text-align: left; font-family: inherit;
	background: var(--pngrfl-paper); color: var(--pngrfl-ink); padding: 20px 22px;
	display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px;
}
.pngrfl-acaud__tab:hover { filter: brightness(0.97); }
.pngrfl-acaud__tab.is-on { background: var(--pngrfl-ink); color: var(--pngrfl-paper); border-left-color: var(--pngrfl-gold); }
.pngrfl-acaud__label { font-size: 17px; font-weight: 800; text-transform: uppercase; }
.pngrfl-acaud__arrow { font-family: var(--pngrfl-mono); font-size: 11px; }
.pngrfl-acaud__panels { flex: 2 1 360px; min-width: 0; display: flex; flex-wrap: wrap; gap: 2px; }
.pngrfl-acaud__panel {
	flex: 1 1 280px; min-width: 0;
	background: var(--pngrfl-card); color: var(--pngrfl-ink);
	padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 18px;
}
.pngrfl-acaud__kicker { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pngrfl-red); }
.pngrfl-acaud__lead { margin: 0; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2; font-weight: 800; text-wrap: pretty; }
.pngrfl-acaud__body { margin: 0; font-size: 16px; line-height: 1.65; color: var(--pngrfl-body); text-wrap: pretty; }

/* Editor stand-ins ----------------------------------------------------- */

.pngrfl-acpath--editor .pngrfl-acpath__tab,
.pngrfl-acpath--editor .pngrfl-acpath__stage { pointer-events: none; }

/* §10 Development-area cards (the "dev" card-grid variant) */
.pngrfl-accards--dev { --accards-basis: 240px; --accards-minh: 180px; --accards-hover: var(--pngrfl-card); }
.pngrfl-accards--dev .pngrfl-accards__card { padding: 28px 24px; gap: 12px; border-top: 4px solid var(--pngrfl-ink); }
.pngrfl-accards--dev .pngrfl-accards__card.is-red { border-top-color: var(--pngrfl-red); }
.pngrfl-accards--dev .pngrfl-accards__card.is-gold { border-top-color: var(--pngrfl-gold); }
.pngrfl-accards__head { display: flex; justify-content: space-between; gap: 10px; }
.pngrfl-accards--dev .pngrfl-accards__num { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--pngrfl-muted); }
.pngrfl-accards__group { font-family: var(--pngrfl-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pngrfl-ink); }
.pngrfl-accards--dev .is-red .pngrfl-accards__group { color: var(--pngrfl-red); }
.pngrfl-accards--dev .is-gold .pngrfl-accards__group { color: var(--pngrfl-gold); }
.pngrfl-accards--dev .pngrfl-accards__title { font-size: 19px; font-weight: 800; text-transform: uppercase; line-height: 1.1; }
.pngrfl-accards--dev .pngrfl-accards__text { font-size: 14px; line-height: 1.6; color: var(--pngrfl-body); text-wrap: pretty; }

/* Page-level helpers used by the native containers on 591 */
.pngrfl-ac-hero-h1 .elementor-heading-title { max-width: 14ch; }
.pngrfl-ac-pushdown { margin-top: auto !important; }
.pngrfl-ac-caption p {
	margin: 0; font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.2em;
	text-transform: uppercase; color: color-mix(in srgb, var(--pngrfl-paper) 55%, transparent);
}
.pngrfl-ac-dim88 p { color: color-mix(in srgb, var(--pngrfl-paper) 88%, transparent); }
.pngrfl-ac-dim78 p { color: color-mix(in srgb, var(--pngrfl-paper) 78%, transparent); }
.pngrfl-ac-dim86 p { color: color-mix(in srgb, var(--pngrfl-paper) 86%, transparent); }
.pngrfl-ac-panelstatement p { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 800; text-transform: uppercase; text-wrap: pretty; }

/* Measure caps for the Academy's copy columns. Elementor's container width
   control emits a fixed width, which cannot shrink — and this theme's fixed
   sidebar makes the content column narrower than the viewport, so a fixed
   980px overflowed at 1024px. max-width shrinks. */
.pngrfl-ac-w980 { max-width: 980px; }
.pngrfl-ac-w820 { max-width: 820px; }
.pngrfl-ac-w760 { max-width: 760px; }

/* Locations map zoom. The SVG path is animated through its viewBox (no
   transform, so strokes keep their weight); a flat image has nothing to
   measure, so it is scaled from the province's authored focus point. */
.pngrfl-acloc__map { overflow: hidden; }
.pngrfl-acloc__mapinner {
	display: grid; place-items: center; width: 100%;
	transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}
.pngrfl-acloc__mapinner > svg,
.pngrfl-acloc__mapinner > img { display: block; max-width: 100%; height: auto; }
.pngrfl-acloc__map.is-zoomable [data-province] { transition: fill 180ms ease, opacity 180ms ease; }
.pngrfl-acloc__reset {
	position: absolute; right: 18px; bottom: 18px; z-index: 2;
	appearance: none; border: 1px solid color-mix(in srgb, var(--pngrfl-paper) 40%, transparent);
	border-radius: 0; cursor: pointer; font-family: var(--pngrfl-mono);
	background: color-mix(in srgb, var(--pngrfl-ink-black) 72%, transparent);
	color: var(--pngrfl-paper); padding: 10px 14px; min-height: 44px; box-sizing: border-box;
	font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
}
.pngrfl-acloc__reset:hover,
.pngrfl-acloc__reset:focus-visible { background: var(--pngrfl-gold); color: var(--pngrfl-ink); border-color: var(--pngrfl-gold); }
.pngrfl-acloc__reset[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	.pngrfl-acloc__mapinner { transition: none; }
}

/* The map box carries the artwork's own ratio (set inline from the
   attachment), and the image fills it. That keeps the height stable while the
   lazy image loads, and makes a province's focus percentage land on the same
   point of the picture at every viewport — intrinsic sizing would leave the
   height at the mercy of srcset/sizes resolution. */
.pngrfl-acloc__map:has([data-mapinner] > img) { padding: 0; }
.pngrfl-acloc__map:has([data-mapinner] > img) .pngrfl-acloc__mapinner {
	aspect-ratio: var(--acloc-map-ar, 4 / 3);
}
.pngrfl-acloc__mapinner > img {
	width: 100%; height: 100%; display: block; object-fit: fill;
}

/* Map slot while the province artwork is being fetched, and if it never
   arrives: the section still works from the tiles, so the slot just closes. */
.pngrfl-acloc.is-maploading .pngrfl-acloc__map { min-height: 180px; }
.pngrfl-acloc.is-maploading .pngrfl-acloc__map::after {
	content: ""; position: absolute; inset: auto auto 18px 18px;
	width: 28px; height: 2px; background: var(--pngrfl-gold);
	animation: pngrfl-acloc-load 900ms ease-in-out infinite alternate;
}
@keyframes pngrfl-acloc-load { from { transform: scaleX(0.3); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
.pngrfl-acloc.is-mapfailed .pngrfl-acloc__map { display: none; }
@media (prefers-reduced-motion: reduce) {
	.pngrfl-acloc.is-maploading .pngrfl-acloc__map::after { animation: none; }
}
/* The fetched province map has its own ratio; let it size itself. */
.pngrfl-acloc.has-map .pngrfl-acloc__map:has([data-mapinner] > svg) { padding: 0; }
.pngrfl-acloc__mapinner > svg { width: 100%; height: auto; display: block; }


/* =====================================================================
   COMMUNITY RUGBY LEAGUE v2 (page 243) — design_handoff_community_page
   Shares the Academy token layer and card grid; adds the step strip, the
   area explorer and the stepped pathway. Same construction throughout: a
   flex-wrap row with a 2px gap over an ink ground, so the gap reads as a
   hairline and the last row always fills.
   ===================================================================== */

.pngrfl-crlareas__panel[hidden],
.pngrfl-crlpath__list[hidden] { display: none !important; }

.pngrfl-crlareas__tab:focus-visible,
.pngrfl-crlpath__tab:focus-visible { outline: 2px solid var(--pngrfl-gold); outline-offset: -2px; }

/* Page helpers for the native containers ------------------------------- */

.pngrfl-crl-hero { position: relative; min-height: 80vh; }
.pngrfl-crl-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(to top,
		color-mix(in srgb, var(--pngrfl-ink-black) 95%, transparent) 0%,
		color-mix(in srgb, var(--pngrfl-ink-black) 50%, transparent) 50%,
		color-mix(in srgb, var(--pngrfl-ink-black) 20%, transparent) 100%);
}
.pngrfl-crl-closing { position: relative; }
.pngrfl-crl-closing::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: color-mix(in srgb, var(--pngrfl-ink-black) 76%, transparent);
}
.pngrfl-crl-h1 .elementor-heading-title { max-width: 15ch; }
.pngrfl-crl-onink86 p { color: color-mix(in srgb, var(--pngrfl-paper) 86%, transparent); }
.pngrfl-crl-onink72 p { color: color-mix(in srgb, var(--pngrfl-paper) 72%, transparent); }

/* §3 the red tagline strip: three statements, last one in ink */
.pngrfl-crl-tagline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; }

/* §5 / §6 Step strip --------------------------------------------------- */

.pngrfl-crlsteps {
	--crlsteps-basis: 190px;
	--crlsteps-minh: 150px;
	display: flex; flex-wrap: wrap; gap: 2px;
	background: color-mix(in srgb, var(--pngrfl-paper) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--pngrfl-paper) 16%, transparent);
}
.pngrfl-crlsteps__tile {
	flex: 1 1 var(--crlsteps-basis); min-width: 0;
	background: var(--pngrfl-ink-deep); color: var(--pngrfl-paper);
	padding: 26px 22px; display: flex; flex-direction: column; gap: 14px;
	min-height: var(--crlsteps-minh);
}
.pngrfl-crlsteps__tile.is-red { background: var(--pngrfl-red); }
.pngrfl-crlsteps__tile.is-gold { background: var(--pngrfl-gold); color: var(--pngrfl-ink); }
.pngrfl-crlsteps__index {
	font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--pngrfl-gold);
}
.pngrfl-crlsteps__tile.is-red .pngrfl-crlsteps__index { color: var(--pngrfl-paper); }
.pngrfl-crlsteps__tile.is-gold .pngrfl-crlsteps__index { color: var(--pngrfl-ink); }
.pngrfl-crlsteps__title { font-size: 18px; font-weight: 800; text-transform: uppercase; line-height: 1.1; text-wrap: pretty; }
.pngrfl-crlsteps__meter {
	margin-top: auto; height: 4px;
	background: color-mix(in srgb, var(--pngrfl-paper) 14%, transparent);
}
.pngrfl-crlsteps__fill { height: 100%; background: var(--pngrfl-red); }
.pngrfl-crlsteps__tile.is-red .pngrfl-crlsteps__fill { background: var(--pngrfl-gold); }
/* The plain strip is a label row, not a journey, so the tiles sit tighter. */
.pngrfl-crlsteps--plain { --crlsteps-basis: 150px; --crlsteps-minh: 0px; background: var(--pngrfl-ink); border-color: var(--pngrfl-ink); }
.pngrfl-crlsteps--plain .pngrfl-crlsteps__tile { padding: 18px; gap: 8px; background: var(--pngrfl-ink); }
.pngrfl-crlsteps--plain .pngrfl-crlsteps__tile.is-red { background: var(--pngrfl-red); }
.pngrfl-crlsteps--plain .pngrfl-crlsteps__tile.is-gold { background: var(--pngrfl-gold); }
.pngrfl-crlsteps--plain .pngrfl-crlsteps__title { font-size: 14px; line-height: 1.15; }

/* §6 Area explorer ----------------------------------------------------- */

.pngrfl-crlareas { display: flex; flex-direction: column; gap: 32px; }
.pngrfl-crlareas__tabs {
	display: flex; flex-wrap: wrap; gap: 2px;
	background: var(--pngrfl-ink); border: 1px solid var(--pngrfl-ink);
}
.pngrfl-crlareas__tab {
	appearance: none; border: 0; border-top: 4px solid transparent; border-radius: 0;
	cursor: pointer; text-align: left; font-family: inherit;
	flex: 1 1 200px; min-height: 56px; box-sizing: border-box; padding: 16px 20px;
	display: flex; align-items: center; gap: 14px;
	background: var(--pngrfl-card); color: var(--pngrfl-ink);
	transition: background-color .18s ease, color .18s ease;
}
.pngrfl-crlareas__tab.is-on { background: var(--pngrfl-ink); color: var(--pngrfl-paper); border-top-color: var(--pngrfl-red); }
.pngrfl-crlareas__tab:hover:not(.is-on) { background: var(--pngrfl-paper-alt); }
.pngrfl-crlareas__tabnum { font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--pngrfl-red); flex: none; }
.pngrfl-crlareas__tab.is-on .pngrfl-crlareas__tabnum { color: var(--pngrfl-gold); }
.pngrfl-crlareas__tabtitle { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }

.pngrfl-crlareas__panel { display: flex; flex-direction: column; gap: 32px; }
.pngrfl-crlareas__top {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 40px; align-items: start;
}
.pngrfl-crlareas__intro { display: flex; flex-direction: column; gap: 18px; }
.pngrfl-crlareas__eyebrow {
	display: flex; align-items: center; gap: 12px;
	font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.22em;
	text-transform: uppercase; color: var(--pngrfl-red);
}
.pngrfl-crlareas__rule { width: 28px; height: 2px; background: var(--pngrfl-red); display: block; flex: none; }
.pngrfl-crlareas__headline {
	margin: 0; font-size: clamp(30px, 4.2vw, 54px); line-height: 1.02; font-weight: 800;
	letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; color: var(--pngrfl-ink);
}
.pngrfl-crlareas__body { margin: 0; font-size: 16px; line-height: 1.65; color: var(--pngrfl-body); text-wrap: pretty; }
.pngrfl-crlareas__figure { margin: 0; }
.pngrfl-crlareas__figure img { display: block; width: 100%; height: auto; }

.pngrfl-crlareas__aims { display: flex; flex-direction: column; gap: 2px; background: var(--pngrfl-ink); border: 1px solid var(--pngrfl-ink); }
.pngrfl-crlareas__aim { padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.pngrfl-crlareas__aim p { margin: 0; font-size: 18px; line-height: 1.45; font-weight: 600; text-wrap: pretty; }
.pngrfl-crlareas__aim--mission { background: var(--pngrfl-ink); color: var(--pngrfl-paper); }
.pngrfl-crlareas__aim--ambition { background: var(--pngrfl-card); color: var(--pngrfl-ink); }
.pngrfl-crlareas__aimlabel { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
.pngrfl-crlareas__aim--mission .pngrfl-crlareas__aimlabel { color: var(--pngrfl-gold); }
.pngrfl-crlareas__aim--ambition .pngrfl-crlareas__aimlabel { color: var(--pngrfl-red); }

.pngrfl-crlareas__block { display: flex; flex-direction: column; gap: 14px; }
.pngrfl-crlareas__blocklabel {
	font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.2em;
	text-transform: uppercase; color: var(--pngrfl-muted);
}
.pngrfl-crlareas__items {
	display: flex; flex-wrap: wrap; gap: 2px;
	background: var(--pngrfl-ink); border: 1px solid var(--pngrfl-ink);
}
.pngrfl-crlareas__item {
	flex: 1 1 240px; min-width: 0; background: var(--pngrfl-card);
	padding: 26px 24px; display: flex; flex-direction: column; gap: 12px;
	min-height: 150px; border-top: 4px solid var(--pngrfl-red);
}
.pngrfl-crlareas__itemnum { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--pngrfl-muted); }
.pngrfl-crlareas__itemtitle { margin: 0; font-size: 18px; font-weight: 800; text-transform: uppercase; line-height: 1.1; color: var(--pngrfl-ink); }
.pngrfl-crlareas__itemtext { margin: 0; font-size: 14px; line-height: 1.6; color: var(--pngrfl-body); text-wrap: pretty; }

.pngrfl-crlareas__extra {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 24px; align-items: center; background: var(--pngrfl-card);
	padding: 26px 28px; border-left: 6px solid var(--pngrfl-ink);
}
.pngrfl-crlareas__extra p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--pngrfl-body); text-wrap: pretty; }

.pngrfl-crlareas__foot {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 28px; align-items: start;
}
.pngrfl-crlareas__pri { display: flex; flex-direction: column; gap: 14px; }
.pngrfl-crlareas__prilist {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 1px;
	background: color-mix(in srgb, var(--pngrfl-ink) 18%, transparent);
	border-top: 1px solid color-mix(in srgb, var(--pngrfl-ink) 18%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--pngrfl-ink) 18%, transparent);
}
.pngrfl-crlareas__prilist li {
	background: var(--pngrfl-paper-alt); padding: 14px 0;
	display: flex; gap: 18px; align-items: baseline;
}
.pngrfl-crlareas__prinum { font-family: var(--pngrfl-mono); font-size: 11px; color: var(--pngrfl-red); flex: none; }
.pngrfl-crlareas__pritext { font-size: 15px; line-height: 1.5; font-weight: 500; text-wrap: pretty; color: var(--pngrfl-ink); }

.pngrfl-crlareas__ctas { background: var(--pngrfl-ink); color: var(--pngrfl-paper); padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; }
.pngrfl-crlareas__ctalabel { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pngrfl-gold); }
.pngrfl-crlareas__ctastack { display: flex; flex-direction: column; gap: 2px; }
.pngrfl-crlareas__cta {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	min-height: 52px; padding: 14px 18px; box-sizing: border-box;
	background: var(--pngrfl-ink-3); color: var(--pngrfl-paper);
	font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em;
	text-decoration: none; transition: background-color .18s ease, color .18s ease;
}
.pngrfl-crlareas__cta.is-first { background: var(--pngrfl-red); }
.pngrfl-crlareas__cta:hover,
.pngrfl-crlareas__cta:focus-visible { background: var(--pngrfl-gold); color: var(--pngrfl-ink); }
.pngrfl-crlareas__ctaarrow { font-family: var(--pngrfl-mono); }

/* §8 Pathway steps ----------------------------------------------------- */

.pngrfl-crlpath { display: flex; flex-direction: column; gap: 40px; }
.pngrfl-crlpath__tabs {
	display: flex; gap: 2px; align-self: flex-start;
	background: color-mix(in srgb, var(--pngrfl-paper) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--pngrfl-paper) 16%, transparent);
}
.pngrfl-crlpath__tab {
	appearance: none; border: 0; border-radius: 0; cursor: pointer;
	padding: 14px 26px; min-height: 44px; box-sizing: border-box;
	display: flex; align-items: center;
	background: var(--pngrfl-ink-deep); color: var(--pngrfl-paper);
	font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
}
.pngrfl-crlpath__tab.is-on { background: var(--pngrfl-gold); color: var(--pngrfl-ink); }

.pngrfl-crlpath__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* The climb. Indent still tracks the step number, so flipping the paint
   order turns the descending staircase into an ascending one: 01 unindented
   at the foot, the elite stage furthest right at the head. */
.pngrfl-crlpath__list.is-up { flex-direction: column-reverse; }
.pngrfl-crlpath__step {
	display: flex; align-items: stretch; gap: 2px;
	margin-left: var(--crlpath-indent, 0px);
}
.pngrfl-crlpath__mark {
	flex: none; width: 64px; display: grid; place-items: center;
	background: var(--pngrfl-ink-deep); color: var(--pngrfl-gold);
	font-family: var(--pngrfl-mono); font-size: 12px; letter-spacing: 0.1em;
}
.pngrfl-crlpath__step.is-last .pngrfl-crlpath__mark { background: var(--pngrfl-gold); color: var(--pngrfl-ink); }
.pngrfl-crlpath__body {
	flex: 1; min-width: 0; padding: 20px 24px;
	display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
	background: var(--pngrfl-ink-3); color: var(--pngrfl-paper);
}
.pngrfl-crlpath__step.is-community .pngrfl-crlpath__body { background: var(--pngrfl-paper); color: var(--pngrfl-ink); }
.pngrfl-crlpath__step.is-academy .pngrfl-crlpath__body { background: var(--pngrfl-red); color: var(--pngrfl-paper); }
.pngrfl-crlpath__title { font-size: clamp(17px, 2vw, 24px); font-weight: 800; text-transform: uppercase; line-height: 1.1; }
.pngrfl-crlpath__tag {
	font-family: var(--pngrfl-mono); font-size: 9px; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--pngrfl-gold);
}
.pngrfl-crlpath__step.is-community .pngrfl-crlpath__tag { color: var(--pngrfl-red); }
.pngrfl-crlpath__step.is-academy .pngrfl-crlpath__tag { color: var(--pngrfl-paper); }

/* §7 / §10 card-grid variants ------------------------------------------ */

.pngrfl-accards--support { --accards-basis: 300px; --accards-minh: 210px; --accards-hover: var(--pngrfl-paper-alt); }
.pngrfl-accards--support .pngrfl-accards__card { padding: 28px 26px; gap: 12px; }
.pngrfl-accards--support .pngrfl-accards__num { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--pngrfl-red); }
.pngrfl-accards--support .pngrfl-accards__group { color: var(--pngrfl-muted); }
.pngrfl-accards--support .pngrfl-accards__title { font-size: 20px; font-weight: 800; text-transform: uppercase; line-height: 1.1; }
.pngrfl-accards--support .pngrfl-accards__text { font-size: 14px; line-height: 1.6; color: var(--pngrfl-body); text-wrap: pretty; }
.pngrfl-accards--support .pngrfl-accards__cta {
	margin-top: auto; font-family: var(--pngrfl-mono); font-size: 11px;
	letter-spacing: 0.16em; text-transform: uppercase; color: var(--pngrfl-red);
}
a.pngrfl-accards__card:hover .pngrfl-accards__cta { color: inherit; }

.pngrfl-accards--cta {
	--accards-basis: 180px; --accards-minh: 130px;
	gap: 1px;
	background: color-mix(in srgb, var(--pngrfl-paper) 16%, transparent);
	border-color: color-mix(in srgb, var(--pngrfl-paper) 16%, transparent);
}
.pngrfl-accards--cta .pngrfl-accards__card {
	background: color-mix(in srgb, var(--pngrfl-ink-black) 85%, transparent);
	color: var(--pngrfl-paper); padding: 24px 20px; gap: 22px;
}
.pngrfl-accards--cta .pngrfl-accards__card.is-hot { background: var(--pngrfl-red); }
.pngrfl-accards--cta .pngrfl-accards__num { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--pngrfl-gold); }
.pngrfl-accards--cta .pngrfl-accards__card.is-hot .pngrfl-accards__num { color: var(--pngrfl-paper); }
.pngrfl-accards__big { margin-top: auto; font-size: 16px; font-weight: 800; text-transform: uppercase; line-height: 1.15; }

/* A Get Involved line with no destination yet: same row, but plainly not a
   link — no arrow, no hover, not focusable. */
.pngrfl-crlareas__cta.is-inert { cursor: default; color: color-mix(in srgb, var(--pngrfl-paper) 62%, transparent); }
.pngrfl-crlareas__cta.is-inert:hover { background: var(--pngrfl-ink-3); color: color-mix(in srgb, var(--pngrfl-paper) 62%, transparent); }
.pngrfl-crlareas__cta.is-inert.is-first { background: var(--pngrfl-red); color: var(--pngrfl-paper); }


/* =====================================================================
   DRAW (page 235) — design_handoff_draw_page
   Everything scoped under .pngrfl-draw. Upcoming fixtures sit on ink with a
   gold top rule; completed ones on white with a red rule and the loser
   greyed, so a round reads at a glance.
   ===================================================================== */

.pngrfl-draw { display: flex; flex-direction: column; gap: 22px; }
.pngrfl-draw [hidden] { display: none !important; }

/* Competition tabs ----------------------------------------------------- */
.pngrfl-draw__tabs {
	display: flex; flex-wrap: wrap;
	border-bottom: 1px solid color-mix(in srgb, var(--pngrfl-paper) 20%, transparent);
}
.pngrfl-draw__tab {
	appearance: none; background: transparent; border: 0; cursor: pointer;
	border-bottom: 3px solid transparent; margin-bottom: -1px; margin-right: 40px;
	padding: 14px 0 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
	text-align: left; font-family: inherit;
	color: color-mix(in srgb, var(--pngrfl-paper) 50%, transparent);
}
.pngrfl-draw__tab.is-on { color: var(--pngrfl-paper); border-bottom-color: var(--pngrfl-gold); }
.pngrfl-draw__tab:focus-visible { outline: 2px solid var(--pngrfl-gold); outline-offset: 3px; }
.pngrfl-draw__tablabel { font-size: clamp(20px, 2.4vw, 30px); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; }
.pngrfl-draw__tabcount {
	font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
	color: color-mix(in srgb, var(--pngrfl-paper) 40%, transparent);
}
.pngrfl-draw__tab.is-on .pngrfl-draw__tabcount { color: var(--pngrfl-gold); }

/* Next match ----------------------------------------------------------- */
.pngrfl-draw__nextrow {
	display: flex; flex-wrap: wrap; gap: 2px;
	background: color-mix(in srgb, var(--pngrfl-paper) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--pngrfl-paper) 16%, transparent);
	border-bottom: none;
}
.pngrfl-draw__nextcell {
	flex: 1 1 220px; background: var(--pngrfl-ink); padding: 22px 20px;
	display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.pngrfl-draw__nextkicker {
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--pngrfl-gold);
}
.pngrfl-draw__nextkicker.is-dim { color: color-mix(in srgb, var(--pngrfl-paper) 60%, transparent); }
.pngrfl-draw__nextwhen { font-size: 13px; color: color-mix(in srgb, var(--pngrfl-paper) 65%, transparent); }
.pngrfl-draw__nextvenue { font-size: 15px; font-weight: 700; color: var(--pngrfl-paper); }
.pngrfl-draw__nextvs {
	flex: 2 1 360px; min-width: 0; background: var(--pngrfl-ink); padding: 22px 20px;
	display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center;
}
.pngrfl-draw__nextteam {
	font-size: clamp(20px, 2.4vw, 30px); font-weight: 800; line-height: 1.05;
	text-transform: uppercase; overflow-wrap: anywhere; color: var(--pngrfl-paper);
}
.pngrfl-draw__nextteam.is-away { text-align: right; }
.pngrfl-draw__nextv { font-family: var(--pngrfl-mono); font-size: 12px; color: var(--pngrfl-gold); }
/* A finished season closes on its last result, so the separator carries the score. */
.pngrfl-draw__nextv.is-score {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: .02em;
	color: var(--pngrfl-paper);
	font-variant-numeric: tabular-nums;
}

/* Heading + club filter ------------------------------------------------ */
.pngrfl-draw__head {
	display: flex; justify-content: space-between; align-items: flex-end;
	gap: 16px; flex-wrap: wrap;
}
.pngrfl-draw__headleft { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pngrfl-draw__eyebrow {
	display: flex; align-items: center; gap: 14px;
	font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.24em;
	text-transform: uppercase; color: var(--pngrfl-red);
}
.pngrfl-draw__rule { width: 34px; height: 2px; background: var(--pngrfl-red); display: block; flex: none; }
.pngrfl-draw__title {
	margin: 0; font-size: clamp(30px, 4vw, 52px); font-weight: 800;
	text-transform: uppercase; letter-spacing: -0.025em; line-height: 0.95; color: var(--pngrfl-ink);
}
.pngrfl-draw__club {
	display: flex; flex-direction: column; gap: 6px;
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.16em;
	text-transform: uppercase; color: #6B635E;
}
.pngrfl-draw__select {
	min-height: 44px; min-width: 240px; padding: 0 12px;
	border: 2px solid var(--pngrfl-ink); border-radius: 0;
	background: var(--pngrfl-card); color: var(--pngrfl-ink);
	font-family: var(--pngrfl-sans); font-size: 15px; font-weight: 700; cursor: pointer;
}
.pngrfl-draw__select:focus-visible { outline: 2px solid var(--pngrfl-gold); outline-offset: 2px; }

/* Round strip ---------------------------------------------------------- */
.pngrfl-draw__strip {
	display: flex; align-items: stretch; gap: 8px;
	background: var(--pngrfl-card); padding: 10px;
}
.pngrfl-draw__arrow {
	flex: none; width: 44px; min-height: 44px; cursor: pointer;
	background: transparent; border: 2px solid var(--pngrfl-ink); border-radius: 0;
	color: var(--pngrfl-ink); font-size: 15px; font-family: inherit;
}
.pngrfl-draw__arrow:disabled { opacity: 0.3; cursor: default; }
.pngrfl-draw__arrow:focus-visible { outline: 2px solid var(--pngrfl-gold); outline-offset: 2px; }
.pngrfl-draw__rail {
	flex: 1; min-width: 0; display: flex; gap: 4px;
	overflow-x: auto; scrollbar-width: thin; scroll-behavior: smooth;
}
.pngrfl-draw__chip {
	flex: none; min-width: 64px; min-height: 52px; padding: 6px 10px; cursor: pointer;
	border: 0; border-bottom: 3px solid transparent; border-radius: 0;
	background: transparent; color: var(--pngrfl-ink); font-family: inherit;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.pngrfl-draw__chip.is-on { background: var(--pngrfl-ink); color: var(--pngrfl-paper); border-bottom-color: var(--pngrfl-gold); }
.pngrfl-draw__chip.is-done { color: #8A817A; }
.pngrfl-draw__chip:focus-visible { outline: 2px solid var(--pngrfl-gold); outline-offset: -2px; }
.pngrfl-draw__chipname { font-size: 15px; font-weight: 800; text-transform: uppercase; }
.pngrfl-draw__chipdate { font-family: var(--pngrfl-mono); font-size: 9px; letter-spacing: 0.08em; opacity: 0.75; }

/* Days + cards --------------------------------------------------------- */
.pngrfl-draw__body { display: flex; flex-direction: column; gap: 28px; }
.pngrfl-draw__day { display: flex; flex-direction: column; gap: 12px; }
.pngrfl-draw__dayhead {
	display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
	border-bottom: 2px solid var(--pngrfl-ink); padding-bottom: 10px;
}
.pngrfl-draw__daylabel { font-size: 17px; font-weight: 800; text-transform: uppercase; color: var(--pngrfl-ink); }
.pngrfl-draw__daycount {
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.12em;
	text-transform: uppercase; color: #6B635E;
}
.pngrfl-draw__grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 12px;
}
.pngrfl-draw__card { display: flex; flex-direction: column; border-top: 3px solid var(--pngrfl-gold); background: var(--pngrfl-ink); }
.pngrfl-draw__card.is-done { background: var(--pngrfl-card); border-top-color: var(--pngrfl-red); }
.pngrfl-draw__cardtop {
	display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px 4px;
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
}
.pngrfl-draw__status { color: var(--pngrfl-gold); }
.pngrfl-draw__card.is-done .pngrfl-draw__status { color: var(--pngrfl-red); }
.pngrfl-draw__tag { color: color-mix(in srgb, var(--pngrfl-paper) 60%, transparent); }
.pngrfl-draw__card.is-done .pngrfl-draw__tag { color: #6B635E; }
.pngrfl-draw__side {
	display: grid; grid-template-columns: 28px minmax(0, 1fr) 44px; gap: 10px;
	align-items: center; padding: 10px 16px;
}
.pngrfl-draw__ha { font-family: var(--pngrfl-mono); font-size: 10px; color: color-mix(in srgb, var(--pngrfl-paper) 60%, transparent); }
.pngrfl-draw__card.is-done .pngrfl-draw__ha { color: #6B635E; }
.pngrfl-draw__team {
	display: flex; align-items: center; gap: 10px; min-width: 0;
	font-size: 17px; line-height: 1.2; font-weight: 600; color: var(--pngrfl-paper); text-wrap: pretty;
}
.pngrfl-draw__teamname { min-width: 0; }
/* Crests vary in trim and aspect, so they are boxed and contained rather
   than sized on their own dimensions. */
.pngrfl-draw__crest {
	flex: none; width: 26px; height: 26px; object-fit: contain; display: block;
}
.pngrfl-draw__score { font-size: 24px; font-weight: 800; text-align: right; color: var(--pngrfl-paper); }
.pngrfl-draw__card.is-done .pngrfl-draw__team,
.pngrfl-draw__card.is-done .pngrfl-draw__score { color: var(--pngrfl-ink); }
.pngrfl-draw__side.is-won .pngrfl-draw__team { font-weight: 800; }
/* The losing side steps back so the result reads without reading the numbers. */
.pngrfl-draw__card.is-done .pngrfl-draw__side.is-lost .pngrfl-draw__team,
.pngrfl-draw__card.is-done .pngrfl-draw__side.is-lost .pngrfl-draw__score { color: #8A817A; }
.pngrfl-draw__side.is-followed .pngrfl-draw__team { font-weight: 800; }
.pngrfl-draw__venue {
	margin-top: auto; padding: 10px 16px;
	border-top: 1px solid color-mix(in srgb, var(--pngrfl-paper) 14%, transparent);
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
	color: color-mix(in srgb, var(--pngrfl-paper) 60%, transparent);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pngrfl-draw__card.is-done .pngrfl-draw__venue { border-top-color: var(--pngrfl-hairline); color: #6B635E; }

/* Byes, empty state, legend -------------------------------------------- */
.pngrfl-draw__byes {
	display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap;
	background: var(--pngrfl-card); padding: 16px 18px;
}
.pngrfl-draw__byelabel {
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.16em;
	text-transform: uppercase; color: #6B635E;
}
.pngrfl-draw__byeteam { font-size: 15px; font-weight: 700; color: var(--pngrfl-ink); }
.pngrfl-draw__empty { margin: 0; padding: 36px 20px; background: var(--pngrfl-card); color: #6B635E; font-size: 15px; }
.pngrfl-draw__legend {
	margin: 0; display: flex; gap: 10px 22px; flex-wrap: wrap;
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
	color: #6B635E; border-top: 1px solid var(--pngrfl-hairline-strong); padding-top: 18px;
}
.pngrfl-draw__legend > span { display: flex; align-items: center; gap: 8px; }
.pngrfl-draw__key { width: 14px; height: 3px; display: block; }
.pngrfl-draw__key--up { background: var(--pngrfl-gold); }
.pngrfl-draw__key--ft { background: var(--pngrfl-red); }

/* Server-rendered fallback: replaced once the script has the data. */
.pngrfl-draw__fallback { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--pngrfl-card); }
.pngrfl-draw__fallback caption {
	text-align: left; padding: 14px 16px; font-family: var(--pngrfl-mono);
	font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #6B635E;
}
.pngrfl-draw__fallback th,
.pngrfl-draw__fallback td { text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--pngrfl-hairline); }
.pngrfl-draw__fallback th {
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.12em;
	text-transform: uppercase; color: #6B635E; font-weight: 500;
}
.pngrfl-draw--editor .pngrfl-draw__status {
	font-family: var(--pngrfl-mono); font-size: 12px; letter-spacing: 0.12em;
	text-transform: uppercase; color: #6B635E; padding: 40px 20px; text-align: center;
}
@media (prefers-reduced-motion: reduce) { .pngrfl-draw__rail { scroll-behavior: auto; } }

/* Draw page helpers for the native hero and footer containers */
.pngrfl-draw-lede p {
	margin: 0; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; max-width: 46ch;
	color: color-mix(in srgb, var(--pngrfl-paper) 82%, transparent); text-wrap: pretty;
}
.pngrfl-draw-foot p {
	margin: 0; font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.1em;
	text-transform: uppercase; color: color-mix(in srgb, var(--pngrfl-paper) 60%, transparent);
}
.pngrfl-draw-foot--link p a { color: var(--pngrfl-gold); text-decoration: none; }
.pngrfl-draw-foot--link p a:hover { color: var(--pngrfl-paper); }

/* Crest sizes per context */
.pngrfl-draw__nextteam { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pngrfl-draw__nextteam.is-away { justify-content: flex-end; }
.pngrfl-draw__nextteam .pngrfl-draw__crest { width: 40px; height: 40px; }
.pngrfl-draw__byeteam { display: inline-flex; align-items: center; gap: 8px; }
.pngrfl-draw__byeteam .pngrfl-draw__crest { width: 22px; height: 22px; }

/* A fixture whose kick-off has passed with no result published. It is still
   an upcoming card, but must not read as one — the status says so plainly. */
.pngrfl-draw__card.is-awaiting .pngrfl-draw__status {
	color: color-mix(in srgb, var(--pngrfl-paper) 70%, transparent);
}
.pngrfl-draw__card.is-awaiting { border-top-color: color-mix(in srgb, var(--pngrfl-gold) 45%, transparent); }

@media (max-width: 480px) {
	.pngrfl-draw__nextteam .pngrfl-draw__crest { width: 30px; height: 30px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEMBERSHIP (page 619) — type switcher, tier cards, sticky selection bar
   and the compare table. Everything is scoped under .pngrfl-membership.
   ═══════════════════════════════════════════════════════════════════════════ */

.pngrfl-membership {
	--pngrfl-mem-rule:   var(--pngrfl-hairline, #E3DDD4);
	--pngrfl-mem-rule-2: var(--pngrfl-hairline-strong, #D5CDC4);
	--pngrfl-mem-tint:   color-mix(in srgb, var(--pngrfl-gold) 16%, var(--pngrfl-card, #FFF));
	--pngrfl-mem-off:    color-mix(in srgb, var(--pngrfl-muted) 55%, transparent);
	font-family: var(--pngrfl-sans);
	color: var(--pngrfl-ink);
}

.pngrfl-membership__notice,
.pngrfl-membership__empty {
	margin: 0 0 20px;
	padding: 12px 16px;
	background: color-mix(in srgb, var(--pngrfl-gold) 18%, transparent);
	border-left: 4px solid var(--pngrfl-gold);
	font-size: 14px;
	line-height: 1.5;
}

/* ── shared heading furniture ── */
.pngrfl-membership__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--pngrfl-red);
}
.pngrfl-membership__rule { width: 34px; height: 2px; background: var(--pngrfl-red); display: block; flex: none; }
.pngrfl-membership__intro { display: flex; flex-direction: column; gap: 14px; }
.pngrfl-membership__h2 {
	margin: 0;
	font-size: clamp(30px, 4vw, 52px);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	line-height: 0.95;
}

/* ── choose ── */
.pngrfl-membership__choose { display: flex; flex-direction: column; gap: 24px; }
.pngrfl-membership__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	flex-wrap: wrap;
}
.pngrfl-membership__switch { display: flex; flex-direction: column; gap: 6px; }
.pngrfl-membership__switchlabel {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pngrfl-muted);
}
.pngrfl-membership__seg { display: flex; border: 1px solid var(--pngrfl-ink); }
.pngrfl-membership__segbtn {
	background: transparent;
	color: var(--pngrfl-ink);
	border: none;
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0 16px;
	min-height: 44px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.pngrfl-membership__segbtn:hover { background: color-mix(in srgb, var(--pngrfl-ink) 10%, transparent); }
.pngrfl-membership__segbtn.is-on { background: var(--pngrfl-ink); color: var(--pngrfl-paper); }

/* ── tier cards ── */
.pngrfl-membership__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 16px;
	align-items: stretch;
}
.pngrfl-membership__card {
	background: var(--pngrfl-card, #FFF);
	color: var(--pngrfl-ink);
	border: 2px solid var(--pngrfl-mem-rule);
	border-top: 6px solid var(--pngrfl-red);
	padding: 28px 26px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	cursor: pointer;
	position: relative;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.pngrfl-membership__card.is-gold { border-top-color: var(--pngrfl-gold); }
.pngrfl-membership__card:hover { border-color: var(--pngrfl-ink); }
.pngrfl-membership__card:focus-visible { outline: 3px solid var(--pngrfl-gold); outline-offset: 2px; }
.pngrfl-membership__card.is-on {
	background: var(--pngrfl-ink);
	color: var(--pngrfl-paper);
	border-color: var(--pngrfl-ink);
}
.pngrfl-membership__badge {
	position: absolute;
	top: -6px;
	right: 24px;
	background: var(--pngrfl-gold);
	color: var(--pngrfl-ink);
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 6px 10px;
}
.pngrfl-membership__cardtop { display: flex; flex-direction: column; gap: 10px; }
.pngrfl-membership__num {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pngrfl-red);
}
.pngrfl-membership__card.is-gold .pngrfl-membership__num { color: var(--pngrfl-gold); }
.pngrfl-membership__name {
	font-size: clamp(26px, 2.6vw, 34px);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.015em;
	line-height: 1;
}
.pngrfl-membership__blurb { font-size: 15px; line-height: 1.5; color: var(--pngrfl-muted); text-wrap: pretty; }
.pngrfl-membership__card.is-on .pngrfl-membership__blurb { color: color-mix(in srgb, var(--pngrfl-paper) 72%, transparent); }

.pngrfl-membership__pricerow {
	display: flex;
	align-items: baseline;
	gap: 8px;
	border-top: 1px solid var(--pngrfl-mem-rule);
	border-bottom: 1px solid var(--pngrfl-mem-rule);
	padding: 16px 0;
}
.pngrfl-membership__card.is-on .pngrfl-membership__pricerow {
	border-color: color-mix(in srgb, var(--pngrfl-paper) 16%, transparent);
}
.pngrfl-membership__price {
	font-size: clamp(40px, 4vw, 56px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.pngrfl-membership__period {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pngrfl-muted);
}
.pngrfl-membership__card.is-on .pngrfl-membership__period { color: color-mix(in srgb, var(--pngrfl-paper) 72%, transparent); }

.pngrfl-membership__perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pngrfl-membership__perks li {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	font-size: 15px;
	line-height: 1.45;
}
.pngrfl-membership__dot { width: 10px; height: 10px; margin-top: 6px; background: var(--pngrfl-red); display: block; }
.pngrfl-membership__card.is-gold .pngrfl-membership__dot { background: var(--pngrfl-gold); }

.pngrfl-membership__pick {
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--pngrfl-ink);
	border: 2px solid var(--pngrfl-ink);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	padding: 0 12px;
}
.pngrfl-membership__card.is-on .pngrfl-membership__pick {
	background: var(--pngrfl-gold);
	border-color: var(--pngrfl-gold);
	color: var(--pngrfl-ink);
}

/* ── sticky selection bar ── */
.pngrfl-membership__barwrap { position: sticky; bottom: 0; z-index: 5; padding: 24px 0 8px; }
.pngrfl-membership__bar {
	background: var(--pngrfl-ink);
	color: var(--pngrfl-paper);
	border-top: 3px solid var(--pngrfl-gold);
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	flex-wrap: wrap;
}
.pngrfl-membership__barsel { display: flex; flex-direction: column; gap: 4px; }
.pngrfl-membership__barkicker {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pngrfl-gold);
}
.pngrfl-membership__barname { font-size: 18px; font-weight: 800; text-transform: uppercase; }
.pngrfl-membership__baract { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pngrfl-membership__total { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pngrfl-membership__cart {
	min-height: 48px;
	padding: 0 26px;
	background: var(--pngrfl-gold);
	color: var(--pngrfl-ink);
	border: none;
	font-family: var(--pngrfl-sans);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.15s ease;
}
.pngrfl-membership__cart:hover { background: var(--pngrfl-paper); }
.pngrfl-membership__cart.is-added { background: var(--pngrfl-paper); }
.pngrfl-membership__cart.is-busy { opacity: 0.65; cursor: progress; }
.pngrfl-membership__cart:disabled { cursor: not-allowed; }
.pngrfl-membership__status { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--pngrfl-muted); }
.pngrfl-membership__status.is-error { color: var(--pngrfl-red); font-weight: 600; }
.pngrfl-membership__status:empty { margin: 0; }

/* ── compare table ── */
.pngrfl-membership__compare { display: flex; flex-direction: column; gap: 20px; padding-top: 40px; }
.pngrfl-membership__tablewrap {
	overflow-x: auto;
	background: var(--pngrfl-card, #FFF);
	border-top: 3px solid var(--pngrfl-ink);
}
.pngrfl-membership__table { width: 100%; min-width: 680px; border-collapse: collapse; }
.pngrfl-membership__table thead th {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pngrfl-muted);
	font-weight: 500;
	text-align: center;
	padding: 14px 8px;
	border-bottom: 1px solid var(--pngrfl-mem-rule-2);
}
.pngrfl-membership__table thead th:first-child { text-align: left; padding-left: 18px; width: 40%; }
.pngrfl-membership__table thead th.is-on { color: var(--pngrfl-ink); font-weight: 800; }
.pngrfl-membership__table tbody th {
	text-align: left;
	font-weight: 600;
	font-size: 15px;
	padding: 14px 8px 14px 18px;
	border-bottom: 1px solid var(--pngrfl-mem-rule);
}
.pngrfl-membership__table tbody td {
	text-align: center;
	font-family: var(--pngrfl-mono);
	font-size: 13px;
	min-height: 52px;
	padding: 14px 8px;
	border-bottom: 1px solid var(--pngrfl-mem-rule);
	color: var(--pngrfl-ink);
}
.pngrfl-membership__table tbody td.is-off { color: var(--pngrfl-mem-off); }
.pngrfl-membership__table td.is-on { background: var(--pngrfl-mem-tint); color: var(--pngrfl-red); }
.pngrfl-membership__table td.is-on.is-off { color: var(--pngrfl-mem-off); }

@media (max-width: 600px) {
	.pngrfl-membership__card { padding: 24px 20px; }
	.pngrfl-membership__seg { width: 100%; }
	.pngrfl-membership__segbtn { flex: 1; padding: 0 8px; }
	.pngrfl-membership__switch { width: 100%; }
	.pngrfl-membership__bar { padding: 14px 16px; }
	.pngrfl-membership__baract { width: 100%; justify-content: space-between; gap: 12px; }
	.pngrfl-membership__cart { flex: 1; padding: 0 16px; }
	.pngrfl-membership__total { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
	.pngrfl-membership__card,
	.pngrfl-membership__segbtn,
	.pngrfl-membership__cart { transition: none; }
}

/* ── Membership page furniture: FAQ accordion and footer strip ──────────── */

.pngrfl-mem-faqnote { font-size: 15px; line-height: 1.6; max-width: 40ch; }
.pngrfl-mem-faqnote a { color: var(--pngrfl-red); text-decoration: none; border-bottom: 1px solid currentColor; }
.pngrfl-mem-faqnote a:hover { color: var(--pngrfl-gold); }

/* Elementor's Nested Accordion, brought to the design: a 2px rule above the
   list, a hairline between items, and the open/close marker in red mono. */
.pngrfl-mem-faq .e-n-accordion { border-top: 2px solid var(--pngrfl-ink); display: flex; flex-direction: column; gap: 0; }
.pngrfl-mem-faq .e-n-accordion-item { border-bottom: 1px solid var(--pngrfl-hairline-strong, #D5CDC4); }
.pngrfl-mem-faq .e-n-accordion-item-title {
	padding: 18px 0;
	min-height: 56px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	cursor: pointer;
	background: transparent;
	border: none;
}
.pngrfl-mem-faq .e-n-accordion-item-title-text,
.pngrfl-mem-faq .e-n-accordion-item-title-header,
.pngrfl-mem-faq .e-n-accordion-item-title-header > * {
	margin: 0;
	font-family: var(--pngrfl-sans);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--pngrfl-ink);
	text-align: left;
}
.pngrfl-mem-faq .e-n-accordion-item-title-icon,
.pngrfl-mem-faq .e-n-accordion-item-title-icon svg,
.pngrfl-mem-faq .e-n-accordion-item-title-icon i {
	color: var(--pngrfl-red);
	fill: var(--pngrfl-red);
	font-size: 18px;
	width: 18px;
	height: 18px;
	flex: none;
}
.pngrfl-mem-faqbody { font-size: 15px; line-height: 1.6; max-width: 62ch; text-wrap: pretty; }
.pngrfl-mem-faqbody p { margin: 0; }

.pngrfl-mem-foot p {
	margin: 0;
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	color: color-mix(in srgb, var(--pngrfl-paper) 60%, transparent);
}
.pngrfl-mem-foot--links a { color: var(--pngrfl-gold); text-decoration: none; }
.pngrfl-mem-foot--links a:hover { color: var(--pngrfl-paper); }

/* ── WooCommerce cart + checkout, in the membership/shop tokens ─────────── */

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order {
	background: var(--pngrfl-gold);
	color: var(--pngrfl-ink);
	font-family: var(--pngrfl-sans);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 2px solid var(--pngrfl-gold);
	border-radius: 0;
	min-height: 48px;
	padding: 0 26px;
	line-height: 44px;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover {
	background: var(--pngrfl-ink);
	color: var(--pngrfl-paper);
	border-color: var(--pngrfl-ink);
}
/* The secondary action on the cart page reads as an outline, not a second CTA. */
.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
	background: transparent;
	color: var(--pngrfl-ink);
	border-color: var(--pngrfl-ink);
}
.woocommerce button[name="update_cart"]:disabled {
	opacity: 0.4;
	background: transparent;
	color: var(--pngrfl-ink);
	border-color: var(--pngrfl-hairline-strong, #D5CDC4);
}
.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-cart h1,
.woocommerce-checkout h1 {
	font-family: var(--pngrfl-sans);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.02em;
}
.woocommerce table.shop_table { border-radius: 0; border-color: var(--pngrfl-hairline, #E3DDD4); }
.woocommerce table.shop_table th { font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.woocommerce-info, .woocommerce-message { border-top-color: var(--pngrfl-gold); }
.woocommerce-info::before, .woocommerce-message::before { color: var(--pngrfl-gold); }
.woocommerce-error { border-top-color: var(--pngrfl-red); }
.woocommerce-error::before { color: var(--pngrfl-red); }

/* ═══════════════════════════════════════════════════════════════════════════
   CART (page 603) — checkout steps, items column, sticky order summary.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── checkout steps, shared with the Checkout page ── */
.pngrfl-steps {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid color-mix(in srgb, var(--pngrfl-paper) 20%, transparent);
	font-family: var(--pngrfl-sans);
}
.pngrfl-steps__item {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 14px 0 16px;
	margin: 0 40px -1px 0;
	border-bottom: 3px solid transparent;
	color: color-mix(in srgb, var(--pngrfl-paper) 45%, transparent);
	text-decoration: none;
}
a.pngrfl-steps__item:hover { color: var(--pngrfl-paper); }
.pngrfl-steps__item.is-on { color: var(--pngrfl-paper); border-bottom-color: var(--pngrfl-gold); }
.pngrfl-steps__n {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	color: color-mix(in srgb, var(--pngrfl-paper) 35%, transparent);
}
.pngrfl-steps__item.is-on .pngrfl-steps__n { color: var(--pngrfl-gold); }
.pngrfl-steps__label { font-size: clamp(18px, 2vw, 24px); font-weight: 800; text-transform: uppercase; }

/* ── layout ── */
.pngrfl-cart {
	--pngrfl-cart-rule: var(--pngrfl-hairline, #E3DDD4);
	--pngrfl-cart-dim:  color-mix(in srgb, var(--pngrfl-paper) 60%, transparent);
	--pngrfl-cart-err:  #F08A7E;
	display: flex;
	flex-wrap: wrap;
	gap: 32px 48px;
	align-items: flex-start;
	font-family: var(--pngrfl-sans);
	color: var(--pngrfl-ink);
}
.pngrfl-cart.is-busy { cursor: progress; }
.pngrfl-cart.is-busy [data-items], .pngrfl-cart.is-busy [data-summary] { opacity: 0.6; transition: opacity 0.12s ease; }
.pngrfl-cart__col { display: flex; flex-direction: column; gap: 16px; flex: 2 1 560px; min-width: 0; }
.pngrfl-cart__panel { display: flex; flex-direction: column; background: var(--pngrfl-card, #FFF); border-top: 3px solid var(--pngrfl-ink); }

/* ── undo notice ── */
.pngrfl-cart__undo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	background: var(--pngrfl-card, #FFF);
	border-left: 4px solid var(--pngrfl-gold);
	padding: 12px 16px;
	font-size: 15px;
}
.pngrfl-cart__undo[hidden] { display: none; }
.pngrfl-cart__undobtn {
	background: transparent;
	border: none;
	color: var(--pngrfl-red);
	font-family: var(--pngrfl-sans);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.06em;
	cursor: pointer;
	min-height: 44px;
	padding: 0 4px;
}
.pngrfl-cart__undobtn:hover { color: var(--pngrfl-ink); }

/* ── item rows ── */
.pngrfl-cart__row {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) auto;
	gap: 18px;
	padding: 20px;
	border-bottom: 1px solid var(--pngrfl-cart-rule);
	align-items: center;
}
.pngrfl-cart__row:last-child { border-bottom: none; }
.pngrfl-cart__thumb { width: 96px; height: 96px; display: grid; place-items: center; overflow: hidden; background: var(--pngrfl-ink); }
.pngrfl-cart__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pngrfl-cart__thumb--ink  { background: var(--pngrfl-ink); }
.pngrfl-cart__thumb--red  { background: var(--pngrfl-red); }
.pngrfl-cart__thumb--gold { background: var(--pngrfl-gold); }
.pngrfl-cart__type {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pngrfl-gold);
	text-align: center;
	padding: 0 6px;
}
.pngrfl-cart__thumb--gold .pngrfl-cart__type { color: var(--pngrfl-ink); }
.pngrfl-cart__thumb--red  .pngrfl-cart__type { color: var(--pngrfl-paper); }

.pngrfl-cart__detail { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pngrfl-cart__cat {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pngrfl-red);
}
.pngrfl-cart__name { font-size: 18px; font-weight: 800; line-height: 1.2; text-wrap: pretty; }
.pngrfl-cart__name a { color: inherit; text-decoration: none; }
.pngrfl-cart__name a:hover { color: var(--pngrfl-red); }
.pngrfl-cart__meta { font-size: 14px; color: var(--pngrfl-muted); }
.pngrfl-cart__controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }

.pngrfl-cart__stepper { display: flex; align-items: center; border: 2px solid var(--pngrfl-ink); }
.pngrfl-cart__stepper button {
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: var(--pngrfl-ink);
	font-family: var(--pngrfl-sans);
}
.pngrfl-cart__stepper button:hover { background: color-mix(in srgb, var(--pngrfl-ink) 10%, transparent); }
.pngrfl-cart__qty { min-width: 32px; text-align: center; font-family: var(--pngrfl-mono); font-size: 14px; }

.pngrfl-cart__remove {
	background: transparent;
	border: none;
	padding: 0;
	min-height: 40px;
	color: var(--pngrfl-muted);
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: underline;
}
.pngrfl-cart__remove:hover { color: var(--pngrfl-red); }

.pngrfl-cart__money { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pngrfl-cart__line { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pngrfl-cart__each { font-family: var(--pngrfl-mono); font-size: 11px; color: #8A817A; }

.pngrfl-cart__continue {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pngrfl-red);
	text-decoration: none;
	align-self: flex-start;
}
.pngrfl-cart__continue:hover { color: var(--pngrfl-gold); }

/* ── empty state ── */
.pngrfl-cart__empty { padding: 48px 28px; gap: 18px; align-items: flex-start; }
.pngrfl-cart__emptytitle { font-size: clamp(24px, 3vw, 36px); font-weight: 800; text-transform: uppercase; line-height: 1; }
.pngrfl-cart__emptytext { font-size: 16px; color: var(--pngrfl-muted); }
.pngrfl-cart__emptycta { display: flex; gap: 12px; flex-wrap: wrap; }
.pngrfl-cart__btn {
	min-height: 48px;
	padding: 0 22px;
	display: flex;
	align-items: center;
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
}
.pngrfl-cart__btn.is-gold { background: var(--pngrfl-gold); color: var(--pngrfl-ink); }
.pngrfl-cart__btn.is-gold:hover { background: var(--pngrfl-ink); color: var(--pngrfl-paper); }
.pngrfl-cart__btn.is-outline { border: 2px solid var(--pngrfl-ink); color: var(--pngrfl-ink); }
.pngrfl-cart__btn.is-outline:hover { background: var(--pngrfl-ink); color: var(--pngrfl-paper); }

/* ── summary ── */
.pngrfl-cart__summary {
	background: var(--pngrfl-ink);
	color: var(--pngrfl-paper);
	border-top: 3px solid var(--pngrfl-gold);
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	position: sticky;
	top: 24px;
	flex: 1 1 340px;
	min-width: 0;
	box-sizing: border-box;
}
.pngrfl-cart__summary[hidden] { display: none; }
.pngrfl-cart__sumtitle { font-size: 22px; font-weight: 800; text-transform: uppercase; }
.pngrfl-cart__block { display: flex; flex-direction: column; gap: 10px; }
.pngrfl-cart__blocklabel {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pngrfl-cart-dim);
}

.pngrfl-cart__ship {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	text-align: left;
	padding: 12px 14px;
	min-height: 52px;
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--pngrfl-paper) 20%, transparent);
	color: var(--pngrfl-paper);
	cursor: pointer;
	font-family: var(--pngrfl-sans);
}
.pngrfl-cart__ship.is-on { background: color-mix(in srgb, var(--pngrfl-gold) 10%, transparent); border-color: var(--pngrfl-gold); }
.pngrfl-cart__radio {
	width: 14px;
	height: 14px;
	border: 2px solid color-mix(in srgb, var(--pngrfl-paper) 40%, transparent);
	display: block;
}
.pngrfl-cart__ship.is-on .pngrfl-cart__radio { border-color: var(--pngrfl-gold); background: var(--pngrfl-gold); }
.pngrfl-cart__shiptext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pngrfl-cart__shiplabel { font-size: 15px; font-weight: 700; }
.pngrfl-cart__shipnote { font-size: 12px; color: var(--pngrfl-cart-dim); }
.pngrfl-cart__shipprice { font-family: var(--pngrfl-mono); font-size: 13px; }

.pngrfl-cart__promo { display: flex; }
.pngrfl-cart__promo input {
	flex: 1;
	min-width: 0;
	min-height: 46px;
	padding: 0 14px;
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--pngrfl-paper) 30%, transparent);
	border-right: none;
	color: var(--pngrfl-paper);
	font-family: var(--pngrfl-sans);
	font-size: 15px;
	text-transform: uppercase;
	border-radius: 0;
}
.pngrfl-cart__promo input::placeholder { color: color-mix(in srgb, var(--pngrfl-paper) 45%, transparent); }
.pngrfl-cart__promo input:focus { outline: 2px solid var(--pngrfl-gold); outline-offset: -2px; }
.pngrfl-cart__promo button {
	min-height: 46px;
	padding: 0 16px;
	background: var(--pngrfl-paper);
	color: var(--pngrfl-ink);
	border: none;
	font-family: var(--pngrfl-sans);
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	cursor: pointer;
}
.pngrfl-cart__promo button:hover { background: var(--pngrfl-gold); }
.pngrfl-cart__codemsg { margin: 0; font-size: 13px; }
.pngrfl-cart__codemsg:empty { display: none; }
.pngrfl-cart__codemsg.is-ok { color: var(--pngrfl-gold); }
.pngrfl-cart__codemsg.is-error { color: var(--pngrfl-cart-err); }

.pngrfl-cart__totals {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-top: 1px solid color-mix(in srgb, var(--pngrfl-paper) 16%, transparent);
	padding-top: 18px;
	font-size: 15px;
}
.pngrfl-cart__totalrow { display: flex; justify-content: space-between; gap: 12px; }
.pngrfl-cart__totalrow.is-gold { color: var(--pngrfl-gold); }
.pngrfl-cart__totalval { font-family: var(--pngrfl-mono); }
.pngrfl-cart__uncoupon {
	background: transparent;
	border: none;
	color: inherit;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	padding: 0 0 0 4px;
	opacity: 0.7;
}
.pngrfl-cart__uncoupon:hover { opacity: 1; }
.pngrfl-cart__grand {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	border-top: 1px solid color-mix(in srgb, var(--pngrfl-paper) 16%, transparent);
	padding-top: 14px;
	margin-top: 4px;
	font-size: 16px;
	font-weight: 800;
	text-transform: uppercase;
}
.pngrfl-cart__grandval { font-size: 36px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pngrfl-cart__tax { font-size: 12px; color: color-mix(in srgb, var(--pngrfl-paper) 55%, transparent); }

.pngrfl-cart__checkout {
	min-height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pngrfl-gold);
	color: var(--pngrfl-ink);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	padding: 0 16px;
}
.pngrfl-cart__checkout:hover { background: var(--pngrfl-paper); color: var(--pngrfl-ink); }
.pngrfl-cart__pay {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--pngrfl-paper) 50%, transparent);
	text-align: center;
}

@media (max-width: 720px) {
	.pngrfl-steps__item { margin-right: 24px; }
	.pngrfl-cart__row { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 16px; }
	.pngrfl-cart__thumb { width: 72px; height: 72px; }
	.pngrfl-cart__money { grid-column: 2; align-items: flex-start; }
	.pngrfl-cart__summary { position: static; }
}

@media (prefers-reduced-motion: reduce) {
	.pngrfl-cart.is-busy [data-items], .pngrfl-cart.is-busy [data-summary] { transition: none; }
}

/* Errors need somewhere to land even when the promo field is not rendered. */
.pngrfl-cart__err { margin: 0; font-size: 14px; }
.pngrfl-cart__err:empty { display: none; }
.pngrfl-cart__err.is-error { color: var(--pngrfl-red); font-weight: 600; }
.pngrfl-cart__err.is-ok { color: var(--pngrfl-ink); }

/* ═══════════════════════════════════════════════════════════════════════════
   CHECKOUT (page 604) — numbered panels, radio cards, sticky ink summary,
   and the order-received confirmation. Scoped to .pngrfl-checkout /
   .pngrfl-confirm; WooCommerce's own class names are targeted inside those.
   ═══════════════════════════════════════════════════════════════════════════ */

.pngrfl-checkout {
	--pngrfl-co-border: #D5CDC4;
	--pngrfl-co-sel:    #FBF3E0;
	--pngrfl-co-dim:    color-mix(in srgb, var(--pngrfl-paper) 60%, transparent);
	display: flex;
	flex-wrap: wrap;
	gap: 32px 48px;
	align-items: flex-start;
	font-family: var(--pngrfl-sans);
	color: var(--pngrfl-ink);
}
.pngrfl-checkout__form { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pngrfl-checkout__aside { flex: 1 1 340px; min-width: 0; box-sizing: border-box; position: sticky; top: 24px; }
.pngrfl-checkout__editor { padding: 24px; background: var(--pngrfl-card, #FFF); border-top: 3px solid var(--pngrfl-ink); }

/* ── numbered panels ── */
.pngrfl-checkout__panel {
	background: var(--pngrfl-card, #FFF);
	border-top: 3px solid var(--pngrfl-ink);
	padding: 24px 22px 26px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.pngrfl-checkout__panelhead { display: flex; align-items: baseline; gap: 12px; }
.pngrfl-checkout__n { font-family: var(--pngrfl-mono); font-size: 11px; color: var(--pngrfl-red); }
.pngrfl-checkout__paneltitle { font-size: 20px; font-weight: 800; text-transform: uppercase; }
.pngrfl-checkout__panelnote { font-size: 14px; color: var(--pngrfl-muted); margin-top: -8px; }

.pngrfl-checkout__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 16px 18px;
}
.pngrfl-checkout__grid .form-row { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pngrfl-checkout__grid .form-row-wide,
.pngrfl-checkout__grid #billing_address_1_field { grid-column: 1 / -1; }
.pngrfl-hidden, .pngrfl-checkout__grid #billing_country_field { display: none !important; }

.pngrfl-checkout label,
.pngrfl-checkout .form-row label {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pngrfl-muted);
	font-weight: 400;
}
.pngrfl-checkout .required { color: var(--pngrfl-red); text-decoration: none; border: none; }
.pngrfl-checkout .form-row .description,
.pngrfl-checkout .form-row small { font-size: 12px; color: var(--pngrfl-muted); text-transform: none; letter-spacing: 0; }

.pngrfl-checkout input[type="text"],
.pngrfl-checkout input[type="email"],
.pngrfl-checkout input[type="tel"],
.pngrfl-checkout input[type="date"],
.pngrfl-checkout input[type="number"],
.pngrfl-checkout input[type="password"],
.pngrfl-checkout textarea,
.pngrfl-checkout select,
.pngrfl-checkout .select2-container .select2-selection--single {
	min-height: 48px;
	height: auto;
	padding: 0 14px;
	border: 1px solid var(--pngrfl-co-border);
	border-radius: 0;
	background: var(--pngrfl-card, #FFF);
	color: var(--pngrfl-ink);
	font-family: var(--pngrfl-sans);
	font-size: 16px;
	box-sizing: border-box;
	width: 100%;
}
.pngrfl-checkout textarea { padding: 12px 14px; min-height: 96px; }
.pngrfl-checkout input:focus,
.pngrfl-checkout select:focus,
.pngrfl-checkout textarea:focus { outline: 2px solid var(--pngrfl-gold); outline-offset: 0; border-color: var(--pngrfl-gold); }
.pngrfl-checkout .select2-container .select2-selection--single .select2-selection__rendered { line-height: 46px; padding: 0; color: var(--pngrfl-ink); }
.pngrfl-checkout .select2-container .select2-selection--single .select2-selection__arrow { height: 46px; }

/* ── inline validation ── */
.pngrfl-checkout .woocommerce-invalid input,
.pngrfl-checkout .woocommerce-invalid select,
.pngrfl-checkout .woocommerce-invalid .select2-selection { border-color: var(--pngrfl-red); }
.pngrfl-checkout .woocommerce-invalid label { color: var(--pngrfl-red); }
.pngrfl-checkout .woocommerce-validated input,
.pngrfl-checkout .woocommerce-validated select { border-color: var(--pngrfl-co-border); }

/* ── radio cards, shared by Delivery and Payment ── */
.pngrfl-checkout__option,
.pngrfl-checkout .wc_payment_methods > li > label:first-of-type {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	text-align: left;
	padding: 12px 14px;
	min-height: 56px;
	background: transparent;
	border: 1px solid var(--pngrfl-co-border);
	color: var(--pngrfl-ink);
	cursor: pointer;
	font-family: var(--pngrfl-sans);
	font-size: 15px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	margin: 0;
	box-sizing: border-box;
}
.pngrfl-checkout__option.is-on { background: var(--pngrfl-co-sel); border-color: var(--pngrfl-gold); }
.pngrfl-checkout__option input[type="radio"],
.pngrfl-checkout .wc_payment_methods input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.pngrfl-checkout__radio { width: 14px; height: 14px; border: 2px solid color-mix(in srgb, var(--pngrfl-ink) 40%, transparent); display: block; }
.pngrfl-checkout__option.is-on .pngrfl-checkout__radio { border-color: var(--pngrfl-red); background: var(--pngrfl-red); }
.pngrfl-checkout__optiontext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pngrfl-checkout__optionlabel { font-size: 15px; font-weight: 700; }
.pngrfl-checkout__optionprice { font-family: var(--pngrfl-mono); font-size: 13px; font-weight: 400; }

/* payment list: WooCommerce's own markup, dressed as the same cards */
.pngrfl-checkout .wc_payment_methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pngrfl-checkout .wc_payment_methods > li { border: none; padding: 0; background: none; }
.pngrfl-checkout .wc_payment_methods > li > label:first-of-type { grid-template-columns: 18px minmax(0, 1fr); }
.pngrfl-checkout .wc_payment_methods > li > label:first-of-type::before {
	content: "";
	width: 14px;
	height: 14px;
	border: 2px solid color-mix(in srgb, var(--pngrfl-ink) 40%, transparent);
	display: block;
}
.pngrfl-checkout .wc_payment_methods > li.wc_payment_method input:checked + label { background: var(--pngrfl-co-sel); border-color: var(--pngrfl-gold); }
.pngrfl-checkout .wc_payment_methods > li.wc_payment_method input:checked + label::before { border-color: var(--pngrfl-red); background: var(--pngrfl-red); }
.pngrfl-checkout .wc_payment_methods label img { max-height: 24px; width: auto; margin-left: auto; }
.pngrfl-checkout .payment_box {
	background: var(--pngrfl-co-sel);
	border: 1px solid var(--pngrfl-gold);
	border-top: none;
	margin: -1px 0 0;
	padding: 14px 16px 16px 44px;
	font-size: 14px;
	line-height: 1.55;
}
.pngrfl-checkout .payment_box::before { display: none; }
.pngrfl-checkout .payment_box p:last-child { margin-bottom: 0; }
.pngrfl-checkout__nopay { margin: 0; font-size: 15px; color: var(--pngrfl-muted); }

/* ── summary ── */
.pngrfl-checkout__summary {
	background: var(--pngrfl-ink);
	color: var(--pngrfl-paper);
	border-top: 3px solid var(--pngrfl-gold);
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.pngrfl-checkout__sumhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pngrfl-checkout__sumtitle { font-size: 22px; font-weight: 800; text-transform: uppercase; }
.pngrfl-checkout__edit {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pngrfl-gold);
	text-decoration: none;
}
.pngrfl-checkout__edit:hover { color: var(--pngrfl-paper); }
.pngrfl-checkout__items { display: flex; flex-direction: column; gap: 14px; }
.pngrfl-checkout__item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.pngrfl-checkout__thumb {
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	position: relative;
	overflow: hidden;
	background: var(--pngrfl-ink);
}
.pngrfl-checkout__thumb--red  { background: var(--pngrfl-red); }
.pngrfl-checkout__thumb--gold { background: var(--pngrfl-gold); }
.pngrfl-checkout__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pngrfl-checkout__qty {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	font-weight: 500;
	color: var(--pngrfl-paper);
	background: color-mix(in srgb, var(--pngrfl-ink) 55%, transparent);
}
.pngrfl-checkout__itemtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pngrfl-checkout__itemname { font-size: 14px; font-weight: 700; line-height: 1.25; }
.pngrfl-checkout__itemmeta { font-size: 12px; color: var(--pngrfl-co-dim); }
.pngrfl-checkout__itemline { font-family: var(--pngrfl-mono); font-size: 13px; }
.pngrfl-checkout__itemline .amount { font-family: inherit; }

.pngrfl-checkout__totals {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-top: 1px solid color-mix(in srgb, var(--pngrfl-paper) 16%, transparent);
	padding-top: 18px;
	font-size: 15px;
}
.pngrfl-checkout__totalrow { display: flex; justify-content: space-between; gap: 12px; }
.pngrfl-checkout__totalrow.is-gold { color: var(--pngrfl-gold); }
.pngrfl-checkout__totalval { font-family: var(--pngrfl-mono); }
.pngrfl-checkout__grand {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	border-top: 1px solid color-mix(in srgb, var(--pngrfl-paper) 16%, transparent);
	padding-top: 14px;
	margin-top: 4px;
	font-size: 16px;
	font-weight: 800;
	text-transform: uppercase;
}
.pngrfl-checkout__grandval { font-size: 36px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pngrfl-checkout__grandval .amount { font-size: inherit; font-weight: inherit; }
.pngrfl-checkout__tax { font-size: 12px; color: color-mix(in srgb, var(--pngrfl-paper) 55%, transparent); }

.pngrfl-checkout__place,
.pngrfl-checkout #place_order {
	min-height: 56px;
	width: 100%;
	border: none;
	border-radius: 0;
	background: var(--pngrfl-gold);
	color: var(--pngrfl-ink);
	font-family: var(--pngrfl-sans);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	line-height: 1.2;
	padding: 0 16px;
}
.pngrfl-checkout__place:hover, .pngrfl-checkout #place_order:hover { background: var(--pngrfl-paper); color: var(--pngrfl-ink); }
.pngrfl-checkout__secure {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--pngrfl-paper) 50%, transparent);
	text-align: center;
}

/* terms sit in the dark summary */
.pngrfl-checkout .woocommerce-terms-and-conditions-wrapper { font-size: 14px; }
.pngrfl-checkout .woocommerce-terms-and-conditions-wrapper label {
	font-family: var(--pngrfl-sans);
	font-size: 14px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--pngrfl-paper);
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.pngrfl-checkout .woocommerce-terms-and-conditions-wrapper a { color: var(--pngrfl-gold); }
.pngrfl-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
	width: 20px; height: 20px; min-height: 0; flex: none; accent-color: var(--pngrfl-red); margin: 1px 0 0;
}

/* ── notices ── */
.pngrfl-checkout-wrap .woocommerce-error,
.pngrfl-checkout-wrap .woocommerce-message,
.pngrfl-checkout-wrap .woocommerce-info {
	background: var(--pngrfl-card, #FFF);
	border: none;
	border-left: 4px solid var(--pngrfl-red);
	border-radius: 0;
	padding: 14px 16px;
	margin: 0 0 20px;
	font-size: 15px;
	color: var(--pngrfl-ink);
	list-style: none;
}
.pngrfl-checkout-wrap .woocommerce-message,
.pngrfl-checkout-wrap .woocommerce-info { border-left-color: var(--pngrfl-gold); }
.pngrfl-checkout-wrap .woocommerce-error::before,
.pngrfl-checkout-wrap .woocommerce-message::before,
.pngrfl-checkout-wrap .woocommerce-info::before { display: none; }
.pngrfl-checkout-wrap .woocommerce-error li { margin: 0 0 4px 0; }

/* ── order received ── */
.pngrfl-confirm { display: flex; flex-direction: column; gap: 24px; font-family: var(--pngrfl-sans); color: var(--pngrfl-ink); }
.pngrfl-confirm__panel {
	background: var(--pngrfl-card, #FFF);
	border-top: 3px solid var(--pngrfl-gold);
	padding: 36px 28px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	align-items: flex-start;
}
.pngrfl-confirm__panel.is-failed { border-top-color: var(--pngrfl-red); }
.pngrfl-confirm__kicker {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pngrfl-red);
}
.pngrfl-confirm__title { font-size: clamp(26px, 3.2vw, 40px); font-weight: 800; text-transform: uppercase; line-height: 1; }
.pngrfl-confirm__text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--pngrfl-body); max-width: 56ch; text-wrap: pretty; }
.pngrfl-confirm__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 2px;
	background: var(--pngrfl-hairline, #E3DDD4);
	border: 1px solid var(--pngrfl-hairline, #E3DDD4);
	width: 100%;
}
.pngrfl-confirm__fact { background: var(--pngrfl-card, #FFF); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.pngrfl-confirm__factk {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pngrfl-muted);
}
.pngrfl-confirm__factv { font-size: 15px; font-weight: 700; }
.pngrfl-confirm__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.pngrfl-confirm__btn {
	min-height: 48px;
	padding: 0 22px;
	display: flex;
	align-items: center;
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
}
.pngrfl-confirm__btn.is-gold { background: var(--pngrfl-gold); color: var(--pngrfl-ink); }
.pngrfl-confirm__btn.is-gold:hover { background: var(--pngrfl-ink); color: var(--pngrfl-paper); }
.pngrfl-confirm__btn.is-outline { border: 2px solid var(--pngrfl-ink); color: var(--pngrfl-ink); }
.pngrfl-confirm__btn.is-outline:hover { background: var(--pngrfl-ink); color: var(--pngrfl-paper); }
.pngrfl-confirm .woocommerce-order-details,
.pngrfl-confirm .woocommerce-customer-details,
.pngrfl-confirm .woocommerce-order-overview { background: var(--pngrfl-card, #FFF); padding: 24px 22px; }

@media (max-width: 720px) {
	.pngrfl-checkout__aside { position: static; }
	.pngrfl-checkout__panel { padding: 20px 16px 22px; }
	.pngrfl-confirm__panel { padding: 28px 20px; }
}

.pngrfl-checkout__totalrow.is-warn { color: var(--pngrfl-gold); }
.pngrfl-checkout__shipwarn {
	margin: -2px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: color-mix(in srgb, var(--pngrfl-paper) 70%, transparent);
}

/* "Deliver to a different address" reads as a control, not a heading. */
.pngrfl-checkout__shiptoggle { margin: 0; font-size: inherit; font-weight: 400; }
.pngrfl-checkout__shiptoggle label {
	display: flex;
	gap: 10px;
	align-items: center;
	font-family: var(--pngrfl-sans);
	font-size: 15px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	color: var(--pngrfl-ink);
	cursor: pointer;
}
.pngrfl-checkout__shiptoggle input[type="checkbox"] {
	width: 20px; height: 20px; min-height: 0; flex: none; accent-color: var(--pngrfl-red); margin: 0;
}
.pngrfl-checkout .shipping_address { margin-top: 4px; }

/* The checkout hero's H1, drawn by the steps widget so it can change on the
   confirmation. Sizing follows the kit's Draw H1 global. */
.pngrfl-steps__h1 {
	margin: 0;
	color: var(--pngrfl-paper);
	font-family: var(--pngrfl-sans);
	font-size: var(--e-global-typography-pngrfldrawh1-font-size, clamp(44px, 8vw, 108px));
	line-height: var(--e-global-typography-pngrfldrawh1-line-height, 0.92);
	font-weight: 800;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEMBER ACCOUNT (page 613) — hero tabs, digital card, membership panel,
   orders table, profile form, logged-out view.
   ═══════════════════════════════════════════════════════════════════════════ */

.pngrfl-account {
	--pngrfl-ac-border: #D5CDC4;
	--pngrfl-ac-rule:   var(--pngrfl-hairline, #E3DDD4);
	--pngrfl-ac-dim:    color-mix(in srgb, var(--pngrfl-paper) 60%, transparent);
	font-family: var(--pngrfl-sans);
	color: var(--pngrfl-ink);
}

/* ── hero ── */
.pngrfl-account--hero { display: flex; flex-direction: column; gap: 30px; color: var(--pngrfl-paper); }
.pngrfl-account__herotop { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.pngrfl-account__herotext { display: flex; flex-direction: column; gap: 22px; }
.pngrfl-account__eyebrow {
	display: flex; align-items: center; gap: 14px;
	font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.24em;
	text-transform: uppercase; color: var(--pngrfl-gold);
}
.pngrfl-account__rule { width: 34px; height: 2px; background: var(--pngrfl-red); display: block; flex: none; }
.pngrfl-account__h1 {
	margin: 0;
	font-size: clamp(44px, 7vw, 96px);
	line-height: 0.92;
	font-weight: 800;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--pngrfl-paper);
}
.pngrfl-account__logout {
	min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center;
	background: transparent; border: 1px solid color-mix(in srgb, var(--pngrfl-paper) 30%, transparent);
	color: var(--pngrfl-paper); font-family: var(--pngrfl-mono); font-size: 11px;
	letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
}
.pngrfl-account__logout:hover { border-color: var(--pngrfl-gold); color: var(--pngrfl-gold); }

.pngrfl-account__tabs { display: flex; border-bottom: 1px solid color-mix(in srgb, var(--pngrfl-paper) 20%, transparent); flex-wrap: wrap; }
.pngrfl-account__tab {
	background: transparent; border: none; border-bottom: 3px solid transparent;
	margin: 0 40px -1px 0; padding: 14px 0 16px; cursor: pointer;
	display: flex; align-items: baseline; gap: 10px;
	color: color-mix(in srgb, var(--pngrfl-paper) 45%, transparent);
	font-family: var(--pngrfl-sans);
}
.pngrfl-account__tab:hover { color: var(--pngrfl-paper); }
.pngrfl-account__tab.is-on { color: var(--pngrfl-paper); border-bottom-color: var(--pngrfl-gold); }
.pngrfl-account__tabn { font-family: var(--pngrfl-mono); font-size: 11px; color: color-mix(in srgb, var(--pngrfl-paper) 35%, transparent); }
.pngrfl-account__tab.is-on .pngrfl-account__tabn { color: var(--pngrfl-gold); }
.pngrfl-account__tablabel { font-size: clamp(18px, 2vw, 24px); font-weight: 800; text-transform: uppercase; }

/* ── shared furniture ── */
.pngrfl-account__panel {
	background: var(--pngrfl-card, #FFF);
	border-top: 3px solid var(--pngrfl-ink);
	padding: 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.pngrfl-account__paneltitle { font-size: 22px; font-weight: 800; text-transform: uppercase; line-height: 1.1; }
.pngrfl-account__kicker {
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--pngrfl-muted);
}
.pngrfl-account__muted { margin: 0; font-size: 15px; color: var(--pngrfl-muted); line-height: 1.55; }
.pngrfl-account__cols { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: stretch; }
.pngrfl-account__col { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pngrfl-account__col.is-wide { flex: 1.3 1 420px; }
.pngrfl-account__col .pngrfl-account__panel { flex: 1; }

.pngrfl-account__btn {
	min-height: 48px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--pngrfl-sans); font-size: 14px; font-weight: 800;
	text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none;
	border: none; cursor: pointer; text-align: center;
}
.pngrfl-account__btn.is-gold { background: var(--pngrfl-gold); color: var(--pngrfl-ink); }
.pngrfl-account__btn.is-gold:hover { background: var(--pngrfl-ink); color: var(--pngrfl-paper); }
.pngrfl-account__btn.is-outline { background: transparent; border: 2px solid var(--pngrfl-ink); color: var(--pngrfl-ink); }
.pngrfl-account__btn.is-outline:hover { background: var(--pngrfl-ink); color: var(--pngrfl-paper); }
.pngrfl-account__btn.is-ghost { background: transparent; border: 2px solid var(--pngrfl-gold); color: var(--pngrfl-gold); align-self: flex-start; }
.pngrfl-account__btn.is-ghost:hover { background: var(--pngrfl-gold); color: var(--pngrfl-ink); }
.pngrfl-account__btn.is-danger { background: var(--pngrfl-red); color: var(--pngrfl-paper); }
.pngrfl-account__btn.is-danger:hover { background: var(--pngrfl-ink); }
.pngrfl-account__btn:disabled { opacity: 0.6; cursor: progress; }

/* ── status notice ── */
.pngrfl-account__notice {
	display: flex; justify-content: space-between; align-items: center;
	gap: 12px 20px; flex-wrap: wrap;
	background: var(--pngrfl-card, #FFF);
	border-left: 4px solid var(--pngrfl-gold);
	padding: 16px 18px; font-size: 16px; font-weight: 600;
	margin-bottom: 32px;
}
.pngrfl-account__notice.is-red { border-left-color: var(--pngrfl-red); }
.pngrfl-account__notice .pngrfl-account__btn { min-height: 44px; font-size: 13px; }

/* ── digital member card ── */
.pngrfl-account__card {
	background: var(--pngrfl-ink);
	color: var(--pngrfl-paper);
	border-top: 6px solid var(--pngrfl-gold);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	position: relative;
	overflow: hidden;
	aspect-ratio: 1.586;
	min-height: 240px;
	box-sizing: border-box;
	background-image: repeating-linear-gradient(135deg, #1B1816 0 12px, #12100F 12px 24px);
}
.pngrfl-account__card.is-expired { border-top-color: var(--pngrfl-red); }
.pngrfl-account__card.is-expiring { border-top-color: var(--pngrfl-red); }
.pngrfl-account__cardtop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pngrfl-account__brand { display: flex; flex-direction: column; gap: 2px; }
.pngrfl-account__brandname { font-size: 14px; font-weight: 800; letter-spacing: 0.04em; }
.pngrfl-account__brandsub { font-family: var(--pngrfl-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--pngrfl-ac-dim); }
.pngrfl-account__chip {
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.14em;
	text-transform: uppercase; padding: 6px 10px;
	background: var(--pngrfl-gold); color: var(--pngrfl-ink);
}
.pngrfl-account__card.is-expired .pngrfl-account__chip,
.pngrfl-account__card.is-expiring .pngrfl-account__chip { background: var(--pngrfl-red); color: var(--pngrfl-paper); }
.pngrfl-account__cardfoot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.pngrfl-account__cardwho { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pngrfl-account__cardname { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; text-transform: uppercase; line-height: 1; }
.pngrfl-account__cardlevel { font-size: 14px; color: var(--pngrfl-gold); font-weight: 700; }
.pngrfl-account__cardno { font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.1em; color: color-mix(in srgb, var(--pngrfl-paper) 70%, transparent); }
.pngrfl-account__qr {
	width: 76px; height: 76px; flex: none; background: var(--pngrfl-paper);
	display: grid; place-items: center; padding: 4px; box-sizing: border-box;
}
.pngrfl-account__qr img, .pngrfl-account__qr svg { width: 100%; height: 100%; display: block; }
.pngrfl-account__qrno {
	font-family: var(--pngrfl-mono); font-size: 8px; letter-spacing: 0.04em;
	color: var(--pngrfl-ink); text-align: center; line-height: 1.3; word-break: break-all;
}
.pngrfl-account__cardacts { display: flex; gap: 10px; flex-wrap: wrap; }
.pngrfl-account__cardacts .pngrfl-account__btn { min-height: 44px; font-size: 13px; padding: 0 16px; }

/* ── membership panel ── */
.pngrfl-account__mship { gap: 22px; }
.pngrfl-account__mshiptop { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.pngrfl-account__mshiplevel { display: flex; flex-direction: column; gap: 6px; }
.pngrfl-account__level { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; text-transform: uppercase; line-height: 1; }
.pngrfl-account__price { font-size: 15px; color: var(--pngrfl-muted); }
.pngrfl-account__days { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pngrfl-account__daysn { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--pngrfl-ink); font-variant-numeric: tabular-nums; }
.pngrfl-account__days.is-expiring .pngrfl-account__daysn,
.pngrfl-account__days.is-expired .pngrfl-account__daysn { color: var(--pngrfl-red); }
.pngrfl-account__dayslabel { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pngrfl-muted); }
.pngrfl-account__bar { height: 6px; background: #EDE7DE; }
.pngrfl-account__barfill { display: block; height: 100%; background: var(--pngrfl-gold); }
.pngrfl-account__barfill.is-expiring, .pngrfl-account__barfill.is-expired { background: var(--pngrfl-red); }

.pngrfl-account__facts {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
	gap: 2px; background: var(--pngrfl-ac-rule); border: 1px solid var(--pngrfl-ac-rule);
}
.pngrfl-account__fact { background: var(--pngrfl-card, #FFF); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.pngrfl-account__factk { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pngrfl-muted); }
.pngrfl-account__factv { font-size: 15px; font-weight: 700; }

.pngrfl-account__acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; align-items: center; }
.pngrfl-account__cancel {
	min-height: 48px; padding: 0 12px; border: none; background: transparent;
	color: var(--pngrfl-muted); font-family: var(--pngrfl-mono); font-size: 11px;
	letter-spacing: 0.12em; text-transform: uppercase; text-decoration: underline; cursor: pointer;
}
.pngrfl-account__cancel:hover { color: var(--pngrfl-red); }
.pngrfl-account__confirm {
	display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap;
	background: color-mix(in srgb, var(--pngrfl-red) 8%, transparent);
	border-left: 4px solid var(--pngrfl-red); padding: 14px 16px; font-size: 15px;
}
.pngrfl-account__confirm[hidden] { display: none; }
.pngrfl-account__confirmacts { display: flex; gap: 10px; flex-wrap: wrap; }
.pngrfl-account__confirmacts .pngrfl-account__btn { min-height: 44px; font-size: 13px; }

/* ── benefits ── */
.pngrfl-account__benefits { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.pngrfl-account__benefitgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.pngrfl-account__benefit {
	background: var(--pngrfl-card, #FFF); border-top: 3px solid var(--pngrfl-gold);
	padding: 20px 18px; display: flex; flex-direction: column; gap: 8px;
}
.pngrfl-account__benefittitle { font-size: 17px; font-weight: 800; text-transform: uppercase; line-height: 1.1; }
.pngrfl-account__benefittext { font-size: 14px; line-height: 1.5; color: var(--pngrfl-muted); }

/* ── orders ── */
.pngrfl-account__tablewrap { overflow-x: auto; }
.pngrfl-account__table { width: 100%; min-width: 620px; border-collapse: collapse; }
.pngrfl-account__table th, .pngrfl-account__table td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--pngrfl-ac-rule); font-size: 15px; vertical-align: top; }
.pngrfl-account__table thead th {
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--pngrfl-muted); font-weight: 500;
	border-bottom-color: var(--pngrfl-ac-border);
}
.pngrfl-account__table tbody th { font-weight: 700; }
.pngrfl-account__orderno { display: block; }
.pngrfl-account__orderstatus {
	display: block; font-family: var(--pngrfl-mono); font-size: 10px;
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--pngrfl-muted); font-weight: 400;
}
.pngrfl-account__table a { color: var(--pngrfl-red); text-decoration: none; font-weight: 700; }
.pngrfl-account__table a:hover { color: var(--pngrfl-gold); }

/* ── profile form ── */
.pngrfl-account__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px 18px; }
.pngrfl-account__field { display: flex; flex-direction: column; gap: 6px; }
.pngrfl-account__label { font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pngrfl-muted); }
.pngrfl-account__field input, .pngrfl-account__field select {
	min-height: 48px; padding: 0 14px; border: 1px solid var(--pngrfl-ac-border);
	border-radius: 0; background: var(--pngrfl-card, #FFF); color: var(--pngrfl-ink);
	font-family: var(--pngrfl-sans); font-size: 16px; box-sizing: border-box; width: 100%;
}
.pngrfl-account__field input:focus, .pngrfl-account__field select:focus { outline: 2px solid var(--pngrfl-gold); outline-offset: 0; }
.pngrfl-account__field.is-invalid input, .pngrfl-account__field.is-invalid select { border-color: var(--pngrfl-red); }
.pngrfl-account__err { font-size: 13px; color: var(--pngrfl-red); }
.pngrfl-account__err:empty { display: none; }
.pngrfl-account__formfoot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.pngrfl-account__saved { font-size: 14px; }
.pngrfl-account__saved.is-ok { color: var(--pngrfl-ink); font-weight: 700; }
.pngrfl-account__saved.is-error { color: var(--pngrfl-red); font-weight: 600; }

/* ── logged out ── */
.pngrfl-account--out { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: flex-start; }
.pngrfl-account__login {
	flex: 1 1 420px; min-width: 0; box-sizing: border-box;
	background: var(--pngrfl-card, #FFF); border-top: 3px solid var(--pngrfl-ink);
	padding: 28px 24px; display: flex; flex-direction: column; gap: 18px;
}
.pngrfl-account__login .login-username label,
.pngrfl-account__login .login-password label {
	display: block; margin-bottom: 6px;
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--pngrfl-muted);
}
.pngrfl-account__login input[type="text"], .pngrfl-account__login input[type="password"] {
	min-height: 48px; padding: 0 14px; border: 1px solid var(--pngrfl-ac-border); border-radius: 0;
	font-family: var(--pngrfl-sans); font-size: 16px; box-sizing: border-box; width: 100%;
	background: var(--pngrfl-card, #FFF); color: var(--pngrfl-ink);
}
.pngrfl-account__login input:focus { outline: 2px solid var(--pngrfl-gold); outline-offset: 0; }
.pngrfl-account__login .login-remember { font-size: 15px; display: flex; align-items: center; gap: 10px; }
.pngrfl-account__login .login-remember label { display: flex; align-items: center; gap: 10px; }
.pngrfl-account__login .login-remember input { width: 18px; height: 18px; min-height: 0; accent-color: var(--pngrfl-red); margin: 0; }
.pngrfl-account__login .login-submit input[type="submit"] {
	min-height: 54px; width: 100%; border: none; border-radius: 0;
	background: var(--pngrfl-gold); color: var(--pngrfl-ink);
	font-family: var(--pngrfl-sans); font-size: 15px; font-weight: 800;
	letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
}
.pngrfl-account__login .login-submit input[type="submit"]:hover { background: var(--pngrfl-ink); color: var(--pngrfl-paper); }
.pngrfl-account__lost { font-size: 14px; color: var(--pngrfl-red); text-decoration: none; }
.pngrfl-account__lost:hover { color: var(--pngrfl-gold); }
.pngrfl-account__join {
	flex: 1 1 360px; min-width: 0; box-sizing: border-box;
	background: var(--pngrfl-ink); color: var(--pngrfl-paper);
	border-top: 3px solid var(--pngrfl-gold);
	padding: 28px 24px; display: flex; flex-direction: column; gap: 16px;
}
.pngrfl-account__join p { margin: 0; font-size: 16px; line-height: 1.6; color: color-mix(in srgb, var(--pngrfl-paper) 80%, transparent); text-wrap: pretty; }
.pngrfl-account__empty { align-items: flex-start; gap: 14px; padding: 36px 24px; }
.pngrfl-account__empty p { margin: 0; font-size: 16px; color: var(--pngrfl-muted); }

@media (max-width: 720px) {
	.pngrfl-account__tab { margin-right: 24px; }
	.pngrfl-account__panel { padding: 20px 16px; }
	.pngrfl-account__card { padding: 20px; aspect-ratio: auto; min-height: 0; }
	.pngrfl-account__cardfoot { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* Printing the card: everything else is hidden so it prints on its own. */
@media print {
	body.pngrfl-printing-card > *:not(:has(.pngrfl-account__card)) { display: none !important; }
	body.pngrfl-printing-card .pngrfl-account__pane[hidden],
	body.pngrfl-printing-card .pngrfl-account__cardacts,
	body.pngrfl-printing-card .pngrfl-account__mship,
	body.pngrfl-printing-card .pngrfl-account__notice,
	body.pngrfl-printing-card .pngrfl-account__benefits { display: none !important; }
	body.pngrfl-printing-card .pngrfl-account__card {
		border: 1px solid #000; box-shadow: none; max-width: 420px;
		-webkit-print-color-adjust: exact; print-color-adjust: exact;
	}
}

/* ── Membership gate: log in / sign up shown in place of the tiers ──────── */

.pngrfl-gate {
	--pngrfl-gate-border: #D5CDC4;
	display: flex;
	flex-wrap: wrap;
	gap: 32px 48px;
	align-items: flex-start;
	font-family: var(--pngrfl-sans);
	color: var(--pngrfl-ink);
}
.pngrfl-gate__panel {
	flex: 1 1 420px;
	min-width: 0;
	box-sizing: border-box;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.pngrfl-gate__login { background: var(--pngrfl-card, #FFF); border-top: 3px solid var(--pngrfl-ink); }
.pngrfl-gate__join  { background: var(--pngrfl-ink); color: var(--pngrfl-paper); border-top: 3px solid var(--pngrfl-gold); }
.pngrfl-gate__title { font-size: 22px; font-weight: 800; text-transform: uppercase; line-height: 1.1; }
.pngrfl-gate__lede { margin: 0; font-size: 16px; line-height: 1.6; color: var(--pngrfl-muted); }
.pngrfl-gate__join .pngrfl-gate__lede { color: color-mix(in srgb, var(--pngrfl-paper) 80%, transparent); }

.pngrfl-gate label,
.pngrfl-gate__field > span {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pngrfl-muted);
}
.pngrfl-gate__join .pngrfl-gate__field > span { color: color-mix(in srgb, var(--pngrfl-paper) 65%, transparent); }
.pngrfl-gate__field { display: flex; flex-direction: column; gap: 6px; }
.pngrfl-gate__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px 14px; }
.pngrfl-gate__form { display: flex; flex-direction: column; gap: 14px; }

.pngrfl-gate input[type="text"],
.pngrfl-gate input[type="email"],
.pngrfl-gate input[type="password"] {
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--pngrfl-gate-border);
	border-radius: 0;
	background: var(--pngrfl-card, #FFF);
	color: var(--pngrfl-ink);
	font-family: var(--pngrfl-sans);
	font-size: 16px;
	box-sizing: border-box;
	width: 100%;
}
.pngrfl-gate__join input[type="text"],
.pngrfl-gate__join input[type="email"] {
	background: transparent;
	border-color: color-mix(in srgb, var(--pngrfl-paper) 30%, transparent);
	color: var(--pngrfl-paper);
}
.pngrfl-gate input:focus { outline: 2px solid var(--pngrfl-gold); outline-offset: 0; }

.pngrfl-gate__login .login-username label,
.pngrfl-gate__login .login-password label { display: block; margin-bottom: 6px; }
.pngrfl-gate__login .login-remember { font-size: 15px; }
.pngrfl-gate__login .login-remember label {
	display: flex; align-items: center; gap: 10px;
	font-family: var(--pngrfl-sans); font-size: 15px;
	letter-spacing: 0; text-transform: none; color: var(--pngrfl-ink);
}
.pngrfl-gate__login .login-remember input { width: 18px; height: 18px; min-height: 0; accent-color: var(--pngrfl-red); margin: 0; }

.pngrfl-gate__login .login-submit input[type="submit"],
.pngrfl-gate__submit {
	min-height: 54px;
	width: 100%;
	border: none;
	border-radius: 0;
	background: var(--pngrfl-gold);
	color: var(--pngrfl-ink);
	font-family: var(--pngrfl-sans);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}
.pngrfl-gate__login .login-submit input[type="submit"]:hover { background: var(--pngrfl-ink); color: var(--pngrfl-paper); }
.pngrfl-gate__submit:hover { background: var(--pngrfl-paper); }

.pngrfl-gate__lost { font-size: 14px; color: var(--pngrfl-red); text-decoration: none; }
.pngrfl-gate__lost:hover { color: var(--pngrfl-gold); }
.pngrfl-gate__note { font-size: 13px; color: color-mix(in srgb, var(--pngrfl-paper) 60%, transparent); line-height: 1.5; }
.pngrfl-gate__error {
	margin: 0;
	padding: 12px 14px;
	background: color-mix(in srgb, var(--pngrfl-red) 18%, transparent);
	border-left: 4px solid var(--pngrfl-red);
	font-size: 14px;
	line-height: 1.5;
	color: var(--pngrfl-paper);
}
.pngrfl-gate__login .pngrfl-gate__error { color: var(--pngrfl-ink); }

/* The honeypot is off-screen rather than display:none, which bots skip. */
.pngrfl-gate__trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 600px) {
	.pngrfl-gate__panel { padding: 22px 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NEWS (page 231) — hero filters, featured lead + top stories, card grid,
   load more, newsletter band. Full-bleed sections are drawn by the widget,
   so it spans the page rather than sitting in a boxed container.
   ═══════════════════════════════════════════════════════════════════════════ */

.pngrfl-news {
	--pngrfl-nw-rule:  var(--pngrfl-hairline, #E3DDD4);
	--pngrfl-nw-rule2: #D5CDC4;
	--pngrfl-nw-body:  #4A433F;
	font-family: var(--pngrfl-sans);
	color: var(--pngrfl-ink);
	display: block;
}
.pngrfl-news.is-busy .pngrfl-news__grid { opacity: 0.55; transition: opacity 0.12s ease; }

/* A story with no photo gets a tinted panel rather than a gap — most of this
   site's posts have no featured image. */
.pngrfl-news__ph {
	background-color: var(--pngrfl-ink);
	background-image: repeating-linear-gradient(135deg, #201C1A 0 10px, #191615 10px 20px);
	display: block;
	position: relative;
	overflow: hidden;
}
.pngrfl-news__ph img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; }

/* ── hero ── */
.pngrfl-news__hero {
	background: var(--pngrfl-ink);
	background-image: repeating-linear-gradient(135deg, #201C1A 0 14px, #191615 14px 28px);
	color: var(--pngrfl-paper);
	padding: 11vh 5vw 0;
}
.pngrfl-news__herotop {
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 28px 72px;
	flex-wrap: wrap;
}
.pngrfl-news__herotext { display: flex; flex-direction: column; gap: 22px; }
.pngrfl-news__eyebrow {
	display: flex; align-items: center; gap: 14px;
	font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.24em;
	text-transform: uppercase; color: var(--pngrfl-gold);
}
.pngrfl-news__rule { width: 34px; height: 2px; background: var(--pngrfl-red); display: block; flex: none; }
.pngrfl-news__h1 {
	margin: 0;
	font-size: clamp(44px, 8vw, 108px);
	line-height: 0.92;
	font-weight: 800;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--pngrfl-paper);
}
.pngrfl-news__controls { display: flex; gap: 8px; flex-wrap: wrap; flex: 0 1 600px; min-width: 0; margin: 0; }
.pngrfl-news__control {
	display: flex; align-items: center; gap: 12px;
	min-height: 48px; padding: 0 12px 0 16px;
	border: 1px solid color-mix(in srgb, var(--pngrfl-paper) 30%, transparent);
	background: color-mix(in srgb, var(--pngrfl-ink) 60%, transparent);
	flex: 1 1 200px; min-width: 0; box-sizing: border-box;
}
.pngrfl-news__control.is-search { flex: 1.4 1 240px; padding: 0 16px; }
.pngrfl-news__ctrllabel {
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--pngrfl-gold); flex: none;
}
.pngrfl-news__control select,
.pngrfl-news__control input {
	flex: 1; min-width: 0; min-height: 46px;
	border: none; outline: none; background: transparent;
	color: var(--pngrfl-paper); font-family: var(--pngrfl-sans); font-size: 16px;
}
.pngrfl-news__control select { font-weight: 700; cursor: pointer; }
.pngrfl-news__control select option { color: var(--pngrfl-ink); }
.pngrfl-news__control input::placeholder { color: color-mix(in srgb, var(--pngrfl-paper) 50%, transparent); }
.pngrfl-news__control:focus-within { border-color: var(--pngrfl-gold); }
/* The submit is only for the no-JavaScript path. */
.pngrfl-news__go { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pngrfl-news__herorule {
	max-width: 1240px; margin: 34px auto 0;
	border-bottom: 1px solid color-mix(in srgb, var(--pngrfl-paper) 20%, transparent);
}

/* ── featured ── */
.pngrfl-news__featured[hidden] { display: none; }
.pngrfl-news__lead {
	max-width: 1240px;
	margin: 0 auto;
	padding: 7vh 5vw 0;
	display: flex;
	flex-wrap: wrap;
	gap: 32px 40px;
	box-sizing: content-box;
}
.pngrfl-news__leadcard {
	flex: 1.7 1 520px; min-width: 0;
	display: flex; flex-direction: column;
	background: var(--pngrfl-ink); color: var(--pngrfl-paper);
	border-top: 3px solid var(--pngrfl-gold);
	text-decoration: none;
}
.pngrfl-news__leadcard:hover .pngrfl-news__leadtitle { color: var(--pngrfl-gold); }
.pngrfl-news__media { width: 100%; }
.pngrfl-news__media.is-lead { aspect-ratio: 16 / 9; }
.pngrfl-news__tag {
	position: absolute; top: 0; left: 0;
	padding: 8px 12px; background: var(--pngrfl-red); color: #FFF;
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.16em;
	text-transform: uppercase; pointer-events: none; z-index: 1;
}
.pngrfl-news__leadbody { display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 28px; }
.pngrfl-news__leadmeta {
	font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--pngrfl-gold);
}
.pngrfl-news__leadtitle {
	font-size: clamp(26px, 3.2vw, 42px); line-height: 1; font-weight: 800;
	letter-spacing: -0.02em; text-transform: uppercase; text-wrap: pretty;
	transition: color 0.15s ease;
}
.pngrfl-news__leadexcerpt {
	font-size: 17px; line-height: 1.6;
	color: color-mix(in srgb, var(--pngrfl-paper) 80%, transparent);
	text-wrap: pretty; max-width: 62ch;
}

.pngrfl-news__top { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; }
.pngrfl-news__toplabel {
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--pngrfl-muted); padding-bottom: 12px;
}
.pngrfl-news__toprow {
	display: grid; grid-template-columns: 28px minmax(0, 1fr) 104px;
	gap: 14px; align-items: center;
	padding: 16px 0; border-top: 1px solid var(--pngrfl-nw-rule);
	text-decoration: none; color: var(--pngrfl-ink);
}
.pngrfl-news__toprow:last-child { border-bottom: 1px solid var(--pngrfl-nw-rule); }
.pngrfl-news__topn { font-family: var(--pngrfl-mono); font-size: 12px; color: var(--pngrfl-red); }
.pngrfl-news__toptext { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pngrfl-news__topmeta {
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--pngrfl-muted);
}
.pngrfl-news__toptitle { font-size: 16px; font-weight: 800; line-height: 1.2; text-wrap: pretty; }
.pngrfl-news__toprow:hover .pngrfl-news__toptitle { color: var(--pngrfl-red); }
.pngrfl-news__topthumb { width: 104px; height: 76px; flex: none; }

/* ── grid ── */
.pngrfl-news__more {
	max-width: 1240px; margin: 0 auto;
	padding: 7vh 5vw 9vh;
	display: flex; flex-direction: column; gap: 24px;
	box-sizing: content-box;
}
.pngrfl-news__morehead { display: flex; flex-direction: column; gap: 12px; }
.pngrfl-news__count {
	font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.2em;
	text-transform: uppercase; color: var(--pngrfl-red);
}
.pngrfl-news__h2 {
	margin: 0; font-size: clamp(30px, 4vw, 52px); font-weight: 800;
	text-transform: uppercase; letter-spacing: -0.025em; line-height: 0.95;
}
.pngrfl-news__grid { display: flex; flex-wrap: wrap; gap: 20px; }
.pngrfl-news__card {
	flex: 1 1 300px; min-width: 0;
	display: flex; flex-direction: column;
	background: var(--pngrfl-card, #FFF);
	border-top: 3px solid var(--pngrfl-ink);
	text-decoration: none; color: var(--pngrfl-ink);
	transition: border-color 0.15s ease;
}
.pngrfl-news__card:hover { border-top-color: var(--pngrfl-red); }
.pngrfl-news__card:hover .pngrfl-news__cardtitle { color: var(--pngrfl-red); }
.pngrfl-news__cardmedia { width: 100%; aspect-ratio: 3 / 2; max-height: 320px; }
.pngrfl-news__cardbody { display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 24px; }
.pngrfl-news__cardmeta {
	display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline;
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
}
.pngrfl-news__cardcat { color: var(--pngrfl-red); }
.pngrfl-news__carddate { color: var(--pngrfl-muted); }
.pngrfl-news__cardtitle {
	font-size: 21px; font-weight: 800; line-height: 1.15;
	text-transform: uppercase; text-wrap: pretty; transition: color 0.15s ease;
}
.pngrfl-news__cardexcerpt { font-size: 15px; line-height: 1.55; color: var(--pngrfl-nw-body); text-wrap: pretty; }

.pngrfl-news__empty {
	padding: 44px 24px; background: var(--pngrfl-card, #FFF);
	border-top: 3px solid var(--pngrfl-ink);
	display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.pngrfl-news__empty[hidden] { display: none; }
.pngrfl-news__emptytitle { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; text-transform: uppercase; }
.pngrfl-news__emptytext { font-size: 15px; color: var(--pngrfl-muted); }
.pngrfl-news__reset {
	min-height: 48px; padding: 0 22px; border: 2px solid var(--pngrfl-ink);
	background: transparent; font-family: var(--pngrfl-sans); font-size: 14px;
	font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer;
}
.pngrfl-news__reset:hover { background: var(--pngrfl-ink); color: var(--pngrfl-paper); }

.pngrfl-news__loadmore {
	align-self: center; min-height: 54px; padding: 0 30px; border: none;
	background: var(--pngrfl-ink); color: var(--pngrfl-paper);
	font-family: var(--pngrfl-sans); font-size: 14px; font-weight: 800;
	letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.pngrfl-news__loadmore:hover { background: var(--pngrfl-gold); color: var(--pngrfl-ink); }
.pngrfl-news__loadmore[hidden] { display: none; }

/* ── newsletter band: its own widget, so it can sit on any page ── */
.pngrfl-newsletter {
	font-family: var(--pngrfl-sans);
	color: #FFF;
	background: var(--pngrfl-red);
}
.pngrfl-newsletter.is-ink  { background: var(--pngrfl-ink); color: var(--pngrfl-paper); }
.pngrfl-newsletter.is-gold { background: var(--pngrfl-gold); color: var(--pngrfl-ink); }
.pngrfl-newsletter__notice { margin: 0; padding: 14px 16px; background: color-mix(in srgb, var(--pngrfl-gold) 18%, transparent); border-left: 4px solid var(--pngrfl-gold); font-size: 14px; color: var(--pngrfl-ink); }
.pngrfl-newsletter__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 8vh 5vw;
	display: flex; flex-wrap: wrap; gap: 28px 64px;
	align-items: flex-end; justify-content: space-between;
}
.pngrfl-newsletter__text { display: flex; flex-direction: column; gap: 16px; flex: 1 1 380px; }
.pngrfl-newsletter__eyebrow {
	display: flex; align-items: center; gap: 14px;
	font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.24em;
	text-transform: uppercase; color: inherit;
}
.pngrfl-newsletter__rule { width: 34px; height: 2px; background: var(--pngrfl-gold); display: block; flex: none; }
.pngrfl-newsletter.is-gold .pngrfl-newsletter__rule { background: var(--pngrfl-ink); }
.pngrfl-newsletter__heading {
	font-size: clamp(30px, 4vw, 52px); font-weight: 800; text-transform: uppercase;
	letter-spacing: -0.025em; line-height: 0.95;
}
.pngrfl-newsletter__copy { margin: 0; font-size: 17px; line-height: 1.55; text-wrap: pretty; max-width: 48ch; }
.pngrfl-newsletter__form { display: flex; flex: 1 1 380px; flex-wrap: wrap; position: relative; }
.pngrfl-newsletter__form input[type="email"] {
	flex: 1 1 220px; min-width: 0; min-height: 54px; padding: 0 16px;
	border: none; border-radius: 0; font-family: var(--pngrfl-sans); font-size: 16px;
	background: #FFF; color: var(--pngrfl-ink); box-sizing: border-box;
}
.pngrfl-newsletter__form input[type="email"]:focus { outline: 3px solid var(--pngrfl-gold); outline-offset: -3px; }
.pngrfl-newsletter.is-gold .pngrfl-newsletter__form input[type="email"]:focus { outline-color: var(--pngrfl-ink); }
.pngrfl-newsletter__form button {
	min-height: 54px; padding: 0 26px; border: none;
	background: var(--pngrfl-ink); color: var(--pngrfl-paper);
	font-family: var(--pngrfl-sans); font-size: 14px; font-weight: 800;
	letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.pngrfl-newsletter__form button:hover { background: var(--pngrfl-gold); color: var(--pngrfl-ink); }
.pngrfl-newsletter.is-gold .pngrfl-newsletter__form button:hover { background: var(--pngrfl-paper); color: var(--pngrfl-ink); }
.pngrfl-newsletter__form button:disabled { opacity: 0.7; cursor: progress; }
.pngrfl-newsletter__msg { flex: 1 0 100%; margin: 10px 0 0; font-size: 15px; font-weight: 700; }
.pngrfl-newsletter__msg:empty { display: none; }
.pngrfl-newsletter__msg.is-error { color: var(--pngrfl-ink); }
.pngrfl-newsletter__trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 600px) {
	.pngrfl-newsletter__inner { padding: 6vh 5vw; }
	.pngrfl-newsletter__form input[type="email"],
	.pngrfl-newsletter__form button { flex: 1 1 100%; }
}

@media (max-width: 860px) {
	.pngrfl-news__hero { padding-top: 8vh; }
	.pngrfl-news__controls { flex: 1 1 100%; }
	.pngrfl-news__toprow { grid-template-columns: 24px minmax(0, 1fr) 84px; }
	.pngrfl-news__topthumb { width: 84px; height: 62px; }
}
@media (max-width: 600px) {
	.pngrfl-news__card { flex: 1 1 100%; }
	.pngrfl-news__cardmedia { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
	.pngrfl-news__card, .pngrfl-news__cardtitle, .pngrfl-news__leadtitle,
	.pngrfl-news.is-busy .pngrfl-news__grid { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SINGLE NEWS POST (.pngrfl-art-*) — the "PNGRFL News Article" Theme Builder
   template: progress bar, dark hero, straddling featured image, story column
   with a sticky sidebar, article footer and related stories.

   Its own namespace on purpose. The theme's single.php styles are
   .pngrfl-article-* with single hyphens and still apply to any post this
   template does not cover, so the two must not touch.
   ═══════════════════════════════════════════════════════════════════════════ */

.pngrfl-art-progress,
.pngrfl-art-hero,
.pngrfl-art-figure,
.pngrfl-art-side,
.pngrfl-art-foot,
.pngrfl-art-rel,
.pngrfl-article {
	--pngrfl-art-rule:   #D5CDC4;
	--pngrfl-art-body:   #2A2522;
	--pngrfl-art-body-2: #4A433F;
	--pngrfl-art-meta:   #6B635E;
	--pngrfl-art-img:    #E3DDD4;
	--pngrfl-art-card:   var(--pngrfl-card, #FFFFFF);
	font-family: var(--pngrfl-sans);
	color: var(--pngrfl-ink);
}

/* ── reading progress ──
   Fixed rather than sticky: the first thing under it is the dark hero, and a
   sticky bar anchored inside a section loses the top of the window the moment
   that section scrolls away. */
.pngrfl-art-progress {
	--pngrfl-art-progress-h: 4px;
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 60;
	height: var(--pngrfl-art-progress-h);
	background: color-mix(in srgb, var(--pngrfl-ink) 15%, transparent);
	pointer-events: none;
}
.pngrfl-art-progress__fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--pngrfl-gold);
}
@media (prefers-reduced-motion: no-preference) {
	.pngrfl-art-progress__fill { transition: width 0.08s linear; }
}

/* ── masthead ──
   No dark band: the page is paper and stays paper. The only ink is the scrim
   across the bottom of the photo, which is what lets the headline sit on the
   picture without covering it. */
.pngrfl-art-hero {
	position: relative;
	padding: 3vh 5vw 0;
}
.pngrfl-art-hero__inner {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.pngrfl-art-hero__crumb {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pngrfl-art-meta);
}
.pngrfl-art-hero__crumb a { color: var(--pngrfl-red); text-decoration: none; }
.pngrfl-art-hero__crumb a:hover { color: var(--pngrfl-gold); }

/* ── the photo ── */
.pngrfl-art-hero__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.pngrfl-art-hero__frame {
	position: relative;
	width: 100%;
	/* Kept in step with the Shape and Tallest controls on the widget. */
	aspect-ratio: 3 / 2;
	max-height: 780px;
	overflow: hidden;
	background: #2A2522;
	border-top: 3px solid var(--pngrfl-gold);
	display: flex;
}
.pngrfl-art-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Where the crop bites.
   From the top by default: most photos in this library are square or
   upright, and a centred crop of a square in a 16:9 frame takes the tops of
   heads off. Anchored to the top, the picture is whole downwards and it is
   the foreground that is lost instead. */
.pngrfl-art-hero.is-crop-top .pngrfl-art-hero__img { object-position: 50% 0%; }
.pngrfl-art-hero.is-crop-center .pngrfl-art-hero__img { object-position: 50% 50%; }
.pngrfl-art-hero.is-crop-bottom .pngrfl-art-hero__img { object-position: 50% 100%; }
/* No crop at all: the frame carries the photo's own ratio, written inline by
   the widget. `contain` is the backstop for when the height cap bites on a
   very tall picture and the box can no longer hold that ratio. */
.pngrfl-art-hero.is-crop-natural .pngrfl-art-hero__img {
	object-fit: contain;
	object-position: 50% 0%;
}
/* Bottom only, and fading out well before the middle, so the picture above
   the headline is untouched. */
.pngrfl-art-hero__scrim {
	--pngrfl-art-scrim-h: 62%;
	position: absolute;
	inset: auto 0 0 0;
	height: var(--pngrfl-art-scrim-h);
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--pngrfl-ink) 92%, transparent) 0%,
		color-mix(in srgb, var(--pngrfl-ink) 74%, transparent) 30%,
		color-mix(in srgb, var(--pngrfl-ink) 34%, transparent) 66%,
		transparent 100%
	);
	pointer-events: none;
}
.pngrfl-art-hero__over {
	position: absolute;
	inset: auto 0 0 0;
	padding: 0 clamp(18px, 3vw, 40px) clamp(20px, 3.2vw, 40px);
	/* The chip is a link, so the block cannot swallow pointer events. */
	pointer-events: none;
}
.pngrfl-art-hero__over .pngrfl-art-hero__head { pointer-events: auto; }
.pngrfl-art-hero__cap {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--pngrfl-art-meta);
	line-height: 1.5;
}
.pngrfl-art-hero__cap a { color: var(--pngrfl-red); }

/* ── the headline block ── */
.pngrfl-art-hero__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 1040px;
}
.pngrfl-art-hero__labels {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	align-items: center;
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.pngrfl-art-hero__chip {
	background: var(--pngrfl-red);
	color: #FFFFFF;
	padding: 7px 11px;
	text-decoration: none;
}
.pngrfl-art-hero__chip:hover { background: var(--pngrfl-gold); color: var(--pngrfl-ink); }
.pngrfl-art-hero__kicker { color: var(--pngrfl-gold); }

.pngrfl-art-hero__title {
	margin: 0;
	font-weight: 800;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	text-wrap: balance;
	/* Club names here are long and unbreakable; without this a phone is
	   pushed sideways by the headline alone. */
	overflow-wrap: break-word;
}

/* Off the photo: ink on paper, and the headline can be as large as the
   design's full scale because nothing has to read through it. */
.pngrfl-art-hero.is-stacked .pngrfl-art-hero__title {
	color: var(--pngrfl-ink);
	font-size: clamp(30px, 6.6vw, 92px);
	line-height: 0.92;
}

/* On the photo: smaller, because it has to sit inside the picture, and paper
   coloured with a soft ink halo so it holds on a bright frame as well as a
   dark one. The halo is on the glyphs, not the photo. */
.pngrfl-art-hero.is-over .pngrfl-art-hero__title {
	color: var(--pngrfl-paper);
	font-size: clamp(25px, 4.2vw, 58px);
	line-height: 0.96;
	max-width: 24ch;
	text-shadow:
		0 1px 2px color-mix(in srgb, var(--pngrfl-ink) 70%, transparent),
		0 2px 22px color-mix(in srgb, var(--pngrfl-ink) 55%, transparent);
}
.pngrfl-art-hero.is-over .pngrfl-art-hero__head { gap: 14px; }

.pngrfl-art-hero__standfirst {
	margin: 0;
	font-size: clamp(17px, 1.6vw, 21px);
	line-height: 1.55;
	color: var(--pngrfl-art-body);
	max-width: 60ch;
	text-wrap: pretty;
}

/* ── byline and share, under the photo ── */
.pngrfl-art-hero__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	padding: 18px 0 0;
	border-top: 1px solid var(--pngrfl-art-rule);
}
.pngrfl-art-hero__by { display: flex; align-items: center; gap: 14px; }
.pngrfl-art-hero__face {
	width: 44px; height: 44px; flex: 0 0 44px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--pngrfl-art-card);
	border: 1px solid var(--pngrfl-art-rule);
	display: grid;
	place-items: center;
}
.pngrfl-art-hero__face img {
	width: 32px; height: 32px;
	object-fit: contain;
	display: block;
}
.pngrfl-art-hero__bytext { display: flex; flex-direction: column; gap: 4px; }
.pngrfl-art-hero__who { font-size: 15px; font-weight: 700; color: var(--pngrfl-ink); }
.pngrfl-art-hero__when {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pngrfl-art-meta);
}

.pngrfl-art-hero__share { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pngrfl-art-hero__sharelabel {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pngrfl-art-meta);
	margin-right: 6px;
}
.pngrfl-art-hero__sharebtn {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	border: 1px solid var(--pngrfl-art-rule);
	background: var(--pngrfl-art-card);
	color: var(--pngrfl-ink);
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pngrfl-art-hero__sharebtn.is-wa { font-size: 11px; }
.pngrfl-art-hero__sharebtn:hover,
.pngrfl-art-hero__sharebtn:focus-visible {
	background: var(--pngrfl-gold);
	color: var(--pngrfl-ink);
	border-color: var(--pngrfl-gold);
}
.pngrfl-art-hero__copy {
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--pngrfl-art-rule);
	background: var(--pngrfl-art-card);
	color: var(--pngrfl-ink);
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.pngrfl-art-hero__copy:hover,
.pngrfl-art-hero__copy:focus-visible { border-color: var(--pngrfl-gold); color: var(--pngrfl-red); }
.pngrfl-art-hero__copy.is-copied { border-color: var(--pngrfl-gold); color: var(--pngrfl-red); }

/* ── featured image ──
   The two-tone background is what makes the picture straddle the hero: ink
   down to the midline, paper below it. No negative margin, so nothing has to
   know how tall the hero ended up. */
.pngrfl-art-figure { padding: 0 5vw; background: var(--pngrfl-paper); }
.pngrfl-art-figure.is-overlap {
	background: linear-gradient(var(--pngrfl-ink) 0 50%, var(--pngrfl-paper) 50% 100%);
}
.pngrfl-art-figure__fig {
	margin: 0 auto;
	max-width: 1240px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.pngrfl-art-figure__frame {
	width: 100%;
	aspect-ratio: 16 / 8;
	max-height: 640px;
	background: #2A2522;
	border-top: 3px solid var(--pngrfl-gold);
	overflow: hidden;
}
.pngrfl-art-figure__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.pngrfl-art-figure__cap {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--pngrfl-art-meta);
	line-height: 1.5;
}
.pngrfl-art-figure__cap a { color: var(--pngrfl-red); }

/* ── story column and sidebar ── */
/* Elementor lays a container out as a column and sizes it with its own
   custom properties, so the row and the two measures are restated against
   .e-con to outrank them. Outside Elementor the plain class is enough. */
.pngrfl-art-body,
.pngrfl-art-body.e-con {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 48px 72px;
	align-items: flex-start;
	max-width: 1240px;
	margin: 0 auto;
	width: 100%;
}

.pngrfl-article,
.pngrfl-article.e-con {
	flex: 1 1 560px;
	min-width: 0;
	width: auto;
	max-width: 720px;
}

/* ── post content ──
   Scoped so Gutenberg's own output lands on the design without touching any
   block styles elsewhere on the site. */
.pngrfl-article .entry {
	font-size: 19px;
	line-height: 1.72;
	color: var(--pngrfl-art-body);
}
/* Elementor wraps a widget's output in .elementor-widget-container, so with
   the Post Content widget the story's blocks are grandchildren of .entry
   rather than children. Both shapes are matched, so these rules hold whether
   the body comes from the widget or straight from a theme template. */
.pngrfl-article .entry > *,
.pngrfl-article .entry > .elementor-widget-container > * { margin-block: 26px; }
.pngrfl-article .entry > :first-child,
.pngrfl-article .entry > .elementor-widget-container > :first-child { margin-block-start: 0; }
.pngrfl-article .entry > :last-child,
.pngrfl-article .entry > .elementor-widget-container > :last-child { margin-block-end: 0; }

/* The opening paragraph carries the reader in, so it is set larger and darker. */
.pngrfl-article .entry > p:first-child,
.pngrfl-article .entry > .elementor-widget-container > p:first-child {
	font-size: 22px;
	line-height: 1.6;
	color: var(--pngrfl-ink);
	font-weight: 500;
}
.pngrfl-article .entry p { text-wrap: pretty; }

.pngrfl-article .entry h2,
.pngrfl-article .entry h3,
.pngrfl-article .entry h4 {
	font-family: var(--pngrfl-sans);
	font-weight: 800;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--pngrfl-ink);
	margin-block: 40px 0;
	line-height: 1;
}
.pngrfl-article .entry h2 { font-size: clamp(26px, 3vw, 36px); }
.pngrfl-article .entry h3 { font-size: clamp(21px, 2.2vw, 26px); line-height: 1.1; }
.pngrfl-article .entry h4 { font-size: 18px; line-height: 1.2; letter-spacing: 0.02em; }

.pngrfl-article .entry a { color: var(--pngrfl-red); text-decoration: none; }
.pngrfl-article .entry a:hover { color: var(--pngrfl-gold); }

.pngrfl-article .entry blockquote,
.pngrfl-article .entry .wp-block-quote,
.pngrfl-article .entry .wp-block-pullquote {
	margin-block: 34px;
	padding: 6px 0 6px 28px;
	border-left: 4px solid var(--pngrfl-red);
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: none;
	text-align: left;
}
.pngrfl-article .entry blockquote p {
	margin: 0;
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.2;
	font-weight: 800;
	color: var(--pngrfl-ink);
	text-wrap: pretty;
}
.pngrfl-article .entry blockquote cite,
.pngrfl-article .entry blockquote .wp-block-quote__citation,
.pngrfl-article .entry blockquote footer {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pngrfl-art-meta);
	font-style: normal;
}

.pngrfl-article .entry ul,
.pngrfl-article .entry ol {
	padding-left: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.pngrfl-article .entry li { margin: 0; }
.pngrfl-article .entry li::marker { color: var(--pngrfl-red); }

/* A lone figure is a stacked picture-then-caption. A gallery is not: it is a
   contact sheet, so it is excluded here and given a grid below. Leaving it in
   made a 14-photo gallery one 204px-wide column, 3,000px tall. */
.pngrfl-article .entry figure:not(.wp-block-gallery),
.pngrfl-article .entry .wp-block-image {
	margin-block: 34px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.pngrfl-article .entry img {
	max-width: 100%;
	height: auto;
	display: block;
	background: var(--pngrfl-art-img);
}
.pngrfl-article .entry figcaption {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--pngrfl-art-meta);
	line-height: 1.5;
	margin: 0;
	text-align: left;
}

/* ── gallery ──
   A photo sheet: square tiles, tight joins, every one opening the lightbox.
   WordPress lays its gallery out with flex and `flex: 1 1 auto` per tile,
   which leaves ragged part-filled rows; a grid keeps the sheet square. */
.pngrfl-article .entry .wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
	gap: 6px;
	margin-block: 34px;
	padding: 0;
	list-style: none;
}
/* Honour a column count set on the block; "default" stays automatic. */
.pngrfl-article .entry .wp-block-gallery.columns-1 { grid-template-columns: 1fr; }
.pngrfl-article .entry .wp-block-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
.pngrfl-article .entry .wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
.pngrfl-article .entry .wp-block-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
.pngrfl-article .entry .wp-block-gallery.columns-5 { grid-template-columns: repeat(5, 1fr); }
.pngrfl-article .entry .wp-block-gallery.columns-6 { grid-template-columns: repeat(6, 1fr); }
.pngrfl-article .entry .wp-block-gallery.columns-7 { grid-template-columns: repeat(7, 1fr); }
.pngrfl-article .entry .wp-block-gallery.columns-8 { grid-template-columns: repeat(8, 1fr); }

/* The tile fills its grid cell.
   `!important` is deliberate and load-bearing: for a "default columns"
   gallery of six or more, WordPress core sets the figure to
   `width: calc(25% - …)` through a `:first-child:nth-last-child(n+6) ~ …`
   chain that cannot be out-specified without copying the chain — and the
   chain changes between core versions. As a grid item that 25% resolves
   against the cell, so every photo came out 45px square. Scoped to this
   gallery, so nothing else can be caught by it. */
.pngrfl-article .entry .wp-block-gallery .wp-block-image {
	margin: 0;
	display: block !important;
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--pngrfl-art-img);
	cursor: zoom-in;
	width: 100% !important;
	max-width: none !important;
	flex: none !important;
}
.pngrfl-article .entry .wp-block-gallery .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@media (prefers-reduced-motion: no-preference) {
	.pngrfl-article .entry .wp-block-gallery .wp-block-image img { transition: transform 0.35s ease, opacity 0.2s ease; }
}
.pngrfl-article .entry .wp-block-gallery .wp-block-image:hover img,
.pngrfl-article .entry .wp-block-gallery .wp-block-image:focus-visible img { transform: scale(1.05); }
/* The outline is drawn over the picture so it is not eaten by the crop. */
.pngrfl-article .entry .wp-block-gallery .wp-block-image::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid transparent;
	pointer-events: none;
	transition: border-color 0.15s ease;
}
.pngrfl-article .entry .wp-block-gallery .wp-block-image:hover::after,
.pngrfl-article .entry .wp-block-gallery .wp-block-image:focus-visible::after { border-color: var(--pngrfl-gold); }
.pngrfl-article .entry .wp-block-gallery .wp-block-image:focus-visible { outline: none; }
/* Per-photo captions belong in the lightbox, not stamped on a 148px tile. */
.pngrfl-article .entry .wp-block-gallery .wp-block-image figcaption { display: none; }
/* The gallery's own caption runs under the whole sheet. */
.pngrfl-article .entry .wp-block-gallery > figcaption { grid-column: 1 / -1; }

/* The count, added by the script once it has bound the sheet. */
.pngrfl-art-galcount {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pngrfl-art-meta);
	margin-bottom: 2px;
}
.pngrfl-art-galcount::before {
	content: "";
	width: 24px;
	height: 2px;
	background: var(--pngrfl-red);
	flex: 0 0 24px;
}

@media (max-width: 600px) {
	.pngrfl-article .entry .wp-block-gallery,
	.pngrfl-article .entry .wp-block-gallery.columns-3,
	.pngrfl-article .entry .wp-block-gallery.columns-4,
	.pngrfl-article .entry .wp-block-gallery.columns-5,
	.pngrfl-article .entry .wp-block-gallery.columns-6,
	.pngrfl-article .entry .wp-block-gallery.columns-7,
	.pngrfl-article .entry .wp-block-gallery.columns-8 { grid-template-columns: repeat(2, 1fr); }
}

.pngrfl-article .entry hr,
.pngrfl-article .entry .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--pngrfl-art-rule);
	margin-block: 40px;
}
.pngrfl-article .entry table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}
.pngrfl-article .entry th,
.pngrfl-article .entry td {
	border-bottom: 1px solid var(--pngrfl-art-rule);
	padding: 10px 12px;
	text-align: left;
}
.pngrfl-article .entry th {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pngrfl-art-meta);
}
.pngrfl-article .entry code,
.pngrfl-article .entry pre {
	font-family: var(--pngrfl-mono);
	font-size: 14px;
	background: var(--pngrfl-art-card);
	border: 1px solid var(--pngrfl-art-rule);
}
.pngrfl-article .entry code { padding: 2px 6px; }
.pngrfl-article .entry pre { padding: 16px; overflow: auto; }
.pngrfl-article .entry .wp-block-embed iframe,
.pngrfl-article .entry iframe { max-width: 100%; }

/* ── article footer ── */
.pngrfl-art-foot {
	display: flex;
	flex-direction: column;
	gap: 26px;
	margin-top: 38px;
}
.pngrfl-art-foot__rail {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 22px 0;
	border-top: 2px solid var(--pngrfl-ink);
	border-bottom: 1px solid var(--pngrfl-art-rule);
}
.pngrfl-art-foot__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pngrfl-art-foot__tag {
	padding: 9px 13px;
	background: var(--pngrfl-art-card);
	border: 1px solid var(--pngrfl-art-rule);
	color: var(--pngrfl-ink);
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color 0.15s ease;
}
.pngrfl-art-foot__tag:hover { border-color: var(--pngrfl-ink); color: var(--pngrfl-ink); }
.pngrfl-art-foot__updated {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pngrfl-art-meta);
	margin-left: auto;
}

.pngrfl-art-foot__nav { display: flex; flex-wrap: wrap; gap: 12px; }
.pngrfl-art-foot__card {
	flex: 1 1 260px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px;
	background: var(--pngrfl-art-card);
	border-top: 3px solid var(--pngrfl-ink);
	color: var(--pngrfl-ink);
	text-decoration: none;
	transition: border-color 0.15s ease;
}
.pngrfl-art-foot__card.is-next { text-align: right; }
.pngrfl-art-foot__card:hover { border-top-color: var(--pngrfl-red); color: var(--pngrfl-ink); }
.pngrfl-art-foot__dir {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pngrfl-red);
}
.pngrfl-art-foot__cardtitle {
	font-size: 17px;
	line-height: 1.2;
	font-weight: 800;
	text-wrap: pretty;
}

/* ── sidebar ──
   The column behaviour sits on whichever box is the flex item: Elementor's
   widget wrapper when the widget is dropped into a container, and the
   <aside> itself anywhere else. */
.pngrfl-art-sidecol,
.pngrfl-art-side {
	flex: 1 1 300px;
	min-width: 0;
	width: auto;
	max-width: 400px;
	position: sticky;
	top: 28px;
}
.pngrfl-art-side {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.pngrfl-art-side__block { display: flex; flex-direction: column; }
.pngrfl-art-side__head {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--pngrfl-red);
	padding-bottom: 12px;
	border-bottom: 2px solid var(--pngrfl-ink);
}
.pngrfl-art-side__rule { width: 34px; height: 2px; background: var(--pngrfl-red); display: block; flex: 0 0 34px; }

.pngrfl-art-side__row {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	gap: 12px;
	padding: 16px 0;
	border-bottom: 1px solid var(--pngrfl-art-rule);
	color: var(--pngrfl-ink);
	text-decoration: none;
}
.pngrfl-art-side__n {
	font-family: var(--pngrfl-mono);
	font-size: 12px;
	color: var(--pngrfl-red);
	padding-top: 2px;
}
.pngrfl-art-side__rowtext { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pngrfl-art-side__rowmeta {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pngrfl-art-meta);
}
.pngrfl-art-side__rowtitle {
	font-size: 16px;
	line-height: 1.25;
	font-weight: 800;
	text-wrap: pretty;
	transition: color 0.15s ease;
}
.pngrfl-art-side__row:hover .pngrfl-art-side__rowtitle { color: var(--pngrfl-red); }

.pngrfl-art-side__cta {
	background: var(--pngrfl-ink);
	color: var(--pngrfl-paper);
	padding: 26px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	border-top: 3px solid var(--pngrfl-gold);
}
.pngrfl-art-side__ctaeyebrow {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pngrfl-gold);
}
.pngrfl-art-side__ctatitle { font-size: 26px; line-height: 1; font-weight: 800; text-transform: uppercase; }
.pngrfl-art-side__ctatext {
	font-size: 15px;
	line-height: 1.5;
	color: color-mix(in srgb, var(--pngrfl-paper) 80%, transparent);
}
.pngrfl-art-side__ctabtn {
	align-self: flex-start;
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 20px;
	background: var(--pngrfl-gold);
	color: var(--pngrfl-ink);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}
.pngrfl-art-side__ctabtn:hover { background: var(--pngrfl-paper); color: var(--pngrfl-ink); }

/* ── related stories ── */
.pngrfl-art-rel {
	display: flex;
	flex-direction: column;
	gap: 26px;
	max-width: 1240px;
	margin: 0 auto;
	width: 100%;
}
.pngrfl-art-rel__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	flex-wrap: wrap;
}
.pngrfl-art-rel__title {
	margin: 0;
	font-size: clamp(30px, 4vw, 52px);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	line-height: 0.95;
}
.pngrfl-art-rel__all {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pngrfl-red);
	text-decoration: none;
	white-space: nowrap;
}
.pngrfl-art-rel__all:hover { color: var(--pngrfl-gold); }
.pngrfl-art-rel__grid { display: flex; flex-wrap: wrap; gap: 12px; }
.pngrfl-art-rel__grid .pngrfl-news__card:hover { border-top-color: var(--pngrfl-red); }

/* ── responsive ──
   At 900 the sidebar drops under the story and stops sticking; below that the
   body measure and the share row are the parts that need the room. */
@media (max-width: 900px) {
	.pngrfl-art-body { gap: 40px; }
	.pngrfl-article,
	.pngrfl-article.e-con { flex: 1 1 100%; max-width: 720px; }
	.pngrfl-art-sidecol,
	.pngrfl-art-side {
		position: static;
		flex: 1 1 100%;
		max-width: 720px;
	}
}
@media (max-width: 767px) {
	.pngrfl-art-hero { padding-top: 2vh; }
	.pngrfl-art-hero__inner { gap: 18px; }
	.pngrfl-art-hero.is-over .pngrfl-art-hero__title { max-width: none; }
	.pngrfl-art-hero__meta { align-items: flex-start; flex-direction: column; gap: 20px; }
	.pngrfl-art-hero__share { width: 100%; }
	.pngrfl-art-hero__sharelabel { flex: 1 1 100%; margin: 0 0 4px; }
	.pngrfl-art-hero__copy { flex: 1 1 auto; justify-content: center; }
	.pngrfl-article .entry { font-size: 17px; }
	.pngrfl-article .entry > p:first-child { font-size: 19px; }
	.pngrfl-art-foot__card.is-next { text-align: left; }
	.pngrfl-art-foot__updated { margin-left: 0; }
	.pngrfl-art-rel__grid .pngrfl-news__card { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.pngrfl-art-progress__fill,
	.pngrfl-art-hero__sharebtn,
	.pngrfl-art-foot__card,
	.pngrfl-art-foot__tag,
	.pngrfl-art-side__rowtitle { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LIGHTBOX (.pngrfl-lb) — the slideshow behind a news gallery.

   Built rather than borrowed: Elementor Pro's lightbox only binds to links
   that point at an image file, and these galleries are inserted with
   linkTo "none", so there is nothing for it to catch. Its chrome is also
   Elementor's rather than PNGRFL's.

   One element serves every gallery on the page; opening one just reloads it.
   ═══════════════════════════════════════════════════════════════════════════ */

.pngrfl-lb {
	--pngrfl-lb-ink: var(--pngrfl-ink, #12100F);
	--pngrfl-lb-gold: var(--pngrfl-gold, #E8B23A);
	--pngrfl-lb-paper: var(--pngrfl-paper, #F7F4EF);
	--pngrfl-mono: "JetBrains Mono", ui-monospace, monospace;
	--pngrfl-sans: "Archivo", system-ui, sans-serif;
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	font-family: var(--pngrfl-sans);
	color: var(--pngrfl-lb-paper);
}
.pngrfl-lb[hidden] { display: none; }

/* Fully opaque, deliberately. A photo is being looked at closely; a hint of
   the page bleeding through behind it is just noise. */
.pngrfl-lb__backdrop {
	position: absolute;
	inset: 0;
	background-color: var(--pngrfl-lb-ink);
	background-image: repeating-linear-gradient(135deg, #201C1A 0 14px, #191615 14px 28px);
}

.pngrfl-lb__panel {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px 5vw 20px;
	box-sizing: border-box;
}

.pngrfl-lb__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex: 0 0 auto;
}
.pngrfl-lb__count {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pngrfl-lb-gold);
	font-variant-numeric: tabular-nums;
}
.pngrfl-lb__close {
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid color-mix(in srgb, var(--pngrfl-lb-paper) 30%, transparent);
	background: transparent;
	color: var(--pngrfl-lb-paper);
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.pngrfl-lb__close:hover,
.pngrfl-lb__close:focus-visible { border-color: var(--pngrfl-lb-gold); color: var(--pngrfl-lb-gold); }

/* `minmax(0, 1fr)` on the row is what keeps the picture inside the window.
   An auto grid row grows to its content, so `max-height: 100%` on the image
   resolved against a row that had already stretched — a 1920px photo came
   out 1164px tall in a 900px viewport. */
.pngrfl-lb__stage {
	flex: 1 1 auto;
	min-height: 0;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) 56px;
	grid-template-rows: minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	overflow: hidden;
}
.pngrfl-lb__nav {
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	border: 1px solid color-mix(in srgb, var(--pngrfl-lb-paper) 30%, transparent);
	background: transparent;
	color: var(--pngrfl-lb-paper);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pngrfl-lb__nav:hover:not(:disabled),
.pngrfl-lb__nav:focus-visible {
	background: var(--pngrfl-lb-gold);
	color: var(--pngrfl-lb-ink);
	border-color: var(--pngrfl-lb-gold);
}
.pngrfl-lb__nav:disabled { opacity: 0.25; cursor: default; }

.pngrfl-lb__fig {
	margin: 0;
	min-width: 0;
	min-height: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	overflow: hidden;
}
.pngrfl-lb__img {
	flex: 0 1 auto;
	min-height: 0;
	min-width: 0;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
	background: none;
}
.pngrfl-lb.is-loading .pngrfl-lb__img { opacity: 0.35; }
@media (prefers-reduced-motion: no-preference) {
	.pngrfl-lb__img { transition: opacity 0.18s ease; }
}
.pngrfl-lb__cap {
	flex: 0 0 auto;
	max-width: 70ch;
	text-align: center;
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	line-height: 1.6;
	color: color-mix(in srgb, var(--pngrfl-lb-paper) 66%, transparent);
}
.pngrfl-lb__cap:empty { display: none; }

/* The slide strip. Scrolls sideways rather than wrapping, so the stage keeps
   the height it was given however many photos there are. */
.pngrfl-lb__strip {
	flex: 0 0 auto;
	display: flex;
	gap: 6px;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 4px;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--pngrfl-lb-paper) 30%, transparent) transparent;
}
.pngrfl-lb__strip::-webkit-scrollbar { height: 6px; }
.pngrfl-lb__strip::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--pngrfl-lb-paper) 30%, transparent); }
.pngrfl-lb__thumb {
	flex: 0 0 auto;
	width: 74px;
	height: 54px;
	padding: 0;
	border: 2px solid transparent;
	background: #2A2522;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}
.pngrfl-lb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pngrfl-lb__thumb:hover,
.pngrfl-lb__thumb:focus-visible { opacity: 1; }
.pngrfl-lb__thumb.is-current { opacity: 1; border-color: var(--pngrfl-lb-gold); }
/* A single photo has nothing to step through. */
.pngrfl-lb.is-single .pngrfl-lb__strip,
.pngrfl-lb.is-single .pngrfl-lb__nav { display: none; }
.pngrfl-lb.is-single .pngrfl-lb__stage { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 767px) {
	.pngrfl-lb__panel { padding: 12px 12px 16px; gap: 10px; }
	/* At phone width the arrows would eat the picture, so stepping is by
	   swipe, by the strip, or by the keyboard on a device that has one. */
	.pngrfl-lb__stage { grid-template-columns: minmax(0, 1fr); }
	.pngrfl-lb__nav { display: none; }
	.pngrfl-lb__thumb { width: 60px; height: 44px; }
}

/* Nothing behind the lightbox should scroll while it is open. */
body.pngrfl-lb-open { overflow: hidden; }


/* ═══════════════════════════════════════════════════════════════════════════
   SPONSOR CARDS (.pngrfl-spon) — the partner wall.

   Replaces the Elementor loop grid and its "Home — Partner tile" loop-item
   template, which needed the grid settings, the template and this stylesheet
   kept in step with each other.

   Columns come from the widget as custom properties, because repeat() takes
   a literal integer and will not accept a min() or a calc().
   ═══════════════════════════════════════════════════════════════════════════ */

.pngrfl-spon {
	--pngrfl-spon-logo-h: 64px;
	--pngrfl-spon-rule: var(--pngrfl-letterclosed, var(--pngrfl-hairline-strong, #D5CDC4));
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--pngrfl-spon-lg, 5), minmax(0, 1fr));
	gap: 12px;
	font-family: var(--pngrfl-sans);
}

/* The joined look used elsewhere on the site: no gap, a hairline showing
   through between the tiles instead. */
.pngrfl-spon.is-joined {
	gap: 2px;
	background: var(--pngrfl-spon-rule);
}

.pngrfl-spon__cell { display: flex; min-width: 0; }

.pngrfl-spon__card {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 20px 16px;
	min-height: 132px;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
	color: var(--pngrfl-ink);
	background: var(--pngrfl-card, #FFFFFF);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pngrfl-spon.is-paper .pngrfl-spon__card { background: var(--pngrfl-paper); }
.pngrfl-spon.is-ink .pngrfl-spon__card {
	background: var(--pngrfl-ink);
	color: var(--pngrfl-paper);
}

/* Only a card that goes somewhere reacts to the pointer. */
a.pngrfl-spon__card:hover,
a.pngrfl-spon__card:focus-visible { background: var(--pngrfl-gold); color: var(--pngrfl-ink); }
.pngrfl-spon.is-ink a.pngrfl-spon__card:hover,
.pngrfl-spon.is-ink a.pngrfl-spon__card:focus-visible { background: var(--pngrfl-gold); color: var(--pngrfl-ink); }
a.pngrfl-spon__card:focus-visible { outline: 3px solid var(--pngrfl-ink); outline-offset: -3px; }

.pngrfl-spon__logo {
	display: grid;
	place-items: center;
	width: 100%;
	height: var(--pngrfl-spon-logo-h);
	/* Backstop only — the image is capped by a length below, so nothing
	   should ever reach here. */
	overflow: hidden;
}
.pngrfl-spon__logo img {
	/* The cap is the custom property itself, not `100%`. A percentage
	   max-height resolves against the grid area, and an auto-sized track is
	   indefinite, so the browser treats it as `none` — every logo rendered
	   at its natural height and sat on top of the sponsor's name. */
	max-height: var(--pngrfl-spon-logo-h);
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* A sponsor with no logo yet: the name fills the plate rather than leaving
   a hole in the wall. */
.pngrfl-spon__logo.is-empty {
	font-weight: 800;
	font-size: 15px;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--pngrfl-muted, #8A817A);
	padding: 0 4px;
}
.pngrfl-spon__logo.is-empty + .pngrfl-spon__name { display: none; }

/* Grey until hovered — evens out a wall of clashing brand colours. Off by
   default: these logos were supplied and approved in colour. */
.pngrfl-spon.is-grey .pngrfl-spon__logo img {
	filter: grayscale(1);
	opacity: 0.72;
	transition: filter 0.2s ease, opacity 0.2s ease;
}
.pngrfl-spon.is-grey .pngrfl-spon__card:hover .pngrfl-spon__logo img,
.pngrfl-spon.is-grey a.pngrfl-spon__card:focus-visible .pngrfl-spon__logo img {
	filter: none;
	opacity: 1;
}

.pngrfl-spon__name {
	font-size: 12px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-wrap: balance;
}
.pngrfl-spon__tier {
	font-family: var(--pngrfl-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pngrfl-muted, #8A817A);
}
.pngrfl-spon.is-ink .pngrfl-spon__tier { color: color-mix(in srgb, var(--pngrfl-paper) 65%, transparent); }
a.pngrfl-spon__card:hover .pngrfl-spon__tier,
a.pngrfl-spon__card:focus-visible .pngrfl-spon__tier { color: var(--pngrfl-ink); }

.pngrfl-spon__notice {
	font-family: var(--pngrfl-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pngrfl-muted, #8A817A);
}

@media (max-width: 1279px) {
	.pngrfl-spon { grid-template-columns: repeat(var(--pngrfl-spon-md, 3), minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.pngrfl-spon { grid-template-columns: repeat(var(--pngrfl-spon-sm, 2), minmax(0, 1fr)); }
	.pngrfl-spon__card { min-height: 108px; padding: 16px 12px; }
	/* An odd number of sponsors leaves one alone in the last row at two
	   columns, with a hole beside it. It takes the full width instead. */
	.pngrfl-spon__cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
	.pngrfl-spon__card,
	.pngrfl-spon.is-grey .pngrfl-spon__logo img { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEDIA RELEASES (.pngrfl-mrel) — a compact, topic-grouped download list on the News page.
   Its own namespace: .pngrfl-releases__* already belongs to the older
   release-list widget on the About page, and sharing it broke both.
   ═══════════════════════════════════════════════════════════════════════════ */

.pngrfl-mrel {
	--pngrfl-mrel-rule: var(--pngrfl-hairline, #E3DDD4);
	font-family: var(--pngrfl-sans);
	color: var(--pngrfl-ink);
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.pngrfl-mrel__notice { margin: 0; padding: 14px 16px; background: color-mix(in srgb, var(--pngrfl-gold) 18%, transparent); border-left: 4px solid var(--pngrfl-gold); font-size: 14px; }
.pngrfl-mrel__head { display: flex; flex-direction: column; gap: 12px; }
.pngrfl-mrel__eyebrow {
	display: flex; align-items: center; gap: 14px;
	font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.24em;
	text-transform: uppercase; color: var(--pngrfl-red);
}
.pngrfl-mrel__rule { width: 34px; height: 2px; background: var(--pngrfl-red); display: block; flex: none; }
.pngrfl-mrel__h2 {
	margin: 0; font-size: clamp(30px, 4vw, 52px); font-weight: 800;
	text-transform: uppercase; letter-spacing: -0.025em; line-height: 0.95;
}
.pngrfl-mrel__intro { margin: 0; font-size: 17px; line-height: 1.6; color: var(--pngrfl-muted); max-width: 56ch; text-wrap: pretty; }

/* ── groups ── */
.pngrfl-mrel__group { display: flex; flex-direction: column; }
.pngrfl-mrel__group + .pngrfl-mrel__group { margin-top: 26px; }
.pngrfl-mrel__grouphead {
	margin: 0 0 6px;
	display: flex; align-items: baseline; gap: 10px;
	font-family: var(--pngrfl-mono); font-size: 11px; font-weight: 500;
	letter-spacing: 0.18em; text-transform: uppercase; color: var(--pngrfl-red);
}
.pngrfl-mrel__groupcount { color: var(--pngrfl-muted); font-size: 10px; }

/* ── compact rows ── */
.pngrfl-mrel__list {
	list-style: none; margin: 0; padding: 0;
	background: var(--pngrfl-card, #FFF);
	border-top: 2px solid var(--pngrfl-ink);
}
.pngrfl-mrel__item { border-bottom: 1px solid var(--pngrfl-mrel-rule); }
.pngrfl-mrel__item:last-child { border-bottom: none; }
.pngrfl-mrel__row {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr) auto;
	gap: 16px;
	align-items: baseline;
	padding: 11px 16px;
	text-decoration: none;
	color: var(--pngrfl-ink);
	transition: background 0.12s ease;
}
a.pngrfl-mrel__row:hover { background: color-mix(in srgb, var(--pngrfl-gold) 12%, transparent); }
a.pngrfl-mrel__row:hover .pngrfl-mrel__title { color: var(--pngrfl-red); }
.pngrfl-mrel__when {
	font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.06em;
	color: var(--pngrfl-muted); white-space: nowrap;
}
.pngrfl-mrel__nodate { color: color-mix(in srgb, var(--pngrfl-muted) 55%, transparent); }
.pngrfl-mrel__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pngrfl-mrel__title { font-size: 15px; font-weight: 700; line-height: 1.35; text-wrap: pretty; transition: color 0.12s ease; }
.pngrfl-mrel__summary { font-size: 13px; line-height: 1.45; color: var(--pngrfl-muted); text-wrap: pretty; }
.pngrfl-mrel__action { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.pngrfl-mrel__ext {
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.1em;
	color: var(--pngrfl-paper); background: var(--pngrfl-ink); padding: 3px 6px;
}
.pngrfl-mrel__size { font-family: var(--pngrfl-mono); font-size: 11px; color: var(--pngrfl-muted); }
.pngrfl-mrel__more {
	align-self: flex-start;
	font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--pngrfl-red); text-decoration: none;
}
.pngrfl-mrel__more:hover { color: var(--pngrfl-gold); }

@media (max-width: 600px) {
	/* The date moves under the title rather than squeezing three columns. */
	.pngrfl-mrel__row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 14px; }
	.pngrfl-mrel__when { grid-row: 2; grid-column: 1; }
	.pngrfl-mrel__text { grid-row: 1; grid-column: 1 / -1; }
	.pngrfl-mrel__action { grid-row: 2; grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
	.pngrfl-mrel__row, .pngrfl-mrel__title { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DOCUMENTS & POLICIES (page 1671) — hero controls, category blocks,
   document rows, request band.
   ═══════════════════════════════════════════════════════════════════════════ */

.pngrfl-docs {
	--pngrfl-doc-rule: #D5CDC4;
	--pngrfl-doc-body: #4A433F;
	font-family: var(--pngrfl-sans);
	color: var(--pngrfl-ink);
	display: block;
}

/* ── hero ── */
.pngrfl-docs__hero {
	background: var(--pngrfl-ink);
	background-image: repeating-linear-gradient(135deg, #201C1A 0 14px, #191615 14px 28px);
	color: var(--pngrfl-paper);
	padding: 10vh 5vw 5vh;
	display: flex;
	flex-direction: column;
	gap: 34px;
}
.pngrfl-docs__herotext { max-width: 1240px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 20px; }
.pngrfl-docs__eyebrow {
	display: flex; align-items: center; gap: 14px;
	font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.24em;
	text-transform: uppercase; color: var(--pngrfl-gold);
}
.pngrfl-docs__rule { width: 34px; height: 2px; background: var(--pngrfl-red); display: block; flex: none; }
.pngrfl-docs__h1 {
	margin: 0; font-size: clamp(38px, 6.4vw, 86px); line-height: 0.94;
	font-weight: 800; letter-spacing: -0.03em; text-transform: uppercase;
	color: var(--pngrfl-paper);
}
.pngrfl-docs__intro {
	margin: 0; font-size: 17px; line-height: 1.6; max-width: 56ch; text-wrap: pretty;
	color: color-mix(in srgb, var(--pngrfl-paper) 82%, transparent);
}
.pngrfl-docs__controls {
	max-width: 1240px; margin: 0 auto; width: 100%;
	display: flex; gap: 8px; flex-wrap: wrap;
}
.pngrfl-docs__control {
	display: flex; align-items: center; gap: 12px;
	min-height: 48px; padding: 0 12px 0 16px;
	border: 1px solid color-mix(in srgb, var(--pngrfl-paper) 30%, transparent);
	background: color-mix(in srgb, var(--pngrfl-ink) 60%, transparent);
	flex: 1 1 200px; min-width: 0; box-sizing: border-box;
}
.pngrfl-docs__control.is-search { flex: 1.5 1 240px; padding: 0 16px; }
.pngrfl-docs__control:focus-within { border-color: var(--pngrfl-gold); }
.pngrfl-docs__ctrllabel {
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--pngrfl-gold); flex: none;
}
.pngrfl-docs__control select,
.pngrfl-docs__control input {
	flex: 1; min-width: 0; min-height: 46px;
	border: none; outline: none; background: transparent;
	color: var(--pngrfl-paper); font-family: var(--pngrfl-sans); font-size: 16px;
}
.pngrfl-docs__control select { font-weight: 700; cursor: pointer; }
.pngrfl-docs__control select option { color: var(--pngrfl-ink); }
.pngrfl-docs__control input::placeholder { color: color-mix(in srgb, var(--pngrfl-paper) 50%, transparent); }
/* Submit exists only for the no-JavaScript path. */
.pngrfl-docs__go { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── results ── */
.pngrfl-docs__body {
	max-width: 1240px; margin: 0 auto;
	padding: 6vh 5vw 8vh;
	display: flex; flex-direction: column; gap: 22px;
	box-sizing: content-box;
}
.pngrfl-docs__count {
	font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.2em;
	text-transform: uppercase; color: var(--pngrfl-red);
}
.pngrfl-docs__results { display: flex; flex-direction: column; gap: 44px; }
.pngrfl-docs__blockhead {
	display: flex; justify-content: space-between; align-items: flex-end;
	gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--pngrfl-ink);
}
.pngrfl-docs__blockleft { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pngrfl-docs__blockname {
	margin: 0; font-size: clamp(22px, 2.6vw, 32px); font-weight: 800;
	text-transform: uppercase; letter-spacing: -0.02em; line-height: 1;
}
.pngrfl-docs__blockdesc { margin: 0; font-size: 15px; line-height: 1.5; color: var(--pngrfl-muted); text-wrap: pretty; }
.pngrfl-docs__blockcount {
	font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.14em;
	color: var(--pngrfl-muted); flex: none;
}
.pngrfl-docs__rows { display: flex; flex-direction: column; }

.pngrfl-docs__row {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto;
	gap: 20px;
	align-items: center;
	padding: 20px 0;
	border-bottom: 1px solid var(--pngrfl-doc-rule);
}
.pngrfl-docs__row:last-child { border-bottom: none; }
.pngrfl-docs__tile {
	width: 52px; height: 60px; flex: none;
	background: var(--pngrfl-card, #FFF);
	border-top: 3px solid var(--pngrfl-ink);
	display: grid; place-items: center;
	box-shadow: 0 0 0 1px var(--pngrfl-doc-rule);
}
.pngrfl-docs__tile.is-pdf  { border-top-color: var(--pngrfl-red); }
.pngrfl-docs__tile.is-docx,
.pngrfl-docs__tile.is-doc  { border-top-color: var(--pngrfl-gold); }
.pngrfl-docs__type {
	font-family: var(--pngrfl-mono); font-size: 10px; letter-spacing: 0.08em;
	color: var(--pngrfl-ink);
}
.pngrfl-docs__main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pngrfl-docs__title { font-size: 19px; font-weight: 800; line-height: 1.25; text-wrap: pretty; }
.pngrfl-docs__desc { font-size: 15px; line-height: 1.5; color: var(--pngrfl-doc-body); text-wrap: pretty; max-width: 68ch; }
.pngrfl-docs__meta {
	font-family: var(--pngrfl-mono); font-size: 11px; letter-spacing: 0.1em;
	text-transform: uppercase; color: var(--pngrfl-muted);
}
.pngrfl-docs__acts { display: flex; gap: 10px; flex-wrap: wrap; }
.pngrfl-docs__btn {
	min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center;
	font-family: var(--pngrfl-sans); font-size: 13px; font-weight: 800;
	letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
	white-space: nowrap;
}
.pngrfl-docs__btn.is-view { border: 2px solid var(--pngrfl-ink); color: var(--pngrfl-ink); background: transparent; }
.pngrfl-docs__btn.is-view:hover { background: var(--pngrfl-ink); color: var(--pngrfl-paper); }
.pngrfl-docs__btn.is-dl { background: var(--pngrfl-ink); color: var(--pngrfl-paper); border: 2px solid var(--pngrfl-ink); }
.pngrfl-docs__btn.is-dl:hover { background: var(--pngrfl-gold); border-color: var(--pngrfl-gold); color: var(--pngrfl-ink); }

.pngrfl-docs__empty,
.pngrfl-docs__none {
	padding: 44px 24px; background: var(--pngrfl-card, #FFF);
	border-top: 3px solid var(--pngrfl-ink);
	display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.pngrfl-docs__empty[hidden] { display: none; }
.pngrfl-docs__emptytitle { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; text-transform: uppercase; }
.pngrfl-docs__emptytext { font-size: 15px; color: var(--pngrfl-muted); max-width: 56ch; }
.pngrfl-docs__reset {
	min-height: 48px; padding: 0 22px; display: inline-flex; align-items: center;
	border: 2px solid var(--pngrfl-ink); background: transparent; color: var(--pngrfl-ink);
	font-family: var(--pngrfl-sans); font-size: 14px; font-weight: 800;
	text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; text-decoration: none;
}
.pngrfl-docs__reset:hover { background: var(--pngrfl-ink); color: var(--pngrfl-paper); }

/* ── request band ── */
.pngrfl-docs__request {
	background: var(--pngrfl-red); color: #FFF;
	/* Full-bleed band, capped content. The side padding is the larger of the
	   5vw gutter and whatever it takes to bring the content down to the
	   1240px site measure, so on a wide screen this band's copy lines up
	   with the sections above it and with the footer instead of running out
	   to the gutter on its own. */
	padding: 7vh max(5vw, (100% - 1240px) / 2);
	display: flex; flex-wrap: wrap; gap: 24px 56px;
	align-items: center; justify-content: space-between;
}
.pngrfl-docs__requesttext { display: flex; flex-direction: column; gap: 10px; flex: 1 1 380px; }
.pngrfl-docs__requesthead {
	font-size: clamp(26px, 3.4vw, 44px); font-weight: 800; text-transform: uppercase;
	letter-spacing: -0.025em; line-height: 0.98;
}
.pngrfl-docs__requesttext p { margin: 0; font-size: 16px; line-height: 1.55; max-width: 52ch; text-wrap: pretty; }
.pngrfl-docs__requestbtn {
	min-height: 54px; padding: 0 26px; display: inline-flex; align-items: center;
	background: var(--pngrfl-ink); color: var(--pngrfl-paper);
	font-family: var(--pngrfl-sans); font-size: 14px; font-weight: 800;
	letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
}
.pngrfl-docs__requestbtn:hover { background: var(--pngrfl-gold); color: var(--pngrfl-ink); }

@media (max-width: 860px) {
	.pngrfl-docs__controls > .pngrfl-docs__control { flex: 1 1 100%; }
}
@media (max-width: 600px) {
	/* Buttons drop below the title rather than squeezing the row. */
	.pngrfl-docs__row { grid-template-columns: 44px minmax(0, 1fr); gap: 8px 14px; padding: 18px 0; }
	.pngrfl-docs__tile { width: 44px; height: 52px; }
	.pngrfl-docs__main { grid-column: 2; }
	.pngrfl-docs__acts { grid-column: 2; margin-top: 6px; }
	.pngrfl-docs__btn { flex: 1 1 auto; justify-content: center; }
	.pngrfl-docs__request { padding: 6vh 5vw; }
}

/* =====================================================================
   OUR COMPETITIONS (page 3560) — handoff: design_handoff_competitions_page
   Page hero, competition cards, link list and the closing CTA row. All
   colours go through the site token layer; the design's literals are the
   same values the tokens carry.
   ===================================================================== */

/* ── Page hero ─────────────────────────────────────────────────────── */
.pngrfl-phero {
	--ph-ink: var(--pngrfl-ink);
	--ph-paper: var(--pngrfl-paper);
	--ph-gold: var(--pngrfl-gold);
	--ph-red: var(--pngrfl-accent, var(--pngrfl-red));
	--ph-bleed: max(5vw, (100% - 1240px) / 2);
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	padding: 11vh var(--ph-bleed) 9vh;
	background: var(--ph-ink);
	color: var(--ph-paper);
	font-family: var(--pngrfl-sans);
}
.pngrfl-phero::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, #201C1A 0 14px, #191615 14px 28px); }
/* Two columns while the copy column can still hold its measure, one below.
   auto-fit does that without a breakpoint the rest of the site has to know. */
.pngrfl-phero__in { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px 64px; align-items: end; }
/* The title is sized against its own column, not the viewport. The design's
   7.4vw assumes a full-width page; here the fixed sidebar takes 220px, so at
   1280 the column is 426px and 7.4vw renders "COMPETITIONS" 740px wide —
   straight across the intro beside it. 12.5cqi is the same proportion of the
   column the design strikes at its own width. */
.pngrfl-phero__lead { display: flex; flex-direction: column; gap: 22px; min-width: 0; container-type: inline-size; }
.pngrfl-phero__eyebrow { display: flex; align-items: center; gap: 14px; font: 11px var(--pngrfl-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--ph-gold); }
.pngrfl-phero__eyebrow > span { width: 34px; height: 2px; background: var(--ph-red); flex: none; }
.pngrfl-phero__title { margin: 0; font-size: clamp(36px, 12.5cqi, 100px); line-height: .92; font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; }
.pngrfl-phero__copy { display: flex; flex-direction: column; gap: 16px; max-width: 58ch; min-width: 0; }
.pngrfl-phero__intro, .pngrfl-phero__intro p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--ph-paper); text-wrap: pretty; }
.pngrfl-phero__intro p + p { margin-top: 16px; }
.pngrfl-phero__sub { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(247,244,239,.78); text-wrap: pretty; }

/* ── Competition cards ─────────────────────────────────────────────── */
.pngrfl-comps {
	--cp-ink: var(--pngrfl-ink);
	--cp-red: var(--pngrfl-accent, var(--pngrfl-red));
	--cp-line: #D5CDC4;
	--cp-body: #4A433F;
	--cp-bleed: max(5vw, (100% - 1240px) / 2);
	box-sizing: border-box;
	width: 100%;
	padding-inline: var(--cp-bleed);
	font-family: var(--pngrfl-sans);
	position: relative;
}
/* Lifts the row over the hero above it. */
.pngrfl-comps.is-overlap { margin-top: -5vh; }
/* Three across, then one. Never two-and-a-stray: the clamp flips straight
   from a third of the row to the whole of it at 760px. */
.pngrfl-comps__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(calc((100% - 48px) / 3), (760px - 100%) * 999, 100%), 1fr)); gap: 24px; }
.pngrfl-comps__card { display: flex; flex-direction: column; background: #fff; color: var(--cp-ink); border-top: 4px solid var(--pngrfl-comp-accent, var(--cp-red)); box-shadow: 0 1px 0 var(--cp-line); transition: transform .2s; text-decoration: none; }
a.pngrfl-comps__card:hover { transform: translateY(-4px); color: var(--cp-ink); }
a.pngrfl-comps__card:focus-visible { outline: 2px solid var(--pngrfl-gold); outline-offset: 3px; }
.pngrfl-comps__media { position: relative; aspect-ratio: 4 / 3; background: #2A2523; }
.pngrfl-comps__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* The crest hangs off the bottom-left of the photo; the body's top padding
   is what leaves room for it. */
.pngrfl-comps__logo { position: absolute; left: 16px; bottom: -36px; width: 88px; height: 88px; background: #fff; box-shadow: 0 4px 14px rgba(18,16,15,.18); padding: 8px; box-sizing: border-box; display: block; }
.pngrfl-comps__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pngrfl-comps__body { display: flex; flex-direction: column; gap: 12px; padding: 56px 24px 24px; flex: 1; }
.pngrfl-comps__body.is-nologo { padding-top: 24px; }
.pngrfl-comps__kicker { font: 11px var(--pngrfl-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--cp-red); }
.pngrfl-comps__title { margin: 0; font-size: 28px; line-height: 1; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; }
/* flex:1 so every CTA in the row sits on the same line. */
.pngrfl-comps__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--cp-body); text-wrap: pretty; flex: 1; }
.pngrfl-comps__cta { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--cp-line); font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-red); }

/* ── Other competitions list ───────────────────────────────────────── */
.pngrfl-llist {
	--ll-ink: var(--pngrfl-ink);
	--ll-red: var(--pngrfl-accent, var(--pngrfl-red));
	--ll-line: #D5CDC4;
	--ll-meta: var(--pngrfl-muted);
	--ll-bleed: max(5vw, (100% - 1240px) / 2);
	box-sizing: border-box;
	width: 100%;
	padding: 9vh var(--ll-bleed) 0;
	font-family: var(--pngrfl-sans);
	display: flex;
	flex-direction: column;
}
.pngrfl-llist__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 2px solid var(--ll-ink); }
.pngrfl-llist__heading { margin: 0; font-size: clamp(26px, 3.4vw, 42px); font-weight: 800; text-transform: uppercase; letter-spacing: -.025em; line-height: .95; }
.pngrfl-llist__side { font: 11px var(--pngrfl-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ll-meta); }
.pngrfl-llist__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); column-gap: 40px; }
.pngrfl-llist__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 76px; padding: 0 4px; border-bottom: 1px solid var(--ll-line); color: var(--ll-ink); font-size: 19px; font-weight: 800; text-decoration: none; }
a.pngrfl-llist__row:hover { color: var(--ll-red); }
a.pngrfl-llist__row:focus-visible { outline: 2px solid var(--pngrfl-gold); outline-offset: 2px; }
/* Listed, but there is no page to send anyone to yet. */
.pngrfl-llist__row.is-pending { color: var(--ll-meta); }
.pngrfl-llist__arrow { color: var(--ll-red); flex: none; }

/* ── Closing CTA row ───────────────────────────────────────────────── */
.pngrfl-ctarow {
	--cr-ink: var(--pngrfl-ink);
	--cr-red: var(--pngrfl-accent, var(--pngrfl-red));
	--cr-gold: var(--pngrfl-gold);
	--cr-bleed: max(5vw, (100% - 1240px) / 2);
	box-sizing: border-box;
	width: 100%;
	padding: 9vh var(--cr-bleed) 11vh;
	font-family: var(--pngrfl-sans);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 28px 48px;
}
.pngrfl-ctarow__statement { margin: 0; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.35; font-weight: 700; letter-spacing: -.01em; max-width: 40ch; text-wrap: pretty; }
.pngrfl-ctarow__btn { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 32px; background: var(--cr-red); color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.pngrfl-ctarow__btn:hover { background: var(--cr-ink); color: var(--cr-gold); }
.pngrfl-ctarow__btn:focus-visible { outline: 2px solid var(--cr-gold); outline-offset: 3px; }

/* =====================================================================
   COMPETITION PAGES (digicel / santos / nyc)
   handoff: design_handoff_competition_pages. One template, three pages.
   Everything scoped under .pngrfl-comp; colours come from the site tokens.
   ===================================================================== */
.pngrfl-comp {
	--cm-ink: var(--pngrfl-ink);
	--cm-paper: var(--pngrfl-paper);
	--cm-gold: var(--pngrfl-gold);
	--cm-red: var(--pngrfl-accent, var(--pngrfl-red));
	--cm-body: #4A433F;
	--cm-meta: #6B635E;
	--cm-rule: #D5CDC4;
	--cm-hair: #E6E0D8;
	/* The sticky anchor bar plus the site header, so an anchored heading
	   never lands underneath them. */
	--cm-stick: 56px;
	--cm-bleed: max(5vw, (100% - 1240px) / 2);
	box-sizing: border-box;
	width: 100%;
	font-family: var(--pngrfl-sans);
	color: var(--cm-ink);
}
.pngrfl-comp :focus-visible { outline: 2px solid var(--cm-gold); outline-offset: 2px; }
.pngrfl-comp__kicker { font: 11px var(--pngrfl-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--cm-red); }
.pngrfl-comp__empty, .pngrfl-comp__done { background: #fff; padding: 28px 22px; font-size: 16px; line-height: 1.6; color: var(--cm-body); }

/* ── Hero ──────────────────────────────────────────────────────────── */
.pngrfl-comp__hero { position: relative; overflow: hidden; background: var(--cm-ink); color: var(--cm-paper); padding: 8vh var(--cm-bleed) 0; }
.pngrfl-comp__hero::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, #201C1A 0 14px, #191615 14px 28px); }
.pngrfl-comp__hero-in { position: relative; display: flex; flex-direction: column; gap: 44px; }
.pngrfl-comp__crumb { display: flex; flex-wrap: wrap; gap: 10px; font: 11px var(--pngrfl-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(247,244,239,.7); }
.pngrfl-comp__crumb a { color: rgba(247,244,239,.7); text-decoration: none; }
.pngrfl-comp__crumb a:hover { color: var(--cm-gold); }
.pngrfl-comp__crumb .is-here { color: var(--cm-gold); }
/* The design's 440px minimum assumes a 1280 content width. Here the fixed
   sidebar leaves 917px, and 440+440+64 is 944 — so the hero fell to one
   column by 27px. 400 keeps two columns without touching the mobile stack. */
.pngrfl-comp__hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 40px 64px; align-items: center; }
.pngrfl-comp__hero-copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; container-type: inline-size; }
.pngrfl-comp__eyebrow { display: flex; align-items: center; gap: 14px; font: 11px var(--pngrfl-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--cm-gold); }
.pngrfl-comp__eyebrow > span { width: 34px; height: 2px; background: var(--cm-red); flex: none; }
/* Sized against its own column: the design's 6.6vw assumes a full-width
   page, and the fixed sidebar here makes the column far narrower. */
.pngrfl-comp__title { margin: 0; font-size: clamp(34px, 11.5cqi, 92px); line-height: .92; font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; text-wrap: balance; }
.pngrfl-comp__intro { margin: 0; font-size: 17px; line-height: 1.6; color: rgba(247,244,239,.85); max-width: 56ch; text-wrap: pretty; }
.pngrfl-comp__shot { position: relative; aspect-ratio: 4 / 3; background: #2A2523; }
.pngrfl-comp__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pngrfl-comp__crest { position: absolute; left: -16px; bottom: -16px; width: 104px; height: 104px; background: #fff; padding: 10px; box-sizing: border-box; box-shadow: 0 6px 18px rgba(0,0,0,.35); display: block; }
.pngrfl-comp__crest img { width: 100%; height: 100%; object-fit: contain; display: block; }

.pngrfl-comp__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 2px; background: #2A2523; margin-top: 12px; }
.pngrfl-comp__tile { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 26px; text-decoration: none; }
.pngrfl-comp__tile.is-draw { background: var(--cm-red); color: #fff; }
a.pngrfl-comp__tile.is-draw:hover { background: #A93226; color: #fff; }
.pngrfl-comp__tile.is-dark { background: #1C1918; color: var(--cm-paper); }
a.pngrfl-comp__tile.is-dark:hover { background: #262120; color: var(--cm-gold); }
.pngrfl-comp__tile-top { display: flex; justify-content: space-between; font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.pngrfl-comp__tile.is-dark .pngrfl-comp__tile-top span:last-child { color: var(--cm-gold); }
.pngrfl-comp__tile-sub { font: 11px var(--pngrfl-mono); letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; }
.pngrfl-comp__tile.is-dark .pngrfl-comp__tile-sub { color: rgba(247,244,239,.75); }

/* ── Sticky anchor nav ─────────────────────────────────────────────── */
/* Elementor wraps every widget in two divs, and a sticky box can only travel
   inside its own containing block — here that wrapper is exactly as tall as
   the bar (57px), so it had nowhere to go and never stuck. display:contents
   lifts the nav out of both wrappers, making the page section its containing
   block. */
.elementor-widget-pngrfl_comp_anchor_nav,
.elementor-widget-pngrfl_comp_anchor_nav > .elementor-widget-container { display: contents; }
.pngrfl-comp__anav { position: sticky; top: 0; z-index: 5; background: var(--cm-paper); border-bottom: 1px solid var(--cm-rule); padding-inline: var(--cm-bleed); }
.pngrfl-comp__anav-in { display: flex; gap: 28px; overflow-x: auto; align-items: center; }
.pngrfl-comp__anav a { display: flex; align-items: center; min-height: 56px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cm-ink); white-space: nowrap; text-decoration: none; }
.pngrfl-comp__anav a:hover { color: var(--cm-red); }

/* ── Sections ──────────────────────────────────────────────────────── */
.pngrfl-comp__sec { padding: 9vh var(--cm-bleed) 0; scroll-margin-top: var(--cm-stick); background: var(--cm-paper); }
.pngrfl-comp__sec-in { display: flex; flex-direction: column; gap: 28px; }
.pngrfl-comp__sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 2px solid var(--cm-ink); }
.pngrfl-comp__sec-head h2 { margin: 0; font-size: clamp(28px, 3.6vw, 46px); font-weight: 800; text-transform: uppercase; letter-spacing: -.025em; line-height: .95; }
.pngrfl-comp__more { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cm-red); text-decoration: none; }
.pngrfl-comp__more:hover { color: var(--cm-ink); }

/* ── Draw & results ────────────────────────────────────────────────── */
.pngrfl-comp__fix { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 40px; }
.pngrfl-comp__col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pngrfl-comp__cards { display: flex; flex-direction: column; gap: 12px; }
.pngrfl-comp__fixcard { display: flex; flex-direction: column; gap: 14px; background: #fff; padding: 20px 22px; border-top: 3px solid var(--cm-ink); }
.pngrfl-comp__fixmeta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 11px var(--pngrfl-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cm-meta); }
.pngrfl-comp__fixmeta .is-round { color: var(--cm-ink); font-weight: 500; }
.pngrfl-comp__fixteams { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 16px; align-items: center; }
.pngrfl-comp__fixteams > span { font-size: 18px; font-weight: 800; line-height: 1.15; }
.pngrfl-comp__fixteams .is-v { font: 12px var(--pngrfl-mono); font-weight: 400; color: var(--cm-meta); }
.pngrfl-comp__fixteams .is-away { text-align: right; }
.pngrfl-comp__venue { font-size: 13px; color: var(--cm-meta); }
.pngrfl-comp__results { display: flex; flex-direction: column; background: #fff; }
.pngrfl-comp__res { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 16px; padding: 16px 22px; border-bottom: 1px solid var(--cm-hair); }
.pngrfl-comp__res-meta { grid-column: 1 / -1; font: 10px var(--pngrfl-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cm-meta); }
.pngrfl-comp__res-team { font-size: 16px; }
.pngrfl-comp__res-score { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.pngrfl-comp__res .is-win { font-weight: 800; color: var(--cm-ink); }
.pngrfl-comp__res .is-loss { font-weight: 500; color: var(--cm-meta); }

/* ── Ladder ────────────────────────────────────────────────────────── */
.pngrfl-comp__tablewrap { overflow-x: auto; background: #fff; }
.pngrfl-comp__table { min-width: 640px; display: flex; flex-direction: column; }
.pngrfl-comp__trow { display: grid; grid-template-columns: 44px minmax(180px,1fr) repeat(5, 52px) 64px 132px; align-items: center; min-height: 54px; padding: 0 16px; border-bottom: 1px solid var(--cm-hair); font-size: 15px; font-variant-numeric: tabular-nums; }
.pngrfl-comp__table.is-noform .pngrfl-comp__trow { grid-template-columns: 44px minmax(180px,1fr) repeat(5, 52px) 64px; min-width: 0; }
.pngrfl-comp__table.is-noform { min-width: 520px; }
.pngrfl-comp__trow--head { min-height: 44px; background: var(--cm-ink); color: var(--cm-paper); font: 10px var(--pngrfl-mono); letter-spacing: .14em; text-transform: uppercase; border-bottom: 0; }
.pngrfl-comp__trow--head .is-pts { color: var(--cm-gold); }
.pngrfl-comp__trow .c { text-align: center; color: var(--cm-body); }
.pngrfl-comp__trow .r { text-align: right; }
.pngrfl-comp__trow .is-pos { font-weight: 800; color: var(--cm-meta); }
.pngrfl-comp__trow .is-pos.is-in { color: var(--cm-red); }
.pngrfl-comp__trow .is-team { font-weight: 700; line-height: 1.2; padding: 8px 12px 8px 0; }
.pngrfl-comp__trow .c.is-pts { font-weight: 800; font-size: 17px; color: var(--cm-ink); }
/* The finals line. */
.pngrfl-comp__trow.is-cut { border-bottom: 2px solid var(--cm-red); }
.pngrfl-comp__trow .is-form { display: flex; justify-content: flex-end; gap: 4px; }
.pngrfl-comp__trow .is-form i { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font: 500 10px var(--pngrfl-mono); font-style: normal; }
.pngrfl-comp .is-form i.is-W { background: var(--cm-ink); color: var(--cm-paper); }
.pngrfl-comp .is-form i.is-D { background: var(--cm-gold); color: var(--cm-ink); }
.pngrfl-comp .is-form i.is-L { background: var(--cm-rule); color: var(--cm-ink); }
.pngrfl-comp__legend { display: flex; align-items: center; gap: 10px; font: 10px var(--pngrfl-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cm-meta); }
.pngrfl-comp__legend > span { width: 22px; height: 2px; background: var(--cm-red); display: block; flex: none; }

/* ── Stat leaders ──────────────────────────────────────────────────── */
.pngrfl-comp__leaders { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(calc((100% - 48px) / 3), (760px - 100%) * 999, 100%), 1fr)); gap: 24px; }
.pngrfl-comp__lcard { display: flex; flex-direction: column; background: #fff; border-top: 4px solid var(--cm-red); }
.pngrfl-comp__ltop { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 18px; border-bottom: 1px solid var(--cm-hair); }
.pngrfl-comp__lhero { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.pngrfl-comp__lwho { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pngrfl-comp__lwho .is-name { font-size: 22px; font-weight: 800; line-height: 1.1; }
.pngrfl-comp__lwho .is-team { font-size: 13px; color: var(--cm-meta); }
.pngrfl-comp__lval { font-size: 52px; font-weight: 800; line-height: .85; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pngrfl-comp__lrow { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px 22px; border-bottom: 1px solid #F0EBE4; }
.pngrfl-comp__lrow .is-pos { font: 11px var(--pngrfl-mono); color: var(--cm-meta); }
.pngrfl-comp__lrow .is-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pngrfl-comp__lrow .is-name { font-size: 15px; font-weight: 700; }
.pngrfl-comp__lrow .is-team { font-size: 12px; color: var(--cm-meta); }
.pngrfl-comp__lrow .is-val { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── About ─────────────────────────────────────────────────────────── */
.pngrfl-comp__about { padding-bottom: 11vh; }
.pngrfl-comp__about-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px 64px; padding-top: 40px; border-top: 2px solid var(--cm-ink); }
.pngrfl-comp__about-copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pngrfl-comp__blurb { margin: 0; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.35; font-weight: 700; letter-spacing: -.01em; text-wrap: pretty; }
.pngrfl-comp__about-side { display: flex; flex-direction: column; gap: 22px; justify-content: flex-end; min-width: 0; }
.pngrfl-comp__facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--cm-rule); border-bottom: 1px solid var(--cm-rule); }
.pngrfl-comp__facts > div { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; }
.pngrfl-comp__facts .is-n { font-size: 36px; font-weight: 800; letter-spacing: -.02em; }
.pngrfl-comp__facts .is-k { font: 10px var(--pngrfl-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cm-meta); }
.pngrfl-comp__back { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 28px; border: 2px solid var(--cm-ink); color: var(--cm-ink); font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.pngrfl-comp__back:hover { background: var(--cm-ink); color: var(--cm-gold); }

/* =====================================================================
   MEDIA RELEASE — single-post template for posts tagged media-release
   handoff: design_handoff_media_release. Scoped under .pngrfl-mr.
   ===================================================================== */
.pngrfl-mr {
	--mr-ink: var(--pngrfl-ink);
	--mr-paper: var(--pngrfl-paper);
	--mr-gold: var(--pngrfl-gold);
	--mr-red: var(--pngrfl-accent, var(--pngrfl-red));
	--mr-body: #2B2522;
	--mr-meta: #6B635E;
	--mr-rule: #D5CDC4;
	--mr-hair: #E6E0D8;
	--mr-bleed: max(5vw, (100% - 1240px) / 2);
	box-sizing: border-box;
	width: 100%;
	font-family: var(--pngrfl-sans);
	color: var(--mr-ink);
}
.pngrfl-mr :focus-visible { outline: 2px solid var(--mr-gold); outline-offset: 2px; }
.pngrfl-mr__kicker { font: 11px var(--pngrfl-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--mr-red); }
.pngrfl-mr__kicker.is-gold { color: var(--mr-gold); }

/* ── Header ────────────────────────────────────────────────────────── */
.pngrfl-mr__head { position: relative; overflow: hidden; background: var(--mr-ink); color: var(--mr-paper); padding: 4vh var(--mr-bleed) 5vh; }
.pngrfl-mr__head::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, #201C1A 0 14px, #191615 14px 28px); }
.pngrfl-mr__head-in { position: relative; display: flex; flex-direction: column; gap: 18px; }
.pngrfl-mr__crumb { display: flex; flex-wrap: wrap; gap: 10px; font: 11px var(--pngrfl-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(247,244,239,.7); }
.pngrfl-mr__crumb a { color: rgba(247,244,239,.7); text-decoration: none; }
.pngrfl-mr__crumb a:hover { color: var(--mr-gold); }
.pngrfl-mr__crumb .is-here { color: var(--mr-gold); }
.pngrfl-mr__flags { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.pngrfl-mr__badge { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; background: var(--mr-red); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.pngrfl-mr__status { font: 12px var(--pngrfl-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mr-gold); }
.pngrfl-mr__title { margin: 0; max-width: 22ch; font-size: clamp(28px, 4.4vw, 60px); line-height: .93; font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; text-wrap: balance; }
.pngrfl-mr__meta { display: flex; flex-wrap: wrap; gap: 8px 28px; padding-top: 14px; border-top: 1px solid rgba(247,244,239,.2); font: 12px var(--pngrfl-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(247,244,239,.8); }

/* ── Featured image ────────────────────────────────────────────────── */
.pngrfl-mr__shot { padding-inline: var(--mr-bleed); position: relative; background: var(--mr-paper); }
.pngrfl-mr__shot.is-overlap { margin-top: -4vh; }
.pngrfl-mr__shot-in { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pngrfl-mr__shot-box { position: relative; background: #2A2523; max-width: 100%; }
.pngrfl-mr__shot-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pngrfl-mr__shot figcaption { font-size: 13px; color: var(--mr-meta); }

/* ── Body ──────────────────────────────────────────────────────────── */
.pngrfl-mr__body { max-width: 820px; min-width: 0; font-size: 18px; line-height: 1.7; color: var(--mr-body); display: flex; flex-direction: column; gap: 22px; }
.pngrfl-mr__body > p { margin: 0; text-wrap: pretty; }
.pngrfl-mr__body > p:first-of-type { font-size: 21px; line-height: 1.55; color: var(--mr-ink); font-weight: 500; }
.pngrfl-mr__dateline { font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.pngrfl-mr__body h2, .pngrfl-mr__body h3 { margin: 10px 0 0; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.05; color: var(--mr-ink); }
.pngrfl-mr__body a { color: var(--mr-red); }
.pngrfl-mr__body img { max-width: 100%; height: auto; }

/* Gutenberg Quote blocks. The second and later quotes take the gold rule, so
   a release that alternates CEO and Chairman reads as two voices. */
.pngrfl-mr__body blockquote { margin: 14px 0; padding: 4px 0 4px 28px; border-left: 4px solid var(--mr-red); display: flex; flex-direction: column; gap: 14px; }
.pngrfl-mr__body blockquote ~ blockquote { border-left-color: var(--mr-gold); }
.pngrfl-mr__body blockquote p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--mr-body); text-wrap: pretty; }
.pngrfl-mr__body blockquote p:first-of-type { font-size: 22px; line-height: 1.5; font-weight: 700; color: var(--mr-ink); }
.pngrfl-mr__body blockquote cite,
.pngrfl-mr__body blockquote footer { font: 12px var(--pngrfl-mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--mr-meta); }

/* Squad cards */
.pngrfl-mr__squad { margin: 18px 0 8px; background: #fff; border-top: 4px solid var(--mr-red); display: flex; flex-direction: column; }
.pngrfl-mr__squad.is-gold { border-top-color: var(--mr-gold); }
.pngrfl-mr__squad-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; padding: 24px 26px 18px; border-bottom: 1px solid var(--mr-hair); }
.pngrfl-mr__squad-who { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pngrfl-mr__squad-head h2 { margin: 0; font-size: clamp(24px, 3vw, 36px); line-height: .95; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; }
.pngrfl-mr__coach { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.pngrfl-mr__coach span { font: 10px var(--pngrfl-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mr-meta); }
.pngrfl-mr__coach b { font-size: 17px; font-weight: 800; line-height: 1.3; }
.pngrfl-mr__squad-intro { margin: 0; padding: 16px 26px 4px; font-size: 15px; line-height: 1.6; color: #4A433F; }
.pngrfl-mr__group { display: flex; flex-direction: column; padding: 14px 26px 22px; }
.pngrfl-mr__group-head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--mr-ink); font: 11px var(--pngrfl-mono); letter-spacing: .16em; text-transform: uppercase; }
.pngrfl-mr__group-head .is-count { color: var(--mr-meta); }
.pngrfl-mr__players { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); column-gap: 32px; }
.pngrfl-mr__players li { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid #F0EBE4; }
.pngrfl-mr__players .is-no { font: 12px var(--pngrfl-mono); color: var(--mr-red); font-variant-numeric: tabular-nums; }
.pngrfl-mr__players .is-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pngrfl-mr__players .is-name { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--mr-ink); }
.pngrfl-mr__players .is-club { font-size: 13px; line-height: 1.4; color: var(--mr-meta); }

.pngrfl-mr__ends { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 18px; margin: 18px 0 6px; }
.pngrfl-mr__ends span[aria-hidden] { height: 1px; background: var(--mr-rule); display: block; }
.pngrfl-mr__ends .is-word { font: 500 13px var(--pngrfl-mono); letter-spacing: .32em; text-transform: uppercase; color: var(--mr-ink); }

/* ── Sidebar ───────────────────────────────────────────────────────── */
.pngrfl-mr__side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: var(--pngrfl-mr-sticky, 24px); min-width: 0; }
.pngrfl-mr__contact { background: var(--mr-ink); color: var(--mr-paper); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.pngrfl-mr__who { display: flex; flex-direction: column; gap: 4px; }
.pngrfl-mr__who .is-name { font-size: 22px; font-weight: 800; line-height: 1.15; }
.pngrfl-mr__who .is-role { font-size: 14px; color: rgba(247,244,239,.75); }
.pngrfl-mr__lines { display: flex; flex-direction: column; border-top: 1px solid rgba(247,244,239,.18); }
.pngrfl-mr__lines a { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 48px; border-bottom: 1px solid rgba(247,244,239,.18); color: var(--mr-paper); font-size: 15px; font-weight: 600; text-decoration: none; }
.pngrfl-mr__lines a.is-email { word-break: break-all; }
.pngrfl-mr__lines a:hover { color: var(--mr-gold); }
.pngrfl-mr__lines .is-tag { font: 10px var(--pngrfl-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mr-gold); flex: none; }

.pngrfl-mr__dl { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 64px; padding: 0 22px; background: var(--mr-red); color: #fff; text-decoration: none; }
.pngrfl-mr__dl:hover { background: var(--mr-ink); color: var(--mr-gold); }
.pngrfl-mr__dl .is-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pngrfl-mr__dl .is-label { font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pngrfl-mr__dl .is-meta { font: 11px var(--pngrfl-mono); letter-spacing: .1em; }
.pngrfl-mr__dl .is-arrow { font-size: 20px; font-weight: 800; flex: none; }

.pngrfl-mr__details, .pngrfl-mr__share { background: #fff; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.pngrfl-mr__details dl { margin: 0; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px 16px; font-size: 14px; }
.pngrfl-mr__details dt { color: var(--mr-meta); }
.pngrfl-mr__details dd { margin: 0; font-weight: 700; }
.pngrfl-mr__details dd.is-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pngrfl-mr__details dd.is-chips a { padding: 3px 8px; border: 1px solid var(--mr-rule); font-size: 12px; font-weight: 700; color: var(--mr-ink); text-decoration: none; }
.pngrfl-mr__details dd.is-chips a:hover { border-color: var(--mr-red); color: var(--mr-red); }
.pngrfl-mr__share .is-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pngrfl-mr__share .is-row a, .pngrfl-mr__share .is-row button { padding: 8px 12px; border: 1px solid var(--mr-rule); background: none; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--mr-ink); text-decoration: none; cursor: pointer; border-radius: 0; }
.pngrfl-mr__share .is-row a:hover, .pngrfl-mr__share .is-row button:hover { border-color: var(--mr-red); color: var(--mr-red); }
.pngrfl-mr__share .is-row button.is-copied { border-color: var(--mr-red); color: var(--mr-red); }

/* ── Footer row ────────────────────────────────────────────────────── */
.pngrfl-mr__more { padding: 7vh var(--mr-bleed) 9vh; background: var(--mr-paper); }
.pngrfl-mr__more-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 40px; padding-top: 28px; border-top: 2px solid var(--mr-ink); }
.pngrfl-mr__more .is-copy { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pngrfl-mr__more h2 { margin: 0; font-size: clamp(26px, 3.4vw, 42px); font-weight: 800; text-transform: uppercase; letter-spacing: -.025em; line-height: .95; }
.pngrfl-mr__more .is-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; background: var(--mr-red); color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.pngrfl-mr__more .is-cta:hover { background: var(--mr-ink); color: var(--mr-gold); }

/* ── The two-column shell, built from the page container ───────────── */
.pngrfl-mr-main { padding: 7vh max(5vw, (100% - 1240px) / 2) 0; background: var(--pngrfl-paper); }
/* The flex items are Elementor's widget wrappers, not the article and aside
   inside them, so the column sizing and the sticky both belong on the
   wrapper — on the inner element they would have no effect. */
.pngrfl-mr-main > .pngrfl-mr-col-body { flex: 999 1 560px; min-width: 0; max-width: 820px; }
.pngrfl-mr-main > .pngrfl-mr-col-side { flex: 1 1 300px; min-width: 0; align-self: flex-start; position: sticky; top: 24px; }
.pngrfl-mr-col-side .pngrfl-mr__side { position: static; }
/* Stacked under the release there is nothing left to stick to, and a sticky
   last element only fights the scroll. */
@media (max-width: 900px) {
	.pngrfl-mr-main > .pngrfl-mr-col-side { position: static; }
}
@media print {
	.pngrfl-mr-main > .pngrfl-mr-col-side { position: static; max-width: none; }
	.pngrfl-mr-main { display: block !important; padding: 0 !important; }
}

/* ── Print: the release, its contact and nothing else ──────────────── */
@media print {
	.pngrfl-mr__side .pngrfl-mr__dl,
	.pngrfl-mr__side .pngrfl-mr__share,
	.pngrfl-mr__more,
	.pngrfl-mr__crumb { display: none !important; }
	.pngrfl-mr__head { background: #fff !important; color: #000 !important; padding: 0 0 12pt !important; }
	.pngrfl-mr__head::before { display: none !important; }
	.pngrfl-mr__badge { background: none !important; color: #000 !important; border: 1pt solid #000; padding: 0 6pt; }
	.pngrfl-mr__status, .pngrfl-mr__meta { color: #000 !important; }
	.pngrfl-mr__title { font-size: 24pt !important; }
	/* The contact block is a release's sign-off, so it prints last. */
	.pngrfl-mr__side { position: static !important; display: block !important; break-inside: avoid; }
	.pngrfl-mr__contact { background: none !important; color: #000 !important; border: 1pt solid #000; padding: 10pt !important; margin-top: 14pt; }
	.pngrfl-mr__contact .pngrfl-mr__kicker, .pngrfl-mr__who .is-role, .pngrfl-mr__lines a, .pngrfl-mr__lines .is-tag { color: #000 !important; }
	.pngrfl-mr__lines .is-tag { display: none !important; }
	.pngrfl-mr__squad { border-top: 2pt solid #000 !important; break-inside: avoid; }
	.pngrfl-mr__body { max-width: none; font-size: 11pt; }
	.pngrfl-mr__shot.is-overlap { margin-top: 0; }
}

/* ── Archive grid (tags, categories, dates) ────────────────────────────
   Used by the theme's archive.php, which now renders the main query. The
   media-release badge marks a newsroom item among ordinary news. */
.pngrfl-arch { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 28px; }
.pngrfl-arch__card { background: #fff; border-top: 3px solid var(--pngrfl-ink); min-width: 0; }
.pngrfl-arch__card.is-release { border-top-color: var(--pngrfl-red); }
.pngrfl-arch__card > a { display: flex; flex-direction: column; gap: 0; text-decoration: none; color: var(--pngrfl-ink); height: 100%; }
.pngrfl-arch__card:hover { transform: translateY(-3px); transition: transform .2s; }
.pngrfl-arch__shot { position: relative; display: block; aspect-ratio: 16 / 10; background: #2A2523; overflow: hidden; }
.pngrfl-arch__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pngrfl-arch__badge { position: absolute; left: 0; top: 0; background: var(--pngrfl-red); color: #fff; font: 800 11px var(--pngrfl-sans); letter-spacing: .16em; text-transform: uppercase; padding: 6px 10px; }
.pngrfl-arch__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; flex: 1; min-width: 0; }
.pngrfl-arch__date { font: 10px var(--pngrfl-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--pngrfl-muted); }
.pngrfl-arch__title { margin: 0; font-size: 19px; line-height: 1.2; font-weight: 800; text-transform: uppercase; letter-spacing: -.015em; }
.pngrfl-arch__card:hover .pngrfl-arch__title { color: var(--pngrfl-red); }
.pngrfl-arch__excerpt { font-size: 14px; line-height: 1.6; color: var(--pngrfl-body); }
.pngrfl-arch__pager { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.pngrfl-arch__pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 42px; padding: 0 10px; border: 1px solid var(--pngrfl-hairline); font: 700 14px var(--pngrfl-sans); color: var(--pngrfl-ink); text-decoration: none; }
.pngrfl-arch__pager .page-numbers.current { background: var(--pngrfl-ink); color: var(--pngrfl-paper); border-color: var(--pngrfl-ink); }
.pngrfl-arch__pager a.page-numbers:hover { border-color: var(--pngrfl-red); color: var(--pngrfl-red); }
.pngrfl-arch__empty { font-size: 16px; color: var(--pngrfl-muted); }