*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Theme tokens (light defaults; auto-overridden by OS/browser dark mode) */
:root {
  color-scheme: light dark;

  --bg-color: #ffffff;
  --text-color: #111111;
  --header-color: #111111;

  --link-color: #0b57d0;
  --link-visited-color: #6f42c1;

  --border-color: #111111;
  --border-muted-color: #444444;

  --code-bg: #000000;

  --popup-bg: #ffffff;
  --popup-border: #cccccc;
  --surface-muted: #f7f7f7;
  --muted-text: #666666;
  --muted-text-2: #999999;
  --shadow-color: rgba(0, 0, 0, 0.15);

  /* 1-bit ordered-dither shadow images: a 14x4 SVG tile with Bayer-style
     coverage that fades dense → sparse left-to-right (the -l variant is
     for left edges, the -r variant is the same pattern mirrored for
     right edges via SVG transform). Tiled vertically via repeat-y at
     14px x 4px. shape-rendering=crispEdges keeps cells pixel-aligned. */
  --shadow-dither-l: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 4' preserveAspectRatio='none' shape-rendering='crispEdges'><g fill='black' fill-opacity='.4'><rect width='1' height='4'/><rect x='1' width='1' height='4'/><rect x='2' width='1' height='1'/><rect x='2' y='2' width='1' height='1'/><rect x='3' y='1' width='1' height='1'/><rect x='3' y='3' width='1' height='1'/><rect x='4' width='1' height='3'/><rect x='5' y='1' width='1' height='1'/><rect x='5' y='3' width='1' height='1'/><rect x='6' width='1' height='1'/><rect x='6' y='2' width='1' height='1'/><rect x='7' y='1' width='1' height='1'/><rect x='7' y='3' width='1' height='1'/><rect x='8' width='1' height='1'/><rect x='8' y='2' width='1' height='1'/><rect x='9' y='1' width='1' height='1'/><rect x='10' y='2' width='1' height='1'/><rect x='11' y='3' width='1' height='1'/></g></svg>");
  --shadow-dither-r: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 4' preserveAspectRatio='none' shape-rendering='crispEdges'><g fill='black' fill-opacity='.4' transform='translate(14 0) scale(-1 1)'><rect width='1' height='4'/><rect x='1' width='1' height='4'/><rect x='2' width='1' height='1'/><rect x='2' y='2' width='1' height='1'/><rect x='3' y='1' width='1' height='1'/><rect x='3' y='3' width='1' height='1'/><rect x='4' width='1' height='3'/><rect x='5' y='1' width='1' height='1'/><rect x='5' y='3' width='1' height='1'/><rect x='6' width='1' height='1'/><rect x='6' y='2' width='1' height='1'/><rect x='7' y='1' width='1' height='1'/><rect x='7' y='3' width='1' height='1'/><rect x='8' width='1' height='1'/><rect x='8' y='2' width='1' height='1'/><rect x='9' y='1' width='1' height='1'/><rect x='10' y='2' width='1' height='1'/><rect x='11' y='3' width='1' height='1'/></g></svg>");

  --pill-available-bg: #5bc54a;
  --pill-available-fg: #081a08;
  --pill-muted-bg: #f0f0f0;
  --pill-muted-fg: #111111;
  --pill-muted-border: #d0d0d0;
  /* Service-state pills complete the green/amber/red triad the field expects on a
     status page. Deliberately theme-agnostic like --pill-available-*: each pair is
     legible on both backgrounds, so severity never depends on the color scheme.
     Both clear 4.5:1 against their own foreground for bold 12px labels. */
  --pill-degraded-bg: #f5a623;
  --pill-degraded-fg: #2a1a00;
  --pill-down-bg: #c5221f;
  --pill-down-fg: #ffffff;

  /* Brand radius tokens — mirror dynamical-org/brand colors_and_type.css.
     sm matches the logo shoulder fillet (2.5px); md = popups; lg = dark frame. */
  --radius-sm: 2.5px;
  --radius-md: 4px;
  --radius-lg: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #0f0f10;
    --text-color: #e8e8ea;
    --header-color: #ffffff;

    --link-color: #8ab4f8;
    --link-visited-color: #c58af9;

    --border-color: #e8e8ea;
    --border-muted-color: #b5b5b5;

    --code-bg: #000000;

    --popup-bg: #151517;
    --popup-border: #3a3a3d;
    --surface-muted: #161618;
    --muted-text: #b5b5b5;
    --muted-text-2: #8f8f93;
    --shadow-color: rgba(0, 0, 0, 0.5);

    --shadow-dither-l: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 4' preserveAspectRatio='none' shape-rendering='crispEdges'><g fill='white' fill-opacity='.5'><rect width='1' height='4'/><rect x='1' width='1' height='4'/><rect x='2' width='1' height='1'/><rect x='2' y='2' width='1' height='1'/><rect x='3' y='1' width='1' height='1'/><rect x='3' y='3' width='1' height='1'/><rect x='4' width='1' height='3'/><rect x='5' y='1' width='1' height='1'/><rect x='5' y='3' width='1' height='1'/><rect x='6' width='1' height='1'/><rect x='6' y='2' width='1' height='1'/><rect x='7' y='1' width='1' height='1'/><rect x='7' y='3' width='1' height='1'/><rect x='8' width='1' height='1'/><rect x='8' y='2' width='1' height='1'/><rect x='9' y='1' width='1' height='1'/><rect x='10' y='2' width='1' height='1'/><rect x='11' y='3' width='1' height='1'/></g></svg>");
    --shadow-dither-r: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 4' preserveAspectRatio='none' shape-rendering='crispEdges'><g fill='white' fill-opacity='.5' transform='translate(14 0) scale(-1 1)'><rect width='1' height='4'/><rect x='1' width='1' height='4'/><rect x='2' width='1' height='1'/><rect x='2' y='2' width='1' height='1'/><rect x='3' y='1' width='1' height='1'/><rect x='3' y='3' width='1' height='1'/><rect x='4' width='1' height='3'/><rect x='5' y='1' width='1' height='1'/><rect x='5' y='3' width='1' height='1'/><rect x='6' width='1' height='1'/><rect x='6' y='2' width='1' height='1'/><rect x='7' y='1' width='1' height='1'/><rect x='7' y='3' width='1' height='1'/><rect x='8' width='1' height='1'/><rect x='8' y='2' width='1' height='1'/><rect x='9' y='1' width='1' height='1'/><rect x='10' y='2' width='1' height='1'/><rect x='11' y='3' width='1' height='1'/></g></svg>");

    --pill-muted-bg: #2a2a2d;
    --pill-muted-fg: #e8e8ea;
    --pill-muted-border: #3a3a3d;
  }
}

/* html is set to 62.5% so that all the REM measurements are 1rem = 10px */
html {
  font-size: 62.5%;
  /* Stop mobile Safari from inflating the font of blocks that overflow the
     viewport (e.g. a wide, horizontally-scrolling variable table), which made
     its text larger than identical tables that happen to fit. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
input,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'IBM Plex Mono', monospace;
}

body {
  padding: 2rem 4rem;
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--bg-color);
}

.status-pill {
  display: inline-block;
  padding: 0.05em 0.55em;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: 1px solid transparent;
}

.status-pill--available,
.status-pill--updating {
  background: var(--pill-available-bg);
  color: var(--pill-available-fg);
}

.status-pill--other {
  background: var(--pill-muted-bg);
  color: var(--pill-muted-fg);
  border-color: var(--pill-muted-border);
}

a {
  color: var(--link-color);
}

a:visited {
  color: var(--link-visited-color);
}

.status-subnav-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 0.6rem 0 1.5rem;
}

.status-subnav {
  display: flex;
  gap: 0.8rem;
}

.primary-nav [aria-current="page"],
.status-subnav [aria-current="page"] {
  color: var(--text-color);
  font-weight: 700;
  text-decoration: none;
}

.status-page-meta p {
  margin: 0;
}

.status-page-meta {
  margin-left: auto;
  text-align: right;
}

.status-time-toggle {
  width: 4.2em;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
}

.status-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-bottom: 2rem;
}

.status-health {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.status-health li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}

.status-health li > [aria-hidden] {
  align-self: center;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--border-muted-color);
}

.status-health [data-state="operational"] > [aria-hidden],
.status-health [data-state="nominal"] > [aria-hidden] {
  background: var(--pill-available-bg);
}

.status-health [data-state="degraded"] > [aria-hidden],
.status-health [data-state="advisory"] > [aria-hidden] {
  background: var(--pill-degraded-bg);
}

.status-health [data-state="down"] > [aria-hidden] {
  background: var(--pill-down-bg);
}

@media (max-width: 680px) {
  .status-page-meta {
    flex-basis: 100%;
    margin-left: 0;
    text-align: left;
  }

  .status-health {
    flex: 1 1 100%;
    min-width: 0;
  }

  .status-health li {
    flex: 1 1 100%;
  }
}

/* Prevent visited-link styling from recoloring interactive SVG maps (e.g. scorecard). */
#map-container svg a:link,
#map-container svg a:visited,
#map-container svg a:hover,
#map-container svg a:active {
  fill: inherit;
  stroke: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--header-color);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Larger headings get slightly tighter leading; smaller ones get more air.
   Kept gentle because IBM Plex Mono already reads tight. */
h1 {
  line-height: 1.15;
}

h5,
h6 {
  line-height: 1.3;
  letter-spacing: -0.01em;
}

p {
  margin-bottom: 1.2rem;
}

/* Classless lists are prose; classed lists own their component layout. */
:where(.content) :is(ul, ol):not([class]) {
  margin-bottom: 1.2rem;
}

:where(.content) :is(ul, ol):not([class]) > li + li {
  margin-top: 0.6rem;
}

.small-note {
  font-size: 0.9em;
  color: var(--muted-text);
}

.small-note a {
  color: inherit;
}

.small-note a:visited {
  color: inherit;
}

.table-container {
  /* Caps the wrapper at the article column width (100% of .content =
     78rem on wide viewports, body-content-area on narrow ones) and
     scrolls horizontally when the table inside is wider. Default
     block sizing already produces max-width:100% — written explicitly
     so the intent is obvious. */
  max-width: 100%;
  overflow-x: auto;
  /* Edge indicators that appear only when content overflows on that
     side. Three layers per side: a solid-color "cover" anchored to the
     scrolled content (background-attachment: local) sits at the
     content's left/right edge; behind it, a 1px border line and a
     dithered fade shadow are anchored to the scroll viewport
     (background-attachment: scroll) at the container's left/right edge.
     When the content edge lines up with the viewport edge (scrolled to
     that side, or no overflow), the cover hides both the border and
     the shadow. Once scrolled off, both show through — the border
     marks the cut, the dithered shadow signals "more content this way". */
  background-image:
    linear-gradient(var(--bg-color), var(--bg-color)),
    linear-gradient(var(--bg-color), var(--bg-color)),
    linear-gradient(var(--border-color), var(--border-color)),
    linear-gradient(var(--border-color), var(--border-color)),
    var(--shadow-dither-l),
    var(--shadow-dither-r);
  background-position: 0 0, 100% 0, 0 0, 100% 0, 0 0, 100% 0;
  background-size:
    16px 100%, 16px 100%,
     1px 100%,  1px 100%,
    14px 4px,  14px 4px;
  background-repeat:
    no-repeat, no-repeat,
    no-repeat, no-repeat,
    repeat-y,  repeat-y;
  background-attachment: local, local, scroll, scroll, scroll, scroll;
}

table {
  border-collapse: collapse;
}

table td,
table th {
  padding: 4px 8px;
  overflow-wrap: break-word;
  text-align: left;
}

table.data {
  border: 1px solid var(--border-color);
  min-width: 640px;
}

table.data th {
  border-bottom: 1px solid var(--border-color);
}

table.data td,
table.data th {
  padding: 5px 10px;
  border-right: 1px dotted var(--border-muted-color);
}


table.data tr td.right,
table.data tr th.right {
  text-align: right;
}

table.data.small {
  font-size: 1.2rem;
}

table.data.small td,
table.data.small th {
  padding: 4px 12px;
  white-space: nowrap;
}

caption {
  padding: 10px;
}

/* Hero section */
.hero-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 78rem;
  margin: 4rem auto 6rem;
  min-width: 0;
}

.hero-section > * {
  min-width: 0;
}

.hero-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#globe-canvas {
  display: block;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  /* Let the browser handle vertical panning (page scroll) natively; the
     globe only claims horizontal gestures to spin. See globe.js touch logic. */
  touch-action: pan-y;
}

.globe-timeline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 300px;
  margin-top: 0.4rem;
}

.globe-time-label {
  font-size: 0.75rem;
  color: var(--muted-text-2);
  white-space: nowrap;
  min-width: 5rem;
}

#globe-slider {
  flex: 1;
  height: 2px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--muted-text-2);
  opacity: 0.4;
  outline: none;
  cursor: pointer;
}

#globe-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted-text);
  cursor: pointer;
}

#globe-slider::-moz-range-thumb {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted-text);
  border: none;
  cursor: pointer;
}

.globe-footnote {
  font-size: 1rem;
  color: var(--muted-text-2);
  text-align: center;
  margin-top: 0.4rem;
  min-height: 1.6rem;
}

.globe-footnote a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Placeholders: a plain box filling each element until globe.js populates it,
   so the content appears without shifting layout. */
.globe-footnote:empty,
.globe-time-label:empty {
  background-color: var(--muted-text-2);
  opacity: 0.4;
}

.globe-footnote:empty {
  width: 300px;
  max-width: 90vw;
}

.globe-time-label:empty {
  height: 1em;
}

nav,
.content,
.frame {
  max-width: 78rem;
  margin: auto;
}

nav {
  margin: 1.25rem auto 2.25rem;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
  padding-inline-start: 0;
  margin: 0;
}

nav li {
  list-style: none;
}

nav ul li:first-child {
  font-weight: 700;
  margin-right: auto;
}

.nav-lockup img {
  display: block;
  height: 30px;
  width: auto;
}

footer {
  max-width: 78rem;
  margin: 6rem auto 2rem;
  padding: 3rem 3rem 1rem;
  background: var(--surface-muted);
  border-radius: var(--radius-md);
  color: var(--muted-text);
  font-size: 1.4rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 0.7fr 1fr 1.9fr;
  gap: 3rem;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.footer-dispatch p {
  margin: 0 0 1.2rem;
  max-width: 36ch;
}

.footer-subscribe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.footer-subscribe input[type="email"] {
  flex: 1;
  min-width: 16rem;
  font-family: inherit;
  font-size: 1.4rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border-color);
  background: var(--bg-color);
  color: var(--text-color);
}

.footer-archive {
  margin: 1rem 0 0;
}

.footer-base {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 3rem;
  padding: 1.2rem 0;
  border-top: 1px solid var(--popup-border);
  font-size: 1.2rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  footer {
    padding: 3rem 1.5rem 1rem;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

#footer-frame {
  display: block;
  width: 100%;
  border: 0;
  margin: 6rem auto 2rem;
}

#footer-frame[style*="height"] {
  overflow: hidden;
}



article {
  border: 1px solid var(--border-color);
  margin: 2rem -3rem;
  padding: 2rem 3rem;
}

/* Long-form note + area pages are full content pages, not stream cards: drop
   the card box (kept for the inline updates stream). */
article.note {
  border: none;
  margin: 2rem auto;
  padding: 0;
}

article img,
.content img {
  max-width: 100%;
}

.content.centered {
  text-align: center;
}

.content pre[class*="language-"] {
  background-color: var(--code-bg);
}

/* --- Updates / lab notes ------------------------------------------------ */

/* Lab-note page header. */
.note-header {
  margin-bottom: 2.5rem;
}

/* Updates archive index (/updates): a lean list of entries — date, linked
   title, and a short summary — each linking to its own /updates/<date>/ page.
   Capped to a reading measure so the hairline separators track the text
   rather than stretching the full 78rem content width. */
/* Shared vertical "index list" skeleton — used by the catalog, the /updates
   archive, and the featured-work lists. Each list sets its own density and
   separator via the custom properties and layers on its own title/meta styles;
   the reset, row separators, link reset, and focus ring are shared. */
.index-list {
  --index-row-padding: 1.2rem;
  --index-row-border: 1px dotted var(--border-muted-color);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.index-list > li {
  padding: var(--index-row-padding) 0;
}
.index-list > li:not(:last-child) {
  border-bottom: var(--index-row-border);
}
.index-list a,
.index-list a:visited {
  color: inherit;
  text-decoration: none;
}
.index-list > li > a {
  display: block; /* row-level anchors (catalog, featured work) */
}
.index-list a:focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 2px;
}

/* Low-tech figures (figure shortcode or inline <figure> HTML). */
figure {
  margin: 2rem 0;
}
figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border-color);
  background: var(--bg-color);
}
figcaption {
  margin-top: 0.5rem;
  font-size: 0.9em;
  color: var(--muted-text);
}

/* markdown-it-footnote output (citations on lab notes). */
.footnotes-sep {
  border: none;
  border-top: 1px solid var(--border-muted-color);
  margin-top: 3rem;
}
.footnotes {
  font-size: 0.9em;
  color: var(--muted-text);
}
.footnote-ref a,
.footnote-backref {
  text-decoration: none;
}

/* --- Research hub + homepage resource sections ------------------------- */

.dim { color: var(--muted-text); }

/* Section label shared by /research blocks, homepage sections, and footer columns. */
.block-label,
.footer-col h2 {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted-text);
  font-weight: 700;
}
.block-label { margin: 0; }
.footer-col h2 { margin: 0 0 1.2rem; }

.block { margin: 4rem 0; }
.block .block-label { margin-bottom: 1.5rem; }

/* Research areas grid. */
.area-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.area-card {
  border: 1px solid var(--border-color);
  padding: 1.5rem;
}
a.area-card { display: block; color: inherit; text-decoration: none; }
a.area-card:hover h3 { text-decoration: underline; }
.area-card h3 { margin: 0 0 0.5rem; }
.area-card p { margin: 0; color: var(--muted-text); }

/* Featured work list — builds on the shared .index-list skeleton. */
.work-list {
  --index-row-padding: 2rem;
  --index-row-border: 1px solid var(--border-muted-color);
}
a.work-item { position: relative; }
a.work-item:hover h3 { text-decoration: underline; }
.work-main { min-width: 0; }
/* Reserve room on the title line for the absolutely-positioned meta so a long
   title wraps before it; the blurb below spans the full width. */
.work-main h3 { margin: 0 0 0.4rem; padding-right: 13rem; }
.work-main p { margin: 0; color: var(--muted-text); }

/* Homepage mission statement + section heads. */
.mission-statement {
  font-size: clamp(2.0rem, 4vw, 3.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 24ch;
  margin: 0;
  text-wrap: pretty;
}
.home-section { margin-top: 6rem; }
.home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
  .area-grid { grid-template-columns: 1fr; }
}

.frame {
  margin: 2rem auto;
  border: 1px solid #292929;
  border-radius: 6px;
  background: #171717;
  overflow: hidden;
}

.frameHeader {
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #292929;
  background: black;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  gap: 12px;
}

.frameHeaderTitle {
  position: relative;
  display: grid;
  height: 40px;
  align-items: center;
  color: #fafafa;
  font-size: 14px;
  line-height: 40px;
  vertical-align: top;
  border-bottom: 1px solid white;
}

.frameHeaderSubtitle {
  height: 40px;
  color: #898989;
  font-size: 14px;
  line-height: 40px;
}

.frameContent {
  width: 100%;
  margin: 0;
  overflow-x: auto;
  background: #1d1f21;
}

.frameContent code {
  font-family: inherit;
  font-size: 1.5rem;
  letter-spacing: 0.1px;
  line-height: 22.5px;
}

#newsletter {
  margin-top: 4rem;
}

#newsletter form > * {
  margin: 1rem 0;
}

.content input,
.content select {
  font-size: inherit;
}

/* Latest popup styles */
#latest-popup {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: var(--popup-bg);
  color: var(--text-color);
  border: 1px solid var(--popup-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  box-shadow: 0 4px 12px var(--shadow-color);
  max-width: 300px;
  z-index: 1000;
}

#latest-popup .popup-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

#latest-popup .popup-type {
  font-weight: bold;
  color: var(--muted-text);
}

#latest-popup .popup-close {
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
  color: var(--muted-text-2);
  padding: 0;
  line-height: 1;
}

#latest-popup .popup-title {
  font-weight: 500;
  text-decoration: none;
  color: inherit;
}

#latest-popup .popup-date {
  color: var(--muted-text);
  font-size: 0.8em;
  margin-top: 0.25rem;
}

.scorecard-chart figure {
  margin: 0;
}

/* Loading, empty, and error states replace the plot with a box of the same
   footprint (JS sets --chart-height to the height it would have drawn), so a
   failed chart is as visible as the chart it stands in for. */
.scorecard-chart p {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--chart-height);
  margin: 0;
  padding: 0 1em;
  border: 1px dotted var(--border-muted-color);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--muted-text);
  text-align: center;
}

.responsive-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

@media screen and (max-width: 1000px) {
  body {
    padding: 2rem 1rem;
  }

  nav ul {
    justify-content: flex-start;
  }

  nav ul li:first-child {
    flex-basis: 100%;
    margin-right: 0;
  }

  .hero-section {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 2rem auto 4rem;
  }

  .hero-visual {
    order: -1;
  }

  .hero-content {
    text-align: center;
  }

  /* Center the max-width box itself, not just the text inside it. */
  .mission-statement {
    margin-inline: auto;
  }

  .frame {
    margin: 4rem auto;
  }

  .frameHeaderTitle {
    display: none;
  }
  
  /* Allow header to grow to fit wrapped subtitle */
  .frameHeader {
    height: auto;
    min-height: 40px;
    align-items: center;
    padding: 8px 16px;
  }
  
  .frameHeaderSubtitle {
    height: auto;
    line-height: 1.3;
    white-space: normal;
  }
}

@media (prefers-color-scheme: dark) {
  img[src$="/assets/github-mark.svg"],
  img[src$="github-mark.svg"] {
    filter: invert(1);
  }
}