/* Three equal thirds on the shared 9-column grid: sticky bio | scrolling
   recognitions | sticky portrait. The two rules bracket the middle column —
   divider 1 on its leading edge, divider 2 on its trailing edge — so the
   recognitions text is inset by one gutter on BOTH sides and each rule sits
   midway between the columns it separates. */
.layout {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: var(--gutter);
}

/* top must equal the header height exactly — the column's own natural
   document position — so it pins from the first pixel of scroll and starts
   flush with the top of the portrait beside it. */
.bio-col {
  grid-column: 1 / 4;
  grid-row: 1;
  position: sticky;
  top: var(--header-height);
  align-self: start;
  height: var(--content-height);
}
.bio-col-inner { position: relative; height: 100%; }
.bio-text { min-height: 0; overflow: hidden; }
.footer-credit { position: absolute; left: 0; right: 0; bottom: 0; color: var(--muted); }

/* cap-top of the first line lands on the top of the column, so the bio and
   the recognitions list start level with the top edge of the portrait */
.bio-text p:first-child,
.recognitions-col p:first-child { text-box: trim-start cap; }
/* baseline of the last line rests on the bottom of the column */
.footer-credit p:last-child { text-box: trim-end alphabetic; }

/* .v-divider / .v-divider-start (shared visual style) are combined with
   these for grid position */
.divider-1 { grid-column: 4; grid-row: 1; }
.divider-2 { grid-column: 6; grid-row: 1; }

.recognitions-col {
  grid-column: 4 / 7;
  grid-row: 1;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Award and project lines are set in caps; the source text stays sentence
   case so it remains readable to edit. */
.project-name { text-transform: uppercase; }

.portrait-col {
  grid-column: 7 / 10;
  grid-row: 1;
  position: sticky;
  top: var(--header-height);
  align-self: start;
  height: var(--content-height);
  min-height: 0;
  overflow: hidden;
}
.portrait-col img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .layout { display: block; }
  .bio-col, .portrait-col { position: static; height: auto; margin-bottom: var(--gutter); }
  .footer-credit { position: static; margin-top: var(--gutter); }
  .v-divider, .v-divider-start { display: none; }
  .recognitions-col { padding-left: 0; padding-right: 0; margin-bottom: var(--gutter); }
}