/* Project pages — extends style.css (pages generated by tools/build_projects.py) */
@media (max-width: 700px) { .header__nav--always { display: flex; } }

.pj-hero {
  padding: 22vh var(--gutter) clamp(48px, 6vw, 96px);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: 28px;
}
.pj-hero > .label { grid-column: 1 / -1; }
.pj-hero .display { grid-column: 1 / -1; font-size: clamp(3.2rem, 11vw, 13rem); }
.pj-info { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; margin-top: clamp(24px, 4vw, 64px); align-items: start; }
.pj-info .lead { grid-column: 1 / 7; }
.pj-facts { grid-column: 8 / -1; display: grid; grid-template-columns: repeat(4, auto); gap: 18px 32px; margin: 0; justify-content: end; }
.pj-facts dd { margin: 6px 0 0; }

/* steady rhythm: two verticals, then one horizontal */
.pj-gallery {
  --gap: clamp(8px, 1.1vw, 18px);
  display: flex; flex-direction: column; gap: var(--gap);
  padding: 0 var(--gutter) var(--space);
}
.pj-row { display: grid; gap: var(--gap); }
.pj-row--pp, .pj-row--ll { grid-template-columns: 1fr 1fr; }
.pj-row--ppp { grid-template-columns: repeat(3, 1fr); }
.pj-row--p { width: calc(50% - var(--gap) / 2); margin: 0 auto; }
.pj-row--mix { display: flex; }
.pj-row--mix .media { flex: var(--r) 1 0%; }

.pj-next { display: grid; gap: 24px; padding: var(--space) var(--gutter); border-top: 1px solid var(--line); }
.pj-next .display { transition: transform 1.2s var(--ease); }
.pj-next:hover .display { transform: translateX(2vw); }
.page-project .footer { padding-top: 24px; }

@media (max-width: 1024px) {
  .pj-info .lead { grid-column: 1 / -1; }
  .pj-facts { grid-column: 1 / -1; justify-content: start; margin-top: 32px; }
}
@media (max-width: 700px) {
  .pj-hero { padding-top: 18vh; }
  .pj-facts { grid-template-columns: repeat(2, auto); }
  .pj-gallery { --gap: 6px; padding-left: 6px; padding-right: 6px; }
  .pj-row--ll { grid-template-columns: 1fr; }
  .pj-row--p { width: 100%; }
  .pj-row--mix { flex-direction: column; }
  .pj-row--mix .media { flex: none; }
}