/* Palette follows the joseki explorer: cream paper, board tan as the accent. */
:root {
  --bg:     #faf7f0;
  --fg:     #222;
  --muted:  #666;
  --link:   #246;
  --rule:   #e2dbc9;
  --accent: #e3b163;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:     #1a1815;
    --fg:     #e8e4da;
    --muted:  #9a948a;
    --link:   #8fb4d4;
    --rule:   #35302a;
    --accent: #b8873f;
  }
}

html {
  /* Keeps the measure readable without a wrapper element. */
  font-size: 17px;
}

body {
  max-width: 40rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

h1 {
  margin: 0;
  font-size: 1.9rem;
  letter-spacing: -0.01em;
}

.tagline {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 1.05rem;
}

header {
  padding-bottom: 1.6rem;
  border-bottom: 3px solid var(--accent);
}

main > p:first-of-type {
  margin-top: 1.8rem;
}

h2 {
  margin: 2.6rem 0 0;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--rule);
  font-size: 1.25rem;
}

h3 {
  margin: 1.8rem 0 0;
  font-size: 1.05rem;
}

h3 + p {
  margin-top: 0.4rem;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration: none;
}

.links {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.links li + li {
  margin-top: 0.4rem;
}

footer {
  margin-top: 3.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.85rem;
}

footer p {
  margin: 0;
}

/* ---- article pages ---- */

.back {
  display: inline-block;
  margin-bottom: 1.4rem;
  font-size: 0.9rem;
}

.byline {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

figure {
  margin: 1.8rem 0;
}

figure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  /* border-box so the 1px border counts inside max-width and cannot overflow. */
  box-sizing: border-box;
  /* Plot backgrounds are white, so they need a border to sit on dark paper. */
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 2px;
}

figcaption {
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Two plots that belong side by side on a wide screen, stacked on a phone. */
.figpair {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 1.8rem 0;
}

.figpair figure {
  flex: 1 1 15rem;
  margin: 0;
}

/* A figure narrower than the text column, e.g. a portrait schematic.
   min() keeps the cap from exceeding the column on a narrow screen. */
figure.narrow img {
  max-width: min(22rem, 100%);
}

/* Multi-panel plots are illegible at text-column width, so let them break out.
   The viewport clamp keeps them from overflowing on a phone. */
.wide {
  width: min(52rem, calc(100vw - 3rem));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Clickable plots open at full resolution; the link must not underline them. */
figure a {
  display: block;
  text-decoration: none;
}

/* Dated addition to an older article. */
.update {
  margin-top: 2.8rem;
  padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 3px solid var(--accent);
}

.update > h2:first-child {
  margin-top: 0.8rem;
  border-bottom: none;
}

.refs {
  margin: 1rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.9rem;
}

.refs li {
  margin-bottom: 0.35rem;
}