/* Article typography: serif for reading body */
.prose{
  font-family: var(--font-serif);
  max-width: var(--content-max);
}

/* Headings rhythm */
.prose h1, .prose h2, .prose h3, .prose h4{
  font-family: var(--font-serif);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  margin: 1.35rem 0 0.55rem 0;
}

.prose h1{ font-size: 2.1rem; margin-top: 0; letter-spacing: -0.02em; }
.prose h2{ font-size: 1.55rem; margin-top: 1.7rem; }
.prose h3{ font-size: 1.2rem;  margin-top: 1.25rem; }
.prose h4{ font-size: 1.05rem; margin-top: 1.1rem; }

.prose p{
  margin: 0.95rem 0;
}

/* Better spacing after headings */
.prose h2 + p, .prose h3 + p, .prose h4 + p{
  margin-top: 0.6rem;
}

/* Links inside prose: readable, not screaming */
.prose a{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose a:hover{
  color: var(--link-hover);
}

/* Blockquotes: subtle editorial */
.prose blockquote{
  margin: 1.25rem 0;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--hairline);
  color: rgba(28,28,28,0.82);

  background: rgba(28,28,28,0.03);
  border-radius: 10px;
}
.prose blockquote p{
  margin: 0.75rem 0;
}

/* Code: calm */
.prose code{
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(28,28,28,0.045);
  border: 1px solid rgba(28,28,28,0.08);  
  border-radius: 8px;
  padding: 0.08em 0.35em;
}

.prose pre{
  font-family: var(--font-mono);
  font-size: 0.92em;
  line-height: 1.55;
  padding: 0.95rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: auto;
  background: rgba(28,28,28,0.025);
}
.prose pre code{
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}

/* Lists */
.prose ul, .prose ol{
  margin: 0.95rem 0 0.95rem 1.25rem;
  padding: 0;
}
.prose li{
  margin: 0.38rem 0;
}
.prose li > ul, .prose li > ol{
  margin-top: 0.45rem;
  margin-bottom: 0.45rem;
}

/* Horizontal rule */
.prose hr{
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 1.6rem 0;
}

/* Tables (future-proof) */
.prose table{
  width: 100%;
  border-collapse: collapse;
  margin: 1.1rem 0;
  font-family: var(--font-ui);
  font-size: var(--text-small);
}
.prose th, .prose td{
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  padding: 0.55rem 0.35rem;
}
.prose th{
  color: var(--fg);
}

/* TOC layout: mobile collapsible, desktop sticky sidebar */
.article-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 980px){
  .article-grid{
    grid-template-columns: 1fr 260px;
    align-items: start;
  }
}

.toc{
  font-family: var(--font-ui);
  font-size: var(--text-small);
  color: var(--muted);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 0.75rem 0.85rem;

  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(6px);
}

.toc a{
  color: inherit;
  text-decoration: none;
}
.toc a:hover{
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.toc ul{
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
}

.toc li{
  margin: 0.35rem 0;
  line-height: 1.4;
}

.toc-title{
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 0.35rem;
}

.toc-l3{
  padding-left: 0.9rem;
  opacity: 0.95;
}

/* Mobile: show <details> TOC, hide sidebar */
.toc-mobile{ margin-bottom: 1rem; }
.toc-mobile summary{
  cursor: pointer;
  color: var(--fg);
  font-weight: 600;
}
.toc-desktop{ display: none; }

@media (min-width: 980px){
  .toc-mobile{ display: none; }
  .toc-desktop{
    display: block;
    position: sticky;
    top: 18px;
  }
}

/* Print: make it look like a book page */
@media print{
  header.site-header, nav, .toc, .footer{ display:none !important; }
  body{ font-size: 12pt; }
  .container{ max-width: none; padding: 0; }
  .reading, .reading-wide, .prose{ max-width: none; }
  a{ color: inherit; text-decoration: none; }
}

/* --- C7 micro-polish: prose refinements --- */
.prose a{
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose a:hover{
  color: var(--link-hover);
}

/* Slightly softer heading rhythm */
.prose h2{ margin-top: 1.85rem; }
.prose h3{ margin-top: 1.35rem; }

/* Make TOC links feel clickable */
.toc a{
  padding: 0.12rem 0;
  display: inline-block;
}

.prose img{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.15rem auto;
  border-radius: 14px;
  border: 1px solid var(--hairline);
}

/* --- Small fix: readable blockquotes in dim mode --- */
:root[data-theme="dim"] .prose blockquote{
  color: #f0eadf;
  background: rgba(255,255,255,0.07);
  border-left: 3px solid rgba(255,255,255,0.18);
}

:root[data-theme="dim"] .prose blockquote p{
  color: inherit;
}

/* --- Small fix: prevent sideways scrolling on article pages --- */
.prose,
.prose p,
.prose li,
.prose blockquote,
.prose td,
.prose th{
  overflow-wrap: anywhere;
  word-break: break-word;
}

.prose pre{
  overflow-x: auto;
  max-width: 100%;
}

.prose table{
  display: block;
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.prose img{
  max-width: 100%;
  height: auto;
}

.article-grid{
  min-width: 0;
}

.prose{
  min-width: 0;
}