/*      Request ID: 2dba719e3e82d9a9fec4c259550de423_1780879401 (06/07/2026 7:43pm) (VYhJCoAwDEVPZHMkcfg0gTSVJm3x9gquXL2BuBaQ1x484YFmv1hOjKQyMHlTJEPQ1XeVY+UoSqtYbjgFFk7BKHCC5S2/ZkEet77nQzrcHw==)      */



/*      Resource ID: 122ee58cc02feef2da028a6ce30 (styles.css, minified by none) (06/07/2026 7:43pm) (A:9781, B:9781, J:9781, K:9781)      */

/* ==========================================================================
   Public Engagement (PE) augmenting CSS
   Organized: Base → Layout → Components → Utilities → Legacy/Unused flags
   ========================================================================== */


/* ==========================================================================
   1) BASE / PAGE-WIDE OVERRIDES
   ========================================================================== */

/* Wider content wrapper for Public Engagement page */
.page__content--wide {
  max-width: calc(1200px + 10%);
}

/* Override global .content__copy section spacing for PE sections */
.pe-copy section:nth-child(n+2) {
  margin-top: 0;
}

/* ==========================================================================
   2) LAYOUT / RHYTHM
   ========================================================================== */

.pe-band {
  padding: 40px 0;
}

.pe-band .subheader {
  margin-bottom: 14px;
}

.pe-page-end {
  height: 60px;
}

.pe-section {
  margin: 0;
}

.pe-section--wide {
  margin-inline: auto;
  max-width: 1200px;
}

/* Stronger spacing between major blocks */
.pe-stack-32 > * + * {
  margin-top: 32px;
}

.pe-stack-48 > * + * {
  margin-top: 48px;
}

/* Subheader tweaks (slightly bolder for clarity) */
.subheader__title.headline-h2,
.subheader__title.pe-h3 {
  letter-spacing: 0.2px;
}


/* ==========================================================================
   3) PATHWAYS HEADING (BEFORE PATHS GRID)
   ========================================================================== */

.pe-pathways-heading {
  margin-bottom: 40px;
  margin-top: 40px;
  text-align: center;
}

.pe-pathways-heading .pe-h3 {
  margin-top: 0.5em; 
}



/* ==========================================================================
   4) PATHS CARDS (ARTICLE LIST GRID)
   ========================================================================== */

/* Defuse global typographic ul styles for the PATHS cards list (grid container) */
.typographic-content-area #pe-paths {
  list-style: none;
  list-style-position: outside;
  margin: 0;
  padding: 0;
}

/* Re-enable normal bullets for the lists INSIDE each card */
.typographic-content-area #pe-paths .unordered-titled-list--plain {
  list-style: disc;
  list-style-position: outside;
  margin: 0 0 14px;
  padding-left: 1.25em;
}

/* And for modal lists (if they’re plain <ul>) */
.typographic-content-area #pe-paths .pe-modal__content ul {
  list-style: disc;
  list-style-position: outside;
  margin: 0;
  padding-left: 1.25em;
}

/* 4.1 Grid layout */
#pe-paths.article-list.article-list--short {
  display: grid;
  gap: 56px 60px;
  grid-template-columns: 1fr;
  padding-top: 0;
}

@media (min-width: 900px) {
  #pe-paths.article-list.article-list--short {
    grid-template-columns: 1fr 1fr;
  }
}

/* Neutralize legacy article-list floats/flex */
#pe-paths.article-list.article-list--short > .article-list__item {
  flex: 0 0 auto !important;
  float: none !important;
  width: auto !important;
}

/* 4.2 Card container */
#pe-paths .article-list__item {
  background: #fff;
  border: none; /* consolidated: later override removed */
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  display: block;
  margin: 0;
  overflow: hidden;
  padding: 24px;
  position: relative; /* needed for local bottom-sheet modal positioning */
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

#pe-paths .article-list__item:hover,
#pe-paths .article-list__item:focus-within {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

/* Inner wrapper */
#pe-paths .preview__inner {
  flex: 1 0 auto;
}

#pe-paths .preview__inner.wrap-it,
#pe-paths .preview__content-area {
  display: block;
  padding-right: 0;
}

/* Images (optional) */
#pe-paths .preview__image-container,
#pe-paths .preview__image {
  margin-bottom: 12px;
  width: 100%;
}

/* Typography */

/* Override global [id^="widgets"] h4.headline-h4 sizing inside cards */
#pe-paths .preview__title.headline-h4 {
  font-family: HK Grotesk, Arial, sans-serif;
  margin: 0 0 12px 0;
  font-weight: 700;
  font-size: 18px;
  padding: 0;
  line-height: 1.4;
}

#pe-paths .preview__text {
  color: #5e5e5e;
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 10px 0;
}

#pe-paths .preview__text:last-of-type {
  margin-bottom: 8px;
}

/* Section label (“Ways to get started”) */
#pe-paths .headline-h6 {
  color: #7a7a7a;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 16px 0 8px;
  text-transform: none;
}

/* Bulleted list (within card content) */
#pe-paths .unordered-titled-list--plain {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 14px 0;
}

/* Cards: neutralize global typographic-content-area list spacing */
#pe-paths .unordered-titled-list--plain > li {
  line-height: 1.6;
  margin-bottom: 0;
}

#pe-paths .unordered-titled-list--plain > li + li {
  margin-top: 6px;
}


/* Meta text */
#pe-paths .text-meta {
  color: #6f6f6f;
  font-size: 0.92em;
  margin-top: 6px;
}

/* CTA */
#pe-paths .buttons-container {
  margin-top: 14px;
}

#pe-paths .pe-cta {
  line-height: 1;
  margin-bottom: 16px;
  margin-top: 24px;
}

#pe-paths .pe-cta .button {
  min-width: 220px;
  padding-bottom: 20px;
  padding-top: 17px;
  width: fit-content;
}

@media (max-width: 420px) {
  #pe-paths .pe-cta .button {
    min-width: 0;
    width: 100%;
  }
}

/* Divider above the “More examples” trigger (if using the button pattern) */
.pe-card__divider {
  background-color: rgba(255, 205, 0, 1);
  height: 1px;
  margin: 1.125em 0 0.625em;
}

/* “More examples & resources” trigger button (non-details pattern) */
#pe-paths .pe-more-btn {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font-family: "HK Grotesk", sans-serif;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
  gap: 0.35em;
  padding: 0;
  text-decoration: none;
}

#pe-paths .pe-more-btn__chevron {
  font-size: 0.8em;
  transform-origin: center;
  transition: transform 0.2s ease;
}

#pe-paths .pe-more-btn[aria-expanded="true"] .pe-more-btn__chevron {
  transform: rotate(180deg);
}

/* ==========================================================================
   5) CARD-ANCHORED LOCAL MODALS (BOTTOM-SHEET)
   NOTE: consolidated duplicates; uses pe-modal--open / pe-modal--closing
   ========================================================================== */

/* Modal wrapper spans the card; content bottom-left aligned */
.pe-modal[data-local] {
  align-items: flex-end;
  display: flex;
  inset: 0;
  justify-content: flex-start;
  pointer-events: none;
  position: absolute;
  z-index: 20;
}

/* Bottom sheet panel */
.pe-modal[data-local] .pe-modal__content {
  background: #fff;
  border-radius: 8px;
  border-top: 3px solid rgba(255, 205, 0, 0.6);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
  margin-left: 24px;
  margin-right: 24px;
  max-width: 360px;
  opacity: 0;
  padding: 16px 20px 20px;
  pointer-events: auto;
  position: relative;
  transform: translateY(100%);
  transition: opacity 0.25s ease, transform 0.25s ease;
  width: calc(100% - 48px);
}

/* Open / closing states (matches JS) */
.pe-modal[data-local].pe-modal--open .pe-modal__content {
  opacity: 1;
  transform: translateY(0);
}

.pe-modal[data-local].pe-modal--closing .pe-modal__content {
  opacity: 0;
  transform: translateY(100%);
}

/* No overlay in this pattern */
.pe-modal[data-local] .pe-modal__overlay {
  display: none;
}

/* Close button */
.pe-modal__close {
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  position: absolute;
  right: 10px;
  top: 8px;
}



.pe-modal__content {
  font-family: "HK Grotesk", sans-serif;
  font-size: 0.9375rem; /* 15px if base is 16px */
  line-height: 1.55;
}

/* Modal text */
.pe-modal__content h4 {
  font-size: 16px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 12px;
  padding: 0;
}

.pe-modal__content strong {
  font-weight: 600;
}

.pe-modal__content ul {
  line-height: 1.6;
  margin: 0;
  /* padding-left: 20px; */
  margin-top: 0.75em;
  padding-left: 1.25em;
}

.pe-modal__content li {
  margin: 0;
}

/* neutralize global typographic-content-area list spacing */
.pe-modal__content ul > li {
  line-height: 1.6;
  margin-bottom: 0;
}

.pe-modal__content ul > li + li {
  margin-top: 0.6em;
}


/* ==========================================================================
   6) PATHWAYS IN ACTION (PROOF TILES)
   ========================================================================== */

#pe-proof {
  margin: 64px 0 24px;
}

#pe-proof .subheader {
  margin-bottom: 20px;
}

/* Grid */
#pe-proof .pe-proof__grid {
  --tile-gap: 28px;
  display: grid;
  gap: var(--tile-gap);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  margin-inline: auto;
  max-width: 1200px;
  padding: 0;
}

@media (min-width: 640px) {
  #pe-proof .pe-proof__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 980px) {
  #pe-proof .pe-proof__grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* Tile */
#pe-proof .pe-tile {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  margin: 0;
  overflow: hidden;
  padding: 0;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

#pe-proof .pe-tile:has(:focus-visible),
#pe-proof .pe-tile:hover {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

/* Link as block */
#pe-proof .pe-tile__link {
  color: inherit;
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  outline: none;
  text-decoration: none;
}

#pe-proof .pe-tile__link:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 205, 0, 0.6) inset;
}

/* Image (3:2) */
#pe-proof .pe-tile__figure {
  aspect-ratio: 3 / 2;
  background: #f4f4f4;
  margin: 0;
  overflow: hidden;
}

#pe-proof .pe-tile__image {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Content */
#pe-proof .pe-tile__content {
  padding: 14px 16px 16px;
}

#pe-proof .pe-tile__path {
  color: #6b7280;
  font-size: 12px;
  letter-spacing: 0.04em;
  margin: 0 0 6px 0;
  text-transform: uppercase;
}

#pe-proof .pe-tile__title {
  margin: 0 0 6px 0;
}

#pe-proof .pe-tile__desc {
  color: #5e5e5e;
  line-height: 1.55;
  margin: 0 0 10px 0;
}

#pe-proof .pe-tile__cta {
  align-items: center;
  border-bottom: 2px solid rgba(107, 114, 128, 0.35);
  color: inherit;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 0.4em;
  padding-bottom: 2px;
  transition: border-color 0.15s ease;
}

#pe-proof .pe-tile__link:hover .pe-tile__cta,
#pe-proof .pe-tile__link:focus .pe-tile__cta {
  border-color: rgba(0, 0, 0, 0.65);
}

/* ==========================================================================
   7) VIDEO BAND
   ========================================================================== */

#pe-video .pe-video__frame {
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  margin: 0 auto;
  max-width: 960px;
  overflow: hidden;
  width: 100%;
}

#pe-video iframe {
  display: block;
  height: 100%;
  width: 100%;
}


/* ==========================================================================
   8) DIRECTOR SECTION (NEW GRID VERSION)
   NOTE: .pe-avatar is <picture> in your current markup
   ========================================================================== */

.pe-director {
  align-items: start;
  column-gap: 2rem;
  display: grid;
  grid-template-areas:
    "head  media"
    "body  media";
  grid-template-columns: minmax(0, 1fr) 220px;
  row-gap: 0;
}

.pe-director__body {
  grid-area: body;
}

.pe-director__head {
  grid-area: head;
}

.pe-director__media {
  grid-area: media;
  margin: 0;
}

/* Circular crop: clip at picture level */
.pe-avatar {
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  display: block;
  overflow: hidden;
  width: 220px;
}

.pe-avatar > img {
  display: block;
  height: auto;
  width: 100%;
}

@media (max-width: 900px) {
  .pe-director {
    column-gap: 0;
    grid-template-areas:
      "head"
      "media"
      "body";
    grid-template-columns: 1fr;
    row-gap: 0.75rem;
  }

  .pe-avatar {
    width: 180px;
  }
}


/* ==========================================================================
   9) COPY LISTS + WHAT NEXT (EDITORIAL)
   ========================================================================== */

/* One list style used across Getting Started / What Next / Join Us, etc. */
.pe-list {
  margin: 0 0 0.75rem;
  padding-left: 1.1rem;
}

.pe-list li {
  margin: 0.35rem 0;
}

/* What Next: h4 spacing only */
#pe-next .pe-h4 {
  margin: 1.25rem 0 0.5rem;
}


/* ==========================================================================
   10) ASIDES / TYPOGRAPHY UTILITIES
   ========================================================================== */

.aside-highlight {
  border-left: 4px solid #ffcd00;
  color: #555555;
  font-size: 0.95em;
  line-height: 1.6;
  margin: 2rem 0;
  padding-left: 1rem;
}

.aside-highlight a {
  font-weight: 500;
}