/* Pattern and custom cases only.
   Chrome, type, and the spec list stay in projects-show.css.
   Straight-plank pages do not link this sheet. */

.pp-page figure { margin: 0; }

.pp-floor,
.pp-point,
.pp-run,
.pp-rest .fx-frame {
  min-width: 0;
  background: var(--fx-sand);
}

.pp-floor {
  width: 100%;
  height: calc(100svh - 64px);
}

.pp-floor img,
.pp-point img,
.pp-run img,
.pp-rest .fx-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pp-brampton .pp-floor img,
.pp-sienna .pp-floor img,
.pp-vaughan .pp-floor img,
.pp-walnut .pp-floor img { object-position: center; }

.pp-linen .pp-floor img { object-position: center 75%; }

.pp-mississauga .pp-floor img { object-position: center 82%; }

.pp-caption,
.pp-sheet {
  padding: clamp(28px, 4vw, 48px) 0 clamp(48px, 6vw, 80px);
}

.pp-caption { background: var(--fx-paper); }

.pp-kicker {
  margin: 0 0 12px;
  color: var(--fx-stone);
  font-family: var(--fx-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.pp-lead {
  max-width: 48ch;
  margin: 16px 0 0;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
  color: var(--fx-ink-soft);
}

.pp-shared {
  max-width: 62ch;
  margin: 18px 0 0;
  color: var(--fx-ink-soft);
}

.pp-page .fx-faq h2 {
  max-width: 18ch;
  font-size: clamp(28px, 3vw, 44px);
}

.pp-page .pp-rest,
.pp-page .pp-sheet,
.pp-page .ps-truth,
.pp-page .fx-faq {
  border-top: 1px solid var(--fx-line);
}

.pp-rest { padding: 8px var(--fx-margin) 0; }

.pp-five,
.pp-three,
.pp-follow,
.pp-pair {
  display: grid;
  gap: 8px;
}

.pp-five .fx-frame,
.pp-three .fx-frame,
.pp-follow__run,
.pp-run { aspect-ratio: 1600 / 1067; }

.pp-follow__point,
.pp-point { aspect-ratio: 1; }

.pp-point,
.pp-follow__point {
  width: 100%;
  margin-left: auto;
}

.pp-pair__tall { aspect-ratio: 1600 / 2133; }

.pp-pair__wide { aspect-ratio: 1600 / 1200; }

.pp-sienna .pp-run img { object-position: center 60%; }

.pp-linen .pp-point img,
.pp-brampton .pp-follow__point img { object-position: center; }

.pp-page .pp-floor.fx-await,
.pp-page .pp-rest .fx-frame.fx-await,
.pp-page .pp-point.fx-await,
.pp-page .pp-run.fx-await,
.pp-page .pp-floor.fx-await img,
.pp-page .pp-rest .fx-frame.fx-await img,
.pp-page .pp-point.fx-await img,
.pp-page .pp-run.fx-await img,
.pp-page .pp-floor.fx-await.is-in,
.pp-page .pp-rest .fx-frame.fx-await.is-in,
.pp-page .pp-point.fx-await.is-in,
.pp-page .pp-run.fx-await.is-in,
.pp-page .pp-floor.fx-await.is-in img,
.pp-page .pp-rest .fx-frame.fx-await.is-in img,
.pp-page .pp-point.fx-await.is-in img,
.pp-page .pp-run.fx-await.is-in img {
  clip-path: none;
  transform: none;
  transition: none;
  animation: none;
}

@media (min-width: 800px) {
  .pp-floor { height: calc(100svh - 80px); }

  .pp-three { grid-template-columns: 1fr 1fr 1fr; }

  .pp-five { grid-template-columns: 1fr 1fr; }

  .pp-five__lead { grid-column: 1 / -1; }

  .pp-follow__point,
  .pp-point { width: 48%; }

  .pp-pair {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: end;
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .pp-five { grid-template-columns: 1fr 1fr 1fr 1fr; }

  .pp-five__lead { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-page .pp-floor,
  .pp-page .pp-rest .fx-frame,
  .pp-page .pp-point,
  .pp-page .pp-run,
  .pp-page .fx-frame img,
  .pp-page .fx-acc summary::after {
    transition: none;
    animation: none;
  }
}