/* Markham long field, Richmond Hill sequence, and the five shorter straight fields.
   Forest Hill custom order still uses pn-view and pn-two.
   Chrome, type, and the spec list stay in projects-show.css and projects-cases.css. */

.pn-page { overflow-x: clip; }
.pn-page figure { margin: 0; }

.pn-length,
.pn-view,
.pn-cover {
  width: 100%;
  height: calc(100svh - 64px);
}

.pn-length { aspect-ratio: 960 / 1280; }
.pn-view { aspect-ratio: 1600 / 2133; }

.pn-length__run,
.pn-seq,
.pn-seq__rest,
.pn-stack,
.pn-six,
.pn-close {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--fx-line);
}

.pn-length__run .fx-frame,
.pn-seq .fx-frame,
.pn-seq__rest .fx-frame,
.pn-stack .fx-frame,
.pn-six .fx-frame,
.pn-close .fx-frame,
.pn-two .fx-frame,
.pn-length,
.pn-view,
.pn-cover,
.pn-band {
  min-width: 0;
  min-height: 0;
}

.pn-a-960 { aspect-ratio: 960 / 1280; }
.pn-a-wide { aspect-ratio: 1280 / 960; }
.pn-a-2134 { aspect-ratio: 1600 / 2134; }
.pn-a-2133 { aspect-ratio: 1600 / 2133; }
.pn-a-1200 { aspect-ratio: 1600 / 1200; }
.pn-a-2000 { aspect-ratio: 1500 / 2000; }
.pn-a-853 { aspect-ratio: 1280 / 853; }
.pn-a-1067 { aspect-ratio: 1600 / 1067; }
.pn-a-2400 { aspect-ratio: 1600 / 2400; }
.pn-a-43 { aspect-ratio: 1280 / 960; }

.pn-band { aspect-ratio: 1600 / 520; }

.pn-seq > .fx-frame:first-child {
  height: calc(100svh - 64px);
  aspect-ratio: auto;
}

.pn-page .pn-length img,
.pn-page .pn-view img,
.pn-page .pn-cover img,
.pn-page .pn-band img,
.pn-page .pn-length__run img,
.pn-page .pn-seq img,
.pn-page .pn-seq__rest img,
.pn-page .pn-stack img,
.pn-page .pn-six img,
.pn-page .pn-close img,
.pn-page .pn-run img,
.pn-page .pn-two img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
}

.pn-richmond .pn-seq img,
.pn-richmond .pn-seq__rest img { object-position: center 82%; }

.pn-burl .pn-cover img { object-position: center bottom; }

.pn-glue .pn-cover img,
.pn-glue .pn-stack img { object-position: center 88%; }

.pn-nail .pn-cover img {
  inset: auto;
  top: 0;
  right: 0;
  width: 230%;
  height: 230%;
  object-position: right top;
}

.pn-oak .pn-cover img { object-position: center 75%; }
.pn-oak .pn-run img { object-position: center; }

.pn-frost .pn-cover img,
.pn-frost .pn-band img { object-position: center bottom; }

.pn-two {
  display: grid;
  gap: 8px;
  padding: 8px var(--fx-margin) 0;
}

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

@media (min-width: 800px) {
  .pn-length,
  .pn-view,
  .pn-cover { height: calc(100svh - 80px); }

  .pn-seq > .fx-frame:first-child { height: auto; }

  .pn-seq {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    height: calc(100svh - 80px);
  }

  .pn-seq .fx-frame { aspect-ratio: auto; }
  .pn-seq .fx-frame:first-child { grid-column: 1; grid-row: 1 / span 2; }
  .pn-seq .fx-frame:nth-child(2) { grid-column: 2; grid-row: 1; }
  .pn-seq .fx-frame:nth-child(3) { grid-column: 2; grid-row: 2; }

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

@media (min-width: 1024px) {
  .pn-six { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pn-six .fx-frame:first-child,
  .pn-six .fx-frame:nth-child(4),
  .pn-six .fx-frame:nth-child(5) { grid-column: 1 / -1; }

  .pn-close {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pn-page .pn-length,
  .pn-page .pn-view,
  .pn-page .pn-cover,
  .pn-page .pn-band,
  .pn-page .pn-length__run .fx-frame,
  .pn-page .pn-seq .fx-frame,
  .pn-page .pn-seq__rest .fx-frame,
  .pn-page .pn-stack .fx-frame,
  .pn-page .pn-six .fx-frame,
  .pn-page .pn-close .fx-frame,
  .pn-page .pn-two .fx-frame,
  .pn-page .fx-frame img,
  .pn-page .fx-acc summary::after {
    transition: none;
    animation: none;
  }
}