/* Detailed website implementation guidance, within the shared site grid. */
.design-system { padding-block: 64px; color: var(--primary-color); }
.design-system h1 { margin-bottom: 24px; font-size: clamp(36px, 4vw, 56px); }
.design-system h2 { margin-block: 48px 24px; font-size: 32px; }
.design-system h3 { margin-block: 32px 16px; font-size: 24px; }
.design-system p, .design-system li { max-width: 85ch; line-height: 1.8; }
.design-system a { color: var(--secondary-color); text-decoration: underline; text-underline-offset: 4px; }
.design-system table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; margin-block: 24px; font-size: 14px; }
.design-system th, .design-system td { padding: 16px; text-align: start; border: 1px solid var(--divider-color); min-width: 160px; vertical-align: top; }
.design-system th { background: var(--light-blue); }
.design-system blockquote { border-inline-start: 4px solid var(--secondary-color); padding: 24px; margin-block: 32px; background: var(--light-blue); }
.design-system code { color: var(--primary-color); overflow-wrap: anywhere; }
.design-system :is(a, button):focus-visible { outline: 3px solid var(--secondary-color); outline-offset: 4px; }
@media (max-width: 767px) { .design-system { padding-block: 40px; } }