/* Mission: words first, then the relationship between purpose and public work. */
.mission-hero-links{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin:30px 0 28px}
.mission-origin{border-left:1px solid #867452;padding:28px 0 28px 34px;max-width:370px}
.mission-origin-label{display:block;color:var(--gold2);font:800 .66rem/1.6 system-ui,sans-serif;letter-spacing:.13em;text-transform:uppercase;max-width:240px}
.mission-origin p{font:400 clamp(2.3rem,3.4vw,3.5rem)/1.14 Georgia,serif;letter-spacing:-.04em;margin:28px 0;color:var(--paper)}
.mission-origin p span{display:block;font:300 2rem/1.8 system-ui,sans-serif;color:var(--gold)}
.mission-origin p em{display:block;font-style:normal;color:var(--gold2)}
.mission-origin cite{display:block;color:#c1ccd1;font:400 .73rem/1.7 system-ui,sans-serif;max-width:240px}
body[data-page=mission] [id]{scroll-margin-top:100px}
.mission-intro {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(28px, 6vw, 88px);
  padding-block: clamp(56px, 7vw, 96px);
}
.mission-intro h2,
.mission-visual h2,
.mission-goals-heading h2,
.mission-vow h2,
.mission-invitation h2 {
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.08;
  margin: 0 0 22px;
  font-size: clamp(2.1rem, 4vw, 3.7rem);
  text-wrap: balance;
}
.mission-statement {
  margin: 0 0 24px;
  font: 400 clamp(1.45rem, 2.7vw, 2.15rem)/1.42 Georgia, serif;
  letter-spacing: -.015em;
  color: var(--navy);
  text-wrap: pretty;
}
.mission-lead,
.mission-intro .prose {
  font: 400 1.02rem/1.8 system-ui, sans-serif;
  color: #46525e;
  max-width: 730px;
}
.mission-lead { margin: 0; }
.mission-intro .prose p:first-child { margin-top: 0; }
.mission-intro .prose p:last-child { margin-bottom: 0; }
.mission-signature {
  display: block;
  margin-top: 26px;
  color: #765026;
  font: 800 .7rem/1.5 system-ui, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* The three stages are a qualitative relationship, never a progress chart. */
.mission-visual {
  position: relative;
  padding-block: clamp(56px, 7vw, 88px);
  background: var(--navy);
  color: var(--paper);
  border-block: 1px solid var(--gold);
}
.mission-visual-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 6vw, 84px);
  align-items: end;
  margin-bottom: 48px;
}
.mission-visual-head h2 { margin-bottom: 0; }
.mission-visual-head > p {
  margin: 0 0 4px;
  font: 400 1rem/1.8 system-ui, sans-serif;
  color: #d7e1e7;
  max-width: 520px;
}
.mission-path {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
}
.mission-path-step {
  min-width: 0;
  position: relative;
  padding: 32px 32px 28px 0;
  border-top: 1px solid #6d664f;
}
.mission-path-step + .mission-path-step { padding-left: 32px; }
.mission-path-step::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  height: 9px;
  width: 9px;
  border-radius: 50%;
  background: var(--gold2);
}
.mission-path-step + .mission-path-step::before { left: 32px; }
.mission-path-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: 6px;
  top: 49px;
  color: var(--gold2);
  font: 400 1.45rem/1 system-ui, sans-serif;
}
.mission-step-number {
  display: block;
  margin-bottom: 15px;
  font: 800 .69rem/1.4 system-ui, sans-serif;
  color: var(--gold2);
  letter-spacing: .14em;
}
.mission-path h3 {
  font: 400 clamp(1.6rem, 2.6vw, 2.25rem)/1.16 Georgia, serif;
  letter-spacing: -.025em;
  margin: 0 0 16px;
  max-width: 270px;
}
.mission-path p {
  margin: 0;
  max-width: 310px;
  color: #d7e1e7;
  font: 400 .94rem/1.75 system-ui, sans-serif;
}
.mission-outcome {
  display: grid;
  grid-template-columns: .85fr 1.5fr;
  gap: 28px;
  align-items: center;
  margin-top: 32px;
  padding: 28px 32px;
  border-left: 2px solid var(--gold2);
  background: #112d41;
}
.mission-outcome strong {
  font: 400 clamp(1.4rem, 2.3vw, 1.9rem)/1.22 Georgia, serif;
  color: var(--gold2);
}
.mission-outcome p,
.mission-diagram-note {
  margin: 0;
  color: #d7e1e7;
  font: 400 .91rem/1.7 system-ui, sans-serif;
}
.mission-diagram-note { margin-top: 24px; max-width: 760px; }

/* Sourced goals: an editorial index that opens into why / action / evidence. */
.mission-goals { padding-block: clamp(56px, 8vw, 100px); }
.mission-goals-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 28px;
  margin-bottom: 38px;
}
.mission-goals-heading h2 { margin-bottom: 0; }
.mission-goals-heading > p {
  max-width: 520px;
  margin: 0 0 4px;
  font: 400 .98rem/1.8 system-ui, sans-serif;
  color: #46525e;
}
.mission-goal-list { border-top: 1px solid var(--line); }
.mission-goal { border-bottom: 1px solid var(--line); }
.mission-goal summary {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 38px;
  gap: 20px;
  align-items: center;
  padding: 28px 16px 28px 0;
  cursor: pointer;
  list-style: none;
  border-radius: 0;
}
.mission-goal summary::-webkit-details-marker { display: none; }
.mission-goal summary::marker { content: ""; }
.mission-goal summary:hover .mission-goal-title { color: #765026; }
.mission-goal summary:focus-visible {
  outline: 3px solid var(--navy2);
  outline-offset: -3px;
}
.mission-goal-number {
  align-self: start;
  padding-top: 7px;
  color: #765026;
  font: 400 1.2rem/1.4 Georgia, serif;
}
.mission-goal-title {
  color: var(--navy);
  font: 400 clamp(1.5rem, 2.7vw, 2.2rem)/1.2 Georgia, serif;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.mission-goal-title small,
.mission-goal-type {
  display: block;
  color: #765026;
  font: 800 .64rem/1.5 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 8px;
}
.mission-goal-toggle {
  border: 1px solid #b1966f;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #765026;
  font: 400 1.3rem/1 system-ui, sans-serif;
}
.mission-goal-toggle::before { content: "+"; }
.mission-goal[open] .mission-goal-toggle::before { content: "−"; }
.mission-goal-content {
  margin-left: 78px;
  padding: 0 20px 36px 0;
  max-width: 1000px;
}
.mission-goal-content > p {
  margin: 0 0 26px;
  max-width: 790px;
  font: 400 1.06rem/1.8 system-ui, sans-serif;
  color: #39495a;
}
.mission-goal-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 38px);
  padding-top: 24px;
  border-top: 1px solid #e2d5c3;
}
.mission-goal-columns h3,
.mission-goal-columns dt {
  margin: 0 0 10px;
  color: #765026;
  font: 800 .67rem/1.5 system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mission-goal-columns p,
.mission-goal-columns dd {
  color: #46525e;
  margin: 0;
  font: 400 .92rem/1.8 system-ui, sans-serif;
}
.mission-goal-columns ul {
  margin: 0;
  padding-left: 18px;
  color: #46525e;
  font: 400 .92rem/1.8 system-ui, sans-serif;
}
.mission-source {
  margin-top: 28px;
  padding: 22px 24px;
  border-left: 2px solid #b79463;
  background: var(--cream);
}
.mission-source blockquote {
  margin: 0 0 12px;
  max-width: 780px;
  color: var(--navy);
  font: 400 1.1rem/1.7 Georgia, serif;
}
.mission-source cite,
.mission-source-label,
.mission-source p {
  display: block;
  margin: 0;
  color: #595c60;
  font: 400 .76rem/1.7 system-ui, sans-serif;
}
.mission-source-label {
  margin-bottom: 10px;
  color: #765026;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.mission-source a,
.mission-goal-content a:not(.button),
.mission-vow a:not(.button) {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mission-goals-note {
  margin: 28px 0 0 78px;
  max-width: 790px;
  color: #595c60;
  font: 400 .86rem/1.75 system-ui, sans-serif;
}

/* Public commitments sit apart from the goals they hold accountable. */
.mission-vow {
  padding-block: clamp(56px, 7vw, 88px);
  border-block: 1px solid var(--line);
  background: var(--cream);
}
.mission-vow-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 6vw, 88px);
}
.mission-vow p {
  max-width: 580px;
  font: 400 1rem/1.8 system-ui, sans-serif;
  color: #46525e;
}
.mission-commitments {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #cdbb9f;
}
.mission-commitments li {
  padding: 21px 0;
  border-bottom: 1px solid #cdbb9f;
}
.mission-commitments strong {
  display: block;
  margin-bottom: 7px;
  font: 400 1.35rem/1.3 Georgia, serif;
  color: var(--navy);
}
.mission-commitments p,
.mission-commitments li > span {
  margin: 0;
  display: block;
  font: 400 .93rem/1.8 system-ui, sans-serif;
  color: #46525e;
}
.mission-invitation { padding-block: clamp(56px, 7vw, 88px); }
.mission-invitation .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
}
.mission-invitation h2 { margin-bottom: 12px; max-width: 730px; }
.mission-invitation p:not(.eyebrow) {
  margin: 0;
  max-width: 650px;
  color: #46525e;
  font: 400 1rem/1.8 system-ui, sans-serif;
}
.mission-invitation .button { flex: 0 0 auto; }
.mission-visual a:focus-visible { outline-color: var(--gold2); }

@media (max-width: 900px) {
  .mission-intro,
  .mission-visual-head,
  .mission-goals-heading,
  .mission-vow-grid { grid-template-columns: 1fr; gap: 24px; }
  .mission-visual-head { margin-bottom: 36px; }
  .mission-path-step { padding-right: 22px; }
  .mission-path-step + .mission-path-step { padding-left: 22px; }
  .mission-path-step + .mission-path-step::before { left: 22px; }
  .mission-path h3 { font-size: 1.65rem; }
}
@media(max-width:820px){.mission-origin{margin:0 0 44px;padding:0 0 0 22px;max-width:none}.mission-origin p{font-size:2rem;margin:16px 0}.mission-origin p span{display:inline-block;margin:0 12px;font-size:1.7rem;transform:rotate(-90deg)}.mission-origin p em{display:inline}.mission-origin-label,.mission-origin cite{max-width:none}.mission-hero-links{margin-top:26px}.mission-hero-links .subtle-link{line-height:1.7}}
@media(max-width:820px){body[data-page=mission] .hero-grid{gap:0}body[data-page=mission] .hero-copy{padding-bottom:36px}}
@media(max-width:620px){.mission-origin p{font-size:1.75rem;line-height:1.25}.mission-origin p span{display:block;transform:none;margin:8px 0;font-size:1.3rem;line-height:1.2}.mission-origin p em{display:block}}
@media (max-width: 620px) {
  .mission-path { grid-template-columns: 1fr; }
  .mission-path-step,
  .mission-path-step + .mission-path-step {
    padding: 0 0 36px 28px;
    border-top: 0;
    border-left: 1px solid #6d664f;
  }
  .mission-path-step:last-child { padding-bottom: 0; }
  .mission-path-step::before,
  .mission-path-step + .mission-path-step::before { top: 3px; left: -5px; }
  .mission-path-step:not(:last-child)::after { content: "↓"; top: auto; bottom: 9px; left: 24px; right: auto; font-size: 1.1rem; }
  .mission-step-number { margin-bottom: 9px; }
  .mission-path h3 { max-width: none; font-size: 1.9rem; margin-bottom: 10px; }
  .mission-path p { max-width: none; }
  .mission-outcome { grid-template-columns: 1fr; padding: 24px; gap: 12px; margin-top: 38px; }
  .mission-goal summary { grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 10px; padding: 23px 0; }
  .mission-goal-number { padding-top: 3px; font-size: .95rem; }
  .mission-goal-title { font-size: 1.5rem; }
  .mission-goal-toggle { width: 29px; height: 29px; font-size: 1.15rem; }
  .mission-goal-content { margin-left: 40px; padding: 0 0 28px; }
  .mission-goal-content > p { font-size: .97rem; }
  .mission-goal-columns { grid-template-columns: 1fr; gap: 22px; }
  .mission-source { padding: 18px; margin-top: 24px; }
  .mission-source blockquote { font-size: 1.02rem; }
  .mission-goals-note { margin-left: 40px; }
  .mission-invitation .wrap { display: block; }
  .mission-invitation .button { margin-top: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .mission-goal, .mission-goal * { scroll-behavior: auto; transition: none; animation: none; }
}
