/* An open, editorial layout for the five areas of organizational responsibility. */
body.role-page { background: #f8f7f3; }
.role-shell { max-width: 1200px; padding-inline: 28px; }
.role-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; margin: 24px 0 36px; color: #6b746f; font-size: 13px; line-height: 1.6; }
.role-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: #5e6e75; }
.role-breadcrumb a:hover { color: #8a6837; }
.role-breadcrumb [aria-hidden] { color: #aaa99f; }
.role-breadcrumb [aria-current] { color: #16364a; }
.role-profile { display: grid; grid-template-columns: minmax(0,440px) minmax(0,1fr); align-items: center; gap: clamp(42px,6vw,84px); }
.role-portrait { min-width: 0; margin: 0; }
.role-portrait img { display: block; width: 100%; height: auto; border-radius: 14px; background: #e3e0da; }
.role-portrait figcaption { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 17px; color: #647477; font-size: 12px; letter-spacing: .03em; }
.role-portrait figcaption > span:first-child { color: #8d713f; font-variant-numeric: tabular-nums; }
.role-copy { min-width: 0; padding-bottom: 28px; }
.role-eyebrow { display: block; color: #886936; font-size: 12px; font-weight: 500; letter-spacing: .12em; }
.role-title { margin: 18px 0 22px; color: #102e41; font-size: clamp(38px,4.2vw,56px); font-weight: 550; line-height: 1.35; letter-spacing: -.035em; text-wrap: balance; overflow-wrap: anywhere; }
.role-page--community .role-title { font-size: clamp(30px,3.6vw,46px); }
.role-intent { max-width: 22em; margin: 0 0 27px; color: #304c59; font-size: 21px; font-weight: 400; line-height: 1.75; }
.role-description { margin: 0; color: #576c74; font-size: 15px; line-height: 2; }
.role-keywords { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 0; margin: 28px 0 25px; list-style: none; color: #78623e; font-size: 13px; }
.role-keywords li + li::before { content: ''; display: inline-block; width: 3px; height: 3px; margin: 0 20px 3px 0; border-radius: 50%; background: #bba47f; }
.role-inline-link { display: inline-flex; align-items: center; gap: 19px; min-height: 46px; color: #183d51; font-size: 14px; font-weight: 500; line-height: 1.6; }
.role-inline-link img { flex: 0 0 18px; width: 18px; height: 18px; transition: transform 180ms ease; }
.role-inline-link:hover { color: #876431; }
.role-inline-link:hover img { transform: translateX(3px); }
.role-inline-link--down img { transform: rotate(90deg); }
.role-inline-link--down:hover img { transform: translateY(3px) rotate(90deg); }
.role-focus { display: grid; grid-template-columns: minmax(180px,.7fr) minmax(0,1.7fr); gap: 80px; padding: 96px 0 74px; scroll-margin-top: 28px; }
.role-section-heading h2 { margin: 16px 0 0; color: #16364a; font-size: 30px; font-weight: 500; line-height: 1.55; }
.role-focus-list { list-style: none; margin: 0; padding: 0; }
.role-focus-list li { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 24px; padding: 0 0 28px; }
.role-focus-list li + li { padding-top: 28px; border-top: 1px solid #e3e3d9; }
.role-focus-list li:last-child { padding-bottom: 0; }
.role-focus-index { padding-top: 5px; color: #947743; font-size: 12px; font-variant-numeric: tabular-nums; }
.role-focus-list h3 { margin: 0 0 10px; color: #1c3a4c; font-size: 19px; font-weight: 500; }
.role-focus-list p { max-width: 40em; margin: 0; color: #5e7075; font-size: 14px; line-height: 1.95; }
.role-related { padding: 38px 42px 32px; background: #f0f0e9; border-radius: 14px; }
.role-related-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.role-related h2 { margin: 0; color: #1c3a4c; font-size: 23px; font-weight: 500; line-height: 1.5; }
.role-related-heading p { margin: 0; color: #65736f; font-size: 13px; }
.role-related-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px; }
.role-related-links a { display: grid; grid-template-columns: minmax(0,1fr) 20px; gap: 22px; align-items: center; min-height: 86px; padding: 15px 0 12px; color: #244352; border-top: 1px solid #d9ddcf; }
.role-related-links strong { display: block; margin-bottom: 6px; color: inherit; font-size: 17px; font-weight: 500; }
.role-related-links small { display: block; color: #64736f; font-size: 13px; font-weight: 400; line-height: 1.8; }
.role-related-links img { transition: transform 180ms ease; }
.role-related-links a:hover { color: #8b6837; }
.role-related-links a:hover img { transform: translate(2px,-2px); }
.role-pagination { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 50px; padding: 44px 0 64px; }
.role-pagination a { display: flex; align-items: center; gap: 20px; min-height: 76px; color: #254453; }
.role-pagination small { display: block; color: #6c7977; font-size: 12px; line-height: 1.8; }
.role-pagination strong { display: block; margin-top: 5px; font-size: 17px; font-weight: 500; line-height: 1.5; }
.role-pagination a:hover { color: #876431; }
.role-pagination img { flex: 0 0 20px; }
.role-back img { transform: rotate(180deg); }
.role-next { justify-content: flex-end; text-align: right; }

@media (max-width: 991px) {
  .role-shell { padding-inline: 24px; }
  .role-breadcrumb { margin-block: 18px 24px; }
  .role-profile { grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr); gap: 34px; }
  .role-copy { padding-bottom: 0; }
  .role-title { font-size: 38px; margin-block: 14px 18px; }
  .role-intent { font-size: 18px; margin-bottom: 22px; }
  .role-description { font-size: 14px; }
  .role-keywords { gap: 8px 14px; margin-block: 22px 12px; }
  .role-keywords li + li::before { margin-right: 14px; }
  .role-focus { gap: 45px; padding-block: 72px 56px; grid-template-columns: minmax(160px,.65fr) minmax(0,1.35fr); }
  .role-section-heading h2 { font-size: 27px; }
  .role-related { padding: 30px; }
  .role-related-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .role-related-links { gap: 28px; }
}

@media (max-width: 700px) {
  .role-shell { padding-inline: 20px; }
  .role-breadcrumb { gap: 10px; margin-block: 12px 17px; font-size: 12px; }
  .role-profile { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .role-copy { display: contents; }
  .role-heading { order: 0; }
  .role-portrait { order: 1; width: 100%; max-width: 390px; margin: 4px auto 26px; }
  .role-portrait img { border-radius: 12px; }
  .role-portrait figcaption { margin-top: 13px; font-size: 11px; }
  .role-summary { order: 2; }
  .role-title { font-size: 36px; margin: 12px 0 14px; }
  .role-intent { max-width: 25em; margin-bottom: 22px; font-size: 17px; line-height: 1.75; }
  .role-description { font-size: 14px; line-height: 1.95; }
  .role-keywords { gap: 8px 14px; margin-top: 22px; font-size: 12px; }
  .role-focus { display: block; padding-block: 48px; }
  .role-section-heading { margin-bottom: 28px; }
  .role-section-heading h2 { margin-top: 12px; font-size: 26px; }
  .role-focus-list li { gap: 15px; grid-template-columns: 25px minmax(0,1fr); padding-bottom: 24px; }
  .role-focus-list li + li { padding-top: 24px; }
  .role-focus-list h3 { font-size: 18px; }
  .role-focus-list p { font-size: 14px; }
  .role-related { padding: 26px 22px 15px; border-radius: 12px; }
  .role-related h2 { font-size: 22px; }
  .role-related-heading { margin-bottom: 19px; }
  .role-related-heading p { font-size: 14px; line-height: 1.8; }
  .role-related-links { grid-template-columns: 1fr; gap: 6px; }
  .role-related-links a { gap: 18px; min-height: 92px; padding-block: 18px; }
  .role-related-links strong { font-size: 16px; }
  .role-related-links small { font-size: 14px; }
  .role-pagination { grid-template-columns: 1fr; gap: 0; padding: 24px 0 42px; }
  .role-pagination a { min-height: 86px; gap: 16px; padding-block: 16px; }
  .role-pagination strong { font-size: 16px; }
  .role-next { border-top: 1px solid #e3e3d9; }
}