body.pp { background: #060606; }

/* cinematic top nav, transparent like the homepage */
.pp .topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem clamp(1rem, 4vw, 2.2rem);
}
.pp .topnav .wordmark {
  font-family: var(--serif); font-size: 1.05rem; color: var(--white);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.85), 0 0 3px rgba(0, 0, 0, 0.6);
}
.pp .topnav .wordmark .dot { color: var(--blood-bright); }

.pp-main { position: relative; z-index: 10; }

/* hero */
.pp-hero {
  min-height: 92vh; display: flex; flex-direction: column; justify-content: center;
  padding: 16vh var(--gutter) 8vh; max-width: 62rem; margin-inline: auto;
}
.pp-eyebrow {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--blood-bright);
  margin-bottom: 1.1rem;
}
.pp-hero h1 {
  font-family: var(--serif); font-size: clamp(2.4rem, 7vw, 4.6rem);
  line-height: 1.02; letter-spacing: -0.02em; color: var(--white);
  max-width: 17ch; text-wrap: balance;
}
.pp-lede {
  margin-top: 1.6rem; max-width: 42rem;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.6; color: var(--bone); text-wrap: pretty;
}
.pp-cue {
  margin-top: 2.6rem; font-family: var(--sans); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--grey);
}
.pp-cue .arrow { display: block; margin-top: 0.7rem; font-size: 1rem; }
@media (prefers-reduced-motion: no-preference) {
  .pp-cue .arrow { animation: pp-bob 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
}
@keyframes pp-bob { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(8px); opacity: 1; } }

/* beats */
.pp-beat {
  min-height: 100vh; display: flex; align-items: center;
  padding: 12vh var(--gutter); border-top: 1px solid var(--hairline-faint);
}
.pp-panel { max-width: 44rem; width: 100%; margin-inline: auto; }
.pp-num { font-family: var(--serif); font-size: 1.1rem; color: var(--grey-dim); margin-bottom: 0.7rem; }
.pp-beat .pp-eyebrow { margin-bottom: 0.85rem; }
.pp-beat h2 {
  font-family: var(--serif); font-size: clamp(1.9rem, 5vw, 3.1rem);
  line-height: 1.06; letter-spacing: -0.01em; color: var(--white);
  margin-bottom: 1.1rem; text-wrap: balance;
}
.pp-lead {
  font-size: clamp(1.02rem, 2.1vw, 1.22rem); line-height: 1.6; color: var(--bone);
  margin-bottom: 1.8rem; text-wrap: pretty;
}
.pp-lead strong { color: var(--white); font-weight: 600; }
.pp-viz { margin-bottom: 1.4rem; }
.pp-viz figure, .pp-viz .exhibit { max-width: 100%; }
.pp-more {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey);
  text-decoration: underline; text-decoration-color: rgba(232, 228, 220, 0.25); text-underline-offset: 3px;
}
.pp-more:hover { color: var(--blood-bright); }

/* close */
.pp-close {
  min-height: 80vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 12vh var(--gutter); max-width: 50rem; margin-inline: auto; border-top: 1px solid var(--hairline);
}
.pp-close h2 {
  font-family: var(--serif); font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.04;
  color: var(--white); margin-bottom: 1.1rem; text-wrap: balance;
}
.pp-close p { font-size: clamp(1.05rem, 2.2vw, 1.28rem); line-height: 1.6; color: var(--bone); max-width: 40rem; margin-bottom: 2rem; }
.pp-row { display: flex; gap: 0.9rem; flex-wrap: wrap; }

.pp-foot { padding: 2rem var(--gutter) 4rem; text-align: center; }
.pp-foot a {
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--grey);
  text-decoration: underline; text-decoration-color: rgba(232, 228, 220, 0.25); text-underline-offset: 3px;
}
.pp-foot a:hover { color: var(--bone); }

@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
  .js .reveal.in { opacity: 1; transform: none; }
}