/* outer 9-column grid: sticky text column (title + description + subtitle),
   the vertical rule, then the image stack. The rule now sits at the LEFT edge
   of column 3 rather than flush against the text column, so it reads as
   centred in the gap between text and images. */
.layout {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: var(--gutter);
}

/* Sticky column is viewport-tall and splits into two: the intro block
   (title + description/credits) pinned to the top, the subtitle pinned to
   the bottom. top must equal the header height exactly — the column's own
   natural document position — so it locks from the first pixel of scroll
   AND starts flush with the top of the image beside it. Height is derived
   from the same token so the subtitle lands one gutter off the viewport
   floor. */
.sticky-col {
  grid-column: 1 / 3;
  grid-row: 1;
  align-self: start;
  position: sticky;
  top: var(--header-height);
  height: calc(100vh - var(--header-height) - var(--gutter));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
}

.intro { min-height: 0; }

/* Title sits at the same size as the description. It's now followed
   immediately by the year (tight coupling, small gap), THEN the one-blank-
   line gap (1.25em) down to the description — so the year reads as the
   title's second line, not as its own paragraph.

   text-box trims only the START edge, so the cap-top — not the invisible
   font leading above it — is what lands on the top of the box, putting the
   title flush with the top edge of the first image. Trimming BOTH edges
   would also collapse the box down to the baseline and break the spacing
   below, so the bottom half is deliberately left alone. */
h1 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01rem;
  text-box: trim-start cap;
  margin: 0 0 0.25em;
  text-align: left;
  word-break: break-word;
}

.project-year {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01rem;
  color: var(--muted);
  margin: 0 0 1.25em;
  text-align: left;
}

.project-desc,
.credit-title,
.credit-value {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01rem;
  text-align: left;
  word-break: break-word;
}
.project-desc { margin: 0; }

#creditsBody { margin-top: var(--gutter); }
.credit-group { margin-bottom: 1.29375rem; }
.credit-group:last-child { margin-bottom: 0; }
.credit-title { color: var(--ink); margin: 0; }
.credit-value { color: var(--gray); margin: 0; }

/* Moved down from the nav bar; sits at the foot of the sticky column.
   Trimmed both edges so the alphabetic baseline — not the descender space
   below it — rests on the bottom of the column, as in the frame. */
.project-subtitle {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--muted);
  text-box: trim-both cap alphabetic;
  margin: 0;
  flex: none;
}

/* Overrides .v-divider (which draws on the right edge): this rule is drawn on
   the LEFT edge of column 3 instead, one gutter clear of the text column. */
.divider-1 {
  grid-column: 3 / 4;
  grid-row: 1;
  justify-self: start;
  border-right: none;
  border-left: 0.075rem solid var(--ink);
}

/* Images start one further gutter in, so the rule sits midway between the
   text column and the image edge. */
.content-col {
  grid-column: 3 / 10;
  grid-row: 1;
  padding-left: var(--gutter);
}

.image-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  padding-bottom: var(--gutter);
}
.image-stack img { width: 100%; height: auto; display: block; }

@media (max-width: 900px) {
  .layout { display: block; }
  .sticky-col {
    position: static;
    height: auto;
    display: block;
    margin-bottom: var(--gutter);
  }
  .divider-1 { display: none; }
  .content-col { display: block; padding-left: 0; }
  .project-subtitle { margin-top: var(--gutter); }
}