:root {
  --bg: #0b0b0a;
  --ink: #e6e1d6;
  --dim: #7b766c;
  --faint: #26241f;
  --sun: #c9a865;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}

body {
  font-family: "EB Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  font-size: clamp(19px, 0.95rem + 0.42vw, 23px);
  line-height: 1.5;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

::selection { background: var(--ink); color: var(--bg); }

main {
  min-height: 100vh;
  min-height: 100svh;
  max-width: 31em;
  margin: 0 auto;
  padding: max(26vh, 80px) 16px max(7vh, 32px);
  display: flex;
  flex-direction: column;
}

ol {
  list-style: none;
  counter-reset: p;
  margin: 0;
  padding: 0;
}
li {
  counter-increment: p;
  position: relative;
  padding-left: 1.6em;
  margin: 0.32em 0;
}
li::before {
  content: counter(p);
  position: absolute;
  left: 0;
  color: var(--dim);
  font-variant-numeric: lining-nums tabular-nums;
}
@media (min-width: 760px) {
  li { padding-left: 0; }
  li::before { left: -1.6em; }
}

/* 3 is not a sentence: it is a reading of the world, live */
li.sig { margin-top: 1.1em; }
li.sig::before { top: var(--n-top, 0.95em); }

.fig { margin: 0; }
.vis {
  position: relative;
  width: 100%;
  height: 3.4em;
  color: var(--sun);
  cursor: crosshair;
  touch-action: pan-y;
}
.vis[data-k="field"] { height: 5.6em; }
.vis[data-k="ground"] { height: 4.6em; }
.vis[data-k="quakes"] { height: auto; aspect-ratio: 2.54; }
.vis[data-k="fusion"] { height: 8.5em; }
.vis[data-k="particles"] { height: 5em; }
.vis[data-k="cmb"] { height: 4em; }
.vis[data-k="darkmatter"] { height: 5em; }
.vis[data-k="cryoem"] { height: 8.5em; }
.vis[data-k="attosecond"] { height: 6em; }
.vis[data-k="earthring"] { height: 3.6em; }
.vis[data-k="cosmicweb"] { height: 10em; }
.vis[data-k="forest"] { height: 3.8em; }
.vis[data-k="neutrinos"] { height: 9em; }
.vis[data-k="virus"] { height: 8.5em; }
.vis svg, .vis canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.fig figcaption {
  margin-top: 0.75em;
  min-height: 1.5em;
  font-size: 0.72em;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.fig.on figcaption { opacity: 1; }

footer {
  margin-top: auto;
  padding-top: 5em;
  font-size: 0.72em;
  color: var(--dim);
}
footer p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}