/* Cole Gottdank / wiki: a lab notebook with a ledger.
   Plain sans on near-white, ballpoint-blue links, a mono ledger.
   No shadows, no gradients, no motion, no dark mode. */

:root {
  --paper: #FCFCFB;
  --ink: #16181D;
  --muted: #5F6470;
  --rule: #D6D9D3;
  --pen: #1D3FD6;
  --well: #F1F2EF;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

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

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

body {
  max-width: 680px;
  margin: 0 auto;
  padding: 32px 20px 48px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: break-word;
}

/* ---- links ---- */

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

:focus-visible {
  outline: 2px solid var(--pen);
  outline-offset: 2px;
}

/* ---- structure ---- */

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 64px;
  font-size: 15px;
  line-height: 1.5;
}

/* The brand is where you already are, not somewhere to go. */
.site-nav .brand { color: var(--ink); text-decoration: none; }

.site-nav .nav-links a + a { margin-left: 16px; }

.site-footer {
  margin-top: 96px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.site-footer .sep { padding: 0 8px; }

/* ---- type ---- */

h1 { font-size: 28px; line-height: 1.2; font-weight: 600; margin: 0 0 16px; }
h2 { font-size: 19px; line-height: 1.3; font-weight: 600; margin: 40px 0 12px; }
h3 { font-size: 17px; line-height: 1.4; font-weight: 600; margin: 24px 0 8px; }
h4, h5, h6 { font-size: 17px; line-height: 1.4; font-weight: 600; margin: 24px 0 8px; }

p { margin: 0 0 16px; }

ul, ol { margin: 0 0 16px; padding-left: 24px; }
li { margin-bottom: 4px; }

strong { font-weight: 600; }

blockquote {
  margin: 0 0 16px;
  padding-left: 16px;
  color: var(--muted);
}

code, pre { font-family: var(--mono); font-size: 14px; line-height: 1.5; }
code { background: var(--well); padding: 0 4px; }
pre { background: var(--well); padding: 12px; overflow-x: auto; margin: 0 0 16px; }
pre code { background: none; padding: 0; }

img { max-width: 100%; height: auto; }

hr { border: none; border-top: 1px solid var(--rule); margin: 32px 0; }

table { border-collapse: collapse; width: 100%; margin: 0 0 16px; font-size: 15px; }
th, td { text-align: left; padding: 4px 8px 4px 0; vertical-align: top; }
th { font-weight: 600; }

.small { font-size: 15px; line-height: 1.5; color: var(--muted); }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 8px;
}

.mono { font-family: var(--mono); font-size: 14px; line-height: 1.5; }

/* ---- homepage ---- */

.intro { margin-bottom: 48px; }

.topic { margin-bottom: 48px; }
.topic h2 { margin-top: 0; }
.topic-blurb { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 0 0 8px; }

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

/* Title and citation sit on one baseline; the citation wraps under it alone. */
.rows li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin-bottom: 6px;
}

.prov, .next-up {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.next-up { margin: 4px 0 0; }

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

.recent li {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 6px;
}

/* ---- article ledger ---- */

.lede { color: var(--muted); margin: 0 0 24px; }

.ledger {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px 16px;
  margin: 0 0 48px;
  padding: 16px;
  border: 1px solid var(--rule);
  background: var(--well);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
}

.ledger dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.ledger dd { margin: 0; }

/* A page that has not run leaves ledger lines unfilled; mark them so the
   blank reads as deliberate, not broken. */
.ledger dd:empty::before { content: "—"; color: var(--muted); }

/* ---- table of contents ---- */

.toc { margin: 0 0 48px; }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin-bottom: 4px; font-size: 15px; line-height: 1.5; }

/* ---- article footers: recent changes, next in topic ---- */

.changes { margin-top: 48px; }
.changes ul { list-style: none; margin: 0; padding: 0; }

.changes li {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 4px;
}

.next { margin-top: 48px; font-size: 15px; line-height: 1.5; }

/* ---- form controls: the only radius on the page ---- */

input, textarea, button, select {
  font-family: inherit;
  font-size: 17px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 8px;
}