/* the archetype grid (lesson 03) */
.archgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.arch { border: var(--border-w) solid var(--border-subtle); border-radius: var(--radius-main); overflow: hidden; background: var(--background-2); display: grid; grid-template-rows: auto 1fr; transition: border-color .2s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
.arch:hover { border-color: var(--link); transform: translateY(-4px); }
.arch img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.arch .ab { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: grid; gap: 6px; align-content: start; }
.arch .tt { display: block; } .arch p { margin: 0; color: var(--text-heading); font-size: var(--text-s); } .arch .mono-xxs { color: var(--link); margin-top: 4px; }
.venncol { display: grid; gap: var(--sp-4); align-self: start; position: sticky; top: 140px; }
.venncol .venn { width: 100%; height: auto; } .venncol .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .venncol .pair img { width: 100%; height: auto; aspect-ratio: 480 / 409; border-radius: 4px; display: block; }
.beats3 { display: grid; gap: clamp(48px, 7vw, 120px); } .beats3 .beat { max-width: 520px; }
@media (max-width: 1100px) { .archgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .archgrid { grid-template-columns: repeat(2, 1fr); } .venncol { position: static; } }
@media (max-width: 480px) { .archgrid { grid-template-columns: 1fr; } }