.wrench-project { max-width: 1120px; margin: 0 auto; padding: 2rem 24px; color: var(--text-color); }
.wrench-project header { text-align: center; margin-bottom: 2rem; }
.wrench-project h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.25; text-wrap: balance; margin: 1rem 0; }
.wrench-project h1 span { font-size: .86em; }
.wrench-project .project-status { color: var(--text-secondary); font-weight: 700; }
.wrench-project nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; }
.wrench-project nav a { min-height: 44px; display: inline-flex; align-items: center; }
.wrench-project section { padding: 1.5rem 0; scroll-margin-top: 5rem; }
.wrench-project h2 { font-size: 1.65rem; text-align: center; margin-bottom: 1rem; text-wrap: balance; }
.wrench-project h3 { font-size: 1.2rem; margin: 0 0 .75rem; text-align: center; }
.wrench-project .project-prose, .wrench-project figcaption { text-align: justify; text-align-last: start; line-height: 1.65; overflow-wrap: break-word; }
.wrench-project .project-prose { margin-bottom: 1.25rem; }
.wrench-project figure { min-width: 0; margin: 0; }
.wrench-project video { display: block; width: 100%; height: auto; aspect-ratio: 16/9; background: #171a1d; }
.wrench-project figcaption { margin: .8rem 0 0; color: var(--text-secondary); font-family: "CMU Sans Serif", sans-serif; font-size: 1rem; }
.wrench-project .task-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: .75rem 1.25rem; }
.wrench-project .task-grid figure { display: grid; grid-row: span 3; grid-template-rows: subgrid; margin-bottom: 1rem; }
.wrench-project .task-grid h3 { margin: 0; align-self: end; }
.wrench-project .task-grid figcaption { margin: 0; text-align: left; line-height: 1.5; }
.wrench-project .task-media { position: relative; align-self: start; }
.wrench-project .task-expand { pointer-events: auto; bottom: 6px; right: 6px; }
.wrench-project .task-expand:hover { opacity: 1; color: #fff; }
.wrench-project .task-expand:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 768px) {
  .wrench-project { padding: 1.5rem 16px; }
  .wrench-project h2 { font-size: 1.4rem; }
  .wrench-project .task-grid { gap: .75rem 1rem; }
}
@media (max-width: 420px) {
  .wrench-project { padding-inline: 12px; }
  .wrench-project h1 { font-size: 1.5rem; }
  .wrench-project nav { column-gap: 1rem; }
  .wrench-project .task-grid { grid-template-columns: 1fr; }
}


.human-workspace-project video { aspect-ratio: 12 / 5; }
.workspace-views { display: grid; grid-template-columns: 1fr 1fr; text-align: center; color: var(--text-secondary); margin-bottom: .6rem; }