/* Construct Match — Project Types */
.cm.types { padding: clamp(64px, 12vw, 170px) 0 clamp(60px, 10vw, 140px); background: var(--paper); }
.cm .types__head { margin-bottom: clamp(36px, 4vw, 56px); }
.cm .types__rail { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 16px; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.cm .type { display: grid; gap: 18px; align-content: start; text-decoration: none; color: var(--text); }
.cm .type__pic { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r-lg); background: #fff; }
.cm .type__pic img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cm .type__photo { transition: transform 1.2s var(--ease); }
/* the drawing has its own paper background, so it sits fully over the photo */
.cm .type__draw { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease); }
.cm .type.is-built .type__draw, .cm .type:hover .type__draw, .cm .type:focus-visible .type__draw { clip-path: inset(0 0 100% 0); }
/* touch screens: the reveal plays by itself (types.js), slowly enough to watch */
@media (hover: none) {
	.cm .type__draw { transition-duration: 2s; }
}
.cm .type:hover .type__photo { transform: scale(1.03); }
.cm .type__txt { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 6px; }
.cm .type__txt > :not(.type__no) { grid-column: 2; }
.cm .type__txt:not(:has(.type__no)) > * { grid-column: 1 / -1; }
.cm .type__no { grid-row: 1 / span 2; padding-top: 5px; font: 500 12.5px/1 var(--mono); color: var(--navy); }
.cm .type h3 { font: 650 22px/1.15 var(--cm-display); font-stretch: 108%; letter-spacing: -.01em; color: var(--ink); }
.cm .type p { font-size: 15px; line-height: 1.5; color: var(--muted); }

@media (max-width: 1120px) {
	.cm .types__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; }
}
@media (max-width: 600px) {
	.cm .types__rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); gap: 12px; padding: 0 var(--pad) 6px; scrollbar-width: none; }
	.cm .types__rail::-webkit-scrollbar { display: none; }
	.cm .type { flex: 0 0 78%; scroll-snap-align: start; }
}