/* ════════════════════════════════════════════════════════════
   WRMP.org — Reusable Site Stylesheet
   ────────────────────────────────────────────────────────────
   Standalone, page-agnostic site chrome for wrmp.org mockups.
   Future page mockups (homepage, science-framework page) link
   this file and reuse every class below — no per-page CSS.

   Contents:
     1. Fonts
     2. Design tokens (:root)
     3. Reset + base
     4. Layout primitives (.site-container, .stack, .cluster, .columns)
     5. Site chrome — header, footer
     6. Components — buttons, kicker, badge, cards, sidebar card,
        tabs, metric card, list card, donut, exhibit cover, dialog
     7. Page sections — generic section wrappers / banded sections
   All values trace to tokens. No hardcoded colors/spacing.
   ════════════════════════════════════════════════════════════ */

/* ═══ 1. Fonts ═══ */
@font-face {
  font-family: "Source Sans Pro";
  src: url("../../shared/fonts/SourceSansPro-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("../../shared/fonts/SourceSansPro-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("../../shared/fonts/SourceSansPro-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif Pro";
  src: url("../../shared/fonts/SourceSerifPro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif Pro";
  src: url("../../shared/fonts/SourceSerifPro-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ═══ 2. Design tokens ═══ */
:root {
  /* Brand colors */
  --color-teal: #228b9c;
  --color-teal-ada: #005e6a;
  --color-orange: #e09337;
  --color-orange-dark: #d66b2c;
  --color-sky: #00acec;
  --color-white: #ffffff;

  /* Grays */
  --gray-050: #fafafa;
  --gray-200: #dcdcdc;
  --gray-400: #989898;
  --gray-500: #7c7c7c;
  --gray-600: #656565;
  --gray-700: #525252;
  --gray-800: #464646;
  --gray-950: #292929;

  /* Semantic color roles */
  --color-text: #292929;
  --color-text-muted: var(--gray-600);
  --color-heading: var(--color-teal-ada);
  --color-link: var(--color-teal-ada);
  --color-border: var(--gray-200);
  --color-band: var(--gray-050);

  /* Spacing scale */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;

  /* Layout */
  --site-max-width: 1400px;
  --site-gutter: 32px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 16px;

  /* Typography */
  --font-body: "Source Sans Pro", "Source Sans 3", Helvetica, Arial, sans-serif;
  --font-display: "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-size-base: 18px;

  /* Elevation */
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ═══ 3. Reset + base ═══ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: var(--color-link);
}
p {
  margin: 0;
}
h1,
h2,
h3,
h4 {
  margin: 0;
}
button {
  font-family: inherit;
  cursor: pointer;
}

/* ═══ 4. Layout primitives ═══ */
.site-container {
  max-width: var(--site-max-width);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.stack--sm {
  gap: var(--space-8);
}
.stack--lg {
  gap: var(--space-24);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
}
.cluster--between {
  justify-content: space-between;
}

.columns {
  display: grid;
  gap: var(--space-32);
}
.columns.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.columns.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.columns.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ═══ 5. Site chrome ═══ */

/* — Header — */
.site-header {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-32);
  min-height: 132px;
  padding-block: var(--space-16);
}
/* Header inner content is full-width: the white bar spans the viewport
   and its logo + nav sit edge-to-edge with only the gutter as padding.
   Override the .site-container max-width cap. */
.site-header .site-header__inner {
  max-width: none;
}
.site-brand {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  text-decoration: none;
}
.site-brand__mark {
  width: 84px;
  height: 84px;
  object-fit: contain;
}
.site-brand__text {
  display: flex;
  flex-direction: column;
}
.site-brand__eyebrow {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal-ada);
  margin-bottom: 2px;
}
.site-brand__wordmark {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-teal-ada);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}
.site-nav__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: 16px;
  font-weight: 600;
  color: #4e4e50;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav__item:hover {
  color: var(--color-teal);
}
.site-nav__item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: var(--color-teal);
}
.site-nav__caret {
  width: 12px;
  height: 12px;
  stroke: var(--gray-500);
}

/* — Footer — */
.site-footer {
  background: var(--color-teal);
  color: var(--color-white);
}
.site-footer__inner {
  display: flex;
  gap: var(--space-64);
  padding-block: var(--space-48);
}
.footer-col--nav {
  width: 240px;
  flex-shrink: 0;
}
.footer-col--subscribe {
  flex: 1;
}
.footer-col--partners {
  width: 360px;
  flex-shrink: 0;
}
.site-footer a {
  color: var(--color-white);
}
.site-footer__logo {
  width: 142px;
  height: auto;
}
.footer-col__heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-white);
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.footer-nav a {
  text-decoration: none;
  font-size: 13px;
  color: var(--color-white);
}
.footer-nav a:hover {
  text-decoration: underline;
}
.footer-newsletter__copy {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: 13px;
  margin-bottom: var(--space-16);
  color: var(--color-white);
}
.footer-newsletter__copy svg {
  width: 18px;
  height: 18px;
  stroke: var(--color-white);
  flex-shrink: 0;
}
.footer-newsletter__form {
  display: flex;
  gap: var(--space-8);
}
.footer-newsletter__input {
  width: 360px;
  min-width: 0;
  padding: var(--space-8);
  border: 1px solid rgba(34, 139, 156, 0.3);
  border-radius: var(--radius-xs);
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-white);
}
.footer-newsletter__input::placeholder {
  color: var(--gray-500);
}
.footer-newsletter__submit {
  padding: var(--space-12) var(--space-8);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-xs);
  color: var(--color-white);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
}
.footer-newsletter__submit:hover {
  background: rgba(255, 255, 255, 0.1);
}
.footer-staffed {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.footer-partner-logo {
  display: block;
  height: 32px;
}

/* ═══ 6. Components ═══ */

/* — Buttons — */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-24);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn--primary {
  background: var(--color-teal);
  color: var(--color-white);
  border-color: var(--color-teal);
}
.btn--primary:hover {
  background: var(--color-teal-ada);
  border-color: var(--color-teal-ada);
}
.btn--outline {
  background: transparent;
  color: var(--color-teal-ada);
  border-color: var(--color-teal);
}
.btn--outline:hover {
  background: var(--color-teal);
  color: var(--color-white);
}
.btn--teal {
  background: var(--color-teal);
  color: var(--color-white);
  border-color: var(--color-teal);
  padding: var(--space-8) var(--space-12);
}
.btn--teal:hover {
  background: var(--color-teal-ada);
  border-color: var(--color-teal-ada);
}
.btn--sky {
  background: var(--color-sky);
  color: var(--color-white);
  border-color: var(--color-sky);
  padding: var(--space-8) var(--space-12);
}
.btn--sky:hover {
  filter: brightness(0.92);
}

/* Sidebar (orange-card) button — white box, orange text, no border */
.btn-sidebar {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: var(--space-8) var(--space-12);
  background: var(--color-white);
  color: var(--color-orange);
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: background 0.2s ease;
}
.btn-sidebar:hover {
  background: rgba(255, 255, 255, 0.9);
}

/* Learn-more button (Get Involved list cards) */
.btn-learn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: var(--space-4) var(--space-8);
  background: var(--color-white);
  color: var(--color-teal);
  border: 2px solid var(--color-teal);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn-learn:hover {
  background: var(--color-teal);
  color: var(--color-white);
}

/* — Section kicker (small-caps eyebrow) — */
.kicker {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.64px;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: var(--space-8);
}
.kicker--orange {
  color: var(--color-orange);
}

/* — Case-study badge — */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.28px;
  text-transform: uppercase;
  background: var(--color-orange-dark);
  color: var(--color-white);
}

/* — Tag chips — */
.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24px;
  text-transform: uppercase;
  background: var(--color-orange);
  color: var(--color-white);
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* — Generic links — */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-link);
  text-decoration: none;
  font-weight: 600;
}
.text-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.text-link svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
}

/* — Image frame (real photos) — */
.media-frame {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-frame--square {
  aspect-ratio: 1 / 1;
}
/* Challenge & Response photo — 400×628 portrait */
.media-frame--challenge {
  aspect-ratio: 400 / 628;
}

/* — Sidebar card (orange) — */
.sidebar-card {
  background: var(--color-orange);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  padding: var(--space-32);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.sidebar-card__label {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: 20px;
  font-weight: 600;
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-white);
}
.sidebar-card__label svg {
  width: 22px;
  height: 22px;
  stroke: var(--color-white);
}
.sidebar-card__body {
  font-size: 16px;
  color: var(--color-white);
}
.sidebar-card__list {
  margin: 0;
  padding-left: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  font-size: 16px;
  color: var(--color-white);
}
.sidebar-card__list li {
  line-height: 1.45;
}

/* — Local CTA box — */
.cta-box {
  background: rgba(0, 172, 236, 0.05);
  border: 1px solid rgba(0, 172, 236, 0.5);
  border-radius: var(--radius-sm);
  padding: var(--space-32);
  max-width: 960px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-12);
}
.cta-box__title {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: 24px;
  font-weight: 600;
  color: var(--color-sky);
}
.cta-box__title svg {
  width: 32px;
  height: 32px;
  stroke: var(--color-sky);
}
.cta-box__body {
  font-size: 16px;
  color: var(--gray-800);
  max-width: 60ch;
}

/* — Metric card — */
.metric-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.metric-card__media {
  position: relative;
  height: 400px;
  overflow: hidden;
}
.metric-card__media > img:not(.metric-card__watermark) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.metric-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(34, 139, 156, 0.6);
}
.metric-card__watermark {
  position: absolute;
  left: var(--space-16);
  bottom: var(--space-16);
  width: 56px;
  height: 56px;
  /* The PNG is a white WRMP mark on a teal ground; screen blend drops
     the teal into the card's teal overlay so only the white mark reads. */
  mix-blend-mode: screen;
  opacity: 0.55;
}
.metric-card__caption {
  padding: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  border-top: 2px solid var(--color-teal);
}
.metric-card__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-950);
  line-height: 1.25;
}
.metric-card__subtitle {
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-400);
}
.metric-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-8);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--gray-500);
}
.metric-card__meta-item {
  white-space: nowrap;
}
.metric-card__meta-label {
  font-weight: 600;
  color: var(--gray-500);
}
.metric-card__meta-item:first-child .metric-card__meta-label {
  color: var(--gray-950);
}
.metric-card__meta a {
  color: var(--color-teal-ada);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.metric-card__meta-date {
  font-style: italic;
  text-align: right;
}
.metric-card__details {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-16);
}
.metric-card__details-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.metric-card__enlarge {
  flex-shrink: 0;
  white-space: nowrap;
}

/* — Tab row — */
.tab-row {
  display: inline-flex;
  background: var(--gray-050);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  gap: var(--space-4);
}
.tab {
  padding: var(--space-8) var(--space-12);
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-teal);
}
.tab[aria-selected="true"] {
  background: var(--color-teal);
  color: var(--color-white);
}

/* — Step card (How We Monitor) — */
.step-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.step-card__media {
  position: relative;
  height: 220px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--gray-050);
  overflow: visible;
}
.step-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.step-card__num {
  position: absolute;
  top: -16px;
  left: -15px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-teal);
  border: 1px solid var(--color-white);
  color: var(--color-white);
  font-size: 18px;
  font-weight: 600;
  z-index: 1;
}
.step-card__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-teal);
}
.step-card__list {
  margin: 0;
  padding-left: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: 14px;
  line-height: 24px;
  color: var(--color-text);
}

/* — Adaptive management cycle diagram — */
.adaptive-cycle {
  width: 100%;
  max-width: 480px;
  height: auto;
}

/* — Monitor info item (Adaptive Management) — */
.info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}
.info-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.info-item__head {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.info-item__head svg {
  width: 26px;
  height: 26px;
  stroke: var(--color-teal);
}
.info-item__title {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-teal);
  line-height: 1.15;
}
.info-item__body {
  font-size: 18px;
  line-height: 28px;
  color: var(--gray-800);
}

/* — List card (Get Involved) — */
.list-group__heading {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.32px;
  text-transform: uppercase;
  color: var(--gray-700);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-24);
}
.list-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-bottom: var(--space-24);
  margin-bottom: var(--space-24);
  border-bottom: 1px solid var(--color-border);
}
.list-card:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.list-card__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-teal);
  line-height: 1.2;
}
.list-card__body {
  font-size: 14px;
  line-height: 22px;
  color: var(--gray-700);
}

/* ═══ 7. Page sections ═══ */
.section {
  padding-block: var(--space-48);
}
.section--tight {
  padding-block: var(--space-48);
}
/* First section after the overlapping hero card — the card already
   carries 32px of its own bottom padding, so the gap to the Intro
   only needs a modest top pad, not a full section block. */
.section--after-hero {
  padding-top: var(--space-32);
  padding-bottom: var(--space-48);
}

/* Contained card block — wraps a section's content in a bordered panel */
.card-block {
  border-radius: var(--radius-sm);
  padding: var(--space-32);
}
.card-block--challenge {
  background: rgba(224, 147, 55, 0.05);
  border: 1px solid rgba(224, 147, 55, 0.5);
}
.card-block--case {
  background: var(--color-band);
  border: 1px solid var(--color-border);
  padding: var(--space-48) var(--space-32);
}

.section-head {
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-48);
}
.section-head--wide {
  max-width: 960px;
}
.section-head--narrow {
  max-width: 720px;
}
.section-head .kicker {
  margin-bottom: var(--space-4);
}
.section-head__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  color: #000;
  line-height: 1.05;
  margin-bottom: var(--space-16);
}
.section-head__intro {
  font-size: 18px;
  line-height: 28px;
  color: var(--color-text);
}

/* Section H2 used inline (not centered) */
.section-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  color: #000;
  line-height: 1.0;
}

/* ─ Full-bleed utility ─
   Breaks an element out of any centered container to span the
   full viewport width. Reusable: hero banners, full-width bands. */
.bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* — Hero banner —
   Full-width section, NOT full-bleed: the hero photo is inset by the
   site gutter (32px) left and right, leaving a white gutter between
   the photo and each viewport edge. Square corners. The hero is the
   positioning context for the overlapping title card. */
.hero {
  position: relative;
  padding-inline: var(--site-gutter);
}
.hero__banner {
  height: 400px;
  width: 100%;
  overflow: hidden;
}
.hero__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─ Overlapping card ─
   A white card that overlaps the bottom of the element above it.
   Reusable hero pattern: the card's left edge aligns with the left
   edge of the centered 1400px content column (the same column the
   body .site-container sections use). The card lives inside .hero,
   which carries its own 32px gutter padding. To align the card's
   white inner edge with the body content column, this rule first
   cancels the hero's gutter (negative margin), making the card's
   box span the full viewport, then caps to the 1400px content
   column and centres it — exactly mirroring .site-container.
   The white card (.title-card__inner) carries no left offset, so
   its edge lands at x=20 on a 1440 viewport, aligned with the body
   sections; its 32px internal padding then puts the H1 at x=52,
   matching the body text.
   Set --overlap-rise (how far it climbs) to tune per page. */
.overlap-card {
  --overlap-rise: var(--space-64);
  --overlap-width: 840px;
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--overlap-rise));
  /* Align the card to the centred 1400px content column, exactly like
     .site-container. The card lives inside .hero (32px gutter), so its
     containing block (100%) is the hero's padded box — narrower than
     the viewport. width is the 1400px column capped to the viewport
     (100vw), so it can be WIDER than the containing block. The inline
     margins are the explicit centring formula (containing − width)/2:
     unlike `margin:auto` this is allowed to resolve negative, so the
     card breaks past the hero's 32px gutter and its left edge lands at
     x=20 on a 1440 viewport — matching every body section below. On
     viewports narrower than the column the margin simply goes to ~0
     and the card spans the full width (a mobile override follows). */
  width: min(100vw, var(--site-max-width));
  margin-inline: calc((100% - min(100vw, var(--site-max-width))) / 2);
}

/* — Title card — breadcrumb + H1 + subtitle inside the white card.
   The white card is the inner element; it carries the white
   background and 32px padding, capped at --overlap-width. */
.title-card__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--overlap-width);
  background: var(--color-white);
  padding: var(--space-32);
}
.breadcrumb {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--space-4);
  font-size: 16px;
  font-weight: 600;
  color: #4e4e50;
  text-decoration: none;
  margin-bottom: var(--space-12);
}
.breadcrumb svg {
  stroke: var(--color-teal);
}
.breadcrumb:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-title {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  color: var(--color-teal);
  line-height: 1.0;
  margin-bottom: var(--space-8);
}
.page-subtitle {
  font-size: 20px;
  line-height: 30px;
  color: var(--color-text-muted);
  max-width: 80ch;
}

/* — Intro two-column — */
.intro-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-32);
  align-items: start;
}
.prose p + p {
  margin-top: var(--space-16);
}
.prose p {
  font-size: 18px;
  line-height: 28px;
}
/* Bold lead-in paragraph (Intro left column first paragraph).
   Scoped to .prose to outrank the `.prose p` size rule. */
.prose p.prose__lead {
  font-size: 22px;
  font-weight: 600;
  line-height: 32px;
  color: var(--gray-950);
}
.prose--body p {
  font-size: 18px;
  line-height: 28px;
}

/* — Split layout (challenge/response) — */
.split-3 {
  display: grid;
  grid-template-columns: 400px 1fr 400px;
  gap: var(--space-32);
  align-items: start;
}

/* — Case study layout — */
.case-study {
  display: grid;
  grid-template-columns: 1fr 600px;
  gap: var(--space-64);
  align-items: center;
}
.case-study--photo-left {
  grid-template-columns: 600px 1fr;
}
.case-study__media {
  width: 100%;
}
.case-study__caption {
  font-size: 14px;
  font-style: italic;
  color: var(--gray-600);
  margin-top: var(--space-8);
  padding-inline: var(--space-8);
}
.case-study__caption--right {
  text-align: right;
}
.case-study__action {
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border);
}

/* — Adaptive management two-column — */
.adaptive-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-64);
  align-items: center;
}

/* — Get Involved three-column — */
.involve-grid {
  display: grid;
  grid-template-columns: 1fr 448px 1fr;
  gap: var(--space-64);
}

/* ════════════════════════════════════════════════════════════
   EXHIBIT COVER — poster component
   Ported from index.html .exhibit-card. Page-agnostic: drop
   into any column. Triggers the exhibit dialog via site.js.
   ════════════════════════════════════════════════════════════ */
.exhibit-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
  border: none;
  text-decoration: none;
  color: inherit;
  background: var(--gray-200);
  box-shadow: var(--shadow-card);
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  isolation: isolate;
}
.exhibit-card:hover,
.exhibit-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  outline: none;
}
.exhibit-card-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.exhibit-card:hover .exhibit-card-image {
  transform: scale(1.04);
}
.exhibit-card-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.4) 32%,
    rgba(0, 0, 0, 0.05) 58%,
    transparent 80%
  );
}
.exhibit-card-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 22px;
  color: #fff;
  text-align: left;
}
.exhibit-card-kicker {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 6px;
}
.exhibit-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  margin: 0;
}
.exhibit-card-dots {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.exhibit-card-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}
.exhibit-card-begin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px 10px 16px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  color: var(--color-teal-ada);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.exhibit-card:hover .exhibit-card-begin,
.exhibit-card:focus-visible .exhibit-card-begin {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.exhibit-card-begin svg {
  width: 14px;
  height: 14px;
  fill: var(--color-teal-ada);
}

/* Optional caption under the exhibit cover */
.exhibit-cover-caption {
  margin-top: var(--space-12);
  font-size: 15px;
  color: var(--color-text-muted);
}

/* ════════════════════════════════════════════════════════════
   EXHIBIT DIALOG — near-fullscreen immersive takeover
   ════════════════════════════════════════════════════════════ */
.exhibit-dialog {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;
}
.exhibit-dialog::backdrop {
  background: rgba(15, 22, 24, 0.88);
  backdrop-filter: blur(2px);
}
.exhibit-dialog__inner {
  position: relative;
  width: 100%;
  height: 100%;
  /* Centre the exhibit so the dark ::backdrop shows around it
     (rather than the exhibit page's own light background filling
     the frame). The surround stays click-to-close. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-32);
}
.exhibit-dialog__iframe {
  /* Sized to the exhibit's own 16:9 footprint (max 1200px wide,
     also capped to viewport height) so no light margin shows. */
  width: min(1200px, 100%, calc((100vh - 64px) * 16 / 9));
  aspect-ratio: 16 / 9;
  height: auto;
  border: none;
  display: block;
  /* Transparent so the dark backdrop shows around the exhibit;
     site.js injects a matching transparent bg into the exhibit doc. */
  background: transparent;
  color-scheme: normal;
  /* Held invisible until site.js confirms the exhibit has loaded and
     its opaque body background has been overridden — otherwise the
     exhibit's light body flashes before that override lands. */
  opacity: 0;
  transition: opacity 0.18s ease;
}
.exhibit-dialog__iframe.is-ready {
  opacity: 1;
}
.exhibit-dialog__close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-teal-ada);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: background 0.2s ease, transform 0.2s ease;
}
.exhibit-dialog__close:hover {
  background: var(--color-white);
  transform: scale(1.06);
}
.exhibit-dialog__close svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2.5;
}

body.is-dialog-open {
  overflow: hidden;
}

/* ═══ Responsive ═══ */
@media (max-width: 1024px) {
  :root {
    --site-gutter: 24px;
  }
  .intro-grid,
  .case-study,
  .case-study--photo-left,
  .adaptive-grid,
  .involve-grid {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }
  .split-3 {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }
  .media-frame--challenge {
    aspect-ratio: 16 / 9;
  }
  .columns.cols-3,
  .columns.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .site-footer__inner {
    flex-wrap: wrap;
    gap: var(--space-32);
  }
}
@media (max-width: 720px) {
  .site-header__inner {
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
  }
  .site-nav {
    flex-wrap: wrap;
    gap: var(--space-12);
  }
  .columns.cols-2,
  .columns.cols-3,
  .columns.cols-4 {
    grid-template-columns: 1fr;
  }
  .footer-col--nav,
  .footer-col--partners,
  .footer-col--subscribe {
    width: 100%;
  }
  .footer-newsletter__input {
    width: 100%;
  }
  .page-title {
    font-size: 36px;
  }
  .section-head__title {
    font-size: 30px;
  }
  /* On phones lean a little less far up into the hero, and let the
     white card fill the available column width. */
  .overlap-card {
    --overlap-rise: var(--space-32);
    --overlap-width: 100%;
  }
}