/* Project pages (body[data-pp]): one family, each page its own composition.

   Every page opens on a specimen hero (a live three.js picture of what the
   project does, p3d.js), set one of two ways (body[data-hero]: split | stage).
   After it, each page chooses its own order and its own layout per section
   (section[data-layout]), so no two pages read alike:

     What it is   ink       the opening sentence set large, inked in as it is read
                  offset    a tall head beside the sentence
     How it works pan       pinned; the steps pan past (desktop)
                  timeline  a rail that fills as the steps pass
                  sticky    a counter that holds while the steps scroll by (desktop)
                  bento     one large step and two small, each on its own ground
     The result   bleed     the figure runs edge to edge
                  figure    the figure opens as it arrives
                  statement the result alone, set large
     What I learned stack   sheets that stack as you read
                  index     one row per lesson, the title large
                  duo       two lessons, the second set lower
                  snap      cards to swipe through
     Closing call marquee   the project's name runs under it
                  block     a full-width panel in the page's colour

   Without the scripts every layout below is a plain, complete page: motion only
   ever starts from the true resting state (project.js). */

/* ── 1. the specimen hero ─────────────────────────────────────────── */
body[data-pp] .phero {
  background: var(--bg);
  min-height: max(680px, 100svh);
  padding-bottom: clamp(28px, 5vh, 56px);
}
body[data-pp] .phero::before {
  background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 78%, transparent) 30%, transparent 56%);
}
body[data-pp] .phero::after { height: 30%; }
.pp-stage {
  position: absolute; inset: 0; z-index: -2;
  /* the ground the specimen stands on, also all there is without WebGL */
  background: radial-gradient(52% 58% at 68% 46%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%);
}
.pp-stage canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.8s var(--ease); }
.pp-stage.is-live canvas { opacity: 1; }
.pp-stage.is-off canvas { display: none; }

.pp-title {
  max-width: none;
  font-size: clamp(60px, 0.8rem + 9.4vw, 192px);
  font-stretch: 125%;
  line-height: 0.88;
  letter-spacing: -0.05em;
  padding-bottom: 0.08em;
}
.pp-title.pp-long { font-size: clamp(44px, 0.6rem + 5.8vw, 124px); line-height: 0.92; }
.pp-title em { padding-right: 0.04em; }
.pp-title br { display: none; }
.pp-w { display: inline-block; white-space: nowrap; }
.pp-c { display: inline-block; }
html[lang="zh-CN"] .pp-title { font-stretch: 100%; letter-spacing: 0; line-height: 1.12; }
body[data-pp] .phero-sub { max-width: 44ch; }
body[data-pp] .phero-inner { gap: clamp(18px, 2.6vh, 30px); }
body[data-pp] .phero .readouts { --pp-rule: 1; border-top: 0; position: relative; }
body[data-pp] .phero .readouts::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--line-2); transform: scaleX(var(--pp-rule)); transform-origin: left;
}
/* held back only until project.js starts the entrance (or the boot timer gives up) */
html.can-reveal:not(.pp-on) body[data-pp] :is(.pp-title, .phero-top, .phero-sub, .phero-cta, .hstat) { opacity: 0; }

/* stage: the specimen fills the upper screen, the name runs the full width under
   it, and the readouts stand in a block beside the words */
@media (min-aspect-ratio: 1/1) and (min-width: 901px) {
  body[data-hero="stage"] .phero::before { background: linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 34%, transparent 58%); }
  body[data-hero="stage"] .pp-stage { background: radial-gradient(48% 52% at 64% 38%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 72%); }
  body[data-hero="stage"] .phero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    grid-template-areas: "top top" "title title" "sub stats" "cta stats";
    column-gap: clamp(32px, 6vw, 120px); align-items: end;
  }
  body[data-hero="stage"] .phero-top { grid-area: top; }
  body[data-hero="stage"] .pp-title { grid-area: title; font-size: clamp(72px, 1rem + 10.6vw, 220px); }
  body[data-hero="stage"] .pp-title.pp-long { font-size: clamp(52px, 0.6rem + 7vw, 150px); }
  body[data-hero="stage"] .phero-sub { grid-area: sub; }
  body[data-hero="stage"] .phero-cta { grid-area: cta; align-self: start; }
  body[data-hero="stage"] .phero .readouts {
    grid-area: stats; margin-top: 0; align-self: end;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body[data-hero="stage"] .phero .readouts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  body[data-hero="stage"] .phero .readouts > div:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 14px; }
  body[data-hero="stage"] .hstat-num { font-size: clamp(34px, 1rem + 2.4vw, 60px); }
}

/* tall screens: the specimen stands above the words, in its own room */
@media (max-aspect-ratio: 1/1) {
  body[data-pp] .phero { padding-top: calc(var(--nav-h) + 38vh); justify-content: flex-start; }
  .pp-stage {
    inset: 0 0 auto 0; height: calc(var(--nav-h) + 42vh);
    background: radial-gradient(60% 50% at 50% 55%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 75%);
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
    mask-image: linear-gradient(to bottom, #000 72%, transparent);
  }
  body[data-pp] .phero::before, body[data-pp] .phero::after { display: none; }
}

/* ── 2. shared: section heads set on one line, keyed text that inks ─ */
.pp-ink { transition: none; }
:is(.pp-what[data-layout="ink"], .pp-result, .pp-how:is([data-layout="timeline"], [data-layout="bento"])) .chapter-grid {
  grid-template-columns: minmax(0, 1fr); row-gap: clamp(28px, 4vw, 56px);
}
:is(.pp-what[data-layout="ink"], .pp-result, .pp-how:is([data-layout="timeline"], [data-layout="bento"])) .chapter-head {
  position: static; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; order: 0;
}
:is(.pp-what[data-layout="ink"], .pp-result) .chapter-head .display { font-size: var(--step-2); }
:is(.pp-what[data-layout="ink"], .pp-result) .chapter-head [data-split] .ln,
.can-reveal :is(.pp-what[data-layout="ink"], .pp-result) .chapter-head [data-split] .ln { display: inline-block; margin-right: 0.24em; }
:is(.pp-what, .pp-result) .chapter-body { max-width: none; }
:is(.pp-what, .pp-result) .chapter-body > * + * { margin-top: 0; }

/* ── 3. what it is ────────────────────────────────────────────────── */
.pp-what [data-ink] {
  max-width: 30ch;
  font: 560 clamp(27px, 0.85rem + 2.3vw, 58px)/1.14 var(--f-disp);
  font-stretch: 106%; letter-spacing: -0.025em;
  color: var(--text); text-wrap: pretty;
}
html[lang="zh-CN"] .pp-what [data-ink] { letter-spacing: 0; line-height: 1.42; font-stretch: 100%; max-width: 24em; }
.pp-what [data-ink] + .body-text { font-size: var(--step-1); line-height: 1.6; padding-top: 18px; border-top: 1px solid var(--accent); }

/* ink: the sentence alone across the page, the second paragraph tucked beside its end */
.pp-what[data-layout="ink"] .chapter-body {
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  column-gap: clamp(32px, 6vw, 120px); row-gap: clamp(28px, 4vw, 56px);
}
.pp-what[data-layout="ink"] [data-ink] + .body-text { grid-column: 2; align-self: end; }

/* offset: a tall head holds on the left while the sentence reads on the right */
@media (min-width: 901px) {
  .pp-what[data-layout="offset"] .chapter-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .pp-what[data-layout="offset"] .chapter-head .display { font-size: var(--step-5); line-height: 0.92; }
}
.pp-what[data-layout="offset"] [data-ink] { font-size: clamp(25px, 0.8rem + 1.9vw, 48px); max-width: 26ch; }
.pp-what[data-layout="offset"] [data-ink] + .body-text { max-width: 52ch; margin-top: clamp(28px, 4vw, 48px); }

@media (max-width: 900px) {
  .pp-what .chapter-body { grid-template-columns: minmax(0, 1fr) !important; }
  .pp-what [data-ink] + .body-text { grid-column: 1 !important; }
}

/* ── 4. how it works: numbered, because it is an order ───────────── */
.pp-how .step { position: relative; padding-top: 26px; }
.pp-how .step h3::before { content: none; }
.pp-how .step::before {
  content: counter(step, decimal-leading-zero);
  display: block; margin-bottom: 14px;
  font: 800 clamp(56px, 2.4rem + 3.6vw, 128px)/0.82 var(--f-disp);
  font-stretch: 125%; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.5px var(--accent);
}
.pp-how .step h3 { font-size: clamp(22px, 1rem + 0.9vw, 32px); }
.pp-how .step p { max-width: 46ch; }
.pp-how-bar { display: none; }

/* pan (desktop, with project.js): the steps pan past while the section holds */
html.pp-h .pp-how[data-layout="pan"] {
  height: 100vh; overflow: hidden;
  padding-block: calc(var(--nav-h) + 24px) 56px;
  display: flex; align-items: center;
}
html.pp-h .pp-how[data-layout="pan"] > .wrap { width: calc(100% - 2 * var(--mx)); max-width: none; }
html.pp-h .pp-how[data-layout="pan"] .chapter-grid { grid-template-columns: minmax(0, 0.3fr) minmax(0, 1fr); align-items: center; }
html.pp-h .pp-how[data-layout="pan"] .chapter-grid > .chapter-head { order: 0; position: static; }
html.pp-h .pp-how[data-layout="pan"] .chapter-body { order: 1; clip-path: inset(-100vh -100vw -100vh 0); }
html.pp-h .pp-how[data-layout="pan"] .steps { display: flex; flex-wrap: nowrap; gap: 0; width: max-content; padding-right: 12vw; will-change: transform; }
html.pp-h .pp-how[data-layout="pan"] .step {
  flex: 0 0 clamp(400px, 36vw, 620px);
  border-top: 0; border-left: 1px solid var(--line-2);
  padding: 0 clamp(28px, 3vw, 56px);
}
html.pp-h .pp-how[data-layout="pan"] .step:has(.shot-fig) { flex-basis: clamp(480px, 46vw, 780px); }
html.pp-h .pp-how[data-layout="pan"] .step p { max-width: 40ch; font-size: var(--step-1); line-height: 1.55; }
html.pp-h .pp-how[data-layout="pan"] .step .frame.shot img { max-height: 40vh; object-fit: contain; }
html.pp-h .pp-how[data-layout="pan"] .pp-how-bar {
  display: block; position: absolute; left: var(--mx); right: var(--mx); bottom: 28px; height: 1px; background: var(--line-2);
}
html.pp-h .pp-how[data-layout="pan"] .pp-how-bar::after {
  content: ''; position: absolute; inset: 0; background: var(--accent);
  transform: scaleX(var(--p, 0)); transform-origin: left;
}

/* timeline: a rail down the left fills as the steps pass; on wide screens the
   steps swing out along it */
.pp-how[data-layout="timeline"] .chapter-head .display { font-size: var(--step-3); }
.pp-how[data-layout="timeline"] .chapter-head [data-split] .ln,
.can-reveal .pp-how[data-layout="timeline"] .chapter-head [data-split] .ln { display: inline-block; margin-right: 0.24em; }
.pp-how[data-layout="timeline"] .steps {
  --fill: 1;
  position: relative; gap: clamp(56px, 10vh, 120px);
  padding-left: clamp(64px, 9vw, 150px);
}
.pp-how[data-layout="timeline"] .steps::before,
.pp-how[data-layout="timeline"] .steps::after {
  content: ''; position: absolute; top: 8px; bottom: 8px; left: clamp(22px, 3vw, 52px); width: 2px; background: var(--line-2);
}
.pp-how[data-layout="timeline"] .steps::after { background: var(--accent); transform: scaleY(var(--fill)); transform-origin: top; }
.pp-how[data-layout="timeline"] .step { border-top: 0; padding-top: 0; max-width: 620px; }
.pp-how[data-layout="timeline"] .step::before {
  position: absolute; left: calc(-1 * clamp(64px, 9vw, 150px) + clamp(22px, 3vw, 52px)); top: -4px;
  transform: translateX(-50%);
  margin: 0; padding: 6px 0;
  font-size: clamp(30px, 1rem + 1.6vw, 48px); background: var(--bg-deep);
  transition: color 0.5s var(--ease);
}
.pp-how[data-layout="timeline"]:not(.band) .step::before { background: var(--bg); }
.pp-how[data-layout="timeline"] .step.is-on::before { color: var(--accent); }
@media (min-width: 1100px) {
  .pp-how[data-layout="timeline"] .step:nth-child(2) { margin-left: 16vw; }
  .pp-how[data-layout="timeline"] .step:nth-child(3) { margin-left: 32vw; }
}

/* sticky (desktop, with project.js): the step number holds on the left, the
   steps scroll by on the right, the one in view lit */
.pp-count { display: none; }
@media (min-width: 1024px) {
  .pp-how[data-layout="sticky"] .chapter-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .pp-how[data-layout="sticky"] .chapter-grid > .chapter-head { order: 0; }
  .pp-how[data-layout="sticky"].is-live .pp-count {
    display: flex; align-items: baseline; gap: 10px; margin-top: clamp(16px, 4vh, 48px);
    font: 800 clamp(120px, 4rem + 10vw, 280px)/0.8 var(--f-disp); font-stretch: 125%; letter-spacing: -0.05em;
    color: transparent; -webkit-text-stroke: 2px var(--accent);
    height: 0.82em; overflow: hidden;
  }
  .pp-how[data-layout="sticky"].is-live .pp-count span { display: block; }
  .pp-how[data-layout="sticky"].is-live .pp-count i {
    font: 600 var(--step-1)/1 var(--f-sans); font-style: normal; color: var(--text-3); -webkit-text-stroke: 0; letter-spacing: 0;
  }
  .pp-how[data-layout="sticky"].is-live .step::before { display: none; }
  .pp-how[data-layout="sticky"].is-live .steps { gap: 0; }
  .pp-how[data-layout="sticky"].is-live .step {
    min-height: 64vh; display: flex; flex-direction: column; justify-content: center; gap: 14px;
    border-top: 0; padding: 0;
    opacity: 0.22; transition: opacity 0.6s var(--ease);
  }
  .pp-how[data-layout="sticky"].is-live .step.is-on { opacity: 1; }
  .pp-how[data-layout="sticky"].is-live .step h3 { font-size: clamp(30px, 1rem + 2.2vw, 56px); line-height: 1.04; max-width: 16ch; }
  .pp-how[data-layout="sticky"].is-live .step p { font-size: var(--step-1); line-height: 1.55; }
}

/* bento: one large step on the accent's ground, two small beside it */
.pp-how[data-layout="bento"] .chapter-head .display { font-size: var(--step-3); }
.pp-how[data-layout="bento"] .chapter-head [data-split] .ln,
.can-reveal .pp-how[data-layout="bento"] .chapter-head [data-split] .ln { display: inline-block; margin-right: 0.24em; }
.pp-how[data-layout="bento"] .steps { gap: var(--gap); }
.pp-how[data-layout="bento"] .step { border-top: 0; padding: clamp(24px, 2.6vw, 44px); align-content: start; }
.pp-how[data-layout="bento"] .step:nth-child(1) { background: color-mix(in srgb, var(--accent) 14%, var(--bg-raise)); align-content: end; }
.pp-how[data-layout="bento"] .step:nth-child(1)::before { font-size: clamp(110px, 4rem + 8vw, 240px); color: var(--accent); -webkit-text-stroke: 0; }
.pp-how[data-layout="bento"] .step:nth-child(1) h3 { font-size: clamp(28px, 1rem + 1.8vw, 48px); max-width: 14ch; }
.pp-how[data-layout="bento"] .step:nth-child(2) { background: var(--bg-raise); }
.pp-how[data-layout="bento"] .step:nth-child(3) { border: 1px solid var(--line-2); }
@media (min-width: 901px) {
  .pp-how[data-layout="bento"] .steps { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .pp-how[data-layout="bento"] .step:nth-child(1) { grid-row: span 2; min-height: clamp(440px, 60vh, 640px); }
}

/* ── 5. the result ────────────────────────────────────────────────── */
.pp-result .chapter-body > .lead {
  max-width: 36ch;
  font: 500 clamp(22px, 0.85rem + 1.3vw, 36px)/1.3 var(--f-disp);
  letter-spacing: -0.015em; color: var(--text);
}
html[lang="zh-CN"] .pp-result .chapter-body > .lead { letter-spacing: 0; line-height: 1.55; }
.pp-result .shot-fig { margin-top: clamp(12px, 2vw, 32px); }
.pp-result .frame img, .pp-what .frame img { transition: none; }
/* bleed: the figure runs edge to edge */
.pp-result[data-layout="bleed"] .shot-fig { margin-inline: calc(50% - 50vw); }
.pp-result[data-layout="bleed"] .shot-fig .frame { border-inline: 0; padding-inline: clamp(12px, 4vw, 64px); }
.pp-result[data-layout="bleed"] .shot-fig .fig-cap { padding-inline: var(--mx); }
/* statement: the result alone, set large */
.pp-result[data-layout="statement"] .chapter-body > .lead {
  max-width: 28ch;
  font: 560 clamp(28px, 1rem + 2.4vw, 62px)/1.14 var(--f-disp);
  font-stretch: 106%; letter-spacing: -0.025em;
}

/* ── 6. what I learned ────────────────────────────────────────────── */
.pp-learn .lesson h3::before { content: none; }
.pp-learn .lessons { margin-top: 0; }

/* stack: sheets that stack as you read */
@media (min-width: 901px) {
  .pp-learn[data-layout="stack"] > .wrap {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(32px, 6vw, 120px); align-items: start;
  }
  .pp-learn[data-layout="stack"] .sec-head { position: sticky; top: calc(var(--nav-h) + 40px); margin-bottom: 0; }
}
.pp-learn[data-layout="stack"] .lessons { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 4vh, 48px); }
.pp-learn[data-layout="stack"] .lesson {
  --i: 0;
  position: sticky; top: calc(var(--nav-h) + 40px + var(--i) * 22px);
  min-height: clamp(240px, 42vh, 420px);
  padding: clamp(26px, 3vw, 52px);
  align-content: space-between;
  background: var(--bg-raise);
  border: 1px solid var(--line-2); border-top: 2px solid var(--accent);
  transform-origin: 50% 0;
}
.pp-learn[data-layout="stack"] .lesson:nth-child(2) { --i: 1; }
.pp-learn[data-layout="stack"] .lesson:nth-child(3) { --i: 2; }
.pp-learn[data-layout="stack"] .lesson > * { opacity: calc(1 - var(--pp-dim, 0)); }
.pp-learn[data-layout="stack"] .lesson h3 { font-size: clamp(26px, 1rem + 1.5vw, 44px); max-width: 18ch; }
.pp-learn[data-layout="stack"] .lesson p { font-size: var(--step-1); line-height: 1.55; max-width: 46ch; }
@media (max-width: 900px) {
  .pp-learn[data-layout="stack"] .lesson { top: calc(var(--nav-h) + 16px + var(--i) * 14px); }
}

/* index: one row per lesson, the title set large */
.pp-learn[data-layout="index"] .lessons { grid-template-columns: minmax(0, 1fr); gap: 0; }
.pp-learn[data-layout="index"] .lesson {
  padding-block: clamp(28px, 4vw, 60px) clamp(8px, 1vw, 16px);
  border-top: 1px solid var(--line-2);
}
.pp-learn[data-layout="index"] .lesson h3 {
  font-size: clamp(28px, 1rem + 2.5vw, 64px); line-height: 1.02; letter-spacing: -0.03em; max-width: 17ch;
  transition: color 0.3s, transform 0.6s var(--ease);
}
.pp-learn[data-layout="index"] .lesson p { font-size: var(--step-1); line-height: 1.55; max-width: 46ch; }
@media (min-width: 901px) {
  .pp-learn[data-layout="index"] .lesson { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 96px); align-items: baseline; }
}
@media (hover: hover) and (pointer: fine) {
  .pp-learn[data-layout="index"] .lesson:hover h3 { color: var(--accent); transform: translateX(10px); }
}

/* duo: two lessons side by side, the second set lower */
.pp-learn[data-layout="duo"] .lesson { padding-top: 26px; border-top: 2px solid var(--accent); }
.pp-learn[data-layout="duo"] .lesson h3 { font-size: clamp(28px, 1rem + 2vw, 54px); line-height: 1.04; max-width: 15ch; }
.pp-learn[data-layout="duo"] .lesson p { font-size: var(--step-1); line-height: 1.55; }
@media (min-width: 901px) {
  .pp-learn[data-layout="duo"] .lessons { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 7vw, 140px); }
  .pp-learn[data-layout="duo"] .lesson:nth-child(2) { margin-top: clamp(80px, 14vw, 240px); }
}

/* snap: cards to swipe through, with buttons for a mouse */
.pp-learn[data-layout="snap"] .lessons {
  display: flex; gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin-right: calc(-1 * var(--mx)); padding: 4px var(--mx) 16px 0;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.pp-learn[data-layout="snap"] .lesson {
  flex: 0 0 min(80vw, 460px); scroll-snap-align: start;
  min-height: clamp(260px, 38vh, 380px); align-content: space-between;
  padding: clamp(24px, 2.6vw, 40px);
  background: var(--bg-raise); border-top: 2px solid var(--accent);
}
.pp-learn[data-layout="snap"] .lesson h3 { font-size: clamp(24px, 1rem + 1.2vw, 36px); }
.pp-snap-nav { display: flex; gap: 8px; margin-top: 20px; }
.pp-snap-nav button {
  width: 48px; height: 48px; display: grid; place-items: center;
  color: var(--text); background: transparent; border: 1px solid var(--line-2);
  transition: border-color 0.2s, color 0.2s, opacity 0.2s, transform 160ms var(--ease-out);
}
.pp-snap-nav button:active { transform: scale(0.97); }
.pp-snap-nav button:disabled { opacity: 0.35; }
.pp-snap-nav svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .pp-snap-nav button:not(:disabled):hover { border-color: var(--accent); color: var(--accent); } }

/* ── 7. the closing call ──────────────────────────────────────────── */
.pp-cta { overflow: hidden; }
.pp-marquee {
  margin-bottom: clamp(28px, 4vw, 64px);
  font: 800 clamp(76px, 3rem + 9vw, 236px)/1 var(--f-disp);
  font-stretch: 125%; letter-spacing: -0.05em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--text) 28%, transparent);
  user-select: none; pointer-events: none;
}
.pp-marquee:empty { display: none; }
.pp-mq-track { display: inline-flex; align-items: baseline; gap: 0.32em; padding-left: var(--mx); }
.pp-mq-track i { font-style: normal; font-weight: 300; color: var(--accent); -webkit-text-stroke: 0; }
html[lang="zh-CN"] .pp-marquee { letter-spacing: 0; font-stretch: 100%; }
.pp-cta .display { font-size: var(--step-4); }
/* block: a full-width panel in the page's colour */
.pp-cta[data-layout="block"] { background: color-mix(in srgb, var(--accent) 13%, var(--bg)); padding-block: clamp(80px, 12vw, 200px); }
.pp-cta[data-layout="block"] .cta-inner { border-top: 0; padding-top: 0; align-items: end; }
.pp-cta[data-layout="block"] .display { font-size: var(--step-5); line-height: 0.94; max-width: 11ch; }

/* ── 8. previous / next, set as large as the titles they lead to ─── */
body[data-pp] .pn-card { padding-block: clamp(26px, 3vw, 44px) 6px; }
body[data-pp] .pn-card .card-t {
  font: 750 clamp(30px, 0.8rem + 3vw, 72px)/1 var(--f-disp);
  font-stretch: 118%; letter-spacing: -0.035em;
  transition: color 0.3s, transform 0.6s var(--ease);
}
html[lang="zh-CN"] body[data-pp] .pn-card .card-t { letter-spacing: 0; }
html[lang="zh-CN"] .pp-learn .lesson h3, html[lang="zh-CN"] .pp-how .step h3 { letter-spacing: 0; line-height: 1.3; }
@media (hover: hover) and (pointer: fine) {
  body[data-pp] .pn-prev:hover .card-t { transform: translateX(-10px); }
  body[data-pp] .pn-next:hover .card-t { transform: translateX(10px); }
  body[data-pp] a.pn-card:hover::before { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .pp-learn[data-layout="stack"] .lesson { position: relative; top: auto; }
}