/* zdozier.com
   One stylesheet, no external resources: system fonts only, inline SVG charts.

   Design tokens
   - Type: serif headings, sans body, mono for data (years, counts, DOIs, tags).
     Scale is a 1.25 ratio from a 17px body: 12 / 13 / 15 / 17 / 20 / 25 / 31 / 39 / 49.
   - Space: 4px base. 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96.
   - Layout: 64rem wrap. On wide screens a 10.5rem label rail (section titles,
     publication years) sits left of a 47.5rem reading column.
   - Color: paper, ink, muted, hairline rules, Stanford cardinal as a sparing accent.
     Chart colors are validated for color vision deficiency in both schemes. */

:root {
  color-scheme: light dark;

  /* The Linux names (TeX Gyre Pagella, P052, URW Palladio L, Liberation, DejaVu,
     Noto) are what the GitHub Actions runner has when it prints cv.pdf. */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "TeX Gyre Pagella", "P052", "URW Palladio L", Charter, "Bitstream Charter", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", "DejaVu Sans", "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;

  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-md: 0.9375rem;
  --t-base: 1.0625rem;
  --t-lg: 1.25rem;
  --t-xl: 1.5625rem;
  --t-2xl: 1.953rem;
  --t-3xl: 2.441rem;
  --t-4xl: 3.052rem;

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  --wrap: 64rem;
  --rail: 10.5rem;
  --gap: 3rem;
  --measure: 47.5rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 4px;

  --paper: #fbfaf8;
  --paper-2: #f3f1ec;
  --ink: #17181c;
  --ink-2: #3c4049;
  --muted: #5d6370;
  --rule: #e5e2dc;
  --rule-2: #d3cec5;
  --accent: #8c1515;
  --accent-wash: #f5ebe9;
  --on-accent: #fbfaf8;
  --good: #2e7d32;
  --warn: #b26b00;
  --viz-lead: #9b1b1b;
  --viz-co: #948e85;
  --shadow: 0 6px 20px rgb(23 24 28 / 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121316;
    --paper-2: #1b1d21;
    --ink: #ecebe7;
    --ink-2: #c9c7c1;
    --muted: #9ca2ac;
    --rule: #2a2d33;
    --rule-2: #3d4148;
    --accent: #f0857c;
    --accent-wash: #2b1918;
    --on-accent: #121316;
    --good: #5cc46a;
    --warn: #e0a43a;
    --viz-lead: #dc6a61;
    --viz-co: #5f636b;
    --shadow: 0 6px 20px rgb(0 0 0 / 0.4);
  }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-base)/1.6 var(--font-sans);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--rule-2);
  transition: color 0.12s ease, text-decoration-color 0.12s ease;
}

a:hover { color: var(--accent); text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

main:focus { outline: none; }

img { max-width: 100%; }

b, strong { font-weight: 650; }

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--paper-2);
  border-radius: 3px;
  padding: 0.1em 0.3em;
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

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

[hidden] { display: none !important; }

.skip {
  position: absolute;
  left: var(--s-4);
  top: -3rem;
  z-index: 20;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius);
  text-decoration: none;
}

.skip:focus { top: var(--s-3); color: var(--paper); }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main {
  display: block;
  padding-block: var(--s-7) var(--s-6);
}

/* ---------- Top bar ---------- */

.topbar { border-bottom: 1px solid var(--rule); }

.topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 4rem;
}

.wordmark {
  margin-right: auto;
  font-family: var(--font-serif);
  font-size: var(--t-lg);
  letter-spacing: 0.005em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark:hover { color: var(--ink); }

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--s-5);
}

.nav a {
  display: inline-block;
  padding-block: var(--s-2);
  font-size: var(--t-md);
  color: var(--ink-2);
  text-decoration: none;
}

.nav a:hover { color: var(--accent); }

.nav a[aria-current="page"] {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 0.55em;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.42em 0.75em;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font: 400 var(--t-xs)/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.pill:hover { color: var(--ink); border-color: var(--rule-2); }

.dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
}

.is-warn .dot { background: var(--warn); }

.menu { display: none; position: relative; }

.menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 2.5rem;
  padding: 0 0.8em;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  font-size: var(--t-md);
  color: var(--ink-2);
  cursor: pointer;
  list-style: none;
}

.menu > summary::-webkit-details-marker { display: none; }

.menu-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.menu[open] > summary { color: var(--ink); border-color: var(--ink-2); }

.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--s-2));
  z-index: 10;
  width: min(16rem, calc(100vw - 2 * var(--gutter)));
  padding: var(--s-2) var(--s-4) var(--s-4);
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  box-shadow: var(--shadow);
}

.menu-panel ul { list-style: none; margin: 0 0 var(--s-3); padding: 0; }

.menu-panel li + li { border-top: 1px solid var(--rule); }

.menu-panel a:not(.pill) {
  display: block;
  padding: var(--s-3) 0;
  font-size: var(--t-base);
  text-decoration: none;
}

.menu-panel a[aria-current="page"] { color: var(--accent); }

@media (max-width: 999px) {
  .pill-wide { display: none; }
}

@media (max-width: 819px) {
  .nav-wide { display: none; }
  .menu { display: block; }
}

/* ---------- Page heads and sections ---------- */

.page-head {
  max-width: 46rem;
  margin-bottom: var(--s-7);
}

.page-head h1 {
  font-size: clamp(2rem, 1.55rem + 1.9vw, var(--t-3xl));
  letter-spacing: -0.01em;
}

.lede {
  margin-top: var(--s-3);
  font-size: clamp(var(--t-base), 0.95rem + 0.5vw, var(--t-lg));
  line-height: 1.5;
  color: var(--ink-2);
}

.page-meta {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  color: var(--muted);
}

.kicker {
  margin-bottom: var(--s-2);
  font-size: var(--t-sm);
  color: var(--muted);
  letter-spacing: 0.08em;
}

.sec {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}

.sec-head { margin-bottom: var(--s-4); }

.sec-head h2 { font-size: var(--t-lg); line-height: 1.3; }

.sec-note {
  margin-top: var(--s-1);
  font: 400 var(--t-xs)/1.45 var(--font-mono);
  color: var(--muted);
}

.prose { max-width: var(--measure); }

.prose p + p { margin-top: var(--s-4); }

.more {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
}

.more a::after { content: " \2192"; }

.empty-note { color: var(--muted); }

@media (min-width: 960px) {
  .sec {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, var(--measure));
    column-gap: var(--gap);
  }
  .sec-head { margin-bottom: 0; }
  .in-column {
    margin-left: calc(var(--rail) + var(--gap));
    max-width: var(--measure);
  }
}

/* ---------- Home ---------- */

.hero {
  display: grid;
  gap: var(--s-6);
  padding-bottom: var(--s-7);
}

.hero-name {
  font-size: clamp(2.3rem, 1.7rem + 2.4vw, var(--t-4xl));
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.hero-tagline {
  margin-top: var(--s-3);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-lg);
  line-height: 1.4;
  color: var(--ink-2);
}

.hero-roles {
  display: grid;
  gap: 2px;
  margin-top: var(--s-5);
  font-size: var(--t-md);
  color: var(--ink-2);
}

.hero-role { color: var(--ink); }

.hero-former {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--muted);
}

.hero-bio {
  max-width: var(--measure);
  margin-top: var(--s-5);
}

.hero-bio p + p { margin-top: var(--s-4); }

.links {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  font-size: var(--t-md);
}

.links a { text-decoration-color: var(--rule-2); }

.links .ext {
  margin-left: 0.15em;
  font-size: 0.8em;
  color: var(--muted);
}

.hero-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 52% 30%;
  border-radius: 6px;
  background: var(--paper-2);
}

@media (max-width: 959px) {
  .hero-portrait { order: -1; width: min(11rem, 42vw); }
}

@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) 16.5rem;
    column-gap: var(--s-8);
    align-items: start;
  }
  .hero-portrait { margin-top: var(--s-2); }
}

@media (prefers-color-scheme: dark) {
  .hero-portrait img { filter: brightness(0.86) contrast(1.04); }
}

/* Stat strip */

.stats {
  padding-top: var(--s-4);
  border-top: 1px solid var(--ink);
}

.stat-row {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5) var(--s-4);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.stat dt {
  font-size: var(--t-sm);
  color: var(--muted);
}

.stat dd { margin: 0; }

.stat-value {
  font: 600 2.25rem/1.05 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.stat-note {
  font: 400 var(--t-xs)/1.45 var(--font-mono);
  color: var(--muted);
}

.stat-has-spark {
  grid-column: 1 / -1;
  order: 9;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--s-5);
}

.stat-has-spark dt { grid-column: 1 / -1; margin-bottom: var(--s-1); }

.spark { position: relative; margin: 0; max-width: 12rem; padding-top: 2px; }

.viz-spark { display: block; width: 100%; height: auto; }

.spark-cap {
  display: grid;
  gap: 1px;
  margin-top: var(--s-1);
  font: 400 var(--t-xs)/1.35 var(--font-mono);
  color: var(--muted);
}

.spark-last { color: var(--ink-2); }

.spark-last .key { width: 8px; height: 8px; }

.stats-source {
  margin-top: var(--s-4);
  font-size: var(--t-xs);
  color: var(--muted);
}

/* Four columns only from 880px: narrower, the sparkline column is too small
   for its caption (tablet portrait keeps the 3 + 1 layout). */
@media (min-width: 880px) {
  .stat-row { grid-template-columns: 1fr 1.7fr 1fr 1fr; gap: 0; }
  .stat-has-spark { grid-column: auto; order: 0; }
  .stat + .stat { border-left: 1px solid var(--rule); padding-left: var(--s-5); }
  .stat { padding-right: var(--s-4); }
}

/* Research themes */

.themes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-7);
}

.theme-title {
  display: flex;
  align-items: baseline;
  gap: 0.65em;
  font-size: var(--t-xl);
  line-height: 1.25;
}

.theme-n {
  flex: none;
  font: 400 var(--t-sm)/1 var(--font-mono);
  color: var(--muted);
}

.theme-summary {
  margin: var(--s-3) 0 var(--s-4);
  color: var(--ink-2);
}

/* Compact publication and grant lists */

.pub-c-list, .grant-c-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pub-c, .grant-c {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}

.sec-body > .pub-c-list > :first-child,
.sec-body > .grant-c-list > :first-child { padding-top: 0; }

.theme .pub-c-list { border-top: 1px solid var(--rule); }

.pub-c-title, .grant-c-title {
  text-wrap: pretty;
  font-family: var(--font-serif);
  font-size: var(--t-base);
  line-height: 1.38;
  color: var(--ink);
  text-decoration: none;
}

a.pub-c-title:hover, a.grant-c-title:hover { color: var(--accent); text-decoration: underline; }

.pub-c-meta, .grant-c-meta {
  margin-top: 2px;
  font-size: var(--t-sm);
  color: var(--muted);
}

.grant-c-meta { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); }

.pub-c-meta .tag { margin-left: var(--s-2); vertical-align: 0.08em; }

.pub-year {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}

/* The separator sits in the markup with a no-break space, so a wrapped line
   never starts with it: "Venue ·" then a normal space, then the year. */
.pub-sep { color: var(--muted); margin-right: 0.35em; }

/* Software */

.repos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--s-4) var(--s-6);
}

.repo { padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); }

.repo-name {
  font: 500 var(--t-md)/1.4 var(--font-mono);
  text-decoration: none;
}

.repo-name:hover { text-decoration: underline; }

.repo-desc {
  margin-top: var(--s-1);
  font-size: var(--t-md);
  color: var(--ink-2);
}

.repo-meta {
  margin-top: var(--s-1);
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-3);
  font: 400 var(--t-xs)/1.5 var(--font-mono);
  color: var(--muted);
}

/* Contact */

.contact-email {
  font-family: var(--font-serif);
  font-size: var(--t-xl);
}

.contact-addr {
  margin-top: var(--s-2);
  font-size: var(--t-md);
  color: var(--ink-2);
}

/* ---------- Tags and badges ---------- */

.tag {
  display: inline-block;
  padding: 0.32em 0.5em 0.26em;
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  font: 500 0.6875rem/1 var(--font-mono);
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.tag-role { color: var(--accent); border-color: currentColor; }

.badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  font: 400 var(--t-xs)/1.6 var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.badges a { color: var(--ink-2); }

.badges a:hover { color: var(--accent); }

.badges span { color: var(--muted); }

/* Touch screens: taller targets for the small badge links and toggles
   (about 29px and 28px), without changing the look with a mouse. */
@media (pointer: coarse) {
  .badges a { display: inline-block; padding-block: 5px; }
  .au-all > summary, .contrib > summary { padding-block: 4px; }
}

/* ---------- Charts ---------- */

.chart, .diagram-fig {
  position: relative;
  margin: 0 0 var(--s-6);
  max-width: var(--measure);
}

.chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-4);
  margin-bottom: var(--s-3);
}

.chart-title { font-size: var(--t-md); font-weight: 600; }

.chart-sub {
  flex-basis: 100%;
  order: 3;
  font-size: var(--t-sm);
  color: var(--muted);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.key {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 0.45em;
  border-radius: 2px;
  vertical-align: -1px;
}

.key-lead { background: var(--viz-lead); }

.key-co { background: var(--viz-co); }

.chart-body { position: relative; }

.viz {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.viz-compact { display: none; }

.viz-grid { stroke: var(--rule); stroke-width: 1; shape-rendering: crispEdges; }

.viz-axis { stroke: var(--rule-2); stroke-width: 1; shape-rendering: crispEdges; }

.viz-tick {
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  fill: var(--muted);
}

.viz-value {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  fill: var(--ink-2);
}

.viz-lead { fill: var(--viz-lead); }

.viz-co { fill: var(--viz-co); }

.viz-hit { fill: transparent; }

.viz-col path { transition: opacity 0.12s ease; }

.viz:hover .viz-col:not(:hover) path { opacity: 0.45; }

.viz-col:focus { outline: none; }

.viz-col:focus-visible .viz-hit { stroke: var(--accent); stroke-width: 1.5; }

.viz-tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  min-width: 8rem;
  padding: 0.45rem 0.6rem;
  background: var(--paper);
  color: var(--ink-2);
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  box-shadow: var(--shadow);
  font-size: var(--t-xs);
  line-height: 1.5;
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 10px));
}

.viz-tip .tip-h {
  font-family: var(--font-mono);
  color: var(--muted);
  margin-bottom: 2px;
}

.viz-tip b {
  display: inline-block;
  min-width: 1.6em;
  font-weight: 650;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.viz-tip .tk {
  display: inline-block;
  width: 10px;
  height: 2px;
  margin-right: 6px;
  vertical-align: middle;
  border-radius: 1px;
}

@media (max-width: 599px) {
  .viz-columns:not(.viz-compact) { display: none; }
  .viz-compact { display: block; }
}

/* Pipeline diagram */

.diagram { display: block; width: 100%; height: auto; }

.diagram-tall { display: none; max-width: 340px; }

.dg-box { fill: var(--paper); stroke: var(--rule-2); stroke-width: 1; }

.dg-soft { fill: var(--paper-2); stroke: var(--rule); }

.dg-accent { stroke: var(--accent); }

.dg-line, .dg-head { fill: none; stroke: var(--muted); stroke-width: 1; stroke-linecap: round; }

.dg-title { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; fill: var(--ink); }

.dg-sub { font-family: var(--font-sans); font-size: 11px; fill: var(--muted); }

.dg-src { font-family: var(--font-sans); font-size: 12px; fill: var(--ink-2); }

.dg-kicker { font-family: var(--font-mono); font-size: 11px; fill: var(--muted); }

.dg-sched { font-family: var(--font-mono); font-size: 11px; fill: var(--muted); }

.dg-ok { fill: var(--good); }

.dg-warn { fill: var(--warn); }

@media (max-width: 640px) {
  .diagram:not(.diagram-tall) { display: none; }
  .diagram-tall { display: block; margin-inline: auto; }
}

@media (min-width: 960px) {
  .chart, .diagram-fig, .filters, .pub-count {
    margin-left: calc(var(--rail) + var(--gap));
  }
}

/* ---------- Publications ---------- */

.filters { max-width: var(--measure); margin-bottom: var(--s-4); }

.chips {
  position: relative;
  min-width: 0;          /* a fieldset defaults to min-content, which would widen */
  min-inline-size: 0;    /* the page instead of letting the chip row scroll */
  margin: 0 0 var(--s-4);
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.chip-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.38em 0.8em;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  font-size: var(--t-sm);
  line-height: 1.3;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.chip:hover { border-color: var(--ink-2); color: var(--ink); }

.chip-n {
  font: 400 var(--t-xs)/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

@media (max-width: 599px) {
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding: 2px var(--gutter) var(--s-2);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
}

.chip-input:checked + .chip {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.chip-input:checked + .chip .chip-n { color: inherit; opacity: 0.72; }

.chip-input:focus-visible + .chip { outline: 2px solid var(--accent); outline-offset: 2px; }

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-3);
}

.field { display: grid; gap: 5px; position: relative; min-width: 0; }

@media (max-width: 599px) {
  .filter-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .field-q { grid-column: 1 / -1; }
  .field select { text-overflow: ellipsis; }
}

.field label {
  font: 400 var(--t-xs)/1 var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.field-q { flex: 1 1 15rem; }

.field input, .field select {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.45em 0.65em;
  font: inherit;
  font-size: var(--t-md);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--muted);  /* the only visible edge at rest: 3:1 or better (WCAG 1.4.11) */
  border-radius: var(--radius);
}

.field input::placeholder { color: var(--muted); opacity: 1; }

.field select {
  padding-right: 2em;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.field:has(select)::after {
  content: "";
  position: absolute;
  right: 0.8em;
  bottom: 1.05rem;
  width: 0.38em;
  height: 0.38em;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  pointer-events: none;
}

.field input:hover, .field select:hover { border-color: var(--ink-2); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0 1em;
  font: inherit;
  font-size: var(--t-md);
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
}

.button:hover { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }

.button-quiet { color: var(--ink-2); background: transparent; border-color: var(--rule-2); }

.button-quiet:hover { color: var(--accent); background: transparent; border-color: var(--accent); }

.pub-count {
  max-width: var(--measure);
  margin-bottom: var(--s-2);
  font: 400 var(--t-xs)/1.5 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.year-group {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}

.year {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  margin-bottom: var(--s-4);
  font: 500 var(--t-lg)/1.2 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.year-n {
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--muted);
}

@media (min-width: 960px) {
  .year-group {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, var(--measure));
    column-gap: var(--gap);
  }
  .year {
    position: sticky;
    top: var(--s-4);
    align-self: start;
    margin-bottom: 0;
  }
}

.pubs { list-style: none; margin: 0; padding: 0; }

.pub { scroll-margin-top: var(--s-5); }

.pub + .pub { margin-top: var(--s-5); }

.pub-title {
  font-size: 1.1875rem;
  line-height: 1.35;
  text-wrap: pretty;
}

.pub-title a { text-decoration: none; }

.pub-title a:hover { text-decoration: underline; }

.pub:target .pub-title { color: var(--accent); }

.pub-authors {
  margin-top: var(--s-1);
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--ink-2);
}

.me { color: var(--ink); font-weight: 650; white-space: nowrap; }

.au-all { display: block; margin-top: 1px; }

.au-all > summary {
  display: inline-block;
  font: 400 var(--t-xs)/1.7 var(--font-mono);
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

.au-all > summary::-webkit-details-marker { display: none; }

.au-all > summary:hover { color: var(--accent); }

.au-all .more-open, .au-all[open] .more-closed { display: none; }

.au-all[open] .more-open { display: inline; }

.au-all > .au-list { display: block; }

.pub-authors:has(.au-all[open]) .au-short { display: none; }

.pub-meta {
  margin-top: 2px;
  font-size: var(--t-md);
  color: var(--ink-2);
}

.pub-meta .num { font-size: var(--t-sm); color: var(--muted); }

.pub-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-2);
}

.contrib { margin-top: var(--s-2); }

.contrib > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font: 400 var(--t-xs)/1.7 var(--font-mono);
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  list-style: none;
}

.contrib > summary::-webkit-details-marker { display: none; }

.contrib > summary::before {
  content: "+";
  width: 1em;
  text-align: center;
  color: var(--muted);
}

.contrib[open] > summary::before { content: "\2212"; }

.contrib > summary:hover { color: var(--accent); }

.contrib p {
  max-width: 42rem;
  margin-top: var(--s-2);
  padding-left: var(--s-4);
  border-left: 2px solid var(--rule-2);
  font-size: var(--t-md);
  color: var(--ink-2);
}

.empty {
  margin-top: var(--s-5);
  color: var(--muted);
}

@media (min-width: 960px) {
  .empty { margin-left: calc(var(--rail) + var(--gap)); }
}

/* ---------- Funding and team ---------- */

.grants {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-6);
}

.grant-title { font-size: var(--t-xl); line-height: 1.3; text-wrap: pretty; }

.grant-title a { text-decoration: none; }

.grant-title a:hover { text-decoration: underline; }

.grant-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 3px var(--s-4);
  margin: var(--s-3) 0 0;
  font-size: var(--t-md);
}

.grant-facts div { display: contents; }

.grant-facts dt {
  font: 400 var(--t-xs)/1.95 var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.grant-facts dd { margin: 0; color: var(--ink-2); }

.grant-facts dd.num { font-size: var(--t-sm); line-height: 1.85; }

.grant-desc { margin-top: var(--s-3); max-width: var(--measure); }

.grant-inst { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--muted); }

.people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  column-gap: var(--s-6);
}

.person {
  display: flex;
  flex-direction: column;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}

.person-name { font-family: var(--font-serif); font-size: var(--t-lg); line-height: 1.3; }

.person-role { font-size: var(--t-sm); color: var(--muted); }

/* ---------- Colophon ---------- */

.table-wrap { overflow-x: auto; }

.status-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.status-table th, .status-table td {
  padding: 0.6em 0.9em 0.6em 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}

.status-table thead th {
  font: 400 var(--t-xs)/1.4 var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--rule-2);
}

.status-table tbody th { font-weight: 600; white-space: nowrap; }

.status-table .n { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.status-table td.num { white-space: nowrap; color: var(--muted); font-size: var(--t-xs); padding-top: 0.75em; }

.status-table .col-use { color: var(--ink-2); }

.status { display: inline-flex; align-items: center; gap: 0.45em; white-space: nowrap; }

.facts {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--s-4) var(--s-5);
}

.facts li { display: grid; gap: 2px; }

.fact-k {
  font: 400 var(--t-xs)/1.4 var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.fact-v { font-size: var(--t-md); }

@media (max-width: 599px) {
  .status-table .col-use { display: none; }
  /* Let "Oct 9, 2026," and "20:42 UTC" stack instead of running off the edge. */
  .status-table td.num { white-space: normal; }
}

/* ---------- CV ---------- */

.cv { max-width: 50rem; }

/* Avoids a one-word last line ("Universidad San Francisco de" / "Quito"). */
.cv-what { text-wrap: pretty; }

.cv-head {
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--ink);
}

.cv-name {
  font-size: clamp(1.9rem, 1.45rem + 1.8vw, var(--t-3xl));
  letter-spacing: -0.01em;
}

.cv-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.55em;
  margin-top: var(--s-3);
  font-size: var(--t-md);
  color: var(--ink-2);
}

.cv-contact .sep { color: var(--muted); }

.cv-former {
  margin-top: var(--s-2);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-2);
}

.cv-updated {
  margin-top: var(--s-2);
  font: 400 var(--t-xs)/1.5 var(--font-mono);
  color: var(--muted);
}

.cv-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-4);
}

.cv-actions-note { font-size: var(--t-sm); color: var(--muted); }

.cv-sec { margin-top: var(--s-6); }

.cv-sec > h2 {
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-xl);
}

.cv-sub + .cv-sub { margin-top: var(--s-5); }

.cv-sub h3, .cv-cols h3 {
  margin-bottom: var(--s-3);
  font-family: var(--font-sans);
  font-size: var(--t-md);
  font-weight: 650;
  color: var(--ink);
}

.cv-text { color: var(--ink-2); }

.cv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}

.cv-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
}

.cv-when {
  flex: none;
  font: 400 var(--t-sm)/1.5 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}

.cv-unit { margin-top: 1px; color: var(--ink-2); }

.cv-desc { margin-top: var(--s-1); font-size: var(--t-md); color: var(--ink-2); }

.cv-years {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-1);
}

.cv-years li {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: var(--s-3);
}

.cv-year {
  padding-top: 0.12em;
  font: 400 var(--t-sm)/1.6 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.cv-refs {
  list-style: none;
  counter-reset: ref;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}

.cv-ref {
  counter-increment: ref;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
}

.cv-ref::before {
  content: counter(ref) ".";
  grid-row: 1 / span 2;
  padding-right: 0.65rem;
  white-space: nowrap;
  text-align: right;
  font: 400 var(--t-sm)/1.7 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.ref {
  grid-column: 2;
  font-size: var(--t-md);
  line-height: 1.55;
}

.ref a { overflow-wrap: anywhere; }

.ref .me { white-space: nowrap; }

.ref-note {
  grid-column: 2;
  margin: var(--s-1) 0 0 var(--s-5);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-2);
}

.cv-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--s-5);
}

.cv-plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

@media (max-width: 599px) {
  .cv-row { flex-direction: column; gap: 0; }
  .cv-ref { grid-template-columns: 2.1rem minmax(0, 1fr); }
}

/* ---------- Footer ---------- */

.site-footer {
  margin-top: var(--s-8);
  padding: var(--s-5) 0 var(--s-6);
  border-top: 1px solid var(--rule);
  font-size: var(--t-sm);
  color: var(--muted);
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-2) var(--s-5);
}

.footer-name { color: var(--ink-2); }

.footer-name .sep { color: var(--muted); }

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-4);
}

.footer-meta {
  grid-column: 1 / -1;
  font: 400 var(--t-xs)/1.5 var(--font-mono);
}

@media (max-width: 699px) {
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Print (the CV PDF is printed from /cv/) ---------- */

@page {
  size: Letter;
  margin: 0.75in;
}

@page cv {
  size: Letter;
  margin: 0.75in;
  @bottom-center {
    content: "Dozier CV, page " counter(page) " of " counter(pages);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
    font-size: 7.5pt;
    color: #5d6370;
  }
}

@media print {
  :root {
    color-scheme: light;
    --paper: #fff;
    --paper-2: #f4f4f4;
    --ink: #111;
    --ink-2: #2a2a2a;
    --muted: #555;
    --rule: #d6d6d6;
    --rule-2: #aaa;
    --accent: #111;
  }
  html { font-size: 9.6pt; }
  body { background: #fff; color: #111; line-height: 1.45; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .topbar, .site-footer, .skip, .screen-only, .menu, .pill, .filters, .viz-tip { display: none !important; }
  main { padding: 0; }
  .wrap { max-width: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  .page-cv .cv { page: cv; max-width: none; }
  .cv-head { padding-bottom: 10pt; }
  .cv-name { font-size: 20pt; }
  .cv-contact { font-size: 9.5pt; margin-top: 5pt; }
  .cv-former { margin-top: 3pt; font-size: 10pt; }
  .cv-updated { margin-top: 3pt; font-size: 7.5pt; }
  .cv-sec { margin-top: 12pt; }
  .cv-sec > h2 { font-size: 13pt; margin-bottom: 7pt; padding-bottom: 3pt; break-after: avoid; page-break-after: avoid; }
  .cv-sub + .cv-sub { margin-top: 10pt; }
  .cv-sub h3, .cv-cols h3 { font-size: 10pt; margin-bottom: 5pt; break-after: avoid; page-break-after: avoid; }
  .cv-list { gap: 6pt; }
  .cv-refs { gap: 4.5pt; }
  .ref { font-size: 9.6pt; line-height: 1.4; }
  .ref-note { font-size: 8.8pt; margin-top: 2pt; }
  .cv-desc, .cv-unit, .cv-text { font-size: 9.6pt; }
  .cv-when, .cv-year { font-size: 8.5pt; }
  .cv-ref { grid-template-columns: 2.7rem minmax(0, 1fr); }
  .cv-ref::before { font-size: 8.5pt; line-height: 1.6; padding-right: 0.6rem; }
  .cv-item, .cv-ref, .cv-years li, .cv-plain li, .cv-cols > div, .grant, .pub, .stat { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  p { orphans: 3; widows: 3; }
  .viz-compact, .diagram-tall { display: none !important; }
}

.nowrap { white-space: nowrap; }