/* Load after visual.css and story.css. This chapter keeps its own composition. */
#community.community-composition {
  background: #fff;
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
#community.community-composition :is(article, aside, figure, header, .community-opening, .north-heading, .north-copy, .funds-layout, .funds-copy, .community-notes) { min-width: 0; }
#community.community-composition .community-opening {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: 28px 8%;
  align-items: end;
}
#community.community-composition .community-opening h2 {
  margin: 0;
  max-width: 12ch;
  font: 400 clamp(2.7rem, 4.5vw, 4.5rem)/1.06 Newsreader, Georgia, serif;
  letter-spacing: -.035em;
}
#community.community-composition .community-opening > p {
  margin: 0;
  max-width: 49ch;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--folio-ink);
}
#community.community-composition .community-opening strong { font-weight: 550; }
#community.community-composition .north-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: 28px 8%;
  align-items: center;
  margin-top: clamp(38px, 5vw, 64px);
}
#community.community-composition .north-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 20px;
  row-gap: 14px;
  align-items: center;
}
#community.community-composition .north-heading h3 {
  margin: 0;
  font: 500 clamp(1.7rem, 2.5vw, 2.2rem)/1.2 var(--sans);
  letter-spacing: -.035em;
}
#community.community-composition .north-heading .project-motif { width: 100px; height: 74px; grid-column: 2; grid-row: 1 / 3; color: #687477; }
#community.community-composition .north-scale {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  line-height: 1.15;
  color: var(--folio-muted);
}
#community.community-composition .north-scale strong { font: 400 clamp(3.2rem, 4.8vw, 4.4rem)/1 Newsreader, Georgia, serif; letter-spacing: -.04em; color: var(--folio-ink); }
#community.community-composition .north-scale span { font-size: 1rem; }
#community.community-composition .north-copy > p { margin: 0; max-width: 51ch; font-size: 1rem; line-height: 1.75; }
#community.community-composition .community-link {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  margin-top: 15px;
  padding: 8px 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--folio-ink);
  text-decoration: underline;
  text-decoration-color: #a5a7a7;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
#community.community-composition .community-link > span { flex: 0 0 auto; color: var(--folio-accent); }
#community.community-composition .community-link:hover { text-decoration-color: currentColor; }
#community.community-composition .funds-showcase { margin-top: clamp(42px, 5.5vw, 72px); }
#community.community-composition .funds-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 24px; }
#community.community-composition .funds-kicker { margin: 0 0 9px; font-size: .9375rem; line-height: 1.5; color: var(--folio-muted); }
#community.community-composition .funds-heading h3 { margin: 0; font: 400 clamp(2rem, 3.2vw, 3rem)/1.1 Newsreader, Georgia, serif; letter-spacing: -.03em; }
#community.community-composition .funds-heading .project-motif { width: 100px; height: 64px; flex: 0 0 auto; color: #687477; }
#community.community-composition .funds-layout { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 6%; align-items: center; }
#community.community-composition .funds-image { margin: 0; }
#community.community-composition .funds-image > a { display: block; }
#community.community-composition .funds-image img { display: block; width: 100%; height: auto; max-width: 100%; border: 1px solid #e3e0d9; }
#community.community-composition .funds-image figcaption { margin-top: 11px; font-size: .8125rem; line-height: 1.55; color: var(--folio-muted); }
#community.community-composition .funds-image figcaption a { display: inline-block; padding: 5px 0; text-decoration: underline; text-underline-offset: 3px; }
#community.community-composition .funds-copy p { margin: 0; max-width: 40ch; font-size: 1rem; line-height: 1.75; }
#community.community-composition .funds-copy p + p { margin-top: 16px; }
#community.community-composition .community-notes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 32px 10%; margin-top: clamp(40px, 5vw, 64px); padding-top: 32px; border-top: 1px solid var(--folio-rule); }
#community.community-composition .community-mentoring h3 { margin: 0; font-size: 1.45rem; font-weight: 500; line-height: 1.25; letter-spacing: -.025em; }
#community.community-composition .community-mentoring-since { margin: 9px 0 16px; font-size: .875rem; line-height: 1.6; color: var(--folio-muted); }
#community.community-composition .community-mentoring > p:not(.community-mentoring-since) { max-width: 48ch; font-size: 1rem; line-height: 1.75; margin: 0; }
#community.community-composition .community-writing { align-self: center; }
#community.community-composition .community-writing > a { display: inline-block; max-width: 100%; padding: 4px 0 8px; font: 400 clamp(1.7rem, 2.3vw, 2.15rem)/1.2 Newsreader, Georgia, serif; letter-spacing: -.025em; text-decoration: underline; text-decoration-color: #bec0bf; text-underline-offset: 6px; text-decoration-thickness: 1px; }
#community.community-composition .community-writing > a > span { font-family: var(--sans); font-size: .7em; color: var(--folio-accent); white-space: nowrap; }
#community.community-composition .community-writing > a:hover { text-decoration-color: currentColor; }
#community.community-composition .community-writing > p { max-width: 45ch; margin: 12px 0 0; font-size: .9375rem; line-height: 1.75; color: var(--folio-muted); }
#community.community-composition .community-off-clock { display: flex; align-items: center; gap: 22px; max-width: 76ch; margin-top: 42px; }
#community.community-composition .community-off-clock svg { display: block; width: 52px; height: 39px; flex: 0 0 auto; color: #687477; }
#community.community-composition .community-off-clock p { margin: 0; font-size: .9375rem; line-height: 1.75; color: var(--folio-muted); }
#community.community-composition .community-off-clock strong { color: var(--folio-ink); font-weight: 550; }

@media (max-width: 1000px) {
  #community.community-composition .funds-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #community.community-composition .funds-copy { max-width: 62ch; }
  #community.community-composition .funds-copy p { max-width: none; }
}
@media (max-width: 760px) {
  #community.community-composition .community-opening,
  #community.community-composition .north-story,
  #community.community-composition .community-notes { grid-template-columns: minmax(0, 1fr); }
  #community.community-composition .community-opening { gap: 24px; }
  #community.community-composition .community-opening h2 { font-size: clamp(2.55rem, 10.5vw, 3.2rem); }
  #community.community-composition .north-story { gap: 22px; }
  #community.community-composition .north-heading { column-gap: 18px; row-gap: 12px; }
  #community.community-composition .north-heading .project-motif { width: 84px; height: 64px; }
  #community.community-composition .north-scale strong { font-size: 3.4rem; }
  #community.community-composition .funds-heading { gap: 18px; margin-bottom: 20px; }
  #community.community-composition .funds-heading .project-motif { width: 78px; height: 54px; }
  #community.community-composition .funds-image figcaption { font-size: .8125rem; }
  #community.community-composition .community-notes { gap: 34px; padding-top: 28px; }
  #community.community-composition .community-writing { align-self: start; }
  #community.community-composition .writing-break { display: none; }
  #community.community-composition .community-off-clock { align-items: start; gap: 16px; margin-top: 36px; }
  #community.community-composition .community-off-clock svg { width: 42px; height: 34px; margin-top: 4px; }
}
@media (max-width: 370px) {
  #community.community-composition .north-heading .project-motif { width: 68px; height: 54px; }
  #community.community-composition .north-heading h3 { font-size: 1.55rem; }
  #community.community-composition .funds-heading .project-motif { width: 65px; height: 46px; }
  #community.community-composition .funds-heading h3 { font-size: 1.95rem; }
}