/* ═══════════════════════════════════════════════════════
   THE PEAK PORTFOLIO — CASE STUDY STYLES
   Brand System v2.4 — monochrome Ink/grey/white, hairline rules,
   full-bleed photography. Shares the editorial token system.
   ═══════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ── */
:root {
	--po-black: #0A0A0A;
	--po-white: #FAFAF8;
	--po-cream: #F5F0EB;
	--po-grey-100: #E8E6E3;
	--po-grey-300: #B0ADA8;
	--po-grey-500: #6B6862;
	--po-grey-700: #3D3A36;
	--po-grey-900: #1A1917;
	--po-serif: 'Georgia', 'Times New Roman', serif;
	--po-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	--po-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
	--po-transition: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--po-ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
	--po-accent: var(--po-grey-700);
}

/* ── Page surface ── */
.peak-portfolio-archive .page-wrapper,
.peak-portfolio-single .page-wrapper {
	background-color: var(--po-cream);
}

.peak-portfolio-archive .footer,
.peak-portfolio-single .footer {
	position: relative;
	z-index: 10;
}

/* ══════════════════════════════════════
   PROGRESS BAR
   ══════════════════════════════════════ */
.po-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	z-index: 9999;
	background: transparent;
	pointer-events: none;
}

.po-progress__bar {
	height: 100%;
	width: 0%;
	background: var(--po-accent);
	transition: width 0.1s linear;
}

/* ══════════════════════════════════════
   REVEAL + PARALLAX PRIMITIVES
   ══════════════════════════════════════ */
.po-reveal {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.8s var(--po-ease-out-expo),
				transform 0.8s var(--po-ease-out-expo);
}

.po-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.po-parallax {
	will-change: transform;
}

/* ══════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════ */
/* Mirrors the theme's .button (solid/bordered + dark) so portfolio CTAs match
   the site's button styling exactly. */
.po-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 22px 50px;
	border-radius: 100px;
	border: 2px solid transparent;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	font-size: 13px;
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.po-btn:hover,
.po-btn:focus {
	opacity: 1;
	outline: none;
	transform: translateY(-3px);
}
@media only screen and (max-width: 991px) {
	.po-btn {
		font-size: 11px;
		letter-spacing: 0.8px;
	}
}

/* .button_solid.button_dark */
.po-btn--solid {
	background-color: #181818;
	color: #ffffff;
	border-color: transparent;
}
.po-btn--solid:hover,
.po-btn--solid:focus {
	color: #ffffff;
	border-color: #181818;
}

/* .button_bordered.button_dark */
.po-btn--outline {
	background-color: transparent;
	color: #181818;
	border-color: #181818;
}
.po-btn--outline:hover,
.po-btn--outline:focus {
	color: #181818;
}

/* ══════════════════════════════════════
   ARCHIVE — COVER
   ══════════════════════════════════════ */
.po-cover {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	padding: clamp(120px, 18vw, 220px) 24px clamp(60px, 8vw, 100px);
	background: var(--po-cream);
	text-align: center;
}

.po-cover__content {
	max-width: 760px;
}

.po-cover__label {
	display: block;
	font-family: var(--po-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--po-grey-500);
	margin-bottom: 24px;
}

.po-cover__title {
	font-family: var(--po-serif);
	font-size: clamp(40px, 7vw, 88px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--po-grey-900);
	margin: 0 0 24px;
}

.po-cover__lede {
	font-family: var(--po-sans);
	font-size: clamp(15px, 1.8vw, 18px);
	line-height: 1.7;
	color: var(--po-grey-500);
	max-width: 580px;
	margin: 0 auto;
}

/* ══════════════════════════════════════
   ARCHIVE — PROJECT NAMES (under client name on the slider)
   ══════════════════════════════════════ */
.po-slider__projects {
	margin: 10px 0 0;
	line-height: 1.5;
}
.po-slider__project {
	font-family: var(--po-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}
.po-slider__project:not(:last-child)::after {
	content: "·";
	padding: 0 8px;
	color: rgba(255, 255, 255, 0.4);
}

/* ══════════════════════════════════════
   ARCHIVE — DISCIPLINE FILTER
   ══════════════════════════════════════ */
.po-filter {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 4px;
	padding: 0 24px clamp(48px, 6vw, 72px);
	background: var(--po-cream);
}

.po-filter__item {
	font-family: var(--po-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--po-grey-500);
	padding: 8px 18px;
	border: 1px solid transparent;
	border-radius: 999px;
	transition: all 0.3s var(--po-transition);
}

.po-filter__item:hover {
	color: var(--po-grey-900);
	border-color: var(--po-grey-300);
}

.po-filter__item.is-active {
	color: var(--po-white);
	background: var(--po-grey-900);
	border-color: var(--po-grey-900);
}

/* ══════════════════════════════════════
   ARCHIVE — CASE STUDY GRID
   ══════════════════════════════════════ */
.po-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(24px, 4vw, 48px);
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px clamp(80px, 10vw, 140px);
}

.po-card {
	position: relative;
	background: var(--po-white);
	overflow: hidden;
}

.po-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.po-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--po-grey-100);
}

.po-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--po-ease-out-expo);
}

.po-card__image--placeholder {
	background: linear-gradient(135deg, var(--po-grey-700), var(--po-grey-900));
}

.po-card__media-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10,10,10,0.18), transparent 50%);
	opacity: 0;
	transition: opacity 0.5s var(--po-transition);
}

.po-card__link:hover .po-card__image {
	transform: scale(1.04);
}

.po-card__link:hover .po-card__media-overlay {
	opacity: 1;
}

.po-card__body {
	padding: 28px clamp(20px, 3vw, 36px) 36px;
	border-top: 2px solid var(--po-accent);
}

.po-card__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.po-card__discipline {
	font-family: var(--po-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--po-accent);
}

.po-card__divider {
	width: 16px;
	height: 1px;
	background: var(--po-grey-300);
}

.po-card__client {
	font-family: var(--po-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--po-grey-500);
}

.po-card__title {
	font-family: var(--po-serif);
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--po-grey-900);
	margin: 0 0 12px;
}

.po-card__oneliner {
	font-family: var(--po-sans);
	font-size: 15px;
	line-height: 1.6;
	color: var(--po-grey-500);
	margin: 0 0 24px;
}

.po-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--po-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--po-grey-900);
}

.po-card__cta svg {
	transition: transform 0.3s var(--po-transition);
}

.po-card__link:hover .po-card__cta svg {
	transform: translateX(5px);
}

/* Two-up grid on wider screens */
@media (min-width: 860px) {
	.po-grid {
		grid-template-columns: 1fr 1fr;
	}
	/* First card spans full width as a feature */
	.po-card:first-child {
		grid-column: 1 / -1;
	}
	.po-card:first-child .po-card__media {
		aspect-ratio: 21 / 9;
	}
}

.po-empty {
	text-align: center;
	padding: clamp(80px, 12vw, 160px) 24px;
}

.po-empty__text {
	font-family: var(--po-sans);
	font-size: 16px;
	color: var(--po-grey-500);
}

/* ══════════════════════════════════════
   ARCHIVE — FOOTER COLOPHON
   ══════════════════════════════════════ */
.po-archive-footer {
	padding: clamp(48px, 6vw, 80px) 24px;
	border-top: 1px solid var(--po-grey-100);
	background: var(--po-cream);
	text-align: center;
}

.po-archive-footer__inner p {
	font-family: var(--po-mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	color: var(--po-grey-500);
	margin: 0;
}

/* ══════════════════════════════════════════════════════
   SINGLE — HERO
   ══════════════════════════════════════════════════════ */
.po-single {
	background: var(--po-cream);
}

.po-single__hero {
	position: relative;
	height: 100vh;
	min-height: 600px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.po-single__hero-media {
	position: absolute;
	inset: 0;
}

.po-single__hero-image,
.po-single__hero-video {
	width: 100%;
	height: 110%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: -5%;
	left: 0;
}

.po-single__hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(10,10,10,0.25) 0%,
		rgba(10,10,10,0.1) 40%,
		rgba(10,10,10,0.75) 100%
	);
}

.po-single__hero-content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: none;
	margin: 0;
	/* Match the site header's .container-fluid side padding so the hero copy
	   lines up with the logo/nav. Breakpoints mirror the theme exactly. */
	padding: 0 120px clamp(56px, 8vw, 96px);
	color: var(--po-white);
}
@media (max-width: 1400px) {
	.po-single__hero-content { padding-left: 80px; padding-right: 80px; }
}
@media (max-width: 1280px) {
	.po-single__hero-content { padding-left: 50px; padding-right: 50px; }
}
@media (max-width: 991px) {
	.po-single__hero-content { padding-left: 20px; padding-right: 20px; }
}

.po-single__hero-meta {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 28px;
}

.po-single__back-link {
	font-family: var(--po-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(250,250,248,0.7);
	text-decoration: none;
	transition: color 0.3s ease;
}

.po-single__back-link:hover {
	color: var(--po-white);
}

.po-single__discipline-badge {
	font-family: var(--po-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--po-white);
	padding: 5px 14px;
	border: 1px solid rgba(250,250,248,0.4);
	border-radius: 999px;
}
.po-single__discipline-badge a {
	color: inherit;
	text-decoration: none;
}
.po-single__discipline-badge a:hover {
	color: var(--po-white);
	opacity: 0.75;
}

.po-single__client {
	display: block;
	font-family: var(--po-mono);
	font-size: 13px;
	letter-spacing: 0.1em;
	opacity: 0.85;
	margin-bottom: 16px;
}

.po-single__title {
	font-family: var(--po-serif);
	font-size: clamp(36px, 6.5vw, 80px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 20px;
	max-width: 16ch;
}

.po-single__oneliner {
	font-family: var(--po-sans);
	font-size: clamp(16px, 2vw, 21px);
	line-height: 1.5;
	max-width: 52ch;
	opacity: 0.9;
	margin: 0;
}

.po-single__scroll-indicator {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0.6;
}

.po-scroll-dot {
	animation: po-scroll-dot 2s ease-in-out infinite;
}

@keyframes po-scroll-dot {
	0%, 100% { opacity: 1; transform: translateY(0); }
	50% { opacity: 0.2; transform: translateY(6px); }
}

/* ══════════════════════════════════════
   SINGLE — PROJECT FACTS
   ══════════════════════════════════════ */
.po-facts {
	max-width: none;
	margin: 0;
	/* Match the site header's .container-fluid side padding (same as the hero). */
	padding: clamp(48px, 7vw, 88px) 120px;
}
@media (max-width: 1400px) {
	.po-facts { padding-left: 80px; padding-right: 80px; }
}
@media (max-width: 1280px) {
	.po-facts { padding-left: 50px; padding-right: 50px; }
}
@media (max-width: 991px) {
	.po-facts { padding-left: 20px; padding-right: 20px; }
}

.po-facts__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 32px 24px;
	margin: 0;
	border-top: 1px solid var(--po-grey-300);
	padding-top: 40px;
}

.po-facts__item {
	margin: 0;
}

.po-facts__label {
	font-family: var(--po-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--po-grey-500);
	margin-bottom: 8px;
}

.po-facts__value {
	font-family: var(--po-serif);
	font-size: clamp(14px, 2vw, 14px);
	line-height: 1.3;
	color: var(--po-grey-900);
	margin: 0;
}

/* ══════════════════════════════════════
   SINGLE — PROJECT SECTIONS (client-first)
   ══════════════════════════════════════ */
.po-project--multi:not(:first-child) {
	border-top: 1px solid var(--po-grey-100);
}
.po-project__head {
	padding: clamp(48px, 7vw, 100px) 120px clamp(20px, 3vw, 32px);
	display: flex;
	align-items: baseline;
	gap: clamp(16px, 3vw, 32px);
}
.po-project__num {
	flex: 0 0 auto;
	font-family: var(--po-mono);
	font-size: clamp(13px, 1.4vw, 15px);
	letter-spacing: 0.1em;
	color: var(--po-accent);
	padding-top: 8px;
}
.po-project__title {
	font-family: var(--po-serif);
	font-size: clamp(28px, 4.5vw, 52px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--po-grey-900);
	margin: 0;
}
.po-project__services,
.po-project__services-solo {
	display: block;
	font-family: var(--po-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--po-grey-500);
}
.po-project__services { margin-top: 14px; }
.po-project__services-solo { padding: clamp(28px, 4vw, 48px) 120px 0; }
/* facts sit right under the project head — trim their own top padding */
.po-facts--project { padding-top: clamp(16px, 2vw, 24px); }

@media (max-width: 1400px) {
	.po-project__head,
	.po-project__services-solo { padding-left: 80px; padding-right: 80px; }
}
@media (max-width: 1280px) {
	.po-project__head,
	.po-project__services-solo { padding-left: 50px; padding-right: 50px; }
}
@media (max-width: 991px) {
	.po-project__head,
	.po-project__services-solo { padding-left: 20px; padding-right: 20px; }
	.po-project__head { flex-direction: column; gap: 6px; }
	.po-project__num { padding-top: 0; }
}

/* ══════════════════════════════════════
   SINGLE — NARRATIVE CHAPTERS
   ══════════════════════════════════════ */
.po-single__body {
	background: var(--po-cream);
}

.po-chapter {
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.po-chapter__head {
	display: flex;
	align-items: baseline;
	gap: 16px;
}

.po-chapter__number {
	font-family: var(--po-mono);
	font-size: 13px;
	letter-spacing: 0.1em;
	color: var(--po-accent);
}

.po-chapter__heading {
	font-family: var(--po-serif);
	font-size: clamp(24px, 3.5vw, 40px);
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--po-grey-900);
	margin: 0;
}

.po-chapter__content {
	font-family: var(--po-sans);
	font-size: clamp(16px, 1.7vw, 18px);
	line-height: 1.8;
	color: var(--po-grey-700);
}

.po-chapter__content p {
	margin: 0 0 1.3em;
}

.po-chapter__content a {
	color: var(--po-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.po-chapter__content strong {
	color: var(--po-grey-900);
}

@media (min-width: 900px) {
	.po-chapter {
		grid-template-columns: 280px 1fr;
		gap: 48px;
	}
	.po-chapter__head {
		flex-direction: column;
		gap: 12px;
		position: sticky;
		top: 100px;
		align-self: start;
	}
}

/* ══════════════════════════════════════
   SCROLL-WINDOW PRIMITIVE
   Full-page captures (same width, variable height) shown in a fixed-height
   window that pans through the full image on scroll — and on hover (desktop).
   Powers both the Before/After columns and the full-page showcase block.
   ══════════════════════════════════════ */
.po-scroll-window {
	position: relative;
	width: 100%;
	height: clamp(380px, 68vh, 760px);
	overflow: hidden;
	background: var(--po-grey-100);
}
.po-scroll-window img,
.po-scroll-window video {
	display: block;
	width: 100%;
	height: auto;
	will-change: transform;
}
/* soft hint that the capture continues below the visible window */
.po-scroll-window.is-pannable::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 72px;
	background: linear-gradient(to top, rgba(10, 10, 10, 0.16), transparent);
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.po-scroll-window.is-pannable:hover::after { opacity: 0; }

/* ══════════════════════════════════════
   SINGLE — BEFORE / AFTER (toggle, one full design at a time)
   ══════════════════════════════════════ */
.po-ba-section {
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(32px, 5vw, 64px) clamp(24px, 5vw, 64px);
	display: grid;
	gap: clamp(48px, 7vw, 88px);
}
.po-ba {
	margin: 0;
	text-align: center;   /* centers the inline-flex toggle */
}
.po-ba__toggle {
	display: inline-flex;
	margin-bottom: 24px;
	border: 1px solid var(--po-grey-300);
}
.po-ba__tab {
	font-family: var(--po-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--po-grey-500);
	background: transparent;
	border: none;
	padding: 11px 28px;
	cursor: pointer;
	transition: background 0.25s var(--po-transition), color 0.25s var(--po-transition);
}
.po-ba__tab + .po-ba__tab { border-left: 1px solid var(--po-grey-300); }
.po-ba__tab:hover { color: var(--po-grey-900); }
.po-ba__tab.is-active {
	background: var(--po-grey-900);
	color: var(--po-white);
}
.po-ba__stage {
	position: relative;
	width: 100%;
	background: var(--po-grey-100);
	text-align: left;
}
.po-ba__panel { display: none; }
.po-ba__panel.is-active { display: block; }
.po-ba__panel img {
	display: block;
	width: 100%;
	height: auto;
}
.po-ba__caption {
	font-family: var(--po-sans);
	font-size: 13px;
	line-height: 1.5;
	color: var(--po-grey-500);
	text-align: center;
	margin-top: 16px;
}

/* ══════════════════════════════════════
   SINGLE — MEDIA SECTIONS (full-bleed image/video, full-page showcase)
   ══════════════════════════════════════ */
.po-media-flow {
	display: grid;
	gap: clamp(40px, 7vw, 96px);
	padding: clamp(24px, 5vw, 56px) 0;
}
.po-media { margin: 0; }
.po-media__img,
.po-media__video {
	display: block;
	width: 100%;
	height: auto;
}
.po-media__label {
	display: block;
	max-width: 1100px;
	margin: 0 auto 14px;
	padding: 0 clamp(24px, 5vw, 64px);
	font-family: var(--po-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--po-grey-700);
}
.po-media__caption {
	font-family: var(--po-sans);
	font-size: 13px;
	line-height: 1.5;
	color: var(--po-grey-500);
	text-align: center;
	margin: 16px auto 0;
	max-width: 1100px;
	padding: 0 24px;
}
/* full-page showcase stays within the content column */
.po-media--page .po-scroll-window {
	max-width: 1100px;
	margin: 0 auto;
}

/* Full-bleed breakout — edge to edge regardless of the content column */
.po-fullbleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ══════════════════════════════════════
   SINGLE — PULL QUOTE
   ══════════════════════════════════════ */
.po-pullquote {
	margin: 0;
	padding: clamp(56px, 8vw, 110px) clamp(24px, 5vw, 64px);
	background: var(--po-grey-900);
}

.po-pullquote__inner {
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
}

.po-pullquote__text {
	font-family: var(--po-serif);
	font-size: clamp(24px, 3.6vw, 42px);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--po-white);
	margin: 0 0 28px;
}

.po-pullquote__text::before { content: '\201C'; }
.po-pullquote__text::after { content: '\201D'; }

.po-pullquote__cite {
	font-family: var(--po-sans);
	font-size: 13px;
	font-style: normal;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--po-accent);
}

/* ══════════════════════════════════════
   SINGLE — GALLERY
   ══════════════════════════════════════ */
.po-single__gallery {
	padding: clamp(40px, 6vw, 72px) 0;
}

.po-gallery--diptych {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 clamp(24px, 5vw, 64px);
}

@media (min-width: 720px) {
	.po-gallery--diptych {
		grid-template-columns: 1fr 1fr;
	}
}

.po-gallery__figure {
	margin: 0;
}

.po-gallery__figure img {
	width: 100%;
	height: auto;
	display: block;
}

.po-gallery__figure figcaption {
	font-family: var(--po-sans);
	font-size: 12px;
	color: var(--po-grey-500);
	margin-top: 10px;
}

/* Horizontal scroll gallery */
.po-gallery--scroll {
	position: relative;
}

.po-gallery__track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 0 clamp(24px, 5vw, 64px);
	scrollbar-width: none;
}

.po-gallery__track::-webkit-scrollbar { display: none; }

.po-gallery--scroll .po-gallery__figure {
	flex: 0 0 min(80%, 800px);
	scroll-snap-align: center;
}

.po-gallery--scroll .po-gallery__figure img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.po-gallery__counter {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
	font-family: var(--po-mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	color: var(--po-grey-500);
}

.po-gallery__nav {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 16px;
}

.po-gallery__prev,
.po-gallery__next {
	width: 44px;
	height: 44px;
	border: 1px solid var(--po-grey-300);
	background: transparent;
	color: var(--po-grey-900);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s var(--po-transition);
}

.po-gallery__prev:hover,
.po-gallery__next:hover {
	background: var(--po-grey-900);
	color: var(--po-white);
	border-color: var(--po-grey-900);
}

/* ══════════════════════════════════════
   SINGLE — ACTIONS / SHARE
   ══════════════════════════════════════ */
.po-single__actions {
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(48px, 7vw, 88px) clamp(24px, 5vw, 64px);
}

.po-single__actions-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	border-top: 1px solid var(--po-grey-300);
	padding-top: 40px;
}

.po-single__actions-primary {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.po-share {
	display: flex;
	align-items: center;
	gap: 16px;
}

.po-share__label {
	font-family: var(--po-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--po-grey-500);
}

.po-share__links {
	display: flex;
	gap: 10px;
}

.po-share__link {
	width: 40px;
	height: 40px;
	border: 1px solid var(--po-grey-300);
	background: transparent;
	color: var(--po-grey-700);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s var(--po-transition);
}

.po-share__link:hover {
	background: var(--po-grey-900);
	color: var(--po-white);
	border-color: var(--po-grey-900);
}

.po-share__copy.is-copied {
	background: var(--po-accent);
	color: var(--po-white);
	border-color: var(--po-accent);
}

/* ══════════════════════════════════════
   SINGLE — MORE WORK NAV
   ══════════════════════════════════════ */
.po-single__nav {
	background: var(--po-white);
	padding: clamp(56px, 8vw, 100px) clamp(24px, 5vw, 64px);
	border-top: 1px solid var(--po-grey-100);
}

.po-single__nav-inner {
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
}

.po-single__nav-label {
	display: block;
	font-family: var(--po-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--po-grey-500);
	margin-bottom: 40px;
}

.po-single__nav-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-bottom: 48px;
	text-align: left;
}

@media (min-width: 720px) {
	.po-single__nav-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.po-nav-card {
	text-decoration: none;
	color: inherit;
	display: block;
}

.po-nav-card__image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--po-grey-100);
	margin-bottom: 16px;
}

.po-nav-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--po-ease-out-expo);
}

.po-nav-card:hover .po-nav-card__image img {
	transform: scale(1.05);
}

.po-nav-card__discipline {
	display: block;
	font-family: var(--po-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--po-accent);
	margin-bottom: 6px;
}

.po-nav-card__title {
	font-family: var(--po-serif);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--po-grey-900);
}

/* ══════════════════════════════════════
   MOBILE REFINEMENTS
   ══════════════════════════════════════ */
@media (max-width: 600px) {
	.po-single__hero {
		height: 90vh;
		min-height: 480px;
	}
	.po-single__actions-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ══════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.po-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.po-parallax {
		transform: none !important;
	}
	.po-scroll-dot {
		animation: none;
	}
	/* let the capture be scrolled manually instead of JS panning */
	.po-scroll-window {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.po-scroll-window img,
	.po-scroll-window video {
		transform: none !important;
	}
}