/* Minimal base usage so pages look correct even without your main CSS updated yet */
  body { background: var(--bg); color: var(--fg); }
  a { color: var(--link); }
  hr { border-color: var(--border); }
  .card { background: var(--card); }

  .twitter-tweet-rendered {
    display:block;
    margin-left:auto;
    margin-right:auto;
  }
  .inline-svg {
    display: inline-block;
    height: 1.0rem;
    width: 1.0rem;
    top: 0.15rem;
    position: relative;
    fill: var(--muted);
  }
  .inline-svg:hover {
    fill: var(--fg);
    height: 1.0rem;
    width: 1.0rem;
  }
  .inline-svg#pdf {
    fill: #de2d26;
  }
  .inline-svg#pdf:hover {
    fill: #fc9272;
  }
  .inline-svg#data {
    fill: #1c9099;
  }
  .inline-svg#data:hover {
    fill: #a6bddb;
  }
  
/* ---- Typography (keep your Times stack) ---- */
:root {
  --content-width: 85ch;     /* wider but still readable */
}

.post-image { max-width: 100%; height: auto; display: block; margin: 1rem auto; }

  /* body { margin:0; padding:2rem 1rem; background:#fff; color:#111;
         font:16px/1.55 Georgia, "Times New Roman", serif; } */
html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji","Segoe UI Emoji";
  /* font-family: Georgia, "Times New Roman", Times, serif; */ /* 2000s's HTML style */ 
  /* font-family: serif; */ /* 1990's HTML style */ 
  font-size: 100%;
  line-height: 1.5;
  color: var(--fg);
}

/* Headings & basic elements */
h1, h2, h3, h4, h5, h6, p {
  font-family: inherit;
}

h1 {
  font-size: 1.5em;   /* instead of ~2.5em default */
  margin-top: 1.2em;
  margin-bottom: 0.6em;
}

h2 { font-size: 1.25em; }
h3 { font-size: 1.1em; }

/* Paragraphs & lists (unified) */
p, .sidebar, ol, ul, dl, content {
  line-height: 1.6;
  font-size: 1.05em;
  margin-bottom: 1.0em;
}

/* Body layout */
body {
  margin: 0 auto;
  padding: 20px;
  max-width: var(--content-width);
  text-align: left;
  background: var(--bg);
  color: var(--fg);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Emphasis */
h1,h2,h3,h4,h5,h6,strong,b { color: var(--fg); }

/* Links */
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link); text-decoration: underline; }
/* optional visited nuance */
ul.blog-posts li a:visited { color: var(--link-visited); }

/* Title links */
.title { font-size: 1.15em; border: 0; }
.title:hover { text-decoration: none; }
.title span { font-weight: 400; }

/* Nav spacing */
nav a { margin-right: 10px; }

/* Form controls */
textarea, input { width: 100%; font-size: 16px; }

/* Tables/images/code */
table { width: 100%; }
img { max-width: 100%; height: auto; }

code {
  padding: 2px 5px;
  background: var(--code-bg); 
  color: var(--code-fg);
}

pre code {
  color: var(--code-fg);
  display: block;
  padding: 20px;
  white-space: pre-wrap;
  font-size: 14px;
  overflow-x: auto;           /* prevent layout blowouts */
}

/* Blockquotes */
blockquote {
  border-left: 1px solid var(--border);
  color: var(--fg);
  padding-left: 20px;
  font-style: italic;
}

/* Footer & helpers */
footer { padding: 25px; text-align: center; }
.helptext { color: var(--muted); font-size: small; }
.errorlist { color: #eba613; font-size: small; }

/* Blog list */
ul.blog-posts { list-style-type: none; padding: 0; }
ul.blog-posts li { display: flex; }
ul.blog-posts li span { flex: 0 0 130px; }
ul.blog-posts li a:visited { color: #8b6fcb; }

/* Optional: widen slightly on very large screens */
@media (min-width: 1280px) {
  :root { --content-width: 95ch; }
}