/* NASA brand tokens, from unfairly.ai/brand-guidelines/nasa (checked 2026-10-30).
   Sizes, spacing and components were measured on https://www.nasa.gov/ (NASA Brand Center guideline pages read 2026-10-30; the Insignia palette read from the published color guide image (https://www.nasa.gov/wp-content/uploads/2023/07/nasa-insignia-colorguide.png); homepage measured with computed styles at 1440 and 390 on 2026-10-30).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name NASA's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #F6F6F6;
  --color-ink: #1B1B1B;
  --color-ink-muted: #58585B;
  --color-accent: #D83933;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #0032A0;
  --color-night: #000000;
  --color-on-night: #FFFFFF;
  --color-nasa-blue: #0032A0;
  --color-nasa-red: #E4002B;
  --color-cta-red: #D83933;
  --color-arrow-red: #F64137;
  --color-heading-ink: #1B1B1B;
  --color-black: #000000;
  --color-carbon-90: #17171B;
  --color-carbon-80: #2E2E32;
  --color-spacesuit-white: #F6F6F6;
  --color-muted-ink: #58585B;
  --color-count-grey: #717173;
  --color-label-grey: #959599;
  --color-footer-grey: #B9B9BB;
  --color-lead-grey: #D1D1D1;
  --color-rule-grey: #565C65;
  --color-page-white: #FFFFFF;
  --color-button-primary-fill: #D83933;
  --color-button-primary-text: #FFFFFF;
  --color-arrow-link-text: #FFFFFF;
  --color-search-input-fill: #000000;
  --color-social-button-fill: #2E2E32;
  --font-display: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Public Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", Menlo, Consolas, monospace;
  --page-margin: 72px;
  --section-padding: 72px;
  --container-max: 1296px;
  --hero-text-max: 696px;
  --card-gap: 16px;
  --nav-height: 86px;
  --grid-gutter: 20px;
  --grid-columns: 4;
  --text-display-xl-size: 72px;
  --text-display-xl-line: 1.05;
  --text-display-xl-weight: 700;
  --text-display-l-size: 56px;
  --text-display-l-line: 1.1;
  --text-display-l-weight: 700;
  --text-display-m-size: 48px;
  --text-display-m-line: 0.95;
  --text-display-m-weight: 700;
  --text-display-iotd-size: 41px;
  --text-display-iotd-line: 0.95;
  --text-display-iotd-weight: 700;
  --text-heading-l-size: 40px;
  --text-heading-l-line: 1;
  --text-heading-l-weight: 700;
  --text-heading-m-size: 36px;
  --text-heading-m-line: 1.05;
  --text-heading-m-weight: 700;
  --text-card-title-size: 29px;
  --text-card-title-line: 1.05;
  --text-card-title-weight: 700;
  --text-link-l-size: 22.4px;
  --text-link-l-line: 1;
  --text-link-l-weight: 700;
  --text-nav-size: 17.6px;
  --text-nav-line: 1;
  --text-nav-weight: 600;
  --text-link-size: 16px;
  --text-link-line: 1;
  --text-link-weight: 600;
  --text-footer-link-size: 14.4px;
  --text-footer-link-line: 1.2;
  --text-footer-link-weight: 400;
  --text-news-title-size: 22px;
  --text-news-title-line: 1.05;
  --text-news-title-weight: 700;
  --text-lead-size: 18px;
  --text-lead-line: 1.25;
  --text-lead-weight: 700;
  --text-body-size: 16px;
  --text-body-line: 1.65;
  --text-body-weight: 400;
  --text-small-title-size: 14px;
  --text-small-title-line: 1.25;
  --text-small-title-weight: 700;
  --text-legal-size: 14.4px;
  --text-legal-line: 1.2;
  --text-legal-weight: 400;
  --text-label-size: 11.2px;
  --text-label-line: 1;
  --text-label-weight: 500;
  --text-label-tracking: 3.5px;
  --radius-button-primary: 4px;
  --radius-news-card: 0px;
  --radius-topic-card: 0px;
  --radius-search-input: 0px;
  --radius-social-button: 999px;
  --icon-arrow-badge: 20px;
  --icon-type-icon: 16px;
  --icon-social: 32px;
}
/* Phone values measured at 390px. NASA's breakpoint wasn't measured: 600px is our default. */
@media (max-width: 600px) {
  :root {
    --page-margin: 24px;
    --section-padding: 72px;
    --text-display-xl-size: 35.2px;
    --text-display-l-size: 36px;
    --text-display-m-size: 33.6px;
    --text-display-iotd-size: 29px;
    --text-heading-l-size: 24px;
    --text-heading-m-size: 29px;
    --text-card-title-size: 22px;
    --text-news-title-size: 18px;
    --text-lead-size: 16px;
    --text-body-size: 14.4px;
    --text-small-title-size: 12px;
  }
}
.button-primary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 46px; padding: 0 20px; border-radius: 4px;
  background: #D83933; color: #FFFFFF;
  font: 700 22.1px/1 var(--font-body);
}