/**
 * Preluence Vertex — 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;
}

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;
	background-position: 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;
}

.pn-crumbband__title {
	margin: 0.4rem 0 0;
	font-family: var(--pn-font-heading);
	font-size: clamp(1.7rem, 4.6vw, 3.2rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.01em;
	background: linear-gradient(100deg, #fff, color-mix(in srgb, var(--pn-cb-accent) 65%, #fff));
	-webkit-background-clip: text;
	background-clip: text;
	color: #fff;
}

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

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

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

.pn-crumbband .pn-breadcrumbs a {
	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);
}

.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));
	height: calc(var(--pn-cb-obj-size) * var(--k, 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: skip the decorative layer entirely. */
@media (max-width: 782px) {

	.pn-crumbband__objects {
		display: 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;
	}
}

/* ---------- 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;
	}
}