*,
*::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;

  /* 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%;
}

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);
}

/* 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);
}

p {
  margin-bottom: 1.2rem;
}

.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: 10px 20px;
  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;
}

/* Catalog grouped table */
.catalog-table .catalog-model-cell {
  font-weight: 700;
  vertical-align: top;
  white-space: nowrap;
}

.catalog-table tr.catalog-group-last td,
.catalog-table tr.catalog-group-last + tr td {
  border-top: 1px solid var(--border-color);
}

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;
}

.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;
}

#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;
}

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

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;
}

article 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;
}

/* 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. */
.work-list { display: flex; flex-direction: column; }
a.work-item {
  display: block;
  position: relative;
  padding: 2rem 0;
  border-bottom: 1px solid var(--border-muted-color);
  color: inherit;
  text-decoration: none;
}
a.work-item:first-child { border-top: 1px solid var(--border-muted-color); }
a.work-item:last-child { border-bottom: none; }
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.2rem, 4vw, 3.2rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 24ch;
  margin: 0;
  text-wrap: balance;
}
.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;
}

.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;
  }

  .site-footer__inner {
    justify-content: center;
    text-align: center;
  }
}

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