/* ===================================================================
   Plain, early-2000s academic homepage.  Times body, blue links,
   left-aligned, almost no chrome.  Colors come from the variables
   below so light/dark can swap the whole page.
   =================================================================== */

:root {
  --bg:      #ffffff;
  --fg:      #000000;
  --link:    #0000ee;
  --visited: #551a8b;
  --muted:   #555555;
  --rule:    #999999;
  --code-bg: #f0f0f0;
}

/* Explicit dark mode (set by the toggle) */
[data-theme="dark"] {
  --bg:      #111111;
  --fg:      #d0d0d0;
  --link:    #6cb6ff;
  --visited: #b48ce0;
  --muted:   #999999;
  --rule:    #444444;
  --code-bg: #1d1d1d;
}

/* System dark mode — applies only when the user hasn't forced light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:      #111111;
    --fg:      #d0d0d0;
    --link:    #6cb6ff;
    --visited: #b48ce0;
    --muted:   #999999;
    --rule:    #444444;
    --code-bg: #1d1d1d;
  }
}

/* ── Base ───────────────────────────────────────────────────────── */
body {
  font-family: "Trebuchet MS", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  margin: 0;
}

.wrap {
  max-width: none;           /* fill the window; no dead margin on the right */
  margin: 0;                 /* left-aligned, not centered */
  padding: 1.25em 2em 3em 2em;
}

/* Global two-column shell — same on every page so nothing shifts. */
.layout { display: flex; gap: 2.5em; align-items: flex-start; }
.layout main { flex: 1; min-width: 0; max-width: 44em; }

a         { color: var(--link); }
a:visited { color: var(--visited); }

h1 { font-size: 2em;    margin: 0 0 .3em; }
h2 { font-size: 1.2em;  margin: 1.4em 0 .3em; }
h3 { font-size: 1.05em; margin: 1.2em 0 .3em; }

/* Headings inside a post body are subordinate to the post title. */
.post-body h2 { font-size: 1.1em;  margin: 1.6em 0 .3em; }
.post-body h3 { font-size: 1em;    margin: 1.3em 0 .3em; }

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

p { margin: .7em 0; }

/* ── Masthead / nav ─────────────────────────────────────────────── */
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
}
.site-title { font-size: 1.5em; font-weight: bold; }
.site-title a { color: var(--fg); text-decoration: none; }
.site-title a:visited { color: var(--fg); }

nav.main { margin: .2em 0 .1em; }
nav.main a.active { font-weight: bold; }

/* Text-link buttons (theme + view toggles) */
.linkbutton {
  font-family: inherit;
  font-size: 1em;
  background: none;
  border: none;
  padding: 0;
  color: var(--link);
  cursor: pointer;
  text-decoration: underline;
}
.linkbutton:hover { color: var(--visited); }
#theme-toggle { font-size: .85em; }

/* ── Meta (dates, tags) ─────────────────────────────────────────── */
.post-meta, .paper-meta { color: var(--muted); font-size: .9em; margin: .2em 0 1em; }
time { color: var(--muted); }
.tag { color: var(--link); }

/* ── Prose ──────────────────────────────────────────────────────── */
.post-body img { max-width: 100%; height: auto; }
.post-body blockquote {
  margin: 1em 0 1em 1.5em;
  padding-left: .8em;
  border-left: 3px solid var(--rule);
  color: var(--muted);
}

code, kbd, samp, pre { font-family: "Courier New", Courier, monospace; }
code { background: var(--code-bg); padding: 0 .2em; }
pre {
  background: var(--code-bg);
  padding: .6em .8em;
  overflow-x: auto;
  font-size: .9em;
  line-height: 1.4;
  border: 1px solid var(--rule);
}
pre code { background: none; padding: 0; }

table { border-collapse: collapse; margin: 1em 0; }
th, td { border: 1px solid var(--rule); padding: .3em .6em; text-align: left; }

/* Footnotes (Goldmark) */
.footnotes { font-size: .9em; color: var(--muted); margin-top: 2.5em; }
.footnotes hr { display: none; }   /* Goldmark emits its own rule; the spacing above is enough */

/* Table of contents */
.toc { font-size: .9em; margin: 1em 0; }
.toc summary { cursor: pointer; color: var(--muted); }

/* Math (KaTeX): let wide display equations scroll on small screens */
.katex-display { overflow-x: auto; overflow-y: hidden; }

/* ── Simple lists (research fallback, tag pages, archive) ───────── */
.post-list { margin: .5em 0; padding-left: 1.2em; }
.post-list li { margin: .15em 0; }
.post-list time { font-size: .9em; margin-left: .4em; }

/* ── Home: full posts ───────────────────────────────────────────── */
.sidebar { width: 16em; flex: none; font-size: .95em; margin-left: auto; }

.intro { margin-bottom: 1.5em; }
.section-label {
  font-weight: normal;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  font-size: .95em;
  margin: 3.5em 0 1em;         /* generous space before the writing section */
}
.full-post { margin-bottom: .5em; }
.full-post .post-title { font-size: 1.4em; margin: .8em 0 .1em; }

/* Headline links read as headlines, not documentation links. */
.post-title a, .entry-head .post-link, .paper-title a {
  color: var(--fg);
  text-decoration: none;
}
.post-title a:hover, .entry-head .post-link:hover, .paper-title a:hover {
  text-decoration: underline;
}
.post-sep { margin: 1.5em 0; }
.more { font-size: .95em; }

.blog-controls { margin: 1em 0; }
#post-search {
  font-family: inherit;
  font-size: .95em;
  padding: 1px 3px;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--fg);
}
#view-toggle { margin-left: .6em; font-size: .9em; }

.post-entry { margin: 0 0 1.1em; }
.entry-head .post-link { font-weight: bold; }
.entry-head time { font-size: .9em; margin-left: .5em; }
.entry-tags { font-size: .9em; }
.entry-summary { margin: .2em 0 0; }

/* Titles-only compact view */
.posts-compact .post-entry { margin: .1em 0; }
.posts-compact .entry-tags,
.posts-compact .entry-summary { display: none; }
.posts-compact .entry-head .post-link { font-weight: normal; }

#no-results { color: var(--muted); }

/* Sidebar blocks */
.sidebar-block { margin-bottom: 1.5em; }
.sidebar-block h3 { font-size: 1em; margin: 0 0 .3em; border-bottom: 1px solid var(--rule); }
.tag-list, .link-list { list-style: none; margin: 0; padding: 0; }
.tag-list li, .link-list li { margin: .1em 0; }

/* Markdown-driven sidebar blocks (content/sidebar.md) — match the others. */
.sidebar-custom h3 { margin-top: 1.3em; }
.sidebar-custom h3:first-child { margin-top: 0; }
.sidebar-custom ul { list-style: none; margin: .2em 0; padding: 0; }
.sidebar-custom li { margin: .1em 0; }
.count { color: var(--muted); font-size: .85em; }
.post-count, .archive-note { color: var(--muted); font-size: .9em; }

/* ── Resources: clear three-level hierarchy on a long index page ── */
.resources-body h2 { font-size: 1.5em; margin: 1.8em 0 .1em; }
.resources-body h3 { font-size: 1.05em; margin: 1.1em 0 .1em; color: var(--muted); }
.resources-body ol { margin: .3em 0 .8em; padding-left: 1.6em; }
.resources-body li { margin: .2em 0; }

/* ── Research / papers ──────────────────────────────────────────── */
.paper { margin: 0 0 1.3em; }
.paper-title { font-size: 1.1em; margin: 0 0 .1em; }
.paper-abstract { margin: .3em 0; }
.paper-links a { margin-right: .7em; }

/* ── Tag cloud ──────────────────────────────────────────────────── */
.tag-cloud { list-style: none; padding: 0; }
.tag-cloud li { display: inline; margin-right: 1em; white-space: nowrap; }

/* ── Footer ─────────────────────────────────────────────────────── */
.site-footer { margin-top: 3em; border-top: 1px solid var(--rule); padding-top: .5em; font-size: .9em; color: var(--muted); }
.site-footer a { margin-right: .8em; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 40em) {
  .wrap { padding: 1em 1.1em 2.5em; }
  .layout { flex-direction: column; gap: 1.2em; }
  .layout main { max-width: none; }
  .sidebar { width: auto; border-top: 1px solid var(--rule); padding-top: .8em; }
}