/* thenewmad — one stylesheet, no fonts to download, no javascript. */

:root {
  --brand: #5b2a86;    /* purple */
  --visited: #80609f;
  --text: #1a1a1a;
  --muted: #8a8a8a;
  --rule: #e2dce9;
  --tint: #f5f1f9;
}

html { background: #fff; scrollbar-gutter: stable; }   /* same layout whether or not a page scrolls */
body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font: 15px/1.7 Verdana, Geneva, sans-serif;
}
a { color: var(--brand); }
a:visited { color: var(--visited); }

/* ---------- layout: side nav + centered text column ---------- */
.wrap {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(0, 600px) minmax(0, 1fr);
  padding: 56px 24px 0;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
}
.side {
  justify-self: end;
  align-self: start;
  position: sticky;
  top: 56px;
  margin-right: 56px;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  line-height: 2.1;
}
.side a { color: var(--brand); text-decoration: none; }
.side a:hover { text-decoration: underline; }
.side .name { margin-bottom: 18px; line-height: 0; }
.name img { display: block; width: 130px; height: auto; }   /* static/logo.svg, made by tools/make_logo.py */
.side .on { color: var(--text); font-weight: bold; }
main { min-width: 0; display: flex; flex-direction: column; }   /* fills the window height */
.content { flex: 1; padding-bottom: 48px; }

/* ---------- text ---------- */
h1 { font: normal 30px/1.25 Georgia, "Times New Roman", serif; margin: 0 0 28px; }
h1 + .meta { margin-top: -22px; }
h2 { font: bold 19px/1.3 Georgia, "Times New Roman", serif; margin: 2em 0 .5em; }
p { margin: 0 0 1.2em; }
.meta { font-size: 12px; color: var(--muted); margin: 0 0 32px; }
.meta a { color: var(--muted); }
blockquote { margin: 1.4em 0; padding-left: 1em; border-left: 3px solid var(--rule); color: #444; }
pre, code { font: 13px/1.5 "Courier New", Courier, monospace; }
pre { background: var(--tint); padding: 10px 12px; overflow-x: auto; }
img { max-width: 100%; height: auto; }
table { border-collapse: collapse; font-size: 13px; margin: 0 0 1.2em; }
th, td { border: 1px solid var(--rule); padding: 4px 10px; text-align: left; }
th { background: var(--tint); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4em 0 1.2em; }
sup { line-height: 0; }
sup a { text-decoration: none; }

/* footnotes: write [^1] in the text and "[^1]: the note" anywhere below */
.footnote-ref::before { content: "["; }
.footnote-ref::after { content: "]"; }
.footnote { font-size: 13px; color: #444; }
.footnote ol { padding-left: 1.4em; }
.footnote p { margin: 0 0 .6em; }
.footnote-backref { text-decoration: none; margin-left: 4px; }
.back { font-size: 13px; margin-top: 36px; }

/* ---------- essay list (home) ---------- */
.year { font-size: 12px; font-weight: normal; color: var(--muted); letter-spacing: .08em; margin: 0 0 6px; }
.list { list-style: none; margin: 0 0 32px; padding: 0; }
.list li { margin: 0 0 8px; }
.list a { text-decoration: none; }
.list a:hover { text-decoration: underline; }
.date { font-size: 12px; color: var(--muted); margin-left: 8px; white-space: nowrap; }

/* ---------- footer ---------- */
.foot {
  position: sticky;              /* always visible at the bottom of the window */
  bottom: 0;
  background: #fff;
  padding: 10px 0 14px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--muted);
}
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--brand); text-decoration: underline; }

/* ---------- phones: nav becomes one compact bar above the text ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { display: flex; flex-direction: column; padding: 14px 16px 0; }
  main { flex: 1; }
  .side {
    position: static;
    justify-self: auto;
    margin: 0 0 28px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
    flex-direction: row;
    align-items: center;
    gap: 18px;
    font-size: 14px;
    line-height: 1;
  }
  .side .name { margin: 0 auto 0 0; }            /* logo left, links pushed right */
  .name img { width: 72px; }
  .side a:not(.name) { padding: 10px 0; }         /* comfortable tap height */
  .side .on {
    font-weight: normal;
    text-decoration: underline 2px var(--brand);
    text-underline-offset: 6px;
  }
}