/**
 * Nexus Guest Post — Portfolio.
 *
 * Loaded only on /portfolio/, the service tabs and project pages. Every
 * selector is namespaced (.pf-*), so nothing here can reach another page.
 * Built entirely on the theme tokens in main.css.
 *
 * Service personality comes from surface, framing and typography — not from
 * new colours. The brand stays green, mint and navy throughout.
 *
 *   SEO ............ light data surface, search framing, before → after figures
 *   Authority ...... navy link-graph surface, publisher ledger, DR metrics
 *   Content ........ paper on mint, editorial type, writing samples
 *   Web ............ browser + phone frames, large screenshots, stack chips
 *   Management ..... console surface, monospace status rows, health figures
 *
 * 01 Tokens   02 Hero   03 Filter rail   04 Results + grid   05 Cards
 * 06 Visuals  07 Card evidence   08 Empty states   09 Load more
 * 12a Demo projects   12b Project accent   13 Motion   14 Responsive
 *
 * The case-study page (project hero, chapters, evidence, gallery and
 * lightbox) is styled in portfolio-case.css.
 */

/* == 01 Tokens ============================================================ */
.pf,
.pf-case {
	/* Text colours tuned to WCAG AA (4.5:1) on every portfolio surface. */
	--pf-label: var(--body);
	--pf-accent: #3d22c9;
	--pf-radius: 18px;
	--pf-radius-sm: 12px;
	--pf-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
	--pf-rail-top: calc(var(--header-h) + var(--admin-offset));
	--pf-lift: 0 34px 70px -42px rgba(23, 18, 63, 0.5);
	--pf-soft: 0 1px 2px rgba(23, 18, 63, 0.04), 0 10px 30px -24px rgba(23, 18, 63, 0.28);
}

.pf .screen-reader-text,
.pf-case .screen-reader-text { position: absolute !important; }

/* Shared tag. */
.pf-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.32rem 0.7rem 0.32rem 0.55rem;
	border-radius: 999px;
	background: var(--mint-100);
	border: 1px solid var(--rule-mint);
	color: var(--green-ink);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.pf-tag svg { color: var(--pf-accent); flex: none; }
a.pf-tag:hover { background: var(--mint-200); color: var(--green-ink); }
.pf-tag--spot { background: var(--surface-premium-flat); border-color: var(--green-ink); color: var(--white); }

/* Chips. */
.pf-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }

.pf-chips li {
	padding: 0.3rem 0.65rem;
	border-radius: 8px;
	background: var(--surface-2);
	border: 1px solid var(--rule);
	color: var(--body);
	font-size: 0.8rem;
	line-height: 1.3;
}

.pf-chips__more { color: var(--pf-label) !important; background: transparent !important; border-style: dashed !important; }
.pf-chips--soft li { background: var(--mint-050); border-color: var(--rule-mint); color: var(--green-ink); }
.pf-chips--stack li { font-family: var(--pf-mono); font-size: 0.76rem; letter-spacing: -0.01em; background: var(--white); color: var(--ink); }
.pf-chips--lg li { font-size: 0.92rem; padding: 0.5rem 0.9rem; border-radius: 10px; }

/* Before → after. */
.pf-delta { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-delta__from { color: var(--pf-label); font-weight: 500; }
.pf-delta__arrow { display: inline-flex; color: var(--green-deep); }
.pf-delta__to { color: var(--ink); font-weight: 700; }

/* == 02 Hero ============================================================== */
.pf-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--white) 0%, var(--hero-floor) 100%);
	padding: clamp(2rem, 4.5vw, 3.75rem) 0 clamp(2.5rem, 5vw, 4.25rem);
}

.pf-hero::before {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	right: -40px;
	top: -10px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(58, 31, 196, 0.4) 0%, rgba(124, 99, 255, 0.18) 45%, transparent 70%);
	filter: blur(24px);
	pointer-events: none;
	translate: var(--hero-mx, 0px) var(--hero-my, 0px);
	transition: translate 0.4s var(--ease);
	will-change: translate;
}

.pf-hero .hero-glow--left {
	position: absolute;
	width: 420px;
	height: 420px;
	left: -40px;
	top: -140px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(58, 31, 196, 0.4) 0%, rgba(124, 99, 255, 0.18) 45%, transparent 70%);
	filter: blur(24px);
	pointer-events: none;
	translate: var(--hero-mx2, 0px) var(--hero-my2, 0px);
	transition: translate 0.4s var(--ease);
	will-change: translate;
}

@media (hover: none), (pointer: coarse) {
	@media (prefers-reduced-motion: no-preference) {
		.pf-hero::before { animation: hero-glow-drift 14s ease-in-out infinite; }
		.pf-hero .hero-glow--left { animation: hero-glow-drift-left 17s ease-in-out infinite; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.pf-hero::before,
	.pf-hero .hero-glow--left { translate: none; }
}

.pf-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: end;
}

.pf-hero .crumbs { margin-bottom: 1.35rem; }

.pf-hero__title {
	font-size: clamp(2.35rem, 5.4vw, 4.4rem);
	line-height: 1.02;
	letter-spacing: -0.038em;
	margin: 0 0 1.15rem;
	max-width: 15ch;
}

.pf-hero__title em { font-style: normal; color: var(--green-deep); } /* large text: 4.1:1 passes AA-large */
.pf-hero__lead { max-width: 56ch; font-size: clamp(1.02rem, 1.3vw, 1.14rem); margin: 0; color: var(--body); }

.pf-hero__index-title {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	/* Unlike the card below it, this label sits directly on the Hero's own
	   light background — a light-mint tone has almost no contrast here.
	   --ink is the theme's own near-black text colour (the same one used
	   for the H1 right below it), so this reads unambiguously dark rather
	   than relying on a green that could still look pale at a glance. */
	color: var(--ink);
	margin: 0 0 0.75rem;
}

/* The dark member of the same premium-green system used on the site's
   other deep surfaces (--surface-premium: the same --green-ink /
   --premium-glow / --premium-deep gradient, with its own built-in ambient
   blooms) — reused here, not a new palette, so this card and (for
   instance) the Guest Post selected-site card or the dark Portfolio
   chapters all read as one family. */
.pf-index {
	list-style: none;
	margin: 0;
	padding: 0.4rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--r-lg);
	background: var(--surface-premium);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 30px 56px -30px rgba(23, 11, 82, 0.6);
}

.pf-index li {
	display: grid;
	grid-template-columns: 2.3rem minmax(0, 1fr) auto;
	gap: 0.85rem;
	align-items: center;
	padding: 0.65rem 0.6rem;
	border-radius: var(--r);
	transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.pf-index li + li { margin-top: 0.1rem; }

.pf-index li:hover {
	background: rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* Numbers: a translucent glass badge rather than the light mint fill used
   on a white surface — the same "glass on dark" language already used for
   accent marks elsewhere on the site's dark chapters. */
.pf-index__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 8px;
	font-family: var(--display);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--premium-highlight);
	background: rgba(201, 188, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.18);
	transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.pf-index__text strong { display: block; font-family: var(--display); font-size: 0.98rem; font-weight: 600; color: var(--premium-text); letter-spacing: -0.01em; line-height: 1.3; }
.pf-index__text small { display: block; font-size: 0.82rem; color: var(--premium-text); font-weight: 400; line-height: 1.4; }

/* Icons: the same currentColor line icons, now in a translucent mint-glass
   container instead of a light green tint, so the glyphs stay legible and
   premium against the dark surface. */
.pf-index__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.15rem;
	height: 2.15rem;
	border-radius: 9px;
	color: var(--premium-highlight);
	background: radial-gradient(circle at 30% 20%, rgba(201, 188, 255, 0.22) 0%, rgba(201, 188, 255, 0.07) 100%);
	border: 1px solid rgba(255, 255, 255, 0.18);
	transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}

.pf-index li:hover .pf-index__icon {
	box-shadow: 0 8px 16px -10px rgba(23, 11, 82, 0.6);
	transform: translateY(-1px);
}

/* The current service: the whole row is lifted, not just its text. */
.pf-index li.is-current {
	background: linear-gradient(180deg, rgba(201, 188, 255, 0.16), rgba(201, 188, 255, 0.05));
	box-shadow: inset 0 0 0 1px rgba(201, 188, 255, 0.35);
}

.pf-index li.is-current .pf-index__num,
.pf-index li.is-current .pf-index__icon {
	color: var(--white);
	background: linear-gradient(180deg, var(--green), var(--green-deep));
	border-color: transparent;
}

.pf-index li.is-current strong { color: var(--premium-text); }

/* == 03 Filter rail ======================================================= */
.pf-rail {
	position: sticky;
	top: var(--pf-rail-top);
	z-index: 40;
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: saturate(170%) blur(14px);
	backdrop-filter: saturate(170%) blur(14px);
	border-top: 1px solid var(--rule-mint);
	border-bottom: 1px solid var(--rule);
	transition: box-shadow 0.35s var(--ease);
}

.pf-rail.is-stuck { box-shadow: 0 14px 30px -26px rgba(23, 18, 63, 0.45); }
.pf-filter { padding-block: 0.8rem; }
.pf-filter__list {
	list-style: none;
	margin: -4px;
	padding: 4px;
	display: flex;
	flex-wrap: nowrap;
	gap: 0.3rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.pf-filter__list::-webkit-scrollbar { display: none; }
.pf-filter__list li { flex: none; }

.pf-filter__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 44px;
	padding: 0.5rem 0.85rem 0.5rem 0.72rem;
	border-radius: 999px;
	border: 1px solid transparent;
	color: var(--body);
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.pf-filter__icon { display: none; }
.pf-filter__link:hover { color: var(--ink); background: var(--surface-2); border-color: var(--rule); }

.pf-filter__count {
	min-width: 1.6rem;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	background: var(--surface-2);
	border: 1px solid var(--rule);
	color: var(--body);
	font-size: 0.72rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
	line-height: 1.5;
}

.pf-filter__link.is-active { background: var(--surface-premium-flat); border-color: var(--green-ink); color: var(--white); box-shadow: 0 10px 22px -14px rgba(23, 18, 63, 0.7); }
.pf-filter__link.is-active .pf-filter__icon { display: inline-flex; color: var(--green); }
.pf-filter__link.is-active .pf-filter__count { background: var(--green); border-color: var(--green); color: var(--navy); }
.pf-filter__link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.pf.is-loading [data-pf-results] { opacity: 0.45; transition: opacity 0.2s var(--ease); pointer-events: none; }

/* == 04 Results + grid ==================================================== */
.pf-results { padding-block: clamp(2.25rem, 4.5vw, 3.75rem) var(--band); transition: opacity 0.3s var(--ease); }

.pf-results__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.pf-results__title { font-size: clamp(1.2rem, 1.8vw, 1.45rem); margin: 0; letter-spacing: -0.02em; }
.pf-results__title:focus { outline: none; }
.pf-results__count { margin: 0; font-size: 0.86rem; color: var(--body); font-variant-numeric: tabular-nums; }

.pf-grid { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.pf-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* == 05 Cards ============================================================= */
.pf-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--white);
	border: 1px solid var(--rule);
	border-radius: var(--pf-radius);
	overflow: hidden;
	box-shadow: var(--pf-soft);
	transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}

.pf-card:hover { transform: translateY(-5px); border-color: var(--mint-300); box-shadow: var(--pf-lift); }
.pf-card:focus-within { border-color: var(--green); }

.pf-card__visual { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-bottom: 1px solid var(--rule); }
.pf-card__body { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.4rem 1.5rem 1.35rem; flex: 1; }
.pf-card__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.pf-card__who { margin: 0; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.02em; color: var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-card__title { margin: 0; font-size: clamp(1.14rem, 1.45vw, 1.34rem); line-height: 1.26; letter-spacing: -0.02em; }
.pf-card__link { color: var(--ink); text-decoration: none; transition: color 0.25s var(--ease); }
.pf-card__link::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.pf-card:hover .pf-card__link { color: var(--green-ink); }
.pf-card__link:focus-visible { outline: none; }
.pf-card__link:focus-visible::after { outline: 2px solid var(--green); outline-offset: -2px; }
.pf-card__summary { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--body); }
.pf-card__facts { margin: 0; font-size: 0.84rem; font-weight: 600; color: var(--ink); }

.pf-card__foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--rule);
}

.pf-card__cta { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.88rem; font-weight: 600; color: var(--pf-accent); }
.pf-card__cta svg { transition: transform 0.35s var(--ease); }
.pf-card:hover .pf-card__cta svg { transform: translateX(4px); }
.pf-card__when { font-size: 0.78rem; color: var(--body); white-space: nowrap; }

/* Spotlight: the featured project, wide. */
.pf-card--spotlight {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	margin-bottom: clamp(1.25rem, 2.4vw, 2rem);
}

.pf-card--spotlight .pf-card__visual { aspect-ratio: auto; min-height: 420px; border-bottom: 0; border-right: 1px solid var(--rule); }
.pf-card--spotlight .pf-card__body { padding: clamp(1.75rem, 3.2vw, 2.75rem); justify-content: center; gap: 0.9rem; }
.pf-card--spotlight .pf-card__title { font-size: clamp(1.45rem, 2.3vw, 2rem); letter-spacing: -0.026em; line-height: 1.16; }
.pf-card--spotlight .pf-card__summary { font-size: 1rem; }
.pf-card--spotlight .pf-card__foot { margin-top: 0.5rem; }

/* == 06 Visuals =========================================================== */
.pf-vis { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
.pf-vis img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* A screenshot rising from the bottom edge of its surface. */
.pf-shot,
.pf-browser {
	position: absolute;
	left: 7%;
	right: 7%;
	top: 10%;
	bottom: -1px;
	border-radius: 12px 12px 0 0;
	overflow: hidden;
	box-shadow: 0 -1px 0 rgba(23, 18, 63, 0.04), 0 30px 60px -28px rgba(23, 18, 63, 0.55);
	transition: transform 0.7s var(--ease);
}

.pf-card:hover .pf-shot,
.pf-card:hover .pf-browser,
.pf-card:hover .pf-paper { transform: translateY(-6px); }

.pf-shot { background: var(--white); border: 1px solid var(--rule); border-bottom: 0; }
.pf-shot--dark { border-color: rgba(255, 255, 255, 0.1); background: var(--navy-2); }

/* Generated covers — typographic, from the project's own data. */
.pf-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; padding: 8%; text-align: center; }
.pf-cover__icon { display: inline-flex; color: var(--green); }
.pf-cover__caption { font-family: var(--display); font-weight: 600; font-size: clamp(0.95rem, 1.4vw, 1.1rem); letter-spacing: -0.01em; }

/* SEO — light data surface. */
.pf-vis--seo {
	background:
		radial-gradient(80% 70% at 50% 110%, rgba(91, 61, 245, 0.2) 0%, transparent 70%),
		linear-gradient(rgba(23, 18, 63, 0.045) 1px, transparent 1px) 0 0 / 34px 34px,
		linear-gradient(90deg, rgba(23, 18, 63, 0.045) 1px, transparent 1px) 0 0 / 34px 34px,
		var(--mint-050);
}

.pf-cover__search {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	max-width: 100%;
	padding: 0.8rem 1.25rem;
	border-radius: 999px;
	background: var(--white);
	border: 1px solid var(--rule);
	box-shadow: 0 16px 34px -22px rgba(23, 18, 63, 0.5);
	color: var(--ink);
	font-family: var(--pf-mono);
	font-size: 0.86rem;
}

.pf-cover__search svg { color: var(--pf-accent); flex: none; }
.pf-cover__search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-vis--spotlight .pf-cover__search,
.pf-vis--hero .pf-cover__search { padding: 1rem 1.6rem; font-size: 1rem; }
.pf-chips--cover { justify-content: center; max-width: 30rem; }
.pf-chips--cover li { background: rgba(255, 255, 255, 0.8); font-size: 0.74rem; }

/* Authority — the card's own backdrop (the link-graph pattern drawn on top,
   .pf-constellation, is unaffected — purely decorative line art). */
.pf-vis--authority {
	color: var(--white);
	background: var(--surface-premium-hero);
}

.pf-constellation { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(91, 61, 245, 0.55); opacity: 0.7; z-index: -1; }
.pf-vis--authority.has-image .pf-constellation { opacity: 0.35; }
.pf-cover--authority { gap: 0.35rem; }
.pf-cover__big { font-family: var(--display); font-size: clamp(3rem, 7vw, 4.75rem); font-weight: 700; line-height: 1; letter-spacing: -0.05em; color: var(--white); font-variant-numeric: tabular-nums; }
.pf-cover--authority .pf-cover__caption { color: var(--premium-text); font-family: var(--sans); font-weight: 500; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; }

.pf-cover__pill {
	margin-top: 0.75rem;
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	border: 1px solid rgba(91, 61, 245, 0.5);
	background: rgba(91, 61, 245, 0.12);
	color: #c9bcff;
	font-family: var(--pf-mono);
	font-size: 0.8rem;
}

/* Content — paper on mint. */
.pf-vis--content { background: linear-gradient(180deg, var(--mint-100) 0%, var(--mint-200) 100%); }

.pf-paper {
	position: absolute;
	left: 14%;
	right: 14%;
	top: 11%;
	bottom: -1px;
	background: var(--white);
	border-radius: 6px 6px 0 0;
	box-shadow: 0 1px 0 rgba(23, 18, 63, 0.05), 0 30px 50px -30px rgba(42, 22, 144, 0.55);
	overflow: hidden;
	transition: transform 0.7s var(--ease);
}

.pf-paper__shot { position: absolute; inset: 0; }
.pf-cover--content { position: absolute; inset: 0; align-items: flex-start; justify-content: flex-start; text-align: left; gap: 0.7rem; padding: 11% 11% 0; }
.pf-cover__kicker { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pf-accent); }

.pf-cover__headline {
	font-family: var(--display);
	font-size: clamp(1rem, 1.6vw, 1.3rem);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: var(--ink);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pf-cover__rule { width: 32px; height: 2px; background: var(--green); }

.pf-cover__sample {
	font-style: italic;
	font-size: 0.8rem;
	line-height: 1.65;
	color: var(--body);
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pf-cover__lines { display: grid; gap: 0.55rem; width: 100%; }
.pf-cover__lines i { display: block; height: 6px; border-radius: 3px; background: var(--surface-2); }
.pf-cover__lines i:nth-child(2) { width: 92%; }
.pf-cover__lines i:nth-child(3) { width: 96%; }
.pf-cover__lines i:nth-child(4) { width: 64%; }

/* Web — the card's own backdrop. The browser/phone frame drawn on top
   (.pf-browser etc., below) keeps its own realistic dark chrome — that
   detail stays as-is by design, not converted. */
.pf-vis--web {
	background: var(--surface-premium-hero);
}

.pf-browser { display: flex; flex-direction: column; background: var(--navy-2); border: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 0; }
.pf-browser__bar { flex: none; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.pf-browser__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); flex: none; }
.pf-browser__bar i:first-child { background: rgba(91, 61, 245, 0.75); }

.pf-browser__url {
	margin: 0 auto;
	max-width: 60%;
	padding: 0.14rem 0.85rem;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.07);
	color: var(--body-dark);
	font-family: var(--pf-mono);
	font-size: 0.68rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pf-browser__screen { position: relative; flex: 1; overflow: hidden; background: var(--white); }
.pf-cover--web { background: var(--surface-premium-hero); }
.pf-cover__mono { font-family: var(--display); font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; letter-spacing: -0.05em; color: rgba(255, 255, 255, 0.9); }

.pf-phone {
	position: absolute;
	right: 4%;
	bottom: -6%;
	width: 21%;
	aspect-ratio: 440 / 952;
	border-radius: 16px;
	border: 4px solid #1d1749;
	background: #1d1749;
	overflow: hidden;
	box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.6);
	z-index: 2;
	transition: transform 0.7s var(--ease);
}

.pf-card:hover .pf-phone { transform: translateY(-10px); }

/* Management — console surface. */
.pf-vis--management {
	background:
		linear-gradient(rgba(23, 18, 63, 0.04) 1px, transparent 1px) 0 0 / 26px 26px,
		linear-gradient(90deg, rgba(23, 18, 63, 0.04) 1px, transparent 1px) 0 0 / 26px 26px,
		var(--surface-2);
}

.pf-console {
	position: absolute;
	left: 10%;
	right: 10%;
	top: 13%;
	bottom: -1px;
	border-radius: 12px 12px 0 0;
	background: var(--white);
	border: 1px solid var(--rule);
	border-bottom: 0;
	box-shadow: 0 30px 60px -32px rgba(23, 18, 63, 0.45);
	overflow: hidden;
	transition: transform 0.7s var(--ease);
}

.pf-card:hover .pf-console { transform: translateY(-6px); }

.pf-console__bar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1rem;
	border-bottom: 1px solid var(--rule);
	background: var(--mint-050);
	font-family: var(--pf-mono);
	font-size: 0.72rem;
	color: var(--green-ink);
}

.pf-console__bar::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(91, 61, 245, 0.2); flex: none; }
.pf-console__bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-console ul { list-style: none; margin: 0; padding: 0.3rem 1rem; }
.pf-console li { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px dashed var(--rule); font-family: var(--pf-mono); font-size: 0.76rem; color: var(--ink); }
.pf-console li svg { color: var(--green-deep); flex: none; }
.pf-console li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Generic. */
.pf-vis--generic { background: linear-gradient(180deg, var(--surface-2) 0%, var(--mint-100) 100%); }

/* == 07 Card evidence ===================================================== */
.pf-kpis { margin: 0.15rem 0 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.pf-kpi { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--rule); }
.pf-kpi dt { font-size: 0.82rem; color: var(--body); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-kpi dd { margin: 0; font-size: 0.95rem; }
.pf-card--management .pf-kpi dt::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 0.5rem; border-radius: 50%; background: var(--green); vertical-align: middle; }
.pf-kpis--rank .pf-kpi dt { font-family: var(--pf-mono); font-size: 0.78rem; color: var(--ink); }

.pf-ledger { list-style: none; margin: 0.15rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.pf-ledger li { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); font-size: 0.86rem; }

.pf-ledger__mono {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--surface-premium-flat);
	color: var(--white);
	font-family: var(--display);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.pf-ledger__name { flex: 1; min-width: 0; color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-ledger__metric { flex: none; padding: 0.15rem 0.5rem; border-radius: 6px; background: var(--mint-100); color: var(--green-ink); font-family: var(--pf-mono); font-size: 0.74rem; font-weight: 600; }
.pf-ledger__metric abbr { text-decoration: none; font-weight: 500; }
.pf-ledger__more { color: var(--body); font-size: 0.8rem !important; border-bottom: 0 !important; }

.pf-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.pf-ticks li { display: flex; gap: 0.5rem; font-size: 0.86rem; color: var(--ink); }
.pf-ticks svg { color: var(--green-deep); flex: none; margin-top: 4px; }

/* == 08 Empty states ====================================================== */
.pf-empty {
	position: relative;
	overflow: hidden;
	max-width: 880px;
	margin-inline: auto;
	padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
	border-radius: 24px;
	border: 1px solid var(--rule-mint);
	background:
		radial-gradient(60% 80% at 50% 0%, rgba(91, 61, 245, 0.12) 0%, transparent 70%),
		linear-gradient(180deg, var(--white) 0%, var(--mint-050) 100%);
	text-align: center;
}

.pf-empty__mark {
	display: inline-grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-bottom: 1.25rem;
	border-radius: 18px;
	background: var(--white);
	border: 1px solid var(--rule-mint);
	color: var(--pf-accent);
	box-shadow: 0 0 0 8px rgba(91, 61, 245, 0.06), 0 18px 34px -22px rgba(42, 22, 144, 0.55);
}

.pf-empty__eyebrow { margin: 0 0 0.6rem; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pf-accent); }
.pf-empty__title { font-size: clamp(1.45rem, 2.6vw, 2rem); letter-spacing: -0.026em; margin: 0 auto 0.75rem; max-width: 24ch; }
.pf-empty__text { max-width: 54ch; margin: 0 auto; color: var(--body); }
.pf-empty__actions { justify-content: center; margin-top: 1.75rem; }

.pf-empty__services { list-style: none; margin: 2rem auto 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.6rem; text-align: left; }

.pf-empty__services a,
.pf-empty__services li > span {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	height: 100%;
	padding: 0.9rem 1rem;
	border-radius: 14px;
	background: var(--white);
	border: 1px solid var(--rule);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.pf-empty__services a:hover { border-color: var(--mint-300); transform: translateY(-2px); }
.pf-empty__icon { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--mint-100); color: var(--pf-accent); }
.pf-empty__services strong { display: block; font-family: var(--display); font-size: 0.94rem; color: var(--ink); }
.pf-empty__services small { display: block; font-size: 0.8rem; color: var(--body); line-height: 1.4; }
.pf-empty__admin { margin: 1.5rem 0 0; font-size: 0.84rem; color: var(--body); }
.pf-empty__admin a { font-weight: 600; margin-right: 0.5rem; }
.pf-empty__tip { display: block; margin-top: 0.35rem; font-size: 0.8rem; }

/* == 09 Load more ========================================================= */
.pf-more { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); }
.pf-more__left { font-weight: 500; color: var(--body); font-size: 0.84rem; }
.pf-more__btn[aria-busy="true"] { pointer-events: none; opacity: 0.6; }
.pf.pf-js .pf-results .pagination { display: none; }

/* Long unbroken values (URLs, domains, figures) break instead of pushing
   the layout wider than the screen. */
.pf-card,
.pf-spot { overflow-wrap: anywhere; }

/* == 10–12 Case study ======================================================
   The single project page (hero, chapters, evidence blocks, gallery and
   lightbox) lives in portfolio-case.css, loaded only on project pages. */

/* == 12a Demo projects ======================================================
   An honest, quiet label: demonstration projects are never mistaken for
   real client work. */
.pf-sample-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.28rem 0.6rem;
	border-radius: 999px;
	background: var(--navy);
	color: var(--white);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	line-height: 1.2;
	white-space: nowrap;
}
.pf-sample-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.pf-card__visual > .pf-sample-badge { position: absolute; top: 0.85rem; left: 0.85rem; z-index: 5; box-shadow: 0 4px 14px rgba(8, 20, 34, 0.18); }
/* Generated covers make room for the label so nothing sits underneath it. */
.pf-sample-badge + .pf-vis .pf-cover { padding-top: 3.4rem; padding-bottom: 1.4rem; }
.pf-sample-badge + .pf-vis .pf-console { top: max(13%, 3.1rem); }
.pf-sample-badge + .pf-vis .pf-browser { top: max(10%, 3.1rem); }
.pf-sample-badge + .pf-vis .pf-paper { top: max(11%, 3.1rem); }
.pf-hero__sample {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.55rem;
	margin: 1.2rem 0 0;
	max-width: 36rem;
	font-size: 0.82rem;
	line-height: 1.55;
	color: var(--body);
}

/* == 12b Project accent =====================================================
   Optional, per project. Decorative only — never text — so contrast and the
   Nexus Guest Post identity are untouched. Browsers without color-mix() simply
   show no accent. */
.pf-card.has-accent .pf-card__visual::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	z-index: 4;
	background: linear-gradient(90deg, var(--pf-project) 0%, color-mix(in srgb, var(--pf-project) 0%, transparent) 85%);
}

.pf-card.has-accent .pf-vis::before,
.pf-case.has-accent .pf-stage--cover .pf-vis::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(70% 65% at 88% 0%, color-mix(in srgb, var(--pf-project) 32%, transparent) 0%, transparent 72%);
}

.pf-card.has-accent:hover { border-color: color-mix(in srgb, var(--pf-project) 45%, var(--rule)); }
.pf-card.has-accent .pf-card__who::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 0.45rem; border-radius: 50%; background: var(--pf-project); vertical-align: 1px; }

/* == 13 Motion ============================================================ */
.pf-js .pf-card.pf-anim { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease); }
.pf-js .pf-card.pf-anim.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.pf *,
	.pf-case * { transition: none !important; animation: none !important; }
	.pf-js .pf-card.pf-anim { opacity: 1; transform: none; }
	.pf-card:hover,
	.pf-card:hover .pf-shot,
	.pf-card:hover .pf-browser,
	.pf-card:hover .pf-paper,
	.pf-card:hover .pf-console,
	.pf-card:hover .pf-phone { transform: none; }
}

/* == 14 Responsive ======================================================== */
@media (max-width: 1199px) {
	/* Filter becomes one swipeable row with edge fades. */
	.pf-filter { margin-inline: calc(var(--gutter) * -1); }

	.pf-filter__list {
		margin: -4px 0;
		scroll-snap-type: x proximity;
		padding-inline: var(--gutter);
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
	}

	.pf-filter__list li { scroll-snap-align: start; }
}

@media (max-width: 1099px) {
	.pf-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pf-hero__inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.pf-hero__index { max-width: 640px; }
	.pf-card--spotlight { grid-template-columns: minmax(0, 1fr); }
	.pf-card--spotlight .pf-card__visual { min-height: 0; aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--rule); }
}

@media (max-width: 899px) {
	/* The index repeats what the filter already says; on smaller screens the
	   filter does that job alone. */
	.pf-hero__index { display: none; }

	.pf-filter__link { min-height: 42px; font-size: 0.86rem; }
}

@media (max-width: 699px) {
	.pf-grid,
	.pf-grid--three { grid-template-columns: minmax(0, 1fr); }
	.pf-hero__title { max-width: none; }
	.pf-card__body { padding: 1.2rem 1.2rem 1.15rem; }
	.pf-card--spotlight .pf-card__body { padding: 1.35rem 1.2rem; }
	.pf-card__visual { aspect-ratio: 16 / 11; }
	.pf-shot,
	.pf-browser { left: 6%; right: 6%; }
	.pf-paper { left: 12%; right: 12%; }
	.pf-phone { width: 24%; }
	.pf-results__head { flex-direction: column; gap: 0.2rem; }
	.pf-empty { border-radius: 18px; text-align: left; }
	.pf-empty__actions { justify-content: flex-start; }
	.pf-empty__actions .btn { width: 100%; }
	.pf-more__btn { width: 100%; }

}

@media print {
	.pf-rail,
	.pf-more,
	.pf-lightbox { display: none !important; }
	.pf-js .pf-card.pf-anim { opacity: 1; transform: none; }
}