:root{
  /* One knob to set your reading width */
  --content-max: 1080px; /* try 1000–1120 if you want narrower/wider */
}

/* Typography */
body {
  font-family: -apple-system-ui-serif, 'Iowan Old Style', 'Palatino', 'Georgia', 'Times New Roman', serif;
  line-height: 1.65;
  color: #111;
}

/* Links */
a { text-decoration: none; border-bottom: 1px dotted rgba(0,0,0,0.25); }
a:hover { border-bottom-style: solid; }

/* Code */
code, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
}

/* === Unified width & centering (nav + content align) ================== */

/* Align the header/footer/main wrappers to the same max width */
.site-header .wrapper,
.page-content .wrapper,
.site-footer .wrapper {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Override Minima’s narrow .post/.page cap and center the column */
.post, .page {
  max-width: var(--content-max) !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Keep the header and body of posts aligned with the same width */
.post-header,
.post-content {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Blog index list uses the same width */
.home .post-list {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* If you wrapped a post body in .post-body, inherit the same width */
.post-body {
  max-width: inherit;
  margin-left: auto;
  margin-right: auto;
}

/* Images scale and center */
.post-content img, .page-content img, .post-body img {
  display: block;
  margin: 1rem auto;
  height: auto;
  max-width: 100%;
}

/* Optional: tiny bump on very large screens */
@media (min-width: 1600px) {
  :root { --content-max: 1120px; }
}

/* --- Post typography (text inside blog posts only) --- */
.post .post-content {
  font-size: 1.08rem;         /* e.g., 1.00–1.16rem feels good */
  line-height: 1.75;
}
.post .post-content p { margin: 0.9rem 0; }

/* Headings inside posts */
.post .post-content h1 { font-size: 2.0rem; margin-top: 2.0rem; }
.post .post-content h2 { font-size: 1.6rem; margin-top: 1.6rem; }
.post .post-content h3 { font-size: 1.3rem; margin-top: 1.3rem; }

/* Code blocks in posts */
.post .post-content pre,
.post .post-content code {
  font-size: 0.92rem;
  line-height: 1.6;
}

/* Slightly larger on very big screens */
@media (min-width: 1400px) {
  .post .post-content { font-size: 1.12rem; }
}

/* === Mobile polish ======================================================= */

/* Smaller side padding on phones */
@media (max-width: 820px) {
  .site-header .wrapper,
  .page-content .wrapper,
  .site-footer .wrapper {
    padding-left: 16px;
    padding-right: 16px;
  }

  body { font-size: 18px; line-height: 1.7; }

  /* Let content use the full width on phones */
  .post, .page, .home, .post-body { max-width: 100%; }
}

/* Very small phones: keep nav usable and prevent wrap chaos */
@media (max-width: 480px) {
  body { font-size: 17px; }
  .site-nav {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

/* Code blocks: horizontal scroll instead of breaking lines */
pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tables: allow horizontal scroll on small screens */
table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* MathJax (CHTML) display equations: allow sideways scroll if too wide */
mjx-container[jax="CHTML"] {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 480px) {
  mjx-container[jax="CHTML"] { font-size: 0.96em; }
}

/* Search results look tidy */
#search-results { list-style: none; padding-left: 0; }
#search-results li a { border-bottom: none; }
#search-results mark { background: #fffa90; padding: 0 .15em; }

.search-box { margin: 1rem 0 0.5rem; }
.search-label { display:block; font-weight:600; margin-bottom:0.25rem; }
#q {
  width: 100%; max-width: 640px; padding: .6rem .75rem;
  border: 1px solid rgba(0,0,0,.2); border-radius: .375rem;
}
.search-meta { color:#666; font-size:.9rem; margin:.5rem 0 1rem; }
.search-results { display:grid; gap: 1rem; }
.search-hit h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
.search-hit-meta { color:#777; font-size:.85rem; margin-bottom:.25rem; }
.search-hit-snippet { margin:0; line-height:1.45; }
.search-hit mark { background: #fff1a8; }

/* Mild callout for brief notices */
blockquote {
  background: #f9fafb;
  border-left: 4px solid #d1d5db;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
}

/* More breathing room below collapsible blocks (posts + pages) */
.post-content details,
.page-content details {
  margin: 0.25rem 0 1.25rem;
}
/* Extra space if a separator follows immediately */
.post-content details + hr,
.page-content details + hr {
  margin-top: 1.25rem;
}
/* Baseline spacing for all <hr> so separators aren't cramped anywhere */
.post-content hr,
.page-content hr {
  margin: 1.25rem 0;
} 

/* === Readable callouts =================================================== */
blockquote.callout {
  /* layout */
  padding: 0.9rem 1.05rem;
  margin: 1rem 0;
  border-radius: 10px;

  /* readability */
  font-style: normal;              /* kill the global blockquote italics */
  color: #1f2937;                  /* darker text */
  line-height: 1.7;
  border-left-width: 5px;          /* slightly stronger “rule” */
}

/* Make the leading bold bit pop but not shout */
blockquote.callout strong {
  color: #111;                     /* extra contrast for the label */
  font-weight: 700;
}

/* Palette (kept soft, but a hair more contrast than before) */
:root{
  --c-award: #b45309;               /* amber-700 */
  --bg-award: rgba(245, 158, 11, .11);   /* ~11% tint */
  --c-philo: #1d4ed8;               /* indigo-700 */
  --bg-philo: rgba(59, 130, 246, .11);   /* ~11% tint */
}

blockquote.callout.award {
  border-left: 5px solid var(--c-award);
  background: var(--bg-award);
}
blockquote.callout.philosophy {
  border-left: 5px solid var(--c-philo);
  background: var(--bg-philo);
}

/* Links inside callouts should be clearly visible */
blockquote.callout a {
  color: inherit;
  border-bottom-color: rgba(0,0,0,.35);
}

/* Slightly deeper tints in dark mode */
@media (prefers-color-scheme: dark) {
  blockquote.callout { color: #e5e7eb; }
  blockquote.callout.award { background: rgba(245,158,11,.18); }
  blockquote.callout.philosophy { background: rgba(59,130,246,.18); }
}