/* Public pages. One column, one typeface, no JavaScript, no web fonts —
   nothing is downloaded that is not this file and the HTML. */

:root {
  --bg: #fdfdfb;
  --fg: #1b1b19;
  --muted: #76746c;
  --rule: #e2e0d8;
  --accent: #1b1b19;
  --code-bg: #f3f2ec;
  --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111110;
    --fg: #e4e2dc;
    --muted: #8b8880;
    --rule: #2a2a27;
    --accent: #e4e2dc;
    --code-bg: #1a1a18;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 0 1.5rem 6rem;
  background: var(--bg);
  color: var(--fg);
  font: 1.0625rem/1.65 ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  /* Sticky footer: on a short page — a one-line post especially — <main> grows
     to fill the viewport so the colophon (rss · console · private) sits at the
     bottom instead of floating under the text. Long pages are unaffected. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main, .masthead, .colophon { max-width: var(--measure); margin-inline: auto; }
/* Grows to absorb the free space; the colophon's 5rem top margin is honoured
   in both the short-page and long-page cases. */
main { flex: 1 0 auto; }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem; top: 1rem;
  position: fixed;
  background: var(--bg);
  padding: .5rem .75rem;
  border: 1px solid var(--rule);
}

/* --- masthead ------------------------------------------------------------ */

.masthead { padding: 4.5rem 0 3rem; }

.wordmark {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9375rem;
  letter-spacing: .02em;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.wordmark:hover { border-bottom-color: var(--fg); }

.tagline {
  margin: .5rem 0 0;
  color: var(--muted);
  font-size: .9375rem;
  font-style: italic;
}

/* --- index --------------------------------------------------------------- */

.section-title { font-size: 1.25rem; font-weight: 600; margin: 0 0 .25rem; }

.year { margin: 0 0 2.5rem; }

.year h2 {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--muted);
  margin: 0 0 .75rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--rule);
}

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

/* Date in a fixed left column, title and excerpt stacked in the right one,
   so the excerpt hangs under the title rather than under the date. */
.index li {
  display: grid;
  grid-template-columns: 7rem 1fr;
  column-gap: 1rem;
  align-items: baseline;
  padding: .55rem 0;
}

/* Rows are stated explicitly rather than left to auto-placement: the title and
   the excerpt both sit in column 2, and only an explicit row keeps the excerpt
   under the title instead of beside it. */
.index time {
  grid-column: 1;
  grid-row: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75rem;
  color: var(--muted);
  white-space: nowrap;
}

.index a {
  grid-column: 2;
  grid-row: 1;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  justify-self: start;
}
.index a:hover { border-bottom-color: var(--fg); }

.index .excerpt {
  grid-column: 2;
  grid-row: 2;
  margin: .15rem 0 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

.empty { color: var(--muted); font-style: italic; }

/* --- post ---------------------------------------------------------------- */

.post h1 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 .5rem;
  letter-spacing: -0.01em;
}

.meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75rem;
  color: var(--muted);
  margin: 0 0 2.5rem;
}
.meta a { color: var(--muted); }

.private-note { letter-spacing: .04em; }

.preview-flag {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75rem;
  color: var(--bg);
  background: var(--fg);
  display: inline-block;
  padding: .2rem .5rem;
  margin: 0 0 1.5rem;
}

.prose > *:first-child { margin-top: 0; }

.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre, .prose table {
  margin: 0 0 1.4rem;
}

.prose h2, .prose h3, .prose h4 {
  font-weight: 600;
  line-height: 1.3;
  margin: 2.5rem 0 .75rem;
}
.prose h2 { font-size: 1.25rem; }
.prose h3 { font-size: 1.0625rem; }
.prose h4 { font-size: 1rem; color: var(--muted); }

.prose a { color: var(--fg); text-decoration: underline; text-underline-offset: .15em; }
.prose a:hover { text-decoration-thickness: 2px; }

.prose blockquote {
  border-left: 2px solid var(--rule);
  padding-left: 1.25rem;
  margin-left: 0;
  color: var(--muted);
  font-style: italic;
}

.prose img { max-width: 100%; height: auto; display: block; margin: 2rem auto; }

.prose figure { margin: 2rem 0; }
.prose figcaption { font-size: .8125rem; color: var(--muted); text-align: center; }

.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85em;
  background: var(--code-bg);
  padding: .1em .35em;
  border-radius: 2px;
}

.prose pre, .codehilite {
  background: var(--code-bg);
  padding: 1rem 1.15rem;
  border-radius: 3px;
  /* Long lines scroll inside the block; the page never scrolls sideways. */
  overflow-x: auto;
}
.codehilite pre { background: none; padding: 0; margin: 0; }
.prose pre code { background: none; padding: 0; font-size: .8125rem; line-height: 1.55; }

.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; display: block; overflow-x: auto; }
.prose th, .prose td { border-bottom: 1px solid var(--rule); padding: .5rem .6rem; text-align: left; }
.prose th { font-weight: 600; }

.prose .footnote { font-size: .875rem; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 1rem; }

.prose .admonition {
  border-left: 2px solid var(--rule);
  padding: .9rem 1.15rem;
  background: var(--code-bg);
  margin: 0 0 1.4rem;
}
.prose .admonition-title { font-weight: 600; margin: 0 0 .4rem; }

/* --- footer -------------------------------------------------------------- */

.back { margin-top: 3.5rem; }
.back a, .colophon a {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75rem;
  color: var(--muted);
  text-decoration: none;
}
.back a:hover, .colophon a:hover { color: var(--fg); }

.colophon {
  margin-top: 5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75rem;
  color: var(--muted);
}

@media (max-width: 30rem) {
  .masthead { padding-top: 3rem; }
  /* One column: the date becomes a line above the title instead of a gutter. */
  .index li { grid-template-columns: 1fr; row-gap: .1rem; }
  .index time { grid-column: 1; grid-row: 1; }
  .index a { grid-column: 1; grid-row: 2; }
  .index .excerpt { grid-column: 1; grid-row: 3; }
}