/* ==========================================================================
   Header: sticky on every page, vertical black gradient (solid at the top, fading out below the bar) with a gradual blur of what
   scrolls behind it. Brand Quicksand 36/19 with 31% tracking, nav Quicksand 400 20, LinkedIn icon #d9d9d9.
   Layers (pseudo-elements only, the markup is unchanged): ::before = gradient, ::after = blur masked so it fades in and out.
   Both reach --ps-header-fade below the bar and never take clicks, so the header text stays sharp and the hero/content below
   starts exactly at the bar's bottom edge.
   Mobile-first: stacked on small screens, one row from 768px; content aligned to the Astra container.
   ========================================================================== */
:root {
	--ps-header-h: 136px;     /* stacked header (phones); one row from 768px */
	--ps-header-fade: 48px;   /* gradient / blur extension below the bar */
	--ps-sticky-top: 0px;     /* offset of sticky elements (WordPress admin bar) */
}
@media (min-width: 768px) { :root { --ps-header-h: 109px; } }
body.admin-bar { --ps-sticky-top: 32px; }
@media (max-width: 782px) { body.admin-bar { --ps-sticky-top: 46px; } }
@media (max-width: 600px) { body.admin-bar { --ps-sticky-top: 0px; } } /* the admin bar scrolls away on small screens */

/* Solid black under the header while the page is at the top (it scrolls away with the page). Without it the translucent lower part of the
   header would show the white page background as a grey band; once the page scrolls, the header fades over the real content. */
.ps-site-wrap { position: relative; }
.ps-header-underlay { position: absolute; z-index: 0; top: 0; left: 0; right: 0; height: var(--ps-header-h); background: #000; pointer-events: none; } /* a real element, not a pseudo-element on #page: accessibility checkers cannot read colours below an ancestor's pseudo-element */

.ps-header {
	position: sticky;
	top: var(--ps-sticky-top);
	z-index: 50;
	min-height: var(--ps-header-h);
	color: #fff;
	isolation: isolate;
}
/* gradient: solid black at the top, easing out to transparent below the bar */
.ps-header::before {
	content: ""; position: absolute; z-index: -2; pointer-events: none;
	top: 0; left: 0; right: 0; bottom: calc(var(--ps-header-fade) * -1);
	background: linear-gradient(to bottom,
		rgb(0 0 0 / 1) 0%, rgb(0 0 0 / 1) 32%, rgb(0 0 0 / 0.92) 44%, rgb(0 0 0 / 0.78) 56%,
		rgb(0 0 0 / 0.52) 69%, rgb(0 0 0 / 0.28) 80%, rgb(0 0 0 / 0.1) 90%, rgb(0 0 0 / 0) 100%);
}
/* blur of the content behind the lower part of the header; the mask makes it fade in and out without a visible edge */
.ps-header::after {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	top: 0; left: 0; right: 0; bottom: calc(var(--ps-header-fade) * -1);
	-webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 28%, #000 62%, #000 82%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, transparent 28%, #000 62%, #000 82%, transparent 100%);
}
/* browsers without backdrop-filter: no blur layer, slightly stronger gradient so the text keeps its contrast */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.ps-header::after { display: none; }
	.ps-header::before {
		background: linear-gradient(to bottom,
			rgb(0 0 0 / 1) 0%, rgb(0 0 0 / 1) 40%, rgb(0 0 0 / 0.9) 56%, rgb(0 0 0 / 0.72) 70%,
			rgb(0 0 0 / 0.4) 84%, rgb(0 0 0 / 0) 100%);
	}
}

.ps-header__inner {
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	box-sizing: border-box; width: 100%; max-width: var(--ps-container); margin-inline: auto;
	padding: 14px var(--ps-gutter) 16px;
}
.ps-brand {
	display: block; color: #fff; text-decoration: none; text-align: center;
	font-family: var(--ps-font-brand); line-height: 1.25;
}
.ps-brand__title { display: block; font-weight: 500; font-size: clamp(24px, 7vw, 36px); letter-spacing: 0.31em; margin-right: -0.31em; }
.ps-brand__subtitle { display: block; font-weight: 300; font-size: clamp(12px, 3.6vw, 19px); letter-spacing: 0.31em; margin-right: -0.31em; }

.ps-header__nav { display: flex; align-items: center; gap: 28px; font-family: var(--ps-font-brand); }
.ps-nav__list { display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; }
.ps-nav__list a {
	display: inline-flex; align-items: center; min-height: 44px; /* touch target */
	font-weight: 400; font-size: 18px; color: #fff; text-decoration: none;
}
.ps-nav__list a:hover, .ps-nav__list .current-menu-item > a, .ps-nav__list [aria-current="page"] { text-decoration: underline; }
.ps-header__social {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; color: #d9d9d9; font-size: 16px;
}
.ps-header__social:hover { color: #fff; }

/* One row from 768px: brand at the left edge of the Astra container, navigation and icon at its right edge. */
@media (min-width: 768px) {
	.ps-header__inner { flex-direction: row; justify-content: space-between; padding-block: 0; min-height: var(--ps-header-h); gap: 24px; }
	.ps-brand { text-align: center; }
	.ps-brand__title { font-size: clamp(28px, 3.4vw, 36px); }
	.ps-brand__subtitle { font-size: clamp(14px, 1.7vw, 19px); }
	.ps-header__nav { margin-top: 0; gap: 12px; }
	.ps-nav__list a { font-size: 20px; }
}
@media (min-width: 1200px) {
	.ps-nav__list { gap: 32.7px; }
	.ps-header__nav { gap: 24px; }
}

/* Anchors under a sticky header: the target is not hidden behind it. */
.ps-grid-section, #ps-portfolio-lists { scroll-margin-top: calc(var(--ps-header-h) + var(--ps-sticky-top) + 8px); }