/* Shared project opening: one viewport, stable masthead and chapters scrolling above the hero. */
.project-viewport-page { --project-masthead-height: 138px; }
.project-masthead { position: sticky; top: 0; z-index: 60; }
.project-masthead .site-header { position: relative; top: auto; }
.project-opening-shell {
  position: sticky;
  top: var(--project-masthead-height);
  z-index: 0;
  isolation: isolate;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  height: calc(100vh - var(--project-masthead-height));
  height: calc(100svh - var(--project-masthead-height));
}
.project-opening-shell,
.project-opening-shell .project-story,
.project-opening-shell .project-opening-stage { background: var(--g5-color-stone, #F2F0EB); }
.project-opening-shell > .project-story { min-height: 0; }
.project-viewport-page .project-opening-stage {
  position: relative;
  top: auto;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
.project-viewport-page .project-intro {
  min-height: 0;
  padding: 24px 0 !important;
}
.project-viewport-page .project-intro > .wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.project-viewport-page .project-back { align-self: flex-start; margin-bottom: 16px; flex-shrink: 0; }
.project-viewport-page .project-intro-grid {
  flex: 1;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.project-viewport-page .project-lead-image {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  cursor: pointer;
}
.project-viewport-page .project-lead-image img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}
.project-viewport-page .project-lead-image figcaption { text-align: left; padding-left: var(--project-opening-caption-offset, 0px); }
.project-viewport-page .project-facts-band { height: var(--project-opening-facts-height, auto); }
.project-viewport-page .project-facts-band > .wrap,
.project-viewport-page .project-facts { height: 100%; }
.project-viewport-page .project-facts > div { display: flex; flex-direction: column; justify-content: center; }
.project-viewport-page .project-facts :is(dt, dd) { flex: 0 0 auto; }
.project-viewport-page .project-lead-image:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.project-viewport-page main.project-story { position: relative; z-index: 1; }
.project-viewport-page .site-footer { position: relative; z-index: 1; }
.project-viewport-page :is(.project-chapter, .site-footer) { scroll-margin-top: var(--project-masthead-height); }
.project-viewport-page .project-story-overlay { box-shadow: none; }
.project-viewport-page .project-support-link { font-style: italic; text-decoration: none; }
.project-viewport-page .project-support-link span { color: var(--accent); font-style: normal; }
.project-viewport-page .project-support-link:hover,
.project-viewport-page .project-support-link:hover span { color: var(--hover-solid); }
.project-viewport-page .project-support-link:focus-visible { outline: 2px solid var(--hover-solid); outline-offset: 4px; }

@media (max-width: 860px) {
  .project-viewport-page .project-intro { padding: 16px 0 !important; }
  .project-viewport-page .project-intro-grid { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; }
  .project-viewport-page .project-intro-copy h1 { margin-bottom: 8px; }
  .project-viewport-page .project-facts > div { padding-block: 16px; padding-inline: 8px; }
}
/* Landscape screens use the space beside the photograph instead of stacking. */
@media (max-width: 860px) and (max-height: 600px) and (orientation: landscape) {
  .project-viewport-page .project-intro-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 24px; }
  .project-viewport-page .project-intro { padding: 8px 0 !important; }
  .project-viewport-page .project-back { margin-bottom: 8px; }
  .project-viewport-page .project-facts > div { padding-block: 8px; }
}
@media (max-height: 450px) and (orientation: landscape) {
  .project-viewport-page .topbar .wrap { height: auto; padding-block: 4px; }
  .project-viewport-page .site-header .wrap { min-height: 64px; }
  .project-viewport-page .site-header .brand img { height: 48px; }
}
@media (max-width: 860px) and (max-height: 350px) and (orientation: landscape) {
  .project-viewport-page .project-intro { padding: 4px 0 !important; }
  .project-viewport-page .project-back { margin-bottom: 4px; }
  .project-viewport-page .project-intro-copy h1 { margin-bottom: 4px; }
}


@media (min-width: 1101px) {
  /* Existing chapter padding gives 96px between chapters; add half again. */
  .project-viewport-page .project-chapter:has(.chapter-number) + .project-chapter:has(.chapter-number) { margin-top: var(--g5-space-12); }
  .project-viewport-page .project-intro-copy h1 { font-size: var(--g5-type-30); }
  .project-viewport-page .project-intro-grid { gap: var(--g5-space-12); }
  .project-viewport-page .project-facts > div { padding-block: var(--g5-space-6); }
}