/* The technology page (/tech/): its own pieces over guide-page.css and the :root tokens in style.css. */
.layer-grid, .skill-grid, .point-grid { display: grid; gap: clamp(14px, 2vw, 22px); margin: 0; padding: 0; list-style: none; }
.layer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.skill-grid, .point-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.guide-section > p + .skill-grid { margin-top: clamp(20px, 3vh, 28px); }

.layer-label { display: block; margin-bottom: 6px; color: var(--jade); font-size: 13px; font-weight: 600; letter-spacing: .08em; }
.skill-grid h3 code { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.section-note { margin-top: clamp(20px, 3vh, 28px); }

@media (max-width: 1100px) {
  .layer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .layer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The headline reads as two lines: where it runs, then who decides. */
#tech-title em { display: block; }
#tech-title { text-wrap: balance; }