@import url("../site-layout-tokens.css?v=20260819-05");

@font-face {
  font-family: "Anton";
  src: url("../assets/fonts/Anton-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --deck-paper: #fff;
  --deck-ink: #090a0a;
  --deck-muted: #5f6466;
  --deck-line: rgba(9, 10, 10, .14);
  --deck-display: Anton, Impact, sans-serif;
  --deck-body: Montserrat, Arial, sans-serif;
  /* Company-page typography roles: chapter H2, supporting H2, H3/card,
     body, compact body, caption and evidence metric. */
  --type-display: clamp(42px, 4.1vw, 74px);
  --type-section: clamp(39px, 3.7vw, 68px);
  --type-card: 22px;
  --type-body: clamp(14px, 1.05vw, 17px);
  --type-body-small: clamp(12px, .97vw, 14px);
  --type-caption: clamp(10px, .76vw, 11px);
  --type-data: clamp(42px, 5vw, 86px);
  font-synthesis: none;
}

/*
 * Intentionally limited to typography and the main palette.
 * The original layout, dimensions, spacing, surfaces and interactions remain untouched.
 */
html,
body {
  background: var(--deck-paper);
}

body.philanthropic-deck {
  background: var(--deck-paper);
  color: var(--deck-ink);
  font-family: var(--deck-body);
}

body.philanthropic-deck.deck-mode header {
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0));
}

/* The footer is shared as an iframe across the five pollutant decks. Keep its
   host screen in the same blue-mist system so no parent background becomes
   visible below the footer while the embedded document settles its height. */
body.philanthropic-deck .screen:has(> iframe[data-deck-footer]) {
  background: #d6e6f1;
}

body.philanthropic-deck .screen > iframe[data-deck-footer] {
  display: block;
  width: 100%;
  min-height: 100vh;
  border: 0;
  background: #d6e6f1;
}

body.philanthropic-deck header.cp-site-nav,
body.philanthropic-deck .cp-mobile-nav,
body.philanthropic-deck .cp-site-nav button,
body.philanthropic-deck .cp-site-nav a,
body.philanthropic-deck .cp-mobile-nav button,
body.philanthropic-deck .cp-mobile-nav a {
  font-family: var(--deck-body);
}

body.philanthropic-deck .cp-nav-applications-toggle,
body.philanthropic-deck .cp-nav-pollutants-toggle,
body.philanthropic-deck .cp-nav-contact {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .055em;
}

body.philanthropic-deck .cp-nav-applications-panel > p,
body.philanthropic-deck .cp-nav-pollutants-panel > p,
body.philanthropic-deck .cp-mobile-nav-body > p {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
}

body.philanthropic-deck .cp-nav-applications-panel a,
body.philanthropic-deck .cp-nav-pollutants-panel a {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
}

html[data-deck-theme-frame] {
  --bg: var(--deck-paper) !important;
  --ink: var(--deck-ink) !important;
  --headline-ink: var(--deck-ink) !important;
  --muted: var(--deck-muted) !important;
  --accent: var(--deck-ink) !important;
  --red: var(--deck-ink) !important;
  --hair: var(--deck-line) !important;
  --stack: var(--deck-body) !important;
  background: var(--deck-paper) !important;
}

html[data-deck-theme-frame] body {
  background-color: var(--deck-paper) !important;
  color: var(--deck-ink) !important;
  font-family: var(--deck-body) !important;
}

html[data-deck-theme-frame] h1,
html[data-deck-theme-frame] h2,
html[data-deck-theme-frame] h3,
html[data-deck-theme-frame] .headline,
html[data-deck-theme-frame] .card-name,
html[data-deck-theme-frame] .big-number,
html[data-deck-theme-frame] .chrome h2 {
  color: var(--deck-ink) !important;
  font-family: var(--deck-display) !important;
  font-weight: 400 !important;
}

html[data-deck-theme-frame] p,
html[data-deck-theme-frame] a,
html[data-deck-theme-frame] button,
html[data-deck-theme-frame] input,
html[data-deck-theme-frame] .body,
html[data-deck-theme-frame] .body-text,
html[data-deck-theme-frame] .caption,
html[data-deck-theme-frame] .sources,
html[data-deck-theme-frame] .label,
html[data-deck-theme-frame] .index-row,
html[data-deck-theme-frame] .legend-title,
html[data-deck-theme-frame] .legend-labels,
html[data-deck-theme-frame] .chart-caption {
  font-family: var(--deck-body) !important;
}

/* Company-page type hierarchy mapped to the pollutant content roles. */
html[data-deck-theme-frame] .headline,
html[data-deck-theme-frame] .chrome h2 {
  font-size: var(--type-display) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

html[data-deck-theme-frame] .health > .grid > .left > .headline {
  font-size: var(--type-section) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

html[data-deck-theme-frame] .card-name {
  font-size: var(--type-card) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

/* All chapter titles use the exact Technology title settings. */
html[data-deck-theme-frame] h1,
html[data-deck-theme-frame] h2,
html[data-deck-theme-frame] h3,
html[data-deck-theme-frame] .headline,
html[data-deck-theme-frame] .card-name,
html[data-deck-theme-frame] .chrome h2 {
  font-family: var(--deck-display) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

/* Technology titles wrap as one continuous sentence. The pollutant hero files
   contain legacy block spans that forced extra lines, so restore natural wrap. */
html[data-deck-theme-frame] .headline > .line {
  display: inline !important;
}

html[data-deck-theme-frame] .headline > .line + .line::before {
  content: " ";
}

html[data-deck-theme-frame] .headline em {
  font-style: normal !important;
  font-weight: 400 !important;
}

html[data-deck-theme-frame] .body,
html[data-deck-theme-frame] .body-text,
html[data-deck-theme-frame] .card-intro,
html[data-deck-theme-frame] .card-impacts p,
html[data-deck-theme-frame] .mechanism,
html[data-deck-theme-frame] .proof-result,
html[data-deck-theme-frame] .proof-text {
  font-size: var(--type-body) !important;
  font-weight: 400 !important;
  line-height: var(--body-line-height) !important;
  letter-spacing: 0 !important;
}

html[data-deck-theme-frame] .card-intro,
html[data-deck-theme-frame] .card-impacts p {
  font-size: var(--type-body-small) !important;
  line-height: var(--body-line-height) !important;
}

html[data-deck-theme-frame] .big-number {
  font-size: var(--type-data) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums;
}

html[data-deck-theme-frame] .caption,
html[data-deck-theme-frame] .sources,
html[data-deck-theme-frame] .chrome-source,
html[data-deck-theme-frame] .chart-caption {
  font-size: var(--type-caption) !important;
  font-weight: 500 !important;
  line-height: var(--caption-line-height) !important;
  letter-spacing: .025em !important;
}

html[data-deck-theme-frame] .chrome-top-left .caption {
  font-size: var(--type-body-small) !important;
  font-weight: 430 !important;
  line-height: var(--body-line-height) !important;
  letter-spacing: 0 !important;
}

/* The final proof chapter carries two large metrics, so it uses the next step down. */
html[data-deck-theme-frame] body[data-deck-section="05"] .headline {
  font-size: var(--type-section) !important;
}

html[data-deck-theme-frame] body[data-deck-section="05"] .big-number {
  font-size: var(--type-data) !important;
}

html[data-deck-theme-frame] body[data-deck-section="05"] .body-text {
  font-size: var(--type-body-small) !important;
  line-height: var(--body-line-height) !important;
}

html[data-deck-theme-frame] body[data-deck-section="05"] .mechanism,
html[data-deck-theme-frame] body[data-deck-section="05"] .proof-result {
  font-family: var(--deck-body) !important;
  font-size: var(--type-body-small) !important;
  font-weight: 430 !important;
  line-height: var(--caption-line-height) !important;
  letter-spacing: -.003em !important;
}

html[data-deck-theme-frame] body[data-deck-section="05"] .proof-source {
  font-family: var(--deck-body) !important;
  font-size: var(--type-caption) !important;
  font-weight: 500 !important;
  line-height: var(--button-line-height) !important;
  letter-spacing: .025em !important;
}

html[data-deck-theme-frame] .legend-title,
html[data-deck-theme-frame] .legend-labels,
html[data-deck-theme-frame] .scale .label,
html[data-deck-theme-frame] .index-row .nm {
  font-size: clamp(12px, 1.02vw, 15px) !important;
  font-weight: 600 !important;
  line-height: var(--eyebrow-line-height) !important;
}

html[data-deck-theme-frame] .scale .compare,
html[data-deck-theme-frame] .index-row .idx,
html[data-deck-theme-frame] .label {
  font-size: var(--type-caption) !important;
  font-weight: 550 !important;
  letter-spacing: .04em !important;
}

html[data-deck-theme-frame] .advocacy-link,
html[data-deck-theme-frame] .back-btn,
html[data-deck-theme-frame] .tc-btn {
  font-size: clamp(11px, .9vw, 13px) !important;
  font-weight: 650 !important;
  letter-spacing: .04em !important;
  line-height: var(--button-line-height) !important;
}

html[data-deck-theme-frame] .headline em,
html[data-deck-theme-frame] .accent,
html[data-deck-theme-frame] [style*="var(--red)"],
html[data-deck-theme-frame] [style*="var(--accent)"] {
  color: var(--deck-ink) !important;
}

html[data-deck-theme-frame] .muted,
html[data-deck-theme-frame] .caption,
html[data-deck-theme-frame] .sources,
html[data-deck-theme-frame] .chart-caption {
  color: var(--deck-muted) !important;
}

/*
 * The five pollutant stories share a left reading column. Their original
 * layouts reserve nearly half the canvas for the visual and then apply a
 * second inset to the text, leaving only ~460–510px of usable measure at a
 * common desktop width. Give the narrative column a deliberate 58% field;
 * the visual retains a generous 42% field and all outer gutters stay intact.
 */
@media (min-width: 881px) {
  html[data-deck-theme-frame] .hero {
    grid-template-columns: 58fr 42fr !important;
  }

  html[data-deck-theme-frame] .hero .copy,
  html[data-deck-theme-frame] .hero .left,
  html[data-deck-theme-frame] .hero .text {
    width: min(100%, 720px) !important;
    max-width: min(100%, 720px) !important;
  }

  html[data-deck-theme-frame] .health > .grid {
    grid-template-columns: 58% 42% !important;
  }

  html[data-deck-theme-frame] .health > .grid > .left {
    padding-left: clamp(52px, 5.5vw, 96px) !important;
    padding-right: clamp(28px, 3.6vw, 60px) !important;
  }

  html[data-deck-theme-frame] .health > .grid > .left .body,
  html[data-deck-theme-frame] .health > .grid > .left .body-text,
  html[data-deck-theme-frame] .health > .grid > .left .card-intro,
  html[data-deck-theme-frame] .health > .grid > .left .card-impacts,
  html[data-deck-theme-frame] .health > .grid > .left .index {
    max-width: min(100%, 680px) !important;
  }

  html[data-deck-theme-frame] .chrome-top-left {
    width: min(58%, 720px) !important;
    max-width: min(58%, 720px) !important;
  }

  html[data-deck-theme-frame] .text-col {
    width: min(58%, 720px) !important;
    max-width: min(58%, 720px) !important;
    padding-left: clamp(52px, 5.5vw, 96px) !important;
    padding-right: clamp(28px, 3.6vw, 60px) !important;
  }

  html[data-deck-theme-frame] section > .copy,
  html[data-deck-theme-frame] section > .content {
    max-width: min(58%, 720px) !important;
    padding-left: clamp(52px, 5.5vw, 96px) !important;
    padding-right: clamp(28px, 3.6vw, 60px) !important;
  }
}

@media (max-width: 880px) {
  :root {
    --type-display: clamp(39px, 10.5vw, 54px);
    --type-section: clamp(36px, 9.6vw, 50px);
    --type-card: 22px;
    --type-body: 13px;
    --type-body-small: 12px;
    --type-caption: 10px;
    --type-data: clamp(42px, 14vw, 72px);
  }

  body.philanthropic-deck .cp-mobile-nav-body > ol > li > a {
    font-size: clamp(24px, 7vw, 34px);
    line-height: 1.02;
  }

  body.philanthropic-deck .cp-mobile-pollutants a {
    font-size: 12px;
    line-height: 1.2;
  }
}

/* Shared horizontal rail migration for same-origin chapter frames. */
@media (min-width: 881px) {
  html[data-deck-theme-frame] .hero {
    padding-right: var(--section-rail-inline-end) !important;
    padding-left: var(--section-rail-inline-start) !important;
  }

  html[data-deck-theme-frame] .chrome-top-left {
    left: var(--section-rail-inline-start) !important;
  }

  html[data-deck-theme-frame] .health > .grid > .left,
  html[data-deck-theme-frame] .text-col,
  html[data-deck-theme-frame] section > .copy,
  html[data-deck-theme-frame] section > .content {
    padding-left: var(--section-rail-inline-start) !important;
  }
}

@media (max-width: 880px) {
  html[data-deck-theme-frame] .hero {
    padding-right: var(--section-rail-inline-end) !important;
    padding-left: var(--section-rail-inline-start) !important;
  }

  html[data-deck-theme-frame] .chrome-top-left {
    left: var(--section-rail-inline-start) !important;
  }

  html[data-deck-theme-frame] .health > .grid > .left,
  html[data-deck-theme-frame] .text-col,
  html[data-deck-theme-frame] section > .copy,
  html[data-deck-theme-frame] section > .content {
    padding-right: var(--section-rail-inline-end) !important;
    padding-left: var(--section-rail-inline-start) !important;
  }

  /* The health chapter flattens its columns with display:contents on phones.
     Reserve the same navigation-safe top edge as other content sections. */
  html[data-deck-theme-frame] .health > .grid {
    padding-top: var(--scroll-section-padding-block) !important;
    box-sizing: border-box;
  }

  html[data-deck-theme-frame] .health > .grid > .left > .headline,
  html[data-deck-theme-frame] .health > .grid > .left > .card {
    padding-right: var(--section-rail-inline-end) !important;
    padding-left: var(--section-rail-inline-start) !important;
    box-sizing: border-box;
  }
}

@media (min-width: 900px) and (max-height: 720px) {
  :root {
    --type-display: clamp(39px, 3.7vw, 68px);
    --type-section: clamp(36px, 3.45vw, 64px);
    --type-card: 22px;
    --type-body: 13px;
    --type-body-small: 12px;
    --type-caption: 10px;
    --type-data: clamp(42px, 5vw, 86px);
  }

  html[data-deck-theme-frame] body[data-deck-section="05"] .proof-list {
    margin-bottom: 4px !important;
  }

  html[data-deck-theme-frame] body[data-deck-section="05"] .proof-item {
    gap: 7px !important;
    padding-block: 1px !important;
  }

  html[data-deck-theme-frame] body[data-deck-section="05"] .proof-mark {
    width: 7px !important;
    height: 7px !important;
    margin-top: 5px !important;
  }
}