html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

main,
section,
header,
footer,
nav,
article,
div {
  min-width: 0;
}

.button-primary b,
.header-cta b {
  position: relative;
  display: inline-block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  overflow: visible;
  font-size: 0;
}

.button-primary b::before,
.header-cta b::before {
  content: "↗︎";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 18px;
}

.button-primary b::after,
.header-cta b::after {
  content: none;
}

.document-link b,
.card-copy .read b,
.story-arrow,
.section-more b,
.news-link b,
.news-card.minor b,
.priority-card:first-child .priority-icon {
  font-family: Arial, sans-serif !important;
  font-size: 0 !important;
  line-height: 1;
}

.document-link b::before,
.card-copy .read b::before,
.story-arrow::before,
.section-more b::before,
.news-link b::before,
.news-card.minor b::before,
.priority-card:first-child .priority-icon::before {
  content: "↗︎";
  font-family: Arial, sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
}

.material-attachment a::after {
  content: " ↗︎";
  font-family: Arial, sans-serif;
  font-weight: 400;
}

@media (max-width: 720px) {
  html,
  body,
  body > .demo-banner,
  body > header,
  body > main,
  body > footer,
  main > section {
    width: 100%;
    max-width: 100%;
  }

  .site-header,
  .content-header {
    left: 0;
    right: 0;
  }

  .hero,
  .section,
  .section-dark,
  .news-teaser,
  .contact,
  .content-hero,
  .content-main,
  .org-footer {
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero-content,
  .hero-actions,
  .mission-statement,
  .mission-detail,
  .section-head,
  .priority-grid,
  .evidence-copy,
  .agenda-layout,
  .featured-story,
  .story-list,
  .story-body,
  .news-teaser-copy,
  .news-visual,
  .people-list,
  .contact-content,
  .contact-details,
  .content-toolbar,
  .publication-grid,
  .event-grid,
  .profile-grid,
  .observer-grid,
  .council-list,
  .document-grid,
  .article-shell,
  .article-layout,
  .article-body,
  .gallery-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .hero {
    min-height: max(820px, 100svh);
  }

  .hero h1,
  .hero-copy,
  .mission-statement .display,
  .section-head h2,
  .story-body h3,
  .story-row h3,
  .people-list h3,
  .contact h2,
  .content-hero h1,
  .article-top h1,
  .document-card h3 {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .hero-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-facts div,
  .hero-facts strong {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .year-filter {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .year-filter::-webkit-scrollbar { display: none; }

  .agenda-layout {
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
  }

  .story-image,
  .story-brief {
    width: 100%;
    max-width: 100%;
  }

  .story-row {
    width: 100%;
    max-width: 100%;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
  }

  .story-row > *,
  .story-row > div {
    min-width: 0;
    max-width: 100%;
  }

  .story-row div > span {
    display: block;
    overflow-wrap: anywhere;
  }

  .brief-year strong {
    font-size: clamp(72px, 21vw, 92px);
  }

  .brief-year em {
    font-size: clamp(19px, 5.5vw, 24px);
    overflow-wrap: anywhere;
  }

  .agenda > .section-more,
  .leadership > .section-more,
  .news-link,
  .section-more {
    width: 100%;
    max-width: 100%;
  }

  .news-visual {
    grid-template-columns: minmax(0, 1fr);
  }

  .evidence-image {
    height: auto;
    min-height: 0;
    background: #e8e6df;
  }

  .evidence-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }

  .people-list article {
    grid-template-columns: 35px minmax(0, 1fr);
  }

  .contact-details p {
    font-size: clamp(16px, 4.8vw, 20px);
    overflow-wrap: anywhere;
  }

  .content-header .identity {
    max-width: calc(100vw - 145px);
  }

  .content-header .identity-type small {
    white-space: normal;
  }

  .content-header nav {
    max-width: calc(100vw - 40px);
  }

  .content-hero {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .content-hero h1 {
    font-size: clamp(44px, 12vw, 52px);
    line-height: .94;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .content-hero h1 em {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .content-main {
    padding-top: 60px;
    padding-bottom: 90px;
  }

  .content-toolbar,
  .team-intro,
  .structure-head,
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .featured-publication,
  .event-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-cover,
  .gallery-grid img {
    max-width: 100%;
  }
}

@media (max-width: 420px) {
  .site-header,
  .content-header,
  .hero,
  .section,
  .section-dark,
  .news-teaser,
  .contact,
  .content-hero,
  .content-main,
  .org-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero-facts {
    left: 16px;
    right: 16px;
  }

  .hero h1 { font-size: clamp(49px, 14.5vw, 57px); }
  .story-row { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  .story-row time b { font-size: 31px; }
}