.project-panels-page { --project-panel-inset: clamp(20px, 3.5vw, 48px); }
.project-panels-page .project-category { display: inline-block; max-width: 100%; padding: 6px 10px; margin: 0 0 24px; border-radius: 5px; background: #ffffff0d; color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.3; letter-spacing: .02em; }
.project-panels-page .project-story { width: min(660px, calc(100% - var(--project-panel-inset) - var(--project-panel-inset))); margin-right: var(--project-panel-inset); }
.project-panels-page .gallery { gap: 40px 24px; }
.project-panels-page .gallery figure { background: #25282c; padding: var(--project-panel-inset); }
.project-panels-page .gallery-group-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; align-items: start; }
.project-panels-page .gallery-group-item { grid-column: 1 / -1; min-width: 0; }
.project-panels-page .gallery-group-half { grid-column: span 1; }
.project-panels-page .gallery figcaption { color: var(--muted); font-size: 18px; line-height: 1.45; margin-top: 24px; padding-top: 16px; padding-bottom: 0; border-color: #ffffff30; }
.project-panels-page .gallery .caption-text { max-width: 48ch; }
.project-panels-page .caption-heading { display: block; color: #fff; font-weight: 500; }
/* Markdown emphasis in a heading keeps the shared medium title weight. */
.project-panels-page .caption-heading strong { font-weight: inherit; }
.project-panels-page .caption-body { display: block; font-weight: 400; }
.project-panels-page .project-pagination { position: relative; padding: 0; }
.project-panels-page .project-facts:has(+ .project-pagination--split) { margin-bottom: 24px; }
.project-panels-page .project-pagination--split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; border-top: 1px solid var(--line); }
.project-panels-page .project-pagination--split .project-next { min-width: 0; min-height: 148px; padding-block: 24px; color: #83868b; transition: color .2s ease; }
.project-panels-page .project-pagination--split .project-next:focus-visible { color: var(--ink); }
.project-panels-page .project-nav-arrow { display: block; width: clamp(72px, 10vw, 150px); height: auto; }
@media (hover: hover) {
  .project-panels-page .project-pagination--split .project-next:hover { color: var(--ink); }
}
.project-panels-page .project-next--right { align-items: flex-end; text-align: right; }
.project-panels-page .site-footer { margin-top: 0; }
.project-panels-page .project-next { position: relative; isolation: isolate; display: flex; justify-content: center; width: 100%; min-height: 180px; padding-block: 32px; overflow: hidden; }
.project-panels-page .project-next > .eyebrow,
.project-panels-page .next-project-title { position: relative; z-index: 1; }
.project-panels-page .project-next:hover,
.project-panels-page .project-next:focus-visible { text-decoration: none; }
.project-panels-page .project-next:hover .next-project-title,
.project-panels-page .project-next:focus-visible .next-project-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.project-panels-page .next-project-preview { position: absolute; left: 0; top: 0; width: min(420px, 100%); height: 100%; z-index: 0; pointer-events: none; visibility: hidden; opacity: 0; transform: translateX(-8px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 45%, #000 70%, transparent); transition: opacity .35s ease, transform .35s ease, visibility .35s; }
.project-panels-page .next-project-preview img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.project-panels-page .project-next:focus-visible .next-project-preview { visibility: visible; opacity: .3; transform: translateX(0); }
@media (hover: hover) {
  .project-panels-page .project-next:hover .next-project-preview { visibility: visible; opacity: .3; transform: translateX(0); }
}
@media (max-width: 700px) {
  .project-panels-page { --project-panel-inset: 20px; }
  .project-panels-page .project-next { min-height: 150px; }
  .project-panels-page .project-pagination--split .project-next { min-height: 120px; }
  .project-panels-page .gallery-group-half { grid-column: 1 / -1; }
  .project-panels-page .gallery { gap: 24px; }
  .project-panels-page .gallery figcaption { margin-top: 20px; }
}