/* ==========================================================================
   Front page (2026 redesign) — loaded on the front page only, after main.css.
   Mobile-first; desktop from 1153px in vw measured on the 2500px mock-up
   (design_proposal: 1vw = 25px there). No mock-up exists for phones.

   Mind the universal reset in main.css: every element is position:relative
   and font-weight:normal, so absolute boxes and bold text are set explicitly
   (pseudo-elements are not covered by the reset either way).
   ========================================================================== */

/* One stacking context for the whole page body: z-indexes below can never
   climb over the fixed header (its backdrop sits at z-index 0). */
.pp-home { isolation: isolate; }

/* --------------------------------------------------------------------------
   Hero: stacked slides (hero.js cross-fades and zooms them) and the name
   -------------------------------------------------------------------------- */
.pp-hero {
	height: max(50vh, 40vw);        /* 40vw keeps room for the two-line name on landscape phones */
	overflow: hidden;
}
.pp-hero__slides, .pp-hero__slide { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.pp-hero__slide { opacity: 0; z-index: 0; }
/* outgoing slide: stays opaque under the incoming one until it is covered */
.pp-hero__slide.is-prev { opacity: 1; z-index: 1; }
.pp-hero__slide.is-active { opacity: 1; transition: opacity var(--pp-hero-fade, 1.5s) linear; z-index: 2; }
.pp-hero__slide img { display: block; height: 100%; object-fit: cover; width: 100%; }
/* soft shade so the white name stays readable on bright photos (not in the mock-up) */
.pp-hero::after {
	background: linear-gradient(to top, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0));
	bottom: 0;
	content: '';
	height: 60%;
	left: 0;
	pointer-events: none;
	position: absolute;
	width: 100%;
	z-index: 3;
}
.pp-hero__title {
	bottom: 4vw;
	color: var(--pp-paper);
	font-size: 13.5vw;
	font-weight: 700;
	left: 4.8vw;
	line-height: 1;
	position: absolute;
	z-index: 4;
}

/* --------------------------------------------------------------------------
   Sections: heading with the white ring cut by the page edge, then cards
   -------------------------------------------------------------------------- */
.pp-sec { padding-top: 12vw; }
.pp-sec:last-child { padding-bottom: 8vw; }
.pp-sec__head { font-size: 6.375vw; line-height: 1.1; margin-bottom: 5vw; padding-left: 8.6vw; }
.pp-sec__head::before {
	border: 0.7vw solid var(--pp-paper);
	border-radius: 50%;
	box-sizing: border-box;
	content: '';
	height: 13vw;
	left: 0;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 13vw;
}

/* phones: first card full width, the other two side by side */
.pp-cards { display: grid; gap: 5vw 3vw; grid-template-columns: 1fr 1fr; padding: 0 4.8vw; }
.pp-card:first-child { grid-column: 1 / -1; }
.pp-card > a { display: block; }
.pp-card__img { aspect-ratio: 1.13; overflow: hidden; }
.pp-cards--exhibitions .pp-card__img, .pp-cards--press .pp-card__img { aspect-ratio: 1.53; }
/* both dimensions set: WordPress writes width/height attributes on the image */
.pp-card__img img { display: block; height: 100%; object-fit: cover; width: 100%; }
.pp-card__cap { padding: 2.2vw 2vw 2.6vw; transition: background-color 0.3s; word-break: break-word; }
.pp-card > a:hover .pp-card__cap, .pp-card > a:focus-visible .pp-card__cap { background-color: rgba(255, 255, 255, .4); }
.pp-card__cap > h3 { font-size: 3.8vw; font-weight: 700; line-height: 1.15; text-transform: uppercase; }
.pp-card__cap > p {
	display: -webkit-box;
	font-size: 3.4vw;
	line-height: 1.25;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/* --------------------------------------------------------------------------
   Circle buttons: white disc; hover = white ring, like the menu
   -------------------------------------------------------------------------- */
.pp-circles { display: flex; gap: 3vw; justify-content: center; padding: 8vw 4.8vw 0; }
.pp-circle {
	align-items: center;
	background-color: var(--pp-paper);
	border: 0.6vw solid var(--pp-paper);
	border-radius: 50%;
	display: flex;
	flex: none;
	height: 24vw;
	justify-content: center;
	transition: background-color 0.3s;
	width: 24vw;
}
.pp-circle:hover { background-color: transparent; }
.pp-circle > span { font-size: 3.4vw; line-height: 1.05; }

/* --------------------------------------------------------------------------
   Statement: bold lead line + paragraph, large ring behind the left edge
   -------------------------------------------------------------------------- */
.pp-statement { padding: 22vw 4.8vw 10vw; }
.pp-statement__body::before {
	border: 0.5vw solid var(--pp-paper);
	border-radius: 50%;
	box-sizing: border-box;
	content: '';
	height: 60vw;
	left: -22.8vw;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 60vw;
}
.pp-statement h2, .pp-statement p { font-size: 4.675vw; line-height: 1.3; }
.pp-statement h2 { font-weight: 700; }
.pp-statement p { white-space: pre-line; }

/* ==========================================================================
   DESKTOP
   ========================================================================== */
@media (min-width: 1153px) {
	.pp-hero { height: max(85.2vh, 24vw); }     /* header + hero = one screen, as before */
	.pp-hero__title { bottom: 1.9vw; font-size: 9.43vw; left: 3.4vw; }

	.pp-sec { padding-top: 4.9vw; }
	.pp-sec:last-child { padding-bottom: 5.5vw; }
	.pp-sec__head { font-size: 2.36vw; margin-bottom: 3.4vw; padding-left: 4.16vw; }
	.pp-sec__head::before { border-width: 0.32vw; height: 6.44vw; width: 6.44vw; }

	.pp-cards { gap: 2.7vw; grid-template-columns: repeat(3, 28.7vw); padding: 0 0 0 3.4vw; }
	.pp-card:first-child { grid-column: auto; }
	.pp-card__cap { padding: 1.1vw 1vw 1.3vw 2.2vw; }
	.pp-card__cap > h3 { font-size: 1.43vw; }
	.pp-card__cap > p { font-size: max(1.1vw, 13px); -webkit-line-clamp: 2; }
	.pp-cards--works .pp-card__cap > p { font-size: 1.43vw; }

	.pp-circles { gap: 1vw; padding: 2.6vw 0 0; }
	.pp-circle { border-width: 0.2vw; height: 6.48vw; width: 6.48vw; }
	.pp-circle > span { font-size: max(0.85vw, 11.5px); }

	.pp-statement { padding: 5.8vw 0 6.3vw 4.64vw; }
	.pp-statement__body { max-width: 84vw; }
	.pp-statement__body::before { border-width: 0.2vw; height: 22.4vw; left: -8.58vw; width: 22.4vw; }
	.pp-statement h2, .pp-statement p { font-size: 1.78vw; line-height: 1.34; }
}