:root {
  --ink: #1a1a19;
  --ink-soft: #57564f;
  --ink-faint: #8a8880;
  --bg: #fdfdfc;
  --surface: #f5f4f0;
  --rule: #e2e1da;
  --accent: #2f6fb5;
  --measure: 46rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eceae3;
    --ink-soft: #b6b4ab;
    --ink-faint: #85837b;
    --bg: #161615;
    --surface: #211f1e;
    --rule: #33312e;
    --accent: #7fb2e8;
  }
}

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

body {
  margin: 0;
  padding: 4rem 1.5rem 6rem;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.7 ui-serif, Georgia, "Iowan Old Style", serif;
}

.layout {
  display: grid;
  /* No var() inside minmax(): Safari drops the whole declaration when a custom
     property appears in a grid track function, which silently collapses this to
     a single column and puts the nav on top. Plain units only here; the content
     width is capped on <main> instead. */
  /* Left-anchored, not centred: on a wide screen a centred assembly pushes the
     rail into the middle of the window and starts headings hundreds of pixels
     in. The text column is capped by the track itself (plain units, no var --
     see the note above) so prose stays readable without centring the block. */
  grid-template-columns: 15rem minmax(0, 46rem);
  gap: 3.5rem;
  align-items: start;
}
main { max-width: var(--measure); min-width: 0; }

/* Collapsed: the rail is removed from the grid entirely and the content is
   allowed to use most of the window. Class lives on <html> so an inline head
   script can set it before first paint, with no flash of the wrong state. */
html.nav-collapsed .layout {
  grid-template-columns: minmax(0, 78rem);
  gap: 0;
}
html.nav-collapsed .sidebar { display: none; }
html.nav-collapsed main { max-width: none; }

.nav-toggle {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 20;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  color: var(--ink-soft);
  background: var(--surface);
  border: 0.5px solid var(--rule);
  border-radius: 8px;
}
.nav-toggle:hover { color: var(--accent); border-color: var(--rule); }
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sidebar {
  position: sticky;
  top: 4rem;
  align-self: start;
  max-height: calc(100vh - 5.5rem);
  overflow-y: auto;
  font: 400 14px/1.5 ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  padding-right: .5rem;
}
.sidebar a { color: var(--ink-soft); text-decoration: none; display: block; padding: 3px 0 3px 10px; border-left: 2px solid transparent; }
.sidebar a:hover { color: var(--accent); }
.sidebar a[aria-current="page"] {
  color: var(--accent);
  font-weight: 500;
  border-left-color: var(--accent);
  background: var(--surface);
}
.nav-home {
  margin-bottom: 1rem;
  padding-left: 0 !important;
  border-left: 0 !important;
  font-weight: 500;
}
.nav-cat {
  margin: 1.1rem 0 .3rem;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--ink);
}
.nav-sub {
  margin: .5rem 0 .15rem 10px;
  font-size: 12px;
  color: var(--ink-faint);
}
.sidebar ul { list-style: none; padding: 0; margin: 0 0 0 10px; }

/* Single column once there is no room for a side rail. */
@media (max-width: 66rem) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .sidebar {
    position: static;
    max-height: none;
    border: 0.5px solid var(--rule);
    border-radius: 10px;
    padding: .4rem 1rem .8rem;
    background: var(--surface);
  }
}


h1, h2, h3, h4 {
  font-family: ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

h1 { font-size: 1.9rem; margin: 0 0 .4rem; letter-spacing: -.01em; }
h2 { font-size: 1.3rem; margin: 2.6rem 0 .8rem; padding-top: .8rem; border-top: 1px solid var(--rule); }
h3 { font-size: 1.08rem; margin: 1.8rem 0 .5rem; }

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

.paper-head { margin-bottom: 2rem; }
.paper-head .meta { color: var(--ink-soft); font-size: .95rem; margin: .2rem 0; }
.paper-head .links { font-size: .9rem; margin: .7rem 0 0; font-family: ui-sans-serif, sans-serif; }

.tag, .status {
  display: inline-block;
  font: 500 12px/1 ui-sans-serif, sans-serif;
  padding: 4px 9px;
  margin: 3px 5px 3px 0;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
}
.status { margin-left: .6rem; }
.status-read { color: #2f7a4f; }
.status-reading { color: #9a6a1a; }

ul.papers { list-style: none; padding: 0; }
ul.papers li { padding: .85rem 0; border-bottom: 1px solid var(--rule); }
ul.papers .title { font-family: ui-sans-serif, sans-serif; font-weight: 600; font-size: 1.05rem; }
ul.papers .meta { color: var(--ink-soft); font-size: .9rem; margin-top: .15rem; }

#TOC {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 2.5rem;
  font: 400 15px/1.55 ui-sans-serif, sans-serif;
}
#TOC ul { padding-left: 1.1rem; margin: .3rem 0; }
#TOC > ul { padding-left: 0; list-style: none; }

table { border-collapse: collapse; width: 100%; margin: 1.4rem 0; font-size: .95rem; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-family: ui-sans-serif, sans-serif; font-weight: 600; font-size: .88rem; color: var(--ink-soft); }

code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .88em; background: var(--surface); padding: .12em .35em; border-radius: 4px; }
pre { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: .9rem 1.1rem; overflow-x: auto; }
pre code { background: none; padding: 0; }

blockquote { margin: 1.4rem 0; padding: .2rem 0 .2rem 1.1rem; border-left: 3px solid var(--rule); color: var(--ink-soft); }

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

.katex-display { overflow-x: auto; overflow-y: hidden; padding: .35rem 0; }
.katex { font-size: 1.04em; }

@media (max-width: 34rem) {
  body { padding: 1.75rem 1rem 4rem; font-size: 16px; }
  h1 { font-size: 1.55rem; }
}

figure {
  margin: 2rem 0;
  padding: 0;
}
figure img, figure svg {
  display: block;
  width: 100%;
  height: auto;
  border: 0.5px solid var(--rule);
  border-radius: 10px;
  background: var(--surface);
}
figcaption {
  margin-top: .7rem;
  font: 400 14px/1.6 ui-sans-serif, -apple-system, sans-serif;
  color: var(--ink-soft);
}
figcaption b, figcaption strong { font-weight: 500; color: var(--ink); }

/* ---- finding things: search box, filters, tag buttons, related notes ---- */
.nav-filter, #q {
  width: 100%; font: inherit; font-size: .88rem; color: var(--ink); background: var(--bg, transparent);
  border: 1px solid var(--rule); border-radius: 8px; padding: 6px 10px; margin: .2rem 0 .6rem;
}
.nav-filter:focus-visible, #q:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#q { font-size: 1rem; padding: 9px 12px; margin: 0 0 .5rem; }
.finder { margin: 0 0 1.4rem; }
.finder-row { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; font-family: ui-sans-serif, sans-serif;
  font-size: .85rem; color: var(--ink-soft); }
.finder select { font: inherit; color: var(--ink); background: transparent; border: 1px solid var(--rule); border-radius: 6px; padding: 2px 6px; }
.count { margin-left: auto; }
.reset { font: inherit; font-size: .85rem; color: var(--accent); background: none; border: 0; cursor: pointer; text-decoration: underline; padding: 0; }
.chips { margin-top: .6rem; font-family: ui-sans-serif, sans-serif; font-size: .85rem; color: var(--ink-soft); }
.chips summary { cursor: pointer; }
.chips div { display: flex; flex-wrap: wrap; gap: .3rem; padding: .5rem 0; }
.chip {
  font: inherit; font-size: .78rem; color: var(--ink-soft); background: transparent; border: 1px solid var(--rule);
  border-radius: 999px; padding: 1px 9px; cursor: pointer;
}
button.tag { cursor: pointer; }
.chip small { opacity: .65; }
.chip:hover, button.tag:hover { color: var(--accent); border-color: var(--accent); }
.chip.on, button.tag.on { color: #fff; background: var(--accent); border-color: var(--accent); }
.none { color: var(--ink-soft); font-style: italic; }
[hidden] { display: none !important; }
ul.papers .summary {
  margin: .3rem 0 .2rem; font-size: .9rem; line-height: 1.45; color: var(--ink-soft); cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
ul.papers .summary.open { display: block; }
.kind { margin-left: .6rem; font-family: ui-sans-serif, sans-serif; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-soft); border: 1px solid var(--rule); border-radius: 4px; padding: 0 5px; }
.related { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.related ul { list-style: none; padding: 0; }
.related li { padding: .45rem 0; }
.related .meta, .related .rel-note { color: var(--ink-soft); font-size: .85rem; }
.related .rel-note { display: block; }