/* Personal projects page (8.10). Extra rules on top of style.css. Tokens only. */

.proj-head { display: grid; gap: 4px; margin-bottom: var(--s2); }
.proj-head h2 { margin: 0; }
.he-title { margin: 0; font-size: var(--t-20); color: var(--color-content-secondary); text-align: left; }
.proj-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: 0 0 var(--s3); padding-top: var(--s2); border-top: 1px solid var(--color-line); }
.proj-meta dt { font-size: var(--t-14); color: var(--color-content-secondary); }
.proj-meta dd { margin: 0; }
.proj-text { max-width: var(--measure); color: var(--color-content-secondary); margin: 0 0 var(--s4); }
.proj-fig { margin: 0; }
.proj-fig img { width: 100%; height: auto; border-radius: var(--radius); background: var(--color-surface-subtle); }
.proj-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); align-items: start; }
.case-main > section + section { padding-top: 0; }
.proj-todo { padding: var(--s6) var(--s3); border: 1px dashed var(--color-line); border-radius: var(--radius); color: var(--color-content-secondary); text-align: center; }
.proj-link { margin: var(--s3) 0 0; }

@media (max-width: 900px) {
  .proj-meta { grid-template-columns: 1fr; gap: var(--s2); }
  .proj-pair { grid-template-columns: 1fr; }
}

.photo-grid { columns: 2; column-gap: var(--s3); }
.photo { margin: 0 0 var(--s3); break-inside: avoid; }
.photo img { width: 100%; height: auto; border-radius: var(--radius); background: var(--color-surface-subtle); }
@media (max-width: 900px) { .photo-grid { columns: 1; } }

/* images 20 percent smaller (8.10): on wide screens every group of images takes 80 percent of the column; phones keep the full width */
@media (min-width: 901px) {
  .case-main .photo-grid, .case-main .proj-pair, .case-main > section > .proj-fig { width: 80%; }
}

/* photography mosaic (8.10): no hole under the tall photo */
.photo-grid--mosaic { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.photo-grid--mosaic .photo { margin: 0; }
.photo-grid--mosaic .photo--tall { grid-row: span 2; position: relative; min-height: 0; }
.photo-grid--mosaic .photo--tall a { position: absolute; inset: 0; display: block; }
.photo-grid--mosaic .photo--tall img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.photo-grid--mosaic .photo--wide { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .photo-grid--mosaic { display: block; }
  .photo-grid--mosaic .photo { margin: 0 0 var(--s3); }
  .photo-grid--mosaic .photo--tall { position: static; }
  .photo-grid--mosaic .photo--tall a { position: static; }
  .photo-grid--mosaic .photo--tall img { height: auto; }
}

/* the glyph set sits on its own black ground, full width */
.photo-grid--mosaic .photo--black { background: #0a0a0a; border-radius: var(--radius); }
.photo-grid--mosaic .photo--black img { width: auto; max-width: 100%; height: 343px; margin: 0 auto; border-radius: 0; background: transparent; }
@media (max-width: 900px) { .photo-grid--mosaic .photo--black img { height: auto; width: 100%; } }

/* spacing between image groups in the final project (8.10): the pair and the figure after it were touching */
.case-main section > .proj-pair + .proj-fig, .case-main section > .proj-fig + .proj-pair { margin-top: var(--s3); }

/* Drawing and painting (8.10): every piece in the same square frame so the two columns end at the same line; the taller face painting is cropped a little at the bottom */
#painting .photo img, #illustrations .photo img { aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 20%; }

/* final project pair (8.10): the animation is cropped to the same proportions as the opening screen, so both images have the same height */
#aging .proj-pair .proj-fig:nth-child(2) img { aspect-ratio: 1781 / 2000; object-fit: cover; }
.proj-link { margin: 0 0 var(--s3); }