/* Plain on purpose. Structure first; this is not a design system. */

:root {
  --fg: #1a1a1a;
  --muted: #5a5a5a;
  --line: #d8d8d8;
  --bg: #ffffff;
}

body {
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--fg);
  background: var(--bg);
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  max-width: 60rem;
}

h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem; margin: 2.5rem 0 .75rem; }
/* Underlines stay, because on a page that is mostly prose and tables a link has
   to be findable without hovering. They just sit lower and thinner. */
a {
  color: #12457f;
  text-decoration-thickness: from-font;
  text-underline-offset: .15em;
}

:focus-visible { outline: 2px solid #12457f; outline-offset: 2px; }

header p.units { color: var(--muted); margin: 0 0 1.5rem; }

nav.crumbs { margin-bottom: 1.5rem; font-size: .9rem; }

#chart { width: 100%; min-height: 420px; }

.chart-tools { display: flex; align-items: center; gap: .6rem; }
.chart-tools button {
  font: inherit;
  color: var(--fg);
  background: #f6f6f6;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: .2rem .6rem;
  cursor: pointer;
}
.chart-tools button:hover { background: #ececec; }

table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); }
th { font-weight: 600; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Examples are meant to be copied, so they need to survive a narrow window. */
pre {
  background: #f6f6f6;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: .7rem .8rem;
  overflow-x: auto;
  font-size: .875rem;
  line-height: 1.45;
}
code { font-size: .9em; }
pre code { font-size: 1em; }

/* A field table is mostly short names against long prose, so keep the names on
   one line and let the descriptions take the width. Wide tables scroll inside
   themselves rather than pushing the page sideways on a phone. */
.scroll { overflow-x: auto; }
table.fields td:first-child { white-space: nowrap; vertical-align: top; }
table.fields td:last-child { min-width: 20rem; }

ul.plain { list-style: none; padding: 0; }
ul.plain > li { border-bottom: 1px solid var(--line); padding: .75rem 0; }

p.note { margin: .25rem 0; }
p.meta { margin: .25rem 0; color: var(--muted); font-size: .875rem; }

.swatch {
  display: inline-block;
  width: .7rem;
  height: .7rem;
  border-radius: 2px;
  vertical-align: baseline;
}

ul.credits { padding-left: 1.1rem; color: var(--muted); font-size: .85rem; }

footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .85rem;
}

/* uPlot's legend is also the series toggle, so give it room to read as a control. */
.u-legend { font-size: .9rem; }
.u-legend .u-series { cursor: pointer; }


/* ---- Expected Value ------------------------------------------------------
   The writing side. Same palette and the same plain intent as the data pages,
   but prose has different needs from tables: a serif at a narrower measure,
   because 60rem of sans is a comfortable table and an uncomfortable paragraph. */

.masthead { margin-bottom: 2.5rem; }
.masthead h1 { font-size: 1.75rem; letter-spacing: -.01em; }

/* ---- Site header ---------------------------------------------------------
   The same band at the top of every page: the wordmark on the left leading
   home, the sections on the right. It wraps to two rows on a narrow screen
   rather than shrinking the wordmark to the point of illegibility. */

header.site {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 2rem;
  margin-bottom: 2.5rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--line);
}

/* width and height are on the img itself so the space is reserved before the
   PNG arrives and the page does not jump. The alt text carries the name. */
header.site .wordmark { display: block; line-height: 0; }
header.site .wordmark img {
  width: 11rem;
  max-width: 100%;
  height: auto;
}

nav.sections {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: .9rem;
}

/* The section you are on is stated by aria-current, so the styling hangs off
   that rather than a class the markup could forget to keep in step. */
nav.sections a { text-decoration: none; color: var(--muted); }
nav.sections a:hover { color: var(--fg); text-decoration: underline; }
nav.sections a[aria-current] { color: var(--fg); font-weight: 600; }

p.units.lede { margin-top: -1.5rem; }

/* The front page is writing on the left and holdings on the right. The columns
   are unequal on purpose: the posts are the page, the data links are the way in.
   Column headings sit on a shared baseline, so their top margin has to go. */
.home {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 0 4rem;
  align-items: start;
}

h2.col {
  margin-top: 0;
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}

h2.col a { color: inherit; text-decoration: none; }
h2.col a:hover { color: var(--fg); }

.home .posts > li:first-child { padding-top: .9rem; }
.home ul.plain > li:first-child { padding-top: .9rem; }
.home .more { font-size: .875rem; margin-top: 1rem; }

@media (max-width: 46rem) {
  .home { grid-template-columns: 1fr; gap: 2.75rem 0; }
}

/* The index is a dated list, so the year runs down the left as its own column,
   the way a vintage column runs down a data table. On a site about long-run
   series, when something was written is information rather than a byline. */
ol.posts { list-style: none; padding: 0; margin: 0; }

ol.posts > li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}

.posts .year {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: .875rem;
  padding-top: .15rem;
}

.posts .entry { display: flex; flex-direction: column; gap: .3rem; }
.posts .entry > a { font-size: 1.0625rem; }
.posts .summary { color: var(--fg); }
.posts .entry > time { color: var(--muted); font-size: .8125rem; }

.post { max-width: 34rem; }
.post > h1 { font-size: 1.75rem; line-height: 1.25; letter-spacing: -.01em; }
.post .meta { margin-bottom: 2rem; }

.post p,
.post li,
.post blockquote {
  font: 1.0625rem/1.7 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

.post h2 { font-size: 1.15rem; margin: 2.25rem 0 .6rem; }
.post h3 { font-size: 1rem; margin: 1.75rem 0 .5rem; }
.post p { margin: 0 0 1.15rem; }
.post img { max-width: 100%; height: auto; }

.post blockquote {
  margin: 1.5rem 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--line);
  color: var(--muted);
}

/* Footnotes are how a source gets cited without breaking the sentence, so they
   are load-bearing here rather than an afterthought. */
.post .footnote { font-size: .9rem; color: var(--muted); }
.post .footnote hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0 1rem; }
.post .footnote ol { padding-left: 1.1rem; }
.post .footnote p { font-size: .9rem; }

@media (max-width: 34rem) {
  ol.posts > li { grid-template-columns: 1fr; gap: .3rem; }
  .posts .year { padding-top: 0; }
}