/* ==========================================================================
   tufte-main.css — site overrides on top of tufte.css
   Loaded by _layouts/default.html (the Tufte theme).
   ========================================================================== */

/* ---- Layout: left-aligned reading column ---------------------------------
   tufte.css centers an 80%/1400px body and caps body text at width:55% to
   leave room for sidenotes we don't use — which gives a wide right gap and,
   in a narrow centered column, large side margins. Instead: a left-aligned
   column with a fixed ~65-char measure and a small left inset. */
body {
  width: auto;
  max-width: 740px;
  margin: 2.5rem auto 4rem 6vw;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* Tufte caps body text at width:55% (tufte.css) to leave room for sidenotes we
   don't use. Let content fill the column instead. */
article p,
article ol,
article ul,
article dl,
article blockquote,
article table,
article pre,
.post p,
.footer {
  width: auto;
  max-width: 100%;
}

/* Hide Tufte's sidenote / margin-note machinery (unused here) so stray
   classes never leave gaps. */
.sidenote,
.marginnote { display: none; }
input.margin-toggle { display: none; }
label.sidenote-number { display: none; }
label.margin-toggle:not(.sidenote-number) { display: none; }

/* ---- Header: single left-aligned small-caps nav line --------------------- */
.site-header {
  text-align: left;
  margin: 0 0 1.5rem 0;
}

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

.navmenu li {
  display: inline;
  padding-right: 0.5rem;
}

a.navitemlink {
  font-variant: small-caps;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  color: #111;
}
a.navitemlink:hover { color: #555; }

/* ---- Headings ------------------------------------------------------------ */
h1 {
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1.1;
  margin: 2rem 0 1.4rem 0;
}
h2 {
  font-style: normal;   /* override tufte.css h2 { font-style: italic } */
  font-weight: 400;
  font-size: 2.0rem;
  line-height: 1.2;
  margin: 2rem 0 0.6rem 0;
}
h3 {
  font-style: italic;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 1.8rem 0 0.4rem 0;
}

article { padding: 0 0 2.5rem 0; }

/* ---- Horizontal rules ---------------------------------------------------- */
hr {
  width: 100%;
  margin: 2rem auto;
  border: none;
  border-top: 1px solid #ccc;
}

/* ---- Essays listing (Pivotal section on /essays): two-column year | title  */
.essay-rows { list-style: none; margin: 3rem 0 2.5rem 0; padding: 0; }
.essay-rows li { display: flex; align-items: baseline; margin: 0 0 0.45rem; padding: 0; }
.essay-rows li.year-start { margin-top: 1.5rem; }   /* gap before each new year */
.essay-rows li:first-child { margin-top: 0; }
.essay-rows .year { flex: 0 0 5rem; color: #999; }  /* fixed-width year column */

/* ==========================================================================
   Ported utility classes from the classic style.css. Writing content (essays,
   threads, blog) uses these, and Tufte pages no longer load style.css.
   ========================================================================== */
.post + .post { margin-top: 50px; }

.footer {
  font-size: 1.1rem;
  line-height: 1.5;
  color: #555;
}

.image {
  display: block;
  margin: 2rem auto;
  width: 500px;
  max-width: 100%;
}
.image2 {
  display: block;
  margin: 1.3rem auto 0;
  width: 400px;
  max-width: 100%;
}
.image3 {
  display: block;
  margin: 0 auto;
  width: 400px;
  max-width: 100%;
}
.image_blog {
  display: block;
  margin: 2rem auto;
  width: 500px;
  max-width: 100%;
  border: 1px solid #000;
}