/**
 * Preluence Genesis — base
 * Reset, tokens (fallbacks), typography, layout primitives, forms, utilities.
 * Brand tokens are generated from the Customizer (inc/customizer/css-output.php).
 * Logical properties throughout so RTL works without a separate stylesheet.
 */

/* ---------- Token fallbacks ---------- */
:root {
	--pn-primary: #1b4ddb;
	--pn-primary-strong: #163fb3;
	--pn-on-primary: #fff;
	--pn-accent: #d92d20;
	--pn-on-accent: #fff;
	--pn-bg: #fff;
	--pn-surface: #f3f5f8;
	--pn-text: #14171c;
	--pn-text-muted: color-mix(in srgb, var(--pn-text) 64%, var(--pn-bg));
	--pn-border: color-mix(in srgb, var(--pn-text) 14%, var(--pn-bg));
	--pn-link: var(--pn-primary);
	--pn-font-heading: charter, "Bitstream Charter", "Sitka Text", cambria, georgia, serif;
	--pn-font-ui: "Roboto Condensed", "Arial Narrow", sans-serif;
	--pn-font-body: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Noto Sans", arial, sans-serif;
	--pn-font-size: 17px;
	--pn-container: 1280px;
	--pn-gutter: clamp(1rem, 3vw, 1.5rem);
	--pn-gap: clamp(1rem, 2.4vw, 1.75rem);
	--pn-radius: 6px;
	--pn-img-focus: 50% 0%;
	--pn-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 4px 16px rgb(0 0 0 / 6%);
	--pn-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--pn-header-offset: 0;
	color-scheme: light;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--pn-header-offset) + 1rem);
}

body {
	margin: 0;
	background: var(--pn-bg);
	color: var(--pn-text);
	font-family: var(--pn-font-body);
	font-size: var(--pn-font-size);
	line-height: 1.65;
	text-rendering: optimizelegibility;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

figure {
	margin: 0;
}

/* Core image widgets with a caption print the image width as an inline
   pixel width on figure.wp-caption. Cap the wrapper too: the img is already
   capped to 100%, but it resolves that against the over-wide figure, so a
   full-size image in a narrow front-page column pushes the page sideways. */
.wp-caption,
.widget_media_image figure {
	max-width: 100%;
}

/* Belt and braces for widget images that are not wrapped in a caption. */
.wp-caption img,
.widget_media_image img {
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	font-family: var(--pn-font-heading);
	font-weight: 700;
	line-height: 1.2;
	text-wrap: balance;
}

p {
	margin: 0 0 1em;
	text-wrap: pretty;
}

a {
	color: var(--pn-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a:hover {
	text-decoration-thickness: 2px;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* ---------- Focus ---------- */
:focus-visible {
	outline: 3px solid var(--pn-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

.pn-main:focus {
	outline: none;
}

/* ---------- Accessibility utilities ---------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.pn-skip-link:focus {
	position: fixed !important;
	inset-block-start: 0.75rem;
	inset-inline-start: 0.75rem;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	margin: 0;
	clip: auto;
	clip-path: none;
	background: var(--pn-bg);
	color: var(--pn-text);
	font-weight: 700;
	box-shadow: var(--pn-shadow);
	white-space: normal;
}

/* ---------- Layout ---------- */
.pn-container {
	width: 100%;
	max-width: calc(var(--pn-container) + 2 * var(--pn-gutter));
	margin-inline: auto;
	padding-inline: var(--pn-gutter);
}

.pn-main {
	display: block;
	padding-block: clamp(1rem, 2vw, 1.75rem) clamp(1.5rem, 3vw, 2.5rem);
	/* Customize -> Theme Options -> Header: gap between the header and the
	   first block. 0 leaves the theme's flush edge-to-edge hero alone. */
	margin-block-start: var(--pn-header-gap, 0);
}

.pn-layout {
	display: grid;
	gap: calc(var(--pn-gap) * 1.2);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {

	.pn-has-sidebar .pn-layout:not(.pn-layout--full) {
		grid-template-columns: minmax(0, 1fr) 320px;
	}

	.pn-sidebar-left .pn-layout:not(.pn-layout--full) {
		grid-template-columns: 320px minmax(0, 1fr);
	}

	.pn-sidebar-left .pn-layout__sidebar {
		order: -1;
	}
}

.pn-grid {
	display: grid;
	gap: var(--pn-gap);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 600px) {

	.pn-grid--archive,
	.pn-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {

	.pn-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pn-grid--archive {
		grid-template-columns: repeat(var(--pn-archive-cols, 3), minmax(0, 1fr));
	}

	.pn-has-sidebar .pn-grid--archive {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	}
}

/* ---------- Section headings ---------- */
.pn-section-head {
	--pn-badge: var(--pn-primary);
	display: flex;
	align-items: flex-end;
	gap: 1rem;
	margin-block-end: 1.25rem;
	border-block-end: 2px solid var(--pn-border);
}

.pn-section-title {
	margin: 0 0 -2px;
	padding-block-end: 0.45rem;
	border-block-end: 3px solid var(--pn-badge);
	font-family: var(--pn-font-ui);
	font-size: clamp(1.15rem, 1.8vw, 1.35rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.1;
	text-transform: uppercase;
}

/* Titles outside a section head (comments, related) keep the same look. */
:not(.pn-section-head) > .pn-section-title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-block-end: 1.25rem;
	padding: 0;
	border: 0;
}

:not(.pn-section-head) > .pn-section-title::after {
	content: "";
	flex: 1;
	height: 2px;
	background: var(--pn-border);
}

:not(.pn-section-head) > .pn-section-title > span {
	padding-block-end: 0.3rem;
	border-block-end: 3px solid var(--pn-primary);
}

.pn-view-all {
	margin-inline-start: auto;
	margin-block-end: 0.45rem;
	padding: 0.2rem 0.6rem;
	border: 1px solid var(--pn-border);
	border-radius: 3px;
	color: var(--pn-text-muted);
	font-family: var(--pn-font-ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.pn-view-all:hover {
	border-color: var(--pn-badge);
	background: var(--pn-badge);
	color: var(--pn-on-badge, #fff);
}

/* ---------- Buttons & forms ---------- */
.pn-button,
.wp-element-button,
input[type="submit"],
button[type="submit"]:not(.pn-search-form__submit) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.6rem 1.25rem;
	border: 0;
	border-radius: var(--pn-radius);
	background: var(--pn-primary);
	color: var(--pn-on-primary);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s var(--pn-ease);
}

.pn-button:hover,
.wp-element-button:hover,
input[type="submit"]:hover {
	background: var(--pn-primary-strong);
	color: var(--pn-on-primary);
}

.pn-button--outline {
	border: 2px solid var(--pn-primary);
	background: transparent;
	color: var(--pn-link);
	font-family: var(--pn-font-ui);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea,
select {
	width: 100%;
	min-height: 44px;
	padding: 0.55rem 0.8rem;
	border: 1px solid var(--pn-border);
	border-radius: var(--pn-radius);
	background: var(--pn-bg);
}

.pn-icon-button {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.pn-icon-button:hover {
	background: color-mix(in srgb, currentcolor 10%, transparent);
}

/* Search form */
.pn-search-form {
	display: flex;
	max-width: 640px;
	border: 1px solid var(--pn-border);
	border-radius: var(--pn-radius);
	background: var(--pn-bg);
	overflow: hidden;
}

.pn-search-form:focus-within {
	outline: 3px solid var(--pn-primary);
	outline-offset: 1px;
}

.pn-search-form__input {
	flex: 1;
	border: 0 !important;
	border-radius: 0 !important;
	outline: none;
	background: transparent !important;
}

.pn-search-form__submit {
	width: 48px;
	border: 0;
	background: var(--pn-primary);
	color: var(--pn-on-primary);
	cursor: pointer;
}

/* ---------- Badges & meta ---------- */
.pn-badge {
	--pn-badge: var(--pn-primary);
	--pn-on-badge: var(--pn-on-primary);
	display: inline-block;
	padding: 0.2rem 0.5rem 0.15rem;
	border-radius: 3px;
	background: var(--pn-badge);
	color: var(--pn-on-badge);
	font-family: var(--pn-font-ui);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	line-height: 1.3;
	text-decoration: none;
	text-transform: uppercase;
	transition: filter 0.15s var(--pn-ease);
}

.pn-badge:hover {
	color: var(--pn-on-badge);
	filter: brightness(1.12);
}

.pn-badge--text {
	padding: 0;
	background: none;
	color: var(--pn-badge);
}

:root[data-color-scheme="dark"] .pn-badge--text {
	filter: brightness(1.4);
}

.pn-meta,
.pn-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
	color: var(--pn-text-muted);
	font-size: 0.875rem;
}

.pn-meta a {
	color: var(--pn-text);
	font-weight: 600;
	text-decoration: none;
}

/* ---------- Breadcrumbs ---------- */
.pn-breadcrumbs {
	margin-block-end: 1rem;
	color: var(--pn-text-muted);
	font-size: 0.8125rem;
}

.pn-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pn-breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-inline-start: 0.35rem;
	opacity: 0.6;
}

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

.pn-breadcrumbs a:hover {
	color: var(--pn-link);
	text-decoration: underline;
}

/* Breadcrumb styles */
.pn-breadcrumbs__icon {
	display: inline-flex;
	align-items: center;
	margin-inline-end: 0.3rem;
}

.pn-breadcrumbs__icon svg {
	width: 14px;
	height: 14px;
}

.pn-breadcrumbs--glass {
	display: inline-block;
	padding: 0.35rem 0.7rem;
	border: 1px solid var(--pn-border);
	border-radius: 999px;
	background: color-mix(in srgb, var(--pn-bg) 70%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.pn-breadcrumbs--pill ol {
	gap: 0.25rem;
}

.pn-breadcrumbs--pill li {
	display: inline-flex;
	align-items: center;
}

.pn-breadcrumbs--pill li > a,
.pn-breadcrumbs--pill li > span {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--pn-surface);
}

.pn-breadcrumbs--line li:not(:last-child)::after {
	content: "—";
}

.pn-breadcrumbs--editorial {
	font-family: var(--pn-font-ui);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pn-breadcrumbs--3d li > a,
.pn-breadcrumbs--3d li > span {
	text-shadow: 0 1px 0 rgb(255 255 255 / 30%);
}

.pn-breadcrumbs--floating {
	padding: 0.4rem 0.75rem;
	border-radius: var(--pn-radius);
	background: var(--pn-bg);
	box-shadow: var(--pn-shadow);
}

@media (max-width: 599px) {

	.pn-breadcrumbs--m-truncate li:not(:first-child):not(:last-child) {
		display: none;
	}

	.pn-breadcrumbs--m-hide {
		display: none;
	}
}

/* Futuristic trail styles */
.pn-breadcrumbs--neon a {
	color: var(--pn-link);
	text-shadow: 0 0 10px color-mix(in srgb, var(--pn-link) 55%, transparent);
}

.pn-breadcrumbs--neon li:not(:last-child)::after {
	content: "›";
	color: var(--pn-primary);
	text-shadow: 0 0 8px color-mix(in srgb, var(--pn-primary) 60%, transparent);
}

.pn-breadcrumbs--holo {
	display: inline-block;
	padding: 0.3rem 0.75rem;
	border: 1px solid color-mix(in srgb, var(--pn-primary) 45%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--pn-primary) 12%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.pn-breadcrumbs--circuit li {
	font-family: var(--pn-font-ui);
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.pn-breadcrumbs--circuit li:not(:last-child)::after {
	content: "›";
	color: var(--pn-primary);
}

/* ---------- Breadcrumb band (full-width futuristic hero) ---------- */
.pn-crumbband {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: var(--pn-cb-min-h, 0px);
	padding-block: clamp(1.75rem, 4.5vw, 3.5rem);
	--pn-cb-accent: var(--pn-primary);
	background:
		radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--pn-primary) 45%, transparent), transparent 60%),
		radial-gradient(120% 150% at 100% 100%, color-mix(in srgb, var(--pn-secondary) 42%, transparent), transparent 60%),
		var(--pn-cb-overlay-color, #0b1020);
	color: #fff;
}

.pn-crumbband__bg {
	position: absolute;
	inset: 0;
	z-index: -3;
	background-image: var(--pn-cb-image, none);
	background-size: cover;
	/* Publisher picks the anchor (top / center / bottom) so a short band does
	 * not crop the heads off a tall photo. Center keeps the old behaviour. */
	background-position: var(--pn-cb-image-pos, center);
	transform: scale(1.06);
}

.pn-crumbband__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--pn-cb-overlay-color, #0b1020);
	opacity: var(--pn-cb-overlay, 0.6);
}

/* Animated perspective grid. */
.pn-crumbband__grid {
	position: absolute;
	inset: -20% -20% -60%;
	z-index: -2;
	opacity: 0.5;
	background-image:
		linear-gradient(to right, color-mix(in srgb, var(--pn-cb-accent) 55%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--pn-cb-accent) 45%, transparent) 1px, transparent 1px);
	background-size: 48px 48px;
	transform: perspective(460px) rotateX(62deg);
	transform-origin: bottom center;
	-webkit-mask-image: linear-gradient(to top, #000 0%, transparent 78%);
	mask-image: linear-gradient(to top, #000 0%, transparent 78%);
	animation: pn-cb-grid 8s linear infinite;
}

@keyframes pn-cb-grid {

	to { background-position: 0 48px; }
}

/* Drifting accent spotlight. */
.pn-crumbband__spot {
	position: absolute;
	inset: 0;
	z-index: -2;
	background: radial-gradient(55% 90% at 22% 18%, color-mix(in srgb, var(--pn-cb-accent) 55%, transparent), transparent 72%);
	opacity: 0.4;
}

.pn-crumbband--glow .pn-crumbband__spot {
	animation: pn-cb-float 9s ease-in-out infinite alternate;
}

@keyframes pn-cb-float {

	from { transform: translate3d(-2%, -2%, 0) scale(1); }

	to { transform: translate3d(3%, 2%, 0) scale(1.06); }
}

/* Diagonal light sweep. */
.pn-crumbband__scan {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(100deg, transparent 40%, rgb(255 255 255 / 20%) 50%, transparent 60%);
	transform: translateX(-120%);
}

.pn-crumbband--fx-scan .pn-crumbband__scan {
	animation: pn-cb-scan 5.5s ease-in-out infinite;
}

@keyframes pn-cb-scan {

	0%,
	60% { transform: translateX(-120%); }

	100% { transform: translateX(120%); }
}

.pn-crumbband__inner {
	position: relative;
	z-index: 1;
	width: min(var(--pn-container), 100% - 3rem);
	margin-inline: auto;
}

.pn-crumbband--align-center .pn-crumbband__inner {
	text-align: center;
}

.pn-crumbband--align-right .pn-crumbband__inner {
	text-align: right;
}

.pn-crumbband--align-center .pn-breadcrumbs ol {
	justify-content: center;
}

.pn-crumbband--align-right .pn-breadcrumbs ol {
	justify-content: flex-end;
}

/*
 * Readability scrim. A soft dark wash sits directly behind the trail and title
 * -- above the banner image and its overlay, below the text -- so the band text
 * stays legible over ANY image, however bright, without darkening the whole
 * banner. Independent of the publisher's overlay setting, so the title is
 * visible in every condition.
 */
.pn-crumbband--has-title .pn-crumbband__inner::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: clamp(-2rem, -4vw, -1.25rem) clamp(-2.5rem, -5vw, -1.5rem);
	border-radius: 1.25rem;
	background: radial-gradient(120% 150% at 16% 50%,
		rgb(6 8 14 / 72%) 0%,
		rgb(6 8 14 / 46%) 44%,
		rgb(6 8 14 / 0%) 78%);
	opacity: var(--pn-cb-scrim, 1);
	pointer-events: none;
}

.pn-crumbband--has-title.pn-crumbband--align-center .pn-crumbband__inner::before {
	background: radial-gradient(120% 150% at 50% 50%,
		rgb(6 8 14 / 70%) 0%, rgb(6 8 14 / 44%) 46%, rgb(6 8 14 / 0%) 78%);
}

.pn-crumbband--has-title.pn-crumbband--align-right .pn-crumbband__inner::before {
	background: radial-gradient(120% 150% at 84% 50%,
		rgb(6 8 14 / 72%) 0%, rgb(6 8 14 / 46%) 44%, rgb(6 8 14 / 0%) 78%);
}

/* Keep the trail and title above the readability scrim. */
.pn-crumbband--has-title .pn-crumbband__inner > * {
	position: relative;
	z-index: 1;
}

.pn-crumbband__title {
	margin: 0.4rem 0 0;
	font-family: var(--pn-font-heading);
	font-size: var(--pn-cb-title-size, clamp(1.7rem, 4.6vw, 3.2rem));
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-shadow: 0 1px 2px rgb(6 8 14 / 55%), 0 3px 18px rgb(6 8 14 / 40%);
	background: linear-gradient(100deg, #fff, color-mix(in srgb, var(--pn-cb-accent) 65%, #fff));
	-webkit-background-clip: text;
	background-clip: text;
	color: var(--pn-cb-title-color, #fff);
}

@supports (-webkit-background-clip: text) {

	.pn-crumbband__title {
		-webkit-text-fill-color: transparent;
	}
}

/* A custom title colour drops the gradient for a solid, exact colour. */
.pn-crumbband--title-custom .pn-crumbband__title {
	background: none;
	color: var(--pn-cb-title-color);
	-webkit-text-fill-color: var(--pn-cb-title-color);
}

/* Trail sits inside the band: light and high-contrast. */
.pn-crumbband .pn-breadcrumbs {
	margin-block-end: 0;
	color: var(--pn-cb-trail-color, rgb(255 255 255 / 80%));
	font-size: 0.8rem;
}

.pn-crumbband .pn-breadcrumbs a {
	color: var(--pn-cb-trail-color, rgb(255 255 255 / 68%));
}

.pn-crumbband .pn-breadcrumbs a:hover {
	color: #fff;
	text-decoration: none;
}

.pn-crumbband .pn-breadcrumbs li:not(:last-child)::after {
	opacity: 0.5;
}

/* Band presets */
.pn-crumbband--aurora {
	background: linear-gradient(120deg, #0b1020, color-mix(in srgb, var(--pn-primary) 55%, #0b1020) 48%, color-mix(in srgb, var(--pn-secondary) 55%, #0b1020));
}

.pn-crumbband--neon {
	--pn-cb-accent: var(--pn-accent);
	background: #05060a;
}

.pn-crumbband--neon .pn-crumbband__grid {
	opacity: 0.7;
}

.pn-crumbband--holo {
	background: linear-gradient(115deg, #071019, #12324a 42%, #3a0f4a);
}

.pn-crumbband--cinematic {
	background: #05070c;
}

.pn-crumbband--cinematic .pn-crumbband__grid {
	transform: perspective(520px) rotateX(68deg);
	opacity: 0.32;
}

.pn-crumbband--minimal {
	background: var(--pn-bg);
	color: var(--pn-text);
}

.pn-crumbband--minimal .pn-crumbband__grid,
.pn-crumbband--minimal .pn-crumbband__spot,
.pn-crumbband--minimal .pn-crumbband__scan {
	display: none;
}

.pn-crumbband--minimal .pn-breadcrumbs,
.pn-crumbband--minimal .pn-breadcrumbs a {
	color: var(--pn-text-muted);
}

.pn-crumbband--minimal .pn-breadcrumbs a:hover {
	color: var(--pn-link);
}

.pn-crumbband--minimal .pn-crumbband__title {
	background: none;
	color: var(--pn-text);
	-webkit-text-fill-color: currentcolor;
}

/* Effects */
.pn-crumbband--fx-parallax .pn-crumbband__bg {
	background-attachment: fixed;
}

.pn-crumbband--fx-tilt .pn-crumbband__inner {
	transform: perspective(900px) rotateX(6deg);
	transform-origin: bottom center;
	transition: transform 0.5s var(--pn-ease, ease);
}

.pn-crumbband--fx-tilt:hover .pn-crumbband__inner {
	transform: perspective(900px) rotateX(0deg) translateY(-4px);
}

/*
 * Touch has no hover, so the tilt follows the finger instead. The pointer layer
 * writes --pn-cb-px / --pn-cb-py, and the panel eases back to its 6° resting
 * angle when the finger lifts. Without the pointer layer there is nothing to
 * read here, so the band simply keeps its resting angle.
 */
@media (hover: none) {

	.pn-crumbband--fx-tilt.pn-crumbband--pointer .pn-crumbband__inner {
		transform: perspective(900px)
			rotateX(calc(6deg - var(--pn-cb-py, 0) * 5deg))
			rotateY(calc(var(--pn-cb-px, 0) * 6deg));
	}
}

.pn-crumbband--fx-float .pn-crumbband__grid {
	animation-duration: 13s;
}

/* "Effect: None" stops the ambient motion too. */
.pn-crumbband--fx-none .pn-crumbband__grid,
.pn-crumbband--fx-none .pn-crumbband__spot,
.pn-crumbband--fx-none .pn-crumbband__scan {
	animation: none;
}

/* ---------- Floating 3D objects (decorative, CSS-only) ---------- */
.pn-crumbband__objects {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	perspective: 900px;
	/* Publisher overrides arrive inline; these are the fallbacks. */
	--pn-cb-obj-1: var(--pn-cb-accent);
	--pn-cb-obj-2: #ffffff;
	--pn-cb-obj-size: 16px;
}

.pn-crumbband__objects .pn-cb-obj {
	position: absolute;
	left: var(--x, 8%);
	top: var(--y, 20%);
	width: calc(var(--pn-cb-obj-size) * var(--k, 1) * var(--pn-cb-obj-scale, 1));
	height: calc(var(--pn-cb-obj-size) * var(--k, 1) * var(--pn-cb-obj-scale, 1));
	transform-style: preserve-3d;
	background: linear-gradient(140deg, color-mix(in srgb, var(--pn-cb-obj-1) 72%, transparent), color-mix(in srgb, var(--pn-cb-obj-2) 22%, transparent));
	border: 1px solid color-mix(in srgb, var(--pn-cb-obj-1) 55%, transparent);
	border-radius: 3px;
	box-shadow: 0 0 18px color-mix(in srgb, var(--pn-cb-obj-1) 45%, transparent);
	opacity: 0.55;
	animation: pn-cb-drift var(--dur, 14s) linear infinite;
	animation-delay: var(--delay, 0s);
}

/*
 * Shapes. Cubes are the base rule; "mixed" cycles rings, shards, diamonds,
 * hexagons and cubes (the 5n + 4 slot stays a cube).
 */

/* Rings */
.pn-cb-obj--rings .pn-cb-obj,
.pn-cb-obj--mixed .pn-cb-obj:nth-child(5n) {
	border-radius: 50%;
	border-width: 2px;
	background: none;
}

/* Shards (triangles) */
.pn-cb-obj--shards .pn-cb-obj,
.pn-cb-obj--mixed .pn-cb-obj:nth-child(5n + 1) {
	border: 0;
	border-radius: 0;
	clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

/* Diamonds */
.pn-cb-obj--diamonds .pn-cb-obj,
.pn-cb-obj--mixed .pn-cb-obj:nth-child(5n + 2) {
	border: 0;
	border-radius: 0;
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* Hexagons */
.pn-cb-obj--hexes .pn-cb-obj,
.pn-cb-obj--mixed .pn-cb-obj:nth-child(5n + 3) {
	border: 0;
	border-radius: 0;
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* Glowing orbs */
.pn-cb-obj--orbs .pn-cb-obj {
	border: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--pn-cb-obj-2) 78%, transparent), color-mix(in srgb, var(--pn-cb-obj-1) 85%, transparent) 58%, transparent 72%);
}

/* Sparks (four-point stars) */
.pn-cb-obj--stars .pn-cb-obj {
	border: 0;
	border-radius: 0;
	clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}

/* Speed */
.pn-cb-speed--slow .pn-cb-obj {
	animation-duration: 22s;
}

.pn-cb-speed--fast .pn-cb-obj {
	animation-duration: 8s;
}

/*
 * A designed scatter, so the band looks the same on every load. --k scales the
 * publisher's object size, so one control resizes the whole set.
 */
.pn-crumbband__objects .pn-cb-obj:nth-child(1) { --x: 6%;  --y: 18%; --k: 1.38; --delay: 0s; }
.pn-crumbband__objects .pn-cb-obj:nth-child(2) { --x: 14%; --y: 68%; --k: 0.88; --delay: -3s; }
.pn-crumbband__objects .pn-cb-obj:nth-child(3) { --x: 22%; --y: 34%; --k: 1.13; --delay: -7s; }
.pn-crumbband__objects .pn-cb-obj:nth-child(4) { --x: 31%; --y: 78%; --k: 0.75; --delay: -1s; }
.pn-crumbband__objects .pn-cb-obj:nth-child(5) { --x: 40%; --y: 12%; --k: 1;    --delay: -5s; }
.pn-crumbband__objects .pn-cb-obj:nth-child(6) { --x: 49%; --y: 62%; --k: 1.25; --delay: -9s; }
.pn-crumbband__objects .pn-cb-obj:nth-child(7) { --x: 58%; --y: 26%; --k: 0.81; --delay: -2s; }
.pn-crumbband__objects .pn-cb-obj:nth-child(8) { --x: 66%; --y: 74%; --k: 1.5;  --delay: -6s; }
.pn-crumbband__objects .pn-cb-obj:nth-child(9) { --x: 74%; --y: 16%; --k: 0.94; --delay: -11s; }
.pn-crumbband__objects .pn-cb-obj:nth-child(10) { --x: 82%; --y: 56%; --k: 1.19; --delay: -4s; }
.pn-crumbband__objects .pn-cb-obj:nth-child(11) { --x: 90%; --y: 30%; --k: 0.75; --delay: -8s; }
.pn-crumbband__objects .pn-cb-obj:nth-child(12) { --x: 95%; --y: 72%; --k: 1.06; --delay: -12s; }
.pn-crumbband__objects .pn-cb-obj:nth-child(13) { --x: 10%; --y: 44%; --k: 0.69; --delay: -10s; }
.pn-crumbband__objects .pn-cb-obj:nth-child(14) { --x: 37%; --y: 50%; --k: 0.88; --delay: -13s; }
.pn-crumbband__objects .pn-cb-obj:nth-child(15) { --x: 62%; --y: 44%; --k: 0.75; --delay: -5.5s; }
.pn-crumbband__objects .pn-cb-obj:nth-child(16) { --x: 86%; --y: 88%; --k: 1;    --delay: -6.5s; }

@keyframes pn-cb-drift {

	0% {
		transform: translate3d(0, 0, 0) rotate3d(1, 1, 0, 0deg);
	}

	50% {
		transform: translate3d(8px, -16px, 60px) rotate3d(1, 1, 0.4, 180deg);
	}

	100% {
		transform: translate3d(0, 0, 0) rotate3d(1, 1, 0, 360deg);
	}
}

/*
 * Phones: keep the decorative layer rather than switching it off. The shapes
 * scale down to suit the smaller band and are capped at eight, so the layer
 * stays cheap, but a phone still sees the floating objects a desktop does.
 * They drift on their own (pn-cb-drift) and follow a finger when the pointer
 * layer is on, so the band is never still.
 */
@media (max-width: 782px) {

	.pn-crumbband__objects {
		--pn-cb-obj-scale: 0.55;
	}

	.pn-crumbband__objects .pn-cb-obj:nth-child(n + 9) {
		display: none;
	}
}

/*
 * Pointer interaction (opt-in, desktop). breadcrumb-band.js writes two
 * normalised variables, --pn-cb-px / --pn-cb-py (-1..1) on the band; only the
 * floating 3D objects and the accent light follow them. The background image
 * and the text never move. Nothing moves without the script, on touch devices,
 * or for reduced motion.
 */
.pn-crumbband--pointer .pn-cb-obj {
	translate:
		calc(var(--pn-cb-px, 0) * var(--pn-cb-depth, 12) * 1px)
		calc(var(--pn-cb-py, 0) * var(--pn-cb-depth, 12) * 1px);
}

/* Each object gets its own depth, so the scatter parallaxes in layers. */
.pn-crumbband__objects .pn-cb-obj:nth-child(1)  { --pn-cb-depth: 30; }
.pn-crumbband__objects .pn-cb-obj:nth-child(2)  { --pn-cb-depth: 13; }
.pn-crumbband__objects .pn-cb-obj:nth-child(3)  { --pn-cb-depth: 24; }
.pn-crumbband__objects .pn-cb-obj:nth-child(4)  { --pn-cb-depth: 9; }
.pn-crumbband__objects .pn-cb-obj:nth-child(5)  { --pn-cb-depth: 20; }
.pn-crumbband__objects .pn-cb-obj:nth-child(6)  { --pn-cb-depth: 32; }
.pn-crumbband__objects .pn-cb-obj:nth-child(7)  { --pn-cb-depth: 11; }
.pn-crumbband__objects .pn-cb-obj:nth-child(8)  { --pn-cb-depth: 27; }
.pn-crumbband__objects .pn-cb-obj:nth-child(9)  { --pn-cb-depth: 16; }
.pn-crumbband__objects .pn-cb-obj:nth-child(10) { --pn-cb-depth: 22; }
.pn-crumbband__objects .pn-cb-obj:nth-child(11) { --pn-cb-depth: 10; }
.pn-crumbband__objects .pn-cb-obj:nth-child(12) { --pn-cb-depth: 29; }
.pn-crumbband__objects .pn-cb-obj:nth-child(13) { --pn-cb-depth: 14; }
.pn-crumbband__objects .pn-cb-obj:nth-child(14) { --pn-cb-depth: 25; }
.pn-crumbband__objects .pn-cb-obj:nth-child(15) { --pn-cb-depth: 12; }
.pn-crumbband__objects .pn-cb-obj:nth-child(16) { --pn-cb-depth: 21; }

.pn-crumbband--pointer .pn-crumbband__spot {
	/*
	 * The moving light: a soft accent glow at the pointer, lifted above the
	 * background, the overlay, the grid, the scan and the floating objects (but
	 * behind the breadcrumb text, which sits at z-index 1). It is the warm core
	 * of the reveal below.
	 */
	z-index: 0;
	opacity: 0.55;
	mix-blend-mode: screen;
	background: radial-gradient(
		40% 105% at calc(50% + var(--pn-cb-px, 0) * 40%) calc(50% + var(--pn-cb-py, 0) * 82%),
		color-mix(in srgb, var(--pn-cb-accent) 82%, transparent),
		transparent 66%
	);
	transition: opacity 0.25s var(--pn-ease, ease);
}

/*
 * The overlay is wiped away under the moving light and settles back as the
 * pointer passes: a soft, transparent hole is masked into the overlay scrim at
 * the pointer position, so the background shows through there only. While the
 * band is not hovered the overlay is untouched, so it always restores itself.
 * Gated to real hover pointers so touch and reduced-motion keep the full one.
 */
@media (hover: hover) and (pointer: fine) {

	.pn-crumbband--pointer:hover .pn-crumbband__bg::after {
		--pn-cb-reveal: clamp(140px, 22vw, 260px);
		-webkit-mask-image: radial-gradient(
			circle var(--pn-cb-reveal) at calc(50% + var(--pn-cb-px, 0) * 50%) calc(50% + var(--pn-cb-py, 0) * 50%),
			transparent 0,
			transparent 46%,
			#000 100%
		);
		mask-image: radial-gradient(
			circle var(--pn-cb-reveal) at calc(50% + var(--pn-cb-px, 0) * 50%) calc(50% + var(--pn-cb-py, 0) * 50%),
			transparent 0,
			transparent 46%,
			#000 100%
		);
	}
}

/* The text keeps its own soft shadow, so it stays readable inside the reveal. */
.pn-crumbband--pointer .pn-crumbband__inner {
	text-shadow: 0 1px 10px rgb(6 8 14 / 70%), 0 0 2px rgb(6 8 14 / 65%);
}

@media (prefers-reduced-motion: reduce) {

	/* No pointer tracking: keep it as a soft, still light and no reveal. */
	.pn-crumbband--pointer .pn-crumbband__spot {
		opacity: 0.4;
	}
}

@media (prefers-reduced-motion: reduce) {

	.pn-crumbband--pointer .pn-cb-obj {
		translate: none;
	}
}

/* Entrance animations */
.pn-crumbband--anim-fade .pn-crumbband__inner {
	animation: pn-cb-fade 0.7s var(--pn-ease, ease) both;
}

.pn-crumbband--anim-fade-up .pn-crumbband__inner {
	animation: pn-cb-up 0.7s var(--pn-ease, ease) both;
}

.pn-crumbband--anim-zoom .pn-crumbband__inner {
	animation: pn-cb-zoom 0.7s var(--pn-ease, ease) both;
}

.pn-crumbband--anim-unfold .pn-crumbband__inner {
	animation: pn-cb-unfold 0.8s var(--pn-ease, ease) both;
}

@keyframes pn-cb-fade {

	from { opacity: 0; }
}

@keyframes pn-cb-up {

	from { opacity: 0; transform: translateY(16px); }
}

@keyframes pn-cb-zoom {

	from { opacity: 0; transform: scale(0.94); }
}

@keyframes pn-cb-unfold {

	from { opacity: 0; transform: perspective(900px) rotateX(-40deg); transform-origin: top center; }
}

/* When the band carries the title, hide the in-content title (one H1 stays). */
.pn-band-title .pn-article__title,
.pn-band-title .pn-archive-header__title {
	display: none;
}

@media (prefers-reduced-motion: reduce) {

	.pn-crumbband,
	.pn-crumbband * {
		animation: none !important;
		transition: none !important;
	}

	.pn-crumbband--fx-parallax .pn-crumbband__bg {
		background-attachment: scroll;
	}
}

@media (max-width: 782px) {

	.pn-crumbband--fx-parallax .pn-crumbband__bg {
		background-attachment: scroll;
	}
}

/*
 * Phones: background-attachment: fixed is unusable there (it is ignored or it
 * janks, so it is switched off above). A parallax band gets the same drift from
 * a scroll-driven animation wherever the browser supports one, so the image
 * still moves with the page instead of sitting still. Readers who prefer
 * reduced motion keep the still band — the reduced-motion block below wins.
 */
@supports (animation-timeline: view()) {

	@media (max-width: 782px) {

		.pn-crumbband--fx-parallax .pn-crumbband__bg {
			animation-name: pn-cb-parallax;
			animation-duration: 1s;
			animation-timing-function: linear;
			animation-fill-mode: both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
	}
}

@keyframes pn-cb-parallax {

	from { transform: translateY(-5%) scale(1.06); }

	to { transform: translateY(5%) scale(1.06); }
}

/* ---------- Archive header ---------- */
.pn-archive-header {
	margin-block-end: 1.75rem;
	padding-block-end: 1rem;
	border-block-end: 1px solid var(--pn-border);
}

.pn-archive-header__title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.pn-archive-header__description {
	color: var(--pn-text-muted);
}

.pn-archive-header .pn-search-form {
	margin-block-start: 1rem;
}

/* ---------- Pagination ---------- */
.pn-pagination {
	margin-block-start: 2.5rem;
}

.pn-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
}

.pn-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: 0.75rem;
	border: 1px solid var(--pn-border);
	border-radius: var(--pn-radius);
	color: var(--pn-text);
	text-decoration: none;
}

.pn-pagination .page-numbers.current,
.pn-pagination a.page-numbers:hover {
	border-color: var(--pn-primary);
	background: var(--pn-primary);
	color: var(--pn-on-primary);
}

.pn-pagination .dots {
	border: 0;
}

/* ---------- Empty / 404 ---------- */
.pn-empty,
.pn-404 {
	padding-block: 2rem;
}

.pn-404 {
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
}

.pn-404 .pn-search-form {
	margin: 1.5rem auto;
}

.pn-404__code {
	margin: 0;
	color: var(--pn-primary);
	font-family: var(--pn-font-heading);
	font-size: clamp(4rem, 14vw, 7rem);
	font-weight: 700;
	line-height: 1;
}

/* ---------- WordPress core alignment/caption classes ---------- */
.alignleft {
	float: inline-start;
	margin-inline-end: 1.5rem;
}

.alignright {
	float: inline-end;
	margin-inline-start: 1.5rem;
}

.aligncenter {
	margin-inline: auto;
}

.wp-caption-text,
figcaption {
	color: var(--pn-text-muted);
	font-size: 0.8125rem;
}

.sticky {
	position: relative;
}

.bypostauthor {
	display: block;
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Extra widget areas ---------- */
/*
 * Header banner lane: the widget area — or the header advert that stands in
 * for it — sits at the right end of the logo row, in every header layout and
 * whatever widget is used. The auto start margin takes the free space, so the
 * lane is flush with the container's right edge even when other items share
 * the row.
 */
.pn-header__brand-inner > .pn-header-side,
.pn-header__brand-inner > .pn-header-ad,
.pn-header__compact-inner > .pn-header-side,
.pn-header__compact-inner > .pn-header-ad {
	margin-inline-start: auto;
	margin-inline-end: 0;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
}

.pn-header-side {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem 1rem;
	text-align: end;
}

/* Each widget hugs the right edge. */
.pn-header-side > * {
	margin-inline: auto 0;
	margin-block: 0;
}

/* Components that centre themselves by default (the Banner Ad) follow the lane. */
.pn-header-side .pn-c-banner {
	align-items: flex-end;
	text-align: end;
}

.pn-header-side .pn-c-banner--center .pn-c-banner__creative {
	align-items: flex-end;
	text-align: end;
	inset-inline: 0;
}

.pn-header-side .pn-ad,
.pn-header-side img {
	margin-inline: auto 0;
	text-align: end;
}

/*
 * Publisher-set size for the header banner lane. A width caps the widget area
 * itself (higher specificity than the lane rule above so it also wins when
 * another item shares the row); a height caps the media inside it. Both are
 * unset by default, so a banner keeps its natural size.
 */
.pn-header__brand-inner > .pn-header-side,
.pn-header__compact-inner > .pn-header-side {
	max-width: min(var(--pn-header-widget-w, 100%), 100%);
}

.pn-header-side img,
.pn-header-side iframe,
.pn-header-side video {
	max-width: 100%;
	max-height: var(--pn-header-widget-h, none);
	height: auto;
}

@media (max-width: 1023px) {

	/*
	 * A header banner must not vanish on phones and tablets. Instead of hiding
	 * the lane, the brand row wraps and the banner becomes its own centred,
	 * full-width band under the identity. The row is the sticky bar on small
	 * screens, so the banner scrolls away with the page and never eats the
	 * viewport.
	 */
	.pn-header__brand-inner,
	.pn-header__compact-inner {
		flex-wrap: wrap;
		row-gap: 0.5rem;
	}

	.pn-header__brand-inner > .pn-header-side,
	.pn-header__compact-inner > .pn-header-side {
		order: 90;
		flex: 1 1 100%;
		justify-content: center;
		text-align: center;
		margin-inline: 0;
		padding-block: 0.35rem;
	}

	/* Each widget centres in its own row instead of hugging the right edge. */
	.pn-header-side > * {
		margin-inline: auto;
	}

	/* Components that align themselves to the right edge follow the new row. */
	.pn-header-side .pn-c-banner,
	.pn-header-side .pn-c-banner--center .pn-c-banner__creative,
	.pn-header-side .pn-ad {
		align-items: center;
		text-align: center;
		inset-inline: auto;
	}

	.pn-header-side img,
	.pn-header-side iframe,
	.pn-header-side video {
		margin-inline: auto;
	}

	/* Never let a wide banner push the page sideways. */
	.pn-header-side,
	.pn-header-side > * {
		max-width: 100%;
	}
}

.pn-below-header {
	padding-block: 0.75rem;
	border-block-end: 1px solid var(--pn-border);
}

/* Extra widget lanes follow the text colour of whatever they sit on, so a
   widget in the header, below the header or above the footer never shows a
   dark heading on a dark background. */
.pn-header-side,
.pn-below-header,
.pn-footer-top {
	color: inherit;
}

.pn-header-side .pn-widget__title,
.pn-below-header .pn-widget__title,
.pn-footer-top .pn-widget__title {
	color: inherit;
	border-color: var(--pn-border);
}

.pn-header-side .pn-widget a,
.pn-below-header .pn-widget a,
.pn-footer-top .pn-widget a {
	color: currentcolor;
}

.pn-below-header .pn-container > * + * {
	margin-block-start: 0.75rem;
}

.pn-after-post {
	max-width: 720px;
	margin-block-start: 2rem;
}

.pn-footer-top {
	padding-block: clamp(1.5rem, 4vw, 2.5rem);
	background: var(--pn-surface);
}

/* ---------- Category archive header ---------- */
.pn-archive-header--term {
	border-block-end: 3px solid var(--pn-badge);
}

.pn-archive-header--image {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(180px, 26vw, 280px);
	padding: clamp(1.25rem, 3vw, 2rem);
	border-block-end: 0;
	border-radius: var(--pn-radius);
	background: linear-gradient(to top, rgb(0 0 0 / 80%), rgb(0 0 0 / 15%)), var(--pn-archive-image) var(--pn-img-focus) / cover;
	color: #fff;
}

.pn-archive-header--image .pn-archive-header__title {
	margin: 0;
	color: #fff;
}

.pn-archive-header--image .pn-archive-header__description {
	color: rgb(255 255 255 / 85%);
}

/* ---------- Image framing ----------
 * Every card image fills a fixed-proportion frame, so items in a row share
 * the same height and width. Photos that do not match the frame are anchored
 * by --pn-img-focus (top by default): heads stay, legs are cropped. */
:where(.pn-thumb, .pn-card__media, .pn-card__thumb, .preluence-slider__image-wrap, .pn-tile, .pn-post-list__thumb) img,
:where(.pn-profile__image) {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--pn-img-focus);
}

/* ---------- Designed image fallback ----------
 * Shown when a story has no usable image anywhere, and in any frame whose
 * image fails to load (the head guard script adds .is-img-broken). Keeps
 * the frame's proportions; category colour, name and depth, no request. */
.pn-fallback,
.is-img-broken::before {
	--pn-fb: var(--pn-badge, var(--pn-primary));
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	overflow: hidden;
	padding: clamp(0.75rem, 3%, 1.25rem);
	background:
		radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--pn-fb) 70%, transparent), transparent 62%),
		radial-gradient(90% 80% at 0% 100%, color-mix(in srgb, var(--pn-secondary, var(--pn-fb)) 45%, transparent), transparent 60%),
		repeating-linear-gradient(135deg, rgb(255 255 255 / 5%) 0 1px, transparent 1px 22px),
		linear-gradient(160deg, color-mix(in srgb, var(--pn-fb) 55%, #0b1020), #0b1020);
	color: #fff;
}

.is-img-broken {
	position: relative;
}

.is-img-broken::before {
	content: "";
	z-index: 0;
}

/* A failed image being retried: a calm loading surface, never the broken
   icon and never the fallback artwork before every retry has failed. */
.is-img-retrying {
	position: relative;
	background: color-mix(in srgb, var(--pn-text) 7%, var(--pn-bg));
}

.is-img-retrying img {
	opacity: 0;
}

.is-img-retrying::after {
	position: absolute;
	inset: 0;
	content: "";
	background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--pn-bg) 55%, transparent) 50%, transparent 80%) 0 0 / 200% 100%;
	animation: pn-img-wait 1.4s linear infinite;
	pointer-events: none;
}

@keyframes pn-img-wait {
	from { background-position: 150% 0; }
	to { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.is-img-retrying::after {
		animation: none;
	}
}

.pn-thumb:has(> .pn-fallback),
.pn-article__media:has(.pn-fallback) {
	position: relative;
}

.pn-fallback__mark {
	position: absolute;
	inset-block-start: -0.12em;
	inset-inline-end: 0.04em;
	color: rgb(255 255 255 / 10%);
	font-family: var(--pn-font-heading);
	font-size: clamp(5rem, 26cqi, 12rem);
	font-weight: 800;
	line-height: 1;
	pointer-events: none;
}

.pn-fallback__label {
	position: relative;
	padding: 0.2rem 0.55rem 0.15rem;
	border: 1px solid rgb(255 255 255 / 30%);
	border-radius: 999px;
	font-family: var(--pn-font-ui);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	backdrop-filter: blur(4px);
}

/* On overlay cards and heroes the headline sits on the artwork: hide the label. */
.pn-card--overlay .pn-fallback__label,
.preluence-slider__image-wrap .pn-fallback__label {
	display: none;
}

.pn-thumb,
.pn-card__media,
.preluence-slider__image-wrap,
.preluence-slider__thumb-media {
	container-type: inline-size;
}

/* Storefront pages (business manager shortcodes) use the full available
   width rather than the reading container. */
.pn-container--storefront {
	max-width: none;
}

/* -------------------------------------------------------------------------
 * Page-builder element wrappers
 * ---------------------------------------------------------------------- */

/*
 * Breakdance wraps each element in a `.builder-element` div inside a flex
 * column with `align-items: flex-start`. A block-level component whose visible
 * content is absolutely positioned (our slider) has no intrinsic width there,
 * so the wrapper collapses to 0 and the slider shows only its dots. Stretch the
 * wrapper so the component gets the full column width.
 */
.builder-element[class*="preluence-"],
[class*="preluence-"].builder-element {
	width: 100%;
	min-width: 0;
	align-self: stretch;
}

/* -------------------------------------------------------------------------
 * Quick "Edit" action on widgets (shown to editors only)
 * ---------------------------------------------------------------------- */

.pn-widget-has-edit {
	position: relative;
}

.pn-widget-edit {
	position: absolute;
	top: 6px;
	inset-inline-end: 6px;
	z-index: 9999;
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	border: 0;
	border-radius: 999px;
	background: #1b4ddb;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
	box-shadow: 0 4px 12px rgb(15 23 42 / 24%);
	cursor: pointer;
	opacity: 0.92;
}

/* Every link state stays white: a generic `a { color }` rule must not darken it. */
.pn-widget-edit,
.pn-widget-edit:link,
.pn-widget-edit:visited,
.pn-widget-edit:hover,
.pn-widget-edit:focus,
.pn-widget-edit:focus-visible,
.pn-widget-edit:active {
	color: #fff;
}

.pn-widget-edit:hover,
.pn-widget-edit:focus-visible {
	opacity: 1;
}

.pn-widget-edit__icon {
	flex: none;
	width: 12px;
	height: 12px;
	background: currentColor;
	-webkit-mask: var(--pn-widget-edit-icon) center / contain no-repeat;
	mask: var(--pn-widget-edit-icon) center / contain no-repeat;
}

.pn-widget-has-edit {
	--pn-widget-edit-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
}

@media (max-width: 600px) {
	.pn-widget-edit__label {
		display: none;
	}
}