.container {
	width: min(var(--rd-max), calc(100% - 32px));
	margin-inline: auto;
}
.section { padding: var(--rd-space-7) 0; }
.section-surface { background: var(--rd-surface); }
.section-title { max-width: 44rem; margin-bottom: var(--rd-space-5); }
.section-title p { color: var(--rd-muted); font-size: var(--rd-fs-lead); }

.stack { display: flex; flex-direction: column; gap: var(--rd-space-4); }

/* Tracks are minmax(0, 1fr), not 1fr. A bare 1fr resolves to minmax(auto, 1fr),
   so a track can never shrink below its content's min-content width — and long
   Turkish compounds ("Dokümantasyonu", "Koordinasyonu") plus card padding pushed
   that above the track at 648px and 1032px, spilling the card past the grid and
   producing a document-level horizontal scrollbar. minmax(0, …) lets the track
   win; overflow-wrap then breaks the word rather than clipping it. This is a
   responsive regression fix for the whole grid system, not a patch for the one
   section where it happened to surface. */
.grid { display: grid; gap: var(--rd-space-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid > * { min-width: 0; }
.grid h3, .grid p { overflow-wrap: break-word; }

@media (max-width: 1024px) {
	.grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.section { padding: var(--rd-space-6) 0; }
	.grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
}

main:focus { outline: none; }

/* Third section treatment. With only .section and .section-surface the page
   alternated between two tones for its whole length; this adds a quieter
   in-between so the rhythm has three steps instead of two. */
.section-tint { background: var(--rd-surface-2); }
.section-tint + .section-tint { border-top: 1px solid var(--rd-border); }