@import url("https://fonts.googleapis.com/css2?family=Courier+Prime&family=EB+Garamond:ital,wght@0,400;0,600;1,400&family=IM+Fell+English:ital@0;1&display=swap");

/* Shared dark, letterpress look for every article. Loaded after each article's own stylesheet. */
:root {
  --paper: #12110e;
  --ink: #ece5d3;
  --muted: #8f8a78;
  --accent: #ea9270;
  --line: #2c2a23;
  --wash: #1d1b16;
  --blue: #8fb8d4;
  --green: #8fc29a;
  --title: "IM Fell English", Georgia, serif;
  --text: "EB Garamond", Georgia, serif;
  --mono: "Courier Prime", ui-monospace, monospace;
  --plate: #efe8d6;
  --soft: #b9b3a1;
  --dek: #cfc8b5;
  --strong-caption: #c9c2ae;
  --rule: #4a473c;
  --code: #e9c9a8;
  --pre: #ddd6c3;
  --hover: #f4b9a2;
  --select: #5b3a2c;
  --select-ink: #fff;
  --cell: #4a3a22;
  --cell-used: #24402f;
  --cell-used-ink: #cfe8d5;
  --bar: #8a7a62;
  --keyword: #ea9270;
  --string: #8fc29a;
  --comment: #9a9682;
}

:root[data-theme="light"] {
  --paper: #fffff8; --ink: #24251f; --muted: #707267; --accent: #943b2d; --line: #dedfd3; --wash: #f5f4e9;
  --blue: #356d92; --green: #3e7258; --plate: transparent; --soft: #55574d; --dek: #3a3b33; --strong-caption: #484b40;
  --rule: #c5c9ba; --code: #653f31; --pre: #343a30; --hover: #5c251b; --select: #ead5b9; --select-ink: #222;
  --cell: #e9e1c9; --cell-used: #dceadd; --cell-used-ink: #244d3b; --bar: #c8b8a3; --keyword: #914c30; --string: #42715e; --comment: #7c8272;
}

html, body { background: var(--paper); }
body { color: var(--ink); font-family: var(--text); font-size: 19.5px; line-height: 1.5; }
a { color: var(--accent); }
a:hover { color: var(--hover); }
::selection { background: var(--select); color: var(--select-ink); }

h1, .prose h2, .prose h3 { font-family: var(--title); font-weight: 400; letter-spacing: 0; }
h1 { font-size: 39px; line-height: 1.12; }
.prose h2 { font-size: 27px; line-height: 1.18; }
.prose h3 { font-size: 22px; }
.dek { color: var(--dek); font-size: 21px; line-height: 1.34; }
.prose strong, .prose b { font-weight: 600; }

.site-header, .site-footer, .eyebrow, .byline, .reading-note, .contents, .small, .sub, th {
  font-family: var(--mono);
}
.site-header nav a { color: var(--muted); }
.site-header nav a[aria-current], .wordmark, .eyebrow { color: var(--accent); }
.wordmark { font-weight: 400; }
.byline, .reading-note, .site-footer { color: var(--muted); }

figcaption, .wide figcaption, .column-figure figcaption, .fig-natural figcaption, .fig-float figcaption, .code-figure figcaption {
  font-family: var(--text);
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--muted);
}
figcaption b, .wide figcaption b, .column-figure figcaption b, .fig-natural figcaption b, .fig-float figcaption b {
  color: var(--strong-caption);
  font-weight: 600;
}
.sub { color: var(--muted); }

code, p > code, li > code { background: var(--wash); color: var(--code); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
pre, pre code { background: var(--wash); color: var(--pre); }
pre { border-left: 0; }

table, .table-wrap table { font-family: var(--text); font-size: 16.5px; }
th { color: var(--muted); border-bottom-color: var(--rule); font-weight: 400; font-size: 12px; }
td { border-bottom-color: var(--line); }
tr:nth-child(even) { background: none; }

.sidenote { color: var(--soft); border-left-color: var(--rule); }
.sidenote b { color: var(--accent); }
.contents { border-color: var(--line); }
.contents a { color: var(--ink); }
.contents summary { color: var(--accent); }
.site-footer { border-top-color: var(--line); }

/* Drawings made for paper sit on a paper plate so their ink stays readable. */
img[src$=".svg"], img[src$=".png"]:not([src*="crest-"]):not([src*="tree-"]) { background: var(--plate); }
.diagram { background: var(--plate); padding: 10px; }

/* Keep the page minimal */
.wordmark span, .reading-note { display: none; }
.site-header nav a[aria-current]:nth-child(2):nth-last-child(2) { display: none; }
.site-footer p:first-child { display: none; }
.theme-toggle { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--muted); cursor: pointer; }
.theme-toggle:hover { color: var(--accent); }

/* Inline diagrams */
:root:not([data-theme="light"]) .face { filter: brightness(1.9) saturate(.85); }

/* Muse article: code, labs and interactive tables */
pre .comment { color: var(--comment); }
pre .keyword { color: var(--keyword); }
pre .string { color: var(--string); }
.chapter-intro { color: var(--soft); }
.deep { background: var(--wash); }
.bar-fill { background: var(--bar); }
.bar-fill.candidate { background: var(--string); }
.ledger tr:target, .lab-matrix td.selected { background: var(--cell); color: var(--ink); }
.lab-matrix table { background: var(--wash); color: var(--ink); }
.lab-matrix td.used { background: var(--cell-used); color: var(--cell-used-ink); }
button, input, select { background: var(--wash); color: var(--ink); border: 1px solid var(--rule); font-family: var(--mono); }
button:hover { border-color: var(--accent); }

@media (max-width: 560px) {
  body { font-size: 18.5px; }
  h1 { font-size: 32px; }
  .prose h2 { font-size: 24px; }
  .dek { font-size: 19px; }
}

@media print {
  html, body { background: white; color: black; }
  img, .diagram { background: none; }
}