/**** DOCUMENT ****//**** DOCUMENT ****//**** DOCUMENT ****/
body {min-width: 320px; overflow-x: hidden; font-family: var(--font-body); font-size: 18px; line-height: 1.65; color: var(--graphite); background: var(--paper);}
body.menu-open, body.lightbox-open {overflow: hidden;}
main {display: block; min-height: 55vh;}
.container {position: relative; width: min(calc(100% - 112px), var(--container)); margin: 0px auto;}
.section {position: relative; padding: 96px 0px 96px 0px; overflow: hidden;}
.section-large {padding: 128px 0px 128px 0px;}
.section-cool {background: var(--cool-light);}
.narrow-wide {max-width: 1080px;}

/**** TYPOGRAPHY ****//**** TYPOGRAPHY ****//**** TYPOGRAPHY ****/
h1, h2 {font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em;}
h1 {font-size: 56px; line-height: 1.12;}
h2 {font-size: 38px; line-height: 1.2;}
h3 {font-family: var(--font-body); font-size: 24px; line-height: 1.35; font-weight: 700;}
p {max-width: 72ch;}
.lead {font-size: 22px; line-height: 1.55;}
.eyebrow {font-size: 14px; line-height: 1.4; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--coral-dark);}
.prose {max-width: var(--text-column);}
.prose > * + * {margin: 24px 0px 0px 0px;}
.prose h2 {margin: 56px 0px 0px 0px;}
.prose a {color: var(--cobalt-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;}
.section-heading {display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin: 0px 0px 48px 0px;}

/**** ACCESSIBILITY ****//**** ACCESSIBILITY ****//**** ACCESSIBILITY ****/
.skip-link {position: fixed; z-index: calc(var(--z-header) + 20); top: 8px; left: 8px; padding: 12px 18px 12px 18px; color: var(--white); background: var(--cobalt-dark); border-radius: var(--radius-sm); transform: translateY(-160%); transition: transform var(--transition);}
.skip-link:focus {transform: translateY(0px);}
:focus-visible {outline: 3px solid var(--focus); outline-offset: 4px;}
.site-footer :focus-visible, .achievement-band :focus-visible {outline-color: var(--focus-light);}
.sr-only {position: absolute !important; width: 1px !important; height: 1px !important; padding: 0px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0px !important;}

/**** ICONS ****//**** ICONS ****//**** ICONS ****/
.icon {display: inline-flex; width: 24px; height: 24px; flex: 0 0 24px;}
.icon svg {width: 100%; height: 100%;}
